@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");

.business-card {
    width: 380px; /* dari 320px jadi 380px, bisa lebih jika perlu */
    height: 380px; /* sesuaikan agar proporsional */
    perspective: 1000px;
    margin-bottom: 20px;
    font-family: "Fredoka One", cursive;
}
.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: 0.6s;
    transform-style: preserve-3d;
}
.business-card:hover .flipper,
.business-card.hover .flipper {
    transform: rotateY(180deg);
}
.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(56, 142, 60, 0.13);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.front {
    z-index: 2;
    padding-top: 40px;
}
.back {
    transform: rotateY(180deg);
    padding-top: 30px;
}
.profile-photo,
.profile-photo-back {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #388e3c;
    box-shadow: 0 0 10px rgba(56, 142, 60, 0.15);
    background: #e8f5e9;
}
.profile-photo img,
.profile-photo-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.name {
    margin-top: 20px;
    text-align: center;
}
.name .first {
    display: block;
    font-size: 1.3rem;
    color: #388e3c;
    font-family: "Fredoka One", cursive;
}
.name .title {
    display: block;
    font-size: 1rem;
    color: #222;
    font-family: "Fredoka One", cursive;
}
.profile-info ul {
    padding-left: 0;
    list-style: none;
}
.profile-info li {
    margin-bottom: 7px;
    color: #222;
    font-size: 1rem;
}
@media (max-width: 768px) {
    .business-card {
        width: 98vw;
        height: 380px;
    }
}