@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import 'style.css';
/* MAIN
////////////////////////////////////////////////////////
*/
body, html {
	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;


	font-optical-sizing: auto;
	font-style: normal;
	font-weight:300;
	outline: none;
}
body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}
*:focus {
    outline: none;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}
#wrapper{
    min-height: 100%;
	overflow:hidden;
    height: auto;
}
a{
	color:#999999;
   	text-decoration:none;
   }
a:hover{
	color:#333333;
}

.swal2-popup{width: 350px!important}
.swal2-title{font-size:medium!important}

/* NAV
////////////////////////////////////////////////////////
*/
.activeNav{background: #f4f4f4;}
.mobileMenuOpen{
	display:none
}
.topNav{
	width:100%;
}

.topNav > ul{
	list-style-type:none;
	width:100%;
	display:table;
	padding:0;
	margin: 0;
}
.topNav > ul > li{
	display:table-cell;
	text-align:center;
}

.topNav ul li a{
	padding:20px;
	display:block;
	color:#0a0a09
}
.has-sub{
	position:relative
}
.has-sub > a::after {
    content: "";
	position: absolute;
	background:red
}
.has-sub > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 80%;
    height: 8px;
    width: 8px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
	transition: rotate 1s, box-shadow 1s;
    transform: translate(-50%, -50%) rotate(45deg);
}
.has-sub > a:hover::before {
/*    content: "";
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
	
	transform: translate(-50%, -50%) rotate(220deg);*/
	transition: box-shadow 1s;
	box-shadow: 3px 3px #888888;
}
.subNav{
    list-style: none;
    padding: 0;
    position: absolute;
	z-index:99;	
	text-align:left;
	width:220px;
	display:none;
	/*transform: translateX(30%);*/
}
.subNav > li{
	display: flex;
}
.subNav > li > a{
	padding:10px 20px;
	width: 100%;
	background:#ffffffd4
}
.has-sub2{
	position:relative
}

.has-sub2 > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 90%;
    height: 8px;
    width: 8px;
    border-right: 2px solid #181818;
    border-bottom: 2px solid #181818;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.subNav2{
	position: absolute;
	padding:0;
	list-style-type:none;
	display:none;
	left: 220px;
	width:220px;
}
.subNav2 > li{
	display: flex;
}
.subNav2 > li > a{
	padding:10px 20px;
	width: 100%;
	background:#ffffffd4
}
.mobileNav{
	display:none
}
@media only screen and (max-device-width: 768px) {
	.mobileNav{
		display:flex
	}

	.topNav ul{
		display:none;
		left: 0;
		position: absolute;
		z-index: 9999;
		background: white;		
	}
	.topNav > ul > li{
		text-align:left;
	}
	.topNav > ul > li {
		padding:0px 0;
		display:grid
	}
	.topNav ul li a {
		position: relative;
	}
	.subNav{
		position:relative;
		width: 100%;
	}
	.has-sub2 > a::before {
		transform: translate(-50%, -50%) rotate(45deg);
		z-index:2
	}
	
	.subNav > li {
		display: grid;
		/* align-content: space-around; */
	}
	.subNav2{
		position:relative;
		left: 0px;
		width: 100%;
	}
	.subNav2 li a{
		background:#999999
	}

	.mobileMenuOpen{
		display:block
	}
	.mobileMenuOpen{
		right:0;
		z-index:99;
		height:40px;
		width:40px
	}
	.mobileMenuOpen img{
		width: 40px;
		right: 10px;
		top: 20px;
		position: absolute;
	}
	#MenuOpen{
		position:relative;
		right: 3px;
		top: 3px;
	}
}

/* ARAMA
////////////////////////////////////////////////////////
*/
.aramaContainer{
    background: #000000eb;
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: fixed;
	display:none
}
.aramaContainer form{	
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width:70%;
	text-align:center;
}
.aramaContainer form input[type="text"]{
	background: #ffffff;
	border: 1px solid #ffffffbf;
	color: #000;
	border-radius: 4px;
	font-size: larger;
	padding: 20px;
	width: 75%;
	text-align:center;
	letter-spacing: 10px;
}
.aramaContainer form input[type="text"]::placeholder {
  color: #333;
  opacity: 1; /* Firefox */
}
.aramaContainer form input[type="button"]{
	border: none;
	font-size: large;
	margin-left: 20px;
	color: #fff;
	transform: rotate(0deg);
	transition: 0.5s ease-in-out;
	color: #303030;
	width: auto;
	border-radius: 4px;
	padding: 21px;
	border: 1px solid #ffffff00;
}
.aramaContainer form input[type="button"]:hover{
	background: #000000;
	color: #fff;
	border: 1px solid #fff;
}

