/* =========================================================
   MEDIA CONTAINER (Membatasi Tinggi Maksimal Thumbnail)
========================================================= */
.testi-media {
    position: relative;
    width: 100%;
    height: 240px;        /* 🔥 KUNCI UTAMA 1: Kunci tinggi kotak media agar seragam di desktop */
    background: #0d1117;  /* Warna latar gelap estetis jika gambar punya black bar */
    overflow: hidden;
    border-radius: 24px;
    display: block;
}

/* =========================================================
   THUMBNAIL IMAGE (Anti-Crop & Pas di Dalam Kotak)
========================================================= */
.testi-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;  /* 🔥 KUNCI UTAMA 2: Gambar vertikal/horizontal akan mengecil pas tanpa terpotong! */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* =========================================================
   BADGE & OVERLAY ADJUSTMENT
========================================================= */
.testi-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    /* Tambahkan style badge Anda di bawah jika diperlukan */
}

.testi-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.3s;
    border: none;
}

.testi-card:hover .testi-overlay {
    background: rgba(0, 0, 0, 0.2);
}

/* =========================================================
   RESPONSIVE LAYOUT (UNTUK LAYAR HP)
========================================================= */
@media (max-width: 768px) {
    .testi-media {
        height: 200px;    /* Sesuaikan tinggi kotak media saat dibuka di HP */
    }
}