body{
	
    height: 100vh;
    overflow-y: auto;
    margin: 0;
}

/* header */
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999; 
    background: rgb(1,62,18);
background: linear-gradient(180deg, rgba(1,62,18,0.3841911764705882) 33%, rgba(9,9,121,0.011642156862745057) 100%);
  }

  header .header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
   
  }

  header .header .headerLeftColumn {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
  }

  .logozemin {
    position: relative;
     /* background: url("../img/logo_zeminx.png") no-repeat center; */
     border: 2px solid rgba(255, 255, 255, 0.25);
     border-bottom-left-radius: 20px;
     background-color: rgba(255, 255, 255, 0.11);
     margin-top: 8px;
  }
  
  .logozemin:after {
    display: block; 
    position: absolute; 
    background-color: #fda700;
   /* top: 0; 
    bottom: 0; 
    z-index: -1; 
    background: url("../img/logo_zemin.png") no-repeat center; */
  }

  header .header .headerRightColumn {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    /*flex: 0 0 44%;
    max-width: 570px;*/
    flex: 0 0 70%;
    flex-grow: 1;
    max-width: 70%;
    padding-top: 10px;
  }

  .homeContent {
    /*Bölgemiz Harita css*/
    /*Bölgemiz Harita css END*/
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item {
    position: relative;
    display: block;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item .desc {
    position: absolute;
    top: 151px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
    max-width: 1297px;
    width: 100%;
    z-index: 999;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item .desc .icon img {
    width: auto;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item .desc .text {
    width: auto;
    -webkit-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
    position: relative;
    padding-right: 22px;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item .desc .text:after {
    content: "";
    width: 65px;
    height: 4px;
    position: absolute;
    bottom: -10px;
    left: 0;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item .desc .text span {
    font-family: 'GilroyMedium';
    font-size: 14.49px;
    color: #ffffff;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item .desc .text span.bold {
    font-family: 'GilroyExtrabold';
    font-size: 17.87px;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item .desc .text:before {
    content: "";
    background-image: url('../img/icon/placeholder.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 31px;
    height: 48px;
    position: absolute;
    right: 0;
    top: -9px;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item > .img {
    position: relative;
  }
  .homeContent .homeCarousel.owl-carousel .owl-item .item > .img:after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
    height: 360px;
    background-image: url('../img/carousel-top-shadow.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
  }
  .homeContent .homeCarousel.owl-carousel .owl-stage-outer {
    height: auto;
    max-height: 100%;
    position: relative;
  }
  .homeContent .homeCarousel.owl-carousel .owl-stage-outer:after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
    height: 360px;
  }
  .homeContent .homeCarousel.owl-carousel .owl-stage-outer:after {
    /*background-image: url('../img/carouse-bottom-shadow.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    bottom: 0;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    bottom: 0;
    background: linear-gradient(0deg, rgb(0 0 0 / 54%) 0%, rgba(0,0,0,0) 100%);
  }
  .homeContent .homeCarousel.owl-carousel .owl-stage {
    z-index: 9;
  }
  .homeContent .homeCarousel:after {
    content: "";
    background-image: url('../img/slider-over.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    width: 100%;
    height: 135px;
    z-index: 999;
  }

  .homeContent .homeSection {
    height: auto;
    position: relative;
  }
  
  
  
  .homeContent .carouselMenu {
    position: absolute;
    bottom: 70px;
    z-index: 9;
    width: 100%;
  }
  .homeContent .carouselMenu > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
  }
  .homeContent .carouselMenu .carouselMenuArea {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
  }
  .homeContent .carouselMenu .carouselMenuArea a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.26);
    height: 44px ;
    padding: 0 15px 0 25px;
  }
  .homeContent .carouselMenu .carouselMenuArea a:first-child {
    border-left: none;
    padding-left: 0;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div.icon {
    -webkit-opacity: 0.41;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity)";
    /* IE 8 */
    filter: alpha(opacity=0.41);
    /* IE 5-7 */
    -moz-opacity: 0.41;
    /* Netscape */
    -khtml-opacity: 0.41;
    /* Safari 1.x */
    opacity: 0.41;
    /* Good browsers */
    padding-right: 15px;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div.icon:before {
    content: "";
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-opacity: 0.13;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity)";
    /* IE 8 */
    filter: alpha(opacity=0.13);
    /* IE 5-7 */
    -moz-opacity: 0.13;
    /* Netscape */
    -khtml-opacity: 0.13;
    /* Safari 1.x */
    opacity: 0.13;
    /* Good browsers */
    position: absolute;
    right: 50%;
    top: -6px;
    z-index: 1;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div.title:after,
  .homeContent .carouselMenu .carouselMenuArea a > div.title:before {
    content: "";
    width: 100%;
    background-color: #fda700;
    position: absolute;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div.title:after {
    bottom: -8px;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div.title:before {
    top: -8px;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div.title span {
    font-family: 'GilroyRegular';
    font-size: 14.22px;
    color: #ffffff;
    -webkit-opacity: 0.41;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity)";
    /* IE 8 */
    filter: alpha(opacity=0.41);
    /* IE 5-7 */
    -moz-opacity: 0.41;
    /* Netscape */
    -khtml-opacity: 0.41;
    /* Safari 1.x */
    opacity: 0.41;
    /* Good browsers */
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
  }
  .homeContent .carouselMenu .carouselMenuArea a > div.title span.bold {
    font-family: 'GilroyBlack';
  }
  .homeContent .carouselMenu .carouselMenuArea a:hover > div.title:before,
  .homeContent .carouselMenu .carouselMenuArea a:hover > div.title:after {
    height: 4px;
  }
  .homeContent .carouselMenu .carouselMenuArea a:hover > div.title span {
    -webkit-opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity)";
    /* IE 8 */
    filter: alpha(opacity=1);
    /* IE 5-7 */
    -moz-opacity: 1;
    /* Netscape */
    -khtml-opacity: 1;
    /* Safari 1.x */
    opacity: 1;
    /* Good browsers */
  }
  .homeContent .carouselMenu .carouselMenuArea a:hover > div.icon {
    -webkit-opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity)";
    /* IE 8 */
    filter: alpha(opacity=1);
    /* IE 5-7 */
    -moz-opacity: 1;
    /* Netscape */
    -khtml-opacity: 1;
    /* Safari 1.x */
    opacity: 1;
    /* Good browsers */
  }
  .homeContent .carouselMenu .carouselMenuArea a:hover > div.icon:before {
    -webkit-opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity)";
    /* IE 8 */
    filter: alpha(opacity=0.3);
    /* IE 5-7 */
    -moz-opacity: 0.3;
    /* Netscape */
    -khtml-opacity: 0.3;
    /* Safari 1.x */
    opacity: 0.3;
    /* Good browsers */
  }
  .homeContent .carouselMenu .newsTabsArea {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
    width: 480px;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    top: 0px;
  }
  .homeContent .carouselMenu .newsTabsArea .openTabsButton {
    display: block;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    /*background-color: rgba(255, 255, 255, 0.14);*/
    background-color: rgb(255 255 255 / 63%);
    width: 50px;
    height: 40px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    margin-right: 7px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    position: absolute;
    z-index: 9;
  }
  .homeContent .carouselMenu .newsTabsArea .openTabsButton.active {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .homeContent .carouselMenu .newsTabsArea .openTabsButton.active img {
    
  }
  .homeContent .carouselMenu .newsTabsArea .tabs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 40px;
    flex: 1;
    width: 100%;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active {
    height: auto;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabTitle {
    height: 46px;
    background-color: rgba(0, 0, 0, 0);
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabTitle a {
    height: 40px;
    width: 100%;
    padding-left: 12px;
    background-color: rgb(255 255 255 / 63%);
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabTitle a.active {
    height: 100%;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs .tabTitle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
    height: 40px;
    padding-left: 60px;
    overflow: hidden;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs .tabTitle a {
    font-family: 'GilroyBlack';
    font-size: 13.72px;
    color: #000;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    background-color: rgb(255 255 255 / 63%);
    flex: 1;
    height: 100%;
    padding-left: 15px;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabTitle a > img{
      opacity: 0.5;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabTitle a > span {
    opacity: 0.5;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs .tabTitle a > span {
    padding-left: 7px;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs .tabTitle a:hover,
  .homeContent .carouselMenu .newsTabsArea .tabs .tabTitle a.active {
    -webkit-opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity)";
    /* IE 8 */
    filter: alpha(opacity=1);
    /* IE 5-7 */
    -moz-opacity: 1;
    /* Netscape */
    -khtml-opacity: 1;
    /* Safari 1.x */
    opacity: 1;
    /* Good browsers */
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabTitle a.active img{
      opacity: 1;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabTitle a.active span{
      opacity: 1;
  }
  
  
  
  
  
  
  
  .homeContent .carouselMenu .newsTabsArea .tabs .tabContent {
    height: 0;
    overflow: hidden;
  }
  
  .homeContent .carouselMenu .newsTabsArea .tabs .tabContent .allButton {
    font-family: 'GilroyBlack';
    font-size: 12.87px;
    color: rgba(255, 255, 255, 0.49);
    margin-top: 15px;
    text-align: center;
    position: absolute;
    bottom: -14px;
    right: 7px;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs .tabContent .allButtonDuyuru{
      bottom: 13px;
    right: 18px;
    color: rgb(0 0 0 / 49%);
  }
  .homeContent .carouselMenu .newsTabsArea .tabs .tabContent .allButtonIhale{
      bottom: 13px;
    right: 18px;
    color: rgb(0 0 0 / 49%);
  }
  
  .homeContent .carouselMenu .newsTabsArea .tabs .tabContent .allButton:hover {
    color: #ffffff;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabContent {
    height: 100%;
    overflow: visible;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabContent .tabItem {
    height: 325px;
    min-height: 100%;
    padding: 12px;
    background-color: rgb(255 255 255 / 63%);
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabContent .tabItem.newsTab {
    height: 329px;
    background-color: transparent;
    position: relative;
  }
  .homeContent .carouselMenu .newsTabsArea .tabs.active .tabContent .tabItem.newsTab:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 43px;
    background-color: rgb(255 255 255 / 63%);
  }
  .homeContent .carouselMenu .newsTabsArea .newsHomeSlider .newsSlideItem {
    position: relative;
    margin: 0 auto;
    text-align: center;
  }
  
  .homeContent .carouselMenu .newsTabsArea .newsHomeSlider .newsSlideItem .title {
    font-family: 'GilroyBlack';
    font-size: 20.02px;
    color: #ffffff;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0 30px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .homeContent .carouselMenu .newsTabsArea .newsHomeSlider .newsSlideItem .title span{
      position: relative;
      display: block;
      z-index: 2;
  }
  .homeContent .carouselMenu .newsTabsArea .newsHomeSlider .newsSlideItem .title::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 12px;
    top: -194px;
    background: linear-gradient(0deg, rgb(0 0 0) 0%, rgba(0,0,0,0) 51%);
  }
  .homeContent .carouselMenu .newsTabsArea .newsHomeSlider .newsSlideItem img {
    margin: 0 auto;
    position: relative;
    display: block;
    width: 100%;
    
  }
  
  
  
  .homeContent .carouselMenu .newsTabsArea .newsHomeSlider .slick-dots {
    background-color: rgba(0, 0, 0, 0.55);
    height: 30px;
    bottom: 0;
    display: flex;
    -webkit-justify-content: space-evenly;
    -ms-justify-content: space-evenly;
    justify-content: space-evenly;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    width: initial;
    padding-right: 116px;
    position: absolute;
    top: 100%;
    margin-top: 22px;
    left: 0;
    width: initial;
    right: -12px;
    left: -12px;
  }
  .homeContent .carouselMenu .newsTabsArea .newsHomeSlider .slick-dots li {
    position: relative;
    height: 100%;
    line-height: 30px;
  }

  /* haberler */
 
  .oi {
    position: relative;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    height: 50%;
    max-height: 180px;
    border-left: 1px solid rgba(255, 255, 255, 0.17);
    flex: 0 0 31%;
    max-width: 37.9%;
    padding-top: 10px;
    margin-left: 50px;
  }
   .oi .icon {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    min-height: 80px;
  }
   .oi .icon:before {
    content: "";
    width: 40px;
    height: 40px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: rgba(0, 17, 29, 0.11);
    position: absolute;
    top: 0;
    left: -12px;
  }
   .oi:nth-child(-n+3) {
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.17);*/
    padding-top: 0;
  }
   .oi:nth-child(3n+1) {
    border-left: none;
  }
   .oi:nth-child(2) {
    flex: 0 0 38%;
  }
   .oi:nth-child(5) {
    flex: 0 0 38%;
  }
   .oideger {
    font-size: 28.2px;
    font-family: 'GilroyBlack';
    color: #ffffff;
    letter-spacing: -1px;
    margin-bottom: 10px;
  }
   .oival {
    font-family: 'GilroyMedium';
    color: #ffffff;
    font-size: 11.53px;
  }
   .oibaslik {
    font-family: 'GilroyBlack';
    color: #ffffff;
    font-size: 11.53px;
  }  
  
  .hbbton li {
    display: inline;
    padding: 5px;
    margin-top: 15px; height: 15px;
 }

 .oi a:hover .icon:before {
  background-color: rgba(255, 213, 164, 0.22) !important;
}

 .oideger { font-family: 'sitefont3'; line-height: 2rem;}
 .oival { font-family: 'sitefont3'; font-size: 0.8rem; } 

 /* alt satır */
 .oix {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column; /* dikey yerleşim için */
  justify-content: flex-start;
  align-items: stretch; /* yan elementlerin genişliği kaplaması için */
  height: 100%; /* yüksekliği tamamen kapla */
  border-right: 1px solid rgba(255, 255, 255, 0.17);
  flex: 0 0 31%;
}

.child-div {
  flex: 1; /* boş alanı eşit dağıt */
  width: 100%; /* genişliği tamamen kapla */
}

  /* icon link */
  /*
.oiblok {
  padding-top: 15px;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
.oi {
  position: relative;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  height: 50%;
  border-left: 1px solid rgba(255, 255, 255, 0.17);
  flex: 0 0 31%;
  max-width: 98% !important;
  padding-top: 10px;
}
.oi .icon {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  min-height: 80px;
}
.oi .icon:before {
  content: "";
  width: 48px;
  height: 48px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: rgba(0, 17, 29, 0.11);
  position: absolute;
  top: 0;
  left: -27px;
}
.oi:nth-child(-n+3) {
  padding-top: 0;
}
.oi:nth-child(3n+1) {
  border-left: none;
}
.oi:nth-child(2) {
  flex: 0 0 38%;
}
.oi:nth-child(5) {
  flex: 0 0 38%;
}
.oi a {
  color: white !important;
  font-family: 'Montserrat';
}
.oi a:hover {
  color: #f9ae42 !important;
  font-family: 'Montserrat';
}
.oi a:hover .icon:before {
  background-color: rgba(255, 213, 164, 0.22) !important;
}
.oi .icbaslik{
  font-family: 'sitefont1';
  font-size: 2rem;
  line-height:2.1rem;
}
.oi .textleft {
  padding-left: 16px;
}
.oideger {
  font-size: 28.2px;
  font-family: 'GilroyBlack';
  color: #ffffff;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.oival {
  font-family: 'GilroyMedium';
  color: #ffffff;
  font-size: 11.53px;
}
.oibaslik {
  font-family: 'GilroyBlack';
  color: #ffffff;
  font-size: 11.53px;
}
.icinmetin { text-align: left; font-size: 0.9rem; padding-top: 5px;}
.arabosluk { margin-left: 25px;}
.menuaralik { padding: 0px !important; margin: 0px !important;}
.bbaslik { color: #ffffff !important;}

@media only screen and (max-width: 1398px) {

.oi .icbaslik{
  font-size: 1.9rem !important;
}
}
@media only screen and (max-width: 1190px) {
  .oi .icbaslik{
    font-size: 1.7rem !important;
  }
  }
@media only screen and (max-width: 998px) {
    .alingflex{ align-self: center !important;}
  }
@media only screen and (max-width: 767px) {
    .alingflex{ }
  }
  */

  /* döner button */
  .button-container {
    position: relative;
    width: 150px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   /* background: url('zmn.png') no-repeat center; */
    background-size: contain;
}

/* Rotating Frame */
.button-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_cerceve.png') no-repeat center;
    background-size: contain;
    transition: transform 0.7s ease-in-out, filter 0.3s ease-in-out;
}

/* Centered Icon */
.button-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    background: url('../img/btn_icon.png') no-repeat center;
    background-size: contain;
    bottom: 21px;
}
.button-iconx {
  position: absolute;
  width: 50%;
  height: 50%;
  background: url('../img/anket_icon.png') no-repeat center;
  background-size: contain;
  bottom: 21px;
}
.button-zmn {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_zmn.png') no-repeat center;
    background-size: contain;
    left: 58px;
}

.button-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 95px;
    top: 20px;
    color: white;
    text-align:right;
    right: 20px;
    font: normal 1.4rem/1.5rem 'tahoma';
}

/* Hover Effect */
.button-container:hover .button-frame {
    transform: rotate(-120deg);
    filter: blur(3px);
}

/* Smooth Return */
.button-container:not(:hover) .button-frame {
    transform: rotate(0deg);
    filter: blur(0px);
}

/* logo zemin  */
.logo_zemin { 
  position: absolute; left: 0px; z-index: 2 !important;
}

@media only screen and (max-width: 1750px) {
  .bb {
    color: #fda700;
  }
  .logo_zemin {
    left: -80px !important;
  }
}
@media only screen and (max-width: 1630px) {
  .logo_zemin {
    left: -100px !important;
  }
}
@media only screen and (max-width: 1622px) {
  .logo_zemin {
    left: -110px !important;
  }
}
@media only screen and (max-width: 1599px) {
  .logo_zemin {
    left: -120px !important;
  }
}
@media only screen and (max-width: 1500px) {
  .logo_zemin {
    left: -180px !important;
  }
}
@media only screen and (max-width: 1430px) {
  .logo_zemin {
    left: -220px !important;
  }
}
@media only screen and (max-width: 1285px) {
  .logo_zemin {
    left: -250px !important;
  }
}
@media only screen and (max-width: 1200px) {
  .logo_zemin {
    left: -220px !important;
  }
}
@media only screen and (max-width: 1187px) {
  .logo_zemin {
    left: -235px !important;
  }
}
@media only screen and (max-width: 1157px) {
  .logo_zemin {
    left: -245px !important;
  }
}
@media only screen and (max-width: 1136px) {
  .logo_zemin {
    left: -265px !important;
  }
}
@media only screen and (max-width: 1098px) {
  .logo_zemin {
    left: -285px !important;
  }
}
@media only screen and (max-width: 1057px) {
  .logo_zemin {
    left: -305px !important;
  }
}
@media only screen and (max-width: 1019px) {
  .logo_zemin {
    left: -325px !important;
  }
}
@media only screen and (max-width: 786px) {
  .logo_zemin {
    left: -375px !important;
  }
}


.logo_h { margin-top: 15px; }
.logo_h img {height: 106px;}

@media only screen and (max-width: 991px) {
  .logo_h { margin-top: 2px !important; position: relative; z-index: 99 !important; }
  .logo_h img {height: 80px !important; position: absolute;}
}
/* site zemin------------------------------------------------------------------------- */
.sitezemin { background-color: #ffffff;}

/* Hover box ------------------------------------------------------------------------- */

.hover_box {
	text-align: center;
	line-height: 0
}
.hover_box a {
	display: block;
	line-height: 0
}
.hover_box .hover_box_wrapper {
	display: inline-block;
	position: relative;
	overflow: hidden;
	line-height: 0;
	max-width: 100%
}

.hover_box .hover_box_wrapper .hidden_photo {
	position: absolute;
	left: 50%;
	top: 54%;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.hover_box:hover .hover_box_wrapper .visible_photo, .hover_box.hover .hover_box_wrapper .visible_photo {
	opacity: 0;
	filter: alpha(opacity=0)
}

.hover_box:hover .hover_box_wrapper .hidden_photo, .hover_box.hover .hover_box_wrapper .hidden_photo {
	opacity: 1;
	filter: alpha(opacity=100)
}

.hover_box .hover_box_wrapper .visible_photo, .hover_box .hover_box_wrapper .hidden_photo {
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out
}
.hover_box .btnyazi {
  position: absolute;
  top: 95px;
  left: 50px;
  font: normal 1.8rem/2.3rem 'sitefont4';
  color: #ffffff;
}
/* coğrafi işaretler */
.cogisaret {
  padding-top: 120px; padding-left: 50px;
}
.cogpoz {width: 210px; height: 149px;}
/* borsa veri */
.borsatavan {width: 100% !important; margin-bottom: 5px;}
.borsaveriic {width: 100%;}
.borsaveri { background-color: rgba(65, 64, 64, 0.60); 
  padding: 10px;
  padding-top: 15px;
  border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
margin-right: 20px;
display: flex;
flex-direction: column;
margin-bottom: 11px !important;
}
.borsaveri h2 { font: normal 1.6rem/1.2rem 'sitefont3'; color: #ffffff;}
.borsaveri p { font: normal 1.3rem/1.2rem 'sitefont3'; padding: 3px 3px;}
.borsaveri span { font: normal 1.8rem/2rem 'sitefont5';}
.borsaveri i { font-size: 2.5rem;}
.borsaveri .icofyt, .borsaveri .icofytx {}
.borsaveri .icofyt i, .borsaveri .icofyt { color: #ffffff; }

.borsaveri .icofytx i, .borsaveri .icofytx { color:aqua;}

.borsaveri .icofytk i, .borsaveri .icofytk { color:red; }

.borsaveri .iny {color:#ffffff}
.borsaveri .inyx {color:aqua;}
.borsaveri .inyk {color:red;}

.borsaveri .veribosluk { padding-bottom: 7px;}

.butonaralik {padding-top: 30px;}
/* haber zemin */
.hbrresim {
  background-image: url('../img/hbrzemin3.png'); 
              background-repeat: no-repeat;
              background-position: center bottom;
              background-size: contain;
}

.haberblok {
  position: absolute !important; z-index: 99 !important;  top: 95px; min-height: 600px; width: 100% !important;
}

.btnpozisyon{
    justify-content: flex-start;
  }
.btonserbest {
  position: relative;
}
.btonserbest .bulmax {
  position: absolute; right: 0px;
}

@media (max-height: 830px) and (min-width: 1366px) {
  .renkxx {
    color: #028150 !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 60% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 32% !important;
     /* background-color: #fda700; */
  }
  .btonserbest .bulmax {
  position: absolute; right: -80px;
  }
  .cogisaret {
  padding-top: 90px; padding-left: 50px;
  }
}

@media (max-height: 710px) and (min-width: 1366px) {
  .renkxx {
    color: #3d1b35 !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 50% !important;
  }
  
}

@media (max-height: 655px) and (min-width: 1366px) {
  .renkxx {
    color: #1d0cb6 !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 50% !important;
  }
  .ikonlusag {
    width: 40% !important;
     /* background-color: #fda700; */
  }
  .borsaveri { 
    background-color: rgba(65, 64, 64, 0.60); 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 45px;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 3px !important;
  }
  .borsaveri h2 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    display: flex;
    align-items: flex-start;
  }
  .borsaveri .d-flex {
    align-items: flex-start !important;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    gap: 2px;
  }
  .borsaveri .d-flex i {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    vertical-align: top;
    margin-right: 2px;
  }
  .borsaveri .fiyat {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    font-size: 1.1rem !important;
  }
  .borsaveri .badge {font-size: 1rem !important;}
}



@media (max-height: 655px) and (max-width: 1365px) {
  .renkxx {
    color: #02515e !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 55% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 38% !important;
     /* background-color: #fda700; */
  }

  .btonserbest .bulmax {
  position: absolute; right: -80px;
  }
  .cogisaret {
  padding-top: 90px; padding-left: 50px;
  }
  .borsaveri { 
    background-color: rgba(65, 64, 64, 0.60); 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 45px;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .borsaveri h2 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    display: flex;
    align-items: flex-start;
  }
  .borsaveri .d-flex {
    align-items: flex-start !important;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    gap: 2px;
  }
  .borsaveri .d-flex i {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    vertical-align: top;
    margin-right: 2px;
  }
  .borsaveri .fiyat {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    font-size: 1.1rem !important;
  }
  .borsaveri .badge {font-size: 1rem !important;}
}

@media (max-height: 655px) and (max-width: 990px) {
  .renkxx {
    color: #540e20 !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 62% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 28% !important;
     /* background-color: #fda700; */
  }
}

@media (max-height: 837px) and (min-width: 1500px) {
  .renkxx {
    color: #3c004b !important;
  }

  .tnsboyut {
width: 950px !important;
    }

}
@media (min-width: 1500px) {
  .renkxx {
    color: #490085 !important;
  }
  .tnsboyut {
width: 1000px !important;
    }
    .cogisaret {
  padding-top: 25px; 
  }
}
@media (min-width: 1500px) and (min-height: 900px) {
.renkxx {
    color: #666d01 !important;
  }
  .cogisaret {
  padding-top: 150px; 
  }
}
@media (max-height: 837px) and (max-width: 1500px) {
  .renkxx {
    color: #015091 !important;
  }
  .tnsboyut {
width: 1000px !important;
    }

}

@media (max-height: 837px) and (max-width: 1397px) {
  .renkxx {
    color: #074732 !important;
  }
  .tnsboyut {
width: 950px !important;
    }
  /* coğrafi işaret */
  .btonserbest .bulmax {
  position: absolute; right: -85px !important;
  }
  .cogisaret {
  padding-top: 20px; padding-left: 50px;
  }

  .hover_box .hover_box_wrapper {
		transform: scale(0.8); /* %80 küçült */
	}
  
}

@media (max-height: 837px) and (max-width: 1192px) {
    .renkxx {
    color: #dea4ff !important;
  }
  .tnsboyut {
width: 950px !important;
    }
  /* coğrafi işaret */
  .btonserbest .bulmax {
  position: absolute; right: -81px;
  }
  .cogisaret {
  padding-top: 90px; padding-left: 50px;
  }
}

@media (max-height: 672px) and (max-width: 1192px) {
    .renkxx {
    color: #e90046 !important;
  }
  /* coğrafi işaret */
  .btonserbest .bulmax {
  position: absolute; right: -81px;
  }
  .cogisaret {
  padding-top: 40px; padding-left: 50px;
  }
  /* borsa verileri*/
  .borsaveri { 
    background-color: rgba(65, 64, 64, 0.60); 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 45px;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .borsaveri h2 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    display: flex;
    align-items: flex-start;
  }
  .borsaveri .d-flex {
    align-items: flex-start !important;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    gap: 2px;
  }
  .borsaveri .d-flex i {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    vertical-align: top;
    margin-right: 2px;
  }
  .borsaveri .fiyat {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    font-size: 1.1rem !important;
  }
  .borsaveri .badge {font-size: 1rem !important;}
  /* borsa verileri sonu */
}

@media (max-height: 738px) and (max-width: 1040px) {
  .renkxx {
    color: #00292c !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 60% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 30% !important;
     /* background-color: #fda700; */
  }
   /* coğrafi işaret */
  .btonserbest .bulmax {
  position: absolute; right: -82px;
  }
  .cogisaret {
  padding-top: 50px; padding-left: 50px;
  }
}

@media (max-width: 759px) {
  .hbrresim {
   /*  height: 450px !important; */
   width: 68% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 25% !important;
     /* background-color: #fda700; */
  }
  /* btonları küçült */
  .button-container {
    position: relative;
    width: 107px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   /* background: url('zmn.png') no-repeat center; */
    background-size: contain;
  }
  /* Rotating Frame */
.button-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_cerceve.png') no-repeat center;
    background-size: contain;
    transition: transform 0.7s ease-in-out, filter 0.3s ease-in-out;
}

/* Centered Icon */
.button-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    background: url('../img/btn_icon.png') no-repeat center;
    background-size: contain;
    bottom: 14px;
}
.button-iconx {
  position: absolute;
  width: 50%;
  height: 50%;
  background: url('../img/anket_icon.png') no-repeat center;
  background-size: contain;
  bottom: 14px;
}
.button-zmn {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_zmn.png') no-repeat center;
    background-size: contain;
    left: 40px;
}

.button-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 70px;
    top: 16px;
    color: white;
    text-align:right;
    right: 20px;
    font: normal 1.3rem/1.5rem 'tahoma';
}
  /* sonu */
}

@media (max-height: 589px) and (max-width: 988px) {
    .renkxx {
    color: #ff0396 !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 56% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 30% !important;
     /* background-color: #fda700; */
  }
  /* */
/* coğrafi işaretler */
.hover_box .btnyazi {
  position: absolute;
  top: 95px;
  left: 50px;
  font: normal 1.6rem/1.7rem 'sitefont4';
  color: #ffffff;
}
   
  .btonserbest .bulmax {
  position: absolute; right: -83px;
  }
  .cogisaret {
  padding-top: 50px; padding-left: 50px;
  }
  /**/
  .button-container {
    position: relative;
    width: 107px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   /* background: url('zmn.png') no-repeat center; */
    background-size: contain;
  }
  /* Rotating Frame */
.button-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_cerceve.png') no-repeat center;
    background-size: contain;
    transition: transform 0.7s ease-in-out, filter 0.3s ease-in-out;
}

/* Centered Icon */
.button-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    background: url('../img/btn_icon.png') no-repeat center;
    background-size: contain;
    bottom: 14px;
}
.button-iconx {
  position: absolute;
  width: 50%;
  height: 50%;
  background: url('../img/anket_icon.png') no-repeat center;
  background-size: contain;
  bottom: 14px;
}
.button-zmn {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_zmn.png') no-repeat center;
    background-size: contain;
    left: 40px;
}

.button-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 70px;
    top: 16px;
    color: white;
    text-align:right;
    right: 20px;
    font: normal 1.3rem/1.5rem 'tahoma';
}
  /**/
}

@media (max-height: 589px) and (max-width: 765px) {
  .renkxx {
    color: #016b59 !important;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 65% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 23% !important;
     /*background-color: #fda700;*/
  }
  /* coğrafi */
  .btonserbest .bulmax {
  position: absolute; right: -85px;
  }
  .cogisaret {
  padding-top: 50px; padding-left: 50px;
  }
}
.btnrpnz {}
@media (min-width: 575px) and (max-width:719px)  {
  .renkxx {
    color: #2a02dd !important;
  }
  .btnrpnz {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.veriborsa480 { }
.veriborsa480 .verialani { }
@media (max-width: 540px)  {
  .renkxx {
    color: #6544c0 !important;
  }
  .btnrpnz, .btncgrf  {
    flex: 0 0 49.5% !important;
    max-width: 49.5% !important;
    margin-top: 5px;
  }
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 0px;}
  .hover_box .hover_box_wrapper {
		transform: scale(0.6) !important; /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right:0px; left: 70px; top: -15px;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 96.666% !important;
  }
  .ikonlusag {
    width: 96% !important;
     /*background-color: #fda700;*/
  }
  .btnpozisyon{
    justify-content: flex-start;
  }
  /* borsa verileri yukarı taşı */
  .veriborsa480 {
    position: relative;
  }
  .veriborsa480 .verialani {
    position: absolute; 
    top: -60px; 
    width: 400px;
    left: 5px;
  }
  
  .button-container {
    position: relative;
    width: 80px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   /* background: url('zmn.png') no-repeat center; */
    background-size: contain;
  }
  
}




@media (max-width: 936px) {
	.hover_box .hover_box_wrapper {
		transform: scale(0.8); /* %80 küçült */
	}
}

/* Daha küçük ekranlar için */
@media (max-width: 768px) {
	.hover_box .hover_box_wrapper {
		transform: scale(0.6); /* %60 küçült */
	}
}

/* Mobil için */
@media (max-width: 480px) {
	.hover_box .hover_box_wrapper {
		transform: scale(0.5); /* %50 küçült */
	}
  
}

@media (min-width: 720px) and (max-width: 767px) {
    .custom-responsive {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 1500px) and (min-height: 850px)  {
.renkxx {
    color:#002fff !important;
  }
  .tnsboyut {
width: 900px !important;
    }
}

@media (max-width: 1000px) and (min-height: 850px)  {

    .renkxx {
    color:#660bf8 !important;
  }
  .tnsboyut {
width: 850px !important;
    }
  .btnrpnz, .btncgrf  {
    flex: 0 0 30.5% !important;
    max-width: 30.5% !important;
    margin-top: 20px;
  }
  .butonaralik {padding-top: 0px;}
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
.cogisaret {
  padding-top: 20px; padding-left: -10px;
}
.btonserbest .bulmax {
  position: absolute; right: -80px; top: -53px;
  }

  .borsaveri { margin-bottom: 15px !important;
  height: 80px !important;
  }
  .btonserbest .bulmax {
  position: absolute; right: -80px;
  }
  .hover_box .hover_box_wrapper {
		transform: scale(0.5); /* %80 küçült */
	}
  .cogisaret {
  padding-top: 50px !important;
}
  /**/
  .button-container {
    position: relative;
    width: 107px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   /* background: url('zmn.png') no-repeat center; */
    background-size: contain;
  }
  /* Rotating Frame */
.button-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_cerceve.png') no-repeat center;
    background-size: contain;
    transition: transform 0.7s ease-in-out, filter 0.3s ease-in-out;
}

/* Centered Icon */
.button-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    background: url('../img/btn_icon.png') no-repeat center;
    background-size: contain;
    bottom: 14px;
}
.button-iconx {
  position: absolute;
  width: 50%;
  height: 50%;
  background: url('../img/anket_icon.png') no-repeat center;
  background-size: contain;
  bottom: 14px;
}
.button-zmn {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_zmn.png') no-repeat center;
    background-size: contain;
    left: 40px;
}

.button-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 70px;
    top: 16px;
    color: white;
    text-align:right;
    right: 20px;
    font: normal 1.3rem/1.5rem 'tahoma';
}

.borsaveri .veribosluk { 
  padding-bottom: 15px;
}

}

@media (max-height: 784px) and (max-width: 958px) {
  .renkxx {
    color: #b8ab00 !important;
  }
}

@media (max-width: 1356px)  {
  .btonserbest .bulmax {
  position: absolute; right: -10px;
  }
}

@media (max-width: 1197px)  {
  .btonserbest .bulmax {
  position: absolute; right: -40px;
  }
}




@media (max-height: 777px) and (max-width: 1042px) {
    .renkxx {
    color: #ff7bd3 !important;
  }
  
  /**/
  .button-container {
    position: relative;
    width: 107px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   /* background: url('zmn.png') no-repeat center; */
    background-size: contain;
  }
  /* Rotating Frame */
.button-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_cerceve.png') no-repeat center;
    background-size: contain;
    transition: transform 0.7s ease-in-out, filter 0.3s ease-in-out;
}

/* Centered Icon */
.button-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    background: url('../img/btn_icon.png') no-repeat center;
    background-size: contain;
    bottom: 14px;
}
.button-iconx {
  position: absolute;
  width: 50%;
  height: 50%;
  background: url('../img/anket_icon.png') no-repeat center;
  background-size: contain;
  bottom: 14px;
}
.button-zmn {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_zmn.png') no-repeat center;
    background-size: contain;
    left: 40px;
}

.button-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 70px;
    top: 16px;
    color: white;
    text-align:right;
    right: 20px;
    font: normal 1.3rem/1.5rem 'tahoma';
}
.hover_box .hover_box_wrapper {
		transform: scale(0.7); /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right: -50px;
  }
  
}



@media (max-height: 896px) and (max-width: 988px) {
  .renkxx {
    color: #4e6316e1 !important;
  }
  /* */
  .btnrpnz, .btncgrf  {
    flex: 0 0 30.5% !important;
    max-width: 30.5% !important;
    margin-top: 15px;
  }
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 0px;}
  .hover_box .hover_box_wrapper {
		transform: scale(0.6) !important; /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right:0px; left: 70px; top: -15px;
  }
  .hbrresim {
   /*  height: 450px !important; */
   width: 96.666% !important;
  }
  .ikonlusag {
    width: 96% !important;
     /*background-color: #fda700;*/
  }
  .btnpozisyon{
    justify-content: flex-start;
  }
  /* borsa verileri yukarı taşı */
  .veriborsa480 {
    position: relative;
  }
  .veriborsa480 .verialani {
    position: absolute; 
    top: -60px; 
    width: 400px;
    left: 5px;
  }
  
  .button-container {
    position: relative;
    width: 80px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   /* background: url('zmn.png') no-repeat center; */
    background-size: contain;
  }

}




@media (max-width: 782px) {
  .renkxx {
    color: #230772e1 !important;
  }
    .tnsboyut {
width: 745px !important;
    }
  .btnrpnz, .btncgrf  {
    flex: 0 0 30.5% !important;
    max-width: 30.5% !important;
    margin-top: 20px;
  }
  .butonaralik {padding-top: 0px;}
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
.cogisaret {
  padding-top: 20px; padding-left: -10px;
}
.btonserbest .bulmax {
  position: absolute; right: -80px; top: -10px;
  }
}



@media (min-width: 900px) and (orientation: portrait) {
  /* dikey */
  .tnsboyut {
width: 700px !important;
    }
.renkxx {
    color: #15ff00e1 !important;
  }
  .btnrpnz, .btncgrf  {
    flex: 0 0 70.5% !important;
    max-width: 70.5% !important;
    margin-top: 15px;
  }
  .butonaralik {padding-top: 15px;}
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 0px;}
  .hover_box .hover_box_wrapper {
		transform: scale(0.6) !important; /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right:0px; left: -10px; top: 10px;
  }
  
}

@media (max-height: 926px) and (max-width: 989px) {
.renkxx {
    color: #000000e1 !important;
  }
  .btnrpnz, .btncgrf  {
    flex: 0 0 30.5% !important;
    max-width: 30.5% !important;
    margin-top: 15px;
  }
  .butonaralik {padding-top: 15px;}
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 0px;}
  .hover_box .hover_box_wrapper {
		transform: scale(0.6) !important; /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right:0px; left: -10px; top: -22px;
  }
} 



@media (max-width: 800px) and (orientation: portrait) {
.renkxx {
    color: #d0ff28 !important;
  }
  .tnsboyut {
width: 600px !important;
    }
    .hover_box .hover_box_wrapper {
		transform: scale(0.6) !important; /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right:0px; left: 15px; top: -18px;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
.renkxx {
    color: #06b2e6a9 !important;
  }
  .tnsboyut {
width: 650px !important;
    }

  .btnrpnz, .btncgrf  {
    flex: 0 0 90.5% !important;
    max-width: 90.5% !important;
    margin-top: 15px;
  }
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 10px;}

}
.ykr { margin-top: 0px;}
@media (max-width: 650px) and (orientation: portrait) {
.renkxx {
    color: #7a06e6 !important;
  }

  .hbrresim {
   /*  height: 450px !important; */
   width: 98.2% !important;
  }
  .ikonlusag {
    width: 98.2% !important;
     /* background-color: #fda700; */
  }
  .ykr { margin-top: 15px;}

  .btnrpnz, .btncgrf  {
    flex: 0 0 30.5% !important;
    max-width: 30.5% !important;
    margin-top: 15px;
  }
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 0px;}

  .btonserbest .bulmax {
  position: absolute; right:0px; left: 50px; top: -26px;
  }

}

@media (max-width: 769px) and (orientation: landscape) {
  .renkxx {
    color: #7500fae1 !important;
  }
    .tnsboyut {
width: 740px !important;
    }
}
@media (max-width: 746px) {
  
    .tnsboyut {
width: 650px !important; 
    }
}
/**/
@media (max-height: 895px) and (max-width: 752px) {
  .renkxx {
    color: #7b43ff !important;
  }
} 
/* @media (max-width: 681px) and (orientation: portrait) {*/
@media (max-height: 693px) and (max-width: 681px) {
.renkxx {
    color: #557400e1 !important;
  }
  .btnrpnz, .btncgrf  {
    flex: 0 0 30.5% !important;
    max-width: 30.5% !important;
    margin-top: 15px;
  }
  .butonaralik {padding-top: 15px;}
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 0px;}
  .hover_box .hover_box_wrapper {
		transform: scale(0.6) !important; /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right:0px; left: -10px; top: -30px;
  }
  .borsaveri { 
    background-color: rgba(65, 64, 64, 0.60); 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 45px;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .borsaveri h2 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    display: flex;
    align-items: flex-start;
  }
  .borsaveri .d-flex {
    align-items: flex-start !important;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    gap: 2px;
  }
  .borsaveri .d-flex i {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    vertical-align: top;
    margin-right: 2px;
  }
  .borsaveri .fiyat {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    font-size: 1.1rem !important;
  }
  .borsaveri .badge {font-size: 1rem !important;}
}
@media (max-width: 675px) {
  
    .tnsboyut {
width: 600px !important; 
    }
}
@media (max-width: 623px) {
  
    .tnsboyut {
width: 510px !important; 
    }
}
@media (max-width: 569px) {
  
    .tnsboyut {
width: 480px !important; 
    }
    .btnrpnz, .btncgrf  {
    flex: 0 0 49.5% !important;
    max-width: 49.5% !important;
    margin-top: 5px;
  }
  .cogisaret {
  padding-top: 3px; padding-left: 50px;
}
  .butonaralik {padding-top: 0px;}
  .hover_box .hover_box_wrapper {
		transform: scale(0.6) !important; /* %80 küçült */
	}
  .btonserbest .bulmax {
  position: absolute; right:0px; left: 120px; top: 35px;
  }
}
@media (max-width: 480px) {
  
    .tnsboyut {
width: 360px !important; 
    }
  .btonserbest .bulmax {
  position: absolute; right:0px; left: 90px; top: -5px;
  }
  .borsaveriic {width: 88%;}
}
@media (max-width: 390px) {
  
    .tnsboyut {
width: 360px !important; 
    }
  .btonserbest .bulmax {
  position: absolute; right:0px; left: 80px; top: -5px;
  }
  .borsaveriic {width: 88%;}
  .veriborsa480 .verialani {
    position: absolute; 
    top: -60px; 
    width: 360px;
    left: 5px;
  }
}

 
/*
@media (min-width: 991px) {

  .renkxx {
    color: #9b0000 !important;
  }
  .hbrresim {
   width: 68% !important;
  }
  .btnpozisyon{
    justify-content: flex-end;
  }
  .ikonlusag {
    width: 23% !important;
  
  .button-container {
    position: relative;
    width: 107px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-size: contain;
  }
  
.button-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_cerceve.png') no-repeat center;
    background-size: contain;
    transition: transform 0.7s ease-in-out, filter 0.3s ease-in-out;
}


.button-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    background: url('../img/btn_icon.png') no-repeat center;
    background-size: contain;
    bottom: 14px;
}
.button-iconx {
  position: absolute;
  width: 50%;
  height: 50%;
  background: url('../img/anket_icon.png') no-repeat center;
  background-size: contain;
  bottom: 14px;
}
.button-zmn {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/btn_zmn.png') no-repeat center;
    background-size: contain;
    left: 40px;
}

.button-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 70px;
    top: 16px;
    color: white;
    text-align:right;
    right: 20px;
    font: normal 1.3rem/1.5rem 'tahoma';
}

.hover_box .hover_box_wrapper {
		transform: scale(0.7); 
	}
  .btonserbest .bulmax {
  position: absolute; right: -80px;
  }
  
  .borsaveri { 
    background-color: rgba(65, 64, 64, 0.60); 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 45px;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .borsaveri h2 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    display: flex;
    align-items: flex-start;
  }
  .borsaveri .d-flex {
    align-items: flex-start !important;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    gap: 2px;
  }
  .borsaveri .d-flex i {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    vertical-align: top;
    margin-right: 2px;
  }
  .borsaveri .fiyat {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    font-size: 1.1rem !important;
  }
  .borsaveri .badge {font-size: 1rem !important;}
  
} */






/*
@media (max-width: 1044px) {
  .custom-stack .col-lg-9,
  .custom-stack .col-lg-3 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100%;
  }

} */


/* Owl Carousel Container */
/* Owl Carousel Container */
.homeCarousel {
  height: 99vh !important;
  overflow: hidden;
  position: relative;
}

/* Owl Item Ayarları */
.homeCarousel .owl-item {
  height: 99vh !important;
  position: relative;
  overflow: hidden;
}

.homeCarousel .owl-item .item {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  overflow: hidden;
  display: block;
}

/* Video Elementleri */
.homeCarousel video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1;
  background: #000;
}

/* Owl Stage ayarları */
.homeCarousel .owl-stage-outer {
  height: 99vh !important;
  overflow: hidden;
}

.homeCarousel .owl-stage {
  height: 99vh !important;
  display: flex;
  align-items: stretch;
}

/* Responsive düzenlemeler */
@media (max-width: 768px) {
  .homeCarousel,
  .homeCarousel .owl-item,
  .homeCarousel .owl-item .item {
    height: 99vh !important;
  }
  
  .homeCarousel video {
    min-width: 100% !important;
    min-height: 100% !important;
  }
}

/* Safari özel düzenlemeleri */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .homeCarousel video {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
}

/**/
.btn_uyegiris {
  background: linear-gradient(135deg, #01393a, #44aaac) !important;
  border: 1px solid #87fdff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(255, 140, 66, 0.4) !important;
  transition: all 0.3s ease-in-out !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

.btn_uyegiris:hover {
  background: linear-gradient(135deg, #ffb347, #ff8c42) !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(255, 140, 66, 0.5) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.btn_uyegiris span {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}
.login_bg { background: url("../img/logzmn.jpg") no-repeat top,#efefef;}
.uyelik-txt {color: white;}

/* rooter */
:root,
.not-dark {
  --cnvs-contrast-0: #fff;
  --cnvs-contrast-100: #f8f9fa;
  --cnvs-contrast-200: #e9ecef;
  --cnvs-contrast-300: #dee2e6;
  --cnvs-contrast-400: #ced4da;
  --cnvs-contrast-500: #adb5bd;
  --cnvs-contrast-600: #6c757d;
  --cnvs-contrast-700: #495057;
  --cnvs-contrast-800: #343a40;
  --cnvs-contrast-900: #212529;
  --cnvs-contrast-1000: #000;
  --cnvs-invert-contrast-0: #000;
  --cnvs-invert-contrast-100: #212529;
  --cnvs-invert-contrast-200: #343a40;
  --cnvs-invert-contrast-300: #495057;
  --cnvs-invert-contrast-400: #6c757d;
  --cnvs-invert-contrast-500: #adb5bd;
  --cnvs-invert-contrast-600: #ced4da;
  --cnvs-invert-contrast-700: #dee2e6;
  --cnvs-invert-contrast-800: #e9ecef;
  --cnvs-invert-contrast-900: #f8f9fa;
  --cnvs-invert-contrast-1000: #fff;
  --cnvs-body-bg:	var(--bs-body-bg);
  --cnvs-body-bg-boxed:	var(--cnvs-body-bg);
  --cnvs-link-color:	var(--cnvs-themecolor);
  --cnvs-link-hover-color:	var(--cnvs---cnvs-heading-color);
  --cnvs-contrast-rgb:	0, 0, 0;
  --cnvs-invert-contrast-rgb:	255, 255, 255;
  --cnvs-contrast-bg:	#fff;
  --cnvs-contrast-bg-offset:	#f8f9fa;
  --cnvs-topbar-bg: var(--cnvs-contrast-0);
  --cnvs-topbar-color: var(--cnvs-contrast-700);
  --cnvs-topbar-border-color: rgba(var(--cnvs-contrast-rgb), 0.1);
  --cnvs-topbar-social-icon-color: var(--cnvs-contrast-600);
  --cnvs-header-bg:	var(--cnvs-contrast-0);
  --cnvs-header-sticky-bg:	var(--cnvs-header-bg);
  --cnvs-side-header-bg:	var(--cnvs-contrast-0);
  --cnvs-section-bg:	var(--cnvs-contrast-bg-offset);
  --cnvs-heading-color:	var(--cnvs-contrast-900);
  --cnvs-line-color:	rgba(var(--cnvs-contrast-rgb), .1);
  --cnvs-footer-bg:	var(--cnvs-contrast-bg-offset);
  --cnvs-bg-overlay-bg-opacity: 0.75;
  --cnvs-bg-overlay-bg: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-bg-overlay-bg-opacity));
  color: var(--cnvs-contrast-800);
}

.text-white {
  color: rgba(255, 255, 255, 1) !important;
}
/* ----------------------------------------------------------------
	Sections
-----------------------------------------------------------------*/
.section {
    position: relative;
    width: 100%;
    margin: var(--cnvs-section-margin) 0;
    padding: var(--cnvs-section-padding) 0;
    background-color: var(--cnvs-section-bg);
    overflow: hidden;
  }
  .section .container {
    z-index: 2;
  }
  .section .container + .video-wrap {
    z-index: 1;
  }
  
  .parallax {
    --cnvs-parallax-ratio: 2;
    --cnvs-parallax-width: 100%;
    --cnvs-parallax-height: calc(1px * (var(--cnvs-scroll-height) + ((var(--cnvs-parallax-ratio) * 100))));
    --cnvs-parallax-factor: -1px;
    --cnvs-parallax-value: calc(var(--cnvs-parallax-factor) * var(--cnvs-parallax-ratio) * var(--cnvs-scroll-percent));
    overflow: hidden;
    will-change: transform;
    position: relative;
  }
  .parallax-bg {
    position: absolute !important;
    z-index: -1;
    left: 0;
    top: 0;
    max-width: none !important;
    width: var(--cnvs-parallax-width) !important;
    height: var(--cnvs-parallax-height) !important;
    -o-object-fit: cover;
       object-fit: cover;
    transform: translate3d(0px, var(--cnvs-parallax-value), 0px);
    transition: transform 0.1s linear;
    will-change: transform;
  }
  .parallax[data-parallax-to=bottom] {
    --cnvs-parallax-factor: 1px;
  }
  .parallax[data-parallax-to=bottom] .parallax-bg {
    top: auto;
    bottom: 0;
  }
  .parallax[data-parallax-direction=horizontal] {
    --cnvs-parallax-width: calc(1px * (var(--cnvs-scroll-width) + ((var(--cnvs-parallax-ratio) * 100))));
    --cnvs-parallax-height: 100%;
  }
  .parallax[data-parallax-direction=horizontal] .parallax-bg {
    transform: translate3d(var(--cnvs-parallax-value), 0px, 0px);
  }
  .parallax[data-parallax-direction=horizontal][data-parallax-to=right] {
    --cnvs-parallax-factor: 1px;
  }
  .parallax[data-parallax-direction=horizontal][data-parallax-to=right] .parallax-bg {
    left: auto;
    right: 0;
  }
  
  .mobile-parallax,
  .video-placeholder {
    background-size: cover !important;
    background-attachment: scroll !important;
    background-position: center center !important;
  }
  
  .revealer-image {
    position: relative;
    bottom: -100px;
    transition: bottom 0.3s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .revealer-image {
      transition: none;
    }
  }
  .section:hover .revealer-image {
    bottom: -50px;
  }

  /* ----------------------------------------------------------------
	Sections
-----------------------------------------------------------------*/
.section {
    position: relative;
    width: 100%;
    margin: var(--cnvs-section-margin) 0;
    padding: var(--cnvs-section-padding) 0;
    background-color: var(--cnvs-section-bg);
    overflow: hidden;
  }
  .section .container {
    z-index: 2;
  }
  .section .container + .video-wrap {
    z-index: 1;
  }
  
  .parallax {
    --cnvs-parallax-ratio: 2;
    --cnvs-parallax-width: 100%;
    --cnvs-parallax-height: calc(1px * (var(--cnvs-scroll-height) + ((var(--cnvs-parallax-ratio) * 100))));
    --cnvs-parallax-factor: -1px;
    --cnvs-parallax-value: calc(var(--cnvs-parallax-factor) * var(--cnvs-parallax-ratio) * var(--cnvs-scroll-percent));
    overflow: hidden;
    will-change: transform;
    position: relative;
  }
  .parallax-bg {
    position: absolute !important;
    z-index: -1;
    left: 0;
    top: 0;
    max-width: none !important;
    width: var(--cnvs-parallax-width) !important;
    height: var(--cnvs-parallax-height) !important;
    -o-object-fit: cover;
       object-fit: cover;
    transform: translate3d(0px, var(--cnvs-parallax-value), 0px);
    transition: transform 0.1s linear;
    will-change: transform;
  }
  .parallax[data-parallax-to=bottom] {
    --cnvs-parallax-factor: 1px;
  }
  .parallax[data-parallax-to=bottom] .parallax-bg {
    top: auto;
    bottom: 0;
  }
  .parallax[data-parallax-direction=horizontal] {
    --cnvs-parallax-width: calc(1px * (var(--cnvs-scroll-width) + ((var(--cnvs-parallax-ratio) * 100))));
    --cnvs-parallax-height: 100%;
  }
  .parallax[data-parallax-direction=horizontal] .parallax-bg {
    transform: translate3d(var(--cnvs-parallax-value), 0px, 0px);
  }
  .parallax[data-parallax-direction=horizontal][data-parallax-to=right] {
    --cnvs-parallax-factor: 1px;
  }
  .parallax[data-parallax-direction=horizontal][data-parallax-to=right] .parallax-bg {
    left: auto;
    right: 0;
  }
  
  .mobile-parallax,
  .video-placeholder {
    background-size: cover !important;
    background-attachment: scroll !important;
    background-position: center center !important;
  }
  
  .revealer-image {
    position: relative;
    bottom: -100px;
    transition: bottom 0.3s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .revealer-image {
      transition: none;
    }
  }
  .section:hover .revealer-image {
    bottom: -50px;
  }

  /* ----------------------------------------------------------------
	Scroll Effects
-----------------------------------------------------------------*/
.text-splitter.scroll-detect span {
	opacity: calc(0.1 + 1 * var(--cnvs-scroll-percent));
	transform: rotateX(20deg);
	transition: all 0.3s ease;
	transition-delay: 0s;
  }
  .text-splitter.scroll-detect.scroll-detect-inview span {
	transform: rotateX(0);
	transition-delay: calc(0.04s * var(--cnvs-split-index));
  }

  .div-top-shadow {
	/* Yatay offset: 0, Dikey offset: -5px (üstte), Blur: 10px, Spread: -5px */
	box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset;
  }

.myyt { padding: 15px; background-color: #f5f8fb;  color: black !important;  border-radius: 5px;
font: normal 1.8rem/2rem 'sitefont2' !important;
}
.myyt1 { padding: 15px; background-color: #f5f8fb;  color: black !important;  border-radius: 5px;
	font: normal 1.2rem/1.2rem 'sitefont2' !important;
	}

.dety {font: normal 1.2rem/1.5rem 'sitefont6';}


/* ----------------------------------------------------------------
	Slider
-----------------------------------------------------------------*/
.slider-element {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-parallax {
  position: relative;
}

.slider-parallax,
.slider-parallax .swiper {
  visibility: visible;
  -webkit-backface-visibility: hidden;
}

.slider-inner {
  position: absolute;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.slider-parallax .slider-inner {
  position: fixed;
}

.h-auto:not(.slider-parallax) .slider-inner,
.h-auto .swiper,
.min-vh-0:not(.slider-parallax) .slider-inner,
.min-vh-0 .swiper {
  position: relative !important;
  height: auto !important;
}

.slider-parallax-invisible .slider-inner {
  opacity: 0;
  visibility: hidden;
}

/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/
#footer {
  --cnvs-footer-top-border: 5px solid rgba(var(--cnvs-contrast-rgb), 0.15);
  --cnvs-copyrights-link-color: var(--cnvs-contrast-500);
  position: relative;
  background-color: var(--cnvs-footer-bg);
  border-top: var(--cnvs-footer-top-border);
  background-image: url('../img/ftzeminu.png');
  background-position: top;
}

@media (min-width: 992px) {
  .sticky-footer #slider:not(.slider-parallax-invisible),
  .sticky-footer #page-submenu,
  .sticky-footer #page-title,
  .sticky-footer #content {
    z-index: 2;
  }
  .sticky-footer #footer {
    position: sticky;
    top: auto;
    bottom: 0;
    left: 0;
  }
}
#footer .footer-widgets-wrap {
  position: relative;
  padding: var(--cnvs-content-padding) 0;
}

#copyrights {
  padding: calc(var(--cnvs-content-padding) * 0.5) 0;
  background-color: var(--cnvs-contrast-300);
  font-size: var(--cnvs-copyrights-font-size);
  line-height: var(--cnvs-line-height-content);
}
#copyrights i.footer-icon {
  position: relative;
  top: 1px;
  font-size: var(--cnvs-copyrights-font-size);
  width: var(--cnvs-copyrights-font-size);
  text-align: center;
  margin-right: 3px;
}
#copyrights .text-end a:last-child {
  margin-right: 0;
}

.copyright-links {
  margin-top: 0.5rem;
  color: var(--cnvs-copyrights-link-color);
}
.copyright-links a {
  display: inline-block;
  margin: 0 0.25rem;
  color: var(--cnvs-copyrights-link-color);
  border-bottom: 1px dotted var(--cnvs-copyrights-link-color);
}
.copyright-links a:hover {
  opacity: 0.91;
}
.copyright-links a:first-child {
  margin-left: 0;
}

.copyrights-menu {
  margin-bottom: 10px;
}
.copyrights-menu a {
  font-size: var(--cnvs-copyrights-font-size);
  margin: 0 10px;
  border-bottom: 0 !important;
}
.copyrights-menu a:first-child {
  margin-left: 0;
}

.footer-logo {
  display: block;
  margin-bottom: 30px;
}

/* ----------------------------------------------------------------
	Styled Icons
-----------------------------------------------------------------*/
[class^=i-] {
  --cnvs-i-size: 3.25rem;
  --cnvs-i-border: 1px;
  --cnvs-i-fontsize: calc( var(--cnvs-i-size) / 2.666666 );
  --cnvs-i-color: var(--cnvs-contrast-900);
  --cnvs-i-bg-color: transparent;
}

.i-style,
.i-plain,
.i-bordered,
.social-icon {
  --cnvs-i-color: var(--cnvs-white);
  text-align: center !important;
  font-size: var(--cnvs-i-fontsize);
  color:white !important;
  cursor: pointer;
  font-style: normal;
  transition: all 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .i-style,
  .i-plain,
  .i-bordered,
  .social-icon {
    transition: none;
  }
}

.i-style,
.i-bordered,
.i-plain {
  --cnvs-i-size: 3.25rem;
  --cnvs-i-border: 1px;
  --cnvs-i-fontsize: calc( var(--cnvs-i-size) / 2.666666 );
  --cnvs-i-bg-color: var(--bs-gray-800);
  display: inline-block;
  width: var(--cnvs-i-size) !important;
  height: var(--cnvs-i-size) !important;
  line-height: var(--cnvs-i-size) !important;
  background-color: var(--cnvs-i-bg-color);
}

.i-bordered {
  --cnvs-i-color: var(--cnvs-contrast-900);
  border: var(--cnvs-i-border) solid rgba(var(--cnvs-contrast-rgb), 0.5);
  line-height: calc(var(--cnvs-i-size) - var(--cnvs-i-border) * 2) !important;
}

.i-plain {
  --cnvs-i-size: 3rem;
  --cnvs-i-fontsize: 1.625rem;
  --cnvs-i-color: var(--bs-contrast-900);
}

.i-bordered,
.i-plain {
  --cnvs-i-bg-color: transparent !important;
}

.i-light {
  --cnvs-i-bg-color: var(--bs-gray-100) !important;
  --cnvs-i-color: var(--bs-gray-900);
}

.i-alt {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
}

.i-style:hover {
  --cnvs-i-bg-color: var(--cnvs-themecolor) !important;
  --cnvs-i-color: var(--bs-gray-100);
}

.i-bordered:hover {
  --cnvs-i-bg-color: var(--cnvs-contrast-800) !important;
  --cnvs-i-color: var(--cnvs-contrast-0) !important;
  border-color: var(--cnvs-i-color);
}

.i-plain:hover {
  --cnvs-i-bg-color: transparent !important;
  --cnvs-i-color: var(--cnvs-themecolor);
}

/* Icon Size - Small
-----------------------------------------------------------------*/
.i-small.i-style {
  --cnvs-i-size: 1.75rem;
}
.i-small.i-plain {
  --cnvs-i-size: 1.5rem;
  --cnvs-i-fontsize: 1rem;
}

/* Icon Size - Small
-----------------------------------------------------------------*/
.i-medium.i-style {
  --cnvs-i-size: 2.25rem;
}
.i-medium.i-plain {
  --cnvs-i-fontsize: 1.25rem;
}

/* Icon Size - Large
-----------------------------------------------------------------*/
.i-large.i-style {
  --cnvs-i-size: 4rem;
}
.i-large.i-plain {
  --cnvs-i-size: 3.75rem;
  --cnvs-i-fontsize: 2.5rem;
}

/* Icon Size - Extra Large
-----------------------------------------------------------------*/
.i-xlarge.i-style {
  --cnvs-i-size: 5.25rem;
}
.i-xlarge.i-plain {
  --cnvs-i-size: 4.5rem;
  --cnvs-i-fontsize: 3rem;
}

/* Icon Size - Extra Extra Large
-----------------------------------------------------------------*/
.i-xxlarge.i-style {
  --cnvs-i-size: 6.5rem;
}

.i-xxlarge.i-plain {
  --cnvs-i-size: 5.25rem;
  --cnvs-i-fontsize: 3.5rem;
}

/* Icon Lists
-----------------------------------------------------------------*/
.iconlist {
  --cnvs-iconlist-size: 1rem;
  --cnvs-iconlist-color: var(--cnvs-themecolor);
  --cnvs-iconlist-margin: 0.5rem;
  --cnvs-iconlist-gutter: 0.75rem;
  --cnvs-iconlist-offset: 0;
  padding-left: 0;
  margin-left: 0;
  list-style-type: none;
}
.iconlist li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: var(--cnvs-iconlist-size);
}
.iconlist li + li {
  margin-top: var(--cnvs-iconlist-margin);
}
.iconlist li > * {
  flex: 1 0 0%;
}
.iconlist > li i:first-child,
.iconlist > li img:first-child {
  position: relative;
  top: var(--cnvs-iconlist-offset);
  text-align: center;
  width: var(--cnvs-iconlist-size);
  height: var(--cnvs-iconlist-size);
  margin-right: var(--cnvs-iconlist-gutter);
  flex: 0 0 auto;
  color: var(--cnvs-iconlist-color);
}
.iconlist ul {
  flex: 0 0 auto;
  width: 100%;
  list-style-type: none;
  padding: var(--cnvs-iconlist-margin) 0 var(--cnvs-iconlist-margin) calc(var(--cnvs-iconlist-margin) * 4);
}
.iconlist ul li {
  margin-top: var(--cnvs-iconlist-margin);
}
.iconlist.iconlist-lg {
  --cnvs-iconlist-size: 1.125rem;
  --cnvs-iconlist-margin: 0.75rem;
  --cnvs-iconlist-gutter: 0.75rem;
}
.iconlist.iconlist-xl {
  --cnvs-iconlist-size: 1.5rem;
  --cnvs-iconlist-margin: 0.75rem;
  --cnvs-iconlist-gutter: 0.875rem;
}

