*{
    margin: 0;
    padding: 0;
}
body{
    background: #f6f6f6;
}
#container{
    width: 1300px;
    margin: 0 auto;
}
input[type="text"] , input[type="password"] , input[type="search"] , input[type="email"] , textarea , select{
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    font-family: Poppins , sans-serif;
    font-size: 12px;
}
textarea{
    resize: none;
}
:focus{
    outline: none;
}
#clear{
    clear: both;
}

/* Butonlar */
.yesil-buton{
    padding: 10px 20px;
    background: #5dff5d;
    color: white;
    border: 1px solid #5dff5d;
    border-radius: 5px;
    cursor: pointer;
    transition: .2s ease-in-out;
}
.yesil-buton:hover{
    background: #00be00;
}

/* Yazılar */
.yesil-yazi{
    color: #00b900 !important;
}
.kirmizi-yazi{
    color: red !important;
}

/* Header */
header{
    background: #010647;
    display: table;
    width: 100%;
    padding: 10px 0;
}
header i.fa-bars , header i.fa-angle-right{
    display: none;
}
header #logo{
    width: 80px;
    height: 80px;
    float: left;
}
header #logo img{
    width: 80px;
    height: 80px;
}
header #menu{
    float: left;
    border-left: 5px solid white;
    margin-left: 30px;
    margin-top: 20px;
    padding-left: 20px;
    width: calc(1300px - 135px);
}
header #menu li{
    list-style: none;
    float: left;
    display: block;
    padding: 10px;
    color: white;
    font-family: Poppins , sans-serif;
    font-size: 14px;
    transition: .2s ease-in-out;
    border-radius: 5px;
}
header #menu li:hover{
    background: #2b328d;
}
header #menu a:first-child + a + a + a li{
    float: right;
    background: #f1821c;
}
header #menu a:last-child li{
    float: right;
    background: #19c24d;
    margin-right: 10px;
}

/* Slider */
#slider{
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
    position: relative;
}
#slider #dots{
    width: 100%;
    height: calc(100vh - 100px);
    background: url("../img/dot.png");
    background-size: 4px 4px;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}
#slider ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: .5s ease-in-out;
}
#slider ul li{
    float: left;
    width: 100%;
    list-style: none;
}
#slider ul li img{
    width: 100%;
    height: calc(100vh - 100px);;
}

