* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: #1e2233; color: #fff; padding-bottom: 20px; }

/* Header */
.header { background: #292f4c; padding: 10px 15px; display: flex; flex-direction: column; gap: 10px; }
.header-top { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; font-weight: bold; font-family: serif; color: #ffffff; text-shadow: 0 0 5px #ffffff; }
.header-icons { font-size: 20px; cursor: pointer; }

/* Search Bar */
.search-container { position: relative; width: 100%; }
.search-container input {
    width: 100%; padding: 10px 40px 10px 15px; border-radius: 20px; border: none; outline: none; background: #fff; color: #000;
}
.search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #000; }

/* Menu */
.menu-toggle { background: #3b4268; padding: 8px; text-align: center; border-radius: 5px; font-weight: bold; cursor: pointer; margin-top: 5px; }

/* Iklan Banner */
.ads-banner img { width: 100%; max-width: 728px; height: auto; border-radius: 5px; }

/* Section Title */
.section-title { font-size: 14px; font-weight: bold; text-align: center; background: #333a5a; padding: 10px; margin: 10px 0; }

/* Grid Anime (3 kolom di HP) */
.grid-container{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    padding:0 14px 14px;
    width:100%;
}

/* Card Anime */
.anime-card{
    width:100%;
    background:#2d344e;
    border-radius:10px;
    overflow:hidden;
    transition:.2s;
}
.thumb{
    position:relative;
}

.episode-badge{
    position:absolute;
    right:6px;
    bottom:6px;
    background:rgba(0,0,0,.8);
    color:#6CFF6C;
    padding:3px 6px;
    border-radius:5px;
    font-size:10px;
    font-weight:bold;
}
.anime-card:hover{
    transform:translateY(-3px);}
.anime-card a{
    display:block;
    color:#fff;
    text-decoration:none;
}    

.anime-card img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    display:block;
}
.anime-info{
    padding:8px;
}

.anime-info h3{
    font-size:13px;
    line-height:18px;
    height:36px;
    overflow:hidden;
    font-weight:600;
    color:#fff;
}

.anime-info small{
    display:block;
    color:#62d86b;
    font-size:11px;
    margin-top:4px;
}

.anime-info p{
    color:#bdbdbd;
    font-size:11px;
    margin-top:3px;
}

/* Load More Button */
.btn-load {
    display: block; width: 90%; margin: 15px auto; padding: 10px;
    background: #424a71; color: #fff; border: none; border-radius: 5px; font-weight: bold; cursor: pointer;
}

/* Kategori Footer */
.category-section { padding: 10px; background: #292f4c; margin-top: 10px; }
.category-title { font-weight: bold; margin-bottom: 10px; }
.category-tabs{
    display:flex;
    gap:10px;
    margin-bottom:16px;
}
.tab-btn { background: #424a71; color: #fff; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; }
.tab-btn.active { background: #5a6386; }

.popular-section { background: #292f4c; padding: 10px; margin: 10px 0; font-weight: bold; }

/* Video Modal */
.hidden { display: none !important; }
#video-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); display: flex; justify-content: center; align-items: center; z-index: 999;
}
.modal-content { width: 95%; max-width: 500px; background: #222; padding: 15px; border-radius: 10px; }
#close-modal { float: right; font-size: 28px; cursor: pointer; }
#modal-title { margin-bottom: 10px; font-size: 16px; }
.side-menu{
    display:none;
    background:#292f4c;
    padding:10px;
}

.side-menu.active{
    display:block;
}

.side-menu a{
    display:block;
    padding:12px;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.side-menu a:hover{
    background:#3b4268;
}

.side-menu i{
    width:25px;
}
.anime-card a{
    text-decoration:none;
    color:#fff;
    display:block;
}

.anime-card a:hover{
    color:#fff;
}

.watch-container{
    max-width:900px;
    margin:auto;
    padding:15px;
}

#anime-poster{
    width:220px;
    max-width:100%;
    display:block;
    margin:20px auto;
    border-radius:12px;
}

#anime-title{
    font-size:24px;
    text-align:center;
    margin-bottom:10px;
}

#anime-info{
    text-align:center;
    color:#7ee787;
    margin-bottom:15px;
}

#anime-synopsis{
    background:#2d344e;
    padding:15px;
    border-radius:10px;
    line-height:1.7;
    margin:20px 0;
}

#episode-list{
    margin-top:20px;
}

.episode-item{
    display:block;
    background:#2d344e;
    color:#fff;
    text-decoration:none;
    padding:12px 15px;
    border-radius:8px;
    margin-bottom:10px;
    transition:.2s;
}

.episode-item:hover{
    background:#3b4268;
}

.watch-ads{
    margin:20px 0;
    text-align:center;
}

.watch-ads img{
    width:100%;
    border-radius:8px;
}
.ads-banner{
    margin:20px 0;
    text-align:center;
}

.ads-banner img{
    width:100%;
    max-width:728px;
    border-radius:8px;
}
.player-box{
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    margin:15px 0;
    border-radius:10px;
    overflow:hidden;
}

.player-box iframe{
    width:100%;
    height:100%;
    border:none;
}

.episode-nav{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin:15px 0;
}

.nav-btn{
    flex:1;
    background:#2d344e;
    color:#fff;
    padding:12px;
    text-align:center;
    border-radius:8px;
    text-decoration:none;
}

#recommend-list{
    display:grid;
    gap:10px;
    margin-top:10px;
}

.recommend-item{
    display:flex;
    gap:10px;
    background:#2d344e;
    padding:8px;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
}

.recommend-item img{
    width:70px;
    height:90px;
    object-fit:cover;
    border-radius:6px;
}

.recommend-item span{
    display:flex;
    align-items:center;
}
.recommend-item div{
    flex:1;
}

.recommend-item h4{
    font-size:14px;
    color:#fff;
    margin-bottom:6px;
    line-height:20px;
}

.recommend-item small{
    color:#8fd694;
    font-size:12px;
}
/* ===========================
   SERVER PLAYER
=========================== */

#server-list{
    background:#2d344e;
    padding:10px;
    border-radius:10px;
    margin:15px 0;
}

.server-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}

.server-btn{
    width:100%;
    background:#394266;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:8px;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.server-btn:hover,
.server-btn.active{
    background:#4f6bff;
}

@media (max-width:480px){

    #anime-title{
        font-size:20px;
    }

    #anime-poster{
        width:180px;
    }

    .episode-nav{
        flex-direction:column;
    }

}
.server-header{
    background:#394266;
    color:#fff;
    padding:10px 12px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    margin-bottom:10px;
}