@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

:root {
--accent-color: #FDBB2C;
--base-color: #FDBB2C;
}

/* ===================== */
/* SOSMED */
/* ===================== */

.hamburg {
position: absolute;
width: 55px;
height: auto;
padding: 0.6rem;
background-color: #FDBB2C;
border-radius: 10px;
z-index: 80;
box-shadow: 0px 0px 12px rgba(177, 174, 174, 0.35);
}

.ard-sosmed {
position: fixed;
bottom: 12%;
left: 11px;
font-family: "Times New Roman", sans-serif;
z-index: 79;
cursor: pointer;
}

.ard-sosmed ul {
margin: 0;
padding: 0;
}

.ard-sosmed ul li {
position: absolute;
list-style: none;
transform: translate(0, 0) rotate(360deg);
transition: all 0.5s ease;
opacity: 0;
}

.ard-sosmed.open ul li:nth-child(1){transform:translateY(-130px);opacity:1;transition-delay:.2s;}
.ard-sosmed.open ul li:nth-child(2){transform:translateY(-65px);opacity:1;transition-delay:.16s;}
.ard-sosmed.open ul li:nth-child(3){transform:translateY(-195px);opacity:1;transition-delay:.12s;}
.ard-sosmed.open ul li:nth-child(4){transform:translateY(-260px);opacity:1;transition-delay:.08s;}
.ard-sosmed.open ul li:nth-child(5){transform:translateY(-325px);opacity:1;transition-delay:.04s;}
.ard-sosmed.open ul li:nth-child(6){transform:translateY(-390px);opacity:1;}

.ard-sosmed ul li a {
display: flex;
width: 55px;
height: 55px;
border: 2px solid var(--base-color);
border-radius: 10px;
justify-content: center;
align-items: center;
background-color: #000;
}

.ard-sosmed ul li a img {
width: 100%;
}

/* ===================== */
/* HAMBURGER */
/* ===================== */

.bar1,.bar2,.bar3{
width:80%;
height:5px;
background:#fff;
margin:6px auto;
transition:.4s;
}

.open .bar1{transform:translate(0,10px) rotate(-225deg);}
.open .bar2{opacity:0;}
.open .bar3{transform:translate(0,-12px) rotate(-315deg);}

/* ===================== */
/* TOOLTIP */
/* ===================== */

.ard-sosmed ul li div{
position:absolute;
opacity:0;
scale:.1;
background:#000;
color:#fff;
border:1px solid var(--base-color);
padding:5px;
border-radius:10px;
transition:.3s;
}

.ard-sosmed ul li:hover div{
opacity:1;
scale:1;
transform:translate(70px,-40px);
}

/* ===================== */
/* ATTENTION */
/* ===================== */

.attention{
width:80px;
height:20px;
margin-bottom:7px;
left:15px;
background:var(--base-color);
color:#fff;
display:flex;
justify-content:center;
align-items:center;
opacity:0;
}

.whore{animation:flicker 1.5s infinite;}

@keyframes flicker{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}

/* ===================== */
/* GLOBAL */
/* ===================== */

i{color:#fff !important;}

.hot-games .game-item{
background:#4c0000 !important;
border-radius:10px;
}

.hot-games .game-title{
background:#760000 !important;
border-radius:10px;
}

/* ===================== */
/* BUTTON FINAL (NO DOUBLE) */
/* ===================== */

.btn-tertiery,
.btn-secondary,
.btn-accent,
.btn-primary {
border-radius: 5px !important;
font-weight: bold !important;
}

/* LOGIN */
.btn-tertiery,
.btn-secondary {
position: relative !important;
overflow: hidden !important;
background: linear-gradient(#2f2f2f, #0f0f0f) !important;
color: #ffffff !important;
border: 1px solid #fdbb2c !important;
}

/* DAFTAR */
.btn-accent,
.btn-primary {
position: relative !important;
overflow: hidden !important;
background: linear-gradient(#ffe94d, #ffc400) !important;
color: #000000 !important;
border: 1px solid #e0a800 !important;
}

/* KILAU */
.btn-accent::before,
.btn-primary::before {
content:"";
position:absolute;
top:0;
left:-75%;
width:45%;
height:100%;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.2) 40%,
rgba(255,255,255,0.7) 50%,
rgba(255,255,255,0.2) 60%,
rgba(255,255,255,0) 100%
);
transform:skewX(-25deg);
animation:shine 2.5s linear infinite;
}

@keyframes shine{
0%{left:-75%;}
100%{left:130%;}
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media(max-width:600px){
.ard-sosmed{bottom:130px;left:5px;}
}