/*====================================================
 BAGONG TV PREMIUM V6
 FINAL CSS
 PART 1
 ROOT • RESET • GLOBAL • HEADER
====================================================*/


/*====================================================
 ROOT
====================================================*/

:root{

    --bg:#0d1117;
    --card:#161b22;
    --card-2:#1f2937;

    --border:#30363d;

    --text:#ffffff;
    --muted:#8b949e;

    --blue:#2383ff;
    --blue-hover:#1d6fd6;

    --red:#e50914;

    --radius:14px;
    --radius-sm:8px;
    --radius-pill:999px;

    --shadow:0 10px 25px rgba(0,0,0,.20);

    --transition:.25s ease;

    --container:1400px;

}


/*====================================================
 RESET
====================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    background:#000;

    color:#fff;
	
	font-family: system-ui,
             -apple-system,
             BlinkMacSystemFont,
             "Segoe UI",
             Roboto,
             Arial,
             sans-serif;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}

video,
iframe{

    display:block;

    width:100%;

}

button,
input,
textarea,
select{

    font:inherit;

}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

}

ul,
ol{

    list-style:none;

}

table{

    width:100%;

    border-collapse:collapse;

}

::selection{

    background:var(--blue);

    color:#fff;

}


/*====================================================
 GLOBAL
====================================================*/

.container{

    width:min(var(--container),95%);

    margin:auto;

}

.content-area{

    display:grid;

    gap:6px;

    padding:6px 0;

}


/*====================================================
 CARD SYSTEM
====================================================*/

.player-card,
.chat-card,
.info-card,
.server-card{

    background:transparent;

    border:none;

    border-radius:0;

    box-shadow:none;

}

.card-body{

    padding:10px;

}

.section-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    padding-left:12px;

    border-left:none;

    font-size:20px;

    font-weight:700;

}


/*====================================================
 HEADER
====================================================*/

header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(22,27,34,.92);

    backdrop-filter:blur(12px);

    border-bottom:1px solid var(--border);

}



.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:70px;

    gap:20px;

}

.header-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.header-logo{

    width:42px;

    height:42px;

    object-fit:contain;

}

.header-title{

    font-size:22px;

    font-weight:700;

    letter-spacing:.5px;

}

.header-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.viewer-card{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    background:var(--card-2);

    border:1px solid var(--border);

    border-radius:var(--radius-pill);

    font-weight:600;

    white-space:nowrap;

}

/*====================================================
 AVATAR
====================================================*/

.avatar,
#avatar,
.user-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

    overflow:hidden;

    border:2px solid var(--border);

    background:var(--card);

    cursor:pointer;

    transition:var(--transition);

}

.avatar:hover,
#avatar:hover,
.user-avatar:hover{

    border-color:var(--blue);

    transform:scale(1.05);

}


.chat-avatar{

    width:40px;
    height:40px;

    border-radius:50%;

    object-fit:contain;

    background:#fff;

    border:2px solid var(--border);

}

/*====================================================
 PLAYER
====================================================*/

.player-section{

    padding:8px 0;

}

.player-card{

    overflow:hidden;

}

.player-wrapper{

    position:relative;

    overflow:hidden;

}

.player-wrapper video{

    width:100%;

    height:100%;

    object-fit:contain;

}


/*====================================================
 LOADING
====================================================*/

.loading{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.65);

    color:#fff;

    font-size:18px;

    font-weight:600;

    z-index:20;

    transition:opacity var(--transition);

}


/*====================================================
 CHANNEL OVERLAY
====================================================*/

#channelOverlay{
    display:none !important;
}


/*====================================================
 PLAYER INFORMATION
====================================================*/

.player-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px;

    flex-wrap:wrap;

}

