.banner {
    width: 186%;
    background-color: #ca4b27;
    opacity: 0.99;
    height: 48px;
    margin-top: 7.7%;
    margin-left: -43%;
    letter-spacing: 2px;
}
 .banner p{
     color: #ffffff;
     padding-top: 0.8%;
 }
.hizmet{
      margin-left: 2.5%;
      margin-bottom: 7%;
  }
.prj{
    margin-left: 1.5%;
    margin-bottom: 4%;
}
body {

    color: #fff;  /*    pirice içim   #fff*/
}

section {
    padding: 5em;
}

::-webkit-input-placeholder {
    color: #fff;
}

::-moz-placeholder {
    color: #fff;
}

.search-focus {
    /*background: url(http://www.iconsdb.com/icons/preview/white/search-12-xxl.png) no-repeat left;*/
    border: 1px solid #ccc;
    outline: none;
    background-size: 22px;
    background-position: 13px;
    border-radius: 50px;
    width: 50px;
    margin-top: 13%;
    height: 50px;
 /*   padding: 25px;*/
    transition: all .5s;
}

    .search-focus:focus {
        width: 50%;
       /* padding-left: 50px;*/
    }

.search-hover {
    background: url(http://www.iconsdb.com/icons/preview/white/search-12-xxl.png) no-repeat left;
    border: 1px solid #ccc;
    outline: none;
    background-size: 22px;
    background-position: 13px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
   /* padding: 25px;*/
    transition: all .5s;
}

    .search-hover:hover {
        width: 300px;
       /* padding-left: 50px;*/
    }

.search-click {
    position: relative;
    overflow: hidden;
   /* height: 50px;*/
}

    .search-click input {
        background: transparent;
        border: 1px solid #ccc;
        outline: none;

        position: absolute;
        width: 300px;
        height: 50px;
        left: 0%;
       /* padding: 10px;*/
    }
.boslukurun{
   margin-left: 5%;

}

@media (max-width:768px) {
    body{
        width: 98%;
    }
    .boslukurun{
        margin-left: -13%;

    }
    .banner {
        width: 100%;
        margin-left:0%;
    }

    .search-focus {
       position:absolute;
 
       margin-top: 7%;
       margin-left:28%;
    }

    
}