*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:linear-gradient(120deg,#5d5866,#11111a 60%);
  color:white;
}

.header{
  height:50px;
  background:#0d0d0f;
  display:flex;
  align-items:center;
  padding:0 10px;
  gap:15px;
  position:sticky;
  top:0;
  z-index:100;
}

.logo{
  width:120px;
  font-weight:bold;
  line-height:15px;
}

.logo span{
  color:#5b43ff;
  font-size:28px;
}

.search{
  flex:1;
  height:36px;
  border:none;
  outline:none;
  background:#4d4857;
  border-radius:8px;
  padding:0 15px;
  color:white;
}

.search::placeholder{
  color:#ddd;
}

.currency{
  background:#111;
  border:1px solid #333;
  padding:9px 16px;
  border-radius:10px;
}

.navbar{
  background:#111;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border-top:1px solid #222;
}

.menu a{
  color:white;
  text-decoration:none;
  margin-right:22px;
  font-size:14px;
}

.menu a.active{
  color:#6f5eff;
  border-bottom:2px solid #6f5eff;
  padding-bottom:14px;
}

.auth a{
  color:white;
  text-decoration:none;
  margin-left:20px;
  font-size:14px;
}

.banner{
  width:96%;
  height:300px;
  margin:20px auto;
  border-radius:22px;

  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("https://images.hdqwalls.com/download/mobile-legends-bang-bang-4k-vb-3840x2160.jpg");

  background-size:cover;
  background-position:center 26%;
  background-repeat:no-repeat;

  position:relative;
  overflow:hidden;
}

.banner-text{
  position:absolute;
  right:40px;
  top:80px;
  text-align:center;
}

.banner-text h1{
  font-size:34px;
  color:#e3b8ff;
}

.banner-text h2{
  font-size:28px;
  color:white;
}

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:45px;
  height:45px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
}

.left{
  left:20px;
}

.right{
  right:20px;
}

.section{
  padding:20px 12px;
}

.section h2{
  font-size:24px;
  margin-bottom:8px;
}

.section p{
  color:#ccc;
  font-size:13px;
  margin-bottom:20px;
}

.popular-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.popular-card{
  background:#1c1c24;
  border-radius:12px;
  overflow:hidden;
}

.popular-img{
  height:100px;
  background-size:cover;
  background-position:center 20%;
}

/* GAME IMAGES */

.ml{
  background-image:url("https://wallpapercave.com/wp/wp5179443.jpg");
}

.pubg{
  background-image:url("https://tse1.mm.bing.net/th/id/OIP.Gytgjw17v3l6XITcr7fsQAHaEK?r=0&rs=1&pid=ImgDetMain&o=7&rm=3");
}

.ff{
  background-image:url("https://tse4.mm.bing.net/th/id/OIP.RfyPFvXubhhvqk2rVL9-gAHaDt?r=0&rs=1&pid=ImgDetMain&o=7&rm=3");
}

.hok{
  background-image:url("https://a-static.besthdwallpaper.com/night-bloom-honor-of-kings-hok-wallpaper-2800x1050-72368_88.jpg");
}

.joki{
  background-image:url("https://wallpapercave.com/wp/wp4691142.jpg");
}

.mabar{
  background-image:url("https://wallpaperaccess.com/full/4265640.jpg");
}

.popular-info{
  height:58px;
  background:linear-gradient(90deg,#31228e,#11111b);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
}

.popular-info h3{
  font-size:18px;
}

.popular-info span{
  font-size:12px;
}

.customer{
  position:fixed;
  right:0;
  top:55px;
  background:#402da5;
  padding:13px 15px;
  border-radius:10px 0 0 10px;
  font-size:12px;
}

@media(max-width:900px){

  .popular-grid{
    grid-template-columns:1fr;
  }

  .banner{
    height:220px;
  }

  .banner-text h1{
    font-size:22px;
  }

  .banner-text h2{
    font-size:18px;
  }
}

/* =========================
   ARTICLE SECTION
========================= */

.article-desc{
  color:#d6d6d6;
  font-size:14px;
  margin-top:10px;
  margin-bottom:30px;
  max-width:900px;
  line-height:1.7;
}

.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.article-card{
  background:#050505;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  transition:.3s;
}

.article-card:hover{
  transform:translateY(-5px);
}

.article-card img{
  width:100%;
  height:400px;
  background-size:cover;
  background-position:center 15%;
}

.article-content{
  padding:25px;
}

.article-content small{
  color:white;
  font-size:15px;
  font-weight:bold;
}

.article-content h3{
  margin-top:14px;
  color:#7d68ff;
  font-size:18px;
  line-height:1.5;
}

.article-btn{
  margin-top:35px;
  padding:14px 24px;
  border:none;
  border-radius:10px;
  background:black;
  color:white;
  font-size:14px;
  cursor:pointer;
  transition:.3s;
}

.article-btn:hover{
  background:#222;
}

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

@media(max-width:1000px){

  .article-grid{
    grid-template-columns:1fr;
  }

  .article-card img{
    height:420px;
  }

}

/* =========================
   GAME GRID
========================= */

.tabs{
  display:flex;
  gap:12px;
  margin-bottom:30px;
  flex-wrap:wrap;
}

.tabs button{
  border:none;
  padding:12px 18px;
  border-radius:8px;
  background:#7d7591;
  color:white;
  font-weight:bold;
  cursor:pointer;
  transition:.3s;
}

.tabs button:hover{
  background:#5e54a7;
}

.tabs button.active{
  background:#35299c;
}

.game-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:30px 22px;
}

/* =========================
   GAME CARD STYLE
========================= */

.game-card{
  background:#2b2b2f;
  border-radius:14px;
  overflow:hidden;
  transition:.3s;
}

.game-card:hover{
  transform:translateY(-6px);
}

.game-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.game-info{
  padding:14px;
}

.game-info h3{
  color:white;
  font-size:20px;
  margin-bottom:6px;

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.game-info p{
  color:#d6d6d6;
  font-size:14px;
}

.center-btn{
  text-align:center;
  margin:40px 0 80px;
}

.center-btn button{
  padding:14px 24px;
  border:none;
  border-radius:10px;
  background:#2b2933;
  color:white;
  cursor:pointer;
  transition:.3s;
}

.center-btn button:hover{
  background:#444;
}

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

@media(max-width:1200px){

  .game-grid{
    grid-template-columns:repeat(4,1fr);
  }

}

@media(max-width:900px){

  .game-grid{
    grid-template-columns:repeat(2,1fr);
  }

}