/*
 * Shared media contract for every public theme and viewport.
 * Content-bearing images must remain fully visible; decorative backgrounds keep
 * their theme-owned rules. Loaded after the theme styles to remove six copies
 * of conflicting crop behaviour without changing theme colours or motion.
 */

body[data-site-theme] {
  --media-surface: rgba(0, 0, 0, 0.24);
  --media-surface-strong: rgba(0, 0, 0, 0.42);
  --media-rule: var(--secondary-color, rgba(255, 255, 255, 0.28));
}

body[data-site-theme="abu-hitam"] {
  --media-surface: rgba(13, 17, 20, 0.72);
  --media-surface-strong: #050709;
}

body[data-site-theme="merah-kuning"] {
  --media-surface: rgba(74, 7, 11, 0.72);
  --media-surface-strong: #2f0306;
}

body[data-site-theme="biru-kuning"] {
  --media-surface: rgba(3, 10, 42, 0.74);
  --media-surface-strong: #01051d;
}

/* Brand marks and functional media may scale, but must never be distorted. */
body[data-site-theme] .header img,
body[data-site-theme] .sidenav img,
body[data-site-theme] .mobile-logo img,
body[data-site-theme] .download-icon img,
body[data-site-theme] .contact-hub__media img,
body[data-site-theme] .floating-actions img,
body[data-site-theme] .profile-status .status-medal img,
body[data-site-theme] #registrationCaptchaImage,
body[data-site-theme] .invoice-qr {
  object-fit: contain !important;
  object-position: center !important;
}

/* Keep the site brand at the same readable size in every colour theme. */
body[data-site-theme] .header .header__mid .header-logo img {
  display: block;
  width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
}

body[data-site-theme] .header-mobile .mobile-logo img {
  display: block;
  width: 140px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Main campaign banners use the source contract used by the bundled assets. */
body[data-site-theme] .home .home__slider {
  width: 100%;
  max-width: 100%;
  max-height: none !important;
  aspect-ratio: 1920 / 613;
  margin-inline: auto;
  background: var(--media-surface-strong);
  overflow: hidden;
}

body[data-site-theme] .home .home__slider .main-slider,
body[data-site-theme] .home .home__slider .swiper-wrapper,
body[data-site-theme] .home .home__slider .swiper-slide {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
}

body[data-site-theme] .home .home__slider .swiper-slide > a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body[data-site-theme] .home .home__slider .swiper-slide .banner-media__image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
}

/* Desktop campaign banners: keep slim horizontal ribbon like MPO reference, cap height, cover fit */
body[data-site-surface="dekstop"] .home .home__slider {
  aspect-ratio: 1920 / 420 !important;
  max-height: 400px !important;
}

body[data-site-surface="dekstop"] .home .home__slider .swiper-slide .banner-media__image {
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Category and download artwork are transparent illustrations, not photos. */
body[data-site-theme] .home-category-art,
body[data-site-theme] .mobile__category .category-art,
body[data-site-theme] .download-border .menu-download {
  min-width: 0;
}

body[data-site-theme] .home-category-art img,
body[data-site-theme] .mobile__category .category-art img,
body[data-site-theme] #template-download {
  object-fit: contain !important;
  object-position: center !important;
}

/* Mobile download app banner: icon must be a fixed square, sharp and uncompressed */
body[data-site-theme] .home .mobile__games .games-button {
  margin-bottom: 14px;
}

body[data-site-theme] .mobile__download-bannner {
  overflow: hidden;
}

body[data-site-theme] .home .mobile-download-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}

body[data-site-theme] .home .mobile-download-container .download-icon {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
}

body[data-site-theme] .home .mobile-download-container .download-icon img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

body[data-site-theme] .home .mobile-download-container .download-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body[data-site-theme] .home .mobile-download-container .download-title h5 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-site-theme] .home .mobile-download-container .download-title h6 {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--c-black) !important;
  opacity: 0.8 !important;
  margin-bottom: 0 !important;
  letter-spacing: 0.5px !important;
}

