:root {
    --sunsetorange: #ef4600;
    --sunsetorange1: #ff815d;
    --sunsetpink: #ff5046;
    --sunset: #0b9887;
    --sunset1: #144351;
    --sunset2: #ffa180;
    --sunset3: #fbbd46;
    --sunset4: #ffa01d;
    --sunset5: #1e9dbf;
    --sunset6: #f28e65;
    --sunset7: #096c7e;
}

.cardw {
    border: none;
    display: flex;
    object-fit: cover;
    margin: none;
    padding: none;
}

.text-gradient {
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0) 33%);
}

.text-gradient-lineup {
    border-radius: 5px;
    border: none;
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg,
            rgb(250, 113, 0) 5%,
            rgba(0, 0, 0, 0) 40%);
}

.card-carousel-program {
    margin-left: 20px;
    background: transparent;
    border-style: none;
}


.card-carousel-program img {
    border-radius: 20px;
    width: 250px;
    height: 320px;
    object-fit: cover;
    box-sizing: border-box;
}


.card-carousel-lineup {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-carousel-lineup img {
    border-radius: 20px 20px 0px 0px;
    width: 250px;
    height: 250px;
    object-fit: cover;
    box-sizing: border-box;
}


.card-carousel-gallery {
    border-radius: 15px;
    border: 5px solid #473C79;
    margin-left: 20px;
    background: transparent;
}

.card-carousel-gallery img {
    border-radius: 10px;
    width: 270px;
    height: 270px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-carousel-ticket {
    /* max-height: 350px; */
    background: transparent;
    border-style: none;
    margin-bottom: 2%;
    max-width: 250px;
    margin-left: 20px;
}

.grey img {
    filter: grayscale(100%);

}

.card-carousel-ticket img {
    /* filter: grayscale(100%); */

    height: auto;
    width: 228px;
    object-fit: cover;
    box-sizing: border-box;
}


.card-border {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-border img {
    border-radius: 20px 20px 0px 0px;
    max-height: 270px;
    max-width: 330px;
}

.card-border-program {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-border-program img {
    border-radius: 20px;
}



.card-merchandise {
    border-radius: 10px;
    border-style: none;


}

.card-merchandise img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.card-product-merch {
    margin-top: 10px;
    margin-bottom: 10px;
    background: transparent;
    border-style: none;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.card-product-merch img {
    border-radius: 10px;
    /* width: 177px; */
    object-fit: cover;
    box-sizing: border-box;
    border: 3px solid #473C79;
}

.card-product-merch a {
    color: white;
}

.card-product-merch a :hover {
    color: var(--sunset2);
}

.card-border-tiket {
    /* max-height: 350px; */
    object-fit: cover;
    background: transparent;
    border-style: none;
    margin-bottom: 2%;
    max-width: 250px;
    margin-left: 20px;
}

/* .card-border-tiket img {

} */

.card-text-program {
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: 600;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 5%;
    bottom: 2%;
}

.card-text-lineup {
    font-family: "font-new", sans-serif;
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: bold;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 5%;
    bottom: 2%;
}

.card-border-lineup {
    background: transparent;
    border-radius: 15px;
    border: 5px solid white;
    margin-left: 20px;
    position: relative;
    /* Pastikan card memiliki posisi relatif */
    overflow: hidden;
    /* Agar zoom gambar tidak keluar dari border */
}

.card-border-lineup img {
    transition: transform 0.3s ease-in-out;
    border-radius: 5px;
    height: 300px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-border-lineup img:hover {
    transform: scale(1.1);
    /* Efek zoom pada gambar */
}

.card-img-overlay {
    position: absolute;
    /* Pastikan overlay berada di atas gambar */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Latarnya bisa disesuaikan */
    color: white;
    font-size: 1.5em;
    border-radius: 10px;
    pointer-events: none;
    /* Pastikan overlay tidak menghalangi interaksi dengan gambar */
}

.card-text-lineup {
    z-index: 10;
    text-align: center;
}

.card-border-news {
    margin-right: 15px;
    justify-items: center;
    align-items: center;
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-top: 15px;
}

.card-border-news img {
    border: 5px solid #473C79;
    width: 300px;
    height: 300px;
    object-fit: cover;
    box-sizing: border-box;
    border-radius: 20px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-border-news-detail {
    margin-right: 15px;
    justify-items: center;
    align-items: center;
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-top: 15px;
}

.card-border-news-detail img {
    border: 5px solid #473C79;
    width: 300px;
    height: 50%;
    object-fit: cover;
    box-sizing: border-box;
    border-radius: 20px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-border-ticket {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-border-ticket img {
    border-radius: 20px;
}

.xxx {
    margin: 10%;
    border: none;
    border-style: none;
    border-radius: 20px;
}

.xxx img {
    border: none;
    border-style: none;
    border-radius: 20px;
}

.card-transparent {
    margin-left: 20px;
    background: transparent;
    border: none;
    border-radius: 20px;
    border-style: none;
}

.card-transparent img {
    width: 375px;
    height: 375px;
}

.card-text {
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: 600;
    color: white;
    text-align: center;
    margin: 0;
}

.card-text-lineup {
    font-size: x-large;
    font-weight: 600;
    color: white;
    text-align: center;
    /* margin-top: 120%; */
    position: absolute;
    bottom: 0;
    /* right: 0; */
    right: 5%;
    left: 5%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.card-text-news {
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-align: left;
    letter-spacing: 1px;
    /* margin-top: 120%; */
    position: absolute;
    bottom: 0;
    /* right: 0; */
    right: 5%;
    left: 5%;
}

.card-text-gallery {
    font-family: 'Phudu', sans-serif;
    font-size: large;
    font-weight: 600;
    color: white;
    text-align: center;
    letter-spacing: 1px;
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 5%;
}

.merch-name a {
    font-size: 16px;
    font-family: "Caesar Dressing", sans-serif;
    color: #473C79;
    text-align: center;
}

.carousel {
    margin-top: 7%;
    border-radius: 50%;
    border-color: none;
}

.carousel-cell {
    border-color: transparent;
    border-radius: 50%;
}

.carousel-cell:before {
    display: block;
    content: "";
}

.carousel-cell-lineup {
    border-color: transparent;
    margin-right: 10px;
    border-radius: 50%;
}

.carousel-cell-lineup:before {
    display: block;
    content: "";
}

/* .flickity-prev-next-button {
    top: 50%;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    transform: translateY(-50%);
} */

.text-center {
    font-size: 14px;
    color: white;
    align-items: center;
    margin: 0;
}

.card-grid {
    margin-top: 3%;
    margin-bottom: 3%;
}

.card-program {
    height: 300px;
    width: 300px;
    border-radius: 20px;
    border: none;
}

.card-program1 {
    margin: 1%;
    max-height: 100%;
    max-width: 100%;
}

.card-program1 img {
    border-radius: 20px;
    border-style: none;
    object-fit: cover;


    margin-bottom: 15px;
    margin-top: 15px;
}

.card-news {
    margin-top: 1%;
    border-radius: 10px;
    border-style: none;
}

.card-e-ticket {
    margin-top: 1%;
    margin-bottom: 5%;
    border-radius: 20px;
    border-style: none;
}


.card-news-detail img {
    border-radius: 10px;
    border-style: none;
    width: 100%;
    max-height: 80%;
    margin-bottom: 15px;
}

.card-lineup-margin {
    margin: 5%;
}

.card-lineup {
    height: 300px;
    width: 230px;
    border-radius: 20px;
    border: none;
}


/* BASE: Tampilan Mobile (3 Kolom) */
.gallery-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Default mobile: 3 kolom */
    grid-gap: 3px;
    width: 100%;
    max-width: 600px;
    /* Lebar maksimal di mobile */
    margin: 0 auto;
}

.gallery-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    transition: transform 100ms ease-out;
    cursor: pointer;
}

.gallery-card img:hover {
    transform: scale(1.02);
    position: relative;
    z-index: 1;
}

/* DESKTOP: Tampilan 1 Row 6 Foto */
@media (min-width: 768px) {
    .gallery-card {
        grid-template-columns: repeat(6, 1fr);
        /* Desktop: 6 kolom */
        max-width: 1200px;
        /* Diperlebar agar 6 foto terlihat jelas di desktop */
        grid-gap: 5px;
        /* Sedikit lebih renggang di layar besar agar estetik */
    }
}

.card-detail-program {
    margin-top: 10px;
    margin-bottom: 10px;
}