/* series overciew */
.info-flex{display:flex;gap:25px}
.info-poster{width:163px;min-width:163px}
.info-poster img{
width:100%;
height:100%;
object-fit:cover;
border-radius:8px;
display:block;
}

@media(max-width:768px){

.info-poster{
width:100%;
min-width:100%;
}

.info-poster img{
aspect-ratio:16/9;
}

}

.info-content{flex:1}
.info-title{font-size:30px;font-weight:700;line-height:1.1;margin-bottom:10px;color:#fff}
.info-overview{color:#cbd5e1;font-size:14px;line-height:1.5;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.info-meta{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:18px}
.badge_meta_1 {
    background: #ff2e66;
    padding: 4px 15px 4px;
    font-size: 11px;
    color: #fff;
    border-radius: 5px;
}
.badge_meta_2 {
    background: #8e35ff;
    padding: 4px 15px 4px;
    font-size: 11px;
    color: #fff;
    border-radius: 5px;
}
.badge_meta_3 {
    background: #00bcd4;
    padding: 4px 15px 4px;
    font-size: 11px;
    color: #fff;
    border-radius: 5px;
}
.badge_meta_4 {
    background: #ff8a22;
    padding: 4px 15px 4px;
    font-size: 11px;
    color: #fff;
    border-radius: 5px;
}
.info-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.07);padding-top:18px}
.info-left{display:flex;align-items:center;gap:10px}
.info-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.info-vote {
    color: #ffffff;
    font-size: 18px;
    margin-right: 8px;
}
.badge_genres {
    background: #0f172a;
    color: #cbd5e1;
    padding: 3px 15px 4px;
    font-size: 12px;
    border-radius: 7px;
}
.tmdb-score{
position:relative;
width:54px;
height:54px;
background:#081c22;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center
}

.tmdb-score svg{
position:absolute;
transform:rotate(-90deg)
}

.tmdb-score-text{
position:relative;
z-index:2;
color:#fff;
font-size:18px;
font-weight:700
}

.tmdb-score-text span{
font-size:8px;
position:relative;
top:-5px
}

@media(max-width:768px){

.info-flex{
    flex-direction:column;
}

.info-title{
    font-size:28px;
}

.info-bottom{
    flex-direction:column;
    align-items:flex-start;
}

.info-right{
    width:100%;
}

}
/* ennd series overciew */

/* Mode View Series Sidebar */
.iq-sidebar-v2 {
    padding: 20px;
}

i#layoutIcon {
    font-size: 20px;
}