/* İçerik */
#icerik{
    display: table;
    width: 100%;
    min-height: calc(100vh - 150px);
}
#icerik #top{
    display: table;
    width: 100%;
    margin: 20px 0;
}
#icerik #top h1{
    font-family: Work Sans , sans-serif;
    float: left;
}
#icerik #top #donem{
    margin-left: 10px;
    padding: 5px;
    float: left;
}
#icerik #top #arama{
    float: right;
}
#icerik span{
    font-family: Poppins , sans-serif;
    font-size: 13px;
    color: red;
    margin-bottom: 20px;
}
#icerik #flex-1{
    display: flex;
    flex-wrap: wrap;
}
#icerik #flex-1 a{
    max-width: calc((100% / 6) - 30px);
    flex-grow: 1;
    display: table;
    padding: 10px;
    background: white;
    border-radius: 5px;
    text-decoration: none;
    margin-left: 10px;
    margin-bottom: 10px;
}
#icerik #flex-1 a:first-child,
#icerik #flex-1 a:first-child + a + a + a + a + a + a,
#icerik #flex-1 a:first-child + a + a + a + a + a + a + a + a + a + a + a + a
{
    margin-left: 0;
}
#icerik #flex-1 #mezun img{
    width: 100%;
    height: 240px;
}
#icerik #flex-1 #mezun #isim{
    font-family: Poppins , sans-serif;
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
    color: black;
}
#icerik #sayfalama{
    margin: 10px 0;
    display: table;
}
#icerik #sayfalama ul li{
    display: block;
    float: left;
    border-radius: 5px;
    background: #2b328d;
    color: white;
    margin-left: 10px;
    padding: 10px;
    font-family: Poppins , sans-serif;
    font-size: 13px;
}
#icerik #sayfalama ul a:first-child li{
    margin-left: 0;
}
#icerik article{
    padding: 20px 0;
}
#icerik article img{
    float: left;
    width: 200px;
}
#icerik article #detay{
    float: right;
    width: calc(100% - 220px);
    margin-left: 20px;
}
#icerik article #detay h1{
    font-family: Work Sans , sans-serif;
    font-size: 30px;
    margin-bottom: 10px;
    margin-left: -2px;
    margin-top: -5px;
}
#icerik article #detay p{
    font-family: Poppins , sans-serif;
    font-size: 12px;
    line-height: 20px;
}
#icerik #iletisim{
    display: table;
    width: 100%;
}
#icerik #iletisim #sol{
    float: left;
    width: 50%;
}
#icerik #iletisim #sol span{
    color: red;
    font-family: Poppins , sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
    display: table;
    text-align: center;
    width: 100%;
}
#icerik #iletisim #sol input[type="text"] , #icerik #iletisim #sol input[type="password"] , #icerik #iletisim #sol input[type="email"] , #icerik #iletisim #sol textarea{
    width: calc(100% - 22px);
    margin-bottom: 10px;
}
#icerik #iletisim #sol #checkbox{
    display: table;
    width: 100%;
    margin: 10px 0;
    height: 30px;
}
#icerik #iletisim #sol #checkbox input[type="checkbox"]{
    float: left;
    position: relative;
    cursor: pointer;
}
#icerik #iletisim #sol #checkbox input[type='checkbox']:before{
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    border: 5px solid #2b328d;
    border-radius: 5px;
    background-color: white;
}
#icerik #iletisim #sol #checkbox input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 7px;
    height: 12px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 5px;
    left: 10px;
}
#icerik #iletisim #sol #checkbox span{
    margin: 0;
    float: left;
    margin-left: 25px;
    color: black;
    font-size: 11px;
    margin-top: 8px;
    width: calc(100% - 40px);
    text-align: left;
}
#icerik #iletisim #sol #checkbox span a{
    color: blue;
}
#icerik #iletisim #sol textarea{
    height: 200px;
}
#icerik #iletisim #sol button{
    margin-top: 10px;
}
#icerik #iletisim #sag{
    float: right;
    width: calc(50% - 50px);
    margin-left: 50px;
}
#icerik #iletisim #sag table{
    font-family: Poppins , sans-serif;
    font-size: 13px;
}
#icerik #iletisim #sag table tr td{
    padding-bottom: 10px;
    padding-left: 10px;
}
#icerik #iletisim #sag table tr td:first-child{
    padding-left: 0;
}
#icerik #iletisim #sag iframe{
    margin-top: 10px;
}
#icerik #iletisim #sag #bilgi{
    padding: 10px;
    font-family: Poppins , sans-serif;
    background: white;
    border-radius: 5px;
    margin-bottom: 10px;
    display: table;
    width: calc(100% - 20px);
}
#icerik #iletisim #sag #bilgi a{
    color: blue;
}
#icerik #iletisim #sag #bilgi i{
    width: 30px;
    height: 30px;
    background: #010647;
    border-radius: 50%;
    color: white;
    margin-right: 5px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    float: left;
}
#icerik #iletisim #sag #bilgi span{
    color: black;
    font-size: 12px;
    float: left;
    line-height: 30px;
    margin-bottom: 0;
    width: calc(100% - 40px);
}

/* Yazı */
#yazi{
    width: 100%;
    padding: 10px 0;
    padding-top: 20px;
    font-family: Poppins , sans-serif;
    font-size: 14px;
    line-height: 28px;
}
#yazi h1{
    font-family: Work Sans , sans-serif;
    margin-bottom: 10px;
    font-size: 28px;
}

