.hat-donus-full{

    -webkit-perspective:1000;
    -moz-perspective:1000;
    -ms-perspective:1000;
    perspective:1000;
    -webkit-transform:perspective(1000px);
    -moz-transform:perspective(1000px);
    -ms-transform:perspective(1000px);
    transform:perspective(1000px);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transform-style:preserve-3d;
    position:relative;
    background-size:cover;
    background-position:center center;
    border:1px solid #eee;
}

.hat-donus-full{height:225px;margin-bottom:30px;}

.hat-donus-onyuz, .hat-donus-arkayuz{width:100%;height:100%;}


.hat-donus-onyuz {

    -webkit-transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25), -webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25), -webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    -o-transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #292929;
}

.hat-donus-onyuz h4{font-weight:300;text-transform:uppercase;letter-spacing:5px;color:#fff;font-size:18px;text-align:left;margin-bottom:0;display:inline-flex;}

.hat-donus-full:hover .hat-donus-onyuz{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}


.hat-donus-arkayuz{
    transform: scaleX(-1);
    -webkit-transition:-webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    transition:-webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    -o-transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25), -webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    overflow:hidden;
    position:absolute;
    top:0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    background-color: #292929;
}




.hat-donus-full .hat-donus-arkayuz{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;z-index:1;}

.hat-donus-full:hover .hat-donus-arkayuz{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}


.hat-donus-onyuz-kutu{
    padding:4px;
    text-align:center;
    height:420px;
    position:relative;
    -webkit-transition:-webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    transition:-webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    -o-transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25), -webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);
    -webkit-transform:translateX(0px) scale(1);-ms-transform:translateX(0px) scale(1);
    transform:translateX(0px) scale(1);
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    z-index:2;
}



.hat-donus-dikey-yap{
    background: rgba(0,0,0,0.5); 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-right: 10px; 
    padding-left: 10px; 
    width: auto; height: 100%; 
    border-left: 1px dashed white;
    margin-right: 50px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    color:#fff;
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 5px;
}

.hat-donus-dikey-yap-onyuz{
    position: absolute;
    bottom: 4px;
    right: 5px;
    background: rgba(0, 0, 0, 0.5);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
    width: auto;
    height: 84%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 5px;
}

.hat-donus-dikey-yap-arkayuz{
    position: absolute; 
    bottom: 0px; 
    left: 0px;
    background: rgba(0,0,0,0.5); 
    padding-top: 15px; 
    padding-bottom: 5px; 
    padding-right: 15px; 
    padding-left: 15px; 
    width: auto; height: 100%; 
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    color:#fff;
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 5px;
}


.hat-donus-title{
    width: auto; height: auto;
    padding-top: 15px; padding-bottom: 15px;  padding-left: 10px; padding-right: 10px;
    background: rgba(0,0,0,0.7); border-bottom: 5px solid #18abd5;  color:#fff; font-size:19px; font-weight: 300;  letter-spacing: 5px;

}


.hat-donus-title-arkayuz {
    position: absolute;
    bottom: 36%;
    right: 5px;
    width: 211px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 5px;
}
.hat-donus-onyuz a,.hat-donus-arkayuz a{
    text-decoration: none;
}

.hat-donus-dikey-yap-onyuz i,.hat-donus-title-arkayuz i{
    color: #0ba8d3;
}


.hat-donus-arkayuz-kutu a{
    text-decoration: none;
}

.hat-donus-full:hover .hat-donus-onyuz-kutu{-webkit-transform:translateX(-650px) scale(0.88);-ms-transform:translateX(-650px) scale(0.88);transform:translateX(-650px) scale(0.88);}
.hat-donus-arkayuz-kutu{ width:100%;
                         height: 100%;
                         padding:6px;
                         text-align:left;
                         position:relative;
                         top:50%;
                         -webkit-transition:-webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);transition:-webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);-o-transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);transition:transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25), -webkit-transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.25);-webkit-transform:translateY(-50%) translateX(650px) translateZ(60px) scale(0.88);transform:translateY(-50%) translateX(650px) translateZ(60px) scale(0.88);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;z-index:2;}


.hat-donus-full:hover .hat-donus-arkayuz-kutu{-webkit-transform:translateY(-50%) translateX(0px) translateZ(0px) scale(1);transform:translateY(-50%) translateX(0px) translateZ(0px) scale(1);}
.hat-donus-ekran-karart{display:block;background:#000;width:100%;height:100%;position:absolute;top:0;left:0;opacity:.3;}