@charset "UTF-8";
@import url('style0.css');
@font-face {
	font-family:'a Astro Space';
	font-style:normal;
	font-weight:400;
	font-display:auto;
	src:url('AnyConv.com__AstroSpace.woff2') format('woff2'),
		url('AstroSpace.woff') format('woff');
}
@font-face {
	font-family:'helveticaneuecyr';
	font-style:normal;
	font-weight:300;
	font-display:auto;
	src:url('helveticaneuecyr-light-webfont.woff2') format('woff2'),
		url('helveticaneuecyr-light-webfont.woff') format('woff');
}
@font-face {
	font-family:'helveticaneuecyr';
	font-style:normal;
	font-weight:700;
	font-display:auto;
	src:url('helveticaneuecyr-bold-webfont.woff2') format('woff2'),
		url('helveticaneuecyr-bold-webfont.woff') format('woff');
}
@font-face {
	font-family:'helveticaneuecyr';
	font-style:normal;
	font-weight:500;
	font-display:auto;
	src:url('helveticaneuecyr-medium-webfont.woff2') format('woff2'),
		url('helveticaneuecyr-medium-webfont.woff') format('woff');
}
@font-face {
	font-family:'helveticaneuecyr';
	font-style:normal;
	font-weight:400;
	font-display:auto;
	src:url('AnyConv.com__4221-font.woff2') format('woff2'),
		url('4221-font.woff') format('woff');
}

:root {
  --rf:#fff;--r0:#1A1A1A;--r01:#222;--r02:#555;--r03:#aaa;--r04:#eee;--r1:#027;--r2:#07d;--r3:#0be;--r4:#0dc;--r5:#FF8515;--r6:#fc0;--r7:#d33;
  --rafc:#ffffffcc;--raf9:#ffffff99;--raf6:#ffffff66;--raf3:#ffffff33;--ra0c:#000000cc;--ra09:#00000099;--ra06:#00000066;--ra03:#00000033;--ra:#00000000;
  --rg1:linear-gradient(135deg,var(--r1),var(--r3));--rg2:linear-gradient(135deg,var(--r2),var(--r4));
  --rg3:linear-gradient(var(--r6) 25%,var(--r5));--rg4:linear-gradient(var(--r02),var(--r0));
  --rg5:linear-gradient(var(--r5) 25%,var(--r6));--rg6:linear-gradient(var(--r04),var(--r03));
  --font2:'a Astro Space', sans-serif;
  --font1:'helveticaneuecyr', sans-serif;
  }

/******* all *******/

body{font-style:var(--font1); background:var(--rf);color:var(--r0);font-size:16px}
.en{max-width:1280px;margin:0 auto}
.en2{max-width:1024px;margin:0 auto}

#tepe{background:var(--r0);color:var(--rf);width:100%;height:80px;padding:20px}
#tepe .en{display:flex}
#tepe .logo{width:25%}#tepe .logo img{height:40px;}
#tepe .ustmenu{width:75%;text-align:right;display:flex;justify-content:right}
#tepe .ustmenu a{color:var(--rf);padding:0 30px;line-height:40px}
#tepe .ustmenu a:hover{color:var(--r5)}
.giris a:last-child{background:var(--r5);display:inline-block;border-radius:20px;}
.giris a:last-child:hover{background:var(--rf)}

.tanitim{background:var(--r0);color:var(--r5);width:100%;height:calc(100vh - 100px);min-height:550px;position:relative;overflow:hidden;}
.tanitim::before{content:"";position:absolute;z-index:1;inset:0;background:url(../images/fox.png) center center no-repeat;background-size:contain;margin-left:25vw;}
.tanitim .metin{position:absolute;left:15%;width:40%;top:0;bottom:0;font-size:4em;font-family:var(--font2);display:flex;flex-direction:column;justify-content:center}
.tanitim h1{margin:0;color:var(--rf);font-size:1em}
.kaydir{min-height:2em;line-height:2em;color:var(--rf)}