/*-----------------------------------------------------------------------------------

	Shortcodes: social-icons.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Social Icons
-----------------------------------------------------------------*/
.social-icon {
  --cnvs-socialicon-size: 2.5rem;
  --cnvs-socialicon-gap: 5px;
  --cnvs-socialicon-fontsize: calc( var(--cnvs-socialicon-size) / 2.5);
  --cnvs-socialicon-border: 1px;
  --cnvs-socialicon-border-color: var(--cnvs-contrast-600);
  --cnvs-socialicon-lineheight: calc(var(--cnvs-socialicon-size) - calc(var(--cnvs-socialicon-border) * 2));
  --cnvs-socialicon-rounded: 0.375rem;
  --cnvs-socialicon-color: var(255,255,255);
  float: left;
  display: block;
  margin: 0 var(--cnvs-socialicon-gap) var(--cnvs-socialicon-gap) 0;
  width: var(--cnvs-socialicon-size);
  height: var(--cnvs-socialicon-size);
  font-size: var(--cnvs-socialicon-fontsize);
  line-height: var(--cnvs-socialicon-lineheight) !important;
  color: var(--cnvs-socialicon-color);
  text-shadow: none;
  border: var(--cnvs-socialicon-border) solid var(--cnvs-socialicon-border-color);
  border-radius: var(--cnvs-socialicon-rounded);
  overflow: hidden;
  /* Social Icons - Large
  -----------------------------------------------------------------*/
  /* Social Icons - Small
  -----------------------------------------------------------------*/
}
[class*=-flex] > .social-icon, [class*=row] > .social-icon {
  float: none;
  margin-right: var(--cnvs-socialicon-gap-x);
  margin-bottom: var(--cnvs-socialicon-gap-y);
  flex: 0 0 auto;
}
.social-icon.si-large {
  --cnvs-socialicon-size: 3.5rem;
}
.social-icon.si-small {
  --cnvs-socialicon-size: 2.8rem;
  --cnvs-socialicon-fontsize: 4rem;
}
.social-icon i {
  display: block;
  position: relative;
  line-height: inherit;
  transition: all 0.3s ease;
  color: white !important;
  font-size: 1.4rem;
}
@media (prefers-reduced-motion: reduce) {
  .social-icon i {
    transition: none;
  }
}
.social-icon i:last-child {
  color: #FFF;
}
.social-icon:hover i:first-child {
  margin-top: calc(var(--cnvs-socialicon-lineheight) * -1);
}
.social-icon:hover {
  color: var(--cnvs-socialicon-color);
  border-color: transparent;
}
.social-icon.bg-dark, .social-icon.bg-dark:hover {
  color: var(--bs-gray-200);
}
.social-icon.bg-light {
  --cnvs-socialicon-color: var(--bs-gray-900);
  background-color: var(--bs-gray-200) !important;
}
.social-icon[class*=" bg-"] {
  border-color: transparent;
}
.social-icon.no-transition:hover i:first-child {
  display: none;
  margin-top: 0;
}

