*, html {

    scroll-behavior: smooth !important;
}

body {
        font-family: 'Scandia', sans-serif !important;
      }

      h1,
      h2,
      h3 {
        font-family: 'Scandia', sans-serif !important;
      }

      .section-image {
        border: 0px solid #ffcc00;
        width: auto;
        height: auto;
      }

      .uk-navbar-container {
        background-color: transparent;
        color: #FFF;
        z-index: 10000;
        position: relative;
        /* Varsayılan beyaz arka plan */
        transition: background-color 0.5s ease;
        /* Arka planın yavaşça değişmesini sağlarız */
      }

      .uk-navbar-nav li a {
        text-transform: none;
        font-family: 'Scandia', sans-serif !important;
        font-size: 15px;
        letter-spacing: 0.021em;
        color: #FFF;
        /* Varsayılan yazı rengi */
        transition: color 0.3s ease;
        /* Yazı renginin geçişi */
      }

      .uk-navbar-item img {
        transition: filter 0.3s ease;
        /* Logo renginin değişmesi */
      }

      .uk-navbar-nav li a:hover,
      .uk-navbar-nav li.uk-active a {
        color: #ffcc00 !important;
        /* Menü öğelerine hover yapılınca yazı beyaz olacak */
      }

      .uk-navbar-container:hover {
        background-color: #000;
        /* Navbar'a hover yapıldığında arka plan siyah olacak */
      }

      .uk-navbar-container:hover .uk-navbar-nav li a {
        color: #fff;
        /* Navbar'a hover yapıldığında tüm yazılar beyaz olacak */
      }

      .uk-navbar-container:hover .uk-navbar-item img {
        filter: invert(0%);
        /* Logo beyaz olacak */
      }

      .gradient-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%);
        z-index: 1;
      }

      .slideshow-container {
        position: relative;
      }

      .slideshow-container img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
      }

      /* Linklere genel stil */
      .uk-navbar-dropdown-nav li a {
        position: relative;
        display: inline-block;
        padding: 5px;
        text-decoration: none;
        /* Alt çizgiyi kaldır */
        color: #333;
        /* Renk seçimi */
      }

      /* Hover efekti */
      .uk-navbar-dropdown-nav li a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        /* Çizginin kalınlığı */
        background-color: #FFF;
        /* Çizgi rengi */
        transition: width 0.3s ease;
        /* Geçiş süresi */
      }

      /* Hover durumunda çizginin genişlemesi */
      .uk-navbar-dropdown-nav li a:hover::after {
        width: 100%;
      }

      /* Navbar başlıkları arasına boşluk ekleme */
      .uk-navbar-nav>li {
        margin-right: 20px;
        /* Başlıklar arasındaki mesafe */
      }

      /* Son öğe için margin-right'ı kaldırma */
      .uk-navbar-nav>li:last-child {
        margin-right: 0;
      }

      .product-list {
        display: none;
        /* max-height: 514px; Sabit yükseklik */
        overflow-y: auto;
        width: 1000px !important;
        /* Kaydırılabilirlik */
      }

      .brand-link-content {
        flex: 1;
      }

      .brand-link.active {
        text-decoration: none;
        font-family: 'Scandia', sans-serif !important;
        color: #000;
      }

      .brand-link {
        display: flex;
        /* İçerikleri hizalar */
        align-items: center;
        /* Dikey ortalama */
        text-decoration: none;
        /* Link altı çizgiyi kaldırır */
      }

      .category-link.active {
        text-decoration: none;
        color: #000;
      }

      .category-link {
        display: flex;
        /* İçerikleri hizalar */
        align-items: center;
        /* Dikey ortalama */
        text-decoration: none;
        /* Link altı çizgiyi kaldırır */
      }

      .brand-text {
        display: flex;
        flex-direction: column;
        /* Metinleri dikey yerleştirir */
        margin-right: auto;
        /* İkonu sağda tutar */
      }

      .brand-title {
        font-family: 'Scandia', sans-serif !important;
      }

      .brand-subtitle {
        font-weight: normal;
      }

      .brand-homesubtitle {
        font-weight: normal;
        font-size: 12px;
        padding-bottom: 7px;
      }

      a.brand-cat-subtitle {
        font-weight: normal;
      }

      .brand-cat-subtitle.active {
        font-weight: bold;
        color: #000;
      }

      .item-link {
        font-weight: bold;
        display: block;
      }

      .subtext {
        display: block;
        margin-top: 4px;
        /* Satırlar arasında boşluk bırakmak için */
        font-weight: normal;
        /* Alt metnin kalın olmaması için */
      }

      .brand-link span.uk-margin-small-right,
      .category-link span.uk-margin-small-right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      /* Aktif durumda olan marka veya kategori */
      .brand-link.active::after,
      .category-link.active::after,
      .brand-link.highlight::after,
      .category-link.highlight::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ffcc00;
        /* Çizgi rengi */
      }

      .brand-link.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        margin-bottom: 5px;
        background-color: #ffcc00;
        /* Çizgi rengi */
      }

      .uk-nav-sub a {
        display: block;
        padding: 5px 0;
      }

      /* Bağlantı için varsayılan stil */
      a.link-effect {
        font-family: 'Scandia', sans-serif !important;
        position: relative;
        color: #888;
        /* Varsayılan metin rengi */
        text-decoration: none;
        /* Alt çizgiyi kaldırıyoruz */
        font-size: 19px;
        /* Bağlantı metni boyutu */
        padding-bottom: 5px;
        /* Altına biraz boşluk bırakıyoruz */
        display: inline-block;
        /* Bağlantıyı blok seviyesine getiriyoruz */
      }

      /* Bağlantının altındaki çizgi */
      a.link-effect::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 2px;
        background-color: #ffcc00;
        /* Çizgi rengi */
        transition: width 0.3s ease;
        /* Kayan çizgi animasyonu */
      }

      /* Bağlantı üzerine gelindiğinde çizgi genişlesin */
      a.link-effect:hover::after {
        width: 100%;
        /* Çizgi tam genişliğe ulaşacak */
      }

      /* Üzerine gelindiğinde metin rengi değişiyor */
      a.link-effect:hover {
        color: #ffcc00;
        /* Renk değişikliği */
      }
	  
	  /* Bağlantı için varsayılan stil */
      a.slider-link-effect {
        font-family: 'Scandia', sans-serif !important;
        letter-spacing: 0.02em;
        position: relative;
        color: #fff;
        /* Varsayılan metin rengi */
        text-decoration: none;
        /* Alt çizgiyi kaldırıyoruz */
        font-size: 19px;
        /* Bağlantı metni boyutu */
        padding-bottom: 5px;
        /* Altına biraz boşluk bırakıyoruz */
        display: inline-block;
        /* Bağlantıyı blok seviyesine getiriyoruz */
      }

      /* Bağlantının altındaki çizgi */
      a.slider-link-effect::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 2px;
        background-color: #ffcc00;
        /* Çizgi rengi */
        transition: width 0.3s ease;
        /* Kayan çizgi animasyonu */
      }

      /* Bağlantı üzerine gelindiğinde çizgi genişlesin */
      a.slider-link-effect:hover::after {
        width: 100%;
        /* Çizgi tam genişliğe ulaşacak */
      }

      /* Üzerine gelindiğinde metin rengi değişiyor */
      a.slider-link-effect:hover {
        color: #ffcc00;
        /* Renk değişikliği */
      }