.player-title{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.player-title h3{

    font-size:22px;

    font-weight:700;

}

.player-title small{

    color:var(--muted);

    font-size:14px;

}


/*====================================================
 PLAYER ACTION
====================================================*/

.player-action{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


/*====================================================
BUTTON DARK TRANSPARENT
====================================================*/

.btn{

    background: rgba(22,27,34,.65);

    color:#fff;

    border:1px solid rgba(255,255,255,.12);

    border-radius:0px;

    padding:10px 16px;

    cursor:pointer;

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    transition:.25s;

}

.btn:hover{

    background:rgba(35,45,58,.85);

    border-color:rgba(255,255,255,.25);

}

.btn:active{

    transform:scale(.97);

}

.btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}


/*====================================================
 VIDEO.JS
====================================================*/

.video-js{

    width:100% !important;

    height:100% !important;

    background:#000;

    font-size:16px;

}

.video-js .vjs-control-bar{

    background:rgba(0,0,0,.65);

}

.video-js .vjs-big-play-button{

    border:none;

    border-radius:50%;

    background:rgba(35,131,255,.90);

}

.video-js:hover .vjs-big-play-button{

    background:var(--blue);

}

.video-js .vjs-loading-spinner{

    border-color:var(--blue);

}


/*====================================================
 PLAYER STATUS
====================================================*/

#streamStatus{

    color:var(--muted);

}

#streamTitle{

    word-break:break-word;

}

/*====================================================
 CHAT
====================================================*/

.chat-box{
    height:420px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:15px;
}

.chat-form{

    position:sticky;
    top:0;
    z-index:50;

    display:flex;
    gap:10px;

    margin:0 0 15px 0;
    padding:12px;

    background:var(--card);

    border-bottom:1px solid var(--border);

}

.chat-form input{

    flex:1;

    height:42px;

    padding:0 15px;

    background:#0b1016;

    color:#fff;

    border:1px solid var(--border);

    border-radius:10px;

}

.chat-form .btn{

    height:42px;

    padding:0 20px;

}

.chat-form input{

    flex:1;

    padding:12px 14px;

    color:var(--text);

    background:#0b1016;

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    outline:none;

    transition:var(--transition);

}

.chat-form input:focus{

    border-color:var(--blue);

}

.typing-status{

    min-height:22px;

    margin-top:8px;

    color:var(--muted);

    font-size:13px;

}

.chat-login-info{

    margin:12px 0;

    color:var(--muted);

}


/*====================================================
 CHANNEL
====================================================*/

.channel-area{

    display:flex;

    flex-direction:column;

}


.channel-header{

    margin-bottom:8px;

}


.channel-list{

    display:flex;

    flex-direction:column;

    gap:5px;

    max-height:500px;

    overflow-y:auto;

    padding-right:3px;

}


.channel-list button{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    padding:7px 10px;

    background:#151b22;

    border:1px solid #2f3742;

    color:#fff;

    font-size:13px;

    font-weight:500;

    text-align:left;

    border-radius:8px;

    transition:.2s;

    overflow:hidden;

}


.channel-list button:hover{

    background:#1f2937;

    border-color:#2383ff;

}


.channel-list button.active{

    background:#2383ff;

    border-color:#2383ff;

}


.channel-list button img{

    width:32px;

    height:32px;

    object-fit:contain;

    border-radius:6px;

    flex-shrink:0;

}


