.kamar-cg {
position: relative;
}
.kamar-cg__slides {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.kamar-cg__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform: translateX(100%);
transition: transform 0.3s ease;
background: #fff;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.kamar-cg__slide {
transition: none;
}
}
.kamar-cg__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
border: 0 !important;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
color: #222222 !important;
font-size: 16px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.kamar-cg__nav--prev {
left: -15px;
}
.kamar-cg__nav--next {
right: -15px;
}
.kamar-cg__nav:hover,
.kamar-cg__nav:focus-visible {
background: #ffffff !important;
color: #222222 !important;
}
.kamar-cg:hover .kamar-cg__nav {
opacity: 1;
}
@media (hover: none) {
.kamar-cg__nav {
display: none !important;
}
}
.kamar-cg__nav:focus-visible {
outline: 2px solid #103547;
outline-offset: 1px;
opacity: 1;
}
.kamar-cg__dots {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 3;
display: flex;
gap: 5px;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.kamar-cg:hover .kamar-cg__dots,
.kamar-cg.is-dragging .kamar-cg__dots {
opacity: 1;
}
@media (hover: none) {
.kamar-cg__dots {
opacity: 0.9;
}
.jet-listing-grid__slider .kamar-cg__dots,
.slick-slider .kamar-cg__dots,
.slick-slide .kamar-cg__dots,
.swiper .kamar-cg__dots,
.swiper-container .kamar-cg__dots,
.swiper-slide .kamar-cg__dots {
display: none !important;
}
}
.kamar-cg__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #cccccc;
transition: background 0.2s ease, transform 0.2s ease;
}
.kamar-cg__dot.is-active {
background: #103547;
transform: scale(1.25);
}