body{background-color:black; background-image:url("image/background.jpg");background-size:cover;overflow:hidden;background-repeat:no-repeat;}
*{margin:0;padding:0;border:0}
.wrapper{width:100%;height:100vh;margin:auto;position: fixed;}
.bs1{width:300px;position:absolute;height:60px;left:50%;margin-left:-150px;top:0%;margin-top:-30px;opacity:0;} 
.hs1{opacity:1; color:gray;font-size:40px;margin-left:15px;text-align:center;font-family: 'Kaushan Script', cursive;}
#hs2{opacity:0;display:block;}



.open_menu{position:fixed;width:40px;height:30px;bottom:10px;left:50%;margin-left:-20px;z-index:25;}
.line{position:absolute;width:100%;height:5px;background-color:gray;}
#line1{top:0;}
#line2{top:50%;margin-top:-2.5px;}
#line3{bottom:0;}

.menu{width:500px;height:50px; border-top-left-radius:25px;border-top-right-radius:25px;border-left:1px solid gray;border-right:1px solid gray;position:fixed;bottom:0;left:50%;margin-left:-250px;transform:translateY(500px);z-index:25;display:hidden;}



.menu_btn_alan{position:absolute;width:400px;height:80px;bottom:0;left:50%;margin-left:-200px;align-items: center;justify-content:center;}