.channel-list button span{

    flex:1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


/*====================================================
 MOBILE CHANNEL
====================================================*/

@media(max-width:768px){

    .channel-list{

        max-height:400px;

        gap:4px;

    }


    .channel-list button{

        padding:6px 8px;

        font-size:12px;

        gap:8px;

    }


    .channel-list button img{

        width:30px;

        height:30px;

    }

}

/*====================================================
 STREAM INFORMATION
====================================================*/

.info-table{

    border-collapse:collapse;

}


.info-table tr{

    height:22px;

}


.info-table td{

    padding:2px 0;

    line-height:1;

    font-size:13px;

    vertical-align:middle;

    border-bottom:none;

}


.info-table td:first-child{

    color:var(--muted);

    width:150px;

}


.info-table tr:last-child td{

    border-bottom:none;

}

/*====================================================
 SERVER STATUS
====================================================*/

.server-grid{

    display:grid;

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

    gap:10px;

}


.server-item{

    padding:12px 8px;

    text-align:center;

    background:#10161d;

    border:1px solid var(--border);

    border-radius:12px;

    transition:.3s;

}


.server-item:hover{

    transform:translateY(-2px);

}


.server-item small{

    display:block;

    margin-bottom:4px;

    color:var(--muted);

    font-size:12px;

}


.server-item h3{

    margin:0;

    font-size:15px;

    font-weight:700;

}


/*====================================================
 MOBILE SERVER STATUS
====================================================*/

@media(max-width:768px){

    .server-grid{

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

        gap:6px;

    }


    .server-item{

        padding:10px 5px;

        border-radius:10px;

    }


    .server-item small{

        font-size:11px;

        margin-bottom:3px;

    }


    .server-item h3{

        font-size:13px;

    }

}


/*====================================================
 SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:8px;
    height:8px;

}


::-webkit-scrollbar-track{

    background:#111827;

}


::-webkit-scrollbar-thumb{

    background:#374151;

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:#22c55e;

}

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


/*====================================================
 DESKTOP LARGE
====================================================*/

@media (min-width:1400px){

    .container{

        width:1400px;

    }

}


/*====================================================
 TABLET
====================================================*/

@media (max-width:992px){

    .container{

        width:96%;

    }

    .header-title{

        font-size:20px;

    }

    .player-info{

        flex-direction:column;

        align-items:flex-start;

    }

    .player-action{

        width:100%;

    }

    .player-action .btn{

        flex:1;

    }

}


/*====================================================
 MOBILE
====================================================*/

@media (max-width:768px){

    .container{

        width:96%;

    }

    .header-inner{

        min-height:60px;

        gap:10px;

    }

    .header-logo{

        width:34px;

        height:34px;

    }

    .header-title{

        font-size:18px;

    }

    .header-right{

        gap:8px;

    }

    .viewer-card{

        padding:6px 10px;

        font-size:14px;

    }

    .player-section{

        padding:16px 0;

    }

    .content-area{

        gap:18px;

        padding:18px 0;

    }

    .card-body{

        padding:16px;

    }

    .section-title{

        font-size:18px;

    }

    .chat-box{

        min-height:280px;

        max-height:350px;

    }

    .chat-form{

        flex-direction:column;

    }

    .chat-form .btn{

        width:100%;

    }

    .channel-list{

        grid-template-columns:1fr;

    }

}


/*====================================================
 SMALL PHONE
====================================================*/

@media (max-width:480px){

    .container{

        width:95%;

    }

    .header-title{

        font-size:16px;

    }

    .viewer-card{

        font-size:13px;

    }

    .btn{

        width:100%;

        padding:10px 14px;

        font-size:14px;

    }

    .player-action{

        display:grid;

        grid-template-columns:1fr;

        width:100%;

    }

    .player-title h3{

        font-size:18px;

    }

    .section-title{

        font-size:17px;

    }

    .info-table td{

        display:block;

        width:100%;

        padding:8px 0;

    }

    .info-table td:first-child{

        font-weight:600;

    }

}


/*====================================================
 LANDSCAPE PHONE
====================================================*/

@media (orientation:landscape) and (max-height:600px){

    .player-section{

        padding:5px 0;

    }


    .player-card{

        border-radius:8px;

    }


    .player-wrapper{

        width:100%;
        aspect-ratio:16 / 9;

    }


    .chat-box{

        max-height:160px;

        overflow-y:auto;

    }


    .channel-area{

        margin-top:10px;

    }


    .info-card{

        margin-top:10px;

    }

}


/*====================================================
 ANDROID TV / SMART TV
====================================================*/

@media (min-width:1600px){

    body{

        font-size:18px;

    }

    .btn{

        min-height:48px;

        font-size:16px;

    }

    .header-title{

        font-size:26px;

    }

}


/*====================================================
 ACCESSIBILITY
====================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*====================================================
 FINAL
====================================================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}

.user-menu{

    position:relative;

}

.user-avatar{

    width:42px;

    height:42px;

    border-radius:0%;

    object-fit:cover;

    cursor:pointer;

    border:2px solid var(--border);

}

.user-dropdown{

    position:absolute;

    top:55px;

    right:0;

    min-width:220px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:12px;

    box-shadow:var(--shadow);

    display:none;

    overflow:hidden;

    z-index:999;

}

.user-dropdown.show{

    display:block;

}

.user-dropdown button{

    width:100%;

    padding:12px 16px;

    text-align:left;

    color:#fff;

    background:none;

    transition:var(--transition);

}

.user-dropdown button:hover{

    background:#2383ff;

}

.dropdown-name{

    padding:14px 16px 4px;

    font-weight:700;

}

.dropdown-role{

    padding:0 16px 14px;

    color:var(--muted);

    font-size:13px;

}

.user-dropdown hr{

    border:none;

    border-top:1px solid var(--border);

}

/*====================================================
 PLAYER ICON BUTTON
====================================================*/

.player-action{

    display:flex;

    gap:10px;

    align-items:center;

}

.icon-btn{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#1b2430;

    color:#fff;

    border:1px solid var(--border);

    border-radius:0%;

    font-size:17px;

    cursor:pointer;

    transition:all .25s ease;

}

.icon-btn:hover{

    background:var(--blue);

    transform:translateY(-2px);

    box-shadow:0 6px 15px rgba(35,131,255,.35);

}

.icon-btn:active{

    transform:scale(.95);

}

@media (max-width:768px){

    .player-action{

        justify-content:center;

        width:100%;

    }

    .icon-btn{

        width:38px;

        height:38px;

        font-size:15px;

    }

}

/*==============================
CHAT OVERLAY
==============================*/


.chat-overlay.show{

    opacity:1;

    transform:translateY(0);

}

.chat-overlay-avatar img{

    width:46px;

    height:46px;

    border-radius:0%;

    object-fit:cover;

    border:2px solid #fff;

}

.chat-overlay-name{

    font-size:14px;

    font-weight:700;

}

.chat-overlay-message{

    font-size:13px;

    color:#ddd;

    margin-top:2px;

}

#chatOverlay{

    position:absolute;

    left:15px;

    bottom:15px;

    width:330px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 12px;

    background:rgba(15,23,32,.90);

    border-radius:0px;

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

    z-index:9999;

    opacity:0;

    transform:translateY(30px);

    transition:.35s;

    pointer-events:none;

}