/* Social Icons - Group
-----------------------------------------------------------------*/
[class*=-flex],
[class*=row] {
  --cnvs-socialicon-gap: 5px;
  --cnvs-socialicon-gap-x: var(--cnvs-socialicon-gap);
  --cnvs-socialicon-gap-y: 0px;
}

/* Social Icons - Sticky
-----------------------------------------------------------------*/
.si-sticky {
  position: fixed;
  top: 50%;
  left: 5px;
  width: 36px;
  z-index: 499;
  transform: translateY(-50%);
  /* Social Icons - Sticky Right
  -----------------------------------------------------------------*/
}
.si-sticky.si-sticky-right {
  left: auto;
  right: 8px;
}

/* Social Icons - colors
-----------------------------------------------------------------*/
.bg-facebook,
.h-bg-facebook:hover {
  background-color: rgba(var(--cnvs-color-facebook-rgb), 1) !important;
}

.bg-whatsapp,
.h-bg-whatsapp:hover {
  background-color: rgba(var(--cnvs-color-whatsapp-rgb), 1) !important;
}

.bg-delicious,
.h-bg-delicious:hover {
  background-color: rgba(var(--cnvs-color-delicious-rgb), 1) !important;
}

.bg-paypal,
.h-bg-paypal:hover {
  background-color: rgba(var(--cnvs-color-paypal-rgb), 1) !important;
}

