/* ROMA4D Desktop Redesign 2026 - Override Stylesheet
 * PENTING: Semua rule di-scope di bawah `html.roma-rd` supaya hanya aktif
 * untuk IP target (class ditambahkan oleh dekstop_design.js). Tanpa class
 * tersebut, file ini tidak berefek apa pun bagi user umum.
 * Sumber desain: Figma ROMAREDESIGN_2026 (frame "Desktop - 1", node 1:15949)
 */

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

  --rd-page-bg: #0b0b0b;
  --rd-content-bg: #101010;

  --rd-header-bg: #eaeaea;
  --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%, #0a0a0a 100%);
}

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

html.roma-rd body { font-family: var(--rd-font) !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 #101010 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; }
html.roma-rd .navbar-brand {
  height: 92px !important;
  width: 216px !important;
  background-size: 216px auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 0 0 20px !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;
}
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; }

/* ============================================================
   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;
}
html.roma-rd .rd-infobar .container {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--rd-infobar-bg) !important;
}
html.roma-rd .rd-infobar .row {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  flex-wrap: nowrap;
}

/* Hilangkan kotak/latar bawaan template supaya bar rata abu-abu */
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;
}

/* "Info Terkini :" hug ke kiri, teks putih tebal, center vertikal */
html.roma-rd .rd-infobar .news-head {
  width: auto !important;
  flex: 0 0 auto;
  float: none !important;
  text-align: left !important;
  padding: 0 !important;
  height: 52px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
html.roma-rd .rd-infobar .news-head h5 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
html.roma-rd .rd-infobar .news-head .fa-bullhorn,
html.roma-rd .rd-infobar .news-head .fa {
  transform: rotate(-16deg);
  font-size: 22px;
  color: #ffffff !important;
}

/* Running text mengisi sisa ruang, ada jarak dari label */
html.roma-rd .rd-infobar .news-body {
  flex: 1 1 auto;
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 0 0 28px !important;
}
/* Container marquee dibuat setinggi baris agar teks center vertikal */
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: #ffffff !important;
  font-size: 14px !important;
  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: 0 !important;
}

/* Sidebar sticky + compact agar muat 1 layar */
html.roma-rd .rd-sidebar {
  position: sticky;
  top: 156px;
  width: 100%;
  max-width: 310px;
  max-height: calc(100vh - 164px);
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
}
html.roma-rd .rd-sidebar::-webkit-scrollbar { display: none; }

/* Kartu event */
html.roma-rd .rd-event {
  position: relative;
  height: 116px;
  flex: 0 0 auto;
  border: 2px solid red;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 50% 100%, rgba(253,19,19,0.4) 0%, rgba(246,36,36,0.3) 24%, rgba(240,53,53,0.2) 49%, rgba(228,87,87,0) 98%),
    rgba(242,31,31,0.05);
}
html.roma-rd .rd-event .rd-event-title { font-weight: 900; font-size: 15px; color: #fff; }
html.roma-rd .rd-event .rd-event-desc { font-weight: 400; font-size: 13px; color: #e0e0e0; margin-top: 3px; }

/* 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) */
html.roma-rd .rd-menu { display: flex; flex-direction: column; gap: 3px; list-style: none; margin: 0; padding: 0; flex: 0 0 auto; }
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); }
html.roma-rd .rd-item-link.rd-active {
  background: #fff;
  color: #000 !important;
  border-color: #fff;
  box-shadow: inset 1.667px -1.667px 1.667px rgba(117,117,117,0.25),
              inset -1.667px 1.667px 1.667px rgba(255,255,255,0.3);
}
html.roma-rd .rd-item-link.rd-bold { font-weight: 700; font-size: 15px; }
html.roma-rd .rd-item-link .rd-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #3b82f6; }

/* Laporkan keluhan (metalik) - ikon report besar rata kiri, di-clip rapi oleh tombol */
html.roma-rd .rd-complaint {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 38px;
  flex: 0 0 auto;
  padding: 0 12px 0 54px;
  border-radius: 4px;
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;
  text-transform: capitalize;
  border-bottom: 1px solid #fff;
  background:
    radial-gradient(150% 130% at 15% 45%, #ffffff 0%, rgba(255,255,255,0.4) 100%),
    #cfcfcf;
  box-shadow: inset 0 0 30px #ffffff;
}
html.roma-rd .rd-complaint .rd-cicon {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
  width: 44px;
  height: 44px;
}
html.roma-rd .rd-complaint .rd-info { flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto; }

/* 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, #111417 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: penuh selebar kolom, sudut membulat */
html.roma-rd #slider #progressBar { display: none !important; }
html.roma-rd #slider .owl-carousel .item { padding: 0 3px; }
html.roma-rd #slider .owl-carousel .item img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px;
  display: block;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* Owl dots (pagination): aktif emas memanjang */
html.roma-rd .owl-theme .owl-controls { margin-top: 8px; }
html.roma-rd .owl-theme .owl-controls .owl-page span {
  background: rgba(255, 255, 255, 0.45) !important;
  width: 9px;
  height: 9px;
  margin: 4px;
  opacity: 1;
  transition: width 0.2s, background 0.2s;
}
html.roma-rd .owl-theme .owl-controls .owl-page.active span,
html.roma-rd .owl-theme .owl-controls .owl-page:hover span {
  background: #f6ad0e !important;
  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; }
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%); }
}
html.roma-rd .rd-providers-wrap {
  overflow: hidden;
  border-radius: 8px;
}
html.roma-rd .rd-providers-track {
  display: flex;
  width: max-content;
  animation: rd-marquee 35s linear infinite;
  will-change: transform;
}
html.roma-rd .rd-providers-wrap:hover .rd-providers-track { animation-play-state: paused; }
html.roma-rd .rd-providers-track img {
  display: block;
  height: 150px;
  width: auto;
  flex: 0 0 auto;
}

