:root{
      --btn-size: 64px;
      --accent1: #68a144;
      --accent2: #ec7b2d;
      --glass: rgba(255,255,255,0.06);
      --shadow: 0 10px 30px rgba(12,12,20,0.5);
    }


    /* body{margin:0; background:#000; overflow:hidden} */

.slider{
width:100%;
height:85vh;
position:relative;
overflow:hidden;
}

.slides{
display:flex;
width:100%;
height:100%;
transition:transform 1s ease-in-out;
}

.slide{
flex:0 0 100%;
height:100%;
background-size:cover;
background-position:center;
}

.slider-btn{
--s: var(--btn-size);
position:absolute; top:50%; transform:translateY(-50%);
width:var(--s); height:var(--s);
border-radius:14px; border:0; cursor:pointer; display:grid; place-items:center;
background:linear-gradient(135deg,var(--glass), rgba(255,255,255,0.02));
box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 24px rgba(0,0,0,0.25) inset;
backdrop-filter: blur(6px) saturate(140%);
transition: transform .18s ease, box-shadow .18s ease;
z-index:20;
}
.slider-btn:active{transform:translateY(-50%) scale(.96)}

.slider-btn.left{left:18px}
.slider-btn.right{right:18px}

.slider-btn .icon-wrap{
width:calc(var(--s) - 18px); height:calc(var(--s) - 18px);
transform:rotate(45deg);
border-radius:8px; display:grid; place-items:center;
background:linear-gradient(135deg,var(--accent1), var(--accent2));
}
.slider-btn .svg-icon{transform:rotate(-45deg); width:20px; height:20px; display:block}

.indicators{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; z-index:20}
.indicators button{width:12px; height:12px; border-radius:999px; border:0; background:rgba(255,255,255,0.12); cursor:pointer; transition:transform .18s ease, background .18s ease}
.indicators button.active{background:linear-gradient(90deg,var(--accent1),var(--accent2)); transform:scale(1.25)}