@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body{
width: 100%;
height: 100vh;
overflow: hidden;
background: linear-gradient(to right bottom, #883742, #3a1416);
font-family: "Poppins", sans-serif;
}

.container{
width: 98%;
margin: auto;
top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
}

.sol{
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
background-color: #351417;
height: calc(100vh - 20px);
width: 80px;
border-radius: 10px;
}

.logodiv{
flex: 1;

}

.logo{
width: 50px;
margin-top: 20px;
}

ul{
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
flex: 8;
list-style: none;
}

.fa-solid, .fa-brands, .fa-regular{
color: #FFF;
font-size: 20px;
}

.fa-solid.aktif{
color: #BF3F3E;
}

.eklediv{
display: flex;
align-items: center;
justify-content: flex-end;
flex: 2;
}

.ekle{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border: 1px dashed #FFF;
border-radius: 10px;
}

.orta{
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 100%;
height: calc(100vh - 20px);
overflow-y: scroll;
}

.orta::-webkit-scrollbar {
display: none;
}

.orta {
-ms-overflow-style: none;
scrollbar-width: none;
}

.ortaust{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
width: 100%;
padding: 20px;
}

.ortaust label{
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
color: #afadad;
font-weight: 200;
}

.ortaust label p {
font-weight: 500;
margin-left: 10px;
color: #FFF;
}

.arama{
background-color: #4F2126;
border: none;
border-radius: 20px;
padding: 10px 10px 10px 50px;
width: 420px;
color: #FFF;
font-size: 20px;
}

.arama:focus{
outline: none;
}

.arama::placeholder{
color: #ddd9d9;
font-size: 20px;
}

.aramadiv{
position: relative;
}

.fa-magnifying-glass{
position: absolute;
left: 20px;
top: calc(50% - 0.5em);
}

.profil{
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 15px;
}

.cart, .bell, .menu{
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #381917;
border-radius: 50%;
position: relative;
}

.ortaorta{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px;
gap: 20px;
}

.popularoyun{
flex: 3;
width: 100%;
background: linear-gradient(to right bottom, #C54542, #CF6B5B);
height: 315px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: space-between;

}

.popular-kategori{
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
margin: 20px;
flex: 3;
}

.popus{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.popus i{
color: #000;
margin-right: 10px;
}

.popus-ic{
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
background-color: #FFFACA;
color: #000;
background-color: #FFFACA;
border-radius: 10px;
padding: 8px;
}

.oyun-pazari{
width: 40px;
height: 40px;
border-radius: 50%;
padding: 10px;
background-color: #FFF;
position: relative;
}

.oyun-pazari img{
width: 100%;
position: relative;
margin: auto;
}

.gta-h2{
color: #FFF;
font-size: 30px;
font-weight: 700;
margin-top: 10px;
}

.gta-icerik{
font-size: 12px;
color: #FFF;
margin-top: 10px;
}

.gta-goruntuleme{
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 10px;
background-color: #FFF;
color: #000;
border-radius: 10px;
margin-top: 10px;
font-size: 12px;
}

.gta-goruntuleme .fa-solid{
color: #000;
margin-right: 10px;
}

.gta6-image{
width: 100%;
height: 315px;
flex: 4;
}

.digeroyun{
flex: 2;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 10px;
}

.digeroyun-alan{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
width: 100%;
border-radius: 20px;
background-color: #351518;
padding: 10px;
}

.digeroyun-alan img{
width: 80px;
height: 80px;
border-radius: 15px;
}

.digeroyun-adi{
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}

.oyun-adi{
font-size: 15px;
color: #FFF;
font-weight: 500;
}

.paket-adi{
font-size: 13px;
color: #cccaca;
font-weight: 400;
}

.digeroyun-alan .fa-chevron-right{
margin-right: 20px;
}

.ortaalt{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
width: 100%;
}

.ortaalt-sol{
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
width: 100%;
flex: 4;
margin: 10px 0px 10px 30px;
}

.ortaalt-baslik h2{
font-size: 20px;
color: #FFF;
font-weight: 600;
}

.ortaalt-baslik a{
font-size: 16px;
color: #afadad;
text-decoration: none;
font-weight: 400;
}

.ortaalt-baslik{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
width: 100%;
}

.yeni-oyunlar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
width: 100%;
}

.yeni-oyun-1{
width: 33.333%;
height: 200px;
border-radius: 20px;
background-image: url('../images/uncharted.jpg');
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 20px;
}

.yeni-oyun-2{
width: 33.333%;
height: 200px;
border-radius: 20px;
background-image: url('../images/Ghost_of_Tsushima.jpg');
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 20px;
}

.yeni-oyun-3{
width: 33.333%;
height: 200px;
border-radius: 20px;
background-image: url('../images/horizon.jpg');
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 20px;
}

.yeni-oyun-header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
width: 100%;
}

.yeni-oyun-header .ikon{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #FFF;
padding: 10px;
text-decoration: none;
position: relative;
}

.yeni-oyun-header .ikon .fa-circle-play, .yeni-oyun-header .ikon .fa-heart{
color: #000;
position: relative;
margin: auto;
font-size: 20px;
}

.yeni-oyun-footer{
background-color: #FFF;
padding: 10px;
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
width: 100%;
font-size: 12px;
font-weight: 600;
}

.son-indirilen-div{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex-direction: column;
}

.son-indirilen{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: linear-gradient(to right bottom, #AD3A37, #351518);
height: 130px;
margin-top: 20px;
border-radius: 20px;
gap: 20px;
padding: 20px;
}

.son-indirilen-baslik{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
width: 100%;
margin-top: 20px;
}

.son-indirilen-baslik h2{
font-size: 20px;
color: #FFF;
font-weight: 600;
}

.son-indirilen-baslik a{
font-size: 16px;
color: #afadad;
text-decoration: none;
font-weight: 400;
}

.son-indirilen img{
width: 110px;
height: 110px;
border-radius: 15px;
}

.indirme-suresi{
color: #FFF;
font-size: 15px;
font-weight: 600;
}

.play-stop{
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 20px;
}

.ortaalt-sag{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
width: 100%;
flex: 3;
margin: 10px 20px 20px 20px;

}

.istatistik-yuvarlak{
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right bottom, #412035, #432326);
width: 100%;
height: 400px;
margin-top: 20px;
border-radius: 20px;
}

.istatistik-image{
background-image: url('../images/back-pack.png');
background-size: cover;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}

.istatistik-image p{
color: #FFF;
font-size: 20px;
font-weight: 500;
line-height: 35px;
text-align: center;
}

.sag{
display: flex;
flex-direction: column;
height: calc(100vh - 20px);
}

.sagust{
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
background-color: #351417;
width: 80px;
border-radius: 10px;
margin-bottom: 10px;
flex: 4;
height: 100%;
}

.anaavatar{
width: 50px;
margin-top: 20px;
}

.avatarim{
width: 100%;
border-radius: 50%;
margin-bottom: 10px;
}

.cizgi{
width: 95%;
margin: auto;
height: 0.3px;
color: #afadad;

}

.arkadaslar{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
margin-top: 20px;
height: 100%;
}

.arkadasavatar{
width: 50px;
position: relative;
}

.arkadasimg{
width: 100%;
border-radius: 50%;
margin-bottom: 10px;
z-index: 1;
}

.status{
width: 15px;
height: 15px;
position: absolute;
border-radius: 50%;
z-index: 2;
top: 2px;
right: 2px;
border: 2px solid #351417;
}

.kirmizi{
background-color: #da1222;
}

.yesil{
background-color: #29da12;
}

.oyunda{
width: 100%;
height: 15px;
position: absolute;
border-radius: 5px;
background-color: #883742;
color: #FFF;
font-size: 10px;
bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.sagalt{
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
background-color: #351417;
height: 100%;
width: 80px;
border-radius: 10px;
flex: 2;
margin-bottom: 10px;
}

.chat{
margin: 20px 0px 20px 0px;
}

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

.sol {
display: none;
}
.sag {
display: none;
}
.aramadiv {
display: none;
}
.ortaust label {
font-size: 15px;
}
.ortaorta, .yeni-oyunlar {
flex-wrap: wrap;
}
.yeni-oyun-1, .yeni-oyun-2, .yeni-oyun-3 {
width: 100%;
height: 380px;
}
.yeni-oyun-footer {
font-size: 15px;
}
.popularoyun, .digeroyun {
height: 280px;
width: 100%;
flex: auto;
}
.gta6-image{
display: none;
}
.ortaalt-sag {
display: none;
}
.ortaalt-baslik {
margin-top: 35px;
}
.ortaalt {
width: auto;
width: auto;
padding-right: 20px;
}
}

@media only screen and (min-width: 768px) and (max-width: 960px) {
.ortaust label {
font-size: 12px;
}
.arama {
font-size: 15px;
border-radius: 15px;
width: 280px;
}
.arama::placeholder {
font-size: 15px;
}
.sag {
display: none;
}
.gta6-image {
display: none;
}
.ortaalt-sag {
display: none;
}
.digeroyun-alan img {
width: 60px;
height: 60px;
}
.oyun-adi {
font-size: 12px;
margin-left: 5px;
}
.paket-adi {
font-size: 11px;
margin-left: 5px;
}
.popularoyun {
height: 260px;
}
}

@media only screen and (min-width: 960px) and (max-width: 1280px){
.ortaust label {
font-size: 15px;
}
.arama {
font-size: 15px;
border-radius: 15px;
width: 320px;
}
.arama::placeholder {
font-size: 15px;
}
.fa-solid{
font-size: 15px;
}
.popularoyun {
height: 240px;
}
.gta6-image {
height: 220px;
}
.gta-h2 {
font-size: 18px;
}
.gta-icerik {
font-size: 10px;
}
.digeroyun-alan img {
width: 55px;
height: 55px;
}
.oyun-adi {
font-size: 12px;
}
.ortaalt-baslik h2 {
font-size: 14px;
}
.ortaalt-baslik a {
font-size: 14px;
}
.yeni-oyun-1, .yeni-oyun-2, .yeni-oyun-3{
height: 140px;
}
.yeni-oyun-header .ikon {
width: 25px;
height: 25px;
position: relative;
padding: 5px;

}
.yeni-oyun-header .ikon .fa-circle-play, .yeni-oyun-header .ikon .fa-heart {
font-size: 14px;
position: absolute;
}
.yeni-oyun-footer {
font-size: 10px;
font-weight: 400;
}
.son-indirilen {
height: 85px;
}
.son-indirilen img {
width: 70px;
height: 70px;
}
.indirme-suresi {
font-size: 11px;
}
.play-stop {
font-size: 12px;
}
.istatistik-yuvarlak {
height: 300px;
}

}