.bg-waze,
.h-bg-waze:hover {
  background-color: rgba(var(--cnvs-color-waze-rgb), 1) !important;
}

.bg-android,
.h-bg-android:hover {
  background-color: rgba(var(--cnvs-color-android-rgb), 1) !important;
}

.bg-googledrive,
.h-bg-googledrive:hover {
  background-color: rgba(var(--cnvs-color-googledrive-rgb), 1) !important;
}

.bg-wikipedia,
.h-bg-wikipedia:hover {
  background-color: rgba(var(--cnvs-color-wikipedia-rgb), 1) !important;
}

.bg-stumbleupon,
.h-bg-stumbleupon:hover {
  background-color: rgba(var(--cnvs-color-stumbleupon-rgb), 1) !important;
}

.bg-foursquare,
.h-bg-foursquare:hover {
  background-color: rgba(var(--cnvs-color-foursquare-rgb), 1) !important;
}

.bg-call,
.h-bg-call:hover {
  background-color: rgba(var(--cnvs-color-call-rgb), 1) !important;
}

.bg-ninetyninedesigns,
.h-bg-ninetyninedesigns:hover {
  background-color: rgba(var(--cnvs-color-ninetyninedesigns-rgb), 1) !important;
}

.bg-forrst,
.h-bg-forrst:hover {
  background-color: rgba(var(--cnvs-color-forrst-rgb), 1) !important;
}

