/* Homepage polish: branded cobalt and magenta, with the games as the focus. */
:root {
  --page: #090d1e;
  --surface: #121a34;
  --surface-raised: #1b2547;
  --line: #39446c;
  --pink: #e178c9;
  --blue: #79c6ed;
  --text: #f4f1fa;
  --muted: #c0c8dc;
}
html { scroll-behavior: smooth; }
body.amp-dark-mode {
  background: radial-gradient(ellipse at 50% 0, #1e2253 0, var(--page) 58rem) var(--page);
  color: var(--text);
  min-width: 280px;
  top: 0;
  overflow-x: hidden;
  line-height: 1.55;
}
body.amp-dark-mode, body.amp-dark-mode * { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; }
body.amp-dark-mode .container { max-width: 1160px; width: min(100% - 36px, 1160px); padding: 0; }
body.amp-dark-mode .row { margin-left: 0; margin-right: 0; }
body.amp-dark-mode .navbar {
  float: none; position: sticky; top: 0; z-index: 1030;
  background: rgba(10, 16, 39, .96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
body.amp-dark-mode .navbar .container { width: min(100% - 24px, 1360px); max-width: 1360px; }
body.amp-dark-mode .tophead { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; }
body.amp-dark-mode .head-colum1, body.amp-dark-mode .head-colum2 {
  float: none; width: auto; padding: 10px 0; margin: 0;
}
body.amp-dark-mode .head-colum1 { min-width: 0; }
body.amp-dark-mode .head-colum2 { display: flex; flex: 0 0 auto; gap: 10px; margin-left: auto; justify-content: flex-end; }
body.amp-dark-mode .logohdmu { width: clamp(160px, 23vw, 250px); height: auto; margin: 0 !important; }
body.amp-dark-mode .masuk, body.amp-dark-mode .daftar {
  display: inline-flex; justify-content: center; align-items: center; min-height: 42px;
  margin: 0; padding: 9px 20px; border-radius: 8px; font-size: 15px;
  font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s;
}
body.amp-dark-mode .masuk { background: transparent; border: 1px solid #8893b6; color: var(--text); }
body.amp-dark-mode .daftar { background: #dc70bd; border: 1px solid #dc70bd; color: #171128; }
body.amp-dark-mode .masuk:hover { background: var(--surface-raised); }
body.amp-dark-mode .daftar:hover { background: #f4a5dc; }
body.amp-dark-mode main { padding-top: 18px; }
body.amp-dark-mode main > .content { background: none; }
body.amp-dark-mode .news {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap !important;
  background: #192345; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 18px !important; padding: 5px 12px;
}
body.amp-dark-mode .news img { width: 28px; height: 28px; object-fit: contain; flex: none; }
body.amp-dark-mode .marquee-text { min-width: 0; padding: 0; }
body.amp-dark-mode .marquee-text div { color: var(--text); font-size: 12px; }
body.amp-dark-mode .carousel { overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
body.amp-dark-mode .carousel-inner { min-height: clamp(180px, 31.9vw, 368px); }
body.amp-dark-mode .carousel-item { min-height: clamp(180px, 31.9vw, 368px); }
body.amp-dark-mode .carousel-item img { display: block; width: 100%; height: clamp(180px, 31.9vw, 368px); object-fit: cover; object-position: center; }
body.amp-dark-mode .carousel-control-next, body.amp-dark-mode .carousel-control-prev { opacity: .85; width: 9%; }
body.amp-dark-mode .carousel-control-next:hover, body.amp-dark-mode .carousel-control-prev:hover { background: rgba(5, 8, 22, .35); opacity: 1; }
/* Provider menu styles live in provider-menu.css (shared with slot/provider pages). */
body.amp-dark-mode .site-description { margin-top: 16px; }
body.amp-dark-mode .slot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
body.amp-dark-mode .slot .cari { grid-column: 1 / -1; margin: 0 0 2px; overflow: visible; }
body.amp-dark-mode .search { height: 46px; padding: 8px 16px 8px 43px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
body.amp-dark-mode .search::placeholder { color: var(--muted); }
body.amp-dark-mode .search-icon { left: 16px !important; top: 15px; width: 17px; opacity: .9; }
body.amp-dark-mode .slot .card { width: auto !important; min-width: 0; float: none; background: none; }
body.amp-dark-mode .card-content {
  margin: 0; height: 100%; overflow: hidden; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px;
}
body.amp-dark-mode .card-content > a:not(.hover-btn) { display: flex; flex-direction: column; height: 100%; color: var(--text); }
body.amp-dark-mode .img-zoom { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; margin: 0; }
body.amp-dark-mode .m-hide { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 8px 2px; font-size: 13px; font-weight: 600; line-height: 1.3; }
body.amp-dark-mode .percent { width: calc(100% - 20px); height: 22px; margin: auto 10px 12px; border-radius: 5px; background: #e5e8f3; }
body.amp-dark-mode .percent p { margin: 0; top: 5px; transform: none; color: #121529; font-size: 11px; }
body.amp-dark-mode .hover-btn { width: 100%; height: 100%; inset: 0; border-radius: 10px; display: grid; place-items: center; opacity: 0; }
body.amp-dark-mode .card-content:hover .hover-btn, body.amp-dark-mode .hover-btn:focus-visible { opacity: 1; }
body.amp-dark-mode .play-btn { width: auto; margin: 0; background: #dd72bd; color: #171128; padding: 10px 16px; border-radius: 6px; font-weight: 700; }
body.amp-dark-mode .footertext { background: var(--surface); background-image: none; border: 1px solid var(--line); border-radius: 12px; margin: 24px 0; padding: clamp(20px, 4vw, 40px); color: var(--text); }
body.amp-dark-mode .footertext h1 { font-size: clamp(23px, 3vw, 30px); line-height: 1.25; }
body.amp-dark-mode .footertext h2 { font-size: clamp(19px, 2.5vw, 23px); line-height: 1.35; margin: 24px 0 10px; }
body.amp-dark-mode .footertext p, body.amp-dark-mode .footertext li { color: #d8dced; line-height: 1.7; font-size: 15px; text-align: left !important; }
body.amp-dark-mode .footertext p { margin-bottom: 14px; }
body.amp-dark-mode .footertext a { color: #a9d9f3; text-decoration: underline; }
body.amp-dark-mode .footertext img { display: block; height: auto; }
body.amp-dark-mode footer { padding: 0 0 30px; color: var(--muted); font-size: 13px; }
body.amp-dark-mode .popup-container { overflow-y: auto; padding: 24px 12px; }
body.amp-dark-mode .popup-body { max-width: min(100%, 370px); height: auto; min-height: 394px; margin: auto; overflow: hidden; }
body.amp-dark-mode .popup-label { color: #fff; }
body.amp-dark-mode .popup-content { padding: 15px 26px; }
body.amp-dark-mode a:focus-visible, body.amp-dark-mode button:focus-visible, body.amp-dark-mode input:focus-visible, body.amp-dark-mode .popup-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.skip-link { position: absolute; top: -100px; left: 12px; z-index: 9999; padding: 10px; background: #fff; color: #111; }
.skip-link:focus { top: 12px; color: #111; }
@media (max-width: 1000px) { body.amp-dark-mode .slot { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 720px) {
  body.amp-dark-mode .container { width: min(100% - 24px, 1160px); }
  body.amp-dark-mode .navbar .container { width: calc(100% - 12px); }
  body.amp-dark-mode .tophead { min-height: 68px; }
  body.amp-dark-mode .carousel-inner, body.amp-dark-mode .carousel-item { min-height: clamp(220px, 57vw, 320px); }
  body.amp-dark-mode .carousel-item img { height: clamp(220px, 57vw, 320px); object-position: center center; }
  body.amp-dark-mode .carousel-control-next, body.amp-dark-mode .carousel-control-prev { width: 13%; background: rgba(5, 8, 22, .18); }
  body.amp-dark-mode .logohdmu { width: clamp(130px, 37vw, 195px); }
  body.amp-dark-mode .masuk, body.amp-dark-mode .daftar { min-height: 38px; padding: 8px 12px !important; font-size: 13px !important; }
  body.amp-dark-mode .slot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body.amp-dark-mode .img-zoom { height: auto; }
  body.amp-dark-mode .footertext { padding: 20px; }
  body.amp-dark-mode .marquee-text div { animation-duration: 25s; }
}
@media (max-width: 480px) {
  body.amp-dark-mode .tophead { gap: 7px; }
  body.amp-dark-mode .head-colum2 { gap: 5px; }
  body.amp-dark-mode .carousel-inner, body.amp-dark-mode .carousel-item { min-height: 235px; }
  body.amp-dark-mode .carousel-item img { height: 235px; }
  body.amp-dark-mode .logohdmu { width: clamp(115px, 35vw, 160px); }
  body.amp-dark-mode .masuk, body.amp-dark-mode .daftar { padding: 7px 9px !important; font-size: 12px !important; }
  body.amp-dark-mode .slot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.amp-dark-mode .m-hide { font-size: 12px !important; }
  body.amp-dark-mode main { padding-top: 12px; }
  body.amp-dark-mode .footertext { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.amp-dark-mode .marquee-text div, body.amp-dark-mode .percent-bar { animation: none; }
  body.amp-dark-mode .card-content *, body.amp-dark-mode .hover-btn { transition: none; }
}