< /* =% FRAME 3D UNTUK GAMBAR PROMO */
.promo-frame {
display: inline-block;
position: relative;
overflow: hidden;
border-radius: 22px;
background: linear-gradient(145deg, #2a1f00, #0d0a00);
box-shadow:
0 0 0 2px rgba(255,215,0,0.3) inset,
0 15px 25px rgba(0,0,0,0.5),
0 0 60px rgba(255,200,0,0.25);
transition: all 0.45s ease;
perspective: 800px;
}
.promo-frame:hover {
transform: translateY(-6px) scale(1.03) rotateX(4deg) rotateY(-3deg);
box-shadow:
0 0 0 2px rgba(255,230,120,0.6) inset,
0 18px 35px rgba(255,190,0,0.45),
0 0 90px rgba(255,200,0,0.4);
}
/* ( GAMBAR DENGAN EFEK REFLEKSI CAHAYA */
.promo-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 20px;
filter:
brightness(1.05)
contrast(1.15)
drop-shadow(0 4px 8px rgba(0,0,0,0.4));
transition: all 0.45s ease;
transform: translateZ(0);
}
.promo-frame:hover img {
transform: scale(1.06) rotateX(2deg);
filter:
brightness(1.2)
contrast(1.25)
saturate(1.1)
drop-shadow(0 8px 14px rgba(255,200,50,0.45));
}
/* =� EFEK CAHAYA REFLEKTIF MELINTAS (GLARE) */
.promo-frame::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0.12) 45%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0.12) 55%,
transparent 100%
);
transform: translateX(-150%) rotate(15deg);
transition: transform 0.75s ease-in-out;
pointer-events: none;
}
.promo-frame:hover::after {
transform: translateX(150%) rotate(15deg);
}
/* >� BAYANGAN DI BAWAH GAMBAR UNTUK EFEK 3D REALISTIK */
.promo-shadow {
position: absolute;
bottom: -15px;
left: 10%;
width: 80%;
height: 25px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, transparent 80%);
filter: blur(4px);
transition: opacity 0.4s ease;
}
.promo-frame:hover .promo-shadow {
opacity: 0.6;
}
/* RESPONSIVE */
@media (max-width:600px){
.promo-frame{
border-radius:16px;
}
.promo-frame img{
border-radius:16px;
}
}