.bg-digg,
.h-bg-digg:hover {
  background-color: rgba(var(--cnvs-color-digg-rgb), 1) !important;
}

.bg-spotify,
.h-bg-spotify:hover {
  background-color: rgba(var(--cnvs-color-spotify-rgb), 1) !important;
}

.bg-reddit,
.h-bg-reddit:hover {
  background-color: rgba(var(--cnvs-color-reddit-rgb), 1) !important;
}

.bg-blogger,
.h-bg-blogger:hover {
  background-color: rgba(var(--cnvs-color-blogger-rgb), 1) !important;
}

.bg-cc,
.h-bg-cc:hover {
  background-color: rgba(var(--cnvs-color-cc-rgb), 1) !important;
}

.bg-dribbble,
.h-bg-dribbble:hover {
  background-color: rgba(var(--cnvs-color-dribbble-rgb), 1) !important;
}

.bg-evernote,
.h-bg-evernote:hover {
  background-color: rgba(var(--cnvs-color-evernote-rgb), 1) !important;
}

.bg-flickr,
.h-bg-flickr:hover {
  background-color: rgba(var(--cnvs-color-flickr-rgb), 1) !important;
}

.bg-google,
.h-bg-google:hover {
  background-color: rgba(var(--cnvs-color-google-rgb), 1) !important;
}

.bg-salesforce,
.h-bg-salesforce:hover {
  background-color: rgba(var(--cnvs-color-salesforce-rgb), 1) !important;
}

.bg-cloudflare,
.h-bg-cloudflare:hover {
  background-color: rgba(var(--cnvs-color-cloudflare-rgb), 1) !important;
}

.bg-linkedin,
.h-bg-linkedin:hover {
  background-color: rgba(var(--cnvs-color-linkedin-rgb), 1) !important;
}

.bg-vk,
.h-bg-vk:hover {
  background-color: rgba(var(--cnvs-color-vk-rgb), 1) !important;
}

.bg-rss,
.h-bg-rss:hover {
  background-color: rgba(var(--cnvs-color-rss-rgb), 1) !important;
}

.bg-skype,
.h-bg-skype:hover {
  background-color: rgba(var(--cnvs-color-skype-rgb), 1) !important;
}

.bg-twitter,
.h-bg-twitter:hover {
  background-color: rgba(var(--cnvs-color-twitter-rgb), 1) !important;
}

.bg-x-twitter,
.h-bg-x-twitter:hover {
  background-color: rgba(var(--cnvs-color-x-twitter-rgb), 1) !important;
}

.bg-youtube,
.h-bg-youtube:hover {
  background-color: rgba(var(--cnvs-color-youtube-rgb), 1) !important;
}

.bg-vimeo,
.h-bg-vimeo:hover {
  background-color: rgba(var(--cnvs-color-vimeo-rgb), 1) !important;
}

.bg-slack,
.h-bg-slack:hover {
  background-color: rgba(var(--cnvs-color-slack-rgb), 1) !important;
}

.bg-yahoo,
.h-bg-yahoo:hover {
  background-color: rgba(var(--cnvs-color-yahoo-rgb), 1) !important;
}

.bg-email3,
.h-bg-email3:hover {
  background-color: rgba(var(--cnvs-color-email3-rgb), 1) !important;
}

.bg-macstore,
.h-bg-macstore:hover {
  background-color: rgba(var(--cnvs-color-macstore-rgb), 1) !important;
}

.bg-figma,
.h-bg-figma:hover {
  background-color: rgba(var(--cnvs-color-figma-rgb), 1) !important;
}

