* {box-sizing: border-box; margin: 0; padding: 0;}
.slider {
position: relative;
width: 100%;
max-width: 1600px;
height: 700px;
margin: auto;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.8s ease-in-out;
width: 400%;
}
.slide {
min-width: 100%;
height: 700px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
font-weight: bold;
color: white;
position: relative;
text-align: center;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0; left: 0;
z-index: -1;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
font-size: 2rem;
padding: 10px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
}
.arrow.left { left: 20px; }
.arrow.right { right: 20px; }
.dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
cursor: pointer;
}
.dot.active { background: white; }