* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
body { background-color: #FAFAFA; color: #111; padding: 20px; max-width: 800px; margin: auto; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.logo-box { background-color: #FFC107; border: 3px solid #000; border-radius: 6px; padding: 5px 12px; font-weight: 800; box-shadow: 3px 3px 0px #000; display: inline-block; }
.btn { background-color: #FFF; border: 3px solid #000; border-radius: 6px; padding: 8px 12px; font-weight: bold; box-shadow: 3px 3px 0px #000; cursor: pointer; text-decoration: none; color: #000; display: inline-block; margin-bottom: 10px; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #000; }
.badge { background-color: #10B981; color: #000; font-size: 12px; font-weight: 800; padding: 4px 10px; border: 2px solid #000; border-radius: 6px; display: inline-block; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-top: 15px; margin-bottom: 30px;}
.card { background-color: #FFF; border: 3px solid #000; border-radius: 12px; box-shadow: 5px 5px 0px #000; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: #000; }
.card img { width: 100%; height: 220px; object-fit: cover; border-bottom: 3px solid #000; }
.card-content { padding: 12px; }
.card-title { font-size: 14px; font-weight: 800; margin: 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detail-header { margin-bottom: 20px; display: block; }
.detail-header::after { content: ""; display: table; clear: both; } /* Clearfix agar layout tidak berantakan */
.detail-header img { 
    float: left; 
    width: 140px; 
    border: 3px solid #000; 
    border-radius: 12px; 
    box-shadow: 5px 5px 0px #000; 
    margin-right: 15px; 
    margin-bottom: 10px; 
}

.chapter-list { display: flex; flex-direction: column; gap: 10px; }
.chapter-item { display: flex; justify-content: space-between; padding: 10px; border: 3px solid #000; border-radius: 8px; background: #fff; text-decoration: none; color: #000; font-weight: bold; box-shadow: 3px 3px 0px #000; cursor: pointer; }
.video-container { width: 100%; border: 3px solid #000; border-radius: 12px; box-shadow: 5px 5px 0px #000; overflow: hidden; margin-top: 20px; background: #000; }
video { width: 100%; display: block; border: none; outline: none; }
.reso-buttons { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
/* Form Pencarian */
.search-container { display: flex; gap: 10px; margin-bottom: 30px; }
.search-input { flex-grow: 1; border: 3px solid #000; border-radius: 6px; padding: 10px; font-weight: bold; font-size: 14px; box-shadow: 3px 3px 0px #000; outline: none; }
.search-input:focus { background-color: #f0f0f0; }

/* List Episode di bawah Player */
.episode-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; margin-bottom: 30px; }
.ep-box { 
    min-width: 50px; 
    background-color: #FFF; 
    border: 3px solid #000; 
    border-radius: 8px; 
    padding: 10px 15px; 
    text-align: center; 
    font-weight: bold; 
    box-shadow: 3px 3px 0px #000; 
    cursor: pointer; 
    transition: all 0.1s ease; 
    white-space: nowrap; /* Mencegah teks turun ke bawah */
}
.ep-box:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #000; }
.ep-box.active { background-color: #FFC107; color: #000; }