/* DOYANTOTO Desktop Redesign 2026 - Override Stylesheet
 * Konsep/struktur mengikuti ROMA agar konsisten, dengan tema warna hijau DOYAN.
 * Semua rule di-scope di bawah `html.roma-rd` (home) & `html.roma-rd-lobby`
 * (halaman setelah login); class ditambahkan oleh dekstop_design.js.
 * Sumber desain: Figma DOYANREDESIGN.
 */

/* ============================================================
   TOKENS
   ============================================================ */
html.roma-rd {
  --rd-font: 'Inter', 'Muli', -apple-system, BlinkMacSystemFont, sans-serif;

  --rd-page-bg: #0a2e1c;
  --rd-content-bg: #0d3322;

  --rd-header-bg: #012a18;
  --rd-infobar-bg: #717171;

  --rd-text: #ffffff;
  --rd-text-muted: #b9b8b8;

  --rd-content-width: 1288px;

  --rd-login-metal: linear-gradient(150deg, #bfbfbf 0%, #8f8f8f 22%, #606060 50%, #303030 74%, #08160e 100%);
}

/* ============================================================
   GLOBAL: font + background
   ============================================================ */
html.roma-rd,
html.roma-rd body,
html.roma-rd-lobby,
html.roma-rd-lobby body {
  background-color: var(--rd-page-bg) !important;
  background-image: url("https://zone-cache.b-cdn.net/websites/background/1781092879575_fifa26-doyan.png") !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

html.roma-rd body,
html.roma-rd-lobby body { font-family: var(--rd-font) !important; }

/* Class lobby juga butuh token font (--rd-font) & sembunyikan tombol feedback lama */
html.roma-rd-lobby {
  --rd-font: 'Inter', 'Muli', -apple-system, BlinkMacSystemFont, sans-serif;
  --rd-page-bg: #0a2e1c;
}
html.roma-rd-lobby img[src*="feedback"] { display: none !important; }

html.roma-rd h1, html.roma-rd h2, html.roma-rd h3, html.roma-rd h4,
html.roma-rd h5, html.roma-rd h6, html.roma-rd p, html.roma-rd a,
html.roma-rd span, html.roma-rd button, html.roma-rd input,
html.roma-rd select, html.roma-rd textarea, html.roma-rd li,
html.roma-rd td, html.roma-rd th, html.roma-rd label, html.roma-rd .btn,
html.roma-rd .copyright, html.roma-rd .date {
  font-family: var(--rd-font) !important;
}

/* Lebar konten mengikuti Figma (1288px, center) */
html.roma-rd .container {
  width: var(--rd-content-width) !important;
  max-width: 100% !important;
}

/* Ruang atas agar konten tidak tertimpa navbar+infobar sticky (92 + 52) */
html.roma-rd #breadcrumbs.breadcrumbs { display: none !important; }
html.roma-rd .section.margin-top { margin-top: 144px !important; padding-bottom: 0 !important; }

/* Panel gelap container (Rectangle #0e2116 di Figma) membungkus sidebar+konten */
html.roma-rd .section.margin-top > .container {
  background: var(--rd-content-bg);
  padding: unset !important;
}

#slider {
  padding-top: 10px !important;
}

/* Sembunyikan tombol feedback lama (kritik & saran) di kanan atas */
html.roma-rd img[src*="feedback"] { display: none !important; }

/* Sisa elemen template yang tidak ada di Figma */
html.roma-rd .footer-menu { display: none !important; }
html.roma-rd #footer .brand-support { display: none !important; }

/* ============================================================
   HEADER (navbar atas) - bg #eaeaea
   ============================================================ */
html.roma-rd .navbar.navbar-fixed-top {
  background: transparent !important;
  height: 92px !important;
  min-height: 92px !important;
  line-height: normal !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Bar terang selebar container (center), bukan full-width */
html.roma-rd .navbar.navbar-fixed-top .container {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--rd-header-bg) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Logo brand */
html.roma-rd .navbar-header { 
  float: none;
  height: 92px;
  display: flex;
  align-items: center;
  width: 280px !important;
  position: relative;
  left: -65px;
}
html.roma-rd .navbar-brand {
  height: 92px !important;
  width: 280px !important;
  background-size: 280px auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
}
html.roma-rd .logo-imlek { display: none !important; }
html.roma-rd .navbar-toggle { display: none !important; }

/* Grup login di kanan */
html.roma-rd .navbar-collapse {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  position: relative;
  right: -70px;
}
html.roma-rd .navbar-collapse .col-md-4.margin { display: none !important; }
html.roma-rd .navbar-collapse .row {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 7px;
}
html.roma-rd .navbar-collapse form {
  display: flex;
  align-items: center;
  gap: 7px;
}
html.roma-rd .navbar .form-group {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

/* Field username & password */
html.roma-rd #navbar_username,
html.roma-rd #navbar_password {
  width: 208px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: var(--rd-header-bg) !important;
  border: 0 !important;
  box-shadow: inset 1.667px -1.667px 8px rgba(0, 0, 0, 0.2),
              inset -1.667px 1.667px 8px rgba(0, 0, 0, 0.4) !important;
  color: #2b2b2b !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}
html.roma-rd #navbar_username::placeholder,
html.roma-rd #navbar_password::placeholder { color: #7a7a7a !important; }

/* Tombol LOGIN (metalik silver) */
html.roma-rd #submitlogin,
html.roma-rd .btn.btn-theme.login {
  width: 96px !important;
  height: 40px !important;
  border-radius: 4px !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  background: var(--rd-login-metal) !important;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tombol DAFTAR (di-inject via JS) */
html.roma-rd .rd-daftar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 40px;
  border-radius: 4px;
  background: #ffffff;
  color: #000000 !important;
  border: 1px solid #000000;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: inset 0 0 3.4px rgba(0, 0, 0, 0.4);
}
html.roma-rd .rd-daftar-btn:hover { background: #f0f0f0; }

/* Sorot login/daftar top-nav saat user klik link game (flow auth) */
html.roma-rd .rd-auth-flash {
  animation: rd-auth-flash 1.8s ease;
  border-radius: 6px;
  position: relative;
  z-index: 5;
}
@keyframes rd-auth-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,191,106,0); }
  12% { box-shadow: 0 0 0 3px rgba(47,191,106,0.9), 0 0 16px 3px rgba(21,154,79,0.6); }
  55% { box-shadow: 0 0 0 3px rgba(47,191,106,0.5), 0 0 10px 1px rgba(21,154,79,0.3); }
}

/* ============================================================
   BAR INFO TERKINI - bg #717171 (wrapper di-tag via JS: .rd-infobar)
   ============================================================ */
/* Info Terkini: fixed tepat di bawah navbar, ikut sticky, lebar container */
html.roma-rd .rd-infobar {
  position: fixed !important;
  top: 92px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1029 !important;
  background: transparent !important;
  padding: 0 !important;
}
/* Bar modern: gelap glossy dgn aksen tipis di bawah & bayangan halus */
html.roma-rd .rd-infobar .container {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 18px !important;
  background: linear-gradient(rgb(43, 43, 49) 0%, rgb(27, 27, 31) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
html.roma-rd .rd-infobar .row {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  flex-wrap: nowrap;
}

/* Hilangkan kotak/latar bawaan template */
html.roma-rd .rd-infobar [class*="col-"],
html.roma-rd .rd-infobar .news-head,
html.roma-rd .rd-infobar .news-body,
html.roma-rd .rd-infobar .newsticker,
html.roma-rd .rd-infobar .tickercontainer,
html.roma-rd .rd-infobar .mask,
html.roma-rd .rd-infobar .masking {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.col-sm-9.news-body .tickercontainer {
  margin-top: 5px !important;
}

/* Label kiri: chip ikon megaphone emas + teks + garis pemisah vertikal */
html.roma-rd .rd-infobar .news-head {
  position: relative;
  width: auto !important;
  flex: 0 0 auto;
  float: none !important;
  text-align: left !important;
  padding: 0 20px 0 0 !important;
  margin: 0 !important;
  height: 52px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
html.roma-rd .rd-infobar .news-head::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
}
html.roma-rd .rd-infobar .news-head h5 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.4px;
  line-height: 1 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-transform: uppercase;
}
html.roma-rd .rd-infobar .news-head .fa-bullhorn,
html.roma-rd .rd-infobar .news-head .fa {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3fd07a 0%, #0f8a45 100%);
  box-shadow: 0 3px 10px rgba(15,138,69,0.35),
              inset 0 1px 0 rgba(255,255,255,0.45);
}
/* Ikon megaphone crisp via SVG mask (tak bergantung font FontAwesome) */
html.roma-rd .rd-infobar .news-head .fa-bullhorn::before,
html.roma-rd .rd-infobar .news-head .fa::before {
  content: "" !important;
  display: block;
  width: 17px;
  height: 17px;
  background-color: #193828;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h3l5 4V4l-5 4m9.5 4c0 1.71-.96 3.26-2.5 4V8c1.53.75 2.5 2.3 2.5 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h3l5 4V4l-5 4m9.5 4c0 1.71-.96 3.26-2.5 4V8c1.53.75 2.5 2.3 2.5 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-8deg);
  transform-origin: 60% 60%;
  animation: rd-mega 3.6s ease-in-out infinite;
}
@keyframes rd-mega {
  0%, 84%, 100% { transform: rotate(-8deg); }
  89% { transform: rotate(2deg); }
  94% { transform: rotate(-14deg); }
}

/* Running text: mengisi sisa ruang, dgn fade halus di kedua tepi (mask) */
html.roma-rd .rd-infobar .news-body {
  flex: 1 1 auto;
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 0 0 20px !important;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
html.roma-rd .rd-infobar .tickercontainer,
html.roma-rd .rd-infobar .masking,
html.roma-rd .rd-infobar .newsticker {
  height: 24px !important;
  line-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
html.roma-rd .rd-infobar .newsticker li,
html.roma-rd .rd-infobar .newsticker a,
html.roma-rd .rd-infobar .run-text-depan,
html.roma-rd .rd-infobar .news-body * {
  color: #ececec !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  line-height: 24px !important;
  vertical-align: middle !important;
}

/* ============================================================
   SIDEBAR KIRI (rebuild via JS: .rd-sidebar di dalam .blog-sidebar)
   ============================================================ */
html.roma-rd .blog-sidebar { background: transparent !important; }
html.roma-rd .rd-sidebar-host > *:not(.rd-sidebar) { display: none !important; }

/* Row utama jadi flex agar kolom kiri bisa sticky (hanya konten kanan yg bergulir).
   Lebar mengikuti Figma: sidebar 310px, konten kanan mengisi sisa. */
html.roma-rd .section.margin-top > .container > .row {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
html.roma-rd .section.margin-top .blog-sidebar {
  float: none;
  flex: 0 0 310px;
  width: 310px !important;
  max-width: 310px;
  padding: 0 !important;
}
html.roma-rd .section.margin-top .blog-posts {
  float: none;
  flex: 1 1 auto;
  width: auto !important;
  max-width: none;
  min-width: 0;
  padding: unset !important;
}

/* Sidebar sticky + compact agar muat 1 layar */
html.roma-rd .rd-sidebar {
  position: sticky;
  top: 156px;
  width: 100%;
  max-width: 310px;
  height: calc(100vh - 168px);
  overflow: hidden;
  color: #fff;
}
html.roma-rd .rd-sidebar::-webkit-scrollbar { display: none; }
/* Kolom penuh: event (atas) + menu (tengah, scroll) + promo (bawah) tetap */
html.roma-rd .rd-sidebar-inner {
  width: 310px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================
   Kartu Event "Coming Soon" — gaya terkurasi (premium/minimalis):
   charcoal + spotlight emas atas, bingkai ganda tipis, kicker dgn garis
   emas mengapit, emblem mahkota dalam ring bercahaya, tipografi berjenjang.
   Palet emas antik (#d4af37) untuk kesan mewah, motion halus & terkendali.
   ============================================================ */
html.roma-rd .rd-event {
  position: relative;
  width: 100%;
  aspect-ratio: 310 / 180;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(212,175,55,0.38);
  background:
    radial-gradient(100% 76% at 50% -14%, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.03) 42%, rgba(0,0,0,0) 66%),
    linear-gradient(160deg, #142e21 0%, #0e2116 58%, #0a1a11 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 26px rgba(0,0,0,0.4);
}
/* Bingkai dalam tipis (double-frame) — detail premium */
html.roma-rd .rd-event::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 2px;
  pointer-events: none;
}
html.roma-rd .rd-event > * { position: relative; z-index: 1; }

/* Kicker: teks kecil ber-spasi dgn garis emas mengapit */
html.roma-rd .rd-event-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #3ba86a;
}
html.roma-rd .rd-event-kicker i {
  width: 16px;
  height: 1px;
  display: inline-block;
  background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,0.85));
}
html.roma-rd .rd-event-kicker i:last-child {
  background: linear-gradient(90deg, rgba(212,175,55,0.85), rgba(212,175,55,0));
}

/* Emblem: mahkota dalam ring dgn halo emas lembut + denyut halus */
html.roma-rd .rd-event-emblem {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212,175,55,0.35);
  background: radial-gradient(circle at 50% 45%, rgba(212,175,55,0.20), rgba(212,175,55,0) 70%);
  animation: rd-event-halo 3.4s ease-in-out infinite;
}
@keyframes rd-event-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.20); }
  50% { box-shadow: 0 0 16px 2px rgba(212,175,55,0.30); }
}
html.roma-rd .rd-event-ico {
  width: 22px;
  height: 22px;
  background-color: #eccd6e;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-1h14v1Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-1h14v1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.roma-rd .rd-event .rd-event-title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fbe6a2 0%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3ba86a;
}
html.roma-rd .rd-event .rd-event-desc {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: #9a968c;
  margin-top: -2px;
}

