@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
    --primary-color: #0d95d8;
    --secondary-color: #0d95d8;
    /* --secondary-color: #ff5b00; */
    /* --neutral-color:; */
}

/* warna oranamen
  #7C00FE
  
  */

a {
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

body {
    background: white;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

/* Wrapper untuk mengatur posisi tombol */
#floatingButtons {
    position: fixed;
    bottom: 90px; /* Jarak dari bawah */
    right: 20px; /* Jarak dari kanan */
    display: flex;
    flex-direction: column; /* Tombol disusun vertikal */
    align-items: flex-end; /* Rata ke kanan */
    gap: 10px; /* Jarak antar tombol */
    z-index: 100;
}

/* Tombol Scroll to Top */
#scrollToTopBtn {
    background-color: white;
    color: black;
    border-radius: 50%;
    /* padding: 15px; */
    font-size: 20px;
    height: 60px; /* Ukuran tombol bulat */
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 1px rgb(64, 64, 64) solid;
}

/* #scrollToTopBtn:hover {
    background-color: var(--primary-color);
    color: black;
} */

#scrollToTopBtn i {
    font-size: 28px;
}

/* Tombol Promosikan UMKM */
#promoteUMKMBtn {
    background-color: #05ABA9; /* Warna biru */
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Poppins", sans-serif;
}

#promoteUMKMBtn:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* Area ads */
.popup-ads-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-content-ads.landscape {
    width: 500px;
    height: 277px;
    position: relative;
}

.popup-content-ads.portrait {
    width: 355px;
    height: 355px;
    position: relative;
}

.image-ads {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

/* Tombol */
.btn-link {
    display: block;
    position: absolute;  /* Gunakan absolute agar bisa diposisikan di atas gambar */
    top: 107%;             /* Tempatkan tombol di tengah */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;         /* Pastikan tombol di depan gambar */
    padding: 8px 15px;
    border: none;
    cursor: pointer;
    font-family: "Poppins";
    background-color: var(--primary-color);
    font-size: 12px;
    border-radius: 3px;
    color: black;
}

#linkAdsBtn {
    font-weight: 400;
    color: black;
}

/* Ikon close */
.close-icon {
    position: absolute;
    top: 15%;
    right: 5%;
    /* background-color: rgba(0, 0, 0, 0.7); */
    color: white;
    font-size: 50px;
    line-height: 24px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10000;
    transition: background-color 0.3s;
}


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

/* area banner full */

