.pricelist {
    position: relative;
    padding: 3rem;
    background-color: var(--background-dark);
    color: var(--text-color-dark);
    font-family: var(--font-biasa);
}

.pricelist-title {
    width: 100%;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
}

/* Picker (hidden on desktop) */
.pricelist-picker {
    display: none; /* tampilkan via media query untuk tablet/HP */
}

.picker-btn {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: var(--background);
    cursor: pointer;
    border: none;
    color: var(--text-color);
}

.pricelist-content {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.package {
    flex: 1 1 0;
    transition: opacity .5s ease, transform .5s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.package-title {
    position: relative;
    padding: 1.5rem;
    border-radius: 2rem;
    z-index: 2;
    text-align: center;
}

.package-title h2 {
    font-size: 2rem;
}

.package-title h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.package-content {
    position: relative;
    max-height: 750px;
    background: transparent;
    color: var(--text-color-dark);
    border-radius: 2rem;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: -1.5rem;
    z-index: 1;
}

.row-package {
    display: flex;
    margin-bottom: 0.5rem;
    text-align: left;
}

.row-package i {
    margin-right: 5px;
    display: flex;
    align-items: center;
}

.package-content-hemat {
    border: 10px solid #949494;
}

.package-content-favorit {
    border: 10px solid #bf9500;
}

.package-content-eksklusif {
    border: 10px solid #000000;
}

.package-title-hemat {
    background: radial-gradient(#ffffff , #949494);
    color: black;
}

.package-title-favorit {
    background: radial-gradient(#f6e7a8 , #bf9500);
    color: black;
}

.package-title-eksklusif {
    background: radial-gradient(#898989 , #000000);
    color: white;
}

.bi-x-circle-fill {
    color: #d1201d;
}

.pricelist-cta {
    text-align: center;
}

.pricelist-cta p {
    margin-bottom: 1rem;
}

.pricelist-cta a {
    text-decoration: none;
    background: var(--background);
    color: var(--text-color);
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: none;
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.pricelist-cta a:hover {
    background: var(--background-dark);
    color: var(--text-color-dark);
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

@media (max-width: 767px) {
    .pricelist-title { margin-bottom: 0.5rem; font-size: 2rem; }
    .pricelist-picker { 
        display:flex;
        margin-bottom: 1rem;
        justify-content: center;
        gap: 1rem;
    }

    .pricelist-content {
        display: block; /* stack paket */
        max-width: 300px;
        margin: 0 auto;
        gap: 0;
    }

    /* default sembunyikan semua paket kecuali yang punya class .package--active */
    .package { display: none; opacity: 0; transform: translateY(8px); }
    .package.package--active { display: block; opacity: 1; transform: translateY(0); }

    /* buat container lebih mobile-friendly */
    .package { margin-bottom: 1rem; }
    .package-title { padding: 1rem; border-radius: 2rem; }
    .package-content { padding: 1.5rem 1rem; border-radius: 2rem; margin-top: -1rem; }
}