body{
    background-color: rgb(36, 36, 36);
    font-family: Arial, Helvetica, sans-serif;
    color:white;
}
*{
box-sizing:border-box;
}

.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}

[class*="col-"]{
float: left;
padding: 15px;
}

.row::after{
content: "";
display: table;
clear:both;
}

@media only screen and (max-width: 768px){ /*telefonlar için*/
[class*="col-"]{
width: 100%;

}
img{
height: 600px;
}
h1.adsoyad{
font-size: 40px;
}
a{
font-size: 16px;
margin: 0px 12px 0px 0px;
padding: 0px;
}

#profilfotograf{
margin: 0px 0px 0px 10px;
}
.haklar{
font-size: 10px;
}
.yazi{
font-size: 10px;
}
.sosyalayar{
width: 32px;
height: 32px;
}
.test {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
}

@media only screen and (min-width: 769px){/*bilgisayariçin*/
h1.adsoyad{
font-size: 70px;
}
a{
font-size: 24px;
margin: 0px 10px 0px 0px;
padding: 5px;
}

.test {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

#profilfotograf{
margin: 0px 0px 0px 180px;
}
.haklar{
font-size: 13px;
}
.yazi{
font-size: 13px;
}
.sosyalayar{
width: 48px;
height: 48px;
}
}


img{
width: 100%;
margin: auto;
}

a{
text-decoration:dashed;
color: white;
font-family: Arial, Helvetica, sans-serif;

}


.sagYasla{
float:right;
}
.solYasla{
float:left;
}
.emirhan{
float:left;
}


h1.adsoyad{
text-align: center;
position: relative;
top:140px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
}

p.altbilgi{
text-align: center;
position: relative;
font-size: 30px;
top:120px;
font-family: Arial,'Franklin Gothic Medium', 'Arial Narrow', sans-serif;
color: white;
}

#bilgilerim{
position: relative;
background-image: url(images/arkaplan.png);
height: 650px;
}

h1.hakkimdabaslik{
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
}
.cizgi{
background-color: white;
height: 1px;
width: 50px;
margin: auto;
position: relative;
bottom:-10px;
margin-bottom: -10px;
margin-top: -50px;
}

.resim{
position: relative;
width: 100%;
height: 300px; /* ihtiyacına göre */
display: flex;
justify-content: center;
align-items: center;
}
#okresmi{
width: 50px;
height: 50px;
margin-top:210px;
}

#profilfotograf{
border: solid rgb(97, 97, 97) 1px;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
border-radius: 10px;
}

.profil_foto{
width: 300px;
height: 400px;
float: left;
position: relative;
right: 15px;
bottom:65px
}

.hakkimdayazi{
font-size: 17px;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
color:white;

}

.bildik_baslik{
font-size: 16px;
position: relative;
bottom:18px;
font-family: Arial, Helvetica, sans-serif;
color:white;
text-align: center;
}

.cizgi1{
background-color: white;
height: 1px;
width: 50px;
margin: auto;
position: relative;
top: -35px;
}

#yazilimkutu{
height: 90%;
width: 49%;
float: left;
position: relative;
top: -35px;
}

#grafikkutu{
height: 90%;
width: 50%;
float: right;
position: relative;
top: -35px;
}

p.baslik3{
font-size: 18px;
width: 100%;
text-align: left;
margin: 10px 0px 0px 5px;
font-family: Arial, Helvetica, sans-serif;
color:white;
}

#bar_arkaplan{
background-color: rgb(168, 168, 168);
width: 100%;
height: 10px;
border-radius: 50px;
margin: -8px 0px 0px 0px;
}

#bar_onplan1{
background-color: rgb(0, 233, 136);
width: 100%;
height: 10px;
border-radius: 50px;
}

.altbaslik{
font-size:14px;
text-align: left;
width: 50%;
}

.yuzdelik_yazi{
text-align: right;
font-size: 12px;
position: relative;
bottom: 35px;
color: rgb(255, 255, 255);
width: 49%;
float: right;
}

#bar_onplan2{
background-color: rgb(0, 233, 136);
width: 75%;
height: 10px;
border-radius: 50px;
}

#bar_onplan3{
background-color: rgb(0, 233, 136);
width: 50%;
height: 10px;
border-radius: 50px;
}

#bar_onplan4{
background-color: rgb(0, 233, 136);
width: 30%;
height: 10px;
border-radius: 50px;
}

#bar_onplan5{
background-color: rgb(0, 233, 136);
width: 72%;
height: 10px;
border-radius: 50px;
}

#diller{
height: 40px;
width: 100%;
}

.iletisime_gec{
color: white;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
text-align: center;
}

.email{
text-align: center;
font-size:16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
text-align: center;
}

#iletisimkutu2{
height: 250px;
background-color: rgb(15, 15, 15);
}

.haklar{
color: rgb(85, 85, 85);
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0px 0px 0px;
}

.yazi{
color: rgb(85, 85, 85);
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0px 0px 0px 0px;
}

#sosyalmedya{
margin:auto;
width: 700px;
height: 50px;
position: relative;
top: 50px;
}

.sosyalayar{
margin: 0px 0px 0px 0px;
position: relative;
left: 0px;
}

.sosyalayar:hover{
opacity: 30%;
}