#welcome{display:flex;align-items:stretch}
#welcome .resim{width:50%;background:url(../images/balance.png) -4vw center no-repeat;background-size:contain}
#welcome .metin{width:50%;padding:100px 25px 100px 0;}
#welcome .baslik{font-size:3em;font-family:var(--font2)}
#welcome .altbaslik{font-size:2em;padding:10px 0 20px}
#welcome .yazi{font-size:1.2em;line-height:1.5em}

#trade{background:var(--r0);color:var(--rf);padding:50px;border-radius:20px;position:relative;margin-top:100px;}
#trade .metin{width:50%}#trade .baslik{font-family:var(--font2);font-size:3.5em}#trade .yazi{font-size:1.2em;padding-top:25px}#trade span{color:var(--r5)}
#trade::after{content:"";position:absolute;inset:50px 50px 50px 53%;background:url(../images/fiyatlar.png) no-repeat center center;background-size:contain}
#trade::before{content:"";position:absolute;width:20vw;height:20vw;top:-10vw;right:45%;background:url(../images/coin.png) no-repeat center center;background-size:contain}

.baslik2{font-family:var(--font2);font-size:3em;text-align:center;padding-top:100px;}

#kartlar{display:flex;gap:15px 15px;align-self:stretch;justify-content:center;padding:50px 0 100px;text-align:center}
.kart{background:var(--rf);box-shadow:-60px 60px 100px 0px #EEE2D8;border-radius:10px;border:1px solid #EEE2D8;width:70%;padding:50px 30px;}
.kart .resim{width:80%;padding-top:80%;margin:0 auto 50px auto}
#kartlar div:nth-child(1){z-index:4}#kartlar div:nth-child(1) .resim{background:url(../images/kart1.png) center center;background-size:contain}
#kartlar div:nth-child(2){z-index:3}#kartlar div:nth-child(2) .resim{background:url(../images/kart2.png) center center;background-size:contain}
#kartlar div:nth-child(3){z-index:2}#kartlar div:nth-child(3) .resim{background:url(../images/kart3.png) center center;background-size:contain}
#kartlar div:nth-child(4){z-index:1}#kartlar div:nth-child(4) .resim{background:url(../images/kart4.png) center center;background-size:contain}
#kartlar .baslik{font-family:var(--font2);font-size:1.5em}
#kartlar .yazi{font-size:1.1em}

#questitions{position:relative;background: var(--r0);border-radius:20px;color:var(--rf);padding:50px;font-family:var(--font2);font-size:3.5em;margin:100px auto 50px}
#questitions .metin{position:relative;z-index:3;}#questitions span{color:var(--r5)}
#questitions a{display:inline-block;font-family:var(--font1);background:var(--r5);color:var(--rf);font-size:.5em;line-height:2em;padding:0 25px;border-radius:2em;margin-top:1em}
#questitions a:hover{background:var(--rf);color:var(--r5)}
#questitions .resim{position:absolute;z-index:2;inset:-100px -50px 0 50%;background:url(../images/kulaklik.png) no-repeat center center;background-size:contain;}
#questitions::before{content:"";position:absolute;z-index:2;width:24%;padding-top:24%;top:0;margin-top:-12%;right:35%;background:url(../images/coins.png) no-repeat center center;background-size:contain;}
#questitions::after{content:"";position:absolute;z-index:2;width:24%;padding-top:24%;bottom:0;margin-bottom:-10%;right:15%;background:url(../images/coin2.png) no-repeat center center;background-size:contain;}

#why{display:flex;flex-wrap:wrap;gap:20px;margin:50px auto}
#why .sebep{width:calc(50% - 20px);padding:20px}
#why .sebep::before{content:"";float:left;width:70px;height:100px;background:url(../images/ok.png) top left no-repeat;background-size:contain}
#why .baslik{font-family:var(--font2);font-size:1.5em;padding:15px 0}

#start{position:relative;background:var(--r0);color:var(--rf);padding:50px;border-radius:20px;margin:100px auto;font-family:var(--font2);font-size:3.5em}#start .metin{position:relative;z-index:3}
#start a{display:inline-block;font-family:var(--font1);background:var(--r5);color:var(--rf);font-size:.5em;line-height:2em;padding:0 25px;border-radius:2em;margin-top:1em}
#start a:hover{background:var(--rf);color:var(--r5)}
#start::before{content:"";position:absolute;left:50%;top:-5vw;bottom:2vw;right:0;background:url(../images/foxcoin.png) center center no-repeat;background-size:contain}

#dip{background:var(--r0);padding:50px}#dip .en{display:flex;flex-wrap:wrap;color:var(--rf)}
#dip .logo{width:25%}#dip .logo img{height:40px}
#dip .altlinkler{width:75%;text-align:right;display:flex;justify-content:right}
#dip .altlinkler a{color:var(--rf);padding:0 20px;line-height:40px}
#dip .altlinkler a:hover{color:var(--r5)}
#dip .adres{padding:25px 0;width:25%}#dip strong{display:block;padding-bottom:25px}
#dip .telif{width:75%;display:flex;align-items:center;justify-content:end;color:var(--r5)}

/******* animasyon *******/	
.anim02{transition:.2s all;-webkit-transition:.2s all;-o-transition:.2s all;-moz-transition:.2s all;-ms-transition:.2s all}
.anim02,.ustmenu::before,.ustmenu::after{transition:.5s all;-webkit-transition:.5s all;-o-transition:.5s all;-moz-transition:.5s all;-ms-transition:.5s all}
.anim1{transition:1s all;-webkit-transition:1s all;-o-transition:1s all;-moz-transition:1s all;-ms-transition:1s all}
.anim2{transition:2s all;-webkit-transition:2s all;-o-transition:2s all;-moz-transition:2s all;-ms-transition:2s all}

@keyframes blink{0%{filter:blur(3px)}100%{filter:blur(0px)}}

/******* uyum *******/

@media only screen and (max-width:800px){
  .cosmos{position:relative}
  .logo img{max-width:none;position:relative;z-index:999;}#tepe .ustmenu{display:block}
  #tepe .ustmenu{position:absolute;width:100%;top:0;right:0;height:0;padding-top:80px;line-height:80px;overflow:hidden;z-index:998;background:var(--r0);color:var(--rf);font-size:2em}
#tepe .ustmenu.ac{height:100vh;position:fixed}
#tepe .ustmenu a{display:block;line-height:50px;margin:0 10px}
#tepe #ac{position:absolute;right:0;top:0;width:80px;height:80px}
#tepe .ustmenu::before{content:"";position:absolute;right:30px;top:30px;width:20px;height:20px;border-top:2px solid var(--rf);border-bottom:2px solid var(--rf)}
#tepe .ustmenu::after{content:"";position:absolute;right:29px;top:41px;width:20px;border:1px solid var(--rf)}
#tepe .ustmenu.ac::before{right:29px;top:41px;width:20px;height:0;border:1px solid var(--rf);transform:rotate(45deg)}
#tepe .ustmenu.ac::after{border:1px solid var(--rf);transform:rotate(-45deg)}
.tanitim .metin{font-size:2em;left:10%}.tanitim{height:fit-content;min-height:25em}
.tanitim::before {inset: 0 -100vw;margin-left:85vw}
#welcome{display:block;text-align:center}
#welcome .resim{display:none}#welcome .metin{width:80%;margin:auto;padding:50px 0}
#trade{margin:20px;padding:20px 20px 50%;text-align:center}
#trade .metin{width:100%}#trade .baslik{font-size:2em}
#trade::before{width:30vw;height:30vw;top:-15vw;right:0%}#trade::after{inset:55% 25px 0px 25px}
.baslik2{font-size:2em;padding-top:50px}
#kartlar{flex-wrap:wrap}#kartlar .kart{z-index:1 !important}
#questitions{font-size:2em;margin-top:0px}#questitions .resim{inset:47px -50px -40px 46%}
#questitions::before{right:25%}
#start::before{left:70%;top:-5vw;bottom:62vw}
#dip .en{display:block;text-align:center}#dip .altlinkler{text-align:center}
#dip .altlinkler{text-align:center;width:100%;padding:20px 0;display:block}
#dip .altlinkler a{padding:0 10px;line-height:1em}
#dip .adres{width:100%}
#dip .telif {width:100%}

}