/* KPanel */
#kpanel{
    width: 100%;
    min-height: calc(100vh - 150px);
}
#kpanel #sol{
    width: 17%;
    background: #010647;
    border-bottom: 5px solid #2b328d;
    padding-bottom: 5px;
    float: left;
    border-radius: 0 0 5px 5px;
}
#kpanel #sol h1{
    font-family: Work Sans , sans-serif;
    color: white;
    text-align: center;
    padding: 10px 0;
}
#kpanel #sol ul a{
    text-decoration: none;
}
#kpanel #sol ul li{
    display: block;
    list-style: none;
    color: white;
    padding: 5px 10px;
    font-family: Poppins , sans-serif;
    font-size: 12px;
    text-align: center;
}
#kpanel #sag{
    width: calc(83% - 30px);
    min-height: calc(100vh - 120px);
    float: right;
    padding: 15px;
    background: white;
}
#kpanel #sag > h1{
    font-family: Work Sans , sans-serif;
    margin-bottom: 10px;
}
#kpanel #sag > span{
    font-family: Poppins , sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
    display: block;
}
#kpanel #sag #istatistik{
    display: flex;
    width: 100%;
}
#kpanel #sag #istatistik section{
    background: #2b328d;
    color: white;
    padding: 10px;
    width: calc((100% / 3) - 10px);
    text-align: center;
    margin-left: 10px;
    font-family: Work Sans , sans-serif;
    border-radius: 5px;
}
#kpanel #sag #istatistik section h2{
    margin-bottom: 10px;
    font-size: 18px;
}
#kpanel #sag #istatistik section:first-child{
    margin-left: 0;
}
#kpanel #sag #form-sol{
    width: 70%;
    float: left;
}
#kpanel #sag #form-sol input{
    width: calc(100% - 22px);
    margin-bottom: 10px;
}
#kpanel #sag #form-sol #karakter_sinir{
    font-family: Poppins , sans-serif;
    font-size: 10px;
    border: 1px solid #ccc;
    padding: 2px 5px;
    border-top: 0;
    color: rgba(34,47,62,.7);
    text-align: right;
}
#kpanel #sag #form-sag{
    width: calc(30% - 20px);
    float: left;
    margin-left: 20px;
}
#kpanel #sag #form-sag section{
    margin-bottom: 10px;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    position: relative;
    padding-top: 42px;
}
#kpanel #sag #form-sag section #baslik{
    width: calc(100% - 19px);
    font-family: Work Sans , sans-serif;
    font-size: 20px;
    background: #2b328d;
    color: white;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    position: absolute;
    top: -1px;
    left: -1px;
}
#kpanel #sag #form-sag section table tr td{
    padding-bottom: 10px;
    padding-left: 10px;
    font-family: Poppins , sans-serif;
    font-size: 12px;
}
#kpanel #sag #form-sag section table tr:first-child td{
    padding-top: 10px;
}
#kpanel #sag #form-sag section table tr td i.fa-toggle-off{
    font-size: 18px;
    padding-top: 2px;
    color: red;
    cursor: pointer;
}
#kpanel #sag #form-sag section table tr td i.fa-toggle-on{
    font-size: 18px;
    padding-top: 2px;
    color: #5dff5d;
    cursor: pointer;
}
#kpanel #sag #form-sag section img{
    cursor: pointer;
}
#kpanel #sag #form-sag input[type="file"]{
    display: none;
}
#kpanel #sag #kolonlar{
    display: flex;
    flex-wrap: wrap;
}
#kpanel #sag section#form-kolon{
    flex-grow: 1;
    max-width: calc(50% - 27px);
    padding: 10px;
    float: left;
    margin-left: 10px;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    position: relative;
    padding-top: 52px;
    margin-bottom: 10px;
}
#kpanel #sag section#form-kolon #baslik{
    font-family: Work Sans , sans-serif;
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% - 18px);
    font-size: 20px;
    background: #2b328d;
    color: white;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 10px;
}
#kpanel #sag section#form-kolon:first-child,
#kpanel #sag section#form-kolon:first-child + section + section
{
    margin-left: 0;
}
#kpanel #sag section#form-kolon input{
    width: calc(100% - 22px);
    margin-bottom: 10px;
}

/* Footer */
footer{
    padding: 20px 0;
    background: black;
    margin-top: 50px;
    display: table;
    width: 100%;
}
footer #copyright{
    color: white;
    font-family: Poppins , sans-serif;
    font-size: 12px;
    float: left;
}
footer #sosyal{
    float: right;
}
footer #sosyal ul li{
    display: block;
    float: left;
    list-style: none;
    color: white;
    margin-left: 20px;
}
footer #sosyal ul a:first-child li{
    margin-left: 0;
}
footer #powered{
    margin: 0 auto;
    margin-top: 20px;
    color: white;
    font-family: Roboto , sans-serif;
    font-size: 11px;
    display: table;
}
footer #powered span{
    float: left;
    line-height: 20px;
}
footer #powered img{
    height: 20px;
    margin-left: 10px;
    float: left;
}