.bg-podcast,
.h-bg-podcast:hover {
  background-color: rgba(var(--cnvs-color-podcast-rgb), 1) !important;
}

.bg-meetup,
.h-bg-meetup:hover {
  background-color: rgba(var(--cnvs-color-meetup-rgb), 1) !important;
}

.bg-dropbox,
.h-bg-dropbox:hover {
  background-color: rgba(var(--cnvs-color-dropbox-rgb), 1) !important;
}

.bg-ebay,
.h-bg-ebay:hover {
  background-color: rgba(var(--cnvs-color-ebay-rgb), 1) !important;
}

.bg-github,
.h-bg-github:hover {
  background-color: rgba(var(--cnvs-color-github-rgb), 1) !important;
}

.bg-googleplay,
.h-bg-googleplay:hover {
  background-color: rgba(var(--cnvs-color-googleplay-rgb), 1) !important;
}

.bg-itunes,
.h-bg-itunes:hover {
  background-color: rgba(var(--cnvs-color-itunes-rgb), 1) !important;
}

.bg-periscope,
.h-bg-periscope:hover {
  background-color: rgba(var(--cnvs-color-periscope-rgb), 1) !important;
}

.bg-meta,
.h-bg-meta:hover {
  background-color: rgba(var(--cnvs-color-meta-rgb), 1) !important;
}

.bg-soundcloud,
.h-bg-soundcloud:hover {
  background-color: rgba(var(--cnvs-color-soundcloud-rgb), 1) !important;
}

.bg-tumblr,
.h-bg-tumblr:hover {
  background-color: rgba(var(--cnvs-color-tumblr-rgb), 1) !important;
}

.bg-wordpress,
.h-bg-wordpress:hover {
  background-color: rgba(var(--cnvs-color-wordpress-rgb), 1) !important;
}

.bg-yelp,
.h-bg-yelp:hover {
  background-color: rgba(var(--cnvs-color-yelp-rgb), 1) !important;
}

.bg-microsoft,
.h-bg-microsoft:hover {
  background-color: rgba(var(--cnvs-color-microsoft-rgb), 1) !important;
}

.bg-trello,
.h-bg-trello:hover {
  background-color: rgba(var(--cnvs-color-trello-rgb), 1) !important;
}

.bg-scribd,
.h-bg-scribd:hover {
  background-color: rgba(var(--cnvs-color-scribd-rgb), 1) !important;
}

.bg-stripe,
.h-bg-stripe:hover {
  background-color: rgba(var(--cnvs-color-stripe-rgb), 1) !important;
}

.bg-print,
.h-bg-print:hover {
  background-color: rgba(var(--cnvs-color-print-rgb), 1) !important;
}

.bg-btc,
.h-bg-btc:hover {
  background-color: rgba(var(--cnvs-color-btc-rgb), 1) !important;
}

.bg-weibo,
.h-bg-weibo:hover {
  background-color: rgba(var(--cnvs-color-weibo-rgb), 1) !important;
}

.bg-acrobat,
.h-bg-acrobat:hover {
  background-color: rgba(var(--cnvs-color-acrobat-rgb), 1) !important;
}

.bg-drupal,
.h-bg-drupal:hover {
  background-color: rgba(var(--cnvs-color-drupal-rgb), 1) !important;
}

.bg-buffer,
.h-bg-buffer:hover {
  background-color: rgba(var(--cnvs-color-buffer-rgb), 1) !important;
}

.bg-pocket,
.h-bg-pocket:hover {
  background-color: rgba(var(--cnvs-color-pocket-rgb), 1) !important;
}

.bg-bitbucket,
.h-bg-bitbucket:hover {
  background-color: rgba(var(--cnvs-color-bitbucket-rgb), 1) !important;
}

.bg-stackoverflow,
.h-bg-stackoverflow:hover {
  background-color: rgba(var(--cnvs-color-stackoverflow-rgb), 1) !important;
}

.bg-hackernews,
.h-bg-hackernews:hover {
  background-color: rgba(var(--cnvs-color-hackernews-rgb), 1) !important;
}

.bg-xing,
.h-bg-xing:hover {
  background-color: rgba(var(--cnvs-color-xing-rgb), 1) !important;
}

.bg-instagram,
.h-bg-instagram:hover {
  background-color: rgba(var(--cnvs-color-instagram-rgb), 1) !important;
}

.bg-quora,
.h-bg-quora:hover {
  background-color: rgba(var(--cnvs-color-quora-rgb), 1) !important;
}

.bg-openid,
.h-bg-openid:hover {
  background-color: rgba(var(--cnvs-color-openid-rgb), 1) !important;
}

.bg-steam,
.h-bg-steam:hover {
  background-color: rgba(var(--cnvs-color-steam-rgb), 1) !important;
}

.bg-amazon,
.h-bg-amazon:hover {
  background-color: rgba(var(--cnvs-color-amazon-rgb), 1) !important;
}

.bg-line,
.h-bg-line:hover {
  background-color: rgba(var(--cnvs-color-line-rgb), 1) !important;
}

.bg-kickstarter,
.h-bg-kickstarter:hover {
  background-color: rgba(var(--cnvs-color-kickstarter-rgb), 1) !important;
}

.bg-appstore,
.h-bg-appstore:hover {
  background-color: rgba(var(--cnvs-color-appstore-rgb), 1) !important;
}

.bg-pinterest,
.h-bg-pinterest:hover {
  background-color: rgba(var(--cnvs-color-pinterest-rgb), 1) !important;
}

.bg-fivehundredpx,
.h-bg-fivehundredpx:hover {
  background-color: rgba(var(--cnvs-color-fivehundredpx-rgb), 1) !important;
}

.bg-tiktok,
.h-bg-tiktok:hover {
  background-color: rgba(var(--cnvs-color-tiktok-rgb), 1) !important;
}

.bg-airbnb,
.h-bg-airbnb:hover {
  background-color: rgba(var(--cnvs-color-airbnb-rgb), 1) !important;
}

.bg-gpay,
.h-bg-gpay:hover {
  background-color: rgba(var(--cnvs-color-gpay-rgb), 1) !important;
}

.bg-unsplash,
.h-bg-unsplash:hover {
  background-color: rgba(var(--cnvs-color-unsplash-rgb), 1) !important;
}

.bg-snapchat,
.h-bg-snapchat:hover {
  background-color: rgba(var(--cnvs-color-snapchat-rgb), 1) !important;
}

.bg-discord,
.h-bg-discord:hover {
  background-color: rgba(var(--cnvs-color-discord-rgb), 1) !important;
}

.bg-twitch,
.h-bg-twitch:hover {
  background-color: rgba(var(--cnvs-color-twitch-rgb), 1) !important;
}

.border-facebook,
.h-border-facebook:hover {
  border-color: rgba(var(--cnvs-color-facebook-rgb), 1) !important;
}

.border-whatsapp,
.h-border-whatsapp:hover {
  border-color: rgba(var(--cnvs-color-whatsapp-rgb), 1) !important;
}

.border-delicious,
.h-border-delicious:hover {
  border-color: rgba(var(--cnvs-color-delicious-rgb), 1) !important;
}

.border-paypal,
.h-border-paypal:hover {
  border-color: rgba(var(--cnvs-color-paypal-rgb), 1) !important;
}

.border-waze,
.h-border-waze:hover {
  border-color: rgba(var(--cnvs-color-waze-rgb), 1) !important;
}

.border-android,
.h-border-android:hover {
  border-color: rgba(var(--cnvs-color-android-rgb), 1) !important;
}

.border-googledrive,
.h-border-googledrive:hover {
  border-color: rgba(var(--cnvs-color-googledrive-rgb), 1) !important;
}

.border-wikipedia,
.h-border-wikipedia:hover {
  border-color: rgba(var(--cnvs-color-wikipedia-rgb), 1) !important;
}

.border-stumbleupon,
.h-border-stumbleupon:hover {
  border-color: rgba(var(--cnvs-color-stumbleupon-rgb), 1) !important;
}

.border-foursquare,
.h-border-foursquare:hover {
  border-color: rgba(var(--cnvs-color-foursquare-rgb), 1) !important;
}

.border-call,
.h-border-call:hover {
  border-color: rgba(var(--cnvs-color-call-rgb), 1) !important;
}

.border-ninetyninedesigns,
.h-border-ninetyninedesigns:hover {
  border-color: rgba(var(--cnvs-color-ninetyninedesigns-rgb), 1) !important;
}

.border-forrst,
.h-border-forrst:hover {
  border-color: rgba(var(--cnvs-color-forrst-rgb), 1) !important;
}

.border-digg,
.h-border-digg:hover {
  border-color: rgba(var(--cnvs-color-digg-rgb), 1) !important;
}

.border-spotify,
.h-border-spotify:hover {
  border-color: rgba(var(--cnvs-color-spotify-rgb), 1) !important;
}

.border-reddit,
.h-border-reddit:hover {
  border-color: rgba(var(--cnvs-color-reddit-rgb), 1) !important;
}

.border-blogger,
.h-border-blogger:hover {
  border-color: rgba(var(--cnvs-color-blogger-rgb), 1) !important;
}

.border-cc,
.h-border-cc:hover {
  border-color: rgba(var(--cnvs-color-cc-rgb), 1) !important;
}

.border-dribbble,
.h-border-dribbble:hover {
  border-color: rgba(var(--cnvs-color-dribbble-rgb), 1) !important;
}

.border-evernote,
.h-border-evernote:hover {
  border-color: rgba(var(--cnvs-color-evernote-rgb), 1) !important;
}

.border-flickr,
.h-border-flickr:hover {
  border-color: rgba(var(--cnvs-color-flickr-rgb), 1) !important;
}

.border-google,
.h-border-google:hover {
  border-color: rgba(var(--cnvs-color-google-rgb), 1) !important;
}

.border-salesforce,
.h-border-salesforce:hover {
  border-color: rgba(var(--cnvs-color-salesforce-rgb), 1) !important;
}

.border-cloudflare,
.h-border-cloudflare:hover {
  border-color: rgba(var(--cnvs-color-cloudflare-rgb), 1) !important;
}

.border-linkedin,
.h-border-linkedin:hover {
  border-color: rgba(var(--cnvs-color-linkedin-rgb), 1) !important;
}

.border-vk,
.h-border-vk:hover {
  border-color: rgba(var(--cnvs-color-vk-rgb), 1) !important;
}

.border-rss,
.h-border-rss:hover {
  border-color: rgba(var(--cnvs-color-rss-rgb), 1) !important;
}

.border-skype,
.h-border-skype:hover {
  border-color: rgba(var(--cnvs-color-skype-rgb), 1) !important;
}

.border-twitter,
.h-border-twitter:hover {
  border-color: rgba(var(--cnvs-color-twitter-rgb), 1) !important;
}

.border-x-twitter,
.h-border-x-twitter:hover {
  border-color: rgba(var(--cnvs-color-x-twitter-rgb), 1) !important;
}

.border-youtube,
.h-border-youtube:hover {
  border-color: rgba(var(--cnvs-color-youtube-rgb), 1) !important;
}

.border-vimeo,
.h-border-vimeo:hover {
  border-color: rgba(var(--cnvs-color-vimeo-rgb), 1) !important;
}

.border-slack,
.h-border-slack:hover {
  border-color: rgba(var(--cnvs-color-slack-rgb), 1) !important;
}

.border-yahoo,
.h-border-yahoo:hover {
  border-color: rgba(var(--cnvs-color-yahoo-rgb), 1) !important;
}

.border-email3,
.h-border-email3:hover {
  border-color: rgba(var(--cnvs-color-email3-rgb), 1) !important;
}

.border-macstore,
.h-border-macstore:hover {
  border-color: rgba(var(--cnvs-color-macstore-rgb), 1) !important;
}

.border-figma,
.h-border-figma:hover {
  border-color: rgba(var(--cnvs-color-figma-rgb), 1) !important;
}

.border-podcast,
.h-border-podcast:hover {
  border-color: rgba(var(--cnvs-color-podcast-rgb), 1) !important;
}

.border-meetup,
.h-border-meetup:hover {
  border-color: rgba(var(--cnvs-color-meetup-rgb), 1) !important;
}

.border-dropbox,
.h-border-dropbox:hover {
  border-color: rgba(var(--cnvs-color-dropbox-rgb), 1) !important;
}

.border-ebay,
.h-border-ebay:hover {
  border-color: rgba(var(--cnvs-color-ebay-rgb), 1) !important;
}

.border-github,
.h-border-github:hover {
  border-color: rgba(var(--cnvs-color-github-rgb), 1) !important;
}

.border-googleplay,
.h-border-googleplay:hover {
  border-color: rgba(var(--cnvs-color-googleplay-rgb), 1) !important;
}

.border-itunes,
.h-border-itunes:hover {
  border-color: rgba(var(--cnvs-color-itunes-rgb), 1) !important;
}

.border-periscope,
.h-border-periscope:hover {
  border-color: rgba(var(--cnvs-color-periscope-rgb), 1) !important;
}

.border-meta,
.h-border-meta:hover {
  border-color: rgba(var(--cnvs-color-meta-rgb), 1) !important;
}

.border-soundcloud,
.h-border-soundcloud:hover {
  border-color: rgba(var(--cnvs-color-soundcloud-rgb), 1) !important;
}

.border-tumblr,
.h-border-tumblr:hover {
  border-color: rgba(var(--cnvs-color-tumblr-rgb), 1) !important;
}

.border-wordpress,
.h-border-wordpress:hover {
  border-color: rgba(var(--cnvs-color-wordpress-rgb), 1) !important;
}

.border-yelp,
.h-border-yelp:hover {
  border-color: rgba(var(--cnvs-color-yelp-rgb), 1) !important;
}

.border-microsoft,
.h-border-microsoft:hover {
  border-color: rgba(var(--cnvs-color-microsoft-rgb), 1) !important;
}

.border-trello,
.h-border-trello:hover {
  border-color: rgba(var(--cnvs-color-trello-rgb), 1) !important;
}

.border-scribd,
.h-border-scribd:hover {
  border-color: rgba(var(--cnvs-color-scribd-rgb), 1) !important;
}

.border-stripe,
.h-border-stripe:hover {
  border-color: rgba(var(--cnvs-color-stripe-rgb), 1) !important;
}

.border-print,
.h-border-print:hover {
  border-color: rgba(var(--cnvs-color-print-rgb), 1) !important;
}

.border-btc,
.h-border-btc:hover {
  border-color: rgba(var(--cnvs-color-btc-rgb), 1) !important;
}

.border-weibo,
.h-border-weibo:hover {
  border-color: rgba(var(--cnvs-color-weibo-rgb), 1) !important;
}