/* Ikon berbasis mask (Iconify) -> warna ikut currentColor (status aktif/nonaktif) */
html.roma-rd .rd-ico {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
/* Ikon berwarna: render asli tanpa mask */
html.roma-rd .rd-ico-img {
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  object-fit: contain;
}

/* Menu list (compact) */
/* Menu = area tengah yg bisa scroll internal (saat dropdown diperluas / layar
   pendek), sehingga event card & promo tetap di tempat dan TIDAK mengecil. */
html.roma-rd .rd-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
html.roma-rd .rd-menu::-webkit-scrollbar { width: 5px; }
html.roma-rd .rd-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; }
html.roma-rd .rd-menu::-webkit-scrollbar-track { background: transparent; }
html.roma-rd .rd-item-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  transition: background 0.15s;
}
html.roma-rd .rd-item-link .rd-ico { flex: 0 0 19px; width: 19px; height: 19px; }
html.roma-rd .rd-item-link:hover { background: rgba(255,255,255,0.08) !important; }
/* Kunci state fokus/klik/visited agar TIDAK berubah jadi kotak putih kosong
   (template punya style bawaan a:focus/:active). Teks tetap terlihat. */
html.roma-rd .rd-item-link:focus,
html.roma-rd .rd-item-link:focus-visible,
html.roma-rd .rd-item-link:active,
html.roma-rd .rd-item-link:visited {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
  outline: none !important;
  box-shadow: none !important;
}
html.roma-rd .rd-item-link:focus span,
html.roma-rd .rd-item-link:active span,
html.roma-rd .rd-item-link:visited span { color: #fff !important; }
html.roma-rd .rd-item-link.rd-active,
html.roma-rd .rd-item-link.rd-active:hover,
html.roma-rd .rd-item-link.rd-active:focus,
html.roma-rd .rd-item-link.rd-active:active,
html.roma-rd .rd-item-link.rd-active:visited {
  background: linear-gradient(180deg, #2fbf6a 0%, #0f8a45 100%) !important;
  color: #ffffff !important;
  border-color: rgba(120,235,160,0.5) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35),
              inset 0 -2px 3px rgba(0,60,30,0.4);
}
html.roma-rd .rd-item-link.rd-active span { color: #ffffff !important; }
html.roma-rd .rd-item-link.rd-bold { font-weight: 700; font-size: 15px; }

/* ----- Grup dropdown sidebar (Fitur / Link Alternatif) ----- */
html.roma-rd .rd-group { display: flex; flex-direction: column; }
html.roma-rd .rd-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: background 0.15s;
}
html.roma-rd .rd-group-head:hover { background: rgba(255,255,255,0.08); }
html.roma-rd .rd-group-head .rd-ico { flex: 0 0 19px; width: 19px; height: 19px; }
html.roma-rd .rd-group-title { flex: 1 1 auto; }
html.roma-rd .rd-group-arrow {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin-top 0.25s ease;
}
html.roma-rd .rd-group.rd-group-open .rd-group-arrow { transform: rotate(-135deg); margin-top: 2px; }
html.roma-rd .rd-group-body {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: max-height 0.3s ease, padding-top 0.3s ease;
}
html.roma-rd .rd-group.rd-group-open .rd-group-body { max-height: 640px; padding-top: 3px; }
/* Sub-item di dalam dropdown */
html.roma-rd .rd-sub-link {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 10px 0 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  color: #d8d8d8 !important;
  font-size: 13px;
  text-transform: capitalize;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
}
html.roma-rd .rd-sub-link:hover { background: rgba(255,255,255,0.08); color: #fff !important; }
html.roma-rd .rd-sub-link span:last-child { overflow: hidden; text-overflow: ellipsis; }
html.roma-rd .rd-sub-link .rd-ico { flex: 0 0 16px; width: 16px; height: 16px; }
html.roma-rd .rd-sub-ico {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d8d8d8;
}
html.roma-rd .rd-sub-ico svg,
html.roma-rd .rd-sub-ico img { width: 16px; height: 16px; display: block; object-fit: contain; }
/* Dot Promosi: inti biru pucat + glow berdenyut (pulse), presisi Figma */
html.roma-rd .rd-item-link .rd-dot {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #bcdcff;
  box-shadow: 0 0 6px 1px rgba(140,200,255,0.9);
  animation: rd-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes rd-dot-pulse {
  0%   { box-shadow: 0 0 4px 1px rgba(140,200,255,0.85), 0 0 0 0 rgba(140,200,255,0.65); }
  70%  { box-shadow: 0 0 7px 2px rgba(140,200,255,0.95), 0 0 0 9px rgba(140,200,255,0); }
  100% { box-shadow: 0 0 4px 1px rgba(140,200,255,0.85), 0 0 0 0 rgba(140,200,255,0); }
}

/* Laporkan keluhan (metalik) - ikon report besar rata kiri, di-clip rapi oleh tombol */
/* Tombol Laporkan Keluhan: metalik silver glossy (kilau di atas, patahan di
   tengah, gelap tipis di bawah) + border & bayangan halus (sesuai gambar 2). */
html.roma-rd .rd-complaint {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 44px;
  flex: 0 0 auto;
  padding: 0 14px 0 58px;
  border-radius: 6px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 15px;
  text-transform: capitalize;
  background: linear-gradient(180deg, #2fbf6a 0%, #159a4f 52%, #0f8a45 100%);
  border: 1px solid rgba(120,235,160,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),
              inset 0 -1px 1px rgba(0,0,0,0.2),
              0 2px 6px rgba(0,80,40,0.45);
  transition: filter 0.15s ease;
  overflow: hidden;
}
html.roma-rd .rd-complaint:hover { filter: brightness(1.08); }
/* Ikon report (oktagon "!") termuat rapi di dalam tombol, sedikit miring */
html.roma-rd .rd-complaint .rd-cicon {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%) rotate(12deg);
  flex: none;
  width: 70px;
  height: 70px;
  color: #fff;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.35)) opacity(0.95);
}
/* Ikon info: "i" dalam lingkaran, dgn tooltip saat hover */
html.roma-rd .rd-complaint .rd-info {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  cursor: help;
}
/* Tooltip global (ditempel ke <body> via JS, position:fixed) sehingga TIDAK
   terpotong oleh overflow:hidden pada .rd-complaint / .rd-menu / .rd-sidebar. */
html.roma-rd .rd-tip {
  position: fixed;
  z-index: 100001;
  background: #0d1f15;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
html.roma-rd .rd-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 5px solid transparent;
  border-top-color: #0d1f15;
}
html.roma-rd .rd-tip.rd-tip-show { opacity: 1; transform: translateY(0); }

html.roma-rd .rd-complaint span {
  margin-left: 10px;
  font-size: 2rem;
}

/* Kartu promo (compact) */
html.roma-rd .rd-promo {
  position: relative;
  display: block;
  height: 88px;
  flex: 0 0 auto;
  border-radius: 4px;
  overflow: hidden;
  border-bottom: 3px solid #fff;
  box-shadow: 0 1.5px 4px rgba(0,0,0,0.75);
  text-decoration: none !important;
}
html.roma-rd .rd-promo.rd-promo-spin { border-bottom-color: #7f9daa; }
html.roma-rd .rd-promo .rd-promo-bg { position: absolute; inset: 0; }
html.roma-rd .rd-promo-bukti .rd-promo-bg { background: linear-gradient(251deg, #10241a 29%, rgba(255,255,255,0.63) 100%); }
html.roma-rd .rd-promo-spin .rd-promo-bg { background: linear-gradient(251deg, #000000 29%, rgba(255,255,255,0.63) 100%); }
html.roma-rd .rd-promo img {
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 100px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
}
html.roma-rd .rd-promo .rd-promo-title { position: absolute; left: 42%; top: 10px; font-weight: 900; font-size: 15px; color: #f6ad0e; }
html.roma-rd .rd-promo .rd-promo-sub { position: absolute; left: 42%; top: 32px; font-size: 9px; color: #fff; text-transform: capitalize; }
html.roma-rd .rd-promo .rd-promo-btn {
  position: absolute;
  left: 42%;
  right: 2.5%;
  bottom: 9px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.1));
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

/* ============================================================
   PHASE 3 - KONTEN UTAMA (hero banner + baris ikon game)
   ============================================================ */
/* Hero banner: carousel kustom (owl bawaan disembunyikan via JS) */
html.roma-rd #slider #progressBar { display: none !important; }
html.roma-rd #slider .owl-carousel { display: none !important; }

/* Carousel kustom: viewport ber-aspect-ratio tetap (mengikuti ukuran asset
   840x480 ~= 292:167) sehingga selalu pas lebar & tinggi di semua ukuran
   desktop, satu slide penuh selebar container, tanpa overlap. */
html.roma-rd #slider .rd-carousel { position: relative; width: 100%; }
html.roma-rd .rd-carousel-viewport {
  position: relative;
  right: 2px;
  width: 100%;
  aspect-ratio: 299 / 172;
  overflow: hidden;
  border-radius: 10px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
html.roma-rd .rd-carousel-viewport.rd-carousel-dragging { cursor: grabbing; }
html.roma-rd .rd-carousel-slide img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
html.roma-rd .rd-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(.25,.8,.3,1);
  will-change: transform;
}
html.roma-rd .rd-carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; }
html.roma-rd .rd-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Panah navigasi kiri/kanan */
html.roma-rd .rd-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
html.roma-rd .rd-carousel:hover .rd-carousel-nav { opacity: 1; }
html.roma-rd .rd-carousel-nav:hover { background: rgba(0, 0, 0, 0.7); }
html.roma-rd .rd-carousel-prev { left: 10px; }
html.roma-rd .rd-carousel-next { right: 10px; }
/* Dots pagination: aktif emas memanjang */
html.roma-rd .rd-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 10px;
}
html.roma-rd .rd-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}
html.roma-rd .rd-carousel-dot.active {
  background: #f6ad0e;
  width: 22px;
  border-radius: 6px;
}

/* Baris ikon game (gameicon): jarak + sudut membulat + hover naik */
html.roma-rd #latest-results.margin-top-15 { margin-top: 16px !important; }
html.roma-rd .gameicon .item { padding: 0 5px; }
html.roma-rd .gameicon .item img {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease;
}
html.roma-rd .gameicon .item img:hover { transform: translateY(-3px); }

/* --- Section baru: banner sekunder + provider + tab filter (via JS) --- */
html.roma-rd .rd-content { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; position: relative; right: 2px; }
html.roma-rd .rd-banner2 {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Provider: marquee berjalan kanan -> kiri secara smooth */
@keyframes rd-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Baris ikon game (provider): kartu individual, bisa digeser (drag) kiri/kanan.
   Kartu 1-8 memakai render Figma pixel-perfect; sisanya tile CSS + logo putih. */
html.roma-rd .rd-gicons {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
html.roma-rd .rd-gicons::-webkit-scrollbar { display: none; }
html.roma-rd .rd-gicons.rd-gicons-drag { cursor: grabbing; }
html.roma-rd .rd-gicons-track {
  display: flex;
  gap: 8px;
  width: max-content;
  padding: 2px 0;
}
html.roma-rd .rd-gi {
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
}
/* Kartu 1-8: render Figma penuh */
html.roma-rd .rd-gi { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
html.roma-rd .rd-gi img { -webkit-user-drag: none; }
html.roma-rd .rd-gi-render img {
  display: block;
  width: 104px;
  height: auto;
  pointer-events: none;
}
/* Kartu 9-35: tile gelap + glow + border, sesuai gaya Figma */
/* Tile dibuat SAMA dengan kartu render Figma: base gelap #0f2318 + glow putih
   di bawah-tengah, border putih tipis, sudut membulat, dan garis cahaya crisp
   di tepi bawah. Ukuran & posisi disamakan agar konsisten dengan render. */
html.roma-rd .rd-gi-tile {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  /* Glow latar disamakan persis dgn render: terang (puncak ~grey 150 di bawah-
     tengah) TAPI tetap tinggi & menyebar lembut ke atas. */
  background:
    radial-gradient(56% 82% at 50% 108%, rgba(74,222,128,0.55) 0%, rgba(47,191,106,0.16) 42%, rgba(10,46,28,0) 84%),
    #0e2116;
  border: 1px solid rgba(90,220,140,0.4);
  box-shadow: inset 0 1px 1px rgba(160,240,190,0.28);
  overflow: hidden;
}
/* Garis cahaya PENDEK di tepi bawah-tengah tile — lebar disamakan dgn render
   (render ~15px saat tampil), bukan garis panjang, supaya konsisten. */
html.roma-rd .rd-gi-tile::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 15px;
  height: 4px;
  border-radius: 999px;
  background: #c9ffdd;
  box-shadow: 0 0 8px 2px rgba(120,240,160,0.9),
              0 -12px 26px 6px rgba(47,191,106,0.14);
}
html.roma-rd .rd-gi-ic {
  max-width: 66%;
  max-height: 58%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Samakan jadi putih (spt Figma) baik untuk logo putih maupun ikon berwarna */
  filter: brightness(0) invert(1);
  pointer-events: none;
}
html.roma-rd .rd-gi-fallback {
  padding: 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.15;
  text-transform: uppercase;
}
html.roma-rd .rd-gi-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}
html.roma-rd .rd-gi-label b { font-size: 12px; font-weight: 700; color: #fff; }
html.roma-rd .rd-gi-label i { font-size: 12px; font-style: normal; color: #9d9d9d; }

/* Bar filter + search (glossy) */
html.roma-rd .rd-filterbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 8px;
  /* Panel gelap hijau (bukan frosted terang) supaya teks tab putih tetap
     terbaca di atas background FIFA hijau yang terang. */
  background: linear-gradient(180deg, rgba(23,66,44,0.85), rgba(8,32,20,0.9));
  border: 1px solid rgba(120,220,150,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
              0 4px 14px rgba(0,0,0,0.35);
}
html.roma-rd .rd-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-radius: 4px;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  transition: background 0.15s, border-color 0.15s;
}
html.roma-rd .rd-tab .rd-ico { flex: 0 0 20px; width: 20px; height: 20px; }
html.roma-rd .rd-tab:hover { background: rgba(255,255,255,0.06); }
html.roma-rd .rd-tab.rd-tab-active {
  border-color: rgba(255,255,255,0.2);
  background:
    radial-gradient(120% 400% at 50% 100%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 98%),
    rgba(255,255,255,0.1);
}

/* Kolom search */
html.roma-rd .rd-search {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 39px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(105deg, rgba(10,10,10,0.5) 44%, rgba(1,1,1,0.5) 100%);
}
html.roma-rd .rd-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 16px !important;
  padding: 0 !important;
}
html.roma-rd .rd-search input::placeholder { color: rgba(255,255,255,0.5) !important; }
html.roma-rd .rd-search .rd-search-ico { flex: 0 0 20px; width: 20px; height: 20px; color: rgba(255,255,255,0.8); }

/* Konten game live (pools) diganti oleh section Figma */
html.roma-rd #latest-results { display: none !important; }

/* Kartu hasil togel (rebuild sesuai Figma) */
html.roma-rd .rd-togel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
/* Bentuk kartu presisi Figma: rounded-rect dengan tepi kiri-kanan bergerigi
   (scallop/ticket edge). Silhouette diambil dari path "Subtract" asli Figma
   dan dipakai sebagai CSS mask, sehingga gerigi + gradient terang->navy +
   glow tepi (via inset shadow yang ikut ter-mask) tampil sesuai desain. */
html.roma-rd .rd-tg-card {
  --rd-tg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 233 225' preserveAspectRatio='none'%3E%3Cpath d='M225 0C229.418 1.86834e-06 233 3.58172 233 8V16.791C230.608 16.791 228.669 19.2967 228.669 22.3877C228.669 25.3823 230.489 27.8277 232.777 27.9775L233 27.9854V38.0596C230.608 38.0596 228.669 40.5653 228.669 43.6562C228.669 46.6509 230.489 49.0963 232.777 49.2461L233 49.2539V59.3281C230.608 59.3282 228.669 61.8347 228.669 64.9258C228.669 67.9202 230.489 70.3648 232.777 70.5146L233 70.5225V80.5967C230.608 80.5967 228.669 83.1032 228.669 86.1943C228.669 89.1888 230.489 91.6344 232.777 91.7842L233 91.791V101.866C230.608 101.866 228.669 104.372 228.669 107.463C228.669 110.554 230.608 113.06 233 113.06V123.134C230.608 123.134 228.669 125.64 228.669 128.731C228.669 131.822 230.608 134.328 233 134.328V144.403C230.608 144.403 228.669 146.909 228.669 150C228.669 153.091 230.608 155.597 233 155.597V165.672C230.608 165.672 228.669 168.177 228.669 171.269C228.669 174.36 230.608 176.865 233 176.865V186.94C230.608 186.94 228.669 189.446 228.669 192.537C228.669 195.532 230.489 197.977 232.777 198.127L233 198.135V217C233 221.418 229.418 225 225 225H8C3.58172 225 1.04695e-07 221.418 0 217V198.135C2.39187 198.135 4.33105 195.628 4.33105 192.537C4.33097 189.543 2.51102 187.097 0.222656 186.947L0 186.94V176.865C2.39187 176.865 4.33105 174.36 4.33105 171.269C4.33102 168.274 2.51105 165.828 0.222656 165.679L0 165.672V155.597C2.39187 155.597 4.33105 153.091 4.33105 150C4.33103 147.005 2.51106 144.56 0.222656 144.41L0 144.403V134.328C2.39181 134.328 4.33096 131.822 4.33105 128.731C4.33105 125.64 2.39187 123.134 0 123.134V113.06C2.39184 113.06 4.33102 110.554 4.33105 107.463C4.33105 104.468 2.51107 102.023 0.222656 101.873L0 101.866V91.791C2.39177 91.791 4.3309 89.2853 4.33105 86.1943C4.33105 83.1032 2.39187 80.5967 0 80.5967V70.5225C2.39177 70.5225 4.33089 68.0168 4.33105 64.9258C4.33105 61.8346 2.39187 59.3281 0 59.3281V49.2539C2.39187 49.2539 4.33105 46.7474 4.33105 43.6562C4.33087 40.5653 2.39175 38.0596 0 38.0596V27.9854C2.39187 27.9854 4.33105 25.4788 4.33105 22.3877C4.3309 19.2967 2.39177 16.791 0 16.791V8C0 3.58172 3.58172 0 8 0H225Z' fill='white'/%3E%3C/svg%3E");
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px 12px;
  /* Hijau gelap khas DOYAN: kilau tipis di atas + semburat hijau di bawah. */
  background:
    linear-gradient(180deg, rgba(150,240,190,0.10) 0%, rgba(255,255,255,0) 34%, rgba(20,130,70,0.30) 100%),
    #103524;
  color: #fff;
  -webkit-mask: var(--rd-tg-mask) center / 100% 100% no-repeat;
          mask: var(--rd-tg-mask) center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
              inset 1px 0 1px rgba(255,255,255,0.35),
              inset -1px 0 1px rgba(255,255,255,0.35),
              inset 0 -1px 1px rgba(255,255,255,0.12);
}
html.roma-rd .rd-tg-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,0.85);
}
/* Ikon lambang tiap pasaran (sesuai aset asli Figma per market) */
html.roma-rd .rd-tg-ico {
  flex: 0 0 auto;
  max-width: 28px;
  max-height: 22px;
  width: auto;
  height: auto;
  object-fit: contain;
}
html.roma-rd .rd-tg-num {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 5px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
  border-radius: 6px;
  font-weight: 700;
  font-size: 47px;
  letter-spacing: 2px;
}
/* Hasil dengan banyak karakter (nama/teks non-4D) -> font mengecil & tak meluber */
html.roma-rd .rd-tg-num.rd-tg-num-sm {
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 6px;
}
/* Rotasi data togel: kartu tetap diam, hanya blok nilai yang fade in/out */
html.roma-rd .rd-tg-val {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.4s ease;
}
html.roma-rd .rd-tg-card.rd-tg-hide .rd-tg-val { opacity: 0; }
/* Kartu kosong (sisa scene terakhir): frame tetap, isi kosong & sedikit redup */
html.roma-rd .rd-tg-card.rd-tg-empty { opacity: 0.55; }
html.roma-rd .rd-tg-next { margin-top: 12px; font-size: 12px; color: #fff; text-transform: capitalize; }
html.roma-rd .rd-tg-cd { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; }
html.roma-rd .rd-tg-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
html.roma-rd .rd-tg-box {
  width: 100%;
  min-width: 44px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
}
html.roma-rd .rd-tg-lbl { font-size: 10px; color: #fff; text-transform: capitalize; }
html.roma-rd .rd-tg-sep { font-weight: 700; margin-top: 6px; }
html.roma-rd .rd-tg-btn {
  width: 100%;
  margin-top: 12px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: #fff;
}
html.roma-rd .rd-tg-open { background: linear-gradient(180deg, #22a94f 0%, #0f7a34 100%); }
html.roma-rd .rd-tg-closed { background: linear-gradient(180deg, #e23b3b 0%, #a51e1e 100%); }

/* Banner Prediksi Angka Jitu + tombol Cek Disini */
html.roma-rd .rd-prediksi {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
  margin-top: 10px;
}
html.roma-rd .rd-prediksi img { display: block; width: 100%; height: auto; }
html.roma-rd .rd-prediksi-btn {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 28px;
  border-radius: 4px;
  background: linear-gradient(180deg, #feaa4f 0%, #735034 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Section header (SLOT GAMES / Live Casino + Lihat Semua) */
html.roma-rd .rd-sechead { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
html.roma-rd .rd-sechead-l { display: flex; align-items: baseline; gap: 8px; }
html.roma-rd .rd-sechead-t { font-weight: 800; font-size: 20px; color: #fff; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
html.roma-rd .rd-sechead-c { font-size: 13px; color: #9d9d9d; }
/* Header "Togel" presisi Figma: title-case (bukan huruf besar semua) dan
   sedikit lebih kecil/tipis dibanding header section lain (Slot Games dsb
   memang ditulis huruf besar semua di sumber desainnya). */
html.roma-rd .rd-content .rd-sechead:first-of-type .rd-sechead-t {
  text-transform: none;
  font-weight: 700;
  font-size: 17px;
}
html.roma-rd .rd-content .rd-sechead:first-of-type .rd-sechead-c { color: rgba(255,255,255,0.5); }
html.roma-rd .rd-sechead-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #cfcfcf !important; text-decoration: none !important; }
html.roma-rd .rd-sechead-more .rd-more-ico { flex: 0 0 12px; width: 12px; height: 12px; }

/* Grid game (slot 4 kolom / live casino 3 kolom, sesuai Figma) */
html.roma-rd .rd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
html.roma-rd .rd-grid.rd-grid-3 { grid-template-columns: repeat(3, 1fr); }
html.roma-rd .rd-grid.rd-grid-3 .rd-game { aspect-ratio: 309 / 133; }
html.roma-rd .rd-game {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 232 / 133;
  background: #0b1b12;
  border: 1px solid transparent;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
html.roma-rd .rd-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, filter 0.35s ease;
}
/* Overlay gradasi gelap muncul saat hover */
html.roma-rd .rd-game::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
/* Kilau menyapu dari kiri ke kanan saat hover */
html.roma-rd .rd-game::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 55%;
  z-index: 1;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
html.roma-rd .rd-game:hover {
  transform: translateY(-4px);
  border-color: rgba(246,173,14,0.65);
  box-shadow: 0 8px 22px rgba(0,0,0,0.65), 0 0 14px rgba(246,173,14,0.25);
}
html.roma-rd .rd-game:hover img { transform: scale(1.1); filter: brightness(1.08); }
html.roma-rd .rd-game:hover::after { opacity: 1; }
html.roma-rd .rd-game:hover::before { left: 130%; }
html.roma-rd .rd-game-play {
  position: absolute;
  left: 50%;
  bottom: -34px;
  z-index: 6;
  transform: translateX(-50%);
  opacity: 0;
  transition: bottom 0.28s ease, opacity 0.28s ease;
  padding: 5px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f6d365 0%, #d99a15 100%);
  color: #3a2600 !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
html.roma-rd .rd-game:hover .rd-game-play { bottom: 10px; opacity: 1; }

/* ---- Kartu SLOT berlapis (bg tema + hero karakter + logo provider) ----
   Kotak posisi/ukuran hero & logo memakai CSS var (sh dan sl) yang
   dihitung presisi per kartu dari spec Figma asli (basis kartu 232x133),
   supaya proporsi & posisi tiap kartu konsisten sesuai desain. */
html.roma-rd .rd-slot { background: #0b1b12; }
html.roma-rd .rd-slot .rd-slot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom-in sedikit di kondisi awal supaya saat hover "menjauh" (mengecil
     ke scale(1)) gambar masih menutupi penuh kartu, tidak pernah turun di
     bawah skala asli agar tepi kartu tidak kosong/terpotong. */
  transform: scale(1.15);
  transition: transform 0.55s cubic-bezier(.25,.8,.3,1), filter 0.55s ease;
}
html.roma-rd .rd-slot .rd-slot-hero {
  position: absolute;
  left: var(--sh-cx, 50%);
  top: var(--sh-cy, 58%);
  width: var(--sh-w, 55%);
  height: var(--sh-h, 100%);
  max-width: none;
  object-fit: cover;
  /* Rata-atas: sisa crop dibuang dari bawah, bukan dari tengah, supaya
     kepala/wajah karakter tidak pernah terpotong (mengikuti pola crop asli
     Figma yang selalu top-aligned pada tiap kartu). */
  object-position: center top;
  z-index: 1;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  transition: transform 0.5s cubic-bezier(.22,.8,.24,1), filter 0.5s ease;
}
html.roma-rd .rd-slot .rd-slot-logo {
  position: absolute;
  left: 50%;
  top: var(--sl-cy, 78%);
  width: var(--sl-w, 76%);
  height: var(--sl-h, 28%);
  max-width: none;
  object-fit: contain;
  z-index: 2;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75));
  transition: none;
}
html.roma-rd .rd-slot .rd-slot-logotxt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-size: 18px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
html.roma-rd .rd-slot .rd-slot-logotxt b { color: #f38f20; font-weight: 900; margin-left: 4px; }
/* Hover: bg menjauh (zoom-out) + meredup, hero upscale sedikit, logo diam
   di tempat (override eksplisit ini WAJIB ada, sebab aturan umum
   `.rd-game:hover img{transform:scale(1.1)}` di atas akan menimpa transform
   translate(-50%,-50%) milik logo kalau tidak ditulis ulang di sini). */
html.roma-rd .rd-slot:hover .rd-slot-bg { transform: scale(1); filter: brightness(0.5); }
html.roma-rd .rd-slot:hover .rd-slot-hero { transform: translate(-50%, -50%) scale(1.1); }
html.roma-rd .rd-slot:hover .rd-slot-logo {
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75));
}
html.roma-rd .rd-slot:hover .rd-slot-logotxt { transform: translate(-50%, -50%); }
html.roma-rd .rd-slot:hover { border-color: transparent !important; box-shadow: 0 8px 22px rgba(0,0,0,0.6) !important; }

/* Kartu Live Casino berlapis (bg + model + logo + provider), posisi tiap
   layer memakai CSS var (di-set inline per kartu) hasil hitung presisi dari
   spec Figma (basis kartu 309x133) supaya tiap game konsisten sesuai desain. */
html.roma-rd .rd-lc { background: #0b1b12; }
html.roma-rd .rd-lc .rd-lc-bg {
  position: absolute;
  left: var(--bg-l); top: var(--bg-t);
  width: var(--bg-w); height: var(--bg-h);
  object-fit: cover;
  filter: brightness(0.6) saturate(1.05);
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(.25,.8,.3,1), filter 0.55s ease;
}
html.roma-rd .rd-lc .rd-lc-model {
  position: absolute;
  left: var(--m-l); top: var(--m-t);
  width: var(--m-w); height: var(--m-h);
  object-fit: contain;
  object-position: bottom;
  z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
  transition: left 0.75s cubic-bezier(.22,.8,.24,1), top 0.75s cubic-bezier(.22,.8,.24,1),
              width 0.75s cubic-bezier(.22,.8,.24,1), height 0.75s cubic-bezier(.22,.8,.24,1),
              object-position 0.75s ease, transform 0.75s ease, filter 0.5s ease;
}
html.roma-rd .rd-lc .rd-lc-model-rd { border-radius: 4px; }
html.roma-rd .rd-lc .rd-lc-logo {
  position: absolute;
  left: var(--lg-l); top: var(--lg-t);
  width: var(--lg-w); height: var(--lg-h);
  object-fit: contain;
  z-index: 2;
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.65));
  transition: opacity 0.45s ease, transform 0.45s ease;
}
html.roma-rd .rd-lc .rd-lc-prov {
  position: absolute;
  left: var(--pv-l); top: var(--pv-t);
  width: var(--pv-w); height: var(--pv-h);
  object-fit: contain;
  z-index: 3;
  transform: translate(0, 0);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
  transition: left 0.5s cubic-bezier(.25,.8,.3,1), top 0.5s cubic-bezier(.25,.8,.3,1),
              width 0.5s cubic-bezier(.25,.8,.3,1), height 0.5s cubic-bezier(.25,.8,.3,1),
              transform 0.5s cubic-bezier(.25,.8,.3,1), filter 0.5s ease;
}
html.roma-rd .rd-lc .rd-lc-provtxt {
  position: absolute;
  left: var(--pv-l); top: var(--pv-t);
  width: var(--pv-w); height: var(--pv-h);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transform: translate(0, 0);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  transition: left 0.5s cubic-bezier(.25,.8,.3,1), top 0.5s cubic-bezier(.25,.8,.3,1),
              width 0.5s cubic-bezier(.25,.8,.3,1), height 0.5s cubic-bezier(.25,.8,.3,1),
              transform 0.5s cubic-bezier(.25,.8,.3,1), font-size 0.5s ease;
}
html.roma-rd .rd-lc .rd-lc-provtxt b { color: #f38f20; font-weight: 900; margin-left: 3px; }

/* Hover: bg zoom-out sedikit + meredup, model geser ke tengah (kepala full
   kelihatan, tidak terpotong), badge provider membesar ke tengah di depan
   model, logo game di kiri fade-out halus. Semua transisi smooth.
   PENTING: box model dibuat SAMA PERSIS (48% x 90%) untuk keenam kartu, pakai
   object-fit:contain (sama seperti kondisi normal, supaya tidak ada
   "loncatan" object-fit) -- karena tinggi box jadi acuan (semua foto lebih
   pendek dari box), tiap foto otomatis tampil di TINGGI YANG SAMA tanpa ada
   bagian tubuh yang terpotong, apa pun rasio foto aslinya. */
html.roma-rd .rd-lc:hover .rd-lc-bg { transform: scale(0.92); filter: brightness(0.42) saturate(1.05); }
html.roma-rd .rd-lc:hover .rd-lc-model {
  left: 50%; top: 53%;
  width: 48%; height: 90%;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)) brightness(0.92);
}
html.roma-rd .rd-lc:hover .rd-lc-logo { opacity: 0; transform: scale(0.8); }
html.roma-rd .rd-lc:hover .rd-lc-prov {
  left: 50%; top: 54%;
  width: 62%; height: 32%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.9)) drop-shadow(0 4px 8px rgba(0,0,0,0.85)) brightness(1.25) contrast(1.3);
}
html.roma-rd .rd-lc:hover .rd-lc-provtxt {
  left: 50%; top: 54%;
  width: 60%; height: 28%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}
/* Cards live casino tidak pakai tombol "Main Sekarang" & border glow kuning */
html.roma-rd .rd-lc .rd-game-play { display: none !important; }
html.roma-rd .rd-lc:hover {
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6) !important;
}

/* Banner RTP SLOT TERBESAR */
html.roma-rd .rd-rtp {
  position: relative;
  display: block;
  text-decoration: none !important;
  margin-top: 10px;
}
/* Wrapper terpisah untuk membulatkan sudut background saja, supaya koin
   bisa "keluar" melewati batas atas/bawah banner seperti di Figma. */
html.roma-rd .rd-rtp .rd-rtp-clip { border-radius: 8px; overflow: hidden; }
html.roma-rd .rd-rtp .rd-rtp-bg { display: block; width: 100%; height: auto; }
html.roma-rd .rd-rtp .rd-rtp-coin {
  position: absolute;
  left: 7.58%;
  top: -30.16%;
  width: 19.11%;
  height: 166.82%;
  transform: rotate(3.02deg);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
  animation: rd-coin-float 2.6s ease-in-out infinite;
}
@keyframes rd-coin-float {
  0%, 100% { transform: rotate(3.02deg) translateY(0); }
  50% { transform: rotate(3.02deg) translateY(-6%); }
}
html.roma-rd .rd-rtp .rd-rtp-btn {
  left: 45.11%;
  bottom: auto;
  top: 68.43%;
  width: 18.09%;
  height: 24.78%;
  min-width: 96px;
  transform: none;
  padding: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #feaa4f 0%, #735034 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ============================================================
   PHASE 4 - JADWAL BANK + FOOTER
   ============================================================ */
/* Section Bank Info (dipindah ke kolom konten kanan, layout sesuai Figma).
   Semua wrapper bawaan template dipaksa transparan (bukan kartunya) supaya
   tidak ada kotak/panel warna lain selain background halaman. */
html.roma-rd #bank.section,
html.roma-rd #bank .container,
html.roma-rd #bank .row,
html.roma-rd #bank .col-md-9,
html.roma-rd .rd-bank-head,
html.roma-rd .rd-bank-marquee,
html.roma-rd .rd-bank-track {
  background: transparent !important;
  box-shadow: none !important;
}
html.roma-rd #bank.section { padding: 18px 0 0 !important; }
html.roma-rd #bank .container { width: 100% !important; padding: 0 !important; }
html.roma-rd #bank .row { margin: 0 !important; display: block; }
html.roma-rd #bank .col-md-3 { display: none !important; }
html.roma-rd #bank .col-md-9 { width: 100% !important; float: none !important; padding: 0 !important; position: relative; right: 2px; }
html.roma-rd #bank center { display: none !important; }

/* Header: "Bank Info" kiri + legend status kanan */
html.roma-rd .rd-bank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-right: 10px;
}
html.roma-rd .rd-bank-title { font-weight: 800; font-size: 18px; color: #fff; }
html.roma-rd .rd-bank-legend { display: flex; gap: 18px; }
html.roma-rd .rd-bank-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d7d7d7;
  font-size: 12px;
}
html.roma-rd .rd-bank-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Owl bank asli disembunyikan, diganti marquee kanan->kiri */
html.roma-rd #bank .bankscroll { display: none !important; }
html.roma-rd .rd-bank-marquee { overflow: hidden; }
html.roma-rd .rd-bank-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: rd-marquee 30s linear infinite;
  will-change: transform;
}
html.roma-rd .rd-bank-marquee:hover .rd-bank-track { animation-play-state: paused; }
/* Kartu bank presisi Figma: 186x73, bg #000511 + glow bawah, border terang
   tipis, highlight tepi atas, garis kecil menyala di tepi bawah tengah.
   Konsisten antar kartu (bank/e-wallet campur) tanpa panel warna lain di
   sekitarnya (lihat override transparan di atas). */
html.roma-rd .rd-bank-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 186px;
  height: 73px;
  min-height: 73px;
  max-height: 73px;
  flex: 0 0 186px;
  margin-right: 8px;
  padding: 12px 20px;
  /* Glow line-light DISAMAKAN dgn kartu ikon game: plume putih terang tinggi &
     menyebar dari bawah-tengah, base gelap #000511, highlight tipis di atas. */
  /* Kartu hijau gelap + glow hijau khas DOYAN (konsisten dgn tile provider). */
  background:
    radial-gradient(46% 120% at 50% 116%, rgba(74,222,128,0.55) 0%, rgba(47,191,106,0.22) 44%, rgba(10,46,28,0) 84%),
    linear-gradient(180deg, #17402c 0%, #103524 60%, #0c2c1c 100%);
  border: 1.27px solid rgba(90,220,140,0.32);
  border-radius: 8px;
  box-shadow: inset 0 0.7px 0.9px rgba(160,240,190,0.6),
              inset 0 -2px 6px rgba(0,0,0,0.3);
  overflow: hidden;
}
/* Garis cahaya (line light) DISAMAKAN dgn kartu ikon game: dash pendek 15x4
   + glow terang & halo naik yang lembut. */
html.roma-rd .rd-bank-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 15px;
  height: 4px;
  border-radius: 999px;
  background: #c9ffdd;
  box-shadow: 0 0 8px 2px rgba(120,240,160,0.9),
              0 -12px 26px 6px rgba(47,191,106,0.12);
}
/* Logo bank jadi putih (siluet) di kartu gelap, ukuran seperti Figma (99x31) */
html.roma-rd .rd-bank-item img {
  max-width: 99px;
  max-height: 31px;
  width: auto;
  height: auto;
  filter: brightness(0) invert(1);
}
/* Titik status bercahaya kiri-atas (8px, left 12 / top 6 sesuai Figma) */
html.roma-rd .rd-bank-item .online,
html.roma-rd .rd-bank-item .trouble,
html.roma-rd .rd-bank-item .gangguan,
html.roma-rd .rd-bank-item .offline {
  position: absolute;
  top: 6px;
  left: 12px;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
}
html.roma-rd .rd-bank-item .online { background: #89e745 !important; box-shadow: 0 0 6px 1px rgba(137,231,69,0.9); }
html.roma-rd .rd-bank-item .trouble,
html.roma-rd .rd-bank-item .gangguan { background: #f7f014 !important; box-shadow: 0 0 6px 1px rgba(247,240,20,0.9); }
html.roma-rd .rd-bank-item .offline { background: #ff0000 !important; box-shadow: 0 0 6px 1px rgba(255,0,0,0.9); }
html.roma-rd #bank center,
html.roma-rd #bank center span { color: #ffffff !important; font-size: 13px; }

/* Footer bergaya Figma (berada di dalam kolom konten kanan) */
html.roma-rd #footer {
  background: transparent !important;
  border-top: 0;
  margin-top: 20px;
}
html.roma-rd #footer .container { all: unset !important; display: block !important; }
html.roma-rd #footer .footer-main .row,
html.roma-rd #footer .footer-bottom .row { margin: 0 !important; }
html.roma-rd #footer .col-md-12 { float: none !important; width: 100% !important; padding: 0 !important; }
/* Panel footer: latar abu gelap #1b3c2c (presisi Figma), sudut membulat,
   bar Link Alternatif full-width menempel di atas. */
html.roma-rd .rd-footer {
  position: relative;
  right: 2px;
  container-type: inline-size;
  max-width: none;
  margin: 20px 0 0;
  padding: 0 0 16px;
  color: #fff;
  background: #1b3c2c;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
/* Konten footer selalu di atas watermark ROMA4D */
html.roma-rd .rd-footer > *:not(.rd-footer-brand) { position: relative; z-index: 1; }
/* Strip lisensi (LISENSI LABEL TERBAIK dst) */
html.roma-rd .rd-lisensi {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Bar LINK ALTERNATIF: latar abu #717171, tombol terpisah #464646 + border
   #a2a2a2, ikon rantai hijau di kotak #484848 (presisi Figma). */
html.roma-rd .rd-footer-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: #717171;
  margin: 0 0 22px;
}
html.roma-rd .rd-alt-title { font-weight: 900; font-size: 16px; letter-spacing: 0.3px; color: #fff; text-transform: uppercase; }
html.roma-rd .rd-alt-links { display: flex; gap: 5px; flex-wrap: wrap; }
html.roma-rd .rd-alt-item { display: inline-flex; align-items: center; gap: 4px; }
html.roma-rd .rd-alt-ic {
  width: 25px;
  height: 25px;
  border-radius: 4px;
  background: #484848;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 25px;
}
html.roma-rd .rd-alt-ic .rd-ico { flex: 0 0 16px; width: 16px; height: 16px; color: #37d66b; }
html.roma-rd .rd-alt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 0 10px;
  border: 1px solid #a2a2a2;
  border-radius: 4px;
  background: #464646;
  color: #fff !important;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s;
}
html.roma-rd .rd-alt-btn:hover { background: #565656; border-color: #37d66b; }

/* 5 kolom link full-width dalam satu baris grid (kolom lebih lega, tidak
   terpotong). Quick Menu (2-sub) diberi porsi lebih lebar. */
html.roma-rd .rd-footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px 28px;
  align-items: start;
  padding: 24px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Trust: dua baris berlabel (Mitra Resmi / Lisensi & Keamanan) ditumpuk &
   terpusat, dipisah garis horizontal. Tanpa kotak container (menyatu). */
html.roma-rd .rd-ftrust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 24px 40px;
  background: transparent;
  border: 0;
}
html.roma-rd .rd-ftrust-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
}
html.roma-rd .rd-ftrust-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8f8f8f;
}
html.roma-rd .rd-ftrust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 26px;
}
html.roma-rd .rd-ftrust-logos a { display: inline-flex; align-items: center; }
/* Mitra Resmi -> logo lebih BESAR. Default warna asli, greyscale saat hover. */
html.roma-rd .rd-ftrust-logos img {
  height: 42px;
  width: auto;
  opacity: 1;
  filter: none;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
html.roma-rd .rd-ftrust-logos a:hover img { opacity: 0.85; filter: grayscale(100%); }
/* Logo Lisensi & Keamanan (dari API, aneka ukuran) -> lebih KECIL & seragam */
html.roma-rd .rd-ftrust-certs { gap: 14px 24px; }
html.roma-rd .rd-ftrust-certs img,
html.roma-rd .rd-ftrust-certs svg {
  height: 26px;
  width: auto;
  max-width: 130px;
  opacity: 1;
  filter: none;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
html.roma-rd .rd-ftrust-certs img:hover { opacity: 0.85; filter: grayscale(100%); }
/* Garis pemisah horizontal antar baris */
html.roma-rd .rd-ftrust-sep {
  width: min(72%, 520px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%);
}

/* footer-logo-section: logo + deskripsi perusahaan (dari API) */
/* Tier 1: band brand full-width -> logo (kiri) + deskripsi (tengah) + sosial (kanan) */
html.roma-rd .rd-fbrand {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
html.roma-rd .rd-fbrand-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
html.roma-rd .rd-fbrand-logo img { height: 42px; width: auto; display: block; }
html.roma-rd .rd-fbrand-desc {
  flex: 1 1 auto;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #a3a3a3;
  max-width: 640px;
}
html.roma-rd .rd-fbrand .rd-footer-social {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}

/* footer-map-section (Lokasi Kami): info kiri + peta kanan, rapi (satu tier) */
html.roma-rd .rd-fextra {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  padding: 24px 40px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* KIRI: Lokasi Kami — alamat lalu peta ditumpuk di bawahnya */
html.roma-rd .rd-fmap-info { flex: 1 1 44%; min-width: 260px; }
html.roma-rd .rd-fextra h5 {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  margin: 0 0 10px;
  text-transform: capitalize;
}
html.roma-rd .rd-fmap-addr {
  font-size: 12.5px;
  line-height: 1.7;
  color: #a9a9a9;
}
html.roma-rd .rd-fmap-embed {
  width: 100%;
  max-width: 460px;
  margin-top: 14px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
html.roma-rd .rd-fmap-embed iframe {
  display: block;
  width: 100% !important;
  height: 160px !important;
  border: 0 !important;
  filter: grayscale(35%);
}
/* KANAN: Mitra Resmi + Lisensi & Keamanan (dipadatkan dalam kolom kanan) */
html.roma-rd .rd-fextra .rd-ftrust {
  flex: 1 1 46%;
  min-width: 300px;
  align-items: stretch;
  gap: 14px;
  padding: 0;
}
html.roma-rd .rd-fextra .rd-ftrust-group { align-items: flex-start; gap: 9px; }
html.roma-rd .rd-fextra .rd-ftrust-logos { justify-content: flex-start; gap: 12px 20px; }
html.roma-rd .rd-fextra .rd-ftrust-logos img { height: 34px; }
html.roma-rd .rd-fextra .rd-ftrust-certs { gap: 12px 18px; }
html.roma-rd .rd-fextra .rd-ftrust-certs img,
html.roma-rd .rd-fextra .rd-ftrust-certs svg { height: 22px; max-width: 108px; }
html.roma-rd .rd-fextra .rd-ftrust-sep { width: 100%; }
html.roma-rd .rd-fcol h5 {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  margin: 0 0 12px;
  text-transform: capitalize;
}
html.roma-rd .rd-fcol a {
  display: block;
  color: #b9b8b8 !important;
  font-size: 13px;
  text-decoration: none !important;
  margin-bottom: 8px;
  text-transform: capitalize;
}
html.roma-rd .rd-fcol a:hover { color: #fff !important; }

/* Footer lama (footer.js template) disembunyikan - digantikan .rd-footer */
html.roma-rd #footer .detailfooter { display: none !important; }

/* Quick Menu jadi 2 kolom seperti Figma */
html.roma-rd .rd-footer-cols .rd-fcol:first-child .rd-fcol-links {
  -webkit-columns: 2;
  columns: 2;
  column-gap: 24px;
}
html.roma-rd .rd-fcol-links a { break-inside: avoid; }

/* Teks brand besar (konsep Figma): tampil di posisi bawah (bekas tier trust),
   dengan fade gradient ke transparan di bagian bawah huruf. */
html.roma-rd .rd-fbrandbig {
  text-align: center;
  padding: 10px 40px 0;
  overflow: hidden;
  line-height: 0.84;
}
html.roma-rd .rd-fbrandbig span {
  display: inline-block;
  max-width: 100%;
  font-weight: 900;
  /* Nama DOYANTOTO panjang (9 huruf) -> ukuran responsif agar tidak terpotong */
  font-size: clamp(40px, 7.5vw, 104px);
  letter-spacing: 2px;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.09) 55%, rgba(255,255,255,0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

html.roma-rd .rd-footer-social {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
html.roma-rd .rd-soc {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  transition: background 0.15s;
}
html.roma-rd .rd-soc:hover { background: rgba(255,255,255,0.22); }
html.roma-rd .rd-soc .rd-ico { flex: 0 0 19px; width: 19px; height: 19px; color: #fff; }
/* Ikon sosial dinamis (SVG mentah dari API) diseragamkan ukurannya */
html.roma-rd .rd-soc svg,
html.roma-rd .rd-soc img { width: 18px; height: 18px; display: block; object-fit: contain; }
/* Badge 18+ di awal baris sosial (sesuai Figma) */
html.roma-rd .rd-soc-age {
  background: transparent;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
html.roma-rd .rd-soc-age:hover { background: rgba(255,255,255,0.15); }

/* Copyright: polos tanpa bar/latar bawaan template (sesuai Figma) */
html.roma-rd #footer .footer-bottom .container,
html.roma-rd #footer .footer-bottom .row,
html.roma-rd #footer .copyright {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Baris copyright menyambung panel footer #1b3c2c dengan garis pemisah tipis */
html.roma-rd #footer .footer-bottom {
  background: #1b3c2c !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 0 0 10px 10px;
  padding: 14px 0 16px !important;
  margin: 0 !important;
  position: relative;
  right: 2px;
}
html.roma-rd #footer .copyright {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  text-align: center;
}
html.roma-rd #footer .copyright,
html.roma-rd #footer .copyright a { color: #b9b8b8 !important; }

/* Tombol scroll-to-top ikut tema gelap */
html.roma-rd .scroll-top a {
  background: #1a392a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
html.roma-rd .scroll-top a:hover { background: #2c2c2c !important; }

/* Judul artikel jadi bar gelap rata tengah (sesuai Figma) */
html.roma-rd #footer .widget-about h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 59px;
  margin: 0 0 14px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #1a392a 0%, #0e2116 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.35 !important;
  color: #ffffff !important;
}

/* ============================================================
   Tipografi artikel (widget-about) — default rapi & konsisten agar konten
   yang di-edit dari dashboard otomatis tertata (tema gelap, aksen emas).
   ============================================================ */
html.roma-rd #footer .widget-about {
  color: #bdbdbd;
  font-size: 14px;
  line-height: 1.75;
}
html.roma-rd #footer .widget-about h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 26px 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 2px solid rgba(212,175,55,0.5);
}
html.roma-rd #footer .widget-about h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #f2f2f2 !important;
  margin: 20px 0 10px !important;
}
html.roma-rd #footer .widget-about h4,
html.roma-rd #footer .widget-about h5,
html.roma-rd #footer .widget-about h6 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #eaeaea !important;
  margin: 16px 0 8px !important;
}
html.roma-rd #footer .widget-about p {
  margin: 0 0 13px;
  color: #bdbdbd;
}
html.roma-rd #footer .widget-about strong,
html.roma-rd #footer .widget-about b {
  color: #ffffff;
  font-weight: 700;
}
html.roma-rd #footer .widget-about em,
html.roma-rd #footer .widget-about i { color: #d6d6d6; }
html.roma-rd #footer .widget-about a {
  color: #3ba86a;
  text-decoration: none;
  transition: color 0.15s;
}
html.roma-rd #footer .widget-about a:hover { color: #f6d97a; text-decoration: underline; }
html.roma-rd #footer .widget-about ul,
html.roma-rd #footer .widget-about ol {
  margin: 0 0 14px;
  padding-left: 22px;
  color: #bdbdbd;
}
html.roma-rd #footer .widget-about li { margin-bottom: 7px; }
html.roma-rd #footer .widget-about ul li::marker { color: #3ba86a; }
html.roma-rd #footer .widget-about ol li::marker { color: #3ba86a; font-weight: 700; }
html.roma-rd #footer .widget-about blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 3px solid #3ba86a;
  background: rgba(255,255,255,0.03);
  border-radius: 0 6px 6px 0;
  color: #cfcfcf;
  font-style: italic;
}
html.roma-rd #footer .widget-about img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}
html.roma-rd #footer .widget-about hr {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 20px 0;
}
/* Tabel: rapi, modern, tema gelap dgn header beraksen emas */
html.roma-rd #footer .widget-about table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: 13.5px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}
html.roma-rd #footer .widget-about thead th,
html.roma-rd #footer .widget-about th {
  background: linear-gradient(180deg, #1e4432 0%, #132b1f 100%);
  color: #ffffff;
  font-weight: 800;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(212,175,55,0.45);
}
html.roma-rd #footer .widget-about td {
  padding: 10px 14px;
  color: #c4c4c4;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.04);
}
html.roma-rd #footer .widget-about tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
html.roma-rd #footer .widget-about tbody tr:hover td { background: rgba(212,175,55,0.06); }

/* Teks SEO footer di-collapse: memudar halus, buka/tutup beranimasi */
html.roma-rd #footer .widget-about {
  position: relative;
  max-height: 220px;
  right: 2px;
  overflow: hidden;
  padding: 10px;
  transition: max-height 0.6s ease;
}
html.roma-rd #footer .widget-about.rd-seo-open {
  max-height: 9000px;
  transition: max-height 1.1s ease;
}
/* Gradasi fade selalu ada, menghilang halus saat dibuka */
html.roma-rd #footer .widget-about::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(16,16,16,0) 0%, var(--rd-content-bg) 90%);
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
html.roma-rd #footer .widget-about.rd-seo-open::after { opacity: 0; }

/* Tombol "Lebih Lengkap" polos, mengambang di atas area teks yang memudar */
html.roma-rd .rd-seo-toggle-wrap {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: -42px;
  transition: margin-top 0.45s ease;
}
html.roma-rd #footer .widget-about.rd-seo-open + .rd-seo-toggle-wrap { margin-top: 6px; }
html.roma-rd .rd-seo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 auto;
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-transform: capitalize;
  opacity: 0.95;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
html.roma-rd .rd-seo-toggle:hover {
  background: transparent;
  opacity: 1;
  transform: translateY(-1px);
}
html.roma-rd .rd-seo-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
html.roma-rd .rd-seo-toggle-open .rd-seo-arrow { transform: rotate(225deg); margin-top: 3px; }

/* ============================================================
   LOADER HALAMAN (disamakan dgn versi mobile: honeycomb hex + 3 gelombang
   glow + logo berdenyut). Disuntik via JS saat redesign aktif (IP tergate).
   ============================================================ */
.designloader {
  background: #0c1d14;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.designloader.rd-loader-hide { opacity: 0; }
/* Grid honeycomb redup (selalu tampak) */
.designloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51.96' height='90'%3E%3Cpolygon points='25.98,0 51.96,15 51.96,45 25.98,60 0,45 0,15' fill='none' stroke='%23B9B8B8' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpolygon points='0,45 25.98,60 25.98,90 0,105 -25.98,90 -25.98,75' fill='none' stroke='%23B9B8B8' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpolygon points='51.96,45 77.94,60 77.94,90 51.96,105 25.98,90 25.98,75' fill='none' stroke='%23B9B8B8' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center;
}
/* Vignette gelap di tepi */
.designloader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
/* Gelombang glow hex (ring memuai) */
.designloader .hex-wave {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51.96' height='90'%3E%3Cpolygon points='25.98,0 51.96,15 51.96,45 25.98,60 0,45 0,15' fill='none' stroke='%23e0e0e0' stroke-opacity='0.7' stroke-width='1.5'/%3E%3Cpolygon points='0,45 25.98,60 25.98,90 0,105 -25.98,90 -25.98,75' fill='none' stroke='%23e0e0e0' stroke-opacity='0.7' stroke-width='1.5'/%3E%3Cpolygon points='51.96,45 77.94,60 77.94,90 51.96,105 25.98,90 25.98,75' fill='none' stroke='%23e0e0e0' stroke-opacity='0.7' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle, transparent 30%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.8) 45%, white 48%, white 52%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.1) 60%, transparent 70%);
          mask-image: radial-gradient(circle, transparent 30%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.8) 45%, white 48%, white 52%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.1) 60%, transparent 70%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  z-index: 1;
  opacity: 0;
  animation: hexGlowWave 3s ease-out infinite;
}
.designloader .hex-wave:nth-child(1) { animation-delay: 0s; }
.designloader .hex-wave:nth-child(2) { animation-delay: 0.75s; }
.designloader .hex-wave:nth-child(3) { animation-delay: 1.5s; }
/* Logo dgn halo bercahaya */
.designloader img.logoloader {
  position: relative;
  width: 120px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 0 30px rgba(185,184,184,0.35)) drop-shadow(0 0 60px rgba(185,184,184,0.15));
  animation: logoPulse 2.5s ease-in-out infinite;
}
@keyframes hexGlowWave {
  0% { -webkit-mask-size: 160px 160px; mask-size: 160px 160px; opacity: 0.9; }
  100% { -webkit-mask-size: 300% 300%; mask-size: 300% 300%; opacity: 0; }
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(185,184,184,0.35)) drop-shadow(0 0 60px rgba(185,184,184,0.15)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(185,184,184,0.5)) drop-shadow(0 0 80px rgba(185,184,184,0.25)); }
}

