@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
	text-decoration:none;
	font-optical-sizing: auto;
}
*::-webkit-scrollbar{
	width: 8px;
}
*::-webkit-scrollbar-track{
	background-color: #d0d0d0; 
}
*::-webkit-scrollbar-thumb{
	background-color: #888; 
}
*::-webkit-scrollbar-thumb:hover{
	background-color: #555;
}
a{
	color: #000000;
	transition: 500ms all;
	cursor: pointer;
}
a:hover{
	color: #383838;
}
h1,h2,h3,h4,h5,h6,p,ul{
	margin: 0;
	padding: 0;
}
img{
	width: 100%;
	vertical-align: middle;
	border-style: none;
}
body{
	padding: 0;
	margin: 0;
	background-color: #ffffff;
}
.loader{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: #da732c;
	z-index: 999
}
.loader:before{
	content: '';
	width: var(--ustdeger, 0%);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #00162c;
}
.loader #saykapa{
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 60px;
	font-weight: 700;
	color: #ffffff;
}
.header{
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	margin-bottom: 55px;
	z-index: 5;
}
.header .ust{
	padding: 0;
	text-align: right;
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.header .ust a{
	color: #fff;
	margin-right: 10px;
}
.header .ust .tel{width: 40%;text-align: left;padding: 30px 0;}
.header .ust .sosyal{
	display: inline-block;
	margin-left: 0;
	width: 40%;
	padding: 23px 15px 23px 0;
}
.header .ust .sosyal a{
	margin: 0 4px;
	width: 40px;
	border: solid 3px #ffffff;
	display: inline-block;
	height: 40px;
	text-align: center;
	line-height: 38px;
	border-radius: 50%;
}
.header .ust .sosyal a img{
	position: relative;
	width: 95%;
	top: -2px;
}
.header .ust .sosyal a i{
	font-size: 19px;
}
.header .ust:before{
	content: '';
	width: 100%;
	height: 85px;
	position: absolute;
	left: -62%;
	top: 0;
	background-image: linear-gradient(90deg, #f3871c 80%, rgba(0, 0, 0, 0));
	transform: skewX(-30deg);
	z-index: -1;
}
.header .ust:after{
	content: '';
	width: 100%;
	height: 85px;
	position: absolute;
	right: -62%;
	top: 0;
	background-image: linear-gradient(270deg, #df7132 80%, rgba(0, 0, 0, 0));
	transform: skewX(30deg);
	z-index: -1;
}
.header .logo{
	display: block;
	max-width: 204px;
	width: 35%;
	margin: 4px 20px 0 !important;
}
.header .logo img{
	filter: drop-shadow(0 0 13px #fff);
}
.slide{
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 0 0 120px;
	z-index: 2;
}
.slide:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(https://www.karainteraktif.com/view/web_2/images/ark.png),linear-gradient(354deg, #0e3252 15%, rgb(255 255 255 / 65%) 104%);
	z-index: -1;
	background-blend-mode: color-dodge;
}
.slide:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../images/maske.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}
.sayfa_ust{
	padding-bottom: 180px;
}
.sayfa_ust:after{
	background-image: url('../images/maskes.png');
}
.slide video{
	width: 105%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: -2;
}
.slide .menu{
	width: 95%;
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 190px;
}
.slide .menu .ust{
	height: 20px;
	border-radius: 45px;
	background-image: url(../images/cizgis.png), linear-gradient(0deg, #b1b1b1, #ffffff 45%);
	background-position: center;
	background-size: contain;
	background-repeat: repeat-x;
	position: relative;
	z-index: 6;
}
.slide .menu .hareket{
	width: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}
.slide .menu .kanca{
	width: 50px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -5px;
	z-index: -1;
}
.slide .menu .kanca:before{
	content: '';
	width: 5px;
	height: 36px;
	position: absolute;
	background-color: #dc782a;
	left: 21px;
	bottom: -8px;
	border-radius: 50%;
}
.slide .menu .kanca:after{
	content: '';
	width: 1.5px;
	height: 36px;
	position: absolute;
	background-color: #dddddd;
	left: 22.1px;
	bottom: -28px;
	border-radius: 50%;
	z-index: -1;
}
.rope{
	transform-origin: center top
}
.slide .menu .menu_ic{
	width: auto;
	height: 67px;
	padding: 17px 32px;
	border-radius: 50px;
	display: table;
	margin: 77px auto 0;
	transform-origin: top center;
	background: linear-gradient(to top, #d9d9d9, #ffffff);
	border: solid 4px #dddddd;
	position: relative;
}
.slide .menu ul li{
	list-style-type: none;
	float: left;
	margin: 0 20px;
	position: relative;
}
.slide .menu ul li:not(:last-child):before{
	content: '';
	width: 6px;
	height: 6px;
	position: absolute;
	background: #011220;
	right: -23px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 3px;
}
.slide .menu ul li a{
	text-transform: uppercase;
	font-weight: 600;
	color: #e17e26;
}
.mob_menu_ac{
	width: 46px;
	height: 46px;
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
}
.mob_menu_ac span{
	width: 88%;
	height: 8px;
	background: #061122;
	display: block;
	margin: 5.5px auto;
}
.mob_menu_ac span:nth-child(2){
	width: 45%;
}
.mob_ilet_ust{
	display: none;
	transform: scale(0.9);
	margin-left: -15px;
}
.mob_ilet_ust i{
	transform: scale(1.6);
	color: #f3871c;
	margin-right: 5px;
}

.slide h1{
	text-align: center;
	font-size: 25px;
	font-weight: 400;
	color: #ffffff;
	opacity: 0.8;
	margin-bottom: 9px;
	text-align: center;
	line-height: 38px;
}
.slide p{
	width: 95%;
	max-width: 850px;
	margin: 0 auto;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	opacity: 0.6;
}
.sayfa_ust h1{
	font-size: 35px;
	text-transform: uppercase;
}
.sayfa_ust p{
	font-size: 16px;
}

.ana_kurumsal_alan{
	margin: 55px 0;
	position: relative;
	overflow: hidden;
}

.ana_kurumsal_alan .sag{
	position: absolute;
	right: 0;
	padding: 0;
	height: 100%;
}

.ana_kurumsal_alan img{
	height: 100%;
	position: relative;
	object-fit: cover;
	object-position: center top;
	border-radius: 110px 0 0 0;
	z-index: 3;
}

.ana_kurumsal_alan .baslik{
	margin-bottom: 35px;
}

.ana_kurumsal_alan .baslik h2{
	text-transform: uppercase;
	line-height: 49px;
	font-weight: 300;
	font-size: 35px;
}

.ana_kurumsal_alan .sol{
	padding: 80px 10px 30px;
	position: relative;
	z-index: 1;
}

.ana_kurumsal_alan .sol:before{
	content: '';
	width: 100%;
	height: 100%;
	background: url(../images/arkaplan-vinc.jpg);
	background-position: center top;
	background-size: cover;
	position: absolute;
	right: -142px;
	top: 0;
	opacity: 0.22;
	z-index: -1;
}

.ana_kurumsal_alan p{
	margin-bottom: 10px;
	color: #404040;
	font-size: 17px;
	font-weight: 300;
	line-height: 33px;
}

.ana_urun{
	padding: 80px 0;
	background-color: #11304b;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.ana_urun:before{
	content: '';
	width: 30%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-image: url(../images/urunler_arka.jpg);
	background-position: left center;
	background-size: cover;
	z-index: -1;
}
.ana_urun .baslik{
	color: #ffffff;
	margin-bottom: 50px;
}
.ana_urun .baslik span{
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 300;
	padding: 5px 0;
}
.ana_urun .baslik small{
	float: right;
	font-size: 17px;
	color: #fff;
	margin-top: 14px;
	cursor: pointer;
	background-color: #1b1b1b;
	padding: 5px 15px;
	border-radius: 5px;
	margin-left: 15px;
}
.ana_urun .owl-stage-outer{
	width: 500% !important;
}
.urun_kutu{
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	border-radius: 5px;
	border: solid 1px #e59b3e;
	position: relative;
	z-index: 1;
}
.urun_kutu i{
	position: absolute;
	color: #fff;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 25px;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 45px;
	border-radius: 50%;
	border: solid 2px #e59b3e;
	opacity: 0.3;
	z-index: 2;
}
.urun_kutu i:After{
	content: '';
	width: 330%;
	height: 2px;
	position: absolute;
	background: #e59b3e;
	top: 50%;
	transform: translateY(-50%);
	left: 48px;
}
.urun_kutu img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
}
.urun_kutu:hover i{
	opacity: 1;
}
.ana_urun .owl-nav{
	margin-top: 35px;
	text-align: center;
}
.ana_urun .owl-nav button{
	width: 35px;
	height: 35px;
	background-color: #f05e2e !important;
	border-radius: 10px;
	font-size: 23px !important;
	color: #fff !important;
	margin: 0 3px;
}

.ana_kategori{
	padding: 40px 0;
}
.ana_kategori .container{
	display: flex;
	align-items: center;
}
.ana_kategori .baslik{
	font-size: 40px;
	text-transform: uppercase;
	line-height: 48px;
	font-weight: 100;
	display: inline-block;
	position: relative;
	color: #11304b;
}
.ana_kategori .baslik strong{
	color: #f08e25;
}
.ana_kategori .baslik div{
	margin-top: 25px;
}
.ana_kategori .baslik div span{
	display: inline-block;
	width: 84%;
	height: 35px;
	background-color: #11304b;
	color: #fff;
	text-align: center;
	font-size: 22px;
	line-height: 37px;
	float: left;
	margin: 2px 0;
	border-radius: 10px;
	cursor: pointer;
}
.ana_kategori .owl-stage-outer{
	padding: 15px 0;
}
.ana_kategori .sag{
	overflow: hidden;
	margin-left: 25px;
	padding-left: 15px;
	border-left: solid 2px #d6d6d6;
	width: 90%;
	padding-top: 10px;
	padding-bottom: 10px;
}
.kategori_kutu{
	width: 100%;
	border: solid 2px #f08e25;
	border-radius: 13px;
	overflow: hidden;
	position: relative;
	transition: 500ms all;
	background-color: #fff;
}
.kategori_kutu:hover{
	filter: grayscale(0);
}
.kategori_kutu .resim_alan{
	height: 0;
	padding-bottom: 60%;
	overflow: hidden;
	position: relative;
}
.kategori_kutu .resim_alan img{
	position: absolute;
	object-fit: cover;
	object-position: center;
	height: 100%;
	width: 100%;
}
.kategori_kutu h2{
	font-size: 16px;
	text-align: center;
	padding: 8px;
	font-weight: 500;
	line-height: 20px;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ana_alt_yazi{
	padding: 190px 0 85px;
	background-image: url(../images/aksaray-sepetli-vinc.png);
	background-size: cover;
	background-position: center top;
	color: #fff;
}
.ana_alt_yazi h3.baslik{
	font-size: 34px;
	font-weight: 300;
	margin-bottom: 25px;
}
.ana_alt_yazi p{
	font-size: 16px;
	font-weight: 100;
	line-height: 29px;
	margin-bottom: 25px;
}

.kurumsal_sayfa{
	padding: 20px 0 70px;
}
.kurumsal_sayfa .resim{
	position: relative;
}
.kurumsal_sayfa .resim strong{
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.8);
	padding: 10px 25px;
	font-size: clamp(12px, 4vw, 21px);
	font-weight: 400;
	width: auto;
	margin: 0 10% 0 0;
	border-radius: 6px;
}
.kurumsal_sayfa img{
	margin-bottom: 10px;
	border-radius: 20px;
}
.kurumsal_sayfa p{
	font-size: 15px;
	line-height: 24px;
	color: #303030;
	margin: 10px 0;
	display: block;
}
.kurumsal_sayfa h2,
.kurumsal_sayfa h3,
.kurumsal_sayfa h4{
	padding: 5px 0;
	font-size: 22px;
}
.kurumsal_sayfa ul{
	padding: 5px 0 5px 30px;
}
.kurumsal_sayfa ul li{
	margin: 11px 0;
	font-size: 15px;
}
.kurumsal_sayfa strong{
	font-size: 15px;
}

.iletisim_sayfa{
	padding: 0 0 75px;
}
.iletisim_sayfa .ust_yazi{
	padding: 11px;
	border-bottom: solid 1px #b5b5b5;
	font-size: 23px;
	font-weight: 600;
	text-transform: uppercase;
}
.iletisim_sayfa .ust_yazi{
	padding: 11px;
	border-bottom: solid 1px #b5b5b5;
	font-size: 23px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.iletisim_sayfa .ust_yazi small{
	font-size: 16px;
	position: relative;
	top: -3px;
	font-weight: 400;
	display: inline-block;
}
.iletisim_sayfa .bilgi_alan{
	position: relative;
	padding: 10px 10px 10px 50px;
	margin-bottom: 10px;
}
.iletisim_sayfa .bilgi_alan i{
	position: absolute;
	left: 10px;
	background-color: #194993;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	color: #fff;
	top: 50%;
	transform: translateY(-50%);
}
.iletisim_sayfa .sosyal_alan li{
	list-style-type: none;
	float: left;
	margin-right: 25px;
}
.iletisim_sayfa .sosyal_alan li a{
	font-size: 25px;
	color: #ff7f00;
}
.iletisim_sayfa .harita_alan{
	margin-top: 50px;
}

.urun_sayfa{
	padding: 0 0 95px;
}
.urun_sayfa .col-8{
	padding-right: 40px;
}
.urun_resims{
	margin-bottom: 20px;
	background-color: #fff9e5;
	border-radius: 10px;
	overflow: hidden;
}
.urun_resims .owl-item{
	max-height: 500px;
	overflow: hidden;
}
.urun_resims .owl-item img{
	object-fit: contain;
	max-height: 500px;
	object-position: center;
}
.urun_resims .owl-dots{
	position: absolute;
	right: 10px;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 8px;
	background-color: rgba(28,64,94,0.69);
}
.urun_resims .owl-dots button{
	width: 17px;
	height: 17px;
	background-color: #ffffff;
	display: block;
	border-radius: 50%;
	margin: 10px 0;
	position: relative;
}
.urun_resims .owl-dots button.active:before{
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-51%, -49%);
	border: solid 2px #ffffff;
	border-radius: 50%;
	background-color: #5b5b5b;
}
.urun_sayfa p:not(.urun_kutu p){
	margin: 10px 0;
	font-size: 15px;
	line-height: 23px;
	color: #343434;
}
.urun_sayfa ul,.urun_sayfa ol{
	margin: 15px 0;
	padding: 0 35px;
}
.urun_sayfa ul li,.urun_sayfa ol li{
	line-height: 23px;
	margin: 10px 0;
	font-size: 15px;
}
.urun_sayfa .teknik_resim{
	width: 100%;
	border: solid 2px #e55f13;
	border-radius: 10px;
	overflow: hidden;
	height: 0;
	padding-bottom: 60%;
	position: relative;
}
.urun_sayfa .teknik_resim img{
	height: 100%;
	object-fit: contain;
	position: absolute;
	left: 0;
	top: 0;
	object-position: center;
}
.urun_sayfa h2,.urun_sayfa h3,.urun_sayfa h4{
	font-size: 25px;
	font-weight: 600;
	color: #35427d;
	margin: 15px 0;
	display: block;
	line-height: 30px;
}

.yan_menu{
	padding: 25px;
	background-color: #ffffff;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.08);
}
.yan_menu .ana{
	padding: 17px 17px 17px 60px;
	border: solid 1px #e4e4e4;
	cursor: pointer;
	margin: 5px 0;
	position: relative;
	font-weight: 400;
	font-size: 18px;
}
.yan_menu .ana:before{
	content: '\f061';
	font-family: 'FontAwesome';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 33px;
	height: 33px;
	background-color: #e55f13;
	color: #ffffff;
	text-align: center;
	line-height: 33px;
	border-radius: 5px;
}
.yan_menu .ana_aktif:before{
	transform: translateY(-50%) rotate(90deg);
}
.yan_menu .alt{
	padding: 0 8px;
	max-height: 0;
	overflow: hidden;
	transition: 500ms max-height;
}
.yan_menu .alt a{
	display: block;
	padding: 12px 15px;
	border: solid 1px #ddd;
	margin: 10px 0;
}
.yan_menu .alt_aktif{
	max-height: 800px;
}

.footer{
	width: 100%;
	background-color: #2B2D37;
	position: relative;
}
.footer .container{
	padding: 15px 0;
}
.footer img{
	position: absolute;
	width: 141px;
	top: -45px;
	background: #ff9f38;
	padding: 9px;
	border-radius: 10px 10px 0 0;
	border-bottom: unset;
}
.footer .col-9{
	text-align: right;
}
.footer a{
	display: inline-block;
	color: #cecece;
	text-transform: uppercase;
	padding: 2px 14px;
	font-weight: 600;
	line-height: 14px;
}

.footer a:not(:last-child) {
	border-right: solid 1px #cecece;
}

.footer_alt{
	padding: 8px 0 0;
	background-color: #ff9f38;
	color: #011429;
}
.footer_alt span{
	font-size: 13px;
	float: left;
	line-height: 25px;
}
.footer_alt a{
	float: right;
	color: #ffffff;
	font-size: 13px;
	position: relative;
	padding: 5px 0px;
}

.footer_alt a:before {
	content: 'BY KARA INTERAKTIF';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 11px;
	background-color: #ff9f38;
	line-height: 25px;
	color: #ffffff;
	font-weight: 800;
	letter-spacing: 0.5px;
}

.mas_yok{
	display: none;
}

.alt_buton{
	display: inline-block;
	width: 50px;
	position: fixed;
	right: 10px;
	bottom: 35px;
	z-index: 888
}
.alt_buton a{
	display: block;
	margin-bottom: 10px;
	width: 50px;
	height: 50px;
	background-color: #bb0000;
	line-height: 53px;
	text-align: center;
	font-size: 30px;
	color: #fff;
	border-radius: 7px;
}

@media only screen and (max-width: 852px){
	.mas_yok{
		display: block;
	}
	.header .ust .tel{
		padding: 20px 0;
	}
	.header .ust .tel a{
		width: 40px;
		height: 40px;
		display: inline-block;
		overflow: hidden;
		line-height: 35px;
		text-align: center;
		border-radius: 50%;
		border: solid 3px #ffffff;
		font-size: 17px;
		margin-right: 5px;
	}
}

@media only screen and (max-width: 768px){
	.urun_sayfa .col-8{
		padding-right: 10px;
	}
	.slide .menu .menu_ic{
		width: 95%;
		max-width: 450px;
	}
	.slide .menu ul{
		max-height: 0;
		overflow: hidden;
		display: block;
		position: absolute;
		width: 90%;
		background: #0e3252;
		top: 67px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10px;
		padding: 0;
		border: solid 1px #d7893e;
		transition: 500ms max-height;
	}
	.slide .menu ul li{
		float: unset;
		margin: 6px 0;
		padding: 6px 6px 6px 45px;
	}
	.slide .menu ul li:before{
		content: '';
		width: 6px;
		height: 6px;
		position: absolute;
		background: #dc782a !important;
		right: unset !important;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 3px;
		left: 21px;
	}
	.slide .menu ul li a{
		color: #ffffff;
		display: block;
	}
	.ana_kurumsal_alan{
		margin: 0;
	}
	.ana_kurumsal_alan .sag{
		position: relative;
	}
	.ana_kurumsal_alan img{
		border-radius: 80px 80px 0 0;
	}
	.ana_kategori .container{
		display: block;
	}
	.ana_kategori .baslik{
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 15px;
		word-wrap: break-word;
	}
	.ana_kategori .baslik br{
		display: none;
	}
	.ana_kategori .sag{
		width: 100%;
		margin: 0;
		padding: 0;
		border: unset;
	}
	.ana_kategori .baslik div{
		text-align: center;
	}
	.ana_kategori .baslik div span{
		max-width: 135px;
		width: 100%;
		margin: 3px;
		display: inline-block;
		float: unset;
	}
	.mob_menu_ac{
		display: block;
	}
	.mob_ilet_ust{
		display: block;
	}
}

@media only screen and (max-width: 552px){
	._552_yok{
		display: none;
	}
	.header .ust .tel{
		width: 50%;
	}
	.header .ust .sosyal{
		width: 50%;
	}
	.header .logo{
		width: 40%;
	}
	.slide:after{
		background-size: 230% !important;
	}
}
@media only screen and (max-width: 502px){
	._502_yok{
		display: none;
	}
	.header .ust{
		display: block;
	}
	.header .ust .tel{
		width: 100%;
		text-align: center;
	}
	.header .ust .sosyal{
		display: none;
	}
	.header .ust:before{
		background-image: linear-gradient(90deg, #f3871c 50%, rgba(0, 0, 0, 0));
	}
	.header .ust:after{
		background-image: linear-gradient(270deg, #df7132 50%, rgba(0, 0, 0, 0))
	}
	.header .logo{
		margin: 0 auto !important;
	}
	.header .ust .tel a{
		color: #000d1e;
	}
}
@media only screen and (max-width: 475px){
	.footer img{
		top: -89px;
		left: 50%;
		transform: translateX(-50%);
		width: 125px;
	}
	.footer .col-9{
		text-align: center;
	}
}
@media only screen and (max-width: 390px){
	.header .logo{
		width: 54%;
	}
}