/* ==========================================
   CATEGORY PAGE
========================================== */

.category-header{

    width:95%;
    margin:30px auto;

    border-radius:24px;

    color:#fff;

    padding:45px;

    box-shadow:0 10px 35px rgba(0,0,0,.12);

}

.category-header .breadcrumb{

    font-size:14px;

    margin-bottom:18px;

    opacity:.9;

}

.category-header .breadcrumb a{

    color:#fff;

    text-decoration:none;

}

.category-header .breadcrumb a:hover{

    text-decoration:underline;

}

.category-header h1{

    margin:0;

    font-size:42px;

    font-weight:800;

}

.category-header h1 i{

    margin-right:12px;

}

.category-header p{

    margin-top:12px;

    font-size:18px;

    opacity:.95;

}


/* ==========================================
   GRID
========================================== */

.category-grid{

    width:95%;

    margin:35px auto 60px;

}

.video-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    justify-items:center;

}


/* card memakai movie.css */

.video-grid .movie-card{

    width:100%;

    max-width:260px;

}


/* ==========================================
   PAGINATION
========================================== */

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:50px 0 70px;

}

.pagination a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#eceff3;

    color:#333;

    font-weight:700;

    transition:.3s;

}

.pagination a:hover{

    background:#e50914;

    color:#fff;

}

.pagination a.active{

    background:#e50914;

    color:#fff;

}


/* ==========================================
   EMPTY DATA
========================================== */

.empty-category{

    background:#fff;

    border-radius:18px;

    padding:80px 20px;

    text-align:center;

    color:#777;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.empty-category i{

    font-size:70px;

    color:#ccc;

    margin-bottom:20px;

}

.empty-category h2{

    margin-bottom:10px;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px){

.video-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.category-header{

padding:30px;

}

.category-header h1{

font-size:32px;

}

.video-grid{

grid-template-columns:repeat(2,1fr);

gap:20px;

}

}

@media(max-width:480px){

.video-grid{

grid-template-columns:1fr;

}

.category-header{

padding:25px;

}

.category-header h1{

font-size:28px;

}

.category-header p{

font-size:15px;

}

}

.video-grid .movie-content{

    position:static;

    padding:15px 5px 0;

    color:#222;

}

.video-grid .movie-content h3{

    color:#222;

    text-shadow:none;

}

.video-grid .movie-speaker{

    color:#666;

}

.video-grid .movie-meta{

    color:#444;

}


/* ===================================================
TOOLBAR
=================================================== */

.category-toolbar{

padding:25px 0;

background:#fff;

border-bottom:1px solid #ececec;

}

.toolbar{

display:flex;

gap:15px;

align-items:center;

flex-wrap:wrap;

}

.toolbar-search{

flex:1;

}

.toolbar-search input{

width:100%;

height:48px;

padding:0 18px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

outline:none;

}

.toolbar-sort select{

height:48px;

padding:0 18px;

border:1px solid #ddd;

border-radius:10px;

background:#fff;

}

.toolbar-button button{

height:48px;

padding:0 28px;

background:#d9232d;

color:#fff;

border:none;

border-radius:10px;

cursor:pointer;

font-weight:600;

}

.toolbar-button button:hover{

background:#b51b23;

}

/* ===================================================
STATISTIK
=================================================== */

.category-stats{

padding:25px 0;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.stat-box{

background:#fff;

border-radius:14px;

padding:22px;

text-align:center;

box-shadow:0 8px 25px rgba(0,0,0,.06);

}

.stat-box h2{

margin:0;

font-size:30px;

color:#d9232d;

}

.stat-box p{

margin-top:8px;

color:#777;

font-size:14px;

}

/* ===================================================
FILTER
=================================================== */

.category-filter{

padding-bottom:25px;

}

.filter-menu{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.filter-menu a{

padding:10px 22px;

background:#f3f3f3;

border-radius:50px;

text-decoration:none;

color:#444;

transition:.3s;

font-weight:600;

}

.filter-menu a:hover{

background:#d9232d;

color:#fff;

}

.filter-menu a.active{

background:#d9232d;

color:#fff;

}

/* ===================================================
PAGINATION
=================================================== */

.pagination-wrap{

padding:40px 0 70px;

}

.pagination{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

}

.pagination a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

text-decoration:none;

background:#f3f3f3;

color:#333;

font-weight:600;

transition:.3s;

}

.pagination a:hover{

background:#d9232d;

color:#fff;

}

.pagination a.active{

background:#d9232d;

color:#fff;

}

/* ===================================================
RESPONSIVE
=================================================== */

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

.toolbar{

flex-direction:column;

}

.toolbar-search,

.toolbar-sort,

.toolbar-button{

width:100%;

}

.toolbar-sort select,

.toolbar-button button{

width:100%;

}

}