.aramaContainerKapat{
	border-radius:3px;
	right: 10px;
	top: 10px;
	position: absolute;
}
.aramaContainerKapat i{
	font-size:xxx-large;
	cursor:pointer;
	padding:6px;

}
.item-2 {
  width: 60px;
  height: 60px;
  position: relative;
  border: 2px solid #FFF;
  background: none;
  border-radius: 50%;
  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 80%;
    height: 2px;
    background-color: #FFF;
    transition: 0.3s ease-out;
    left: 50%;
    top: 50%;
  }
  &:after {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &:before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  &:hover,
  &:focus {
    &:before,
    &:after {
      transform: translate(-50%, -50%) rotate(180deg);
    }
  }
}

/* DİĞERLER
////////////////////////////////////////////////////////
*/
.blinker {
      animation: blinker 0.9s linear infinite; //efekti veren kod
      color: #1c87c9; //yazı rengi
      font-size: 30px; // yazı boyutu
      font-weight: bold; // yazı kalınlığı
      font-family: sans-serif; // yazı fontu
      }
      @keyframes blinker {  
      50% { opacity: 0; }
      }
.logoPosDiv{
	position: absolute;
	z-index: 99;
	width: 200px;
	top: -30px;
	background: #ffffff;
	padding: 20px;
	filter: drop-shadow(2px 2px 6px #000000);
	background-image: linear-gradient(#ffffff, #f3f3f3);
	border-radius: 4px;
	transition:all .2s ease;
}
.logoPosDiv:hover{
	padding:10px;
	transition:all .3s ease;
	background:#f4f4f4;
	 transform: translate(0%, 0%) rotate(10deg);
}

.npad {padding:0}
.pager{margin: 20px;text-align: center;}
.pager span a{
	font-weight: 500;
	padding: 8px 12px;
	border: 1px solid #8c9ab8;
	margin-left: 10px;
	background: #e1e3ea;
	border-radius: 3px;
}

.pager #current_page {
	font-weight: bold;
	padding: 8px 12px;
	border: 1px solid #8c9ab8;
	margin-left: 10px;
	border-radius: 3px;
}
.bottom{
	margin-top:100px;
	padding:50px 0 10px 0;
	background:#00CC33
}

.headerContainer{
	text-align:right;
	amargin: 0;
	aposition: absolute;
	atop: 50%;
	a-ms-transform: translateY(-50%);
	atransform: translateY(-50%);	
}
.headerH1{
	color: #fff;
	font-weight: 300;
	font-size: 2.6vw;
}
@media only screen and (max-device-width: 768px) {
	.headerH1{
		 font-size: 38px;
	}
}
.headerH2{
    font-family: 'Sansita', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.2vw;
    font-style: italic;
}
.headerH3{
    font-family: 'Sansita', sans-serif;
    color: #fff;
	font-weight: 200;
	font-size: 0.91em;
}
.headerH3 a{
	color:#ccc
}
.headerH3 a:hover{
	color:#fff
}
@media only screen and (max-device-width: 768px) {
	.headerH3{
		font-size: 12px;
	}
}
/* FOOTER Vs.
////////////////////////////////////////////////////////
*/

#footer-contact { margin: 0; list-style: none; font-size: 16px; color: #fff; }
#footer-contact li { position: relative; padding-left: 60px; margin-bottom: 25px; }
#footer-contact li:last-child { margin-bottom: 0; }
#footer-contact li i { position: absolute; top: 7px; left: 0; width: 40px; height: 40px; padding: 10px 0; background-color: #004eff; color: #ffffff; border-radius: 50%; text-align: center; font-size: 22px; }
#footer-contact strong, #footer-contact b { text-transform: uppercase; font-size: 12px; font-weight: 400; }
#footer-contact a { color: #fff; }
#footer-contact a:hover { color: #9ac242; }
#footer-contact a p { margin-bottom: 0; }

/* INPUT Vs.
////////////////////////////////////////////////////////
*/

input,textarea,select{
	width: 100%;
    border: 0px solid #d3dfc747;
    border-bottom: 1px solid #d3dfc7;
    padding: 10px;
    margin-bottom: 30px;
	transition: 0.3s;
	font-size: medium;
}
input:focus,textarea:focus{
	transition: 0.3s;
	background: #efefef;
}


.text{
	padding:20px 40px;
	color: #666;
	font-size:larger;
	line-height: inherit;
}
.bottomTags i{
	 color:#004eff;
}
.bottomTags{
    float: left;
	margin-right:8px;
	font-size: small;
}
.formOverlayHolder{
	display:none
}


.formOverlay{
	display: grid;
	place-items: center;
	background: #000000d6;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 999;
	text-align: center;
}
.formOverlay font{
	color: #fff;
	font-size: 6vw;
}
#go-up {
	position: fixed;
    right: 20px;
    bottom: 40px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-align: center;
    background-color: #19237b;
    color: #fff;
    font-size: 26px;
    line-height: 46px;
    cursor: pointer;
    z-index: 1001;
    aopacity: 0;
    display: none;
    transition: all .3s;
    -webkit-transition: all .3s;
 }
