.elementor-496 .elementor-element.elementor-element-acc8cbe{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-496 .elementor-element.elementor-element-0be72de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-9654e6f *//* --- 1. EFEK MUNCUL PAS HALAMAN DIBUKA (ENTRANCE) --- */
.srv-hero-img {
    flex: 1;
    position: relative;
    border-radius: 24px;
    overflow: hidden; /* Wajib biar efek zoom gak keluar jalur */
    opacity: 0; /* Umpetin dulu */
    transform: translateY(40px); /* Turunin dikit ke bawah */
    animation: heroReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Efek melayang naik */
}

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 2. EFEK HOVER ZOOM PAS KURSOR MAMPIR --- */
.srv-hero-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transition: transform 0.6s ease, box-shadow 0.6s ease; /* Transisi halus */
}

.srv-hero-img:hover img {
    transform: scale(1.03); /* Zoom in 3% */
    box-shadow: 0 30px 50px rgba(91, 155, 165, 0.2); /* Bayangan nambah tebal & ada warna tema */
}/* End custom CSS */