@media screen and (max-width:1024px) and (min-width: 769px){
    header{
        height: 85px;
    }
    #container{
        width: calc(100% - 20px);
        padding: 0 10px;
    }
    header #menu{
        width: calc(100% - 135px);
    }
    #slider{
        height: calc(100vh - 120px);
    }
    #icerik #flex-1 #mezun img{
        height: 180px;
    }
}
@media screen and (max-width:768px) and (min-width: 451px){
    #container{
        width: calc(100% - 20px);
        padding: 0 10px;
    }
    header{
        height: 50px;
        position: relative;
    }
    header i.fa-bars{
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        color: white;
        font-size: 50px;
        display: block;
    }
    header #logo{
        float: none;
        margin: 0 auto;
        display: table;
        height: auto;
    }
    header #logo img{
        height: 80px;
    }
    header nav{
        display: block;
        position: fixed;
        top: 0;
        width: 50%;
        height: 100vh;
        background: black;
        z-index: 9999;
        margin: 0;
        padding: 0;
        right: calc(-50% - 25px);
        border-left: 0;
        transition: .5s ease-in-out;
    }
    header nav i{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        width: 40px;
        height: 40px;
        line-height: 40px !important;
        background: black;
        border-radius: 50%;
        text-align: center;
        font-size: 30px;
        left: -15px;
        display: block !important;
    }
    header nav a{
        text-decoration: none;
    }
    header nav #menu li{
        display: block;
        width: 100%;
        font-size: 25px;
        text-align: center;
        padding: 10px 0;
        border-radius: 0;
        float: none !important;
    }
    header nav #menu{
        border-left: 0;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    #slider{
        height: calc(100vh - 100px);
    }
    #slider #dots{
        height: calc(100vh - 100px);
        background-size: 5px 5px;
    }
    #slider ul li img{
        height: calc(100vh - 100px);
    }
    #icerik{
        min-height: calc(100vh - 130px);
    }
    #icerik #flex-1 #mezun img{
        height: 125px;
    }
}
@media screen and (max-width:450px){
    #container{
        width: calc(100% - 20px);
        padding: 0 10px;
    }
    header{
        height: 30px;
        position: relative;
    }
    header i.fa-bars{
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        color: white;
        font-size: 20px;
        display: block;
    }
    header #logo{
		width: 60px;
        float: none;
        margin: 0 auto;
        display: table;
        height: auto;
    }
    header #logo img{
		width: 60px;
        height: 60px;
    }
    header nav{
        display: block;
        position: fixed;
        top: 0;
        width: 50%;
        height: 100vh;
        background: black;
        z-index: 9999;
        margin: 0;
        padding: 0;
        right: calc(-50% - 25px);
        border-left: 0;
        transition: .5s ease-in-out;
    }
    header nav i{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        width: 40px;
        height: 40px;
        line-height: 40px !important;
        background: black;
        border-radius: 50%;
        text-align: center;
        font-size: 30px;
        left: -15px;
        display: block !important;
    }
    header nav a{
        text-decoration: none;
    }
    header nav #menu li{
        display: block;
        width: 100%;
        font-size: 16px;
        text-align: center;
        padding: 10px 0;
        border-radius: 0;
        float: none !important;
    }
    header nav #menu{
        border-left: 0;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    #slider{
        height: calc(100vh - 79px);
    }
    #slider #dots{
        height: calc(100vh - 79px);
        background-size: 3px 3px;
    }
    #slider ul li img{
        height: calc(100vh - 79px);
    }
    #icerik{
        min-height: calc(100vh - 139px);
        display: block;
    }
    #icerik #top{
        margin: 10px 0;
    }
    #icerik #top h1{
        font-size: 30px;
        float: none;
        text-align: center;
    }
    #icerik #top > #donem{
        width: 100%;
        padding: 0;
        margin: 10px 0;
    }
    #icerik #top > #donem select{
        margin-left: 0;
        width: 100%;
    }
    #icerik #flex-1 a{
        max-width: calc((100% / 2) - 25px)
    }
    #icerik #flex-1 a:nth-child(2n + 1){
        margin-left: 0;
    }
    #icerik #flex-1 #mezun img{
        height: 180px;
    }
    #icerik #top #arama{
        width: 100%;
    }
    #icerik #top #arama input{
        padding: 5px;
        width: calc(100% - 47px);
    }
    #icerik #top #arama .yesil-buton{
        padding: 5px 10px;
    }
    #icerik #iletisim{
        display: block;
    }
    #icerik #iletisim #sol , #icerik #iletisim #sag{
        width: 100%;
        float: none;
        margin: 0;
    }
    #icerik #iletisim #sol{
        margin-bottom: 10px;
    }
    #icerik #iletisim #sol #checkbox span{
        margin-top: 0;
    }
    #icerik #iletisim #sol .g-recaptcha , #icerik #iletisim #sol button{
        display: table;
        margin: 0 auto;
    }
    #icerik #iletisim #sol button{
        margin-top: 10px;
    }
    #icerik #iletisim #sag table tr td{
        font-size: 12px;
    }
    #kpanel{
        min-height: calc(100vh - 129px);
    }
    #kpanel #sol{
        width: 25%;
    }
    #kpanel #sol h1{
        font-size: 20px;
    }
    #kpanel #sol ul li{
        font-size: 10px;
    }
    #kpanel #sag{
        width: calc(75% - 30px);
        padding: 10px 15px;
    }
    #kpanel #sag #istatistik{
        display: block;
    }
    #kpanel #sag #istatistik section{
        width: calc(100% - 20px);
        margin: 0;
        margin-bottom: 10px;
    }
    #kpanel #sag #form-sol , #kpanel #sag #form-sag{
        width: 100%;
        float: none;
        margin: 0;
    }
    #kpanel #sag #form-sol{
        margin-bottom: 10px;
    }
    #kpanel #sag #form-sol .tox-tinymce{
        height: 300px !important;
    }
    #kpanel #sag #kolonlar{
        display: block;
    }
    #kpanel #sag #kolonlar section{
        max-width: 100%;
        margin: 0;
    }
    footer #copyright , footer #sosyal{
        float: none;
        margin: 0 auto;
        display: table;
    }
    footer #copyright{
        margin-bottom: 10px;
    }
}