ul{list-style:none;float:left;}
li{list-style:none;float:left;margin:9px;}
a{text-decoration:none;}
.menu_btn{width:35px;height:35px;}
.menu_btn:hover{
    transition:0.2s linear;
    -webkit-transform : scale(1.4);
    -moz-transform : scale(1.4);
    -ms-transform : scale(1.4);
    -o-transform :scale(1.4);
    transform :scale(1.4);
}
.menu_btn:not(:hover){transition:0.2s linear; }
#main_page_btn{width:60px;height:60px;background-image: url(image/ll.png);background-size: cover;background-position:center;bottom:10px;position:relative;}
.img_btn{width:100%;height:100%;background-size:cover;}
.termpanel{width:100%;height:100vh;background-color:black;opacity:0;float:left;}
.termalan{width:100%;height:100vh;z-index:15;position:absolute;top:0;left:0;opacity:0;}
.ikon{width:40px;height:40px;float:left;}  
.ikon_img{width:20px;height:20px;margin:15px;}
.sekme{width:180px;height:40px;border-left:1px solid #111;border-right:1px solid #111;float:left;color:#49acea;text-align:center;line-height:40px;font-size:15px;cursor:pointer;opacity:0.5;}
.sekmeler{width:100%;height:60px;list-style:none;float:left;display: flex;flex-wrap: nowrap;overflow-x:scroll;overflow-y:hidden;}
.sekme_li{list-style:none;float:left;margin-left:5px;flex: 0 0 auto;}


.close_btn{width:30px;height:30px;border:1px solid gray;border-radius:50px;color:gray;text-align:center;line-height:30px;}

.icerik{color:white;width:90%;height:70%;display:block;margin:0 auto; overflow-y:scroll;text-align:left;}
p{font-size:16px;margin-top:15px;}
h2{color:lawngreen;font-size:19px;margin-top:15px;}
.h2s{float:left;width:100%;}
#h2p{float:left;width:100%;font-size:16px;}
.hakkimda_i{width:60%;height:100%;margin:0 auto;}
.hakkimda_resim{width:250px;height:250px;border-radius:50%;margin:0 auto;background-image:url(image/profil.jpg);background-size:cover;}
::-webkit-scrollbar {
height: 2px;display:none;
}   
::-moz-scrollbar {
height: 2px;display:none;
} 
::-o-scrollbar {
height: 2px;display:none;
} 
::-ms-scrollbar {
height: 2px;display:none;
} 

 .main_panel{width:100%;height:100%;margin:0 auto;}
.panel{width:380px;height:150px;background-image:linear-gradient(to right bottom,transparent,black);margin:10px;float:left;transition:0.5s linear;}  
.panel_ikon{width:150px;height:150px;background-size:cover;transform:scale(0.7)}
.panel_yazi{width:150px;height:150px;text-align:center;}
#pn{color:gray;}
#pln{color:aqua;}
.h1s{width:100%;text-align:center;color:dimgray;}
h3{color:white;font-size:18px;}
#html_ikon{background-image:url(panel_i/html.png)}
#css_ikon{background-image:url(panel_i/css.png)}
#js_ikon{background-image:url(panel_i/js.png)}
#nodejs_ikon{background-image:url(panel_i/nodejs.png)}
#ejs_ikon{background-image:url(panel_i/electron.png)}
#jq_ikon{background-image:url(panel_i/jq.jpg)}
#react_ikon{background-image:url(panel_i/react.png)}
#asp_ikon{background-image:url(panel_i/asp.png)}
#php_ikon{background-image:url(panel_i/phpe.png)}
#mysql_ikon{background-image:url(panel_i/mysql.png)}
#mssql_ikon{background-image:url(panel_i/mssql.svg)}
#py_ikon{background-image:url(panel_i/py.png)}
#c_ikon{background-image:url(panel_i/c.png)}

#emacs_ikon{background-image:url(panel_p/emacs.png)}
#brackets_ikon{background-image: url(panel_p/br.png)}
#gimp_ikon{background-image:url(panel_p/gimp.png)}
#bl_ikon{background-image:url(panel_p/bl.png)}
#sh_ikon{background-image:url(panel_p/sh.png)}
#dr_ikon{background-image:url(panel_p/dr.png)}
#sl_ikon{background-image:url(panel_p/sw.png)}
#at_ikon{background-image:url(panel_p/at.ico)}
#aud_ikon{background-image:url(panel_p/aud.png)}
#lm_ikon{background-image:url(panel_p/lm.png)}
#ps_ikon{background-image:url(panel_p/ps.png)}
#ae_ikon{background-image:url(panel_p/ae.png)}
#ap_ikon{background-image:url(panel_p/ap.png)}
#au_ikon{background-image:url(panel_p/au.png)}
#fl_ikon{background-image:url(panel_p/fl.png)}

#linux_ikon{background-image:url(panel_i/i/lnx.jpg)}
#exp_ikon{background-image:url(panel_i/i/exp.png) }
#blm_ikon{background-image:url(panel_i/i/bilim.jpg)}
#denk_ikon{background-image:url(panel_i/i/denklem.png)}
#mk_ikon{background-image:url(panel_i/i/kep.png)}
#ts_ikon{background-image:url(panel_i/i/tasar%C4%B1m.jpg)}
#yz_ikon{background-image:url(panel_i/i/yazılım.png)}
#mak_ikon{background-image:url(panel_i/i/mekanik.png)}
#elk_ikon{background-image:url(panel_i/i/cpu.png)}
#pc_ikon{background-image:url(panel_i/i/pc.ico)}
#rb_ikon{background-image:url(panel_i/i/robot.png)}
#sr_ikon{background-image:url(panel_i/i/siir.png)}
#rs_ikon{background-image:url(panel_i/i/3d.png)}
#saz_ikon{background-image:url(panel_i/i/saz.png)}
#ft_ikon{background-image:url(panel_i/i/ft.png)}

#gthb_ikon{background-image:url(image/l/github.png)}
#lion_ikon{background-image:url(image/l/lion.png)}
#play_ikon{background-image:url(image/l/playkitap.png)}
#neo_ikon{background-image:url(image/l/term.png)}
#lnkd_ikon{background-image:url(image/l/lknd.png)}
#ins_ikon{background-image:url(image/l/ins.png)}
#ytb_ikon{background-image:url(image/l/youtube.jpg)}
#gthb_panel:hover{background-color:#222; transition:0.5s linear;}
#lion_panel:hover{background-color:#222; transition:0.5s linear;}
#neo_panel:hover{background-color:#222; transition:0.5s linear;}
#lnkd_panel:hover{background-color:#222; transition:0.5s linear;}
#ins_panel:hover{background-color:#222; transition:0.5s linear;}
#ytb_panel:hover{background-color:#222; transition:0.5s linear;}


.uyarı{width:100%;height:100%;text-align:center;color:gray;}
.mesaj_box{width:400px;height:400px;background-image:linear-gradient(to bottom,#111,transparent);margin:0 auto;border-radius:15px;margin-top:10px;}
.mesajlar{width:100%;height:350px;position:relative;}
.yaz_alan{width:95%;height:40px;margin:0 auto;border:1px solid gray;border-radius:15px;position:relative;}
.textbox{width:100%;height:40px;background-color:transparent;color:lawngreen;}
.btn{width:30px;height:30px;background-image:url(image/ok.png);float:right;margin-right:10px;position:absolute;background-size:cover;z-index:99;right:0;top:5px;cursor:pointer;transition:0.3s linear;}
.btn:hover{transform:translateX(5px);}
.profil{width:100%;height:40px;position:absolute;top:0;left:0;z-index:225}
.c_ikon{width:30px;height:30px;border-radius:50%;float:left;margin:10px;background-color:crimson;color:white;text-align:center;line-height:30px;}
.c_ad{width:80%;height:30px;margin:15px;color:lawngreen;font-size:13px;}
.boslukm{width:100%;height:320px;overflow-y:scroll;}
.bosluk{width:100%;height:320px;}
.msg{width:100%;height:35px;}
.message{width:auto;height:auto;float:left;background-color:crimson;color:black;margin-left:10px;border-radius:15px;font-weight:bold;text-align:end;padding:5px;}
#gonderen{float:right;background-color:aqua}

.ortala{width:95%;height:100%; margin:0 auto;}
.portfolyo{width:200px;height:200px;background-color:#333;float:left;margin:15px;transition:0.3s linear;}
.port{width:100%;height:100%;background-color:black;opacity:0.7;position:relative;transition:0.3s linear;}
.port:hover{opacity:0;}
.port_ikon{width:50px;height:50px;margin:0 auto;background-color:red;text-align:center;font-weight:bold;line-height:50px;}
.port_text{width:100%;float:left;position:absolute;bottom:0;text-align:center;color:darkgray;}
#port_a{background-image:url();}

@media only screen and (max-width:768px) {
.icerik{display:block;}
.hakkimda_i{width:95%;}
.panel{width:95%;height:150px;}
.mesaj_box{width:95%;}
.portfolyo{width:95%;height:70%;}

}