#chatOverlay.show{

    opacity:1;

    transform:translateY(0);

}

#chatOverlay img{

    width:46px;

    height:46px;

    border-radius:0%;

    object-fit:cover;

}

.chat-overlay-content{

    flex:1;

}

#chatOverlayName{

    font-weight:bold;

    color:#fff;

    font-size:14px;

}

#chatOverlayMessage{

    color:#ddd;

    font-size:13px;

    margin-top:3px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.chat-item{
    display:flex;
    gap:12px;
    padding:16px;
    border-bottom:1px solid #2b2b2b;
    align-items:flex-start;
}

.chat-item:last-child{
    border-bottom:none;
}

.chat-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.chat-content{
    flex:1;
}

.chat-name{
    font-weight:600;
    color:#fff;
    font-size:15px;
}

.chat-time{
    color:#888;
    font-size:12px;
    margin-left:8px;
}

.chat-message{
    margin-top:4px;
    color:#ddd;
    line-height:1.5;
    word-break:break-word;
}

/*==========================================
YOUTUBE COMMENT COLLAPSE
==========================================*/

.chat-toggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    user-select:none;
}

#commentArrow{
    font-size:18px;
    transition:.3s ease;
}

#commentContent{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.chat-card.open #commentContent{
    max-height:800px;
}

.chat-card.open #commentArrow{
    transform:rotate(180deg);
}

/* ==========================
   CHANNEL HEADER
========================== */

.channel-header{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .channel-header{

        display:block;

    }

    .channel-header .section-title{

        margin-bottom:10px;

    }

    .channel-list{

    max-height:300px;

}

    .channel-list::-webkit-scrollbar{

        display:none;

    }

    .overlay-channel-btn{

    background:#3a3a3a;
    color:#d6d6d6;
    border:1px solid #5a5a5a;

}

}

.player-card.chat-card{
    margin-left:-2%;
    margin-right:-2%;
    border-radius:0;
}

.player-card.chat-card .card-body{
    padding:12px 0;
}

.player-card.chat-card #chatForm{
    padding-left:10px;
    padding-right:10px;
}

.player-card.chat-card #typing,
.player-card.chat-card #chatLoginInfo{
    padding-left:10px;
    padding-right:10px;
}

.player-card.chat-card #chatBox{
    padding-left:10px;
    padding-right:10px;
}

.auth-box{
    width:380px;
    max-width:92%;
    margin:40px auto;
    padding:30px;
    border-radius:15px;
	
}

.logo{
    width:90px;
    display:block;
    margin:0 auto 15px;
}

.subtitle{
    text-align:center;
    color:#999;
    margin-bottom:25px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
}

.form-group input{
    width:100%;
    padding:12px 14px;
    border-radius:8px;
    box-sizing:border-box;
}

button{
    width:100%;
    padding:14px;
    font-size:16px;
    margin-top:10px;
}

.login-link{
    text-align:center;
    margin-top:18px;
}

.auth-box{
    overflow: visible;
}