.smaller #go-up { opacity: 1; }

#navAlisveris{
}
#navAlisveris a{
	color:#666
}
.navSepetimIconAdet {
	position: absolute;
	margin: -25px 0 0 20px;
	font-size: xx-small;
	font-weight: 500;
	padding: 5px;
	height: 20px;
    width: 20px;	
	border-radius: 50px;
	background: #004eff;
	color: white;
}
.AlisverisPanels{
	display:table-cell;
	transition: .2s; /* Animation */
}
.AlisverisPanels:hover i{
	color:#f3a952;
	transition: .2s; /* Animation */
}								


.heading-seperator{
    position: relative;
}
.heading-seperator span:after {
    content: "";
    left: 53%; 
    position: absolute;
    bottom: 28px;
    width: 17px;
    margin-left: 0;
    border-bottom-width: 3px;
    border-bottom-color: #cacaca;
    border-bottom-style: solid;
}
.heading-seperator span:after {
    right: auto;
    left: 205px;
}
.heading-seperator:after {
    border-bottom-color: #192591;
}
.heading-seperator:after {
    content: "";
    left: 50%;
    position: absolute;
    bottom: 28px;
    width: 200px;
    margin-left: -37px;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}
.heading-seperator:after {
    left: 0;
    margin-left: 0;
}
.heading-seperator.text-center span:after {
    left: auto;
    margin-left: 26px;
}
.heading-seperator.text-center:after{
    left: inherit;
    margin-left: -37px;
}
.ttm-fid-icon .ttm-fid-icon-wrapper {
    margin-bottom: 10px;
    border: 2px solid #fff;
    width: 113px;
    height: 113px;
    line-height: 113px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}.ttm-fid.ttm-fid-icon {
    text-align: center;
}
.ttm-fid {
    position: relative;
    padding: 25px 0px;
}
.cms_contenteditable{
	font-size:medium
}
.ttm-fid-icon-wrapper i{
	font-size:xxx-large
}
.ttm-fid-title{
	line-height:12px
}

