html, body, div, span, applet, object, iframe, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { resize: none; }


.yukle {width: 100%;height: 100vh;position: fixed;left: 0px;top: 0px;overflow: hidden;background: transparent;transition: all .3s cubic-bezier(.645,.045,.355,1);z-index: 9999999;pointer-events: none;display: flex;flex-wrap: wrap;flex-direction: row;align-items: center;justify-content: center;}
.yukle.active { opacity: 1; pointer-events: auto; visibility: visible; }
.yukle .logo {width: 500px;position: absolute;/* top: 0; */z-index: 95;-webkit-animation: sdb10 2s infinite;animation: sdb10 2s infinite;/* overflow: hidden; */z-index: 99999999;opacity: 0;transition: all .6s cubic-bezier(.645,.045,.355,1) 0s;visibility: hidden;}
/*.yukle .logo:after {content:""; width:200px; height:200px; position:absolute; right:0px; top:0px; background:url(../images/kare.svg)}*/
.yukle .logo .log1 { width: 155px; float: left; position: relative; }
.yukle .logo .log2 { width: 265px; height: 76px; float: left; position: relative; /* left: 173px; */ top: 0; margin: 0 0 0 25px; }
.yukle .logo .log2 .line { width: 2px; height: 160px; position: absolute; left: 0px; top: calc(50% - 80px); background: #ed1c24; animation: line 2s infinite; }
.yukle .logo .log2 .line.active { animation: initial; }
.yukle .logo .log2 .log { width: 0%; height: 76px; position: absolute; left: 0; top: 0; overflow: hidden; /* transition: all .4s cubic-bezier(.645,.045,.355,1) 0s; */ }
.yukle .logo .log2 .log.active img { left: 34px; }
.yukle .logo .log2 .log img { width: 231px; height: 76px; position: absolute; left: 0; top: 0; transition: all .4s cubic-bezier(.645,.045,.355,1) 0s; }
.yukle.active .logo {width: 248px;/* top: calc(50% - 32px); */opacity: 1;transition-delay: .55s;visibility: visible;}

.yukle .bg {width: 100%;height: 0%;height: 100%;position: absolute;left: 0px;top: -100%;top: 0;background: rgb(255 255 255 / 74%);transition: all .7s cubic-bezier(.645,.045,.355,1) 0.4s;visibility: hidden;opacity: 0;backdrop-filter: blur(3px);}
.yukle .bg.active { visibility: visible; }
.yukle.active .bg {height: 100%;top: 0;visibility: visible;opacity: 1;background: rgb(255 255 255 / 100%);}


.yukle .klavuz { opacity: 0; transition: all .8s cubic-bezier(.645,.045,.355,1) 0s; }
.yukle.active .klavuz { visibility: hidden; transform: translateY(-40px); opacity: 1; transform: translateY(0) !important; transition-delay: .45s; visibility: visible; }


.yukle .cizgiler { width: calc(100% - 200px); height: 100%; left: 100px; top: -200%; float: left; position: absolute; transition: all .6s cubic-bezier(.645,.045,.355,1) 0s; visibility: hidden; }
.yukle.active .cizgiler { top: 0; visibility: visible; }
.yukle .cizgiler .solK { width: 500px; height: 100%; float: left; position: relative; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; }
.yukle .cizgiler .sagK { width: 500px; height: 100%; float: right; position: relative; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-end; }
.yukle .cizgiler * > div { width: 1px; height: 70%; margin-right: 25%; float: left; position: relative; background: rgb(255 255 255); animation: cizgim 6s cubic-bezier(0.31, 0, 1, 1.07) infinite alternate; top: 0; opacity: 1; }
.yukle.active .cizgiler * > div { background: rgb(255 255 255 / 44%); }
.yukle .cizgiler * > div:last-child { margin-right: 0; }
.yukle .cizgiler * > div:nth-child(1) { animation-duration: 0.6s; }
.yukle .cizgiler * > div:nth-child(2) { animation-duration: 0.7s; }
.yukle .cizgiler * > div:nth-child(3) { animation-duration: 0.9s; }
.yukle .cizgiler * > div:nth-child(4) { animation-duration: 1.2s; }
.yukle .cizgiler.active { height: 100%; }
.yukle .cizgiler.active * > div { background: #ffffff63; height: 80%; }


@keyframes cizgim {
	0% { top: 0; opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

@-webkit-keyframes sdb10 {
	0% { -webkit-transform: translate(0, 0); }
	20% { -webkit-transform: translate(-0px, 10px); }
	40% { -webkit-transform: translate(0, 0); }
}

@keyframes sdb10 {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-0px, 10px); }
	40% { transform: translate(0, 0); }
}


@keyframes line {
	0% { opacity: 1; }
	20% { opacity: 0; }
	60% { opacity: 1; }
	70% { opacity: 0; }
	80% { opacity: 1; }
}


@keyframes fadeIn {
	99% { visibility: hidden; }
	100% { visibility: visible; opacity: 1; }
}

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

	.yukle.active .logo { width: 190px; }
	.yukle .logo {width: 290px;}
}