/* ============================================================
   HALAMAN PERATURAN (/rules) — konsisten dgn tema gelap redesign
   ============================================================ */
/* Beri jarak atas agar konten tak tertutup navbar fixed (halaman ini tanpa
   .section.margin-top & tanpa bar Info Terkini) */
html.roma-rd .body-peraturan .section { margin-top: 104px !important; padding-bottom: 0 !important; }
html.roma-rd .body-peraturan .section > .container { max-width: 1200px; }
html.roma-rd #peraturan { max-width: 920px; margin: 0 auto; padding: 8px 12px 36px; }
html.roma-rd #peraturan > h3 {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  margin: 0 0 20px !important;
}
/* Kolom bootstrap (col-md-2 kosong + col-md-8) -> full width terpusat */
html.roma-rd #peraturan .col-md-2.legend { display: none !important; }
html.roma-rd #peraturan .col-md-8.legend {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Kartu isi peraturan */
html.roma-rd .peraturan-content {
  background: linear-gradient(180deg, #173425 0%, #11271c 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 22px 26px;
  color: #cfcfcf;
  font-size: 14px;
  line-height: 1.95;
  text-align: left;
}
html.roma-rd .peraturan-content a { color: #3ba86a; text-decoration: none; font-weight: 700; }
html.roma-rd .peraturan-content a:hover { text-decoration: underline; }
html.roma-rd .peraturan-content strong { color: #ffffff; }
html.roma-rd .peraturan-content p { margin: 12px 0 0; }
/* Tombol Setuju / Tidak Setuju */
html.roma-rd .row-legend { margin-top: 22px; text-align: center; }
html.roma-rd #peraturan .col-md-offset-2 { margin: 0 !important; float: none !important; width: 100% !important; }
html.roma-rd #peraturan .btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 46px;
  padding: 0 24px;
  margin: 6px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
html.roma-rd #peraturan #setuju {
  background: linear-gradient(180deg, #22a94f 0%, #0f7a34 100%);
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(15,122,52,0.35);
}
html.roma-rd #peraturan #tidak-setuju {
  background: linear-gradient(180deg, #3a3a3f 0%, #26262a 100%);
  color: #e2e2e2;
  border: 1px solid rgba(255,255,255,0.16);
}
html.roma-rd #peraturan .btn-theme:hover { filter: brightness(1.08); transform: translateY(-1px); }
html.roma-rd #peraturan .extra_space { height: 8px; }

/* ============================================================
   PHASE 5 - RESPONSIVE (desktop template, lebar fleksibel)
   ============================================================ */
@media (max-width: 1180px) {
  html.roma-rd #navbar_username,
  html.roma-rd #navbar_password { width: 150px !important; }
}
@media (max-width: 1024px) {
  html.roma-rd .navbar.navbar-fixed-top .container { gap: 8px; }
  html.roma-rd #navbar_username,
  html.roma-rd #navbar_password { width: 120px !important; font-size: 12px !important; }
  html.roma-rd .rd-togel { grid-template-columns: repeat(2, 1fr); }
  html.roma-rd .rd-grid { grid-template-columns: repeat(3, 1fr); }
  html.roma-rd .rd-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.roma-rd .rd-fbrand { flex-wrap: wrap; gap: 14px 24px; }
  html.roma-rd .rd-fbrand-desc { max-width: none; }
}
@media (max-width: 820px) {
  html.roma-rd .rd-grid { grid-template-columns: repeat(2, 1fr); }
  html.roma-rd .rd-filterbar { flex-wrap: wrap; }
  html.roma-rd .rd-search { flex-basis: 100%; order: 5; }
  html.roma-rd .rd-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.roma-rd .rd-fbrand .rd-footer-social { justify-content: flex-start; }
  html.roma-rd .rd-fextra { flex-direction: column; }
  html.roma-rd .rd-fmap-embed { flex-basis: auto; width: 100%; }
}

/* ============================================================
   HALAMAN LOBBY (setelah login) — selaraskan dgn konsep tema home:
   panel gelap, kartu seragam (gold accent + glow), navbar & sidebar gelap.
   Semua di-scope ke class root khusus `roma-rd-lobby` (ditambahkan JS hanya
   di halaman body-after-login) agar aturan global home tidak bocor & halaman
   lain tak terpengaruh.
   ============================================================ */
/* Kontainer transparan supaya latar (ROMABG) home tampil */
html.roma-rd-lobby #wrap,
html.roma-rd-lobby #content,
html.roma-rd-lobby .main,
html.roma-rd-lobby .container-live { background: transparent !important; }

/* Navbar atas gelap glossy */
html.roma-rd-lobby #navbar.navbar-fixed-top {
  background: linear-gradient(180deg, #1c3f2e 0%, #11271c 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
html.roma-rd-lobby #navbar .quick-actions > li > a,
html.roma-rd-lobby #navbar .quick-actions > li > a i { color: #e6e6e6 !important; }
html.roma-rd-lobby #navbar .quick-actions > li > a:hover,
html.roma-rd-lobby #navbar .quick-actions > li > a:hover i { color: #2fbf6a !important; }
html.roma-rd-lobby #current-user #refreshbalance { color: #2fbf6a !important; font-weight: 800; }
html.roma-rd-lobby #putar2 { color: #2fbf6a !important; }
html.roma-rd-lobby #navbar .dropdown-menu {
  background: #193828 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5) !important;
}
html.roma-rd-lobby #navbar .dropdown-menu a { color: #dddddd !important; }
html.roma-rd-lobby #navbar .dropdown-menu a:hover { background: rgba(47,191,106,0.1) !important; color: #fff !important; }

/* Sidebar kiri gelap */
html.roma-rd-lobby #sidebar {
  background: linear-gradient(180deg, #142e21 0%, #0e2116 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
html.roma-rd-lobby #sidebar .sidebar-toggle {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
html.roma-rd-lobby #sidebar .menu > li > a {
  color: #c4c4c4 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
html.roma-rd-lobby #sidebar .menu > li > a:hover { background: rgba(47,191,106,0.08) !important; color: #fff !important; }
html.roma-rd-lobby #sidebar .menu > li > a i { color: #2fbf6a !important; }

/* Running text Info Terkini */
html.roma-rd-lobby #buang2 .title h5,
html.roma-rd-lobby #buang2 .title h5 i { color: #3ba86a !important; }
html.roma-rd-lobby #td_memo b,
html.roma-rd-lobby #td_memo marquee { color: #ececec !important; }

/* Section header (HOME / LIVE CASINO) */
html.roma-rd-lobby .pageheader.blues {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
html.roma-rd-lobby .pageheader h2 { color: #ffffff !important; font-weight: 800 !important; }

/* Kartu hasil pool -> tema gelap seragam (menimpa semua varian warna) */
html.roma-rd-lobby .card-container .card { border-radius: 10px; transition: transform 0.15s ease; }
html.roma-rd-lobby .card-container .card:hover { transform: translateY(-2px); }
html.roma-rd-lobby .card-container .card .front {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #193828 0%, #0f2318 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 16px rgba(0,0,0,0.4) !important;
  color: #ffffff !important;
}
/* Glow emas halus di bawah kartu (khas home) */
html.roma-rd-lobby .card-container .card .front::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(47,191,106,0.12) 0%, rgba(47,191,106,0) 70%);
  pointer-events: none;
}
html.roma-rd-lobby .card-container .card .media-heading {
  color: #2fbf6a !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 8px rgba(21,154,79,0.25);
}
html.roma-rd-lobby .card-container .card .title,
html.roma-rd-lobby .card-container .card .media-body .title { color: #bdbdbd !important; }
html.roma-rd-lobby .card-container .card .front .media,
html.roma-rd-lobby .card-container .card .front span,
html.roma-rd-lobby .card-container .card .front .media-body { position: relative; z-index: 1; }
/* Overlay Play Now */
html.roma-rd-lobby .card .back {
  background: rgba(9,9,11,0.92) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
html.roma-rd-lobby .card .back a,
html.roma-rd-lobby .card .back .game-container,
html.roma-rd-lobby .card .back i,
html.roma-rd-lobby .card .back span { color: #2fbf6a !important; }

/* Ikon provider slot */
html.roma-rd-lobby .slot-img {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #11271c;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
html.roma-rd-lobby .card-container:hover .slot-img { transform: translateY(-2px); border-color: rgba(47,191,106,0.5); }

/* Divider live casino */
html.roma-rd-lobby .container-live hr { border-top-color: rgba(255,255,255,0.12) !important; }
html.roma-rd-lobby .container-live p { color: #e6e6e6 !important; }
/* Banner live casino & tombol lobby */
html.roma-rd-lobby .casino-provider-wrapper__item img { border-radius: 10px; }
html.roma-rd-lobby .casino-provider-wrapper__button {
  background: linear-gradient(180deg, #22a94f, #0f7a34) !important;
  box-shadow: 0 4px 12px rgba(15,122,52,0.35);
}

/* ============================================================
   LOBBY — pass desain lengkap: TOP NAV, SIDE NAV, LAYOUT, kartu lain
   ============================================================ */

/* ---------- TOP NAV: layout flex rapi, label menu terlihat, Deposit CTA emas ---------- */
html.roma-rd-lobby #navbar.navbar-fixed-top {
  background: linear-gradient(180deg, #1c3f2e 0%, #11271c 100%) !important;
  min-height: 58px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
/* ---------- BLOK KIRI ATAS: tombol toggle + brand ----------
   Menyatu dengan navbar (tanpa panel/garis terpisah agar tidak tampak
   "offside"). Urutan: tombol hamburger di kiri, lalu logo (dibuat putih
   kontras karena aset aslinya gelap utk header terang home). Logo diberi
   lebar tetap supaya tidak menciut jadi 0 di dalam flex. */
html.roma-rd-lobby #navbar .navbar-header {
  float: left;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 58px;
  width: auto !important;
  margin: 0;
  padding: 0 16px 0 14px;
  background: transparent;
  box-sizing: border-box;
}
html.roma-rd-lobby #navbar .navbar-brand {
  order: 2;
  flex: 0 0 auto;
  display: block;
  height: 34px !important;
  width: 138px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
/* Tombol hamburger: kotak membulat di kiri, ikon emas saat hover */
html.roma-rd-lobby #navbar .sidebar-collapse {
  order: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
html.roma-rd-lobby #navbar .sidebar-collapse > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #d6d6d6 !important;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
html.roma-rd-lobby #navbar .sidebar-collapse > a:hover {
  background: rgba(47,191,106,0.12);
  border-color: rgba(47,191,106,0.45);
  color: #2fbf6a !important;
}
html.roma-rd-lobby #navbar .sidebar-collapse > a i { font-size: 16px; margin: 0; }
/* Susun grup kiri (menu) & kanan (user) tanpa mengganggu sidebar vertikal */
html.roma-rd-lobby #navbar ul.quick-actions.lefv {
  display: flex !important; align-items: center; float: left; margin: 0; padding: 0 0 0 6px;
}
html.roma-rd-lobby #navbar ul.quick-actions.rightz {
  display: flex !important; align-items: center; float: right; margin: 0; padding: 0 8px 0 0;
}
html.roma-rd-lobby #navbar ul.quick-actions > li {
  float: none !important; list-style: none; border: 0 !important;
  display: flex; align-items: center; height: 58px;
}
/* Item menu kiri = ikon + label (label default disembunyikan -> ditampilkan) */
html.roma-rd-lobby #navbar ul.quick-actions.lefv > li > a {
  display: inline-flex !important; align-items: center; gap: 8px;
  height: 40px; margin: 0 3px; padding: 0 14px !important;
  border-radius: 8px; color: #e6e6e6 !important; white-space: nowrap;
  font-weight: 600; transition: background 0.15s ease, color 0.15s ease;
}
html.roma-rd-lobby #navbar ul.quick-actions.lefv > li > a i { color: #cfcfcf !important; margin: 0 !important; }
html.roma-rd-lobby #navbar ul.quick-actions.lefv > li > a:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
html.roma-rd-lobby #navbar ul.quick-actions.lefv > li > a:hover i { color: #2fbf6a !important; }
html.roma-rd-lobby #navbar ul.quick-actions.lefv > li > a .label {
  display: inline-flex !important; align-items: center; gap: 5px;
  position: static !important; background: transparent !important; color: inherit !important;
  font-size: 13px; padding: 0; text-transform: none;
}
/* Tombol Deposit = CTA emas */
html.roma-rd-lobby #navbar a[href="/cashier"] {
  background: linear-gradient(180deg, #3fd07a 0%, #0f8a45 100%) !important;
  color: #04150c !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(15,138,69,0.35);
}
html.roma-rd-lobby #navbar a[href="/cashier"] i,
html.roma-rd-lobby #navbar a[href="/cashier"] .label { color: #04150c !important; }
html.roma-rd-lobby #navbar a[href="/cashier"]:hover { filter: brightness(1.06); background: linear-gradient(180deg, #5ee08f, #159a4f) !important; }
html.roma-rd-lobby #navbar a[href="/cashier"]:hover i { color: #04150c !important; }
/* Badge memo */
html.roma-rd-lobby #navbar .badge-red { background: #e23b3b !important; border: 2px solid #11271c; }
/* Chip user + saldo (kanan) */
html.roma-rd-lobby #current-user { display: flex !important; align-items: center; float: none !important; }
html.roma-rd-lobby #current-user > a.dropdown-toggle {
  display: inline-flex !important; align-items: center; gap: 8px;
  height: 42px; margin: 0; padding: 0 14px 0 5px !important;
  border: 1px solid rgba(47,191,106,0.35); border-radius: 999px;
  background: rgba(255,255,255,0.05); color: #eaeaea !important; white-space: nowrap;
}
html.roma-rd-lobby #current-user .profile-photo { margin: 0; }
html.roma-rd-lobby #current-user .profile-photo img {
  width: 32px; height: 32px;
  box-shadow: 0 0 0 2px rgba(47,191,106,0.5);
}
html.roma-rd-lobby #current-user #refreshbalance { color: #2fbf6a !important; font-weight: 800; }
html.roma-rd-lobby #putar2 { color: #2fbf6a !important; margin-left: 8px; }

/* ---------- SIDE NAV: rail + panel gelap, header accordion, scrollbar ---------- */
html.roma-rd-lobby #sidebar,
html.roma-rd-lobby #sidebar.collapsed {
  background: linear-gradient(180deg, #142e21 0%, #0d1f15 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
html.roma-rd-lobby #sidebar::-webkit-scrollbar { width: 6px; }
html.roma-rd-lobby #sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; }
/* Header seksi (Pools / Live Games / SLOT / ARCADE) */
html.roma-rd-lobby #sidebar .sidebar-toggle {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
html.roma-rd-lobby #sidebar .sidebar-toggle i,
html.roma-rd-lobby #sidebar .sidebar-toggle .fa-angle-up { color: #2fbf6a !important; }
/* Item menu: aksen border kiri emas saat hover */
html.roma-rd-lobby #sidebar .menu > li > a,
html.roma-rd-lobby #sidebar .item-game {
  color: #c4c4c4 !important;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html.roma-rd-lobby #sidebar .menu > li > a:hover,
html.roma-rd-lobby #sidebar .item-game:hover {
  background: rgba(47,191,106,0.08) !important;
  border-left-color: #2fbf6a;
  color: #ffffff !important;
}
html.roma-rd-lobby #sidebar .menu > li > a i,
html.roma-rd-lobby #sidebar .fa-dot-circle-o { color: #2fbf6a !important; }
/* Rail collapsed: dot ikon terpusat & rapi */
html.roma-rd-lobby #sidebar.collapsed .menu > li > a { color: #8f8f93 !important; }

/* ---------- LAYOUT: bar Info Terkini + spacing konten ---------- */
html.roma-rd-lobby #buang2.nolisttypes {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin: 6px 10px 4px;
  padding: 0 8px 0 0;
  background: linear-gradient(180deg, #d9f5e3 0%, #b3e8c6 100%) !important;
  border: 1px solid rgba(8,58,32,0.32);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  border-radius: 8px;
  overflow: hidden;
}
html.roma-rd-lobby #buang2 .title {
  position: relative !important;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  background: linear-gradient(135deg, #0f5a2f, #073a1d) !important;
  border-radius: 8px 0 0 8px;
}
html.roma-rd-lobby #buang2 .title h5,
html.roma-rd-lobby #buang2 .title h5 i { color: #ffffff !important; margin: 0; font-weight: 800; }
html.roma-rd-lobby #buang2 #td_memo { flex: 1 1 auto; }
html.roma-rd-lobby #buang2 #td_memo b,
html.roma-rd-lobby #buang2 #td_memo marquee { color: #083a20 !important; font-weight: 600 !important; }
html.roma-rd-lobby #buang2 > div[style*="height:5px"] { display: none; }

/* Header HOME / LIVE CASINO -> panel gelap ber-aksen */
html.roma-rd-lobby .pageheader.blues {
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%) !important;
  border: 0 !important;
  border-left: 3px solid #2fbf6a !important;
  border-radius: 8px;
  margin: 10px 10px 12px;
}
html.roma-rd-lobby .pageheader h2 { color: #fff !important; font-weight: 800 !important; }
html.roma-rd-lobby .pageheader h2 i,
html.roma-rd-lobby .pageheader .fa-idnlive { color: #2fbf6a !important; }

/* Banner promo & pool live: sudut membulat + bayangan */
html.roma-rd-lobby .card-container img[alt="banner_promotion"] { box-shadow: 0 8px 22px rgba(0,0,0,0.45); }

/* ---------- Kartu live casino minigame (card-bogil dst) ---------- */
html.roma-rd-lobby .card-container .card.hover .front .title { color: #ffffff !important; }
html.roma-rd-lobby .card-container .card .media-object { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
/* Pool live (timer + angka) beri panel gelap agar menyatu */
html.roma-rd-lobby .pool-container .game-angka { border-color: rgba(47,191,106,0.5) !important; color: #2fbf6a !important; }

/* ============================================================
   CUSTOM SCROLLBAR — aksen gold ROMA (primary), profesional & halus.
   Berlaku untuk home (roma-rd) & halaman setelah login (roma-rd-lobby).
   ============================================================ */
html.roma-rd,
html.roma-rd-lobby {
  scrollbar-width: thin;
  scrollbar-color: #2fbf6a rgba(255,255,255,0.06);
}
html.roma-rd ::-webkit-scrollbar,
html.roma-rd-lobby ::-webkit-scrollbar { width: 11px; height: 11px; }
html.roma-rd ::-webkit-scrollbar-track,
html.roma-rd-lobby ::-webkit-scrollbar-track {
  background: #0e2a1c;
  border-radius: 999px;
}
html.roma-rd ::-webkit-scrollbar-thumb,
html.roma-rd-lobby ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6fe6a0 0%, #3fd07a 55%, #0f8a45 100%);
  border-radius: 999px;
  border: 2px solid #0e2a1c;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
}
html.roma-rd ::-webkit-scrollbar-thumb:hover,
html.roma-rd-lobby ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8fefb8 0%, #5ee08f 55%, #159a4f 100%);
}
html.roma-rd ::-webkit-scrollbar-corner,
html.roma-rd-lobby ::-webkit-scrollbar-corner { background: #0e2a1c; }

/* ============================================================
   DOYAN THEME — navbar hijau gelap (ROMA terang -> DOYAN gelap) + login hijau.
   Logo TIDAK di-invert (tampil warna asli). Ditaruh paling bawah.
   ============================================================ */
html.roma-rd .navbar.navbar-fixed-top .container {
  background: linear-gradient(180deg, #0f3a24 0%, #06210f 100%) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
html.roma-rd .navbar-brand { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)); }
html.roma-rd #navbar_username,
html.roma-rd #navbar_password {
  background: rgba(255,255,255,0.06) !important;
  color: #eafbf0 !important;
  border: 1px solid rgba(120,220,160,0.28) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.4) !important;
}
html.roma-rd #navbar_username::placeholder,
html.roma-rd #navbar_password::placeholder { color: rgba(205,240,220,0.55) !important; }
html.roma-rd #submitlogin,
html.roma-rd .btn.btn-theme.login {
  background: linear-gradient(180deg, #2fbf6a 0%, #0f8a45 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
html.roma-rd .rd-daftar-btn { background: #ffffff; color: #06210f !important; border: 0; }
html.roma-rd .rd-daftar-btn:hover { background: #e9f7ee; }

/* ============================================================
   FIX teks yang hilang (nama section, label tab, nama pasaran togel, label
   countdown). Gejala: teks INLINE hilang (font-size ter-inherit 0 / override
   tersembunyi), teks blok tampil. Solusi: set font-size pada KONTAINER agar
   inherit normal, + paksa font-size/display/warna eksplisit pada teksnya.
   ============================================================ */
/* Kontainer: pastikan font-size dasar tidak 0 (mencegah teks inline menghilang) */
html.roma-rd .rd-content,
html.roma-rd .rd-sec,
html.roma-rd .rd-sechead,
html.roma-rd .rd-sechead-l,
html.roma-rd .rd-tg-head,
html.roma-rd .rd-tg-col,
html.roma-rd .rd-filterbar,
html.roma-rd .rd-tab { font-size: 14px; }

html.roma-rd .rd-sechead-t,
html.roma-rd .rd-sechead-c,
html.roma-rd .rd-tg-name,
html.roma-rd .rd-tg-lbl,
html.roma-rd .rd-gi-fallback,
html.roma-rd .rd-tab > span:not(.rd-ico) {
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Tile provider tanpa file ikon -> tampilkan teks nama provider di dalam tile */
html.roma-rd .rd-gi-fallback { color: #ffffff !important; font-size: 15px !important; display: block !important; }
html.roma-rd .rd-sechead-t { color: #ffffff !important; font-size: 20px !important; display: inline-block !important; }
html.roma-rd .rd-sechead-c { color: rgba(255,255,255,0.6) !important; font-size: 13px !important; display: inline-block !important; }
html.roma-rd .rd-tg-name { color: #ffffff !important; font-size: 14px !important; display: block !important; line-height: 1.2 !important; }
html.roma-rd .rd-tg-lbl { color: #ffffff !important; font-size: 10px !important; display: block !important; }
html.roma-rd .rd-tab > span:not(.rd-ico) {
  color: #ffffff !important;
  display: inline-block !important;
  font-size: 16px !important;
  line-height: normal !important;
}

/* ============================================================
   INFO TERKINI — konsep bar warna MUDA (shade primary) + chip gelap + teks
   gelap (mengikuti konsep ARTA). Ditaruh paling bawah agar menimpa bar gelap
   bawaan. Berlaku home (roma-rd).
   ============================================================ */
html.roma-rd .rd-infobar .container {
  background: linear-gradient(180deg, #d9f5e3 0%, #b3e8c6 100%) !important;
  border-bottom: 1px solid rgba(8,58,32,0.32) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
html.roma-rd .rd-infobar .news-head h5 { color: #083a20 !important; }
html.roma-rd .rd-infobar .news-head::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,58,32,0.32) 50%, rgba(0,0,0,0) 100%) !important;
}
html.roma-rd .rd-infobar .news-head .fa-bullhorn,
html.roma-rd .rd-infobar .news-head .fa {
  background: linear-gradient(135deg, #0f5a2f 0%, #073a1d 100%) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
html.roma-rd .rd-infobar .news-head .fa-bullhorn::before,
html.roma-rd .rd-infobar .news-head .fa::before { background-color: #ffffff !important; }
html.roma-rd .rd-infobar .newsticker li,
html.roma-rd .rd-infobar .newsticker a,
html.roma-rd .rd-infobar .run-text-depan,
html.roma-rd .rd-infobar .news-body * { color: #083a20 !important; font-weight: 600 !important; }