.block-title{
	background: url(../images/header_bg.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	font-weight: 300;
	font-size: xx-large;
	padding-bottom: 10px;
	margin-bottom: 40px;
}

/* Buttonlar Vs.
////////////////////////////////////////////////////////
*/
.buttonAlpha{
    background: #55a2bd;
    border:none;
    border-radius: 4px;
    padding: 4px 10px;
    font-weight: 300;
    color: #fff;
    padding: 10px 20px;
    /* margin: 20px 0; */
    /* margin-top: 20px; */
    /* margin-left: 10px; */
    font-size: medium;

}
@media only screen and (max-device-width: 768px) {
	.buttonAlpha{
		padding: 10px 12px;
	
	}
}
.buttonBeta{
    background: #55a2bd;
    border:none;
    border-radius: 4px;
    padding: 4px 10px;
    font-weight: 300;
    color: #fff;
    padding: 10px 20px;
    /* margin: 20px 0; */
    /* margin-top: 20px; */
    /* margin-left: 10px; */
    font-size: medium;
}
@media only screen and (max-device-width: 768px) {
	.buttonBeta{
		padding: 10px 12px;
	
	}
}
.buttonBeta:hover{
	background: #eb5050;
	transition:1s ease-out;
}

.buttonFlip {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.buttonFlip > div {
  position: relative;
  width: 160px;
  height: 50px;
  margin: 0 15px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
.buttonFlip > div > a {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-25px);
  -moz-transform: translateZ(-25px);
  -ms-transform: translateZ(-25px);
  -o-transform: translateZ(-25px);
  transform: translateZ(-25px);
  -webkit-transition: -webkit-transform 0.25s;
  -moz-transition: -moz-transform 0.25s;
  transition: transform 0.25s;
}
.buttonFlip > div > a::before, .buttonFlip > div > a::after {
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 160px;
  height: 50px;
  position: absolute;
  border: 5px solid black;
  box-sizing: border-box;
  content: attr(title);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.buttonFlip > div > a::before {
  background-color: #000;
  color: #fff;
  -webkit-transform: rotateY(0deg) translateZ(25px);
  -moz-transform: rotateY(0deg) translateZ(25px);
  -ms-transform: rotateY(0deg) translateZ(25px);
  -o-transform: rotateY(0deg) translateZ(25px);
  transform: rotateY(0deg) translateZ(25px);
}
.buttonFlip > div > a::after {
  background-color: #fff;
  border-color: #000;
  color: #000;
  -webkit-transform: rotateX(90deg) translateZ(25px);
  -moz-transform: rotateX(90deg) translateZ(25px);
  -ms-transform: rotateX(90deg) translateZ(25px);
  -o-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}
.buttonFlip > div > a:hover {
  -webkit-transform: translateZ(-25px) rotateX(-90deg);
  -moz-transform: translateZ(-25px) rotateX(-90deg);
  -ms-transform: translateZ(-25px) rotateX(-90deg);
  -o-transform: translateZ(-25px) rotateX(-90deg);
  transform: translateZ(-25px) rotateX(-90deg);
}

/* Loader
////////////////////////////////////////////////////////
*/
.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}


.urunlerRepeat_yeni{
position: absolute;
background: #87b840;
margin: -10px;
border-radius: 4px;
padding: 4px 8px;
font-size: small;
color: #fff;
transition: all 1s ease;
}
.urunlerRepeat_firsat{
position: absolute;
background: #87b840;
margin: -10px;
border-radius: 4px;
margin-top:30px;
padding: 4px 8px;
font-size: small;
color: #fff;
transition: all 1s ease;
}
.urunlerRepeat_firsat:hover, .urunlerRepeat_yeni:hover{
transform: scale(1.1);
transition: all 1s ease;
}
.urunlerRepeat_stoksuz{
position: absolute;
background: #c1c1c1;
margin: -10px;
right:0;
margin-top:30px;
padding: 4px 8px;
font-size: small;
color: #fff;
z-index: 99;
}
.urunlerRepeat_indirim{
position: absolute;
background: #b52621;
margin: -10px;
right: 0;
border-radius: 4px;
padding: 4px 8px;
font-size: small;
color: #fff;
}		
.urunlerRepeat_fiyat{
font-weight: 700;
font-size: large;
text-align: center;
width: 100%;
padding-left: 5px;
color: #023ba1;
}
.urunlerRepeat{
background: #f9fbfa;
border: 1px solid #b4c5d7;
border-radius: 2px;
padding: 0px;
margin: 0px;
transition: 0.2s;
width: 100%;
position: relative;
}
.urunlerRepeat:hover{
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.urunlerRepeat:hover a{
color:#18497c!important;
}
.urunlerRepeat img {
width:100%;
padding:10px;
float:left
}
.urunlerRepeat a {
color:#666!important;
font-size: medium;

}			

.detailLink{
font-size: 18.7px;
line-height: normal;
overflow: hidden;
display: -webkit-box;
**-webkit-line-clamp: 2;
**-webkit-box-orient: vertical;
padding: 10px 4px;
}
.urunlerRepeat:hover  .urunlerRepeatCenter{
opacity:1
}
.urunlerRepeatCenter{
transition: all 0.2s ease-out;
position: absolute;
width: 100%;
opacity:0;
top: 35%;
z-index: 9;
text-align:center;
}
.urunlerRepeatCenter span{
margin:10px;
cursor:pointer
}
.urunlerRepeatCenter span i{
color: #ffffff;
font-size: large;
transition: transform .2s;
text-shadow: 1px 1px 6px #ffffff;
}
.urunlerRepeatCenter span i:hover{
transform: scale(1.5);
}

.UrunListelemeSemici{
width: 100%;
display: table;
background: #f7f7f7;
border: 1px solid #d4d4d4;
border-radius: 8px;
overflow: hidden;
margin: 20px 0;

}
.UrunListelemeSemici span{
list-style-type:none;
font-size: small;
display:table-cell;
text-align:center;
padding:15px;
cursor:pointer;
transition: 0.3s;
}
.UrunListelemeSemici span:hover, .UrunListelemeSemiciSelected {
background: #6c6c6c;
color: #fff;
transition: 0.53s;
}