.effect-container-right {
  display: flex;
  position: relative;
  overflow: hidden;
  margin-bottom:45px;
}

.column-right {
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.effect-container-right:hover .column-right {
 
}

.effect-container-right:hover .column-right:nth-child(1) {
  
}

.effect-container-right::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 51.5%;
  width: 0;
  height: 2px; /* Çizgi kalınlığı */
  background: linear-gradient(90deg, #000, #000); /* Renk geçişi */
  transition: width 0.3s ease;
}

.effect-container-right:hover::before {
  width: 100%; /* Çizginin genişlemesi */
}



.effect-container-left {
  display: flex;
  position: relative;
  overflow: hidden;
  margin-bottom:45px;
}

.column-left {
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.effect-container-left:hover .column-left {
 
}

.effect-container-left:hover .column-left:nth-child(1) {
  
}

.effect-container-left::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 51.5%;
  width: 0;
  height: 2px; /* Çizgi kalınlığı */
  background: linear-gradient(90deg, #000, #000); /* Renk geçişi */
  transition: width 0.3s ease;
}

.effect-container-left:hover::before {
  width: 100%; /* Çizginin genişlemesi */
}

/* mobile */

.mobile-effect-container-right {
  display: flex;
  position: relative;
  overflow: hidden;
  margin-bottom:45px;
}

.mobile-column-right {
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.mobile-effect-container-right:hover .column-right {
 
}

.mobile-effect-container-right:hover .column-right:nth-child(1) {
  
}

.mobile-effect-container-right::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 51.5%;
  width: 0;
  height: 0px; /* Çizgi kalınlığı */
  background: linear-gradient(90deg, #000, #000); /* Renk geçişi */
  transition: width 0.3s ease;
}

.mobile-effect-container-right:hover::before {
  width: 100%; /* Çizginin genişlemesi */
}



.mobile-effect-container-left {
  display: flex;
  position: relative;
  overflow: hidden;
  margin-bottom:45px;
}

.mobile-column-left {
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.mobile-effect-container-left:hover .column-left {
 
}

.mobile-effect-container-left:hover .column-left:nth-child(1) {
  
}

.mobile-effect-container-left::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 51.5%;
  width: 0;
  height: 0px; /* Çizgi kalınlığı */
  background: linear-gradient(90deg, #000, #000); /* Renk geçişi */
  transition: width 0.3s ease;
}

.mobile-effect-container-left:hover::before {
  width: 100%; /* Çizginin genişlemesi */
}

  
      .brand-name {
        font-size: 16px;
        font-weight: bold;
        display: block !important;
        border-bottom: 1px solid #ffcc00;
      }

      .menusubtext {
        font-size: 12px;
        color: #888;
        margin-top: 0px;
        display: block;
        /* Bu satır eklenerek alt satıra geçirilir */
      }

      .product-list-grid-surgu-kapi {
        display: flex;
        gap: 10px;
        /* Sütunlar arasındaki boşluk */
        flex-wrap: wrap;
        /* Sütunlar taşarsa bir alt satıra geçsin */
      }

      .product-column-surgu-kapi {
        display: flex;
        flex-direction: column;
        gap: 5px;
        /* Ürünler arasındaki boşluk */
      }

      .product-list-grid-surgu-kapak {
        display: flex;
        gap: 10px;
        /* Sütunlar arasındaki boşluk */
        flex-wrap: wrap;
        /* Sütunlar taşarsa bir alt satıra geçsin */
      }

      .product-column-surgu-kapak {
        display: flex;
        flex-direction: column;
        gap: 5px;
        /* Ürünler arasındaki boşluk */
      }

      .product-list-grid-perfect-kapi {
        display: flex;
        gap: 10px;
        /* Sütunlar arasındaki boşluk */
        flex-wrap: wrap;
        /* Sütunlar taşarsa bir alt satıra geçsin */
      }

      .product-column-perfect-kapi {
        display: flex;
        flex-direction: column;
        gap: 5px;
        /* Ürünler arasındaki boşluk */
      }

      .product-list-grid-peka-kiler {
        display: flex;
        gap: 10px;
        /* Sütunlar arasındaki boşluk */
        flex-wrap: wrap;
        /* Sütunlar taşarsa bir alt satıra geçsin */
      }

      .product-column-peka-kiler {
        display: flex;
        flex-direction: column;
        gap: 5px;
        /* Ürünler arasındaki boşluk */
      }

/* Spinner kaplama kontrolü */
#video-loader {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    pointer-events: none;
}

#video-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.uk-breadcrumb a { font-size:15px !important; font-family: 'Scandia', sans-serif !important; }

.table-container {
            display: flex;
            align-items: flex-start;
            gap: 30px;
			padding:0px 0px 0px 0px;
			margin:0px 0px 20px 0px;
			font-size:13px;
			border-bottom:1px dashed #E5E5E5;
        }
        .product-photo {
            flex: 1;
            max-width: 500px; /* Fotoğraf boyutunu sınırlayın */
        }
        .product-photo img {
            width: 100%;
            height: auto;
        }
        .product-info {
            flex: 3;
        }
        .accordion-content {
            flex: 2;
			max-width:170px;
        }
		.uk-accordion-title { font-size:15px;font-weight:600; }
		
.custom-media {
    width: 100%;
    height: auto;
    object-fit: contain; /* Orijinal oranları korur */
    background-color: #000; /* Siyah arka plan */
}