.border-acrobat,
.h-border-acrobat:hover {
  border-color: rgba(var(--cnvs-color-acrobat-rgb), 1) !important;
}

.border-drupal,
.h-border-drupal:hover {
  border-color: rgba(var(--cnvs-color-drupal-rgb), 1) !important;
}

.border-buffer,
.h-border-buffer:hover {
  border-color: rgba(var(--cnvs-color-buffer-rgb), 1) !important;
}

.border-pocket,
.h-border-pocket:hover {
  border-color: rgba(var(--cnvs-color-pocket-rgb), 1) !important;
}

.border-bitbucket,
.h-border-bitbucket:hover {
  border-color: rgba(var(--cnvs-color-bitbucket-rgb), 1) !important;
}

.border-stackoverflow,
.h-border-stackoverflow:hover {
  border-color: rgba(var(--cnvs-color-stackoverflow-rgb), 1) !important;
}

.border-hackernews,
.h-border-hackernews:hover {
  border-color: rgba(var(--cnvs-color-hackernews-rgb), 1) !important;
}

.border-xing,
.h-border-xing:hover {
  border-color: rgba(var(--cnvs-color-xing-rgb), 1) !important;
}

.border-instagram,
.h-border-instagram:hover {
  border-color: rgba(var(--cnvs-color-instagram-rgb), 1) !important;
}

.border-quora,
.h-border-quora:hover {
  border-color: rgba(var(--cnvs-color-quora-rgb), 1) !important;
}

.border-openid,
.h-border-openid:hover {
  border-color: rgba(var(--cnvs-color-openid-rgb), 1) !important;
}

.border-steam,
.h-border-steam:hover {
  border-color: rgba(var(--cnvs-color-steam-rgb), 1) !important;
}

.border-amazon,
.h-border-amazon:hover {
  border-color: rgba(var(--cnvs-color-amazon-rgb), 1) !important;
}

.border-line,
.h-border-line:hover {
  border-color: rgba(var(--cnvs-color-line-rgb), 1) !important;
}

.border-kickstarter,
.h-border-kickstarter:hover {
  border-color: rgba(var(--cnvs-color-kickstarter-rgb), 1) !important;
}

.border-appstore,
.h-border-appstore:hover {
  border-color: rgba(var(--cnvs-color-appstore-rgb), 1) !important;
}

.border-pinterest,
.h-border-pinterest:hover {
  border-color: rgba(var(--cnvs-color-pinterest-rgb), 1) !important;
}

.border-fivehundredpx,
.h-border-fivehundredpx:hover {
  border-color: rgba(var(--cnvs-color-fivehundredpx-rgb), 1) !important;
}

.border-tiktok,
.h-border-tiktok:hover {
  border-color: rgba(var(--cnvs-color-tiktok-rgb), 1) !important;
}

.border-airbnb,
.h-border-airbnb:hover {
  border-color: rgba(var(--cnvs-color-airbnb-rgb), 1) !important;
}

.border-gpay,
.h-border-gpay:hover {
  border-color: rgba(var(--cnvs-color-gpay-rgb), 1) !important;
}

.border-unsplash,
.h-border-unsplash:hover {
  border-color: rgba(var(--cnvs-color-unsplash-rgb), 1) !important;
}

.border-snapchat,
.h-border-snapchat:hover {
  border-color: rgba(var(--cnvs-color-snapchat-rgb), 1) !important;
}

.border-discord,
.h-border-discord:hover {
  border-color: rgba(var(--cnvs-color-discord-rgb), 1) !important;
}

.border-twitch,
.h-border-twitch:hover {
  border-color: rgba(var(--cnvs-color-twitch-rgb), 1) !important;
}

.color-facebook,
.h-color-facebook:hover {
  color: rgba(var(--cnvs-color-facebook-rgb), 1) !important;
}

.color-whatsapp,
.h-color-whatsapp:hover {
  color: rgba(var(--cnvs-color-whatsapp-rgb), 1) !important;
}

.color-delicious,
.h-color-delicious:hover {
  color: rgba(var(--cnvs-color-delicious-rgb), 1) !important;
}

.color-paypal,
.h-color-paypal:hover {
  color: rgba(var(--cnvs-color-paypal-rgb), 1) !important;
}

.color-waze,
.h-color-waze:hover {
  color: rgba(var(--cnvs-color-waze-rgb), 1) !important;
}

.color-android,
.h-color-android:hover {
  color: rgba(var(--cnvs-color-android-rgb), 1) !important;
}

.color-googledrive,
.h-color-googledrive:hover {
  color: rgba(var(--cnvs-color-googledrive-rgb), 1) !important;
}

.color-wikipedia,
.h-color-wikipedia:hover {
  color: rgba(var(--cnvs-color-wikipedia-rgb), 1) !important;
}

.color-stumbleupon,
.h-color-stumbleupon:hover {
  color: rgba(var(--cnvs-color-stumbleupon-rgb), 1) !important;
}

.color-foursquare,
.h-color-foursquare:hover {
  color: rgba(var(--cnvs-color-foursquare-rgb), 1) !important;
}

.color-call,
.h-color-call:hover {
  color: rgba(var(--cnvs-color-call-rgb), 1) !important;
}

.color-ninetyninedesigns,
.h-color-ninetyninedesigns:hover {
  color: rgba(var(--cnvs-color-ninetyninedesigns-rgb), 1) !important;
}

.color-forrst,
.h-color-forrst:hover {
  color: rgba(var(--cnvs-color-forrst-rgb), 1) !important;
}

.color-digg,
.h-color-digg:hover {
  color: rgba(var(--cnvs-color-digg-rgb), 1) !important;
}

.color-spotify,
.h-color-spotify:hover {
  color: rgba(var(--cnvs-color-spotify-rgb), 1) !important;
}

.color-reddit,
.h-color-reddit:hover {
  color: rgba(var(--cnvs-color-reddit-rgb), 1) !important;
}

.color-blogger,
.h-color-blogger:hover {
  color: rgba(var(--cnvs-color-blogger-rgb), 1) !important;
}

.color-cc,
.h-color-cc:hover {
  color: rgba(var(--cnvs-color-cc-rgb), 1) !important;
}

.color-dribbble,
.h-color-dribbble:hover {
  color: rgba(var(--cnvs-color-dribbble-rgb), 1) !important;
}

.color-evernote,
.h-color-evernote:hover {
  color: rgba(var(--cnvs-color-evernote-rgb), 1) !important;
}

.color-flickr,
.h-color-flickr:hover {
  color: rgba(var(--cnvs-color-flickr-rgb), 1) !important;
}

.color-google,
.h-color-google:hover {
  color: rgba(var(--cnvs-color-google-rgb), 1) !important;
}

.color-salesforce,
.h-color-salesforce:hover {
  color: rgba(var(--cnvs-color-salesforce-rgb), 1) !important;
}

.color-cloudflare,
.h-color-cloudflare:hover {
  color: rgba(var(--cnvs-color-cloudflare-rgb), 1) !important;
}

.color-linkedin,
.h-color-linkedin:hover {
  color: rgba(var(--cnvs-color-linkedin-rgb), 1) !important;
}

.color-vk,
.h-color-vk:hover {
  color: rgba(var(--cnvs-color-vk-rgb), 1) !important;
}

.color-rss,
.h-color-rss:hover {
  color: rgba(var(--cnvs-color-rss-rgb), 1) !important;
}

.color-skype,
.h-color-skype:hover {
  color: rgba(var(--cnvs-color-skype-rgb), 1) !important;
}

.color-twitter,
.h-color-twitter:hover {
  color: rgba(var(--cnvs-color-twitter-rgb), 1) !important;
}

.color-x-twitter,
.h-color-x-twitter:hover {
  color: rgba(var(--cnvs-color-x-twitter-rgb), 1) !important;
}

.color-youtube,
.h-color-youtube:hover {
  color: rgba(var(--cnvs-color-youtube-rgb), 1) !important;
}

.color-vimeo,
.h-color-vimeo:hover {
  color: rgba(var(--cnvs-color-vimeo-rgb), 1) !important;
}

.color-slack,
.h-color-slack:hover {
  color: rgba(var(--cnvs-color-slack-rgb), 1) !important;
}

.color-yahoo,
.h-color-yahoo:hover {
  color: rgba(var(--cnvs-color-yahoo-rgb), 1) !important;
}

.color-email3,
.h-color-email3:hover {
  color: rgba(var(--cnvs-color-email3-rgb), 1) !important;
}

.color-macstore,
.h-color-macstore:hover {
  color: rgba(var(--cnvs-color-macstore-rgb), 1) !important;
}

.color-figma,
.h-color-figma:hover {
  color: rgba(var(--cnvs-color-figma-rgb), 1) !important;
}

.color-podcast,
.h-color-podcast:hover {
  color: rgba(var(--cnvs-color-podcast-rgb), 1) !important;
}

.color-meetup,
.h-color-meetup:hover {
  color: rgba(var(--cnvs-color-meetup-rgb), 1) !important;
}

.color-dropbox,
.h-color-dropbox:hover {
  color: rgba(var(--cnvs-color-dropbox-rgb), 1) !important;
}

.color-ebay,
.h-color-ebay:hover {
  color: rgba(var(--cnvs-color-ebay-rgb), 1) !important;
}

.color-github,
.h-color-github:hover {
  color: rgba(var(--cnvs-color-github-rgb), 1) !important;
}

.color-googleplay,
.h-color-googleplay:hover {
  color: rgba(var(--cnvs-color-googleplay-rgb), 1) !important;
}

.color-itunes,
.h-color-itunes:hover {
  color: rgba(var(--cnvs-color-itunes-rgb), 1) !important;
}

.color-periscope,
.h-color-periscope:hover {
  color: rgba(var(--cnvs-color-periscope-rgb), 1) !important;
}

.color-meta,
.h-color-meta:hover {
  color: rgba(var(--cnvs-color-meta-rgb), 1) !important;
}

.color-soundcloud,
.h-color-soundcloud:hover {
  color: rgba(var(--cnvs-color-soundcloud-rgb), 1) !important;
}

.color-tumblr,
.h-color-tumblr:hover {
  color: rgba(var(--cnvs-color-tumblr-rgb), 1) !important;
}

.color-wordpress,
.h-color-wordpress:hover {
  color: rgba(var(--cnvs-color-wordpress-rgb), 1) !important;
}

.color-yelp,
.h-color-yelp:hover {
  color: rgba(var(--cnvs-color-yelp-rgb), 1) !important;
}

.color-microsoft,
.h-color-microsoft:hover {
  color: rgba(var(--cnvs-color-microsoft-rgb), 1) !important;
}

.color-trello,
.h-color-trello:hover {
  color: rgba(var(--cnvs-color-trello-rgb), 1) !important;
}

.color-scribd,
.h-color-scribd:hover {
  color: rgba(var(--cnvs-color-scribd-rgb), 1) !important;
}

.color-stripe,
.h-color-stripe:hover {
  color: rgba(var(--cnvs-color-stripe-rgb), 1) !important;
}

.color-print,
.h-color-print:hover {
  color: rgba(var(--cnvs-color-print-rgb), 1) !important;
}

.color-btc,
.h-color-btc:hover {
  color: rgba(var(--cnvs-color-btc-rgb), 1) !important;
}

.color-weibo,
.h-color-weibo:hover {
  color: rgba(var(--cnvs-color-weibo-rgb), 1) !important;
}

.color-acrobat,
.h-color-acrobat:hover {
  color: rgba(var(--cnvs-color-acrobat-rgb), 1) !important;
}

.color-drupal,
.h-color-drupal:hover {
  color: rgba(var(--cnvs-color-drupal-rgb), 1) !important;
}

.color-buffer,
.h-color-buffer:hover {
  color: rgba(var(--cnvs-color-buffer-rgb), 1) !important;
}

.color-pocket,
.h-color-pocket:hover {
  color: rgba(var(--cnvs-color-pocket-rgb), 1) !important;
}

.color-bitbucket,
.h-color-bitbucket:hover {
  color: rgba(var(--cnvs-color-bitbucket-rgb), 1) !important;
}

.color-stackoverflow,
.h-color-stackoverflow:hover {
  color: rgba(var(--cnvs-color-stackoverflow-rgb), 1) !important;
}

.color-hackernews,
.h-color-hackernews:hover {
  color: rgba(var(--cnvs-color-hackernews-rgb), 1) !important;
}

.color-xing,
.h-color-xing:hover {
  color: rgba(var(--cnvs-color-xing-rgb), 1) !important;
}

.color-instagram,
.h-color-instagram:hover {
  color: rgba(var(--cnvs-color-instagram-rgb), 1) !important;
}

.color-quora,
.h-color-quora:hover {
  color: rgba(var(--cnvs-color-quora-rgb), 1) !important;
}

.color-openid,
.h-color-openid:hover {
  color: rgba(var(--cnvs-color-openid-rgb), 1) !important;
}

.color-steam,
.h-color-steam:hover {
  color: rgba(var(--cnvs-color-steam-rgb), 1) !important;
}

.color-amazon,
.h-color-amazon:hover {
  color: rgba(var(--cnvs-color-amazon-rgb), 1) !important;
}

.color-line,
.h-color-line:hover {
  color: rgba(var(--cnvs-color-line-rgb), 1) !important;
}

.color-kickstarter,
.h-color-kickstarter:hover {
  color: rgba(var(--cnvs-color-kickstarter-rgb), 1) !important;
}

.color-appstore,
.h-color-appstore:hover {
  color: rgba(var(--cnvs-color-appstore-rgb), 1) !important;
}

.color-pinterest,
.h-color-pinterest:hover {
  color: rgba(var(--cnvs-color-pinterest-rgb), 1) !important;
}

.color-fivehundredpx,
.h-color-fivehundredpx:hover {
  color: rgba(var(--cnvs-color-fivehundredpx-rgb), 1) !important;
}

.color-tiktok,
.h-color-tiktok:hover {
  color: rgba(var(--cnvs-color-tiktok-rgb), 1) !important;
}

.color-airbnb,
.h-color-airbnb:hover {
  color: rgba(var(--cnvs-color-airbnb-rgb), 1) !important;
}

.color-gpay,
.h-color-gpay:hover {
  color: rgba(var(--cnvs-color-gpay-rgb), 1) !important;
}

.color-unsplash,
.h-color-unsplash:hover {
  color: rgba(var(--cnvs-color-unsplash-rgb), 1) !important;
}

.color-snapchat,
.h-color-snapchat:hover {
  color: rgba(var(--cnvs-color-snapchat-rgb), 1) !important;
}

.color-discord,
.h-color-discord:hover {
  color: rgba(var(--cnvs-color-discord-rgb), 1) !important;
}

