.karosel-indikator-header [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #000;
}

.karosel-indikator-header .active {
    background-color: #fff;
}

.karosel-indikator-penerbit [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: yellow;
}

.karosel-indikator-penerbit .active {
    background-color: black;
}

.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.card-img-overlay {
    opacity: 0;
    transition: opacity 1s ease;
}

.isi-card {
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.8s ease;
}

.produk:hover .card-img-overlay {
    opacity: 1;
    transform: translateY(0);
    background-color: rgba(0, 0, 0, 0.4);
}

.produk:hover .isi-card {
    opacity: 1;
    transform: translateY(0);
}

.produk {
    transform: translateY(0);
    transition: box-shadow 0.5s ease, transform 0.8s ease;
}

.produk:hover {
    transform: translateY(-10px);
    box-shadow: 3px 3px 7px black;
}

.penerbit-item {
    transition: transform 0.8s ease;
}

.penerbit-item:hover {
    transform: scale(0.9);
}

.judulpenerbit {
    text-shadow: 2px 2px 3px black;
}

.zoom-out-img {
    transition: transform 0.5s ease;
}

.zoom-out-img:hover {
    transform: scale(0.9);
}

.kardservis {
    transform: translateY(0);
    transition: transform 0.8s ease;
}

.kardservis:hover {
    transform: translateY(-10px);
}

.tes:hover {
    border: 2px solid gray;
    background-color: black;
    border-radius: 5px;
}

.tes:hover .icon-servis {
    color: white;
}

.tes:hover .isi-servis {
    color: white;
}

.email2 {
    background-color: #212529;
}

.email2:hover {
    background-color: #fff3cd;
}

.poin {
    background-color: #fff3cd;
}

.email2:hover .poin {
    background-color: #212529;
}

.email2:hover .ikan {
    color: #ffc107;
}

.isi-email {
    display: none;
}

.email2:hover .isi-email {
    display: block;
}