@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Satisfy&display=swap');
@font-face {
    font-family: God Of War;
    src: url('http://192.168.0.212/ihyaulislam/public/fonts/GODOFWAR.TTF') format('truetype');
}
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PT Sans', sans-serif;
    }
    body
    {
        background: #1064a6;
    }
    .kartu
    {
        position: relative;
        width: 320px;
        height: 450px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    }
    .kartu .poster
    {
        position: relative;
        overflow: hidden;
    }
    .kartu .poster::before
    {
        content: '';
        position: absolute;
        bottom: -180px;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, #1064a6 50%, transparent);
        transition: 0.5s;
        z-index: 1;
    }
    .kartu:hover .poster::before
    {
        bottom: 0px;
    }
    .kartu .poster img
    {
        width: 100%;
        transition: 0.5s;
    }
    .kartu:hover .poster img
    {
        transform: translateY(-50px);
        filter: blur(5px);
    }
.kartu .details
{
    position: absolute;
    bottom: -200px;
    left: 0;
    padding: 20px;
    width: 100%;
    z-index: 2;
    transition: 0.5s;
}
.kartu:hover .details
{
    bottom: 0px;
}
.kartu .details .logo
{
    max-width: 180px;
}
.kartu .details h3 b
{
    text-transform: uppercase;
    font-family: 'God Of War';
    font-size: 1em;
    color: rgb(16, 255, 8);
    text-shadow: 0 0 1px #000;
}
.kartu .details span
{
    text-transform: uppercase;
}
.kartu .details .rating
{
    position: relative;
    padding: 5px 0;
}
.kartu .details .rating .fa-star
{
    color: #f7f406;
    font-size: 1em;
}
.kartu .details .rating .fa-star-half-alt
{
    color: #f7f406;
    font-size: 1em;
}
.kartu .details .rating span
{
    color: #fff;
    margin-left: 10px;
}
.kartu .details .tags
{
    position: relative;
    margin-top: 5px;
}
.kartu .details .tags span
{
    padding: 2px 5px;
    color: #fff;
    background: #03a8f5;
    border-radius: 4px;
}
.kartu .details .tags span:nth-child(2)
{
    background: #ff5722;
}
.kartu .details .info
{
    color: #fff;
    margin-top: 20px;
}
.kartu .details .cast
{
    position: relative;
}
.kartu .details .cast h4
{
    color: #fff;
    margin-top: 10px;
}
.kartu .details .cast ul
{
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.kartu .details .cast ul li
{
    list-style: none;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fff;
}
.kartu .details .cast ul li img
{
    max-width: 100%;
}