.color-twitch,
.h-color-twitch:hover {
  color: rgba(var(--cnvs-color-twitch-rgb), 1) !important;
}

.dark {
  --cnvs-contrast-bg: #212529;
  --cnvs-contrast-bg-offset: #343a40;
  --cnvs-contrast-0: #000;
  --cnvs-contrast-100: #212529;
  --cnvs-contrast-200: #343a40;
  --cnvs-contrast-300: #495057;
  --cnvs-contrast-400: #6c757d;
  --cnvs-contrast-500: #adb5bd;
  --cnvs-contrast-600: #ced4da;
  --cnvs-contrast-700: #dee2e6;
  --cnvs-contrast-800: #e9ecef;
  --cnvs-contrast-900: #f8f9fa;
  --cnvs-contrast-1000: #fff;
  --bs-link-color: var(--cnvs-contrast-900);
  --cnvs-invert-contrast-0: #fff;
  --cnvs-invert-contrast-100: #f8f9fa;
  --cnvs-invert-contrast-200: #e9ecef;
  --cnvs-invert-contrast-300: #dee2e6;
  --cnvs-invert-contrast-400: #ced4da;
  --cnvs-invert-contrast-500: #adb5bd;
  --cnvs-invert-contrast-600: #6c757d;
  --cnvs-invert-contrast-700: #495057;
  --cnvs-invert-contrast-800: #343a40;
  --cnvs-invert-contrast-900: #212529;
  --cnvs-invert-contrast-1000: #000;
  --cnvs-contrast-rgb: 255, 255, 255;
  --cnvs-invert-contrast-rgb: 0, 0, 0;
  --cnvs-heading-color: var(--cnvs-contrast-900);
  --cnvs-topbar-bg: var(--cnvs-contrast-bg-offset);
  --cnvs-header-bg: var(--cnvs-contrast-bg);
  --cnvs-header-sticky-bg: var(--cnvs-contrast-bg);
  --cnvs-side-header-bg: var(--cnvs-contrast-bg);
  --cnvs-header-floating-bg: var(--cnvs-contrast-bg);
  --cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-bg);
  --cnvs-section-bg: var(--cnvs-contrast-bg-offset);
  --cnvs-footer-bg: var(--cnvs-contrast-bg-offset);
  color: var(--cnvs-contrast-800);
}
.adrsorta{ text-align: left}
@media screen and (max-width: 986px) {
.adrsorta{ text-align: center}
}

.habericerik {
  position: relative;
  width: 100%;
  height: 100%;
}
.habericerik img { 
  z-index: 0;
}
.ground-large-cut {
            width: 100%;
            background-color: rgba(242,146, 6, 0.8);
            position: absolute;
            z-index: 5;
            bottom: 29px ;
            
            clip-path: polygon(
                0% 0%,           /* Sol üst köşe */
                calc(100% - 30px) 0%, /* Sağ üst köşe - üçgenin başlangıç noktası - daha derin açı */
                100% 100%,       /* Sağ alt köşe - üçgenin uç noktası */
                0% 100%          /* Sol alt köşe */
            );
            background-image: url("../img/cizgi.png");
            background-repeat: no-repeat;
            background-position: left bottom;
            padding: 10px 3px 15px 10px;
            font: normal 2rem/2rem 'sitefont6';
            color: white;
        }
        .ground-large-cut-2 {
            width: 92%;
            height: 20px;
            background-color: rgba(124,124, 124, 0.85);;
            position: absolute;
            z-index: 5;
            bottom: 0;
            margin-top: 10px;
            margin-bottom: 0px !important;
            clip-path: polygon(
                0% 0%,           /* Sol üst köşe */
                100% 0%,         /* Sağ üst köşe */
                calc(100% - 30px) 100%, /* Sağ alt köşe - üçgenin iç kısmı */
                0% 90%          /* Sol alt köşe */
            );
            padding: 5px 5px 25px 12px;
            color: #000000;
            font: normal 1.1rem/1.1rem 'sitefont4';
        }

.footezmn {
  background: url("../img/zemin_golge5.png") repeat top, rgba(10, 10, 10, 0.7);
}

@media (max-width: 1540px) {
  .renkxx{
    color: #00e932;
  }
.ground-large-cut {
  font: normal 1.6rem/1.6rem 'sitefont6' !important;
}
}

/**/
/* === LOGO ŞERİDİ GENEL === */
.logo-strip {
  padding: 16px 0;
  position: relative;
}

.logo-item {
  position: relative;
  padding: 16px 10px;
}

/* === LOGO GÖRÜNÜMÜ === */
.logo-img {
  max-height: 80px;
  object-fit: contain;
  display: inline-block;

  filter: none;
  opacity: 1;
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.logo-item:hover .logo-img,
.logo-item:focus-within .logo-img {
  filter: grayscale(100%) contrast(90%) brightness(95%);
  opacity: 0.8;
  transform: scale(0.96);
}

/* === AYIRICI ÇİZGİLER === */
.logo-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 2px;
  height: 72%;
  transform: translateY(-50%) rotate(12deg);

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.25) 50%,
    rgba(0,0,0,0) 100%
  );

  box-shadow:
    0 0 6px rgba(0,0,0,0.10),
    0 0 12px rgba(0,0,0,0.08);

  pointer-events: none;
}

/* === ALTTA DAİRESEL HALKA (BÜYÜTÜLMÜŞ) === */
.logo-item::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 20px;                   /* Başlangıç boyutunu büyüttük (10px → 20px) */
  height: 20px;
  transform: translateX(-50%) scale(1);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.25); /* Daha belirgin renk */
  opacity: 0;
  pointer-events: none;
}

.logo-item:hover::before,
.logo-item:focus-within::before {
  animation: logoRipple 1.8s ease-out forwards;  /* biraz daha uzun süre */
}

@keyframes logoRipple {
  0%   { transform: translateX(-50%) scale(1);   opacity: 0.4; }
  60%  { transform: translateX(-50%) scale(3.0); opacity: 0.2; }
  100% { transform: translateX(-50%) scale(4.2); opacity: 0; }
}

/* === RESPONSIVE === */
@media (max-width: 767.98px) {
  .logo-img { max-height: 44px; }
  .logo-item:not(:last-child)::after {
    height: 60%;
    right: -1px;
    transform: translateY(-50%) rotate(8deg);
  }
}

/* === HAREKET HASSASİYETİ === */
@media (prefers-reduced-motion: reduce) {
  .logo-img { transition: none; }
  .logo-item:hover::before,
  .logo-item:focus-within::before { animation: none; }
}

.dokulink a { font: normal 1.052rem/1.3rem 'sitefont6' !important; color:#343a40;}
.dokulink a:hover { color: #074732 !important;}

/* === FOOTER TEXT SATIRI === */
.footer-widgets-wrap {
  --accent: #18ac3f;
  padding: 28px 0 36px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.footer-widgets-wrap .divider {
  position: relative;
  height: 1px;
  margin: 5px 0;
  background: linear-gradient(
    to right, 
    transparent, 
    rgba(150,150,150,0.6),
    transparent
  );
}

/* Adres metni (mb-1) - HER ZAMAN SOLA YASLI */
.footer-widgets-wrap .mb-1 {
  margin-bottom: 12px !important;
  line-height: 1.45;
  font-size: clamp(14px, 1.4vw, 19px);
  opacity: .95;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start; /* her zaman sola yaslı */
  text-align: left;
}

.footer-widgets-wrap .mb-1 i {
  color: #dbdbdb;
}

/* Telefon satırı (mb-0) - RESPONSIVE HIZALAMA */
.footer-widgets-wrap .mb-0 { 
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* İç telefon numarası elementi */
.footer-widgets-wrap .mb-0 .number {
  font-size: 2.9rem !important;
  font-family: 'sitefont3';
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%; /* tam genişlik */
}

.footer-widgets-wrap .area { 
  font: normal 2.1rem/2.3rem 'sitefont3';
  color: #ffffff;
  opacity: .85;
}

/* Telefon ikonu */
.footer-widgets-wrap .bi-telephone-fill {
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
  transform: translateY(1px);
}

/* Numara rengi ve tipografi */
.footer-widgets-wrap .text-warning {
  color: var(--accent) !important;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
}

/* KÜÇÜK EKRANLAR (575px ve altı) - mb-0 ortada, mb-1 sola yaslı */
@media (max-width: 575.98px) {
  .footer-widgets-wrap { 
    padding: 24px 0 30px; 
  }
  
  /* Sadece telefon numarasını ortala */
  .footer-widgets-wrap .mb-0 {
    justify-content: center;
    text-align: center;
  }
  
  .footer-widgets-wrap .mb-0 .number {
    justify-content: center;
    text-align: center;
  }
  
  /* Adres her zaman sola yaslı kalır */
  .footer-widgets-wrap .mb-1 {
    justify-content: center;
    text-align: center;
  }
}

/* ORTA ve BÜYÜK EKRANLAR (576px ve üstü) - mb-0 sola yaslı */
@media (min-width: 576px) {
  .footer-widgets-wrap .mb-0 {
    justify-content: flex-start;
    text-align: left;
  }
  
  .footer-widgets-wrap .mb-0 .number {
    justify-content: flex-start;
    text-align: left;
  }
}

/* ===== KAYIT FORMU STİLLERİ ===== */
.registration-form-container {
  position: relative;
  border-radius: 0; /* Tamamen keskin, köşeli görünüm */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin: 0; /* Margin'i kaldır - tam genişlik için */
  min-height: 140px;
  display: flex;
  width: 100%; /* Tam genişlik */
}

/* Sol taraf - Dar koyu mavi alan */
.registration-title {
  background: rgba(54, 181, 60, 0.8);
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
  position: relative;
  flex: 0 0 280px; /* Sabit genişlik */
  z-index: 2;
}

/* Çıkıntı - soldaki alandan sağa doğru uzanan keskin hat */
.registration-title::after {
  content: '';
  position: absolute;
  top: 0;
  right: -30px;
  width: 60px;
  height: 100%;
  background: rgba(30, 138, 66, 0.8);
  transform: skewX(-20deg);
  z-index: 1;
}

.registration-title h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.registration-title p {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Sağ taraf - Şeffaf zemin üzerinde form */
.registration-form-area {
  background: transparent; /* Açık mavi zemini kaldır */
  padding: 30px 40px 30px 50px; /* Sol taraftan daha fazla padding - çıkıntıyı kapatmak için */
  display: flex;
  align-items: center;
  min-height: 140px;
  position: relative;
  flex: 1;
  z-index: 1;
}

.form-content {
  width: 100%;
  position: relative;
  z-index: 2;
}

.form-row {
  display: flex;
  gap: 30px;
  align-items: flex-end;
}

.form-group {
  flex: 1;
  margin-bottom: 0;
}

.input-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.input-label i {
  font-size: 18px;
  margin-right: 8px;
}

.form-control {
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  background: white;
  transition: all 0.3s ease;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.form-control:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.form-control::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* Form butonu */
.registration-form-btn {
  background: rgba(8, 153, 45, 0.9);
  border: none;
  border-radius: 8px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-left: 15px;
}

.registration-form-btn:hover {
  background: rgba(30, 58, 138, 1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.registration-form-btn:active {
  transform: translateY(0);
}

/* Responsive tasarım */
@media (max-width: 768px) {
  .registration-form-container {
    flex-direction: column;
  }
  
  .registration-title {
    flex: none;
    width: 100%;
    padding: 20px;
    min-height: auto;
  }
  
  .registration-title::after {
    display: none;
  }
  
  .registration-form-area {
    flex: none;
    width: 100%;
    padding: 20px;
    min-height: auto;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }
  
  .form-group {
    width: 100%;
    flex: none;
  }
  
  .form-control {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
  }
  
  .registration-title h3 {
    font-size: 22px;
  }
  
  .registration-title p {
    font-size: 13px;
  }
  
  .registration-form-container {
    margin: 15px 0;
  }
  
  .registration-form-btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
    margin-left: 10px;
  }
}

/* Daha küçük ekranlar için ek kurallar */
@media (max-width: 576px) {
  .registration-form-container {
    margin: 10px 0;
    border-radius: 8px;
  }
  
  .registration-title {
    padding: 15px;
  }
  
  .registration-form-area {
    padding: 15px;
  }
  
  .form-row {
    gap: 12px;
  }
  
  .form-control {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .input-label {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .input-label i {
    font-size: 16px;
  }
  
  .registration-form-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
    margin-left: 8px;
  }
}

/* Form Validation Styles */
.form-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid {
  border-color: #198754;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  display: block;
}

.was-validated .form-control:valid ~ .invalid-feedback,
.form-control.is-valid ~ .invalid-feedback {
  display: none;
}

/* Form validation animation */
.form-control.is-invalid {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Success state styling */
.form-control.is-valid {
  border-color: #198754;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.94-.94 3.71-3.71L8 3.42 6.95 2.37 6.3 3.02 3.24 6.08z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Error state styling */
.form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4M7.2 4.6l-1.4 1.4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/* bayrak icon */
.flag-icon {
  display: inline-block;
  width: 32px;   /* butonun genişliği kadar */
  height: 32px;  /* butonun yüksekliği kadar */
  background-size: cover;
  background-position: 25% center;
  border-radius: 4px; /* isteğe bağlı, köşeleri biraz yumuşatır */
}

/* Türk bayrağı */
.flag-icon.turkce {
  background-image: url("../media/svg/flag/tr.svg");
}

/* İngiliz bayrağı */
.flag-icon.english {
  background-image: url("../media/svg/flag/en.svg");
}

.lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

/* Türkçe */
.lang-badge-tr {
  background-color: rgba(255, 32, 32, 0.30);   /* Türk bayrağı kırmızısı */
  color: #fff;
  border-color: #87fdff;
}

/* İngilizce */
.lang-badge-en {
  background-color:rgba(13, 0, 193, 0.3);   /* UK bayrağı laciverti */
  color: #fff;
  border-color: #87fdff;
}

/* içerik class */
.iceriktoolbar {
  z-index: 300 !important; padding-top: 5px;
}

/* Duyuru Card Footer - Slim Design */
.card-footer-slim {
  background-color: rgba(248, 249, 250, 0.6);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 8px 15px !important;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Tüm Duyurular Link */
.tum-duyurular-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  padding: 2px 8px;
  border-radius: 4px;
}

.tum-duyurular-link:hover {
  color: #495057;
  background-color: rgba(108, 117, 125, 0.08);
  text-decoration: none;
  transform: translateY(-1px);
}

.tum-duyurular-link i {
  transition: transform 0.2s ease;
}

.tum-duyurular-link:hover i {
  transform: translateX(2px);
}