/* 10-buttons-review-marquee.css */
.hero-buttons a{
    position:relative;
    overflow:hidden;
    flex:1;
    text-align:center;
    padding:18px 20px;
    border-radius:14px;
    font-size:17px;
    font-weight:900;
    letter-spacing:.5px;
    transition:.35s;
    border:2px solid rgba(255,255,255,.15);
}

/* LOGIN */

.btn-login{
    background:linear-gradient(135deg,#8b0000,#ff2b2b);
    color:#fff;
    box-shadow:
    0 0 20px rgba(255,0,0,.35);
}

/* DAFTAR */

.btn-daftar{
    background:linear-gradient(135deg,#ffd700,#ff9800);
    color:#111;
    box-shadow:
    0 0 22px rgba(255,215,0,.45);
}

/* efek kilau */

.hero-buttons a::before{

content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);

transform:skewX(-25deg);

animation:buttonShine 3.5s infinite;

}

@keyframes buttonShine{

0%{
left:-120%;
}

100%{
left:170%;
}

}

.hero-buttons a:hover{

transform:translateY(-5px);

}

.btn-login:hover{

box-shadow:
0 0 25px rgba(255,0,0,.7),
0 0 45px rgba(255,0,0,.45);

}

.btn-daftar:hover{

box-shadow:
0 0 25px rgba(255,215,0,.8),
0 0 45px rgba(255,215,0,.45);

}

.review-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:10px 0;
}

.review-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:reviewMove 10s linear infinite;
}

.review-card{
  min-width:280px;
  max-width:280px;
}

@keyframes reviewMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}