/* Desktop dan Laptop */
@media (min-width: 1920px) {
    .page-detail-1 {
        height: fit-content;
    }

    .area-detail-podcast {
        margin: 0px 128px 0px 128px;
        /* border: 1px red solid; */
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: block; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 507px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 73%;
        height: 60px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 60px;
        width: 27%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 30px;
        width: calc(22% - 2px);
        background-color: var(--secondary-color);
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .text-watchP {
        font-family: "Poppins";
    }

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 32px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: none; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        /* height: 100%; */
        /* background-color: white; */
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        gap: 12px;
        /* border-radius: 20px; */
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        /* color: rgb(238, 238, 238); */
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: calc(20% - 2px);
        background-color: var(--secondary-color);
        border-radius: 12px;
        padding: 10px;
        /* margin-top: 5px; */
        cursor: pointer;
    }

    .text-watchP-B {
        color: rgb(48, 48, 48);
        font-family: "Poppins";
        font-size: 14px;
    }

    .video-container {
        position: relative;
        /* padding-bottom: 42.85%; */
        height: 507px;
        overflow: hidden;
        width: 100%;
        background-color: black; /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

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

    .video-container iframe,
    .video-container #player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        margin-top: 0px;
    }

    .line-detail-podcast {
        margin: 20px 128px 30px 128px;
    }

    .area-header-DP {
        gap: 15px;
    }

    .detail-genre {
        font-size: 20px;
        padding: 10px 25px;
    }

    .detail-title {
        font-size: 34px;
    }

    .area-desk-detail-podcast {
        margin-top: 10px;
    }

    .area-desk-detail-podcast p{
        font-size: 18px;
        font-weight: 400;
    }
    /* ------------ */
    /* area detail kanan */

    .title-detail-kanan {
        font-size: 36px;
    }

    .area-episodeP {
        height: fit-content;
    }

    .card-episode {
        padding: 0;
    }

    .title-genre-episode {
        font-size: 18px;
        margin: 0px;
    }

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

    .card-image-podcast-episode {
        height: 223px;
    }

    #style-3::-webkit-scrollbar {
        width: 10px;
    }
    /* ---------------- */

    /* area other podcast */

    .page-detail-2 {
        margin-bottom: 00px;
    }

    .area-content-OP {
        padding: 0px 128px 0px 128px;
        margin-top: 0px;
        height: fit-content;
        padding-bottom: 20px;
    }

    .title-OP {
        font-size: 44px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 50px;
        width: 50px;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

    .card-podcast {
        width: calc(
            33.33% - 14px
        ); /* Membuat card mengambil 50% lebar, dengan margin antar card */
        height: fit-content;
    }

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: fit-content;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 0px;
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        /* border: 1px black solid; */
        border-radius: 5px;
    }

    .title-genre {
        font-size: 18px;
    }

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

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

    .card-image-podcast {
        width: 100%;
        height: 275px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 57%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 55px;
        width: 43%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: 85%;
        /* background-color: #ff004d; */
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */

    .page-detail-3 {
        height: fit-content;
    }

    .area-video-news-stream {
        margin: 0px 128px 0px 128px;
    }

    .area-content-VNS {
        gap: 25px;
        height: fit-content;
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 60%;
    }

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

    .content-kiri-video {
        gap: 17px;
        height: fit-content;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 20px;
        height: 200px;
    }

    .box-video-mid {
        height: 350px;
    }

    .btn-play-video {
        height: 45px;
        width: 45px;
    }

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

    .btn-play-video-mid {
        width: 55px;
        height: 55px;
    }

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

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

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        height: fit-content;
        gap: 10px;
    }

    .area-content-news {
        height: fit-content;
    }

    .content-news {
        height: fit-content;
    }

    /* area news */
    .title-news {
        font-size: 40px;
    }

    .box-news {
        height: fit-content;
        /* padding: 8px; */
    }

    .tag-top-info {
        font-size: 20px;
    }

    .desk-top-info {
        font-size: 18px;
    }

    .date-top-info {
        font-size: 16px;
    }
    /* ------------ */

    /* area content stream */

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

    .title-streaming {
        font-size: 44px;
    }

    .box-streaming {
        height: 280px;
    }

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

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

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

    /* -------------------- */
}
@media (max-width: 1366px) {
    .card-DP .card-DP-body {
        height: 361px;
    }

    .video-container {
        position: relative;
        /* padding-bottom: 56.25%; */
        height: 361px;
        overflow: hidden;
        width: 100%;
        background-color: black; /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .PlayerVid-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 361px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }
}
@media (max-width: 1280px) {
    .card-DP .card-DP-body {
        height: 405px;
    }

    .video-container {
        position: relative;
        /* padding-bottom: 56.25%; */
        height: 405px;
        overflow: hidden;
        width: 100%;
        background-color: black; /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

    .PlayerVid-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 405px; /* Rasio 16:9 (9 / 16 = 0.5625 * 100) */
    }
}
@media (min-width: 1024px) and (max-width: 1280px) {
    .page-detail-1 {
        height: fit-content;
    }

    .area-detail-podcast {
        margin: 0px 32px 0px 32px;
        /* border: 1px red solid; */
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: block; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 289px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 73%;
        height: 60px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 60px;
        width: 27%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 30px;
        width: calc(22% - 2px);
        background-color: var(--secondary-color);
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .text-watchP {
        font-family: "Poppins";
        font-size: 14px;
    }

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

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 32px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: none; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        /* height: 100%; */
        /* background-color: white; */
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        gap: 12px;
        /* border-radius: 20px; */
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        /* color: rgb(238, 238, 238); */
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: calc(20% - 2px);
        background-color: var(--primary-color);
        border-radius: 12px;
        padding: 10px;
        /* margin-top: 5px; */
        cursor: pointer;
    }

    .text-watchP-B {
        font-family: "Poppins";
        font-size: 14px;
    }

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

    .video-container {
        position: relative;
        /* padding-bottom: 56.25%; */
        height: 289px;
        overflow: hidden;
        width: 100%;
        background-color: black; /* Optional: background color if needed */
        /* border: 1px red solid; */
    }

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

    .video-container iframe,
    .video-container #player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        margin-top: 0px;
    }

    .line-detail-podcast {
        margin: 20px 32px 30px 32px;
    }

    .area-header-DP {
        gap: 15px;
    }

    .detail-genre {
        font-size: 16px;
        padding: 6px 25px;
    }

    .detail-title {
        font-size: 22px;
    }

    .area-desk-detail-podcast {
        margin-top: 5px;
    }

    .area-desk-detail-podcast p {
        font-size: 16px;
    }

    .desk-podcast {
        font-size: 14px;
        font-weight: 200;
    }
    /* ------------ */
    /* area detail kanan */

    .title-detail-kanan {
        font-size: 24px;
    }

    .area-episodeP {
        height: fit-content;
    }

    .card-episode {
        padding: 0px;
    }

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

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

    .card-image-podcast-episode {
        height: 124px;
    }

    #style-3::-webkit-scrollbar {
        width: 10px;
    }
    /* ---------------- */

    /* area other podcast */

    .area-content-OP {
        padding: 0px 32px 20px 32px;
        /* margin-top: 40px; */
        height: fit-content;
    }

    .title-OP {
        font-size: 34px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 10px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 50px;
        width: 50px;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

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

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: fit-content;
        background-color: white;
        padding: 0px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        margin-top: 0px;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        /* border: 1px black solid; */
        border-radius: 5px;
    }

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

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

    .card-text-podcast {
        font-size: 18px;
        -webkit-line-clamp: 2; /* Membatasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden; /* Menyembunyikan sisa teks yang tidak muat */
        text-overflow: ellipsis;
    }

    .card-image-podcast {
        width: 100%;
        height: 151px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 57%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 55px;
        width: 43%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: 85%;
        /* background-color: #ff004d; */
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */

    .page-detail-3 {
        height: fit-content;
    }

    .area-video-news-stream {
        margin: 0px 32px 0px 32px;
    }

    .area-content-VNS {
        gap: 10px;
        height: fit-content;
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 55%;
    }

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

    .content-kiri-video {
        gap: 10px;
        height: fit-content;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 10px;
        height: 150px;
    }

    .box-video-mid {
        height: 300px;
    }

    .btn-play-video {
        height: 45px;
        width: 45px;
    }

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

    .btn-play-video-mid {
        width: 55px;
        height: 55px;
    }

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

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

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        height: fit-content;
        gap: 10px;
    }

    .area-content-news {
        height: fit-content;
    }

    .content-news {
        height: auto;
    }

    /* area news */
    .title-news {
        font-size: 34px;
    }

    .box-news {
        height: fit-content;
        /* padding: 8px; */
    }

    .area-image {
        height: 100%;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }

    .more-news {
        font-size: 16px;
    }

    .more-news i {
        font-size: 20px;
    }

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

    /* area content stream */

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

    .title-streaming {
        font-size: 34px;
    }

    .box-streaming {
        height: 195px;
    }

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

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

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

    /* -------------------- */
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-detail-1 {
        height: fit-content;
    }

    .area-detail-podcast {
        margin: 0px 20px 0px 20px;
        /* border: 1px red solid; */
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: block; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 217px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 68%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 55px;
        width: 32%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        color: rgb(238, 238, 238);
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(26% - 2px);
        background-color: var(--secondary-color);
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .text-watchP {
        color: white;
        font-family: "Poppins";
        font-size: 12px;
    }

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 26px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: none; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        /* height: 100%; */
        /* background-color: white; */
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        gap: 12px;
        /* border-radius: 20px; */
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        color: rgb(238, 238, 238);
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(23% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP-B {
        font-family: "Poppins";
        font-size: 12px;
    }

    .video-container {
        position: relative;
        width: 100%;
        height: fit-content;
        /* padding-bottom: 65.25%; */
        height: 217px;
        overflow: hidden;
    }

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

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        margin-top: 0px;
    }

    .line-detail-podcast {
        margin-bottom: 20px;
    }

    .area-header-DP {
        gap: 15px;
    }

    .detail-genre {
        font-size: 14px;
        padding: 6px 20px;
    }

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

    .area-desk-detail-podcast {
        margin-top: 3px;
        /* border: 1px red solid; */
        height: fit-content;
    }

    .area-desk-detail-podcast p {
        font-size: 12px;
        /* height: 330px; */
    }

    .desk-podcast {
        font-size: 14px;
        font-weight: 200;
    }
    /* ------------ */
    /* area detail kanan */

    .title-detail-kanan {
        font-size: 22px;
    }

    .area-episodeP {
        height: fit-content;
    }

    .card-episode {
        padding: 0px;
    }

    .title-genre-episode {
        font-size: 12px;
        margin: 0;
    }

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

    .card-image-podcast-episode {
        height: 126px;
    }

    #style-3::-webkit-scrollbar {
        width: 8px;
    }
    /* ---------------- */
    /* area other podcast */

    .page-detail-2 {
        height: auto;
    }

    .area-content-OP {
        padding: 0px 20px 0px 20px;
        margin-top: 0px;
        height: fit-content;
    }

    .title-OP {
        font-size: 34px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 0px;
        padding-bottom: 15px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 50px;
        width: 50px;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

    .card-podcast {
        width: calc(
            33.33% - 14px
        ); /* Membuat card mengambil 50% lebar, dengan margin antar card */
        height: fit-content;
    }

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: fit-content;
        background-color: white;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 0px;
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        /* border: 1px black solid; */
        border-radius: 5px;
    }

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

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

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

    .card-image-podcast {
        width: 100%;
        height: 126px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 57%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 55px;
        width: 43%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: 85%;
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */

    .page-detail-3 {
        height: fit-content;
    }

    .area-video-news-stream {
        margin: 0px 20px 0px 20px;
    }

    .area-content-VNS {
        gap: 10px;
        /* margin-top: 25px; */
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 55%;
        /* border: 1px green solid; */
    }

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

    .content-kiri-video {
        gap: 10px;
        height: 500px;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 10px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
    }

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

    .btn-play-video-mid {
        width: 50px;
        height: 50px;
    }

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

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

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        height: fit-content;
        gap: 6px;
        /* border: 1px red solid; */
    }

    /* area news */

    .content-news {
        height: 100%;
        /* border: 1px blue solid; */
        gap: 10px;
        margin-top: 6px;
    }

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

    .link-box-news {
        width: calc(25% - 5px);
    }

    .box-news {
        height: fit-content;
        /* padding: 8px; */
    }

    .area-image {
        border-radius: 10px;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }

    .more-news {
        font-size: 14px;
    }

    .more-news i {
        font-size: 18px;
    }
    /* ------------ */

    /* area content stream */

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

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

    .box-streaming {
        height: 160px;
    }

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

    .btn-play-streaming span {
        font-size: 26px;
    }
    /* ------------------- */
    /* --------------- */

    /* -------------------- */
}
@media (max-width: 600px) {
    /* Gaya untuk tablet kecil atau phablet */
}
/* Mobile Devices */
@media (max-width: 480px) {
    .page-detail-1 {
        height: auto;
    }

    .area-detail-podcast {
        margin: 0px 8px 0px 8px;
        /* border: 1px red solid; */
        flex-direction: column;
    }

    .area-detail-kiri {
        width: 100%;
        flex-direction: column;
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: block; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 221px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .area-image-DP {
        width: 100%;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 68%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50px;
        width: 32%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        color: rgb(238, 238, 238);
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(25% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .text-watchP {
        color: white;
        font-family: "Poppins";
        font-size: 10px;
    }

    .text-watchP i {
        font-size: 16px;
    }

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 26px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: none; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        overflow: hidden;
        display: flex;
        gap: 12px;
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(25% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP-B {
        font-family: "Poppins";
        font-size: 10px;
    }

    .text-watchP-B i {
        font-size: 16px;
    }

    .video-container {
        position: relative;
        width: 100%;
        height: 221px;
        /* padding-bottom: 50.25%; */
        overflow: hidden;
    }

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

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        width: 100%;
        margin-top: 10px;
        flex-direction: column;
    }

    .content-detail-kiri {
        width: 100%;
    }

    .line-detail-podcast {
        margin: 20px 8px;
    }

    .area-header-DP {
        gap: 10px;
    }

    .detail-genre {
        font-size: 14px;
        padding: 4px 15px;
        border-radius: 5px;
    }

    .detail-title {
        font-size: 18px;
    }

    .area-desk-detail-podcast {
        margin-top: 5px;
        /* border: 1px red solid; */
        height: fit-content;
    }

    .desk-podcast {
        font-size: 12px;
        font-weight: 200;
    }
    /* ------------ */
    /* area detail kanan */

    .area-detail-kanan {
        width: 100%;
    }

    .title-detail-kanan {
        font-size: 20px;
    }

    .card-episode {
        margin-right: 0px;
        flex: 0 0 calc(50% - 20px);
        padding: 0px;
        margin-bottom: 0px;
        /* display: none; */
    }

    /* .card-episode.visible {
        display: block;
        margin-right: 0px;
        width: calc(50% - 10px);
        padding: 8px;
        margin-bottom: 0px;
    } */

    .title-genre-episode {
        font-size: 12px;
        margin: 0;
    }

    .card-text-podcast-episode {
        font-size: 16px;
        -webkit-line-clamp: 1;
    }

    .card-image-podcast-episode {
        height: 100px;
    }

    #style-3::-webkit-scrollbar {
        width: 8px;
    }

    .area-see-more {
        width: 100%;
        height: fit-content;
        display: block;
        text-align: center;
    }

    .text-see-more {
        font-size: 14px;
        font-weight: 300;
        font-family: "Poppins";
        color: var(--secondary-color);
    }
    /* ---------------- */
    /* area other podcast */

    .area-content-OP {
        padding: 0px 8px 0px 8px;
        margin-top: 0px;
        height: fit-content;
    }

    .title-OP {
        font-size: 30px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 10px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 40px;
        width: 40px;
        top: 40;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

    .card-podcast {
        flex: 1 0 100%; /* Membuat card mengambil 50% lebar, dengan margin antar card */
        height: fit-content;
    }

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: fit-content;
        background-color: white;
        padding: 0px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        /* padding: 15px; */
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        /* border: 1px black solid; */
        border-radius: 5px;
    }

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

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

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

    .card-image-podcast {
        width: 100%;
        height: 203px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 57%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 55px;
        width: 43%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: 85%;
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */
    .page-detail-3 {
        height: auto;
    }

    .area-video-news-stream {
        margin: 0px 8px 0px 8px;
    }

    .area-content-VNS {
        gap: 0px;
        flex-direction: column;
        margin-bottom: 30px;
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 100%;
        /* border: 1px green solid; */
    }

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

    .content-kiri-video {
        gap: 10px;
        height: 500px;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 10px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
    }

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

    .btn-play-video-mid {
        width: 50px;
        height: 50px;
    }

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

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        /* gap: 6px; */
        /* border: 1px red solid; */
        height: fit-content;
    }

    /* area news */

    .content-news {
        height: fit-content;
        /* border: 1px blue solid; */
        flex-wrap: wrap;
    }

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

    .link-box-news {
        width: calc(50% - 6px);
    }

    .box-news {
        height: fit-content;
        width: 100%;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /* ------------ */

    /* area content stream */

    .content-streaming {
        height: fit-content;
        /* border: 1px  red solid; */
    }

    .title-streaming {
        padding-top: 10px;
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

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

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

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }
    /* ------------------- */
    /* --------------- */

    /* -------------------- */
}
@media (max-width: 390px) {
    .page-detail-1 {
        height: auto;
    }

    .area-detail-podcast {
        margin: 0px 8px 0px 8px;
        /* border: 1px red solid; */
        flex-direction: column;
    }

    .area-detail-kiri {
        width: 100%;
        flex-direction: column;
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: block; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 201px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .area-image-DP {
        width: 100%;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 68%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50px;
        width: 32%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        color: rgb(238, 238, 238);
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(25% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .text-watchP {
        color: white;
        font-family: "Poppins";
        font-size: 10px;
    }

    .text-watchP i {
        font-size: 16px;
    }

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 26px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: none; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        overflow: hidden;
        display: flex;
        gap: 12px;
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(25% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP-B {
        font-family: "Poppins";
        font-size: 10px;
    }

    .text-watchP-B i {
        font-size: 16px;
    }

    .video-container {
        position: relative;
        width: 100%;
        height: 201px;
        /* padding-bottom: 50.25%; */
        overflow: hidden;
    }

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

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        width: 100%;
        margin-top: 10px;
        flex-direction: column;
    }

    .content-detail-kiri {
        width: 100%;
    }

    .line-detail-podcast {
        margin: 20px 8px;
    }

    .area-header-DP {
        gap: 10px;
    }

    .detail-genre {
        font-size: 14px;
        padding: 4px 15px;
        border-radius: 5px;
    }

    .detail-title {
        font-size: 18px;
    }

    .area-desk-detail-podcast {
        margin-top: 5px;
        /* border: 1px red solid; */
        height: fit-content;
    }

    .desk-podcast {
        font-size: 12px;
        font-weight: 200;
    }
    /* ------------ */
    /* area detail kanan */

    .area-detail-kanan {
        width: 100%;
    }

    .title-detail-kanan {
        font-size: 20px;
    }

    .card-episode {
        margin-right: 0px;
        flex: 0 0 calc(50% - 20px);
        padding: 0px;
        margin-bottom: 0px;
        /* display: none; */
    }

    /* .card-episode.visible {
        display: block;
        margin-right: 0px;
        width: calc(50% - 10px);
        padding: 8px;
        margin-bottom: 0px;
    } */

    .title-genre-episode {
        font-size: 12px;
        margin: 0;
    }

    .card-text-podcast-episode {
        font-size: 16px;
        -webkit-line-clamp: 1;
    }

    .card-image-podcast-episode {
        height: 89px;
    }

    #style-3::-webkit-scrollbar {
        width: 8px;
    }

    .area-see-more {
        width: 100%;
        height: fit-content;
        display: block;
        text-align: center;
    }

    .text-see-more {
        font-size: 14px;
        font-weight: 300;
        font-family: "Poppins";
        color: var(--secondary-color);
    }
    /* ---------------- */
    /* area other podcast */

    .area-content-OP {
        padding: 0px 8px 0px 8px;
        margin-top: 0px;
        height: fit-content;
    }

    .title-OP {
        font-size: 30px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 10px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 40px;
        width: 40px;
        top: 40;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

    .card-podcast {
        flex: 1 0 100%; /* Membuat card mengambil 50% lebar, dengan margin antar card */
        height: fit-content;
    }

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: fit-content;
        background-color: white;
        padding: 0px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        /* padding: 15px; */
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        /* border: 1px black solid; */
        border-radius: 5px;
    }

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

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

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

    .card-image-podcast {
        width: 100%;
        height: 203px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 57%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 55px;
        width: 43%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: 85%;
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */
    .page-detail-3 {
        height: auto;
    }

    .area-video-news-stream {
        margin: 0px 8px 0px 8px;
    }

    .area-content-VNS {
        gap: 0px;
        flex-direction: column;
        margin-bottom: 30px;
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 100%;
        /* border: 1px green solid; */
    }

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

    .content-kiri-video {
        gap: 10px;
        height: 500px;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 10px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
    }

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

    .btn-play-video-mid {
        width: 50px;
        height: 50px;
    }

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

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        /* gap: 6px; */
        /* border: 1px red solid; */
        height: fit-content;
    }

    /* area news */

    .content-news {
        height: fit-content;
        /* border: 1px blue solid; */
        flex-wrap: wrap;
    }

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

    .link-box-news {
        width: calc(50% - 6px);
    }

    .box-news {
        height: fit-content;
        width: 100%;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /* ------------ */

    /* area content stream */

    .content-streaming {
        height: fit-content;
        /* border: 1px  red solid; */
    }

    .title-streaming {
        padding-top: 10px;
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

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

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

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }
    /* ------------------- */
    /* --------------- */

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

@media (max-width: 375px) {
    .page-detail-1 {
        height: auto;
    }

    .area-detail-podcast {
        margin: 0px 8px 0px 8px;
        /* border: 1px red solid; */
        flex-direction: column;
    }

    .area-detail-kiri {
        width: 100%;
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: none; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 193px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 68%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50px;
        width: 32%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        color: rgb(238, 238, 238);
        justify-content: center;
        align-items: center;
        display: flex;
        height: 12px;
        width: calc(25% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP {
        color: white;
        font-family: "Poppins";
        font-size: 10px;
    }

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 22px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: none; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        overflow: hidden;
        display: flex;
        gap: 12px;
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: start;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 12px;
        width: calc(25% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 10px;
        /*margin-top: 5px;
        */
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP-B {
        font-family: "Poppins";
        font-size: 10px;
    }

    .video-container {
        position: relative;
        width: 100%;
        height: 193px;
        /* padding-bottom: 52.25%; */
        overflow: hidden;
    }

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

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        margin-top: 6px;
        flex-direction: column;
    }

    .content-detail-kiri {
        width: 100%;
    }

    .area-detail-kiri {
        margin-bottom: 15px;
    }

    .line-detail-podcast {
        margin: 20px 8px;
    }

    .area-header-DP {
        gap: 10px;
    }

    .area-detail-genre {
        width: 100px;
        height: 100%;
        /* border: 1px white solid; */
    }

    .detail-genre {
        font-size: 14px;
        padding: 3px 3px;
        border-radius: 5px;
    }

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

    .area-desk-detail-podcast {
        margin-top: 5px;
        /* border: 1px red solid; */
        height: fit-content;
    }

    .desk-podcast {
        font-size: 12px;
        font-weight: 200;
    }
    /* ------------ */
    /* area detail kanan */

    .area-detail-kanan {
        width: 100%;
    }

    .title-detail-kanan {
        font-size: 20px;
    }

    .area-episodeP {
        width: 100%;
    }

    .card-episode {
        margin-right: 0px;
        flex: 0 0 100%;
        padding: 0px;
        margin-bottom: 0px;
    }

    .title-genre-episode {
        font-size: 12px;
        margin: 0px;
    }

    .card-text-podcast-episode {
        font-size: 18px;
        -webkit-line-clamp: 1;
    }

    .card-image-podcast-episode {
        height: 182px;
    }

    #style-3::-webkit-scrollbar {
        width: 8px;
    }

    .area-see-more {
        width: 100%;
        height: fit-content;
        display: block;
        text-align: center;
    }

    .text-see-more {
        font-size: 14px;
        font-weight: 300;
        font-family: "Poppins";
        color: var(--secondary-color);
    }
    /* ---------------- */
    /* area other podcast */

    .area-content-OP {
        padding: 0px 8px 0px 8px;
        margin-top: 0px;
        height: fit-content;
    }

    .title-OP {
        font-size: 30px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 5px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 40px;
        width: 40px;
        top: 40;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

    .card-podcast {
        flex: 1 0 100%; /* Membuat card mengambil 50% lebar, dengan margin antar card */
        height: fit-content;
    }

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: 65%;
        background-color: white;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 0px;
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        border-radius: 5px;
    }

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

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

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

    .card-image-podcast {
        width: 100%;
        height: 175px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 57%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 55px;
        width: 43%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 25px;
        width: 85%;
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */

    .page-detail-3 {
        height: auto;
    }

    .area-video-news-stream {
        margin: 0px 8px 0px 8px;
    }

    .area-content-VNS {
        gap: 20px;
        flex-direction: column;
        margin-bottom: 30px;
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 100%;
        /* border: 1px green solid; */
    }

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

    .content-kiri-video {
        gap: 10px;
        height: 500px;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 10px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
    }

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

    .btn-play-video-mid {
        width: 50px;
        height: 50px;
    }

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

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        height: fit-content;
        /* gap: 6px; */
        /* border: 1px red solid; */
    }

    /* area news */

    .content-news {
        height: 100%;
        /* border: 1px blue solid; */
    }

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

    .image-top-info {
        border-radius: 6px;
    }

    .box-news {
        height: fit-content;
        /* padding: 8px; */
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /* ------------ */

    /* area content stream */

    .content-streaming {
        height: fit-content;
        /* border: 1px  red solid; */
    }

    .title-streaming {
        padding-top: 10px;
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

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

    .btn-play-streaming span {
        font-size: 20px;
    }
    /* ------------------- */
    /* --------------- */

    /* -------------------- */
}
@media (max-width: 344px) {
    .page-detail-1 {
        height: auto;
    }

    .area-detail-podcast {
        margin: 0px 8px 0px 8px;
        /* border: 1px red solid; */
        flex-direction: column;
    }

    .area-detail-kiri {
        width: 100%;
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: none; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 162px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
        border-bottom-right-radius: 20px;
        border-radius: 6px;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 68%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50px;
        width: 32%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        color: rgb(238, 238, 238);
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(27% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 8px;
        margin-top: 10px;
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP {
        color: white;
        font-family: "Poppins";
        font-size: 8px;
    }

    .text-watchP i {
        font-size: 12px;
    }

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 22px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: block; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        overflow: hidden;
        display: flex;
        gap: 12px;
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: start;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(27% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP-B {
        font-family: "Poppins";
        font-size: 8px;
    }

    .text-watchP-B i {
        font-size: 12px;
    }

    .video-container {
        position: relative;
        width: 100%;
        height: 162px;
        /* padding-bottom: 58.25%; */
        overflow: hidden;
    }

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

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        margin-top: 8px;
        flex-direction: column;
    }

    .content-detail-kiri {
        width: 100%;
    }

    .line-detail-podcast {
        margin: 20px 8px;
    }

    .area-header-DP {
        gap: 10px;
    }

    .area-detail-genre {
        width: fit-content;
        height: 100%;
        /* border: 1px white solid; */
    }

    .detail-genre {
        font-size: 12px;
        padding: 4px 20px;
        border-radius: 5px;
    }

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

    .area-desk-detail-podcast {
        margin-top: 5px;
        /* border: 1px red solid; */
        height: fit-content;
    }

    .area-desk-detail-podcast p {
        font-size: 10px;
    }

    .desk-podcast {
        font-size: 10px;
        font-weight: 200;
    }
    /* ------------ */
    /* area detail kanan */

    .area-detail-kanan {
        width: 100%;
    }

    .title-detail-kanan {
        font-size: 18px;
    }

    .area-episodeP {
        height: auto;
        gap: 10px;
        width: 100%;
    }

    .card-episode {
        margin-right: 0px;
        padding: 0px;
        flex: 0 0 100%;
        margin-bottom: 0px;
    }

    .title-genre-episode {
        font-size: 12px;
        margin: 0px;
    }

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

    .card-image-podcast-episode {
        height: 152px;
    }

    #style-3::-webkit-scrollbar {
        width: 8px;
    }

    .area-see-more {
        width: 100%;
        height: fit-content;
        display: block;
        text-align: center;
    }

    .text-see-more {
        font-size: 14px;
        font-weight: 300;
        font-family: "Poppins";
        color: var(--secondary-color);
    }
    /* ---------------- */
    /* area other podcast */

    .area-content-OP {
        padding: 0px 8px 0px 8px;
        margin-top: 0px;
        height: fit-content;
    }

    .title-OP {
        font-size: 26px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 5px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 40px;
        width: 40px;
        top: 40;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

    .card-podcast {
        width: 100%; /* Membuat card mengambil 50% lebar, dengan margin antar card */
        height: fit-content;
    }

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: fit-content;
        background-color: white;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 0px;
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        border-radius: 5px;
    }

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

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

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

    .card-image-podcast {
        width: 100%;
        height: 144px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 48%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 52px;
        width: 52%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 22px;
        width: 82%;
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */

    .page-detail-3 {
        height: auto;
    }

    .area-video-news-stream {
        margin: 0px 8px 0px 8px;
    }

    .area-content-VNS {
        gap: 20px;
        flex-direction: column;
        margin-bottom: 30px;
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 100%;
        /* border: 1px green solid; */
    }

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

    .content-kiri-video {
        gap: 10px;
        height: 500px;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 10px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
    }

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

    .btn-play-video-mid {
        width: 50px;
        height: 50px;
    }

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

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        height: fit-content;
        /* gap: 6px; */
        /* border: 1px red solid; */
    }

    /* area news */

    .content-news {
        height: fit-content;
        /* border: 1px blue solid; */
        gap: 10px;
        margin-top: 0px;
    }

    .header-news {
        text-align: start;
    }

    .title-news {
        font-size: 26px;
    }

    .box-news {
        height: fit-content;
        /* padding: 5px;
        gap: 4px; */
    }

    .tag-top-info {
        font-size: 12px;
    }

    .desk-top-info {
        font-size: 10px;
    }

    .date-top-info {
        font-size: 8px;
    }
    /* ------------ */

    /* area content stream */

    .content-streaming {
        height: fit-content;
        /* border: 1px  red solid; */
        margin-top: 0px;
    }

    .title-streaming {
        padding-top: 10px;
        font-size: 26px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

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

    .btn-play-streaming span {
        font-size: 20px;
    }
    /* ------------------- */
    /* --------------- */

    /* -------------------- */
}
@media (max-width: 320px) {
    .page-detail-1 {
        height: auto;
    }

    .area-detail-podcast {
        margin: 0px 8px 0px 8px;
        /* border: 1px red solid; */
        flex-direction: column;
    }

    .area-detail-kiri {
        width: 100%;
    }

    .card-DP {
        width: 100%;
        /* background-color: darkgrey; */
        /* display: block; */
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* height: 350px; */
    }

    .card-DP .card-DP-header {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP .card-DP-body {
        /* width: 100%; */
        height: 162px;
        background-color: white;
        /* padding: 30px; */
        overflow: hidden;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        gap: 12px;
        border-bottom-right-radius: 20px;
        border-radius: 6px;
    }

    .card-DP .card-DP-header .DP-author {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 68%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-author::before {
        background-color: transparent;
        border-top-left-radius: 20px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50px;
        width: 32%;
        content: "";
        cursor: pointer;
        /* border: 1px black solid; */
    }

    .card-DP .card-DP-header .DP-view {
        font-weight: 600;
        color: rgb(238, 238, 238);
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(27% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 8px;
        margin-top: 10px;
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP {
        color: white;
        font-family: "Poppins";
        font-size: 8px;
    }

    .text-watchP i {
        font-size: 12px;
    }

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

    .btn-play-DP span {
        /* color: rgb(238, 238, 238); */
        font-size: 22px;
    }

    /* card B */
    .card-DP-B {
        width: 100%;
        /* display: none; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        /* border: 1px green solid; */
        height: auto;
    }

    .card-DP-B .card-header-DP-B {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-DP-B .card-body-DP-B {
        width: auto;
        overflow: hidden;
        display: flex;
        gap: 12px;
        /* border: 1px red solid; */
    }

    .card-DP-footer {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: start;
        margin-top: 10px;
    }

    .card-DP-B .view-DP-B {
        font-weight: 600;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 15px;
        width: calc(27% - 2px);
        background-color: var(--secondary-color);
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .text-watchP-B {
        font-family: "Poppins";
        font-size: 8px;
    }

    .text-watchP-B i {
        font-size: 12px;
    }

    .video-container {
        position: relative;
        width: 100%;
        height: 162px;
        /* padding-bottom: 58.25%; */
        overflow: hidden;
    }

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

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    /* ---------------------- */
    /* animasi */
    /* Kelas untuk menampilkan card dengan animasi */
    .card-DP.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: fit-content;
    }
    .card-DP-B.show {
        opacity: 1;
        transform: translateY(0);
        width: 100%;
        height: auto;
    }

    /* Kelas untuk menyembunyikan card dengan animasi */
    .card-DP.hide,
    .card-DP-B.hide {
        opacity: 0;
        transform: translateY(20px);
    }

    /* content */
    .content-detail-podcast {
        margin-top: 8px;
        flex-direction: column;
    }

    .content-detail-kiri {
        width: 100%;
    }

    .line-detail-podcast {
        margin: 20px 8px;
    }

    .area-header-DP {
        gap: 10px;
    }

    .area-detail-genre {
        width: fit-content;
        height: 100%;
        /* border: 1px white solid; */
    }

    .detail-genre {
        font-size: 12px;
        padding: 4px 20px;
        border-radius: 5px;
    }

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

    .area-desk-detail-podcast {
        margin-top: 5px;
        /* border: 1px red solid; */
        height: fit-content;
    }

    .area-desk-detail-podcast p {
        font-size: 10px;
    }

    .desk-podcast {
        font-size: 10px;
        font-weight: 200;
    }
    /* ------------ */
    /* area detail kanan */

    .area-detail-kanan {
        width: 100%;
    }

    .title-detail-kanan {
        font-size: 18px;
    }

    .area-episodeP {
        height: auto;
        gap: 10px;
        width: 100%;
    }

    .card-episode {
        margin-right: 0px;
        padding: 0px;
        flex: 0 0 100%;
        margin-bottom: 0px;
    }

    .title-genre-episode {
        font-size: 12px;
        margin: 0px;
    }

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

    .card-image-podcast-episode {
        height: 152px;
    }

    #style-3::-webkit-scrollbar {
        width: 8px;
    }

    .area-see-more {
        width: 100%;
        height: fit-content;
        display: block;
        text-align: center;
    }

    .text-see-more {
        font-size: 14px;
        font-weight: 300;
        font-family: "Poppins";
        color: var(--secondary-color);
    }
    /* ---------------- */
    /* area other podcast */

    .area-content-OP {
        padding: 0px 8px 0px 8px;
        margin-top: 0px;
        height: fit-content;
    }

    .title-OP {
        font-size: 26px;
        padding: 25px 0px 5px 0px;
    }

    .content-OP {
        margin-top: 5px;
    }

    .area-content-card-OP {
        width: 100%;
        display: flex;
        gap: 20px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 0px;
    }

    .tombol-kiri-OP,
    .tombol-kanan-OP {
        height: 40px;
        width: 40px;
        top: 40;
    }

    .tombol-kanan-OP {
        right: -15;
    }

    .tombol-kiri-OP {
        left: -15;
    }

    .card-podcast {
        width: 100%; /* Membuat card mengambil 50% lebar, dengan margin antar card */
        height: fit-content;
    }

    .card-podcast .card-header-podcast {
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 100%;
        /* border: 1px red solid; */
    }

    .card-podcast .card-body-podcast {
        /* width: 100%; */
        height: fit-content;
        background-color: white;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 0px;
    }

    .head-body-podcast {
        width: 100%;
        height: auto;
        /* border: 1px black solid; */
    }

    .genre {
        width: fit-content;
        height: fit-content;
        text-align: center;
        border-radius: 5px;
    }

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

    .area-card-text {
        width: fit-content;
        height: fit-content;
    }

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

    .card-image-podcast {
        width: 100%;
        height: 144px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .card-podcast .card-header-podcast .author-podcast {
        color: #333;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        width: 48%;
        height: 50px;
        display: flex;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .author-podcast::before {
        background-color: transparent;
        border-top-left-radius: 10px;
        box-shadow: -30px -30px 0 white;
        position: absolute;
        bottom: 0;
        right: 0;
        height: 52px;
        width: 52%;
        content: "";
        /* border: 1px black solid; */
    }

    .card-podcast .card-header-podcast .view-podcast {
        font-weight: 600;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        height: 22px;
        width: 82%;
        border-radius: 12px;
        padding: 10px;
        margin-top: 10px;
    }

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

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

    /* area VNS */

    .page-detail-3 {
        height: auto;
    }

    .area-video-news-stream {
        margin: 0px 8px 0px 8px;
    }

    .area-content-VNS {
        gap: 20px;
        flex-direction: column;
        margin-bottom: 30px;
    }

    /* content kiri */

    .area-content-VNS-kiri {
        width: 100%;
        /* border: 1px green solid; */
    }

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

    .content-kiri-video {
        gap: 10px;
        height: 500px;
    }

    .area-video-top,
    .area-video-bottom {
        gap: 10px;
    }

    .btn-play-video {
        height: 35px;
        width: 35px;
    }

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

    .btn-play-video-mid {
        width: 50px;
        height: 50px;
    }

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

    .popup-content-yt {
        width: 320px;
        height: 180px;
    }

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

    /* content kanan */
    .area-content-VNS-kanan {
        width: 100%;
        height: fit-content;
        /* gap: 6px; */
        /* border: 1px red solid; */
    }

    /* area news */

    .content-news {
        height: fit-content;
        /* border: 1px blue solid; */
        gap: 10px;
        margin-top: 0px;
    }

    .header-news {
        text-align: start;
    }

    .title-news {
        font-size: 26px;
    }

    .box-news {
        height: fit-content;
        /* padding: 5px;
        gap: 4px; */
    }

    .tag-top-info {
        font-size: 12px;
    }

    .desk-top-info {
        font-size: 10px;
    }

    .date-top-info {
        font-size: 8px;
    }
    /* ------------ */

    /* area content stream */

    .content-streaming {
        height: fit-content;
        /* border: 1px  red solid; */
        margin-top: 0px;
    }

    .title-streaming {
        padding-top: 10px;
        font-size: 26px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

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

    .btn-play-streaming span {
        font-size: 20px;
    }
    /* ------------------- */
    /* --------------- */

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