/* --- Gaya Dasar (Desktop) --- */
body, html {
    margin: 0; padding: 0; height: 100%; width: 100%;
    background-color: #181818; color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* DIUBAH: Menggunakan flexbox untuk menata header dan player */
    display: flex;
    flex-direction: column;
}
/* TAMBAHAN: Gaya untuk header baru */
.player-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #202020;
    border-bottom: 1px solid #303030;
    flex-shrink: 0; /* Mencegah header menyusut */
}
.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
}
.header-logo-link img {
    height: 35px;
    margin-right: 15px;
}
.header-title {
    font-size: 1.5rem;
    font-weight: bold;
}
/* DIUBAH: Tinggi player-container disesuaikan */
.player-container { 
    display: flex; 
    height: calc(100vh - 61px); /* Tinggi total dikurangi tinggi header */
    width: 100vw; 
}

.video-section { flex: 3; display: flex; flex-direction: column; background-color: #000; }
.video-wrapper { flex-grow: 1; position: relative; background-color: #000; }
#videoPlayer, #iframePlayer { width: 100%; height: 100%; background: #000; }
.loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; }
.loading-overlay .spinner { border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 4px solid #fff; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 15px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.video-controls { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background-color: #202020; flex-shrink: 0; border-top: 1px solid #303030; }
.channel-info { display: flex; align-items: center; min-width: 0; }
.channel-info img { height: 40px; max-width: 80px; object-fit: contain; margin-right: 15px; flex-shrink: 0; }
.channel-info h3 { margin: 0; font-size: 1.4rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.button-group .btn-control { padding: 8px 15px; border: none; border-radius: 4px; color: white; font-weight: bold; text-transform: uppercase; cursor: pointer; margin-left: 10px; text-decoration: none; font-size: 0.9em; }
.button-group .btn-danger { background-color: #E50914; }
.button-group .btn-warning { background-color: #f5a623; color: #000; }
.button-group #prevBtn, .button-group #nextBtn { background-color: #4a4a4a; }
.channel-list-section { flex: 1; background-color: #1F1F1F; display: flex; flex-direction: column; min-width: 280px; max-width: 350px; border-left: 1px solid #303030; }
.list-header { padding: 16px; font-size: 1rem; font-weight: bold; border-bottom: 1px solid #303030; background-color: #2a2a2a; display: flex; align-items: center; justify-content: space-between; }
.list-header i { font-size: 1.5rem; }
.list-header span { margin: 0 10px; }
.list-header .arrow-icon { display: none; transition: transform 0.3s ease; }
.channel-list-items { overflow-y: auto; flex-grow: 1; }
.category-header { position: sticky; top: 0; background-color: #383838; color: #fff; padding: 8px 16px; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; z-index: 1; border-bottom: 1px solid #1F1F1F; }
.channel-item { display: flex; align-items: center; padding: 12px 16px; text-decoration: none; color: #ccc; border-bottom: 1px solid #303030; transition: background-color 0.2s; }
.channel-item:hover { background-color: #333; color: #fff; }
.channel-item.active { background-color: #E50914; color: #fff; font-weight: bold; }
.channel-item img { height: 35px; width: 65px; object-fit: contain; margin-right: 15px; border-radius: 4px; }

/* --- Gaya Responsif (Tablet & Mobile) --- */
@media (max-width: 992px) {
    body, html { overflow: auto; }
    /* DIUBAH: player-container tidak perlu height lagi di mobile */
    .player-container { flex-direction: column; height: auto; }
    .header-title { font-size: 1.2rem; }
    .video-section { height: auto; }
    .video-wrapper { position: relative; width: 100%; padding-top: 56.25%; background-color: #000; }
    #videoPlayer, #iframePlayer, .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .video-controls { flex-wrap: wrap; padding: 10px; }
    .channel-info { width: 100%; margin-bottom: 10px; }
    .button-group { width: 100%; display: flex; justify-content: space-between; margin-left: 0; }
    .button-group .btn-control { flex-grow: 1; text-align: center; margin: 0 2px; padding: 8px 5px; font-size: 0.75rem; }
    .channel-list-section { max-width: 100%; min-width: 100%; border-left: none; }
    .list-header { cursor: pointer; }
    .list-header .arrow-icon { display: inline-block; }
    .channel-list-items { display: none; }
    .channel-list-section.list-visible .channel-list-items { display: block; max-height: 50vh; }
    .channel-list-section.list-visible .arrow-icon { transform: rotate(180deg); }
}