body {
  margin: 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  background: #181a22;
  color: #f3f3f3;
  min-height: 100vh;
}
.container {
  margin: 0 auto;
  background: #23262e;
  border-radius: 16px;
  box-shadow: 0 3px 20px #0002;
  padding: 0 12px 26px 12px;
}
h1, h2 {
  text-align: center;
  color: #ffd600;
  margin: 14px 0 10px 0;
  font-weight: 800;
  letter-spacing: .5px;
}
.desc {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 20px;
  color: #fffae4;
}
a.btn-login, a.btn-rtp {
  display: block;
  margin: 0 auto 11px auto;
  max-width: 320px;
  font-weight: bold;
  background: #ffd600;
  color: #181a22;
  padding: 12px 0 10px 0;
  border-radius: 10px;
  font-size: 1.15em;
  text-align: center;
  box-shadow: 0 2px 12px #ffd60034;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: background .17s, color .17s;
}
a.btn-login:hover, a.btn-rtp:hover {
  background: #fff176;
  color: #222 ;
}
.banner-slider-horizontal {
  width: 100%;
  max-width: 430px;
  margin: 0 auto 20px auto;
  overflow: hidden;
  border-radius: 15px;
  position: relative;
}
.slide-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(.6,0,.4,1);
}
.banner-slider-horizontal img {
  width: 100%;
  min-width: 100%;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 2px 18px #ffd60080;
  user-select: none;
  pointer-events: none;
}
footer {
  margin-top: 38px;
  text-align: center;
  font-size: .98em;
  color: #d7c260;
  background: transparent;
}
.footer-main {
  padding-top: 13px;
}
.footer-social a {
  display: inline-block;
  margin: 0 4px;
  transition: opacity .13s;
}
.footer-social a:hover { opacity: 0.72; }
.support-dmca {
  margin-top: 6px;
  font-size: .97em;
  color: #ffe29a;
  opacity: 0.93;
}
section.artikel-list {
  margin: 32px 0 0 0;
  background: #24272f;
  border-radius: 12px;
  box-shadow: 0 1px 8px #ffd60016;
  padding: 14px 11px 15px 11px;
}
.artikel-list h2 {
  font-size: 1.16em;
  color: #ffd600;
  margin-bottom: 9px;
}
#daftar-artikel {
  list-style: none;
  margin: 0; padding: 0;
}
#daftar-artikel li {
  background: #21222b;
  margin-bottom: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 1px 5px #ffd6000d;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.03em;
}
#daftar-artikel a {
  color: #ffd600;
  font-weight: bold;
  text-decoration: none;
  transition: color .16s;
}
#daftar-artikel a:hover {
  color: #fff176;
  text-decoration: underline;
}
#daftar-artikel .date {
  font-size: .97em;
  color: #ffe176;
  margin-left: 9px;
  font-weight: 400;
  letter-spacing: 0.2px;
}
@media (max-width:600px) {
  .container { border-radius: 0; padding: 0 2vw 25px 2vw; }
  section.artikel-list { padding: 10px 2vw 12px 2vw; }
  h1 { font-size: 1.35em; }
  .desc { font-size: 1em; }
}
.livechat-btn-float {
  position: fixed ;
  right: 20px ;
  bottom: 20px ;
  left: auto ;
  top: auto ;
  margin: 0 ;
  background: linear-gradient(135deg,#ffd600 70%,#fff176 100%);
  border-radius: 50%;
  box-shadow: 0 3px 12px #ffd60055;
  width: 58px; height: 58px;
  display: flex;
  align-items: center; justify-content: center;
  transition: box-shadow 0.18s;
  cursor: pointer;
  border: none;
  outline: none;
  z-index: 9999 ;
}
.livechat-btn-float img {
  width: 36px; height: 36px;
  filter: drop-shadow(0 1px 6px #fff7);
}
@media(max-width:600px) {
  .livechat-btn-float { width:46px;height:46px;right:13px ;bottom:13px ;}
  .livechat-btn-float img {width:27px;height:27px;}
}

  margin: 0;
  padding: 0;
  background: #181a22;
  color: #ffd600;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.container {
  max-width: 430px;
  margin: 0 auto;
  padding: 12px 8px 64px 8px;
  background: #181a22;
}

.logo {
  display: block;
  margin: 24px auto 16px auto;
  width: 145px;
  max-width: 70vw;
}

.banner-slider-horizontal {
  width: 100%;
  max-width: 430px;
  margin: 0 auto 18px auto;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(.6,0,.4,1);
}

.banner-slider-horizontal img,
.banner-img {
  width: 100%;
  min-width: 100%;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 2px 18px #ffd60080;
  user-select: none;
  pointer-events: none;
  display: block;
}

h1 {
  text-align: center;
  color: #ffd600;
  margin-bottom: 10px;
}

.desc {
  text-align: center;
  color: #ffe29a;
  font-size: 1.05em;
  margin-bottom: 17px;
}

.btn-login, .btn-rtp {
  display: block;
  width: 92%;
  margin: 8px auto;
  padding: 13px 0;
  border-radius: 13px;
  background: linear-gradient(90deg,#ffd600 60%,#fff176 100%);
  color: #181a22;
  font-weight: bold;
  font-size: 1.15em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 12px #ffd60044;
  transition: box-shadow .17s;
}

.btn-rtp {
  background: linear-gradient(90deg,#ffe29a 50%,#ffd600 100%);
  color: #181a22;
}

.btn-login:hover, .btn-rtp:hover {
  box-shadow: 0 2px 24px #ffd60088;
  filter: brightness(1.09);
}

.livechat-btn-float {
  position: fixed;
  right: 18px;
  bottom: 25px;
  z-index: 9999;
  background: linear-gradient(135deg,#ffd600 70%,#fff176 100%);
  border-radius: 50%;
  box-shadow: 0 3px 12px #ffd60055;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.18s;
  cursor: pointer;
  border: none;
  outline: none;
}

.livechat-btn-float:hover {
  box-shadow: 0 2px 25px #ffd600cc, 0 0 0 #fff0;
}

.livechat-btn-float img {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover;
  border-radius: 50%;
  background: #fff0;
  display: block;
}

/* Pagination Style */
.pagination {
  margin: 13px 0 0 0;
  text-align: center;
}

.pag-btn {
  background: #23262e;
  border: 1px solid #ffd60060;
  color: #ffd600;
  border-radius: 6px;
  margin: 0 2px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  transition: background .17s;
}

.pag-btn.active,
.pag-btn:hover {
  background: #ffd600;
  color: #181a22;
  border: 1px solid #ffd600;
}

/* Loader Style */
#preloader {
  position: fixed;
  z-index: 99999;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: #181a22;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all .22s;
}

#preloader .loader {
  border: 5px solid #ffd60044;
  border-radius: 50%;
  border-top: 5px solid #ffd600;
  width: 52px;
  height: 52px;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

#preloader .loading-text {
  color: #ffd600;
  font-size: 1.19em;
  font-weight: 600;
}

body.loaded #preloader {
  opacity: 0;
  pointer-events: none;
}

/* Mobile Responsive */
@media (max-width:600px) {
  .container { max-width: 100vw; padding: 8px 2vw 64px 2vw;}
  .logo { width: 120px; }
  .banner-slider-horizontal { max-width: 100vw;}
  .btn-login, .btn-rtp { width: 98%; font-size:1em;}
  .livechat-btn-float { width:46px;height:46px;right:10px;bottom:10px;}
  .livechat-btn-float img {width:27px !important; height:27px !important;}
}