/* Desktop dan Laptop */
@media (width: 2560px) {
    .card-A .card-body,
    .video-container,
    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        all: unset; /* Reset semua gaya */
    }
    .card-A .card-body {
        height: 680px !important;
    }
    .video-container {
        position: relative;
        height: auto;
        overflow: hidden;
        width: 100%;
        background-color: rgb(0, 0, 0);
    }
    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 680px !important;
    }
}

@media (min-width: 1920px) {
    /*.area-banner {*/
    /*    margin: 0px 32px 0px 32px;*/
    /*}*/

    .page-1 {
        padding: 0px 128px 0px;
    }

    .header-streaming img {
        width: 180px;
        height: auto;
        max-width: 30%;
        z-index: 2;
    }

    .area-streaming {
        height: auto;
        /* border: 1px red solid; */
        padding-top: 50px;
        /* margin-bottom: 40px; */
    }

    .content-streaming {
        flex-direction: row;
        height: auto;
        /* border: 1px green solid; */
        margin-bottom: 30px;
    }

    .contentS-kiri {
        width: 55%;
        margin-right: 8px;
        height: fit-content;
    }

    .contentS-kanan {
        width: 45%;
    }

    .card-A .card-header .author {
        width: 65%;
        height: 50px;
    }

    .card-A .card-header .author::before {
        width: 35%;
        height: 50px;
    }

    .card-A .card-header .view {
        height: 40px;
        width: 28%;
    }

    .card-A .card-body {
        height: 501px;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }

    .btn-play-streaming {
        width: 85px;
        height: 85px;
    }

    .btn-play-streaming span {
        font-size: 3rem;
    }

    .card-B .card-body-B {
        height: auto;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }
    .card-B .view-B {
        height: 40px;
        width: 28%;
        margin-top: 10px;
    }

    .video-container {
        position: relative;
        /* padding-bottom: 50.25%; */
        height: auto;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 501px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .text-watchS {
        font-size: 18px;
    }

    .text-watchS-B {
        font-size: 18px;
    }

    .title-streaming {
        font-size: 4rem;
    }

    .title-nextP {
        font-size: 2.6rem;
    }

    .area-nextP {
        height: 55%;
    }

    /* livechat */
    .cardOuter {
        width: auto;
        height: 389px;
        background-color: #333333;
        padding: 15px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 343px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        background-color: #ffb200;
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 14px;
        margin: 0px;
        font-weight: 700;
        /* color: #ffffff; */
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 42px;
        resize: none;
        overflow: hidden;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 14px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301;
        color: #333333; */
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 30px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 42px;
        width: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .btn-submit-icon:hover {
        background-color: #e7b603;
    } */

    .nameSet {
        color: #333333;
        font-size: 14px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 8px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 8px;
        left: -9px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .btn-google {
    width: fit-content;
    height: 42px;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: white;
    /* margin-top: 10px; */
    border-radius: 20px;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        /* color: white; */
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 12px 16px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 14px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 45px;
        padding: 0px 34px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 18px;
        border-radius: 12px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        height: 350px;
    } */

    /* area-program */
    .area-content-program {
        margin: 10px 128px 0px 128px;
    }

    .title-program {
        font-size: 46px;
    }

    .area-content-program {
        padding-bottom: 30px;
    }

    .area-content-box-program {
        gap: 15px;
        /* border: 1px red solid; */
    }

    .box-program {
        flex: 0 0 calc(25% - 15px);
        height: 400px;
        border: 20px;
    }

    .tombol-kiri,
    .tombol-kanan {
        width: 100px;
        height: 100px;
        display: none;
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(150%);
        -webkit-transform: translateY(150%);
        -moz-transform: translateY(150%);
        -ms-transform: translateY(150%);
        -o-transform: translateY(150%);
    }

    .tombol-kiri {
        left: -35;
        z-index: 99;
    }

    .tombol-kanan {
        right: -35;
        z-index: 99;
    }

    /* pop up program */
    
    .popup-content {
        width: 850px;
        height: fit-content;
        padding: 50px;
    }

    .desk-program {
        font-size: 22px;
    }

    .jam-program {
        font-size: 24px;
    }

    .title-box-program {
        font-size: 38px;
    }

    .link-program {
        font-size: 20px;
    }

    /* -------------- */
    /* -------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 128px;
    }

    .line-info {
        margin-top: 50px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 30%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 46px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 100px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 28px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 22px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 26px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 46px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 22px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 26px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: calc(33.33% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 40%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 24px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 18px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 18px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 46px;
        font-weight: 200;
        /* color: white; */
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 24px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 24px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 18px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 70%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 46px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(33.33% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 24px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 24px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 18px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 128px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

    .area-content-groupE {
        height: auto;
        display: flex;
        /* flex-direction: column; */
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        height: 50px;
        padding: 25px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }

    .content-event-CD{
        height: 458px;
    }

    .area-content-event-kanan {
        width: 100%;
    }

    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 458px;
    }

    .title-event {
        font-size: 46px;
    }

    .timer {
        font-size: 34px;
    }

    .title-timer {
        font-size: 24px;
    }

    .date-month,
    .year {
        font-size: 36px;
    }

    .date-month-right,
    .year-right {
        font-size: 32px;
    }

    /* pop up event */
    .popup-content-event {
        width: 850px;
        height: fit-content;
        padding: 50px;
    }

    .desk-event {
        font-size: 22px;
    }

    .jam-event {
        font-size: 24px;
    }

    .title-box-event {
        font-size: 38px;
    }

    .link-event {
        font-size: 18px;
    }
    /* -------------- */
    /* ---------- */

    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 128px 0px 128px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 46px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 22px;
    }
    .text-podcast i{
        font-size: 28px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(25% - 15px);
        height: fit-content;
    }

    .card-podcast .card-body-podcast {
        /* height: 60%; */
        padding: 0px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width:100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 24px;
    }

    .card-image-podcast {
        height: fit-content;
    }

    .title-genre {
        font-size: 14px;
        margin: 0px 0px;
    }
    /* ------------------ */

    /* area-video */

    .page-youtube{
        margin: 0px 128px 0px 128px;
    }

    .area-content-video {
        width: 100%;
    }

    .title-video {
        font-size: 46px;
    }

    .box-video {
        height: 330px;
    }

    .btn-play-video {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 28px;
    }

    .text-video {
        font-size: 22px;
    }

    .popup-content-yt {
        width: 1280px; /* Disesuaikan agar proporsional */
        height: 720px; /* Rasio 16:9 */
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .area-image-announcer{
        height: 370px;
    }

    .title-announcer {
        font-size: 46px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 128px;
        /* border: 1px red solid; */
    }

    .box-announcer {
        flex: 0 0 calc(20% - 16px);
        height: fit-content;
    }

    .line-announcer {
        margin: 20px 32px;
    }

    .popup-content-announcer {
        width: 850px;
        height: 400px;
    }

    .title-name-announcer {
        font-size: 16px;
    }

    .name-announcer {
        font-size: 18px;
    }

    .title-sosmed {
        font-size: 16px;
    }

    .area-profile-announcer i {
        font-size: 24px;
    }

    .title-bio {
        font-size: 16px;
    }

    .bio-announcer {
        font-size: 14px;
    }

    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 128px 0px 128px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        gap: 40px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        gap: 20px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 50px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 24px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 46px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }

    thead tr {
        font-size: 32px;
    }

    tbody tr {
        font-size: 28px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 22px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
    }
    .area-schedule {
        width: auto;
        height: auto;
        margin: 20px 128px;
    }

    .area-content-schedule {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 46px;
        margin-bottom: 10px;
    }

    .top-content-schedule {
        width: 100%;
        height: auto;
    }

    .schedule {
        width: 120px;
        height: 60px;
        margin-top: 8px;
        font-size: 16px;
    }

    .schedule-day {
        font-size: 22px;
    }

    .content-schedule {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-top: 20px;
        height: fit-content;
        margin-bottom: 20px;
    }

    .box-schedule {
        height: fit-content;
    }

    .nama-programS {
        font-size: 28px;
    }

    .jam-programs {
        font-size: 26px;
    }

    /* ---------------- */
}

@media (min-width: 1440px) and (max-width: 1919px) {

    .box-program {
        flex: 0 0 calc(25% - 15px);
        height: 308px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }

    .content-event-CD{
        height: 350px;
    }

    .area-content-event-kanan {
        width: 100%;
    }

    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 350px;
    }

    .title-event {
        font-size: 46px;
    }

    .timer {
        font-size: 30px;
    }

    .title-timer {
        font-size: 20px;
    }

    .date-month,
    .year {
        font-size: 30px;
    }

    .date-month-right,
    .year-right {
        font-size: 26px;
    }

    /* .box-announcer{
        height: 286px;
    } */
}

@media (max-width: 1366px) {

    .header-streaming img {
        width: 150px;
        height: auto;
        max-width: 30%;
        z-index: 2;
    }


    .card-A .card-body {
        height: 354px;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }

    .video-container {
        position: relative;
        /* padding-bottom: 52.25%; */
        height: auto;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 354px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }
}

@media (max-width: 1280px) {

    .header-streaming img {
        width: 145px;
        height: auto;
        max-width: 25%;
        z-index: 2;
    }

    .card-A .card-body {
        height: 350px;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }

    .video-container {
        position: relative;
        /* padding-bottom: 52.25%; */
        height: auto;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 350px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    /*.area-banner {*/
    /*    margin: 0px 32px 0px 32px;*/
    /*}*/

    .page-1 {
        padding: 0px 32px 0px;
    }

    .header-streaming img {
        width: 120px;
        height: auto;
        max-width: 20%;
        z-index: 2;
    }

    .area-streaming {
        height: fit-content;
        /* border: 1px red solid; */
        padding-top: 30px;
        /* margin-bottom: 30px; */
    }

    .content-streaming {
        flex-direction: row;
        height: auto;
        /* border: 1px green solid; */
    }

    .contentS-kiri {
        width: 55%;
        margin-right: 8px;
        height: auto;
    }

    .contentS-kanan {
        width: 45%;
    }

    /* .card-A .card-body {
        height: 200px;
        padding: 25px;
    } */

    .card-A .card-header .author {
        width: 65%;
        height: 50px;
    }

    .card-A .card-header .author::before {
        width: 35%;
        height: 50px;
    }

    .card-A .card-header .view {
        height: 20px;
        width: 28%;
    }

    .card-A .card-body {
        height: 283px;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }

    .btn-play-streaming {
        width: 60px;
        height: 60px;
    }

    .card-B .card-body-B {
        height: auto;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }
    .card-B .view-B {
        height: 20px;
        width: fit-content;
        /* margin-top: 0px; */
    }

    .video-container {
        position: relative;
        /* padding-bottom: 47.15%; */
        height: auto;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 280px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .text-watchS {
        font-size: 14px;
    }

    .text-watchS-B {
        font-size: 14px;
    }

    .title-streaming {
        font-size: 2rem;
    }



    .title-nextP {
        font-size: 1.6rem;
    }

    .next-program-name{
        margin: 0px;
        font-family: "Poppins";
        /* color: white; */
        font-weight: 500;
        font-size: 14px;
    }
    .next-program-time{
        margin: 0px;
        font-family: "Poppins";
        /* color: white; */
        font-weight: 500;
        font-size: 14px;
    }

    .area-nextP {
        height: auto;

    }

    /* livechat */
    .cardOuter {
        width: auto;
        height: 204px;
        background-color: #333333;
        padding: 15px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 168px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        background-color: #ffb200;
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 10px;
        margin: 0px;
        font-weight: 700;
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 32px;
        resize: none;
        overflow: hidden;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 12px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301;
        color: #333333; */
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 32px;
        width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-submit-icon:hover {
        background-color: #e7b603;
    }

    .nameSet {
        color: #333333;
        font-size: 8px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 8px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 8px;
        left: -9px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .google-logo {
        width: 18px;
        height: 18px;
    }

    .btn-google {
        width: fit-content;
        height: 32px;
        padding: 0px 8px;
        text-align: center;
        background-color: white;
        /* margin-top: 10px; */
        /* border-radius: 50%; */
        transition: all 0.5s ease-in-out;
        cursor: pointer;
    }

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 10px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 38px;
        padding: 0px 20px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 14px;
        border-radius: 12px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        width: 186px;
        height: 180px;
    } */

    /* area-program */
    .page-2 {
        height: fit-content;
    }

    .area-content-program {
        margin: 10px 32px 0px 32px;
    }

    .title-program {
        font-size: 32px;
    }

    .area-content-box-program {
        gap: 15px;
        /* border: 1px red solid; */
    }

    .box-program {
        flex: 0 0 calc(25% - 15px);
        height: 218px;
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(180%);
    }

    /* pop up program */

    .popup-content {
        width: 450px;
        height: fit-content;
        padding: 25px;
    }

    .desk-program {
        font-size: 16px;
    }

    .jam-program {
        font-size: 14px;
    }

    .title-box-program {
        font-size: 28px;
    }

    .link-program {
        font-size: 18px;
    }

    /* -------------- */
    /* -------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 30px;
    }

    .line-info {
        margin-top: 50px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 30%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 22px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 14px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 20px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 32px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 16px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 22px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 10px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: calc(33.33% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 50%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 32px;
        font-weight: 200;
        /* color: white; */
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 14px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 12px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 70%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(33.33% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 12px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 32px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

     .area-content-groupE {
        height: auto;
        display: flex;
        /* flex-direction: column; */
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        height: 50px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }

    .content-event-CD{
        height: 260px;
    }

    .area-content-event-kanan {
        width: 100%;
    }

    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 260px;
    }

    .title-event {
        font-size: 32px;
    }

    .timer {
        font-size: 24px;
    }

    .title-timer {
        font-size: 14px;
    }

    .date-month,
    .year {
        font-size: 20px;
    }

    .date-month-right,
    .year-right {
        font-size: 18px;
    }

    /* pop up event */
    .popup-content-event {
        width: 450px;
        height: fit-content;
        padding: 25px;
    }

    .desk-event {
        font-size: 16px;
    }

    .jam-event {
        font-size: 14px;
    }

    .title-box-event {
        font-size: 28px;
    }

    .link-event {
        font-size: 16px;
    }
    /* -------------- */
    /* ---------- */

    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 32px 0px 32px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 32px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 16px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(25% - 15px);
        height: fit-content;
    }

    .card-podcast .card-body-podcast {
        /* height: 60%; */
        padding: 0px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width: 100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 14px;
    }

    .card-image-podcast {
        height: fit-content;
    }

    .title-genre {
        font-size: 12px;
        /* margin: 4px 20px; */
    }
    /* ------------------ */

    /* area-video */

    .page-youtube{
        margin: 0px 32px 0px 32px;
    }

    .area-content-video {
        width: 100%;
    }

    .title-video {
        font-size: 32px;
    }

    .box-video {
        height: 180px;
    }

    .btn-play-video {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 28px;
    }

    .text-video {
        font-size: 16px;
    }

    .popup-content-yt {
        width: 560px;
        height: 315px;
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .title-announcer {
        font-size: 32px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 32px;
        /* border: 1px red solid; */
    }

    .area-image-announcer{
        height: 248px;
    }

    .box-announcer {
        flex: 0 0 calc(25% - 15px);
        /* height: 280px; */
    }

    .name-announcer-slide{
        font-size: 16px;
    }

    .line-announcer {
        margin: 20px 32px;
    }

    .popup-content-announcer {
        width: 460px;
        height: 220px;
    }

    .title-name-announcer {
        font-size: 16px;
    }

    .name-announcer {
        font-size: 18px;
    }

    .title-sosmed {
        font-size: 16px;
    }

    .area-profile-announcer i {
        font-size: 24px;
    }

    .title-bio {
        font-size: 16px;
    }

    .bio-announcer {
        font-size: 14px;
    }

    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 32px 0px 32px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        gap: 20px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        gap: 20px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 40px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 20px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 32px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }
    

    .col-no{
        font-size: 14px;
    }

    .col-name{
        font-size: 14px;
    }

    .btn-play-chart span {
        font-size: 26px;
    }


    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 16px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
    }
    .area-schedule {
        width: auto;
        height: auto;
        margin: 15px 32px;
    }

    .area-content-schedule {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .top-content-schedule {
        width: 100%;
        height: 50px;
    }

    .schedule {
        width: 120px;
        height: auto;
        margin-top: 8px;
        font-size: 16px;
    }

    .schedule-day {
        font-size: 16px;
    }

    .content-schedule {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 10px;
    }

    .box-schedule {
        height: fit-content;
    }
    /* ---------------- */
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    /*.area-banner {*/
    /*    margin: 0px 20px 0px 20px;*/
    /*    height: 200px;*/
    /*}*/

    .page-1 {
        padding: 0px 20px 0px;
    }

    .header-streaming img {
        width: 150px;
        height: auto;
        max-width: 20%;
        z-index: 2;
    }

    .area-streaming {
        height: auto;
    }

    .content-streaming {
        flex-direction: column;
        height: auto;
    }

    .contentS-kiri {
        width: 100%;
        margin: 0px 0px 20px 0px;
    }

    .contentS-kanan {
        width: 50%;
        margin: 0px 0px 20px 0px;
    }

    .card-A .card-body {
        height: 397px;
        /* padding: 20px; */
    }

    .card-A .card-header .author {
        height: 50px;
        /* border: 1px green solid; */
        width: 68%;
    }

    .card-A .card-header .author::before {
        height: 50px;
        /* border: 1px red solid; */
        width: 32%;
    }

    .btn-play-streaming {
        width: 60px;
        height: 60px;
    }
    
        .card-A .card-header .view{
        width: 20%;
    }

    .text-watchS i{
        font-size: 20px;
    }

    .card-B .card-body-B {
        height: 100%;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }

    .card-B .view-B {
        height: 20px;
        width: fit-content;
        /* margin-top: 0px; */
    }
    
    .text-watchS-B{
        padding: 1px 10px;
        gap: 4px;
    }

    .text-watchS-B i{
            font-size: 20px;
        }

    .video-container {
        position: relative;
        /* padding-bottom: 47.6%; */
        height: auto;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 329px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .card-B-show {
        width: 100%;
        height: auto;
    }

    .title-streaming {
        font-size: 2.5rem;
    }

    .title-nextP {
        font-size: 1.8rem;
    }

    .contentS-kanan{
        width: 100%;
    }

    .area-nextP {
        width: 55%;
    }

    /* livechat */
    .cardOuter {
        width: 374px;
        height: 200px;
        background-color: #333333;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 186px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        background-color: #ffb200;
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 8px;
        margin: 0px;
        font-weight: 700;
        /* color: #ffffff; */
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 30px;
        resize: none;
        overflow: hidden;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 10px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301;
        color: #333333; */
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .btn-submit-icon:hover {
        background-color: #e7b603;
    } */

    .nameSet {
        color: #333333;
        font-size: 8px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 4px;
        left: -8px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .google-logo {
        width: 16px;
        height: 16px;
    }

    .btn-google {
        width: fit-content;
        height: 30px;
        padding: 0px 8px;
        text-align: center;
        background-color: white;
        /* margin-top: 10px; */
        /* border-radius: 50%; */
        transition: all 0.5s ease-in-out;
        cursor: pointer;
    }

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 10px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 28px;
        padding: 0px 14px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 12px;
        border-radius: 8px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        width: 206px;
        height: 200px;
    } */

    /* area-program */
    .page-2 {
        height: fit-content;
    }

    .title-program {
        font-size: 30px; /* Mengurangi ukuran font untuk tablet */
    }

    .area-content-box-program {
        gap: 15px; /* Mengurangi jarak antar box */
    }

    .box-program {
        flex: 0 0 calc(50% - 10px); /* Mengubah lebar box menjadi 50% untuk tablet */
        height: 325px; /* Mengurangi tinggi box */
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(180%); /* Menyesuaikan posisi tombol */
    }
    /* pop up program */
    .popup-content {
        width: 400px;
        height: fit-content;
        padding: 25px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .desk-program {
        font-size: 14px;
    }

    .jam-program {
        font-size: 12px;
    }

    .title-box-program {
        font-size: 26px;
    }

    .link-program {
        font-size: 16px;
    }

    /* -------------- */
    /* ------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 20px;
    }

    .line-info {
        margin-top: 50px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 30%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 22px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 14px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 20px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 16px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 22px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 10px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 50%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 12px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 70%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 12px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 20px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

    .area-content-groupE {
        height: auto;
        display: flex;
        /* flex-direction: column; */
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        height: 50px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }

    .content-event-CD{
        height: 196px;
    }

    .area-content-event-kanan {
        width: 100%;
    }

    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 196px;
    }

    .title-event {
        font-size: 30px;
    }

    .timer {
        font-size: 22px;
    }

    .title-timer {
        font-size: 14px;
    }

    .date-month,
    .year {
        font-size: 20px;
    }

    .date-month-right,
    .year-right {
        font-size: 18px;
    }

    /* pop up event */
    .popup-content-event {
        width: 400px;
        height: fit-content;
        padding: 25px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .desk-event {
        font-size: 14px;
    }

    .jam-event {
        font-size: 12px;
    }

    /* .title-box-event {
        font-size: 2px;
    } */

    .link-event {
        font-size: 14px;
    }
    /* -------------- */
    /* ---------- */

    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 20px 0px 20px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 30px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 16px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(33.33% - 15px);
        height: fit-content;
    }

    .card-podcast .card-body-podcast {
        /* height: 60%; */
        padding: 0px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width: 100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 14px;
    }

    .card-image-podcast {
        height: fit-content;
    }

    .title-genre {
        font-size: 12px;
    }
    /* ------------------ */

    /* area-video */

    .page-youtube{
        margin: 0px 20px 0px 20px;
    }

    .area-content-video {
        width: 100%;
    }

    .title-video {
        font-size: 30px;
    }

    .box-video {
        height: 128px;
    }

    .btn-play-video {
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 20px;
    }

    .text-video {
        font-size: 16px;
    }

    .popup-content-yt {
        width: 480px;
        height: 270px;
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .title-announcer {
        font-size: 30px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 20px;
        /* border: 1px red solid; */
    }

    .box-announcer {
        flex: 0 0 calc(33.33% - 13px);
        height: 290px;
    }

    .line-announcer {
        margin: 10px 32px;
    }

    .popup-content-announcer {
        width: 360px;
        height: auto;
        max-height: 280px;
        padding: 20px;
    }

    .title-name-announcer {
        font-size: 14px;
    }

    .name-announcer {
        font-size: 16px;
    }

    .title-sosmed {
        font-size: 14px;
    }

    .area-profile-announcer i {
        font-size: 22px;
    }

    .title-bio {
        font-size: 14px;
    }

    .bio-announcer {
        font-size: 12px;
    }

    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 20px 0px 20px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        gap: 20px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        gap: 20px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 40px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 20px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 30px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }

    .row-chart{
        height: 45px;
    }

    .col-no{
        font-size: 12px;
    }

    .col-name{
        font-size: 12px;
    }

    .btn-play-chart span{
        font-size: 22px;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 12px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
        /* border: 1px red solid; */
    }

    .area-schedule {
        width: auto;
        height: auto;
        margin: 0px 20px;
    }

    .area-content-schedule {
        width: 100%;
        /* height: auto; */
        display: flex;
        flex-direction: column;
        /* border: 1px red solid; */
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .top-content-schedule {
        width: 100%;
        height: 50px;
    }

    .schedule {
        width: 120px;
        height: auto;
        margin-top: 8px;
        font-size: 16px;
    }

    .schedule-day {
        font-size: 14px;
    }

    .content-schedule {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 15px;
    }

    .box-schedule {
        height: fit-content;
    }

    .nama-programs {
        font-size: 16px;
    }

    .jam-programs {
        font-size: 14px;
    }

    /* ---------------- */
}
@media (max-width: 600px) {
    /* Gaya untuk tablet kecil atau phablet */
}
/* Mobile Devices */
@media (max-width: 480px) {
    /*.area-banner {*/
    /*    margin: 0px 8px 0px 8px;*/
    /*    height: 100px;*/
    /*}*/

    .page-1 {
        padding: 0px 8px 0px;
    }

    .header-streaming img {
        width: 180px;
        height: auto;
        max-width: 25%;
        z-index: 2;
    }

    .area-streaming {
        height: auto;
        margin-top: 0px;
    }

    .content-streaming {
        flex-direction: column;
        height: auto;
    }

    .contentS-kiri,
    .contentS-kanan {
        width: 100%;
        margin: 0px 0px 8px 0px;
    }

    .card-A .card-body {
        height: 218px;
        /* padding: 15px; */
    }

    .card-A .card-header .author {
        width: 64%;
        height: 50px;
    }

    .card-A .card-header .author::before {
        width: 36%;
        height: 50px;
    }

    .btn-play-streaming {
        width: 55px;
        height: 55px;
    }
    
    .btn-play-streaming span {
        font-size: 26px;
    }
    
        .text-watchS{
        font-size: 12px;
    }
    
    .text-watchS i{
        font-size: 16px;
    }

    .card-B .card-body-B {
        height: auto;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }
    .card-B .view-B {
        height: 20px;
        width: fit-content;
        margin-top: 10px;
        /* border-radius: 8px; */
    }
    
    .text-watchS-B {
        font-size: 12px;
        padding: 1px 6px;
    }
    
    .text-watchS-B i{
            font-size: 16px;
        }

    .video-container {
        position: relative;
        /* padding-bottom: 56.25%; */
        height: 218px;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 218px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .title-streaming {
        font-size: 1.5rem;
    }

    .contentS-kanan{
        width: 100%;
    }

    .title-nextP {
        font-size: 1.5rem;
    }

    .next-program-name{
        margin: 0px;
        font-family: "Poppins";
        /* color: white; */
        font-weight: 500;
        font-size: 12px;
    }
    .next-program-time{
        margin: 0px;
        font-family: "Poppins";
        /* color: white; */
        font-weight: 500;
        font-size: 12px;
    }

    .area-nextP {
        width: auto;
        height: auto;
        padding: 10px;
    }

    /* livechat */
    .cardOuter {
        width: auto;
        height: 300px;
        background-color: #333333;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 266px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        /* background-color: #ffb200; */
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 8px;
        margin: 0px;
        font-weight: 700;
        /* color: #ffffff; */
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 30px;
        resize: none;
        overflow: hidden;
        padding: 7px 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 10px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301;
        color: #333333; */
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-submit-icon:hover {
        background-color: #e7b603;
    }

    .icon-plane {
        font-size: 18px;
    }

    .nameSet {
        color: #333333;
        font-size: 8px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 4px;
        left: -8px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .google-logo {
        width: 16px;
        height: 16px;
    }

    .btn-google {
        width: fit-content;
        height: 30px;
        padding:  0px 8px;
        text-align: center;
        background-color: white;
        /* margin-top: 10px; */
        /* border-radius: 50%; */
        transition: all 0.5s ease-in-out;
        cursor: pointer;
    }

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 10px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 22px;
        padding: 0px 10px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 10px;
        border-radius: 6px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        width: 156px;
        height: 150px;
    } */
    /* area-program */

    .page-2 {
        height: fit-content;
    }

    .title-program {
        font-size: 36px; /* Mengurangi ukuran font untuk tablet */
    }

    .area-content-box-program {
        gap: 15px; /* Mengurangi jarak antar box */
    }

    .box-program {
        flex: 0 0 100%; /* Mengubah lebar box menjadi 50% untuk tablet */
        height: 335px; /* Mengurangi tinggi box */
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(180%); /* Menyesuaikan posisi tombol */
        display: none;
    }

    /* pop up program */

    .area-info-program{
        gap: 5px;
    }

    .popup-content {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .desk-program {
        font-size: 8px;
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
    }

    .jam-program {
        font-size: 10px;
    }

    .title-box-program {
        font-size: 18px;
    }

    .link-program {
        font-size: 12px;
    }

    /* -------------- */

    /* ------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 8px;
    }

    .line-info {
        margin-top: 50px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 100%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 22px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 14px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 20px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 16px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 22px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 10px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: 100%; /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 50%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .link-box-top-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 12px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 105px;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 100%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 12px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 105px;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 8px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

    .area-content-groupE {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        height: 50px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }

    .content-event-CD{
        height: 222px;
    }

    .area-content-event-kanan {
        width: 100%;
    }

    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 222px;
    }

    .title-event {
        font-size: 32px;
    }

    .timer {
        font-size: 24px;
    }

    .title-timer {
        font-size: 14px;
    }

    .date-month,
    .year {
        font-size: 20px;
    }

    .date-month-right,
    .year-right {
        font-size: 18px;
    }

    /* pop up event */
    .popup-content-event {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .area-info-event {
        gap: 3px;
    }

    .desk-event {
        font-size: 8px;
    }

    .jam-event {
        font-size: 10px;
    }

    .title-box-event {
        font-size: 18px;
    }

    .link-event {
        font-size: 10px;
    }
    /* -------------- */
    /* ---------- */

    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 8px 0px 8px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 30px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 16px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(50% - 15px);
        height: fit-content;
    }


    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width: 100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 14px;
    }

    .card-image-podcast {
        height: 102px;
    }

    .title-genre {
        font-size: 10px;
        /* margin: 4px 20px; */
    }
    /* ------------------ */

    /* area-video */

    .page-youtube{
        margin: 0px 8px 0px 8px;
    }

    .area-content-video {
        width: 100%;
    }

    .content-video{
        flex-direction: column;
        gap: 10px;
    }

    .title-video {
        font-size: 30px;
    }

    .box-video {
        width: 100%;
        height: 220px;
    }

    .btn-play-video {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 28px;
    }

    .text-video {
        font-size: 16px;
    }

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .title-announcer {
        font-size: 32px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 8px;
        /* border: 1px red solid; */
    }

    .area-image-announcer{
        height: 220px;
    }

    .box-announcer {
        flex: 0 0 calc(50% - 10px);
        height: fit-content;
    }

    .line-announcer {
        margin: 20px 32px;
    }

    .popup-content-announcer {
        width: 220px;
        height: auto;
        max-height: 260px;
        padding: 10px;
    }

    /* .area-info-announcer{
        flex-direction: column;
    /* } */

    .area-IA-kiri {
        width: 50%;
    }

    .area-IA-kanan {
        width: 50%;
        gap: 6px;
    }

    .title-name-announcer {
        font-size: 10px;
    }

    .name-announcer {
        font-size: 12px;
    }

    .title-sosmed {
        font-size: 10px;
    }

    .area-profile-announcer {
        margin-top: 4px;
    }

    .area-profile-announcer i {
        font-size: 16px;
    }

    .title-bio {
        font-size: 10px;
    }

    .bio-announcer {
        font-size: 8px;
    }

    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 8px 0px 8px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 40px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 16px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 30px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }

    .col-no{
        width: 10%;
        font-size: 10px;
    }

    .col-name{
        width: 80%;
        font-size: 10px;
    }

    .col-btn-play{
        width: 10%;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 14px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
        /* border: 1px red solid; */
        margin-top: 15px;
    }

    .area-schedule {
        width: auto;
        height: auto;
        margin: 0px 8px;
    }

    .area-content-schedule {
        width: 100%;
        /* height: auto; */
        display: flex;
        flex-direction: column;
        /* border: 1px red solid; */
        margin-bottom: 8px;
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 26px;
        margin-bottom: 0px;
    }

    .top-content-schedule {
        width: auto;
        height: 40px;
        display: none;
    }

    .schedule {
        width: 120px;
        height: auto;
        /* margin-top: 8px; */
        font-size: 16px;
    }

    .schedule-day {
        font-size: 8px;
    }

    .content-schedule {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        height: auto;
        display: none;
    }

    .box-schedule {
        height: fit-content;
    }

    .nama-programs {
        font-size: 14px;
    }

    .jam-programs {
        font-size: 12px;
    }
    /* ---------------- */
    /* schedule mobile */
    .top-content-schedule-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        /* display: block;   */
    }

    .schedule-day-mobile {
        font-size: 1.1rem;
        font-weight: bold;
        color: black;
        margin: 0;
        font-family: "Poppins";
    }

    .nav-button {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .nav-button i {
        color: black;
        font-size: 28px;
    }

    .content-schedule-mobile {
        /*grid-template-columns: repeat(2, 1fr);*/
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 40px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }

    .box-schedule-mobile {
        display: none; /* Hanya tampilkan yang aktif */
        height: 100px;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
        width: 50%;
    }

    .box-schedule-mobile.active {
        display: block;
        width: calc(50% - 5px);
        height: 100px;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
    }
}
@media (max-width: 390px) {
    /*.area-banner {*/
    /*    margin: 0px 8px 0px 8px;*/
    /*    height: 100px;*/
    /*}*/

    .page-1 {
        padding: 0px 8px 0px;
    }

    .header-streaming img {
        width: 120px;
        height: auto;
        max-width: 20%;
        z-index: 2;
    }

    .area-streaming {
        height: fit-content;
        /* border: 1px red solid; */
        /* margin-top: 50px;
        margin-bottom: 30px; */
    }

    .content-streaming {
        flex-direction: column;
        height: auto;
        /* border: 1px green solid; */
        gap: 10px;
    }

    .contentS-kiri {
        width: 100%;
        margin-right: 8px;
        height: auto;
    }

    .contentS-kanan {
        width: 100%;
        margin-left: 0px;
    }

    /* .card-A .card-body {
        height: 200px;
        padding: 25px;
    } */

    .card-A .card-header .author {
        width: 65%;
        height: 50px;
    }

    .card-A .card-header .author::before {
        width: 35%;
        height: 50px;
    }

    .card-A .card-header .view {
        height: 20px;
        width: 28%;
    }

    .card-A .card-body {
        height: 198px;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }

    .btn-play-streaming {
        width: 60px;
        height: 60px;
    }

    .card-B .card-body-B {
        height: auto;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }
    .card-B .view-B {
        height: 20px;
        width: fit-content;
        /* margin-top: 0px; */
    }

    .video-container {
        position: relative;
        /* padding-bottom: 47.15%; */
        height: 198px;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 198px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .text-watchS {
        font-size: 14px;
    }

    .text-watchS i{
        font-size: 20px;
    }

    .text-watchS-B {
        font-size: 14px;
    }

    .text-watchS-B i{
        font-size: 20px;
    }

    .title-streaming {
        font-size: 2rem;
    }

    .title-nextP {
        font-size: 1.6rem;
    }

    .next-program-name {
        margin: 0px;
        font-family: "Poppins";
        /* color: white; */
        font-weight: 500;
        font-size: 14px;
    }
    .next-program-time {
        margin: 0px;
        font-family: "Poppins";
        /* color: white; */
        font-weight: 500;
        font-size: 14px;
    }

    .area-nextP {
        height: auto;
    }

    /* livechat */
    .cardOuter {
        width: auto;
        height: 260px;
        background-color: #333333;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 228px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        /* background-color: #ffb200; */
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 8px;
        margin: 0px;
        font-weight: 700;
        /* color: #ffffff; */
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 28px;
        resize: none;
        overflow: hidden;
        padding: 5px 11px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 10px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301; */
        /* color: #333333; */
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 28px;
        width: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .btn-submit-icon:hover {
        background-color: #e7b603;
    } */

    .icon-plane {
        font-size: 20px;
    }

    .nameSet {
        color: #333333;
        font-size: 8px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 4px;
        left: -8px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .google-logo {
        width: 16px;
        height: 16px;
    }

    .btn-google {
        width: fit-content;
        height: 28px;
        padding: 0px 8px;
        text-align: center;
        background-color: white;
        /* margin-top: 10px; */
        /* border-radius: 50%; */
        transition: all 0.5s ease-in-out;
        cursor: pointer;
    }

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 10px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 22px;
        padding: 0px 10px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 10px;
        border-radius: 6px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        width: 186px;
        height: 180px;
    } */

    /* area-program */
    .page-2 {
        height: fit-content;
    }

    /* .area-content-program {
        margin: 10px 32px 0px 32px;
    } */

    .title-program {
        font-size: 26px;
    }

    .area-content-box-program {
        gap: 15px;
        
        /* border: 1px red solid; */
    }

    .area-content-program {
        margin: 10px 40px 0px 40px;
    }

    .box-program {
        /* flex: 0 0 calc(33.33% - 15px); */
        height: 294px;
        /* border-radius: 10px; */
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(180%);
    }

    /* pop up program */

    .popup-content {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .desk-program {
        font-size: 8px;
    }

    .jam-program {
        font-size: 10px;
    }

    .title-box-program {
        font-size: 18px;
    }

    .link-program {
        font-size: 12px;
    }

    /* -------------- */
    /* -------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 8px;
    }

    .line-info {
        margin-top: 50px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 100%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 22px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 14px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 20px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 16px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 22px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 10px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: 100%; /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 50%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .link-box-top-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 12px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 95px;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 100%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 30px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 14px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 12px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 8px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

    .area-content-groupE {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        height: 50px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }

    .content-event-CD{
        height: 202px;
    }

    .area-content-event-kanan {
        width: 100%;
    }

    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 202px;
    }

    .title-event {
        font-size: 32px;
    }

    .timer {
        font-size: 24px;
    }

    .title-timer {
        font-size: 14px;
    }

    .date-month,
    .year {
        font-size: 20px;
    }

    .date-month-right,
    .year-right {
        font-size: 18px;
    }

    /* pop up event */
    .popup-content-event {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .area-info-event {
        gap: 3px;
    }

    .desk-event {
        font-size: 8px;
    }

    .jam-event {
        font-size: 10px;
    }

    .title-box-event {
        font-size: 18px;
    }

    .link-event {
        font-size: 10px;
    }
    /* -------------- */
    /* ---------- */

    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 8px 0px 8px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 30px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 16px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(50% - 15px);
        height: fit-content;
    }


    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width: 100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 14px;
    }

    .card-image-podcast {
        height: 120px;
    }

    .title-genre {
        font-size: 10px;
        /* margin: 4px 20px; */
    }
    /* ------------------ */

    /* area-video */

    .page-youtube{
        margin: 0px 8px 0px 8px;
    }

    .area-content-video {
        width: 100%;
    }

    .content-video{
        flex-direction: column;
        gap: 10px;
    }

    .title-video {
        font-size: 30px;
    }

    .box-video {
        width: 100%;
        height: 220px;
    }

    .btn-play-video {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 28px;
    }

    .text-video {
        font-size: 16px;
    }

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .title-announcer {
        font-size: 32px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 8px;
        /* border: 1px red solid; */
    }

    .area-image-announcer{
        height: 220px;
    }

    .box-announcer {
        flex: 0 0 calc(50% - 10px);
        height: fit-content;
    }

    .line-announcer {
        margin: 20px 32px;
    }

    .popup-content-announcer {
        width: 220px;
        height: auto;
        max-height: 260px;
        padding: 10px;
    }

    /* .area-info-announcer{
        flex-direction: column;
    /* } */

    .area-IA-kiri {
        width: 50%;
    }

    .area-IA-kanan {
        width: 50%;
        gap: 6px;
    }

    .title-name-announcer {
        font-size: 10px;
    }

    .name-announcer {
        font-size: 12px;
    }

    .title-sosmed {
        font-size: 10px;
    }

    .area-profile-announcer {
        margin-top: 4px;
    }

    .area-profile-announcer i {
        font-size: 16px;
    }

    .title-bio {
        font-size: 10px;
    }

    .bio-announcer {
        font-size: 8px;
    }

    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 8px 0px 8px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 40px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 16px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 30px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }

    .col-no{
        width: 10%;
        font-size: 10px;
    }

    .col-name{
        width: 80%;
        font-size: 10px;
    }

    .col-btn-play{
        width: 10%;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 14px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
        /* border: 1px red solid; */
        margin-top: 15px;
    }

    .area-schedule {
        width: auto;
        height: auto;
        margin: 0px 8px;
    }

    .area-content-schedule {
        width: 100%;
        /* height: auto; */
        display: flex;
        flex-direction: column;
        /* border: 1px red solid; */
        margin-bottom: 8px;
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 26px;
        margin-bottom: 0px;
    }

    .top-content-schedule {
        width: auto;
        height: 40px;
        display: none;
    }

    .schedule {
        width: 120px;
        height: auto;
        /* margin-top: 8px; */
        font-size: 16px;
    }

    .schedule-day {
        font-size: 8px;
    }

    .content-schedule {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        height: auto;
        display: none;
    }

    .box-schedule {
        height: auto;
    }

    .nama-programs {
        font-size: 14px;
    }

    .jam-programs {
        font-size: 12px;
    }
    /* ---------------- */
    /* schedule mobile */
    .top-content-schedule-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        /* display: block;   */
    }

    .schedule-day-mobile {
        font-size: 1.1rem;
        font-weight: bold;
        color: black;
        margin: 0;
        font-family: "Poppins";
    }

    .nav-button {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .nav-button i {
        color: black;
        font-size: 28px;
    }

    .content-schedule-mobile {
        /*grid-template-columns: repeat(2, 1fr);*/
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 40px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }

    .box-schedule-mobile {
        display: none; /* Hanya tampilkan yang aktif */
        height: 100px;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
        width: 50%;
    }

    .box-schedule-mobile.active {
        display: block;
        width: calc(50% - 5px);
        height: 100px;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
    }
}

@media (max-width: 375px) {
    /*.area-banner {*/
    /*    margin: 0px 8px 0px 8px;*/
    /*    height: 100px;*/
    /*}*/

    .page-1 {
        padding: 0px 8px 0px;
    }

    .header-streaming img {
        width: 180px;
        height: auto;
        max-width: 25%;
        z-index: 2;
    }

    .area-streaming {
        height: auto;
        margin-top: 0px;
    }

    .content-streaming {
        flex-direction: column;
        height: auto;
        margin-bottom: 20px;
    }

    .contentS-kiri,
    .contentS-kanan {
        width: 100%;
        margin: 0px 0px 8px 0px;
    }

    .card-A .card-body {
        height: 190px;
        /* padding: 15px; */
    }

    .card-A .card-header .author {
        width: 64%;
        height: 50px;
    }

    .card-A .card-header .author::before {
        width: 36%;
        height: 50px;
    }

    .btn-play-streaming {
        width: 40px;
        height: 40px;
    }

    .btn-play-streaming span {
        font-size: 22px;
    }

    .card-A .card-header .view {
        height: 18px;
        width: fit-content;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchS {
        font-size: 12px;
    }
    
      .text-watchS i{
        font-size: 16px;
    }

    .card-B .card-body-B {
        height: auto;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }
    
    .card-B .view-B {
        height: 20px;
        width: fit-content;
        margin-top: 10px;
        border-radius: 8px;
    }
    
    .text-watchS-B {
        font-size: 12px;
        padding: 1px 6px;
    }
    
    .text-watchS-B i{
            font-size: 16px;
        }

    .video-container {
        position: relative;
        /* padding-bottom: 60.5%; */
        height: 190px;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 200px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .title-streaming {
        font-size: 1.5rem;
    }

    .title-nextP {
        font-size: 1.5rem;
    }

    .contentS-kanan{
        width: 100%;
    }

    .area-nextP {
        width: auto;
        height: auto;
        padding: 10px;
    }

    /* livechat */
    .cardOuter {
        width: auto;
        height: 240px;
        background-color: #333333;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 208px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        /* background-color: #ffb200; */
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 8px;
        margin: 0px;
        font-weight: 700;
        /* color: #ffffff; */
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 28px;
        resize: none;
        overflow: hidden;
        padding: 5px 11px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 10px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301; */
        /* color: #333333; */
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 28px;
        width: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .btn-submit-icon:hover {
        background-color: #e7b603;
    } */

    .icon-plane {
        font-size: 20px;
    }

    .nameSet {
        color: #333333;
        font-size: 8px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 4px;
        left: -8px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .google-logo {
        width: 16px;
        height: 16px;
    }

    .btn-google {
        width: fit-content;
        height: 28px;
        padding: 0px 8px;
        text-align: center;
        background-color: white;
        /* margin-top: 10px; */
        /* border-radius: 50%; */
        transition: all 0.5s ease-in-out;
        cursor: pointer;
    }

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 10px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 22px;
        padding: 0px 10px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 10px;
        border-radius: 6px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        width: 156px;
        height: 150px;
    } */
    /* area-program */

    .page-2 {
        height: fit-content;
    }

    .title-program {
        font-size: 36px; /* Mengurangi ukuran font untuk tablet */
    }

    .area-content-box-program {
        gap: 15px; /* Mengurangi jarak antar box */
    }

    .box-program {
        flex: 0 0 100%; /* Mengubah lebar box menjadi 50% untuk tablet */
        height: 280px; /* Mengurangi tinggi box */
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(180%); /* Menyesuaikan posisi tombol */
        display: none;
    }

    /* pop up program */
    .popup-content {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .desk-program {
        font-size: 8px;
    }

    .jam-program {
        font-size: 10px;
    }

    .title-box-program {
        font-size: 18px;
    }

    .link-program {
        font-size: 12px;
    }

    /* -------------- */

    /* ------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 8px;
    }

    .line-info {
        margin-top: 25px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 100%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 22px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 12px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 18px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 12px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 18px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 10px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: 100%; /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 50%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 12px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 26px;
        font-weight: 200;
        /* color: white; */
    }

    .link-box-top-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 12px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 91px;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 100%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 18px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 12px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 8px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

    .area-content-groupE {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        /* height: 50px; */
        padding: 0px;
    }

    .countdown{
        width: 60%;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }

    .content-event-CD{
        height: 193px;
    }

    .title-event-CD{
        font-size: 12px;
    }
    .area-content-event-kanan {
        width: 100%;
    }

    .area-days-date{
        padding: 8px;
    }

    .content-days-date-right{
        padding: 8px;
    }

    .area-days-date-kanan{
        padding: 8px;
        align-items: center;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 193px;
    }

    .title-event {
        font-size: 32px;
    }

    .date-month-kanan{
        font-size: 10px;
    }

    .timer {
        font-size: 20px;
    }

    .title-timer {
        font-size: 10px;
    }

    .date-month,
    .year {
        font-size: 16px;
    }

    .date-month-right,
    .year-right {
        font-size: 16px;
    }


    /* pop up event */
    .popup-content-event {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .area-info-event {
        gap: 3px;
    }

    .desk-event {
        font-size: 8px;
    }

    .jam-event {
        font-size: 10px;
    }

    .title-box-event {
        font-size: 18px;
    }

    .link-event {
        font-size: 10px;
    }
    /* -------------- */
    /* ---------- */

    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 8px 0px 8px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 30px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 12px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(50% - 8px);
        height: fit-content;
    }

    /* .card-podcast .card-body-podcast {
        height: 60%;
        padding: 30px;
    } */

    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width: 100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 14px;
    }

    .card-image-podcast {
        height: fit-content;
    }

    .title-genre {
        font-size: 10px;
        /* margin: 4px 20px; */
    }
    /* ------------------ */

    /* area-video */
    .area-content-video {
        width: 100%;
    }

    .content-video{
        gap: 10px;
    }

    .title-video {
        font-size: 30px;
    }

    .box-video {
        height:192px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 24px;
    }

    .text-video {
        font-size: 16px;
    }

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .title-announcer {
        font-size: 32px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 8px;
        /* border: 1px red solid; */
    }

    .box-announcer {
        flex: 0 0 calc(50% - 10px);
        height: fit-content;
    }

    .area-image-announcer{
        height: 190px;
    }

    .name-announcer-slide{
        font-size: 14px;
    }

    .line-announcer {
        margin: 20px 32px;
    }

    .popup-content-announcer {
        width: 220px;
        height: auto;
        max-height: 260px;
        padding: 10px;
    }

    /* .area-info-announcer{
        flex-direction: column;
    /* } */

    .area-IA-kiri {
        width: 50%;
    }

    .area-IA-kanan {
        width: 50%;
        gap: 6px;
    }

    .title-name-announcer {
        font-size: 10px;
    }

    .name-announcer {
        font-size: 12px;
    }

    .title-sosmed {
        font-size: 10px;
    }

    .area-profile-announcer {
        margin-top: 4px;
    }

    .area-profile-announcer i {
        font-size: 16px;
    }

    .title-bio {
        font-size: 10px;
    }

    .bio-announcer {
        font-size: 8px;
    }


    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 8px 0px 8px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 40px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 20px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 30px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 8px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
        /* border: 1px red solid; */
        margin-top: 15px;
    }

    .area-schedule {
        width: auto;
        height: auto;
        margin: 0px 8px;
    }

    .area-content-schedule {
        width: 100%;
        /* height: auto; */
        display: flex;
        flex-direction: column;
        /* border: 1px red solid; */
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 26px;
        margin-bottom: 0px;
    }

    .top-content-schedule {
        width: auto;
        height: 40px;
    }

    .schedule {
        width: 120px;
        height: 25px;
        /* margin-top: 8px; */
        font-size: 16px;
    }

    .schedule-day {
        font-size: 7px;
    }

    .content-schedule {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        height: auto;
    }

    .box-schedule {
        height: fit-content;
        /* padding: 5px; */
    }

    .bio-schedule {
        padding: 5px 10px;
    }

    .nama-programs {
        font-size: 12px;
    }

    .jam-programs {
        font-size: 10px;
    }
    /* ---------------- */
    /* schedule mobile */
    .top-content-schedule-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        /* display: block;   */
    }

    .schedule-day-mobile {
        font-size: 0.9rem;
        font-weight: bold;
        color: black;
        margin: 0;
        font-family: "Poppins";
    }

    .nav-button {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .nav-button i {
        color: black;
        font-size: 28px;
    }

    .content-schedule-mobile {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 40px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        height: fit-content;
    }

    .box-schedule-mobile {
        display: none; /* Hanya tampilkan yang aktif */
        height: fit-content;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
        width: 50%;
    }

    .box-schedule-mobile.active {
        display: block;
        width: calc(50% - 5px);
        height: fit-content;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
    }
}

@media (max-width: 344px) {
    /*.area-banner {*/
    /*    margin: 0px 8px 0px 8px;*/
    /*    height: 100px;*/
    /*}*/

    .page-1 {
        padding: 0px 8px 0px;
    }

    .header-streaming img {
        width: 250px;
        height: auto;
        max-width: 32%;
        z-index: 2;
    }

    .area-streaming {
        height: auto;
    }

    .content-streaming {
        flex-direction: column;
        height: auto;
        margin-bottom: 20px;
    }

    .contentS-kiri,
    .contentS-kanan {
        width: 100%;
        margin: 0px 0px 8px 0px;
    }

    .card-A .card-body {
        height: 158px;
        /* padding: 15px; */
    }

    .card-A .card-header .author {
        width: 64%;
        height: 50px;
    }

    .card-A .card-header .author::before {
        width: 36%;
        height: 50px;
    }

    .btn-play-streaming {
        width: 40px;
        height: 40px;
    }

    .btn-play-streaming span {
        font-size: 22px;
    }

    .card-A .card-header .view {
        height: 15px;
        width: fit-content;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
    .text-watchS {
        font-size: 10px;
    }
    
    .text-watchS i{
        font-size: 16px;
    }

    .card-B .card-body-B {
        height: auto;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }
    
    .card-B .view-B {
        height: 15px;
        width: fit-content;
        margin-top: 10px;
        border-radius: 8px;
    }
    
    .text-watchS-B {
        font-size: 10px;
        padding: 1px 6px;
    }
    
    .text-watchS-B i{
            font-size: 16px;
        }

    .video-container {
        position: relative;
        /* padding-bottom: 58%; */
        height: 158px;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 162px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .title-streaming {
        font-size: 1.5rem;
    }

    .title-nextP {
        font-size: 1.5rem;
    }

    .area-nextP {
        height: auto;
        padding: 10px;
    }

    /* livechat */
    .cardOuter {
        width: auto;
        height: 220px;
        background-color: #333333;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 196px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        /* background-color: #ffb200; */
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 6px;
        margin: 0px;
        font-weight: 700;
        /* color: #ffffff; */
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 22px;
        resize: none;
        overflow: hidden;
        padding: 4px 8px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 8px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301; */
        color: #333333;
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 20px;
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .btn-submit-icon:hover {
        background-color: #e7b603;
    } */

    .icon-plane {
        font-size: 20px;
    }

    .nameSet {
        color: #333333;
        font-size: 7px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 3px;
        left: -7px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .google-logo {
        width: 14px;
        height: 14px;
    }

    .btn-google {
        width: fit-content;
        height: 20px;
        padding: 0px 4px;
        text-align: center;
        background-color: white;
        /* margin-top: 10px; */
        /* border-radius: 50%; */
        transition: all 0.5s ease-in-out;
        cursor: pointer;

    }

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 8px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 22px;
        padding: 0px 10px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 10px;
        border-radius: 6px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        height: 150px;
    } */
    /* area-program */

    .page-2 {
        height: fit-content;
    }

    .title-program {
        font-size: 36px; /* Mengurangi ukuran font untuk tablet */
    }

    .area-content-program{
        margin: 10px 12px 0px 12px;
    }

    .area-content-box-program {
        gap: 15px; /* Mengurangi jarak antar box */
    }

    .box-program {
        flex: 0 0 100%; /* Mengubah lebar box menjadi 50% untuk tablet */
        height: 275px; /* Mengurangi tinggi box */
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(180%); /* Menyesuaikan posisi tombol */
        display: none;
    }

    /* pop up program */
    .popup-content {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .desk-program {
        font-size: 8px;
    }

    .jam-program {
        font-size: 10px;
    }

    .title-box-program {
        font-size: 18px;
    }

    .link-program {
        font-size: 10px;
    }

    /* -------------- */

    /* ------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 8px;
    }

    .line-info {
        margin-top: 25px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 100%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 22px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 12px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 18px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 12px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 18px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 10px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: 100%; /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 50%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 26px;
        font-weight: 200;
        /* color: white; */
    }

    .link-box-top-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 10px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 8px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 75px;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 100%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 8px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 8px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

    .area-content-groupE {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        height: 50px;
        padding: 0px;
    }

    .area-days-date{
        padding: 8px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }
    
    .content-event-CD{
        height: 162px;
    }

    .area-content-event-kanan {
        width: 100%;
    }


    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
        padding: 8px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 162px;
    }

    .title-event {
        font-size: 26px;
    }

    .timer {
        font-size: 18px;
    }

    .title-timer {
        font-size: 10px;
    }

    .date-month,
    .year {
        font-size: 16px;
    }

    .date-month-right,
    .year-right {
        font-size: 16px;
    }

    /* pop up event */
    .popup-content-event {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .area-info-event {
        gap: 3px;
    }

    .desk-event {
        font-size: 8px;
    }

    .jam-event {
        font-size: 10px;
    }

    .title-box-event {
        font-size: 18px;
    }

    .link-event {
        font-size: 10px;
    }

    /* -------------- */
    /* ---------- */

    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 8px 0px 8px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 30px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 12px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(50% - 8px);
        height: fit-content;
    }

    /* .card-podcast .card-body-podcast {
        height: 60%;
        padding: 30px;
    } */

    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width: 100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 12px;
    }

    .card-image-podcast {
        height: fit-content;
    }

    .title-genre {
        font-size: 10px;
        /* margin: 4px 20px; */
    }
    /* ------------------ */

    /* area-video */
    .area-content-video {
        width: 100%;
    }

    .content-video{
        gap: 10px;
    }

    .title-video {
        font-size: 30px;
    }

    .box-video {
        height: 160px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 28px;
    }

    .text-video {
        font-size: 12px;
    }

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .title-announcer {
        font-size: 32px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 8px;
        /* border: 1px red solid; */
    }

    .box-announcer {
        flex: 0 0 100%;
        height: fit-content;
    }

    .area-image-announcer{
        height: 341px;
    }

    .name-announcer-slide{
        font-size: 16px;
    }

    .line-announcer {
        margin: 20px 32px;
    }

    .popup-content-announcer {
        width: 220px;
        height: auto;
        max-height: 260px;
        padding: 10px;
    }

    /* .area-info-announcer{
        flex-direction: column;
    /* } */

    .area-IA-kiri {
        width: 50%;
    }

    .area-IA-kanan {
        width: 50%;
        gap: 6px;
    }

    .title-name-announcer {
        font-size: 10px;
    }

    .name-announcer {
        font-size: 12px;
    }

    .title-sosmed {
        font-size: 10px;
    }

    .area-profile-announcer {
        margin-top: 4px;
    }

    .area-profile-announcer i {
        font-size: 16px;
    }

    .title-bio {
        font-size: 10px;
    }

    .bio-announcer {
        font-size: 8px;
    }

    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 8px 0px 8px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 40px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 18px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 30px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }

    .col-no{
        font-size: 8px;
    }

    .col-name{
        font-size: 8px;
    }

    .btn-play-chart span{
        font-size: 18px;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 10px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
        /* border: 1px red solid; */
        margin-top: 15px;
    }

    .area-schedule {
        width: auto;
        height: auto;
        margin: 0px 8px;
    }

    .area-content-schedule {
        width: 100%;
        /* height: auto; */
        display: flex;
        flex-direction: column;
        /* border: 1px red solid; */
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 26px;
        margin-bottom: 0px;
    }

    .top-content-schedule {
        width: auto;
        height: 40px;
    }

    .schedule {
        width: 120px;
        height: 25px;
        /* margin-top: 8px; */
        font-size: 16px;
    }

    .schedule-day {
        font-size: 7px;
    }

    .content-schedule {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        height: auto;
    }

    .box-schedule {
        height: fit-content;
        /* padding: 5px; */
    }

    .bio-schedule {
        padding: 5px 10px;
    }

    .nama-programs {
        font-size: 12px;
    }

    .jam-programs {
        font-size: 10px;
    }
    /* ---------------- */
    /* schedule mobile */
    .top-content-schedule-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        /* display: block;   */
    }

    .schedule-day-mobile {
        font-size: 0.8rem;
        font-weight: bold;
        color: black;
        margin: 0;
        font-family: "Poppins";
    }

    .nav-button {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .nav-button i {
        color: black;
        font-size: 24px;
    }

    .content-schedule-mobile {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 40px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        height: fit-content;
    }

    .box-schedule-mobile {
        display: none; /* Hanya tampilkan yang aktif */
        height: fit-content;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
        width: 50%;
    }

    .box-schedule-mobile.active {
        display: block;
        width: calc(50% - 5px);
        height: fit-content;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
    }
}
@media (max-width: 320px) {
    /*.area-banner {*/
    /*    margin: 0px 8px 0px 8px;*/
    /*    height: 100px;*/
    /*}*/

    .page-1 {
        padding: 0px 8px 0px;
    }

    .header-streaming img {
        width: 250px;
        height: auto;
        max-width: 32%;
        z-index: 2;
    }

    .area-streaming {
        height: auto;
    }

    .content-streaming {
        flex-direction: column;
        height: auto;
        margin-bottom: 20px;
    }

    .contentS-kiri,
    .contentS-kanan {
        width: 100%;
        margin: 0px 0px 8px 0px;
    }

    .card-A .card-body {
        height: 158px;
        /* padding: 15px; */
    }

    .card-A .card-header .author {
        width: 64%;
        height: 50px;
    }

    .card-A .card-header .author::before {
        width: 36%;
        height: 50px;
    }

    .btn-play-streaming {
        width: 40px;
        height: 40px;
    }

    .btn-play-streaming span {
        font-size: 22px;
    }

    .card-A .card-header .view {
        height: 15px;
        width: fit-content;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }
    .text-watchS {
        font-size: 10px;
    }
    
    .text-watchS i{
        font-size: 16px;
    }

    .card-B .card-body-B {
        height: auto;
        /* padding: 25px; */
        /* border: 1px red solid; */
    }
    
    .card-B .view-B {
        height: 15px;
        width: fit-content;
        margin-top: 10px;
        border-radius: 8px;
    }
    
    .text-watchS-B {
        font-size: 10px;
        padding: 1px 6px;
    }
    
    .text-watchS-B i{
            font-size: 16px;
        }

    .video-container {
        position: relative;
        /* padding-bottom: 58%; */
        height: 158px;
        overflow: hidden;
        width: 100%;
        background-color: rgb(
            0,
            0,
            0
        ); /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 162px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }

    .title-streaming {
        font-size: 1.5rem;
    }

    .title-nextP {
        font-size: 1.5rem;
    }

    .area-nextP {
        height: auto;
        /* padding: 10px; */
    }

    /* livechat */
    .cardOuter {
        width: auto;
        height: 220px;
        background-color: #333333;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        /* border: 3px #D3D3D3 solid; */
    }

    .chat-box {
        width: 100%;
        height: 196px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .cardOuter-inputChat {
        width: 360px;
        height: fit-content;
        /* background-color: #ffb200; */
        padding: 15px;
        border-radius: 30px;
    }

    .area-textHelper {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .text-helper {
        font-family: "Poppins", sans-serif;
        font-size: 6px;
        margin: 0px;
        font-weight: 700;
        /* color: #ffffff; */
    }

    .form-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    /* Flex container antara textarea dan tombol */
    .chat-form-wrapper {
        display: flex;
        align-items: flex-start; /* ini penting agar tombol tetap di atas walau textarea tinggi */
        gap: 10px;
        width: 100%;
    }

    /* Textarea fleksibel */
    .input-area {
        flex: 1;
        resize: vertical;
        height: 22px;
        resize: none;
        overflow: hidden;
        padding: 4px 8px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-family: "Poppins", sans-serif;
        outline: none;
        font-size: 8px;
    }

    /* Tombol submit dengan ikon */
    .btn-submit-icon {
        /* background-color: #f8c301; */
        /* color: #333333; */
        border: none;
        border-radius: 50%;
        /* padding: 12px; */
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 20px;
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .btn-submit-icon:hover {
        background-color: #e7b603;
    } */

    .icon-plane {
        font-size: 20px;
    }

    .nameSet {
        color: #333333;
        font-size: 7px;
        font-family: "Poppins", sans-serif;
        padding: 0px;
        margin: 0px;
    }

    .bubbleChat {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    /* Segitiga kiri atas */
    .bubbleChat::before {
        content: "";
        position: absolute;
        top: 3px;
        left: -7px;
        width: 0;
        height: 0;
        /* border-top: 10px solid transparent; */
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ffffff;
    }

    .area-button-google {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .google-logo {
        width: 14px;
        height: 14px;
    }

    .btn-google {
        width: fit-content;
        height: 20px;
        padding: 0px 4px;
        text-align: center;
        background-color: white;
        /* margin-top: 10px; */
        /* border-radius: 50%; */
        transition: all 0.5s ease-in-out;
        cursor: pointer;

    }

    /* .btn-google:hover {
    background-color: #c44b00;
    transition: all 0.5s ease-in-out;
} */

    .btn-login-google {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        height: auto;
    }

    .bubbleChat-admin-question {
        position: relative;
        width: fit-content;
        max-width: 100%;
        padding: 10px 14px;
        margin: 5px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font-family: sans-serif;
    }

    .text-admin {
        margin: 0px;
        font-size: 14px;
    }

    .admin-question-box {
        /* position: relative; */
        /* top: -30px; */
        /* background-color: #f8c301; */
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* margin-bottom: -20px;  */
        font-family: "Poppins", sans-serif;
        /* z-index: 2; */
    }

    .admin-question-text {
        font-size: 8px;
        color: #333333;
        margin: 0;
        padding: 0;
    }

    .text-question {
        font-weight: 500;
        color: black;
    }

    /* .admin-bubble {
    background-color: #e2e3ff;
    padding: 10px;
    border-radius: 8px;
    margin: 5px 0;
    color: #333;
    font-style: italic;
} */

    .livechat-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    /* .livechat-modal .cardOuter {
    background: white;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 20px;
} */

    /* Tombol close */
    .livechat-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 5px 10px;
        cursor: pointer;
    }

    .area-btn-nextProgram {
        width: fit-content;
        /* border: 1px white solid; */
        margin-top: 10px;
    }

    .btn-open-livechats {
        width: auto;
        height: 22px;
        padding: 0px 10px;
        appearance: none;
        background-color: #ffffff;
        color: #333;
        border: none;
        font-size: 10px;
        border-radius: 6px;
        cursor: pointer;
        font-family: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }

    /* Hidden class */
    .hidden {
        display: none;
    }

    @keyframes bounceInCenter {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    .livechat-modal.show .cardOuter {
        animation: bounceInCenter 0.4s ease-out;
    }

    .livechat-modal {
        transition: all 0.3s ease;
    }

    @keyframes bounceOutCenter {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(0.3);
        }
    }

    .livechat-modal.hide .cardOuter {
        animation: bounceOutCenter 0.4s ease-in forwards;
    }

    /* ---------------------- */

    /* .area-thumbnail-nextP {
        height: 150px;
    } */
    /* area-program */

    .page-2 {
        height: fit-content;
    }

    .title-program {
        font-size: 36px; /* Mengurangi ukuran font untuk tablet */
    }

    .area-content-program{
        margin: 10px 12px 0px 12px;
    }

    .area-content-box-program {
        gap: 15px; /* Mengurangi jarak antar box */
    }

    .box-program {
        flex: 0 0 100%; /* Mengubah lebar box menjadi 50% untuk tablet */
        height: 275px; /* Mengurangi tinggi box */
    }

    .tombol-kiri,
    .tombol-kanan {
        transform: translateY(180%); /* Menyesuaikan posisi tombol */
        display: none;
    }

    /* pop up program */
    .popup-content {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .desk-program {
        font-size: 8px;
    }

    .jam-program {
        font-size: 10px;
    }

    .title-box-program {
        font-size: 18px;
    }

    .link-program {
        font-size: 10px;
    }

    /* -------------- */

    /* ------------- */

    /* area-info-news */
    .area-info-news {
        margin: 0 8px;
    }

    .line-info {
        margin-top: 25px;
    }

    .area-content-info-news {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .area-kategori-info {
        width: 100%;
    }

    /* ------- */

    /* area-content-info */
    .area-content-info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 20px;
        /* border: 1px red solid; */
    }

    .header-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: left;
        /* margin-top: 20px; */
    }

    .title-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .content-info {
        width: 100%;
        height: auto;
        /* border: 1px white solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .box-info {
        flex: 0 0 calc(50% - 6px);
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 10px;
    }

    .area-tag-info {
        width: auto;
        height: fit-content;
        /* border: 1px red solid; */
        padding: 10px;
        position: absolute;
        z-index: 2;
    }

    .tag-info {
        margin: 0px;
        font-family: "Bebas Neue";
        color: white;
        font-weight: 200;
        font-size: 22px;
    }

    .image-info {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: all 0.3s ease;
        filter: brightness(0.6);
        -webkit-filter: brightness(0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }

    .box-info:hover .image-info {
        filter: brightness(0.8);
        /*Gelapkangambarsaatdi-hover*/
        cursor: pointer;
        -webkit-filter: brightness(0.8);
    }
    .area-bottom-info {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        display: flex;
        justify-content: end;
    }

    .box-title-bottom {
        width: fit-content;
        height: fit-content;
        margin-top: 10px;
        text-align: end;
    }

    .title-bottom-info {
        margin: 0px;
        font-family: "Poppins";
        font-size: 12px;
        font-weight: 300;
        color: black;
        /* padding: 5px 20px; */
        border-radius: 8px;
        /* border: 1px black solid; */
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        display: flex;
        gap: 3px;
        align-items: center;
    }

    .title-bottom-info i {
        font-size: 18px;
    }

    /* .title-bottom-info:hover {
        background-color: white;
        color: black;
        font-weight: 400;
    } */

    /* ------------------ */

    /* area-content-news */
    .area-content-news {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
    }

    .header-news {
        width: 100%;
        height: fit-content;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-news {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .link-see-all-news {
        color: black;
    }

    .see-all-news {
        margin: 0px;
        font-family: "Poppins";
        font-size: 12px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }

    .see-all-news i {
        font-size: 18px;
    }

    .content-news {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 10px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-news {
        width: 100%; /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-news {
        width: 100%;
        height: fit-content;
        max-height: 120px;
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        display: flex;
        /* padding: 10px; */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image {
        width: 50%;
        /*border: 1px black solid;
        */
        background-color: #333;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        height: 100%;
    }

    .area-text-desk {
        width: 60%;
        height: fit-content;
    }

    .tag-news {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .date-news {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* ------------------ */
    /* area top info */

    .area-top-info {
        width: auto;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-top-info {
        width: 100%;
        height: fit-content;
    }

    .title-top-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 26px;
        font-weight: 200;
        /* color: white; */
    }

    .link-box-top-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .content-top-info {
        width: 100%; /* Pastikan kontainer fleksibel */
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .area-text-desk-top-info {
        /* width: 100%; */
        height: fit-content;
        max-height: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin-top: 10px;
        /* padding: 10px; */
        /* border: 1px rgb(40, 40, 40) solid; */
        border-radius: 8px;
    }

    .area-tag {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .tag-top-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    /* .area-text {
        height: 54px;
    } */

    .desk-top-info {
        font-size: 10px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
    }

    .date-top-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 8px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-top-info {
        width: 100%;
        height: 75px;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */

    /* area trending info */
    .area-trending-info {
        width: 100%;
        height: auto;
        /* margin-top: 20px; */
    }

    .header-trending-info {
        width: 100%;
        height: fit-content;
    }

    .title-trending-info {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 28px;
        font-weight: 200;
        /* color: white; */
    }

    .content-trending-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Membiarkan elemen turun jika tidak cukup ruang */
        gap: 15px; /* Mengatur jarak antar-elemen */
        box-sizing: border-box; /* Menghindari konflik padding/margin */
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .link-box-trending-info {
        width: calc(50% - 10px); /* Setengah kontainer minus setengah gap */
        color: black;
    }

    .box-trending-info {
        width: 100%;
        height: fit-content;
        /* max-height: 120px; */
        /* background-color: #f0f0f0; */
        border-radius: 10px;
        /* display: flex; */
        /* padding: 10px; */
        /* justify-content: center;
        align-items: center; */
        box-sizing: border-box;
        gap: 8px;
    }

    .area-image-trending-info {
        width: 100%;
        /*border: 1px black solid;
        */
        border-radius: 20px;

        background-color: #333;
        /* height: 100%; */
    }

    .line-trending-info {
        width: 100%;
        height: 5px;
        background-color: var(--primary-color);
        margin-top: 10px;
    }

    .tag-trending-info {
        font-family: "Bebas Neue";
        margin: 0px;
        font-size: 16px;
        font-weight: 500;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .desk-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 10px;
        overflow-wrap: break-word;
        padding: 2px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
        font-weight: 700;
    }

    .date-trending-info {
        font-family: "Poppins";
        margin: 0px;
        font-size: 8px;
        overflow-wrap: break-word;
        padding: 2px 0;
    }

    .image-trending-info {
        width: 100%;
        height: 50%;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Shadow */
    }
    /* ------------------- */
    /* ------------------- */
    /* ------------------- */

    /* area info & news */
    .page-ig-twitter {
        width: 100%;
        height: auto;
        /* background-color: #353535; */
        position: relative; /* Tambahkan posisi relatif untuk membuat SVG di belakang bekerja */
    }

    .area-ig-twitter {
        width: auto;
        height: auto;
        margin: 0px 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative; /* Pastikan elemen ini tidak absolute, agar tidak terpengaruh posisi lain */
        z-index: 1; /* Lebih tinggi dari SVG */
    }

    .line-ig-twitter {
        width: 100%;
        border: 2px white solid;
        margin-top: 15px;
        border-radius: 5px;
    }

    /* area-content-info-news */
    .area-content-ig-twitter {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
        margin-top: 30px;
        display: flex;
        gap: 50px;
    }
    /* ------- */

    /* area-content-info */
    .area-content-feed-instagram {
        width: 100%;
        height: 100%;
        /* border: 1px red solid; */
    }

    .header-feed-instagram {
        width: 100%;
        height: fit-content;
        /* border: 1px white solid; */
        text-align: start;
    }

    .title-feed-instagram {
        margin: 0px;
        font-family: "Bebas Neue";
        font-size: 36px;
        font-weight: 200;
        color: white;
    }

    .content-feed-instagram {
        width: auto;
        height: auto;
        margin-top: 10px;
    }

    .area-content-box-feed-instagram {
        width: 100%;
        display: flex;
        gap: 15px;
        overflow: hidden;
        box-sizing: border-box;
        /* padding: 0 10px; */
    }

    .box-feed-instagram {
        flex: 0 0 calc(33.33% - 13.5px);
        height: 280px;
        background-color: #f0f0f0;
        border-radius: 20px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* pop up feed instagram */
    .popup-feed {
        display: none; /* Sembunyikan pop-up secara default */
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
            0,
            0,
            0,
            0.5
        ); /* Latar belakang semi-transparan */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan pop-up di atas elemen lainnya */
    }

    .popup-content-feed {
        background-color: #fff;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        width: 450px;
        height: 200px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    .close {
        cursor: pointer;
        font-size: 20px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .area-info-feed {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* .desk-program {
    font-size: 18px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 300;
}

.jam-program {
    font-size: 16px;
    font-family: "Poppins";
    margin: 0px;
    font-weight: 500;
}

.title-box-program {
    font-size: 34px;
    font-family: "Bebas Neue";
    font-weight: 200;
    margin: 0px;
} */

    /* --------------------- */
    /* area-event */
    .area-event {
        height: auto;
        margin: 0px 8px;
    }

    .area-content-event {
        height: auto;
    }

    .area-group-event {
        width: 100%;
    }

    .area-content-groupE {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 10px;
    }

    .area-countdown {
        height: 50px;
        padding: 0px;
    }

    .area-days-date{
        padding: 8px;
    }

    .area-content-event-kiri {
        width: 100%;
        height: fit-content;
    }
    
    .content-event-CD{
        height: 162px;
    }

    .area-content-event-kanan {
        width: 100%;
    }


    .area-days-date-right {
        /* padding: 10px; */
        height: 20px;
        padding: 8px;
    }

    .box-days-date-right {
        width: auto;
    }

    .content-event {
        height: 162px;
    }

    .title-event {
        font-size: 26px;
    }

    .timer {
        font-size: 18px;
    }

    .title-timer {
        font-size: 10px;
    }

    .date-month,
    .year {
        font-size: 16px;
    }

    .date-month-right,
    .year-right {
        font-size: 16px;
    }

    /* pop up event */
    .popup-content-event {
        width: 200px;
        height: fit-content;
        padding: 15px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .area-info-event {
        gap: 3px;
    }

    .desk-event {
        font-size: 8px;
    }

    .jam-event {
        font-size: 10px;
    }

    .title-box-event {
        font-size: 18px;
    }

    .link-event {
        font-size: 10px;
    }

    /* -------------- */
    /* ---------- */
    /* area-info-news */
    /* area-podcast-video */
    .area-podcast-video {
        margin: 0px 8px 0px 8px;
    }

    .ornamen-PV-1 {
        right: 600;
    }

    .ornamen-PV-2 {
        display: none;
    }

    .ornamen-PV-2xl {
        display: block;
        right: 10;
        width: 420px;
        height: 412px;
    }

    .line-PV {
        height: 400px;
    }

    .area-content-PV {
        margin-top: 20px;
    }

    /* area-podcast */
    .area-content-podcast {
        width: 100%;
    }

    .title-podcast {
        font-size: 30px;
    }

    .logo-podcast {
        width: 58px;
        height: 68px;
    }

    .text-podcast {
        font-size: 12px;
    }

    .content-podcast {
        gap: 15px;
    }

    .card-podcast {
        width: calc(50% - 8px);
        height: fit-content;
    }

    /* .card-podcast .card-body-podcast {
        height: 60%;
        padding: 30px;
    } */

    .card-podcast .card-header-podcast .author-podcast {
        width: 50%;
        height: 45px;
    }
    .card-podcast .card-header-podcast .author-podcast::before {
        height: 50px;
        width: 50%;
    }

    .card-podcast .card-header-podcast .view-podcast {
        height: 20px;
        width: 80%;
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
    }

    .link-podcast {
        width: 100%;
        /* border: 1px red solid; */
        z-index: 10;
        text-decoration: none;
    }

    .text-watch-podcast {
        /* color: white; */
        font-family: "Poppins";
        font-size: 12px;
    }

    .card-text-podcast {
        font-size: 12px;
    }

    .card-image-podcast {
        height: fit-content;
    }

    .title-genre {
        font-size: 10px;
        /* margin: 4px 20px; */
    }
    /* ------------------ */

    /* area-video */
    .area-content-video {
        width: 100%;
    }

    .content-video{
        gap: 10px;
    }

    .title-video {
        font-size: 30px;
    }

    .box-video {
        height: 160px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-play-video span {
        font-size: 28px;
    }

    .text-video {
        font-size: 12px;
    }

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }
    /* -------------- */

    /* area-announcer */
    .page-6 {
        height: fit-content;
    }

    .svg-large {
        display: none;
    }

    .svg-small {
        display: block;
    }

    .svg-small-mobile {
        display: none;
    }

    .logo-announcer {
        width: 160px;
        height: 326px;
        left: 10px;
    }

    .area-content-announcer {
        width: 100%;
        height: auto;
    }

    .title-announcer {
        font-size: 32px;
    }

    .content-announcer {
        margin-top: 15px;
    }

    .area-tombol-announcer {
        justify-content: space-between;
    }

    .tombol-kiri-announcer,
    .tombol-kanan-announcer {
        width: 45px;
        height: 45px;
        top: 10px;
        transform: translateY(200%);
    }

    .tombol-kiri-announcer {
        left: 15px;
    }

    .tombol-kanan-announcer {
        right: 15px;
    }

    .area-content-box-announcer {
        gap: 15px;
        margin: 0px 8px;
        /* border: 1px red solid; */
    }

    .box-announcer {
        flex: 0 0 100%;
        height: fit-content;
    }

    .area-image-announcer{
        height: 341px;
    }

    .name-announcer-slide{
        font-size: 16px;
    }

    .line-announcer {
        margin: 20px 32px;
    }

    .popup-content-announcer {
        width: 220px;
        height: auto;
        max-height: 260px;
        padding: 10px;
    }

    /* .area-info-announcer{
        flex-direction: column;
    /* } */

    .area-IA-kiri {
        width: 50%;
    }

    .area-IA-kanan {
        width: 50%;
        gap: 6px;
    }

    .title-name-announcer {
        font-size: 10px;
    }

    .name-announcer {
        font-size: 12px;
    }

    .title-sosmed {
        font-size: 10px;
    }

    .area-profile-announcer {
        margin-top: 4px;
    }

    .area-profile-announcer i {
        font-size: 16px;
    }

    .title-bio {
        font-size: 10px;
    }

    .bio-announcer {
        font-size: 8px;
    }

    /* ---------------------- */

    /* area-chart-artis */

    .page-7 {
        height: fit-content;
    }

    .area-chart-artis {
        margin: 20px 8px 0px 8px;
    }

    .area-content-chart-artis {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .area-top-chart {
        width: 100%;
        height: auto;
        /* border: 1px green solid; */
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tab-chart {
        flex: 1 1 calc(33.33% - 20px);
        height: 40px;
        /* border: 2px var(--primary-color) solid; */
    }

    /* .tab-chart:hover {
        background-color: var(--primary-color);
        color: black;
    } */

    .text-tab {
        font-size: 18px;
        font-weight: 200;
        font-family: "Bebas Neue";
        margin: 20px 0px;
    }

    .area-chart-artis {
        width: auto;
        height: fit-content;
        margin-top: 20px;
    }

    .area-content-chart {
        width: 100%;
        height: auto;
        display: flex;
    }

    .content-chart {
        width: 100%;
    }

    .title-chart {
        font-size: 30px;
    }

    .chart {
        font-size: 16px;
        height: 55%;
    }

    .col-no{
        font-size: 8px;
    }

    .col-name{
        font-size: 8px;
    }

    .btn-play-chart span{
        font-size: 18px;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
    }

    tbody td {
        height: 30px;
    }

    .text-btn-chart {
        font-size: 10px;
    }

    .area-content-artis {
        width: 30%;
        padding: 20px 32px 20px 32px;
    }

    .title-artis {
        font-size: 36px;
    }

    .box-artis {
        height: 120px;
    }

    .nama {
        font-size: 10px;
    }

    .box-title-bottom-artis {
        margin-top: 5px;
    }

    .title-bottom-artis {
        font-size: 12px;
    }

    /* ----------------- */
    /* area-schedule */

    .page-8 {
        height: auto;
        /* border: 1px red solid; */
        margin-top: 15px;
    }

    .area-schedule {
        width: auto;
        height: auto;
        margin: 0px 8px;
    }

    .area-content-schedule {
        width: 100%;
        /* height: auto; */
        display: flex;
        flex-direction: column;
        /* border: 1px red solid; */
    }

    .header-schedule {
        width: 100%;
        height: fit-content;
    }

    .title-schedule {
        font-size: 26px;
        margin-bottom: 0px;
    }

    .top-content-schedule {
        width: auto;
        height: 40px;
    }

    .schedule {
        width: 120px;
        height: 25px;
        /* margin-top: 8px; */
        font-size: 16px;
    }

    .schedule-day {
        font-size: 7px;
    }

    .content-schedule {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        height: auto;
    }

    .box-schedule {
        height: fit-content;
        /* padding: 5px; */
    }

    .bio-schedule {
        padding: 5px 10px;
    }

    .nama-programs {
        font-size: 12px;
    }

    .jam-programs {
        font-size: 10px;
    }
    /* ---------------- */
    /* schedule mobile */
    .top-content-schedule-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        /* display: block;   */
    }

    .schedule-day-mobile {
        font-size: 0.8rem;
        font-weight: bold;
        color: black;
        margin: 0;
        font-family: "Poppins";
    }

    .nav-button {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .nav-button i {
        color: black;
        font-size: 24px;
    }

    .content-schedule-mobile {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 40px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        height: fit-content;
    }

    .box-schedule-mobile {
        display: none; /* Hanya tampilkan yang aktif */
        height: fit-content;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
        width: 50%;
    }

    .box-schedule-mobile.active {
        display: block;
        width: calc(50% - 5px);
        height: fit-content;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
    }
}