/* Row 1: Header Area */
.season-title {
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.btn-layout-toggle {
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-layout-toggle:hover {
    opacity: 0.7;
    color: #ff1267;
}

/* Row 2: Sub-Header Area */
.all-ep-info {
    font-size: 16px;
    color: #e2e8f0;
    font-weight: 400;
}

.trailer-link-btn {
    font-size: 12px;
    color: #ffffff;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    background: #ff246f;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 100px;
}

.trailer-link-btn:hover {
    color: #ffffff;
    background: #696cff;
}
/* ========================================================
   MODE A: GRID VIEW MODE (SISTEM KOTAK KUNCI 6 KOLOM) 
   [TIDAK DIUTAK-ATIK SAMA SEKALI - DIKUNCI AMAN]
   ======================================================== */
.iq-content-view.mode-grid-six,
.iq-content-view.mode-grid-six * {
    box-sizing: border-box !important;
}

.iq-content-view.mode-grid-six {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sembunyikan detail list saat mode grid aktif */
.mode-grid-six .list-card-layout {
    display: none !important; 
}

.mode-grid-six .iq-box {
    position: relative !important;
    background-color: #131926 !important; /* Hitam kebiruan serasi kontainer */
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;

    /* Kunci matematika 6 kolom anti tembus batas */
    width: calc((100% - 60px) / 6) !important; 
    max-width: calc((100% - 60px) / 6) !important;
    aspect-ratio: 1.3 / 1 !important; 
}

.mode-grid-six .iq-box .grid-number {
    display: block !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.mode-grid-six .iq-box:hover {
    background-color: #00bcd4!important;
}

/* Kotak Sedang Aktif */
.mode-grid-six .iq-box.active {
    background-color: #ff246f !important; 
}

/* --- ANIMASI EQUALIZER LBIH CEPAT & GESIT --- */
.iq-equalizer {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    width: 25px !important;
    height: 20px !important;
    margin-bottom: 3px;
}

.iq-equalizer .eq-bar {
    width: 3px !important;
    height: 100% !important;
    background-color: #fff !important;
    border-radius: 2px !important;
    transform-origin: bottom !important;
    /* Dipercepat ke 0.6 detik agar gerakan naik turun lebih intens */
    animation: soundWave 0.6s ease-in-out infinite alternate !important; 
}

/* Jeda delay antar bar juga dirapatkan agar wave-nya lebih rapat dan lincah */
.iq-equalizer .eq-bar:nth-child(1) { animation-delay: 0.05s !important; }
.iq-equalizer .eq-bar:nth-child(2) { animation-delay: 0.2s !important; }
.iq-equalizer .eq-bar:nth-child(3) { animation-delay: 0.1s !important; }
.iq-equalizer .eq-bar:nth-child(4) { animation-delay: 0.25s !important; }

@keyframes soundWave {
    0% { transform: scaleY(0.15); }
    100% { transform: scaleY(1.0); }
}

/* Bar Pink Horizontal Bawah (Efek Muncul Instan) */
.mode-grid-six .iq-box.active .iq-active-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: 0 0 6px 6px !important;
    transform-origin: center !important;
    animation: iqLineSlide 0.12s ease-out forwards !important; 
}

@keyframes iqLineSlide {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* Bar Pink Horizontal Bawah */
.mode-grid-six .iq-box.active .iq-active-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: 0 0 6px 6px !important;
    transform-origin: center !important;
    animation: iqLineSlide 0.25s ease-out forwards !important;
}

@keyframes iqLineSlide {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}


/* ========================================================
   MODE B: LIST VIEW MODE (FIXED 5 ITEMS WRAPPER)
   ======================================================== */
.iq-content-view.mode-list-full {
    display: block !important; 
    width: 100% !important;
}

/* Sembunyikan semua elemen box grid bawaan saat mode list aktif */
.mode-list-full .grid-only-item,
.mode-list-full .grid-number,
.mode-list-full .iq-equalizer,
.mode-list-full .iq-active-bar {
    display: none !important; 
}

/* Container Pembungkus Khusus List (DITAMBAHKAN SCROLL & TAMPILAN AWAL 4 ITEM) */
.mode-list-full .list-mode-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    /* --- TAMBAHAN SCROLLBOX EMAS --- */
    max-height: 560px !important;   /* Membatasi tinggi kontainer pas untuk 4 item */
    overflow-y: auto !important;    /* Aktifkan scrollbar vertikal */
    overflow-x: hidden !important;  /* Cegah scroll horizontal */
    padding-right: 6px !important;  /* Jarak halus di kanan untuk scrollbar */
    scroll-behavior: smooth !important;
}

/* Kustomisasi Tampilan Batang Scrollbar Tipis Minimalis */
.mode-list-full .list-mode-wrapper::-webkit-scrollbar {
    width: 6px !important;
}
.mode-list-full .list-mode-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 10px !important;
}
.mode-list-full .list-mode-wrapper::-webkit-scrollbar-thumb {
    background: #ff1267 !important; 
    border-radius: 10px !important;
}
.mode-list-full .list-mode-wrapper::-webkit-scrollbar-thumb:hover {
    background: #00e676!important; 
}

.mode-list-full .list-only-item {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

/* Container Utama List Card */
.list-card-layout {
    display: flex !important;
    flex-direction: row !important;
    background-color: #0f1424 !important; 
    border-radius: 14px !important; 
    padding: 12px !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    /* Polos tanpa border saat keadaan normal */
    border: 1px solid transparent !important; 
    height: auto !important;
    overflow: visible !important;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

/* Hover effect pada item list */
.mode-list-full .list-only-item:hover .list-card-layout {
    background-color: #13192d !important;
    border: 1px solid #00bcd4 !important; 
}

/* Ketika Aktif: Latar tetap terang normal, hanya muncul Border Pink Neon */
.mode-list-full .list-only-item.active .list-card-layout {
    background-color: #0f1424 !important; 
    border: 1px solid #ff1267 !important; 
    box-shadow: 0 4px 20px rgba(255, 18, 103, 0.15) !important; 
}

/* Sisi Kiri: Thumbnail/Poster Film */
.list-right-thumb {
    width: 75px !important;
    height: 105px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
}

.list-right-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Overlay Transparan di atas poster saat aktif */
.list-playing-mark {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Wadah Struktur Batang Equalizer di List */
.list-eq-pure {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    width: 25px !important;
    height: 20px !important;
}

/* Batang/Bar Equalizer List Berwarna Putih Murni */
.list-eq-pure .eq-bar-l {
    width: 3px !important;
    height: 100% !important;
    background-color: #ffffff !important; 
    border-radius: 2px !important;
    transform-origin: bottom !important;
    animation: soundWaveList 0.6s ease-in-out infinite alternate !important; 
}

.list-eq-pure .eq-bar-l:nth-child(1) { animation-delay: 0.05s !important; }
.list-eq-pure .eq-bar-l:nth-child(2) { animation-delay: 0.2s !important; }
.list-eq-pure .eq-bar-l:nth-child(3) { animation-delay: 0.1s !important; }
.list-eq-pure .eq-bar-l:nth-child(4) { animation-delay: 0.25s !important; }

@keyframes soundWaveList {
    0% { transform: scaleY(0.2); }
    100% { transform: scaleY(1.0); }
}

/* Sisi Kanan: Area Detail Data Dokumen */
.list-left-details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 105px !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Judul Utama Pink */
.list-ep-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important; 
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Deskripsi / Sinopsis */
.list-ep-desc {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin: 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.5 !important;
}

/* Area Footer (Metadata + Rating Lingkaran Hijau) */
.list-ep-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
}

.list-ep-meta .badge-item {
    background: transparent !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important; 
}

.list-ep-meta .badge-item:nth-child(1) {
    color: #eab308 !important; 
}

.list-ep-meta .badge-item:nth-child(2)::before {
    content: "• " !important;
    color: #475569 !important;
    margin-right: 4px !important;
}

.list-ep-meta .badge-item.rating-color {
    background: transparent !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid #00e676 !important; 
    color: #ffffff !important; 
    font-size: 10px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

/* ========================================================
   RESPONSIVE LAYOUT MEDIA QUERIES (SEMUA PERANGKAT)
   ======================================================== */
@media (max-width: 768px) {
    .mode-grid-six .iq-box {
        width: calc((100% - 48px) / 5) !important;
        max-width: calc((100% - 48px) / 5) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .mode-grid-six .iq-box {
        width: calc((100% - 36px) / 4) !important;
        max-width: calc((100% - 36px) / 4) !important;
        aspect-ratio: 1.2 / 1 !important;
    }
    .mode-grid-six .iq-box .grid-number {
        font-size: 16px !important;
    }
    .iq-equalizer {
        width: 18px !important;
        height: 14px !important;
    }
    .list-card-layout {
        padding: 8px !important;
        gap: 12px !important;
    }
    .list-right-thumb {
        width: 60px !important;
        height: 85px !important;
    }
    .list-left-details {
        height: 85px !important;
    }
    .list-ep-title {
        font-size: 14px !important;
    }
    .list-ep-desc {
        display: none !important; /* Di HP disembunyikan agar pas */
    }
}  
/* END Mode View Series Sidebar */


/* Artplayer */
@font-face {
        font-family: custom;
        src: url(/assets/custom-font/made_tommy_medium.otf);
    }

    .art-subtitle {
        font-family: custom !important;
        text-transform: capitalize !important;
        font-size: 20px !important;
        letter-spacing: 1px;
        bottom: 13% !important;
    }

    #player {
        width: 100%;
        height: min(70vh, 720px) !important;
        min-height: 463px;
        background: #1e293b;
    }

    #player .art-video-player,
    #player video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    #player .art-state {
        display: block;
        cursor: pointer;
    }

    #player .art-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-top: 5px solid #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 10;
    }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .episode-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 15px 0;
    }

    .episode-btn {
        padding: 10px 20px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        transition: 0.2s;
    }

    .episode-active {
        background: #ff1267;
        color: #fff !important;
    }

    .episode-normal {
        background: #1e293b;
        color: #9ca3af !important;
    }

    .episode-normal:hover {
        background: #334155;
        color: #fff !important;
    }
/* End Artplayer */