/* Mahkota Play Promosi Center — inherits theme variables from mahkota-theme.css */
.mp-promo-center{min-width:0;color:inherit}
.mp-promo-center *{box-sizing:border-box}
.mp-promo-breadcrumb{display:flex;gap:8px;align-items:center;color:#aaa;font-size:12px;margin:0 0 14px}
.mp-promo-breadcrumb a{color:inherit;text-decoration:none}.mp-promo-breadcrumb span:last-child{color:var(--mp-accent,#ef4747)}
.mp-promo-hero{position:relative;isolation:isolate;overflow:hidden;min-height:234px;display:flex;align-items:center;padding:28px;border-radius:16px;background:linear-gradient(110deg,var(--mp-panel,#1b090a) 0%,#150b0c 70%,var(--mp-base,#110507) 100%);border:1px solid var(--mp-line,#813737);box-shadow:0 12px 32px #0003}
.mp-promo-hero:after{content:"";position:absolute;inset:auto -80px -180px auto;width:370px;height:370px;border-radius:50%;border:55px solid var(--mp-accent,#ac1924);opacity:.18;z-index:-1}
.mp-promo-hero-glow{position:absolute;left:-80px;top:-130px;width:280px;height:280px;border-radius:50%;background:var(--mp-accent,#b80e19);filter:blur(110px);opacity:.3;z-index:-1}
.mp-promo-hero-inner{max-width:560px;position:relative;z-index:1}
.mp-promo-eyebrow,.mp-promo-overline{font-size:10px;font-weight:800;letter-spacing:1.8px;color:var(--mp-accent,#ef5b5b)}
.mp-promo-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mp-accent,#ef5b5b);margin-right:5px;box-shadow:0 0 10px var(--mp-accent,#ef5b5b)}
.mp-promo-hero h1{color:#fff;margin:13px 0 10px;font-size:clamp(27px,3.2vw,42px);line-height:1.12;font-weight:900;letter-spacing:-1.3px}
.mp-promo-hero h1 em{color:var(--mp-accent,#ef4747);font-style:normal}
.mp-promo-hero p{color:#cbbec0;line-height:1.7;font-size:13px;margin:0;max-width:440px}
.mp-promo-hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:24px}
.mp-promo-count{padding:8px 11px;border:1px solid var(--mp-line,#693335);border-radius:7px;background:#ffffff0c;color:#fff;font-size:11px;font-weight:700}
.mp-promo-hero-link{font-size:12px;font-weight:800;text-decoration:none;color:var(--mp-accent,#ff5c61)}
.mp-promo-hero-mark{position:absolute;right:30px;top:4px;color:var(--mp-accent,#e34242);font-size:145px;opacity:.11;pointer-events:none}
.mp-promo-heading{margin:26px 0 15px;display:flex;justify-content:space-between;align-items:end}
.mp-promo-heading h2{font-size:23px;color:#fff;margin:5px 0 3px;letter-spacing:-.5px}.mp-promo-heading p{font-size:12px;color:#afa4a5;margin:0}
.mp-promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.mp-promo-card{min-width:0;background:var(--mp-panel,#1e1012);border:1px solid var(--mp-line,#643438);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.mp-promo-card:hover{transform:translateY(-3px);border-color:var(--mp-accent,#dd383e)}
.mp-promo-card-media{position:relative;aspect-ratio:5/4;overflow:hidden;background:linear-gradient(125deg,var(--mp-panel,#22080d),var(--mp-accent2,#83151b))}
.mp-promo-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.mp-promo-art{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;background:radial-gradient(circle at 50% 45%,#ffffff20,transparent 55%),linear-gradient(120deg,var(--mp-panel,#1b0710),var(--mp-accent2,#7f1419));text-align:center;padding:15px}
.mp-promo-art span{font-size:40px;color:var(--mp-accent,#fa6262)}.mp-promo-art strong{font-size:clamp(15px,2vw,23px);text-transform:uppercase;letter-spacing:2px}.mp-promo-art small{font-size:10px;letter-spacing:3px;color:#e8ccd0}
.mp-promo-corner-tag{position:absolute;top:11px;left:11px;background:var(--mp-accent,#cc2436);color:#fff;font-size:9px;letter-spacing:1px;font-weight:800;padding:6px 9px;border-radius:5px}
.mp-promo-card-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:17px}
.mp-promo-meta{color:var(--mp-accent,#ee7b7b);font-size:10px;font-weight:800;letter-spacing:.8px}
.mp-promo-card h3{margin:10px 0 7px;font-size:17px;line-height:1.35;color:#fff;overflow-wrap:anywhere}
.mp-promo-card p{font-size:12px;line-height:1.65;color:#bdb0b0;margin:0 0 18px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.mp-promo-detail-button{margin-top:auto;background:transparent;color:var(--mp-accent,#ee6c6c);padding:8px 0;border:0;cursor:pointer;font-size:12px;font-weight:850;display:flex;gap:16px;align-items:center}
.mp-promo-detail-button span{font-size:16px}.mp-promo-note{display:flex;gap:10px;align-items:flex-start;margin:23px 0;padding:14px 16px;border:1px solid var(--mp-line,#6b3636);border-radius:9px;background:var(--mp-panel,#160b0c);color:#bfb2b3}.mp-promo-note span{color:var(--mp-accent,#ef6060)}.mp-promo-note p{font-size:11px;line-height:1.6;margin:0}
.mp-promo-empty{margin:0;padding:55px 20px;text-align:center;border:1px dashed var(--mp-line,#713939);border-radius:12px;background:var(--mp-panel,#1a0a0d)}.mp-promo-empty>span{display:block;font-size:48px;color:var(--mp-accent,#ef5555)}.mp-promo-empty h3{font-size:20px;color:#fff}.mp-promo-empty p{font-size:13px;color:#c5b7b9;line-height:1.6}.mp-promo-empty a{color:var(--mp-accent,#ee6b6b)}
.mp-promo-dialog{padding:0;border:1px solid var(--mp-line,#65383b);background:var(--mp-panel,#1c1011);color:#fff;width:min(92vw,600px);max-height:85vh;overflow:auto;border-radius:14px;box-shadow:0 20px 100px #000a}.mp-promo-dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}.mp-promo-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:14px 19px;border-bottom:1px solid var(--mp-line,#65383b);font-size:11px;letter-spacing:1px;color:var(--mp-accent,#f66)}.mp-promo-dialog-close{background:transparent;color:#fff;border:0;cursor:pointer;font-size:28px;line-height:1}.mp-promo-dialog-img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover}.mp-promo-dialog-content{padding:22px}.mp-promo-dialog-content h2{color:#fff;font-size:24px;margin:0 0 15px}.mp-promo-description{font-size:14px;color:#dfd4d4;line-height:1.75;overflow-wrap:anywhere}.mp-promo-back{display:inline-flex;margin-top:24px;border-radius:8px;background:var(--mp-accent,#d52834);color:white;padding:12px 17px;text-decoration:none;font-size:12px;font-weight:750}
@media(max-width:800px){.mp-promo-hero{min-height:205px;padding:22px}.mp-promo-hero-mark{font-size:110px;right:8px}.mp-promo-heading h2{font-size:21px}}
@media(max-width:640px){.mp-promo-center{padding-bottom:12px}.mp-promo-breadcrumb{margin-top:7px}.mp-promo-hero{border-radius:12px;padding:22px 18px;min-height:196px}.mp-promo-hero h1{font-size:29px}.mp-promo-hero p{font-size:12px}.mp-promo-hero-foot{gap:14px;margin-top:19px}.mp-promo-grid{grid-template-columns:1fr;gap:13px}.mp-promo-card-body{padding:16px}.mp-promo-heading{margin:22px 0 14px}.mp-promo-heading h2{font-size:21px}.mp-promo-dialog-content{padding:17px}}

/* v3: Promosi cards line up with adjacent sidebar/panels. */
.mp-promo-center{align-self:start;min-width:0}
.mp-promo-center .mp-promo-grid{margin-top:0;align-content:start}
/* Enforce a uniform 100:80 display ratio, regardless of uploaded dimensions. */
.mp-promo-center .mp-promo-card-media{
  aspect-ratio:5 / 4 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  flex:none !important;
  overflow:hidden !important;
  position:relative;
}
.mp-promo-center .mp-promo-card-media > img{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  aspect-ratio:auto !important;
}
.mp-promo-center .mp-promo-card-media .mp-promo-art{position:absolute;inset:0}
.mp-promo-more-wrap{display:flex;justify-content:center;margin:18px 0 8px}
.mp-promo-more{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:43px;padding:10px 24px;border:1px solid var(--mp-line,#833838);border-radius:10px;background:var(--mp-panel,#210b0d);color:var(--mp-accent,#f66);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:border-color .2s,background .2s}
.mp-promo-more:hover{border-color:var(--mp-accent,#e44)}
.mp-promo-more-arrow{display:inline-block;font-size:20px;line-height:1;transition:transform .2s}
.mp-promo-more[aria-expanded="true"] .mp-promo-more-arrow{transform:rotate(180deg)}
@media(min-width:641px){
  .mp-promo-grid:not(.is-expanded) > .mp-promo-card:nth-child(n+5){display:none !important}
}
@media(max-width:640px){
  .mp-promo-grid > .mp-promo-card:nth-child(n+5){display:flex !important}
  .mp-promo-more-wrap{display:none !important}
}


/* V4: clean banner + black bordered information panels. */
.mp-promo-center .mp-promo-card,
.mp-promo-center .mp-promo-card:hover {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
  gap:0 !important;
}
.mp-promo-center .mp-promo-card-media {
  background:#000 !important;
  border:0 !important;
  border-radius:10px 10px 0 0 !important;
  overflow:hidden !important;
  width:100% !important;
  aspect-ratio:5 / 4 !important;
  height:auto !important;
  flex:none !important;
}
.mp-promo-center .mp-promo-card-media > img {
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
}
.mp-promo-center .mp-promo-card-body {
  background:#000 !important;
  border:2px solid var(--mp-accent,#e2ad22) !important;
  border-radius:0 0 12px 12px !important;
  padding:17px !important;
  color:#fff !important;
}
.mp-promo-center .mp-promo-meta {display:none !important;}
.mp-promo-center .mp-promo-card h3 {margin-top:0 !important;}
/* Popup: image, then the same black bordered information panel. */
.mp-promo-dialog {
  position:fixed;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  overflow:visible !important;
  max-width:600px;
  max-height:90vh;
  width:min(92vw,600px);
  box-shadow:none !important;
}
.mp-promo-dialog[open] {display:flex; flex-direction:column;}
.mp-promo-dialog .mp-promo-dialog-close {
  position:absolute !important;
  top:8px !important;
  right:9px !important;
  z-index:10 !important;
  display:grid !important;
  place-items:center !important;
  width:36px !important;
  height:36px !important;
  color:#fff !important;
  background:#000c !important;
  border:1px solid #ffffff88 !important;
  border-radius:50% !important;
}
.mp-promo-dialog .mp-promo-dialog-img {
  width:100% !important;
  height:auto !important;
  max-height:52vh !important;
  aspect-ratio:5 / 4 !important;
  object-fit:contain !important;
  background:#000 !important;
  border-radius:10px 10px 0 0 !important;
  flex-shrink:1;
  min-height:0;
}
.mp-promo-dialog .mp-promo-dialog-content {
  overflow-y:auto !important;
  flex-shrink:1;
  min-height:0;
  padding:20px !important;
  background:#000 !important;
  border:2px solid var(--mp-accent,#e2ad22) !important;
  border-radius:0 0 12px 12px !important;
}
@media(max-width:640px){
  .mp-promo-dialog .mp-promo-dialog-img{max-height:45vh !important;}
  .mp-promo-dialog .mp-promo-dialog-content{padding:16px !important;}
}


/* V5: image follows content, panel uses themed subtle background like side-card. */
.mp-promo-center .mp-promo-card,
.mp-promo-center .mp-promo-card:hover{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
}
.mp-promo-center .mp-promo-corner-tag{display:none !important;}
.mp-promo-center .mp-promo-card-media{
  background:transparent !important;
  border:0 !important;
  border-radius:12px 12px 0 0 !important;
  aspect-ratio:auto !important;
  min-height:0 !important;
  height:auto !important;
  width:100% !important;
  overflow:visible !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  position:relative !important;
}
.mp-promo-center .mp-promo-card-media > img{
  position:static !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:340px !important;
  object-fit:contain !important;
  object-position:center top !important;
  background:transparent !important;
  border-radius:12px 12px 0 0 !important;
}
.mp-promo-center .mp-promo-card-media .mp-promo-art{
  position:static !important;
  min-height:220px;
  border-radius:12px 12px 0 0;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--mp-accent,#d62a2a) 18%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--mp-accent2,#4b0808) 42%, #140404), color-mix(in srgb, var(--mp-panel,#2a0707) 88%, #140404));
}
.mp-promo-center .mp-promo-card-body{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--mp-accent,#d62a2a) 15%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--mp-panel,#2a0707) 78%, #110303), color-mix(in srgb, var(--mp-accent2,#3a0505) 36%, #0f0202)) !important;
  border:1px solid color-mix(in srgb, var(--mp-accent,#f13c3c) 78%, #f6b93b) !important;
  border-top:1px solid color-mix(in srgb, var(--mp-accent,#f13c3c) 55%, #111) !important;
  border-radius:0 0 14px 14px !important;
  padding:20px 18px 18px !important;
  box-shadow:0 10px 30px #00000030 !important;
}
.mp-promo-center .mp-promo-card h3{font-size:18px !important;margin:0 0 10px !important;color:#fff !important;}
.mp-promo-center .mp-promo-card p{color:#ddd2d2 !important;margin:0 0 18px !important;-webkit-line-clamp:4;}
.mp-promo-center .mp-promo-detail-button{color:var(--mp-accent,#ff4a4a) !important;padding:0 !important;}
.mp-promo-center .mp-promo-detail-button span{font-size:17px !important;}

/* Dialog follows same style, without black blocks. */
.mp-promo-dialog{background:transparent !important;border:0 !important;box-shadow:none !important;}
.mp-promo-dialog .mp-promo-dialog-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:60vh !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center top !important;
  background:transparent !important;
  border-radius:14px 14px 0 0 !important;
}
.mp-promo-dialog .mp-promo-dialog-content{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--mp-accent,#d62a2a) 15%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--mp-panel,#2a0707) 78%, #110303), color-mix(in srgb, var(--mp-accent2,#3a0505) 36%, #0f0202)) !important;
  border:1px solid color-mix(in srgb, var(--mp-accent,#f13c3c) 78%, #f6b93b) !important;
  border-radius:0 0 14px 14px !important;
  padding:20px !important;
}
.mp-promo-dialog .mp-promo-description{color:#ddd2d2 !important;}
.mp-promo-dialog .mp-promo-back{
  background:color-mix(in srgb, var(--mp-accent,#d62a2a) 70%, #6a0a0a) !important;
  border:1px solid color-mix(in srgb, var(--mp-accent,#f13c3c) 78%, #f6b93b) !important;
}

@media (max-width: 640px){
  .mp-promo-center .mp-promo-card-media > img{max-height:260px !important;}
  .mp-promo-center .mp-promo-card-body{padding:18px 16px 16px !important;}
  .mp-promo-dialog .mp-promo-dialog-img{max-height:42vh !important;}
}


/* V6 FINAL - fixed card dimensions and readable multi-line descriptions. */
.mp-promo-center .mp-promo-grid{align-items:start !important;}
.mp-promo-center .mp-promo-card,
.mp-promo-center .mp-promo-card:hover{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  gap:0 !important;
  height:auto !important;
  background:transparent !important;
}
.mp-promo-center .mp-promo-card-media{
  display:block !important;
  position:relative !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:2 / 1 !important;
  overflow:hidden !important;
  background:transparent !important;
  border-radius:12px 12px 0 0 !important;
}
.mp-promo-center .mp-promo-card-media > img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  border-radius:0 !important;
  background:transparent !important;
}
.mp-promo-center .mp-promo-card-media .mp-promo-art{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
}
.mp-promo-center .mp-promo-card-body{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:190px !important;
  min-height:190px !important;
  max-height:190px !important;
  overflow:hidden !important;
  padding:16px 17px !important;
  background:linear-gradient(160deg,
    color-mix(in srgb, #090709 91%, var(--mp-accent,#de2626) 9%),
    color-mix(in srgb, #100a0b 87%, var(--mp-accent2,#640e12) 13%)) !important;
  border:1px solid color-mix(in srgb, var(--mp-accent,#e43b3b) 60%, #382124) !important;
  border-radius:0 0 13px 13px !important;
  box-shadow:0 8px 22px #0003 !important;
}
.mp-promo-center .mp-promo-card h3{
  flex:0 0 auto !important;
  font-size:17px !important;
  line-height:1.3 !important;
  margin:0 0 9px !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
}
.mp-promo-center .mp-promo-card p{
  flex:0 1 auto !important;
  white-space:pre-line !important;
  color:#d0c5c5 !important;
  font-size:12px !important;
  line-height:1.55 !important;
  height:auto !important;
  max-height:calc(1.55em * 4) !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:4 !important;
  overflow:hidden !important;
  margin:0 0 10px !important;
  overflow-wrap:anywhere !important;
}
.mp-promo-center .mp-promo-detail-button{
  flex:0 0 auto !important;
  margin-top:auto !important;
  margin-bottom:0 !important;
}
/* Fixed-size modal: only the details region scrolls, never shrink the image. */
.mp-promo-dialog,
.mp-promo-dialog[open]{
  box-sizing:border-box !important;
  width:min(92vw,600px) !important;
  height:min(82dvh,670px) !important;
  max-height:82dvh !important;
  min-height:0 !important;
  padding:0 !important;
  margin:auto !important;
  overflow:hidden !important;
  display:none;
  flex-direction:column !important;
  background:transparent !important;
  border:0 !important;
  border-radius:13px !important;
}
.mp-promo-dialog[open]{display:flex !important;}
.mp-promo-dialog .mp-promo-dialog-img{
  box-sizing:border-box !important;
  display:block !important;
  position:static !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:2 / 1 !important;
  max-height:38dvh !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  background:transparent !important;
  border-radius:12px 12px 0 0 !important;
}
.mp-promo-dialog .mp-promo-dialog-content{
  box-sizing:border-box !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin;
  padding:18px 20px 22px !important;
  background:linear-gradient(160deg,
    color-mix(in srgb, #090709 91%, var(--mp-accent,#de2626) 9%),
    color-mix(in srgb, #100a0b 87%, var(--mp-accent2,#640e12) 13%)) !important;
  border:1px solid color-mix(in srgb, var(--mp-accent,#e43b3b) 60%, #382124) !important;
  border-radius:0 0 13px 13px !important;
}
.mp-promo-dialog .mp-promo-description{
  white-space:pre-line !important;
  overflow-wrap:anywhere !important;
  line-height:1.7 !important;
}
.mp-promo-dialog .mp-promo-dialog-close{z-index:20 !important;}
@media(max-width:640px){
  .mp-promo-center .mp-promo-card-body{
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
    padding:16px !important;
  }
  .mp-promo-dialog, .mp-promo-dialog[open]{height:min(84dvh,640px) !important;max-height:84dvh !important;}
  .mp-promo-dialog .mp-promo-dialog-img{max-height:32dvh !important;}
  .mp-promo-dialog .mp-promo-dialog-content{padding:17px !important;}
}

/* V7: teks popup mengikuti enter dari Admin tanpa dobel spasi. */
.mp-promo-dialog .mp-promo-description {
  white-space:pre-line !important;
  line-height:1.5 !important;
  margin:0 !important;
  padding:0 !important;
}

/* =============================================================
   V8 - DARK ELEGANT: panel dominan hitam, aksen tema secukupnya.
   Tidak mengubah ukuran gambar, tinggi kartu, grid, atau popup.
   ============================================================= */

/* Panel deskripsi kartu: 96% hitam dengan semburat tema 4%. */
.mp-promo-center .mp-promo-card-body {
  background: linear-gradient(155deg,
    color-mix(in srgb, #080809 96%, var(--mp-accent,#cc2424) 4%),
    color-mix(in srgb, #100e10 95%, var(--mp-accent2,#8e1717) 5%)) !important;
  border-color: color-mix(in srgb, #404044 80%, var(--mp-accent,#cc2424) 20%) !important;
}

/* Popup detail: warna panel selaras dengan kartu, tetap scroll. */
.mp-promo-dialog .mp-promo-dialog-content {
  background: linear-gradient(155deg,
    color-mix(in srgb, #080809 96%, var(--mp-accent,#cc2424) 4%),
    color-mix(in srgb, #100e10 95%, var(--mp-accent2,#8e1717) 5%)) !important;
  border-color: color-mix(in srgb, #404044 80%, var(--mp-accent,#cc2424) 20%) !important;
}

/* "Lihat Detail": tombol netral, kecil, halus, bukan merah terang. */
.mp-promo-center .mp-promo-detail-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  gap: 9px !important;
  width: auto !important;
  min-height: 34px !important;
  margin-top: auto !important;
  padding: 7px 13px !important;
  background: #171719 !important;
  color: #f7f7f8 !important;
  border: 1px solid #444449 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.mp-promo-center .mp-promo-detail-button span {
  color: #dadade !important;
  font-size: 14px !important;
}
.mp-promo-center .mp-promo-detail-button:hover,
.mp-promo-center .mp-promo-detail-button:focus-visible {
  background: #262629 !important;
  color: #fff !important;
  border-color: #8a8a90 !important;
}

/* "Tampilkan promosi lainnya" / "Tutup" tetap hitam dan putih. */
.mp-promo-center .mp-promo-more {
  background: #0b0b0c !important;
  color: #fff !important;
  border: 1px solid #414145 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px #0005 !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.mp-promo-center .mp-promo-more .mp-promo-more-arrow {
  color: #fff !important;
}
.mp-promo-center .mp-promo-more:hover,
.mp-promo-center .mp-promo-more:focus-visible {
  background: #202023 !important;
  color: #fff !important;
  border-color: #7b7b80 !important;
}


/* V9 - popup follows description length; scroll only when content is long. */
.mp-promo-dialog,
.mp-promo-dialog[open] {
  height: auto !important;
  max-height: 82dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.mp-promo-dialog .mp-promo-dialog-img {
  flex: 0 0 auto !important;
}
.mp-promo-dialog .mp-promo-dialog-content {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
@media (max-width: 640px) {
  .mp-promo-dialog,
  .mp-promo-dialog[open] {
    height: auto !important;
    max-height: 84dvh !important;
  }
}