.section-banner {
    width: 100%;
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

.area-banner {
    width: auto;
    /* margin: 0px px 0px px; */
    height: 235px;
    /* border: 1px red solid; */
}

.link-ads-banner{
    width: 100%;
    height: 100%;
}

.image-banner {
    width: 100%;
    height: auto;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

swiper-container {
    width: 100%;
    height: 100%;
}


/*  */

.mySwiper {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.mySwiper.loaded {
    visibility: visible;
    opacity: 1;
}


/* swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

/* area banner small */

.section-banner-small {
    width: 100%;
    height: auto;
    /* padding-top: 40px; */
    margin-top: 20px;
}

.area-banner-small {
    width: auto;
    /* margin: 0px 64px 0px 64px; */
    height: 120px;
    /* border: 1px red solid; */
    position: relative; /* Dibutuhkan untuk child position: absolute */
    overflow: hidden;
}

.image-banner {
    width: 100%;
    height: auto;
    position: absolute; /* Untuk menempel pada parent */
    object-fit: cover; /* Menjaga proporsi gambar */
    top: 0; /* Atur posisi di atas */
    left: 0;
}
/* ------------------ */
/* area banner full small */

.section-banner-full-small {
    width: 100%;
    height: auto;
    padding-top: 20px;
}

.area-banner-full-small {
    width: auto;
    /* margin: 0px 64px 0px 64px; */
    height: 120px;
    /* border: 1px red solid; */
    position: relative; /* Dibutuhkan untuk child position: absolute */
    overflow: hidden;
}

.image-banner {
    width: 100%;
    height: auto;
    position: absolute; /* Untuk menempel pada parent */
    object-fit: cover; /* Menjaga proporsi gambar */
    top: 0; /* Atur posisi di atas */
    left: 0;
}

.image-banner.loaded {
    opacity: 1;
}

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

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

.hidden {
    display: none; /* Sembunyikan tabel yang tidak aktif */
}

/*  */

/* navigasi bar */
/* all */
.navbar {
    width: auto;
    height: 95px;
    /* border: 1px black solid; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 80px 0px;
    background-color: var(--primary-color);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: sticky;
    top: -1px;
    z-index: 1000;
}
/* <--------------------> */

.area-menu-link{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
}

/* Mobile Menu (Initially hidden) */
/* Mobile Menu Hidden */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    z-index: 3;
    right: -100%;
    width: 175px;
    height: fit-content;
    background-color: #fcd000;
    color: #000;
    transition: right 0.5s ease, opacity 0.5s ease;
    border-bottom-left-radius: 20px;
    border-left: 2px #000 solid;
    border-bottom: 2px #000 solid;
}

.area-menu-mobile {
    width: auto;
    height: auto;
    padding: 20px 15px 0px 15px;
    /* background-color: #333; */

}

/* Mobile Menu Active (Shown) */
.mobile-menu.nyala {
    display: block;
    right: 0;
}

.link-mobile {
    display: block;
    text-decoration: none;
    margin-bottom: 12px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    font-family: "Poppins";
    color: black;
    transition: color 0.3s ease;
}

.close-menu {
    font-size: 32px;
    color: black;
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 15px;
}

/* area-kiri-navbar */
.area-kiri-navbar {
    width: 10%;
    /* border: 1px black solid; */
}

.image-brand {
    width: 134px;
    height: auto;
    /* background-color: gainsboro; */
}
/* <--------------------> */

/* area-kanan-navbar */
.area-kanan-navbar {
    width: 80%;
    /* border: 1px rgb(255, 0, 0) solid; */
    display: flex;
    gap: 40px;
    justify-content: end;
}

.menu-link-navbar {
    display: flex;
    gap: 20px;
}

.link {
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins";
    color: white;
    transition: color 0.3s ease;
}

/* .link:hover , .arrow-down:hover {
    color: var(--primary-color);
    font-weight: 400;
} */

.link.active p {
    color: #ffdb00;
    font-weight: 600;
}

.dropText{
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-text {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    padding: 0 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.arrow-down {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    margin-bottom: 3px;
    margin-left: 10px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    cursor: pointer;
    transition: color 0.3s ease;
}

/* .arrow-down:hover {
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    margin-bottom: 3px;
    margin-left: 10px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
} */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fcd000;
    min-width: 170px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: 100%;
    padding: 0px 26px 15px 26px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.dropdown-content a {
    font-family: "Poppins", sans-serif;
    color: black;
    padding-top: 12px;
    text-decoration: none;
    display: block;
    font-size: 16px;
}

.line {
    width: 100%;
    border: 0.1px black solid;
}

.show {
    width: 170px;
    display: block;
}

.area-socmed {
    width: fit-content;
    display: flex;
    gap: 15px;
    cursor: pointer;
    justify-content: right;
    align-items: center;
}

.kotak-socmed i{
    font-size: 20px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    color: white;
}

.kotak-socmed i:hover{
    color: white;
}

.kotak-socmed {
    width: auto;
    height: auto;
    border-radius: 10px;
}

/* <--------------------> */

/* Styling untuk wadah audio player */
.audio-player-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* background-color: #333333b2; */
    /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); */
    z-index: 1000;
    /* gap: 10px; */
    /* border: 1px black solid; */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.content {
    /* width: 100%; */
    /* border-radius: 15px; */
    /* padding: 0px 0px 0px 0px; */
    display: flex;
    justify-content: start;
    align-items: center;
    height: 65px;
    z-index: 6;
    /* border: 1px red solid; */
}

.area-control-btn {
    width: auto;
    height: 100%;
    background-color: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.area-span-text{
    width: fit-content;
    margin-right: 10px;
}

.span-text{
    font-family: "Bebas Neue";
    font-size: 26px;
    margin: 0px;
    font-weight: 500;
    color: white;
}


.mobile{
    display: none;
}

.area-control-progres {
    background-color: #17171769;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    /* border: 1px red solid; */
    /* padding: 0px 30px 0px 0px; */
    height: 100%;
}

.material-symbols-rounded {
    cursor: pointer;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
}

.top-bar .material-symbols-rounded {
    font-size: 24px;
}

.icon-menu .bx-menu {
    color: white;
    font-size: 30px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.icon-menu .bx-menu:hover {
    color: black;
}

.music-image {
    width: 100px;
    height: auto;
    /* border-radius: 50%; */
    height: 70px;
    padding: 7px;
}

.music-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.image-wrapper {
    display: flex;
    justify-content: center;
}

.music-titles {
    text-align: left;
    margin-left: 10px;
    color: #ffffff;
    font-family: "Poppins";
    /* border: 1px red solid; */
    width: auto;
}

.music-titles .name {
    font-size: 15px;
    font-family: "Poppins";
    margin: 0px;
}

.music-titles .artist {
    margin: 0px;
    font-size: 16px;
    margin-top: 3px;
    opacity: 0.9;
    font-family: "Poppins";
}

.area-line {
    width: 800px;
    /* border: 1px black solid; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    margin-right: 10px;
}

.progress-details {
    width: 100%;
    height: 8px;
    background-color: #ffffff;
    border-radius: 15px;
}

.progress-bar {
    width: 0%;
    height: inherit;
    border-radius: inherit;
    background-color: #ccff00;
    cursor: pointer;
    position: relative;
}

.progress-bar span {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #ccff00;
    border-radius: inherit;
    transform: translateY(-25%);
    right: -5px;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.progress-details:hover .progress-bar span {
    opacity: 1;
}

.time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    color: #4d4d4d;
}

.control-btn {
    /* margin-top: 50px; */
    /* margin-bottom: 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px white solid;
    height: 100%;
    padding: 0px 10px;
    width: 110px;
    background-color: var(--primary-color);
    /* border-top-right-radius: 15px;
    border-bottom-right-radius: 15px; */
    gap: 5px;
}

.play-pause-stream {
    background-color: white;
    border-radius: 50%;
}

.play-pause-chart {
    background-color: white;
    border-radius: 50%;
    display: none;
}

.play-pause-podcast {
    background-color: white;
    border-radius: 50%;
    display: none;
}

.btn-play {
    color: black !important;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

.control-btn p {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

#visual {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: -1;
    /* border: 1px black solid; */
    display: flex;
    justify-content: start;
}

#layer1 {
    position: absolute;
    transform: scale(3, 4);
    z-index: 100;
    -webkit-transform: scale(3, 4);
    -moz-transform: scale(3, 4);
    -ms-transform: scale(3, 4);
    -o-transform: scale(3, 4);
}

/* Animasi untuk elemen yang muncul dengan slide dari bawah ke atas */
.slide-in {
    animation: slideIn 0.5s forwards;
}

.slide-out {
    animation: slideOut 0.5s forwards;
}

@keyframes slideIn {
    from {
        transform: translateY(100%); /* Mulai dari posisi di bawah */
        opacity: 0; /* Transparan saat elemen di bawah */
    }
    to {
        transform: translateY(0); /* Akhirnya berada di posisi normal */
        opacity: 1; /* Sepenuhnya terlihat */
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0); /* Mulai dari posisi normal */
        opacity: 1; /* Sepenuhnya terlihat */
    }
    to {
        transform: translateY(100%); /* Akhirnya bergeser ke bawah */
        opacity: 0; /* Transparan */
    }
}

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

/* footer */
.footer {
    width: auto;
    height: 370px;
    background-color: #fcd000;
    color: black;
    text-align: center;
}

.top-footer {
    width: auto;
    display: flex;
    height: 80%;
    /* padding: 10px; */
    /* border: 1px red solid; */
    padding: 0px 80px 0px 80px;
}

.group-top-footer{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}


/* area kiri footer */
.area-top-footer {
    width: 100%;
    height: auto;
    /* border: 1px black solid; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-top: 30px; */
}

.area-group-kiri {
    width: 40%;
    height: auto;
    /* border: 1px black solid; */
}

.area-text-contact {
    width: max-content;
    /* border: 1px black solid; */
}

.text-contact {
    margin: 0px;
    font-family: "Bebas Neue";
    /* letter-spacing: 3px; */
    font-weight: bold;
    font-size: 26px;
}

.area-footer-address {
    width: max-content;
    text-align: left;
}

.footer-address {
    font-family: "Poppins";
    margin: 0px;
    font-size: 16px;
    margin-top: 5px;
}

.area-text-name{
    width: fit-content;
    text-align: start;
    margin: 10px 0px;
}

.text-name{
    font-size: 16px;
    font-weight: 400;
    font-family: "Poppins";
    margin: 0px;
}

.area-footer-socmed {
    width: max-content;
    display: none;
    gap: 15px;
    margin-top: 10px;
    cursor: pointer;
    justify-content: right;
    align-items: center;
}

.text-socmed {
    margin: 0px;
    font-family: "Bebas Neue";
    /* letter-spacing: 3px; */
    font-weight: 400;
    font-size: 2rem;
}


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

/* area footer tengah */
.area-group-tengah{
    width: 20%;
    height: 100%;
}

.area-app-download{
    width: 100%;
    /* border: 1px black solid; */
    /* margin-top: 5px; */
    text-align: center;
}

.text-app-download {
    margin: 0px;
    font-family: "Poppins";
    /* letter-spacing: 3px; */
    font-weight: bold;
    font-size: 26px;
}

.area-footer-download {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.kotak-download {
    width: 184px;
    height: 55px;
    /* background-color: white;https://ardanradio.com/ */
    /* border-radius: 10px; */
}

.image-platform{
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* border-radius: 10px; */

}

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



/* area footer kanan */
.area-group-kanan {
    width: 40%;
    height: auto;
    /* border: 1px black solid; */
    /* display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center; */
}

.area-partner{
    width: max-content;
    /* border: 1px black solid; */
    height: auto;
    width: 100%;
    text-align: end;
}

.text-partner {
    margin: 0px;
    font-family: "Bebas Neue";
    /* letter-spacing: 3px; */
    font-weight: bold;
    font-size: 26px;
}

.area-box-partner{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    margin-top: 10px;
}

.partner{
    width: 150px;
    height: 70px;
    /* background-color: #ffffff; */
}
/* --------------------- */


/* bottom footer */
.bottom-footer {
    width: 100%;
    background-color: #fcd000;
    height: 20%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-copyRight {
    font-size: 18px;
    font-family: "Poppins";
    font-weight: 300;
    margin: 0px;
}

.name-owners{
    font-size: 18px;
    text-decoration: none;
    color: black;
    font-weight: 500;
    font-family: "Poppins";

}

.name-owners:hover{
    text-decoration: underline;
}

.bottom-footer-dummy {
    width: 100%;
    background-color: #fcd000;
    height: 15%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --------- */

/* <--------------------> */