body[data-site-theme] .home .mobile-download-container .download-button {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body[data-site-theme] .home .mobile-download-container .download-button .btn-custom-sm {
  display: inline-block !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Provider cards are supplied as 554 x 215 banners. Keep that ratio at every width. */
body[data-site-theme] .game .game__slider {
  aspect-ratio: 554 / 215;
  background: var(--media-surface-strong);
}

body[data-site-theme] .game .game__slider .swiper-wrapper,
body[data-site-theme] .game .game__slider .swiper-slide {
  width: 100%;
  height: 100%;
}

body[data-site-theme] .game .game__slider .swiper-slide > a {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-site-theme] .game .game__slider .swiper-slide img,
body[data-site-theme] .game .game__list .game-list-container .game-holder .game-img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

body[data-site-theme] .game .game__list .game-list-container .game-holder .game-img {
  aspect-ratio: 554 / 215;
  background: var(--media-surface);
  overflow: hidden;
}

body[data-site-theme] .game .game__list .game-list-container .game-holder .game-img > a,
body[data-site-theme] .game .game__list .game-list-container .game-holder .game-img > a > div {
  display: flex !important;
  width: 100%;
  height: 100% !important;
  align-items: center;
  justify-content: center;
}

/* Mobile recommendation icons keep their transparent artwork fully visible. */
body[data-site-theme] .home .mobile__games .games-holder .games-img {
  background: var(--media-surface) !important;
  overflow: hidden !important;
}

body[data-site-theme] .home .mobile__games .games-holder .games-img a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-site-theme] .home .mobile__games .games-holder .games-img img {
  display: block;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/*
 * Favourite game art and provider marks share one predictable canvas.
 * These sources are mixed (screenshots, square PNGs and very wide SVG logos),
 * so cover/fill would crop branding and magnify small rasters differently per
 * theme. The explicit class also prevents theme rules from changing the fit.
 */
body[data-site-theme] .home .home__menu .slider-provider .slider-provider-body,
body[data-site-theme] .home .home__menu .slider-provider .swiper-container,
body[data-site-theme] .home .home__menu .slider-provider .swiper-wrapper {
  height: 100% !important;
  max-height: 100% !important;
}

body[data-site-theme] .home .home__menu .slider-provider .swiper-slide {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  position: relative !important;
}

body[data-site-theme] .home .home__menu .slider-provider .home-favorite-media,
body[data-site-theme] .home .home__menu .menu-container .menu-right .menu-slider .slider-provider .swiper-slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  image-rendering: auto;
}

body[data-site-theme] .home .home__menu .slider-provider .home-favorite-media-fallback {
  display: none;
  width: 100%;
  height: 100%;
  padding: 34px 14px 12px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

body[data-site-theme] .home .home__menu .slider-provider .home-favorite-card.is-media-unavailable .home-favorite-media {
  display: none !important;
}

body[data-site-theme] .home .home__menu .slider-provider .home-favorite-card.is-media-unavailable .home-favorite-media-fallback {
  display: flex;
}

/* Promotion artwork uses the same wide campaign format as the main banners. */
body[data-site-theme] .promo .promo-item .promo-img,
body[data-site-theme] .promo-content .main-promo .promo-img {
  display: flex;
  width: 100%;
  aspect-ratio: 1920 / 613;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  background: var(--media-surface);
  overflow: hidden;
}

body[data-site-theme] .promo .promo-item .promo-img img,
body[data-site-theme] .promo-content .main-promo .promo-img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* News and related-content thumbnails get stable boxes without losing content. */
body[data-site-theme] .news-list .news-item .news-img {
  display: flex;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  background: var(--media-surface);
  overflow: hidden;
}

body[data-site-theme] .news-list .news-item .news-img img,
body[data-site-theme] .post .other-post .other-item .img img,
body[data-site-theme] .promo-content .other-promo .other-item .img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--media-surface);
}

/* Game thumbnails, bank marks, provider marks and QR codes are identity/data media. */
body[data-site-theme] .slot-game .slot-game-img {
  display: flex;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  background: var(--media-surface);
  overflow: hidden;
}

body[data-site-theme] .slot-game .slot-game-img img,
body[data-site-theme] .bank-logo img,
body[data-site-theme] .payment-icon .payment-method-logo,
body[data-site-theme] .bank-content .bank-logo img,
body[data-site-theme] .provider-logo img,
body[data-site-theme] .provider-title img,
body[data-site-theme] .home-footer-directory__item img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center !important;
}

/* Payment-method marks share one neutral landscape frame. A method named QRIS
 * is still a logo; it must not inherit the square QR-code invoice contract. */
body[data-site-theme] .transaksi-payment .payment-icon {
  display: flex;
  flex: 0 0 112px;
  width: 112px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  border-radius: 5px;
  background: rgba(255, 255, 255, .96) !important;
  box-sizing: border-box;
  overflow: hidden;
}

body[data-site-theme] .transaksi-payment .payment-icon .payment-method-logo {
  display: block;
  width: 90px !important;
  height: 40px !important;
  max-width: 90px !important;
  max-height: 40px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

body[data-site-theme] .slot-game .slot-game-img img {
  width: 100% !important;
  height: 100% !important;
}

body[data-site-theme] .invoice-qr {
  height: auto !important;
  aspect-ratio: 1;
  object-fit: contain !important;
  background: #fff;
}

/* Images inserted in textual content should remain responsive and uncropped. */
body[data-site-theme] .game__seo img,
body[data-site-theme] .promo-desc img,
body[data-site-theme] .post-content img,
body[data-site-theme] .news-content img,
body[data-site-theme] .help-content img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-inline: auto;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  body[data-site-theme] .home .home__slider {
    min-height: 0 !important;
  }

  body[data-site-theme] .promo .promo-item .promo-img,
  body[data-site-theme] .promo-content .main-promo .promo-img {
    min-height: 0;
  }
}