body{margin:0;background:#0f172a;color:#fff;font-family:Arial}
header{text-align:center;padding:35px;background:#111827}
h1{margin:0;color:#d4af37}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:20px}
input,select,button{padding:12px;border-radius:8px;border:none}
button,.btn{background:#d4af37;color:#111;text-decoration:none;font-weight:bold;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding:20px}
.card{background:#1e293b;padding:18px;border-radius:12px;transition:.25s}
.card:hover{transform:translateY(-4px)}
.poster{height:220px;background:#334155;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:80px}
.meta,.genre{color:#cbd5e1;margin:8px 0}.single{max-width:900px;margin:auto;padding:30px}
.poster{
    height:360px;
    overflow:hidden;
    border-radius:8px;
    margin-bottom:10px;
}

.poster img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    padding:30px;
    flex-wrap:wrap;
}

.pagination a{
    padding:10px 16px;
    background:#1e293b;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    transition:.2s;
}

.pagination a:hover{
    background:#d4af37;
    color:#111;
}

.pagination a.active{
    background:#d4af37;
    color:#f1f1f1;
    font-weight:bold;
}


header{
    background:#111827;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 30px;
    position:sticky;
    top:0;
    z-index:999;
}

.logo a{
    color:#d4af37;
    text-decoration:none;
    font-size:28px;
    font-weight:bold;
}

nav{
    display:flex;
    gap:25px;
}

nav a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    padding:8px 12px;
    border-radius:6px;
    transition:.25s;
}

nav a:hover,
nav a.active{
    background:#d4af37;
    color:#f1f1f1;
}

.menu-btn{
    display:none;
    color:#fff;
    font-size:34px;
    cursor:pointer;
    user-select:none;
}

@media (max-width:768px){

    .menu-btn{
        display:block;
    }

    nav{
        display:none;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#111827;
        flex-direction:column;
        border-top:1px solid #333;
    }

    nav.show{
        display:flex;
    }

    nav a{
        padding:18px;
        border-bottom:1px solid #222;
        text-align:center;
    }

}


.search-box{

max-width:900px;
margin:30px auto 15px;
padding:0 20px;

}

.search-box form{

display:flex;

}

.search-box input{

flex:1;
padding:15px;
font-size:17px;
border:0;
border-radius:8px 0 0 8px;
background:#1e293b;
color:#fff;

}

.search-box button{

padding:15px 25px;
border:0;
background:#d4af37;
font-weight:bold;
border-radius:0 8px 8px 0;
cursor:pointer;

}


.filter-box{

max-width:900px;
margin:0 auto 30px;
padding:0 20px;

}

.filter-box form{

display:flex;
gap:15px;
flex-wrap:wrap;

}

.filter-box select{

flex:1;
min-width:180px;
padding:14px;
border:0;
border-radius:8px;
background:#1e293b;
color:#fff;

}

.filter-box button{

padding:14px 25px;
border:0;
background:#d4af37;
font-weight:bold;
border-radius:8px;
cursor:pointer;

}
@media(max-width:768px){ header .logo a{font-size:24px;}}
@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }
	 .poster{ 	max-height:220px;}
}