@media (max-width:320px){
 
}

@media (min-width:321px){ 
  .banner{height: 300px; background:url('/images/banner.webp'); background-position: center; background-size: cover; background-repeat: no-repeat;}
  .bannerpd{padding-top: 200px;}
  .kategoribaslik{background-color: #d3ad71; color: white; font-size: 35px; padding: 20px 25px; border-radius: 10px 10px 0 0; min-height: 60px; margin-top: 20px;}
  .sayfabaslik{font-size: 20px; color:white; background-color: #003087; padding:20px 30px}
  .icsayfabaslik{font-size: 30px; color:white;}
  .breadpd{margin-top:0px}
  .icerik{margin-top:-100px;}

  .kurumsalbg{height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; }
  .kurumsaltitle{border-bottom: 5px solid #003087; display: inline-block; font-size: 30px; margin-top:290px}
  .kurumsaltext{font-size: 18px;}

  .istatistiksayi{font-size: 50px;}
  .isaret{font-size: 20px;}
  .istatistiktext{color:#717195; font-size: 20px;}

  .iletisimtitle{font-size:30px}
  .urunbanner{height: 100px; background-color: #363643;}
  .uruntitle{font-size: 30px;}
  .uruntext{font-size: 16px;}
  .baslik{font-size: 25px; border-left: 13px solid #d9dee3; padding-left:30px;}
  .urunbutonbg{background-color: transparent; color:white; font-size: 16px; font-weight: 400; height: 50px; padding: 0px 10px;}
  .sticky-nav{margin-top: -50px;}
  .fs20mobil{font-size:16px}

  .uretimbaslik{font-size:20px;}
  .uretimtext{font-size: 16px;}
  .aksesuarbg{height: 550px;}
  .kurumsalyazibg{height: 100%;}

  
  .mavibar{height: 150px; width: 100%; background-color: #00308744;}
  .sekmebaslik{font-size: 25px; color: #222d42; font-weight: 500;}
  .aksesuarbaslik{font-size:25px; color:#222d42}
  .aksesuar-icerik {font-size: 16px;}
  .videobarheight{height: 200px;}
  .tofs{font-size: 18px;}
}

@media(min-width:640px){
  .banner{height: 320px; background:url('/images/banner.webp'); background-position: center; background-size: cover; background-repeat: no-repeat;}
  .bannerpd{padding-top: 200px;}
  .kategoribaslik{background-color: #d3ad71; color: white; font-size: 35px; padding: 20px 25px; border-radius: 10px 10px 0 0; min-height: 60px;}
  .sayfabaslik{font-size: 30px; color:white; background-color: #003087; padding:20px 30px}
  .icsayfabaslik{font-size: 30px; color:white;}
  .icerik{margin-top:-100px;}

  
  .kurumsalbg{height: 100vh;  background-position: center; background-size: cover; background-repeat: no-repeat;}
  .kurumsaltitle{border-bottom: 5px solid #003087; display: inline-block; font-size: 32px; margin-top:220px}
  .kurumsaltext{font-size: 20px;}

  .iletisimtitle{font-size:34px}
  .urunbanner{height: 100px; background-color: #363643;}
  .uruntitle{font-size: 30px;}
  .uruntext{font-size: 17px;}
  .baslik{font-size: 28px; border-left: 13px solid #d9dee3; padding-left:30px;}
  .urunbutonbg{background-color: transparent; color:white; font-size: 20px; font-weight: 400; height: 100px; padding: 0px 10px;}
  .sticky-nav{margin-top: -100px;}
  .fs20mobil{font-size:17px}
  .aksesuarbg{height: 550px;}
  .kurumsalyazibg{height: 100%;}
  
  .mavibar{height: 150px; width: 100%; background-color: #00308744;}
  .sekmebaslik{font-size: 25px; color: #222d42; font-weight: 500;}
  .aksesuarbaslik{font-size:25px; color:#222d42}
  .aksesuar-icerik {font-size: 20px;}
  .videobarheight{height: 300px;}
  .tofs{font-size: 18px;}
}

@media(min-width:960px){
  .banner{height: 340px; background:url('/images/banner.webp'); background-position: center; background-size: cover; background-repeat: no-repeat;}
  .bannerpd{padding-top: 200px;}
  .kategoribaslik{background-color: #d3ad71; color: white; font-size: 35px; padding: 20px 25px; border-radius: 10px 10px 0 0; min-height: 60px;}
  .sayfabaslik{font-size: 30px; color:white; background-color: #003087; padding:20px 30px}
  .icsayfabaslik{font-size: 30px; color:white;}
  .icerik{margin-top:-100px;}

  .kurumsaltitle{border-bottom: 5px solid #003087; display: inline-block; font-size: 34px; margin-top:220px}
  .kurumsaltext{font-size: 19px;}

  .istatistiksayi{font-size: 65px;}
  .isaret{font-size: 30px;}
  .istatistiktext{color:#717195; font-size: 20px;}

  .iletisimtitle{font-size:36px}
  .urunbanner{height: 100px; background-color: #363643;}
  .uruntitle{font-size: 34px;}
  .uruntext{font-size: 18px;}
  .baslik{font-size: 32px; border-left: 13px solid #d9dee3; padding-left:30px;}
  .urunbutonbg{background-color: transparent; color:white; font-size: 22px; font-weight: 400; height: 100px; padding: 0px 10px;}
  .sticky-nav{margin-top: -100px;}
  .fs20mobil{font-size:18px}
  .aksesuarbg{height: 550px;}
  .kurumsalyazibg{height: 100%;}

  .mavibar{height: 150px; width: 100%; background-color: #00308744;}
  .sekmebaslik{font-size: 25px; color: #222d42; font-weight: 500;}
  .aksesuarbaslik{font-size:25px; color:#222d42}
  .aksesuar-icerik {font-size: 18px;}
  .videobarheight{height: 350px;}
  .tofs{font-size: 22px;}
}

@media(min-width:1200px){
  .banner{height: 440px; background:url('/images/banner.webp'); background-position: center; background-size: cover; background-repeat: no-repeat;}
  .bannerpd{padding-top: 355px;}
  .kategoribaslik{background-color: #d3ad71; color: white; font-size: 35px; padding: 20px 25px; border-radius: 10px 10px 0 0; min-height: 60px; margin-top: 0px;}
  .sayfabaslik{font-size: 30px; color:white; background-color: #003087; padding:20px 30px}
  .icsayfabaslik{font-size: 30px; color:white;}
  .breadpd{margin-top: 20px;}
  .icerik{margin-top:-100px;}
  .kurumsaltitle{border-bottom: 5px solid #003087; display: inline-block; font-size: 40px; margin-top:220px}
  .kurumsaltext{font-size: 20px;}
  .istatistiksayi{font-size: 80px;}
  .isaret{font-size: 35px;}
  .istatistiktext{color:#717195; font-size: 23px;}
  .iletisimtitle{font-size:40px}
  .urunbanner{height: 170px; background-color: #363643;}
  .uruntitle{font-size: 38px;}
  .uruntext{font-size: 19px;}
  .baslik{font-size: 35px; border-left: 13px solid #d9dee3; padding-left:30px;}
  .urunbutonbg{background-color: transparent; color:white; font-size: 22px; font-weight: 400; height: 100px; padding: 0px 10px;}
  .sticky-nav{margin-top: -100px;}
  .fs20mobil{font-size:19px}

  .uretimbaslik{font-size:22px;}
  .uretimtext{font-size: 18px;}
  .aksesuarbg{height: 650px;}
  .kurumsalyazibg{height: 100%;}

  .mavibar{height: 150px; width: 100%; background-color: #00308744;}
  .sekmebaslik{font-size: 27px; color: #222d42; font-weight: 500;}
  .aksesuarbaslik{font-size:27px; color:#222d42}
  .aksesuar-icerik {font-size: 20px;}
  .videobarheight{height: 400px;}
  .tofs{font-size: 24px;}

  .teknikozellikmargin{margin-top:-90px;}
}

@media(min-width:1400px){
  .banner{height: 440px; background:url('/images/banner.webp'); background-position: center; background-size: cover; background-repeat: no-repeat;}
  .bannerpd{padding-top: 355px;}
  .kategoribaslik{background-color: #d3ad71; color: white; font-size: 35px; padding: 20px 25px; border-radius: 10px 10px 0 0; min-height: 60px;}
  .sayfabaslik{font-size: 30px; color:white; background-color: #003087; padding:20px 30px}
  .icsayfabaslik{font-size: 30px; color:white;}
  .icerik{margin-top:-100px;}

  .kurumsaltitle{border-bottom: 5px solid #003087; display: inline-block; font-size: 50px; margin-top:220px}
  .kurumsaltext{font-size: 22px;}
  .urunbanner{height: 170px; background-color: #363643;}
  .uruntitle{font-size: 40px;}
  .uruntext{font-size: 20px;}
  .baslik{font-size: 40px; border-left: 13px solid #d9dee3; padding-left:30px;}
  .urunbutonbg{background-color: transparent; color:white; font-size: 25px; font-weight: 400; height: 100px; padding: 0px 10px;}
  .sticky-nav{margin-top: -100px;}
  .fs20mobil{font-size:20px}
  .aksesuarbg{height: 730px; margin-top:-200px; margin-bottom:-100px;}
  .kurumsalyazibg{height: 100%;}

  .mavibar{height: 150px; width: 100%; background-color: #00308744;}
  .sekmebaslik{font-size: 28px; color: #222d42; font-weight: 500;}
  .aksesuarbaslik{font-size:28px; color:#222d42}
  .aksesuar-icerik {font-size: 20px;}
  .videobarheight{height: 400px;}
  .tofs{font-size: 26px;}

  .teknikozellikmargin{margin-top:-90px;}
}

@media(min-width:1600px){
  .banner{height: 440px; background:url('/images/banner.webp'); background-position: center; background-size: cover; background-repeat: no-repeat;}
  .bannerpd{padding-top: 355px;}
  .kategoribaslik{background-color: #d3ad71; color: white; font-size: 35px; padding: 20px 25px; border-radius: 10px 10px 0 0; min-height: 60px;}
  .sayfabaslik{font-size: 30px; color:white; background-color: #003087; padding:20px 30px;}
  .icsayfabaslik{font-size: 30px; color:white;}
  .icerik{margin-top:-100px;}

  .kurumsalbg{height: 100vh;  background-size: cover; background-repeat: no-repeat;}
  .kurumsaltitle{border-bottom: 5px solid #003087; display: inline-block; font-size: 50px; margin-top:300px}
  .kurumsaltext{font-size: 25px;}

  .istatistiksayi{font-size: 100px;}
  .isaret{font-size: 40px;}
  .istatistiktext{color:#717195; font-size: 25px;}
  .urunbanner{height: 170px; background-color: #363643;}
  .uruntitle{font-size: 50px;}
  .uruntext{font-size: 22px;}
  .urunbutonbg{background-color: transparent; color:white; font-size: 25px; font-weight: 400; height: 100px; padding: 0px 0px;}
  .sticky-nav{margin-top: -100px;}


  .mavibar{height: 150px; width: 100%; background-color: #00308744;}
  .sekmebaslik{font-size: 35px; color: #222d42; font-weight: 500;}
  .aksesuarbaslik{font-size:32px; color:#222d42}
  .aksesuar-icerik {font-size: 24px;}
  .kurumsalyazibg{height: 100%;}
  .videobarheight{height: 400px;}
  .tofs{font-size: 30px;}

  .teknikozellikmargin{margin-top:-90px;}
}

.divider{border-right: 1px solid black; height: 300px; position: absolute; left: 45%;}

.uk-width-expand:first-of-type::before {
  display: none;
}

.uk-grid-divider>:not(.uk-first-column)::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-left: 1px solid #222222;
}


.iletisimbgrenk{background-color: #003087;}
.itextrenk{color: rgb(0, 48, 135);}


.gribg{background-color: #8e969d;}

.br-sol{border-radius: 20px 0 0 20px;}
.br-sag{border-radius: 0 20px 20px 0;}


.urunheader {
  position: absolute;
  top: 0;
  width: 100%;
  height: 300px; /* Gradyanın yüksekliği */
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Başlık alt kısma hizalanır */
  z-index: 1;
}


.urunbody{background-color: #f3f0f0;}

.borderbottommavi {
  border-bottom: 4px solid #003087;
  display: inline-block;
}

.borderbottomsiyah {
  border-bottom: 4px solid #171717;
  display: inline-block;
}




.uretimtextcolor{color: #353542;}

.vizyonbg{background-color: #003087;}
.borderbottomnone {border-bottom: none;}

.kurumsalistatistikbg{background-color: #f3f0f0; padding: 100px 0px}


.iletisimbanner{height: 500px; background: rgb(54,54,67); background: linear-gradient(180deg, #363643 0%, rgba(243,240,240,1) 100%); margin-bottom: -250px;}

.bodyrenk{background-color: #f3f0f0;}
.border-bottom-white {border-bottom: 7px solid #fff; display: inline-block; }


.solmenubg{background-color: #f3f0f0;}

.inputbg {
  background-color: #ffffff85;
  border: 1px transparent solid;
  font-size: 16px;
  font-weight: 500;
}

.inputbg::placeholder {
  color: #373743; /* Beyaz placeholder */
}

.inputbg:focus::placeholder {
  color: #373743; /* Odaklandığında siyah placeholder */
}

.inputbg:focus {
  background-color: #ffffffa9; /* Odaklandığında siyah placeholder */
  border: 1px transparent solid;
}

.gonderbtn{background-color: #363643;}


.urunbutonbg:hover{background-color: white; color:#363643;}
.urunbutonbg:hover .butonicon{filter: none;}
.butonicon{filter: invert(100%) brightness(1) saturate(0%);}


.butonaktif{background-color: white; color:#363643;}
.butonaktif .butonicon{filter: none;}



.uk-flex img {
  fill: orange;
  stroke: orange;
}

.uk-table{font-size: 17px !important;}
.uk-table-hover tbody tr:hover, .uk-table-hover>tr:hover {
  background-color: #ffc1073d;
}
.f_semibold{font-weight: bold;}


.aksesuarlartext p{margin:0px !important}
.aksesuarbg {
  position: relative;
}

.aksesuarbg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  opacity: 0.12;
}

#aksesuarlar {
  position: relative;
  z-index: 2; /* İçeriklerin overlayin üstünde görünmesi için */
}





.kurumsalyazibg {
  background-image: url('/images/aksesuarbg.png');
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center;
  width: 100%;
}


.cevrekosulicon img {
  transition: filter 0.3s ease;
}

.cevrekosulicon:hover img {
  filter: grayscale(1) invert(1);
}


.aksesuar-icerik {
  position: relative;
  display: block;
  color: #222d42;
  line-height: 20px;
  margin-bottom: 20px; /* İhtiyaca göre alt boşluk */
}

.aksesuar-icerik p span {
  position: relative;
  display: inline-block; /* Çizgi sadece metin genişliğinde olacak */
}

.aksesuar-icerik p span::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px; /* Çizginin metnin hemen altında olması için */
  left: 0;
  background-color: rgb(148, 148, 148); /* Çizgi rengi */
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

.aksesuar-icerik p span:hover::after {
  visibility: visible;
  transform: scaleX(1);
}


.uk-border-button{border:2px solid #e31e24; color: #e31e24; padding: 15px 40px; font-size: 15px; display: inline-block;}
.uk-border-button:hover{border:2px solid #284056; color: #284056;}


.baslik:hover{border-left: 13px solid #003087; color:#303f6c}
.border-left{border-left:5px solid #d9dee3; padding-left: 30px;}
.border-bottom{border-bottom:1px solid #d9dee3; display: inline-block;}


.digerurunlerbg {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  padding: 15px 0px !important;
  min-height: 100px !important;
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.3); 
}


.sticky-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 67px;
  z-index: 2;
  background-color: transparent; /* Varsayılan arka plan rengi */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Opsiyonel: Sticky olan elemente gölge ekleyin */
  transition: background-color 0.3s ease; /* Arka plan renginin yumuşak geçişi */
}

.sticky-nav.sticky-active {
  background-color: #455062; /* Sticky olduktan sonra arka plan rengi */
}


.border1{border: 1px solid #303f6c}

.bggizle{mix-blend-mode: darken}




.resim-alani {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
}

#resim {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.onoffbutonlar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}


.onoffbtn{font-size: 20px; color:white; font-weight: 600; cursor: pointer;}

.onoffbutonlar .active {color:greenyellow}

.urundot li a{
  background-color: transparent !important;
  border-color: #4c4c4c !important;
}

.urundot>.uk-active>*{
  background-color: #4c4c4c !important;
  border-color: #4c4c4c !important;
}


.dokumanbg{background-color: #fff;}
.dokumanbg:hover{background-color: #003087; color: white}



.vertical-menu {
  position: fixed;
  top: 50%;
  left: 110px;
  width: 110px;
  height: auto;
  min-height: 300px;
  transform: translateY(-50%);
  background-color: white;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index:1;
  padding:20px 0px
}

.menu-button {
  height: 70px;
  margin:15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
  
}

.menu-button:hover {
  color: #003087;
}

.menu-button:not(:last-child) {
  border-bottom: 1px solid #363636;
}

.act .menu-button {
  color: #003087;
}


.uk-table td {
  padding: 10px 12px; 
  vertical-align: top;
}


.image-container {
  text-align: center;
  padding: 10px;
}

#previewImage {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}






.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.level-1,
.level-2,
.level-3,
.level-4 {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  flex-wrap: wrap;
  position: relative;
}

.level-2 .box{margin-top: 40px;}

.box:hover {background-color: #455062 !important; color: white !important}

.level-1 .box {background-color: #003087;}
.level-2 .box {background-color: #0775bb;}
.level-3 .box {background-color: #f18120;}
.level-4 .box {background-color: rgb(226, 226, 226); color:#003087}

.sonsatir .box{height: 70px;}

.level-4 .box{height: auto;}

.box {
  background-color: #428bca;
  color: white;
  padding: 10px 20px;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  text-align: center;
  min-width: 200px;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}



.boxbos {
  background-color: transparent;
  width: 1px;
  position: relative;
  left: 50%;
  border-left:1px solid black;
  height: 110px;
}

.level-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0px;
}





.level-1 > div::before {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 50%;
  border-left: 1px solid black;
  height: 27px;
}


.level-1 > div::after {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 50%;
  border-top: 1px solid black;
  width: 108%;
  transform: translateX(-50%);
}



.level-2 > div::before {
  content: '';
  position: absolute;
  top: -35px;
  left: 50%;
  border-left: 1px solid black;
  height: 38px;
}


.level-2 > div::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  border-left: 1px solid black;
  height: 20px;
}


   
.level-3 > div::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 50%;
  border-top: 1px solid black;
  width: 100%;
  transform: translateX(-50%);
}


.level-4 > .box::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 50%;
  border-left: 1px solid black;
  height: 15px;
  transform: translateY(-100%);
}


.sonsatir > .box::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  border-left: 1px solid black;
  height: 15px;
}



@media (max-width: 1200px) {
  .boxbos,
  .level-3 > div::before,
  .level-4 > div::before,
  .level-3 > div::after,
  .level-4 > div::after,
  .level-4 > .box::before,
  .sonsatir > .box::before,
  .level-2 > div::before,
  .level-2 > div::after,
  .level-1 > div::before,
  .level-1 > div::after {
    display: none;
  }
}