.auth-box button{
    display:block;
    width:100%;
    margin-top:20px;
    padding:12px;
    background:#00c853;
    color:#fff;
    border:none;
    border-radius:8px;
}

body{
    overflow-y:auto;
}


/*====================================================
 CHANNEL 4 BARIS + SCROLL
====================================================*/

.channel-list,
#channelList{

    display:grid !important;

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

    gap:8px;

    width:100%;

    max-height:190px; /* tinggi 4 baris */

    overflow-y:auto;

    overflow-x:hidden;

    padding:8px;

}


/* tombol channel */

.channel-list button,
#channelList button{

    width:100% !important;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:#151b22;

    color:#fff;

    border:1px solid #30363d;

    border-radius:8px;

    font-size:13px;

}



/* channel aktif */

.channel-list button.active,
#channelList button.active{

    background:#2383ff;

    border-color:#2383ff;

}


/* scrollbar */

.channel-list::-webkit-scrollbar,
#channelList::-webkit-scrollbar{

    width:6px;

}


.channel-list::-webkit-scrollbar-thumb,
#channelList::-webkit-scrollbar-thumb{

    background:#2383ff;

    border-radius:10px;

}

.overlay-channel-btn {
    width: 75px;
    height: 75px;
}

.channel-logo {
    width: 55px;
    height: 55px;
}

/*====================================================
 MOBILE STREAM INFORMATION
====================================================*/

@media(max-width:768px){

    .info-card{

        width:100%;

    }


    .info-table{

        width:90%;

        margin:0 auto;

        border-collapse:collapse;

    }


    .info-table tr{

        display:table-row;

    }


    .info-table td{

        display:table-cell;

        padding:3px 5px;

        font-size:13px;

        line-height:1.1;

    }


    .info-table td:first-child{

        width:140px;

        white-space:nowrap;

        text-align:left;

    }


    .info-table td:last-child{

        text-align:left;

    }

}

/*====================================================
 MOBILE PLAYER INFO RAPAT
====================================================*/

@media(max-width:768px){

    .player-info{

        padding:6px 10px;

    }


    .player-title h3{

        margin:0;

        font-size:16px;

        line-height:1.2;

    }


    .player-title small{

        display:block;

        margin-top:2px;

        font-size:12px;

        line-height:1.2;

    }


    .player-card{

        margin-bottom:8px;

    }

}

/*====================================================
 RAPATKAN JARAK PLAYER KE KOMENTAR MOBILE
====================================================*/

@media(max-width:768px){

    .player-section{

        padding-bottom:5px !important;

    }


    .player-card{

        margin-bottom:5px !important;

    }


    .player-info{

        padding-top:5px !important;

        padding-bottom:3px !important;

    }


    .player-action{

        margin-top:3px !important;

        margin-bottom:0 !important;

        padding-bottom:3px !important;

        gap:5px !important;

    }


    .chat-card{

        margin-top:0 !important;

    }


}


@media(max-width:768px){

    main.content-area{
        padding:0 !important;
        margin:0 !important;
    }


    .chat-card{
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }


    .channel-area{
        margin-top:0 !important;
        padding-top:0 !important;
    }


    .channel-header{
        margin-top:0 !important;
        margin-bottom:0 !important;
    }


    #commentContent{
        margin:0 !important;
    }

}

/*====================================================
 FOOTER COPYRIGHT
====================================================*/

.site-footer{

    margin-top:20px;

    padding:15px 0;

    text-align:center;

    background:#0d1117;

    border-top:1px solid var(--border);

    color:var(--muted);

    font-size:13px;

}


.site-footer p{

    margin:3px 0;

}


.site-footer b{

    color:#22c55e;

}


.footer-sub{

    font-size:12px;

    opacity:.8;

}


/* MOBILE */

@media(max-width:768px){

    .site-footer{

        margin-top:10px;

        padding:12px 0;

        font-size:12px;

    }

}

/*====================================================
 HEADER BRAND SUBTITLE
====================================================*/

.header-brand{

    display:flex;

    flex-direction:column;

    line-height:1;

}


.header-title{

    font-size:18px;

    font-weight:800;

}


.header-subtitle{

    margin-top:4px;

    font-size:11px;

    color:#9ca3af;

    letter-spacing:1px;

    font-weight:500;

}


/* MOBILE */

@media(max-width:768px){

    .header-title{

        font-size:16px;

    }


    .header-subtitle{

        font-size:10px;

        margin-top:3px;

    }

}