/* Bar filter + search (glossy) */
html.roma-rd .rd-filterbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(26,26,26,0.2));
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: inset 1.667px -1.667px 1.667px rgba(255,255,255,0.5),
              inset -1.667px 1.667px 1.667px rgba(255,255,255,0.3);
}
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;
  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;
  /* Charcoal netral gelap (konsisten spt Figma), kilau tipis di atas + hanya
     semburat biru sangat halus di bawah, bukan navy pekat/keunguan. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 34%, rgba(30,40,80,0.10) 100%),
    #12141b;
  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;
  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;
}
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;
}
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; }
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: #0d0d0d;
  border: 1px solid transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  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-*/--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: #0d0d0d; }
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: none; }
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: #0d0d0d; }
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;
}
/* 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; }
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;
}
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;
  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;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 186px;
  height: 73px;
  flex: 0 0 auto;
  margin-right: 12px;
  padding: 12px 20px;
  background:
    radial-gradient(130% 105% at 50% 120%, rgba(255,255,255,0.30) 0%, rgba(140,160,200,0.10) 32%, rgba(0,5,17,0) 72%),
    #000511;
  border: 1.3px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85),
              inset 0 -2px 6px rgba(0,0,0,0.3);
  overflow: hidden;
}
/* Garis kecil menyala di tepi bawah tengah kartu */
html.roma-rd .rd-bank-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 -1px 8px 2px rgba(255,255,255,0.55), 0 0 4px 1px #ffffff;
}
/* Logo bank jadi putih (siluet) di kartu gelap, ukuran seperti Figma (~99x31) */
html.roma-rd .rd-bank-item img {
  max-width: 110px;
  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 .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 .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 { width: 100% !important; padding: 0 !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; }
html.roma-rd .rd-footer {
  max-width: none;
  margin: 20px 0 0;
  padding: 0 0 8px;
  color: #fff;
}
/* Strip lisensi (LISENSI LABEL TERBAIK dst) */
html.roma-rd .rd-lisensi {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 14px;
}

html.roma-rd .rd-footer-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  margin-bottom: 22px;
}
html.roma-rd .rd-alt-title { font-weight: 800; font-size: 15px; letter-spacing: 0.5px; }
html.roma-rd .rd-alt-links { display: flex; gap: 12px; flex-wrap: wrap; }
/* Link alternatif berbentuk pill dengan ikon rantai hijau (sesuai Figma) */
html.roma-rd .rd-alt-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: #e6e6e6 !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s;
}
html.roma-rd .rd-alt-links a:hover {
  color: #fff !important;
  border-color: rgba(74,222,128,0.6);
  background: rgba(74,222,128,0.08);
}
html.roma-rd .rd-alt-ic {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #17a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
}
html.roma-rd .rd-alt-ic .rd-ico { flex: 0 0 13px; width: 13px; height: 13px; color: #fff; }

html.roma-rd .rd-footer-cols { display: flex; gap: 52px; flex-wrap: wrap; margin-bottom: 22px; }

/* Logo sertifikasi di kanan kolom menu (sesuai Figma) */
html.roma-rd .rd-fcerts {
  margin-left: auto;
  display: grid;
  grid-template-columns: 116px 110px;
  gap: 8px 10px;
  align-content: start;
  align-items: center;
}
html.roma-rd .rd-fcerts img { width: 100%; height: auto; display: block; }
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: 48px;
}
html.roma-rd .rd-fcol-links a { break-inside: avoid; }

/* Watermark brand besar: sangat tebal, bagian bawah terpotong (efek tenggelam) */
html.roma-rd .rd-footer-brand {
  text-align: center;
  font-weight: 900;
  font-size: clamp(100px, 13vw, 175px);
  line-height: 1;
  letter-spacing: 2px;
  height: 0.62em;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.4) 55%, rgba(255,255,255,0) 97%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 18px 0 -30px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: 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; }

/* Copyright: polos tanpa bar/latar bawaan template (sesuai Figma) */
html.roma-rd #footer .footer-bottom,
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;
}
html.roma-rd #footer .footer-bottom { padding: 4px 0 14px !important; margin: 0 !important; }
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: #1c1c1c !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, #1c1c1c 0%, #101010 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;
}

/* Teks SEO footer di-collapse: memudar halus, buka/tutup beranimasi */
html.roma-rd #footer .widget-about {
  position: relative;
  max-height: 210px;
  overflow: hidden;
  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; }

/* ============================================================
   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 { gap: 36px; }
}
@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 { gap: 24px; }
}