:root {
     --lp-col-1: #7d5b28;
     --lp-col-2: #ece56a;
     --lp-col-3: #c8901f;
     --lp-col-4: #e6c24d;
     --lp-grad-gold: linear-gradient(135deg, var(--lp-col-1) 0%, var(--lp-col-4) 50%, #b59b1a 100%);
     --lp-grad-gold-soft: linear-gradient(135deg, rgba(255, 233, 173, .16), rgba(184, 120, 26, .05));
     --lp-card: rgba(32, 24, 13, .72);
     --lp-card-solid: #1b150c;
     --lp-border: rgba(230, 184, 77, .26);
     --lp-border-sec: var(--lp-col-4);
     --lp-text: #def4dd;
     --lp-text-muted: #a9a484;
     --lp-radius: 18px;
     --lp-radius-sm: 12px;
     --lp-shadow: 0 22px 55px rgba(0, 0, 0, .5);
     --lp-shadow-gold: 0 12px 34px rgba(230, 184, 77, .18);
     --lp-ease: cubic-bezier(.22, .61, .36, 1);
 }

 html {
     scroll-behavior: smooth;
 }

 /* ---------- Wrapper area konten ---------- */
 .main-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 8px 18px 24px;
 }

 /* ---------- Judul section ---------- */
 .section-title {
     text-align: center;
     font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
     font-weight: 700;
     letter-spacing: .6px;
     line-height: 1.25;
     margin: auto;
     color: var(--lp-gold);
     background: var(--lp-grad-gold);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
     position: relative;
     /* Tambahan penting */
     padding-bottom: 16px;
     /* Ruang untuk garis */
 }

 .section-title::after {
     content: "";
     display: block;
     width: 74px;
     height: 3px;
     margin: 0 auto;
     /* Rata tengah */
     border-radius: 3px;
     background: var(--lp-grad-gold);
     box-shadow: var(--lp-shadow-gold);
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     /* Pastikan benar-benar center */
 }

 /* ---------- H1 brand ---------- */
 .footer-description-section h1 {
     font-family: Arial, Roboto, sans-serif;
     text-align: center;
     font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
     line-height: 1.3;
     font-weight: 700;
     margin: 18px auto 12px;
     max-width: 980px;
     color: var(--lp-gold);
     background: var(--lp-grad-gold);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: 0 2px 22px rgba(0, 0, 0, .4);
 }

 /* ---------- Breadcrumb ---------- */
 .breadcrumb-list {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 4px 0;
     padding: 0;
     margin: 0 0 8px;
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: 13px;
 }

 .breadcrumb-list li {
     display: flex;
     align-items: center;
     color: var(--lp-text-muted);
 }

 .breadcrumb-list li:not(:last-child)::after {
     content: "\203A";
     margin: 0 9px;
     color: var(--lp-gold);
     opacity: .7;
 }

 .breadcrumb-list a {
     color: var(--lp-text-muted);
     text-decoration: none;
     transition: color .25s var(--lp-ease);
 }

 .breadcrumb-list a:hover {
     color: var(--lp-gold);
 }

 .breadcrumb-list li.active span {
     color: var(--lp-gold);
 }

 /* ---------- Deskripsi situs ---------- */
 .site-description {
     max-width: 1000px;
     margin: 8px auto 10px;
     font-family: 'Plus Jakarta Sans', sans-serif;
     color: var(--lp-text-muted);
     line-height: 1.95;
     font-size: 15px;
     text-align: left;
 }

 .site-description p {
     margin: 0 0 16px;
 }

 .site-description strong {
     color: var(--lp-text);
     font-weight: 700;
 }

 /* ---------- Glass card base ---------- */
 .info-box,
 .panduan-card,
 .artikel-card,
 .testi-card,
 .faq-item,
 .gm-location-box {
     background: var(--lp-card);
     border: 1px solid var(--lp-border);
     border-radius: var(--lp-radius);
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     box-shadow: var(--lp-shadow);
     box-sizing: border-box;
     font-family: 'Plus Jakarta Sans', sans-serif;
 }

 .info-box,
 .gm-location-box {
     padding: 26px 26px 12px;
     margin: 0 auto 30px;
     max-width: 1200px;
 }

 /* ---------- Tabel info ---------- */
 .info-table {
     width: 100%;
     border-collapse: collapse;
 }

 .info-table tr {
     border-bottom: 1px solid var(--lp-border);
 }

 .info-table tr:last-child {
     border-bottom: none;
 }

 .info-label,
 .info-value {
     padding: 14px 6px;
     font-size: 14.5px;
     text-align: left;
     vertical-align: top;
 }

 .info-label {
     color: var(--lp-text-muted);
     width: 42%;
     font-weight: 500;
 }

 .info-value {
     color: var(--lp-text);
     font-weight: 600;
 }

 /* ---------- Grid kartu ---------- */
 .panduan-grid,
 .artikel-grid,
 .testi-grid {
     display: grid;
     gap: 22px;
     margin: 0 auto 34px;
     max-width: 1200px;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 }

 .panduan-card,
 .artikel-card,
 .testi-card {
     padding: 24px 22px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease), border-color .35s var(--lp-ease);
 }

 .panduan-card:hover,
 .artikel-card:hover,
 .testi-card:hover {
     transform: translateY(-6px);
     border-color: rgba(230, 184, 77, .5);
     box-shadow: var(--lp-shadow), var(--lp-shadow-gold);
 }

 .panduan-card h3,
 .artikel-card h3 {
     font-family: 'Plus Jakarta Sans', sans-serif;
     color: var(--lp-col-1);
     font-size: 16px;
     font-weight: 700;
     margin: 0 0 6px;
     line-height: 1.4;
 }

 /* ---------- Daftar langkah bernomor ---------- */
 .panduan-list {
     list-style: none;
     padding: 0;
     margin: 6px 0 0;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .panduan-list li {
     position: relative;
     padding-left: 44px;
     color: var(--lp-text-muted);
     font-size: 14px;
     line-height: 1.6;
     min-height: 30px;
     display: flex;
     align-items: center;
 }

 .panduan-list li::before {
     content: attr(data-number);
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-weight: 700;
     font-size: 13px;
     color: var(--lp-card-solid);
     background: var(--lp-grad-gold);
     box-shadow: var(--lp-shadow-gold);
 }

 /* ---------- Tag artikel ---------- */
 .artikel-tag {
     display: inline-block;
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .4px;
     text-transform: uppercase;
     color: var(--lp-col-1);
     background: var(--lp-grad-gold-soft);
     border: 1px solid var(--lp-border);
     padding: 5px 12px;
     border-radius: 999px;
     align-self: flex-start;
 }

 .artikel-card p {
     color: var(--lp-text-muted);
     font-size: 14px;
     line-height: 1.7;
     margin: 6px 0 0;
 }

 /* ---------- Testimoni ---------- */
 .testi-card {
     gap: 6px;
 }

 .testi-name {
     color: var(--lp-text);
     font-weight: 700;
     font-size: 15px;
     margin: 0;
 }

 .testi-city {
     color: var(--lp-gold);
     font-size: 12px;
     margin: 0 0 6px;
     font-weight: 600;
 }

 .testi-quote {
     color: var(--lp-text-muted);
     font-style: italic;
     line-height: 1.7;
     font-size: 14px;
     margin: 0 0 8px;
 }

 /* ---------- FAQ accordion ---------- */
 .faq-item {
     margin: 0 auto 14px;
     max-width: 1000px;
     overflow: hidden;
 }

 .faq-item details {
     width: 100%;
 }

 .faq-summary {
     list-style: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     padding: 18px 22px;
     color: var(--lp-text);
     font-weight: 600;
     font-size: 15px;
     font-family: 'Plus Jakarta Sans', sans-serif;
     transition: color .25s var(--lp-ease);
 }

 .faq-summary::-webkit-details-marker {
     display: none;
 }

 .faq-summary:hover {
     color: var(--lp-col-1);
 }

 .faq-summary .arrow {
     color: var(--lp-gold);
     transition: transform .3s var(--lp-ease);
     flex: none;
 }

 .faq-item details[open] .faq-summary {
     color: var(--lp-col-1);
 }

 .faq-item details[open] .faq-summary .arrow {
     transform: rotate(180deg);
 }

 .faq-content {
     padding: 16px 22px 20px;
     color: var(--lp-text-muted);
     line-height: 1.8;
     font-size: 14px;
     border-top: 1px solid var(--lp-border);
 }

 /* ---------- Google Map / lokasi ---------- */
 .gm-location-box {
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 .gm-map-container {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 7;
     min-height: 240px;
     border-radius: var(--lp-radius-sm);
     overflow: hidden;
     border: 1px solid var(--lp-border);
 }

 .gm-map-container iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: 0;
 }

 .gm-info-content {
     text-align: center;
     padding-bottom: 6px;
 }

 .gm-brand-title {
     font-family: Arial, Roboto, sans-serif;
     color: var(--lp-col-1);
     font-size: 18px;
     font-weight: 700;
     margin: 0 0 4px;
 }

 .gm-subtitle {
     color: var(--lp-text-muted);
     font-size: 13px;
     margin: 0;
 }

 /* ---------- Footer grid ---------- */
 .footer-grid {
     display: grid;
     gap: 26px;
     max-width: 1200px;
     margin: 30px auto;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     font-family: 'Plus Jakarta Sans', sans-serif;
 }

 .footer-col h4 {
     color: var(--lp-col-1);
     font-size: 15px;
     font-weight: 700;
     margin: 0 0 14px;
     letter-spacing: .3px;
 }

 .footer-col ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 9px;
 }

 .footer-col a {
     color: var(--lp-text-muted);
     text-decoration: none;
     font-size: 13.5px;
     transition: color .25s var(--lp-ease);
 }

 .footer-col a:hover {
     color: var(--lp-gold);
 }

 /* ---------- Garis pemisah ---------- */
 .footer-separator {
     border: none;
     height: 1px;
     max-width: 1200px;
     margin: 30px auto;
     background: linear-gradient(90deg, transparent, rgba(212, 230, 77, 0.5), transparent);
 }

 /* ---------- RTP Live (kartu carousel ala rekomendasi) ---------- */
 .rtp-live-box {
     margin: 6px 0 30px;
 }

 .rtp-head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 14px;
     border-bottom: 1px solid var(--lp-border);
 }

 /* Tab disamakan dengan "Rekomendasi Pertandingan"/"Game Populer" (.container-title span) */
 h2.rtp-tab {
     position: relative;
     display: inline-block;
     margin: 0;
     padding: 5px 50px;
     color: var(--popular-game-title-cntr-title-span-color, #fff);
     background-color: var(--popular-game-title-cntr-title-span-bg, #d3b469);
     font-family: inherit;
     font-weight: normal;
     font-size: 14px;
     letter-spacing: normal;
     text-transform: uppercase;
 }

 h2.rtp-tab::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 20px;
     height: 100%;
     background-color: var(--popular-game-title-cntr-title-span-after-bg, #d3b469);
     transform-origin: 100% 0;
     transform: skew(25deg);
 }

 .rtp-more {
     color: var(--lp-text-muted);
     font-size: 12.5px;
     font-weight: 600;
     text-decoration: none;
     white-space: nowrap;
     padding-bottom: 10px;
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
 }

 .rtp-more b {
     color: var(--lp-col-1);
 }

 .rtp-carousel {
     position: relative;
 }

 .rtp-track {
     display: flex;
     gap: 14px;
     overflow-x: auto;
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
     padding: 4px 2px 14px;
     scrollbar-width: thin;
     scrollbar-color: var(--lp-gold) transparent;
 }

 .rtp-track::-webkit-scrollbar {
     height: 6px;
 }

 .rtp-track::-webkit-scrollbar-thumb {
     background: var(--lp-border);
     border-radius: 999px;
 }

 .rtp-arrow {
     position: absolute;
     top: 40%;
     transform: translateY(-50%);
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     background: var(--lp-grad-gold);
     color: #2a1c05;
     font-size: 18px;
     font-weight: 900;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 5;
     box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
     transition: transform .2s var(--lp-ease), filter .2s var(--lp-ease);
 }

 .rtp-arrow:hover {
     filter: brightness(1.08);
     transform: translateY(-50%) scale(1.08);
 }

 .rtp-arrow.prev {
     left: -10px;
 }

 .rtp-arrow.next {
     right: -10px;
 }

 .rtp-card {
     flex: 0 0 232px;
     width: 232px;
     scroll-snap-align: start;
     background: var(--lp-card-solid);
     border: 1px solid var(--lp-border);
     border-radius: 14px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     transition: transform .3s var(--lp-ease), border-color .3s var(--lp-ease), box-shadow .3s var(--lp-ease);
 }

 .rtp-card:hover {
     transform: translateY(-5px);
     border-color: rgba(230, 184, 77, .55);
     box-shadow: var(--lp-shadow-gold);
 }

 .rtp-card-head {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
     background: linear-gradient(180deg, #3a3a3d, #232325);
     cursor: pointer;
 }

 .rtp-card-head .rtp-name {
     flex: 1;
     min-width: 0;
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
 }

 .rtp-card-head .rtp-chevron {
     flex: none;
     color: var(--lp-col-1);
     font-size: 16px;
     font-weight: 900;
     transition: transform .3s var(--lp-ease);
 }

 .rtp-card.open .rtp-chevron {
     transform: rotate(90deg);
 }

 .rtp-thumb {
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     background: #0d0a05;
     cursor: pointer;
 }

 .rtp-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .4s var(--lp-ease);
 }

 .rtp-card:hover .rtp-thumb img {
     transform: scale(1.06);
 }

 .rtp-provider-badge {
     position: absolute;
     left: 8px;
     top: 8px;
     z-index: 2;
     background: rgba(0, 0, 0, .6);
     color: var(--lp-col-1);
     font-size: 9.5px;
     font-weight: 700;
     letter-spacing: .3px;
     padding: 3px 8px;
     border-radius: 999px;
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
 }

 .rtp-trend {
     position: absolute;
     right: 8px;
     top: 8px;
     z-index: 2;
     font-size: 10px;
     font-weight: 800;
     padding: 3px 8px;
     border-radius: 999px;
     white-space: nowrap;
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
 }

 .rtp-trend.up {
     color: #0c2a12;
     background: linear-gradient(135deg, #7ee08a, #34a049);
 }

 .rtp-trend.down {
     color: #2a0c0c;
     background: linear-gradient(135deg, #f3a3a3, #cf4b4b);
 }

 .rtp-body {
     padding: 12px 12px 4px;
 }

 .rtp-body-top {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     margin-bottom: 8px;
 }

 .rtp-label {
     color: var(--lp-text-muted);
     font-size: 10.5px;
     font-weight: 600;
     letter-spacing: .5px;
     text-transform: uppercase;
 }

 .rtp-percent {
     font-family: Arial, Roboto, sans-serif;
     font-size: 24px;
     font-weight: 800;
     color: var(--lp-col-1);
     line-height: 1;
 }

 .rtp-meter {
     position: relative;
     width: 100%;
     height: 8px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .08);
     overflow: hidden;
 }

 .rtp-bar {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     border-radius: 999px;
     background: var(--lp-grad-gold);
     box-shadow: 0 0 10px rgba(230, 184, 77, .5);
     transform-origin: left;
 }

 .rtp-bar.low {
     background: linear-gradient(135deg, #e7a17a, #c8601f);
 }

 .rtp-detail {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows .35s var(--lp-ease);
 }

 .rtp-card.open .rtp-detail {
     grid-template-rows: 1fr;
 }

 .rtp-detail-inner {
     overflow: hidden;
     min-height: 0;
     padding: 0 12px;
 }

 .rtp-detail-title {
     color: var(--lp-col-1);
     font-size: 10.5px;
     font-weight: 800;
     letter-spacing: .5px;
     text-transform: uppercase;
     margin: 0 0 6px;
     padding-top: 10px;
     border-top: 1px dashed var(--lp-border);
 }

 .rtp-pola-row {
     display: flex;
     justify-content: space-between;
     gap: 8px;
     padding: 4px 0;
     font-size: 12px;
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
 }

 .rtp-pola-row span:first-child {
     color: var(--lp-text-muted);
 }

 .rtp-pola-row span:last-child {
     color: var(--lp-text);
     font-weight: 600;
     text-align: right;
 }

 .rtp-actions {
     display: flex;
     gap: 8px;
     padding: 10px 12px 12px;
 }

 .rtp-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 9px 6px;
     border-radius: 10px;
     font-size: 12.5px;
     font-weight: 800;
     text-decoration: none;
     letter-spacing: .4px;
     text-transform: uppercase;
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
     transition: transform .2s var(--lp-ease), filter .2s var(--lp-ease);
 }

 .rtp-btn:hover {
     transform: translateY(-2px);
     filter: brightness(1.07);
 }

 .rtp-btn.daftar {
     color: var(--lp-col-1);
     background: linear-gradient(135deg, #2c2c2e, #1a1a1c);
     border: 1px solid var(--lp-border);
 }

 .rtp-btn.main {
     color: #2a1c05;
     background: var(--lp-grad-gold);
     box-shadow: 0 6px 16px rgba(230, 184, 77, .3);
 }

 .rtp-note {
     color: var(--lp-text-muted);
     font-size: 11px;
     line-height: 1.6;
     margin: 8px 4px 0;
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
     font-style: italic;
 }

 @media (prefers-reduced-motion: no-preference) {
     .rtp-bar {
         animation: rtpFill 1.1s var(--lp-ease) both;
     }
 }

 @keyframes rtpFill {
     from {
         transform: scaleX(0);
     }

     to {
         transform: scaleX(1);
     }
 }

 @media (max-width: 768px) {
     .rtp-card {
         flex-basis: 62vw;
         width: 62vw;
         max-width: 240px;
     }

     .rtp-arrow {
         display: none;
     }

     h2.rtp-tab {
         font-size: 14px;
         padding: 5px 30px;
     }
 }

 /* ---------- Responsive ---------- */
 @media (max-width: 768px) {

     .info-box,
     .gm-location-box {
         padding: 20px 16px 8px;
     }

     .panduan-card,
     .artikel-card,
     .testi-card {
         padding: 20px 16px;
     }

     .info-table tr {
         display: block;
         padding: 8px 0;
     }

     .info-label,
     .info-value {
         display: block;
         width: 100%;
         padding: 4px 4px;
     }

     .info-label {
         color: var(--lp-gold);
         font-weight: 600;
     }

     .faq-summary {
         padding: 16px;
         font-size: 14px;
     }

     .faq-content {
         padding: 14px 16px 18px;
     }

     .section-title {
         margin: 34px 0 20px;
     }
 }

 @media (max-width: 480px) {

     .panduan-grid,
     .artikel-grid,
     .testi-grid,
     .rtp-grid,
     .footer-grid {
         grid-template-columns: 1fr;
     }

     .rtp-pola {
         max-width: 58%;
     }
 }

 /* ---------- Animasi masuk (hormati prefers-reduced-motion) ---------- */
 @media (prefers-reduced-motion: no-preference) {

     .info-box,
     .panduan-card,
     .artikel-card,
     .testi-card,
     .faq-item,
     .gm-location-box {
         animation: lpFadeUp .6s var(--lp-ease) both;
     }
 }

 @keyframes lpFadeUp {
     from {
         opacity: 0;
         transform: translateY(18px);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 /* ---------- Tombol LOGIN / DAFTAR : sejajar lebar banner (desktop) ---------- */
 .section-2-container {
     padding: 0;
 }

 .section-2-container .container {
     max-width: none;
     width: 100%;
     padding-left: 0;
     padding-right: 0;
 }

 .section-2-container .w-100 {
     margin: 0 !important;
 }

 .n-columns-2x {
     display: flex;
     gap: 16px;
     width: 100%;
     padding: 16px 0;
     box-sizing: border-box;
 }

 .n-columns-2x .login,
 .n-columns-2x .register {
     flex: 1 1 0;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 56px;
     padding: 14px 20px;
     border-radius: 14px;
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
     font-weight: 800;
     font-size: 16px;
     letter-spacing: 1px;
     text-transform: uppercase;
     text-decoration: none;
     cursor: pointer;
     transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), filter .25s var(--lp-ease);
 }

 .n-columns-2x .login {
     color: #2a1c05;
     background: var(--lp-grad-gold);
     box-shadow: 0 10px 26px rgba(230, 184, 77, .35);
 }

 .n-columns-2x .register {
     color: var(--lp-col-1);
     background: linear-gradient(135deg, #2c2c2e, #1a1a1c);
     border: 1px solid var(--lp-border);
     box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
 }

 .n-columns-2x .login:hover,
 .n-columns-2x .register:hover {
     transform: translateY(-3px);
     filter: brightness(1.06);
 }

 .n-columns-2x .login:hover {
     box-shadow: 0 16px 34px rgba(230, 184, 77, .5);
 }

 /* ---------- Footer Menu Bar (modern · elegan · responsive) ---------- */

 .Slot777-fixed-footer {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 9999;
     display: flex;
     align-items: stretch;
     justify-content: space-around;
     gap: 4px;
     padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
     background: var(--lp-grad-gold);
     -webkit-backdrop-filter: blur(14px);
     backdrop-filter: blur(14px);
     border-top: 3px solid var(--lp-card);
     box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
     font-family: 'Plus Jakarta Sans', Arial, sans-serif;
     border-radius: 40px 40px 0 0;
 }

 .Slot777-fixed-footer a {
     flex: 1 1 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
     gap: 6px;
     padding: 8px 4px;
     border-radius: 14px;
     color: var(--lp-text-muted);
     font-size: 11.5px;
     font-weight: 600;
     text-decoration: none;
     letter-spacing: .2px;
     transition: color .25s var(--lp-ease), background .25s var(--lp-ease), transform .25s var(--lp-ease);
 }

 .Slot777-fixed-footer a img {
     width: 24px;
     height: 24px;
     object-fit: contain;

     transition: transform .25s var(--lp-ease);
 }

 .Slot777-fixed-footer a:hover {
     color: var(--lp-col-1);
     background: var(--lp-grad-gold-soft);
     transform: translateY(-2px);
 }

 .Slot777-fixed-footer a:hover img {
     transform: scale(1.12);
 }

 /* Item tengah (Masuk) ditonjolkan */
 .Slot777-fixed-footer a.tada {
     color: var(--lp-col-1);
     font-weight: 800;
 }

 .Slot777-fixed-footer a.tada img {
     width: 40px;
     height: 40px;
     padding: 0;
     margin-top: -14px;
     background: none;
     box-shadow: none;
     border-radius: 0;
 }

 @media (max-width: 768px) {
     .n-columns-2x {
         gap: 12px;
         padding: 12px 12px;
     }

     .n-columns-2x .login,
     .n-columns-2x .register {
         min-height: 50px;
         font-size: 14px;
     }

     .Slot777-fixed-footer a {
         font-size: 10.5px;
     }

     .Slot777-fixed-footer a img {
         width: 22px;
         height: 22px;
     }

     .Slot777-fixed-footer a.tada img {
         width: 36px;
         height: 36px;
         margin-top: -12px;
     }
 }

 /*--------------------------------------------POPUP NEW-------------------------------------------------------------*/
  .SLOT {
      margin: 0;
      padding: 0;
      font-family: 'Playfair Display', 'Segoe UI', serif;
      background-color: transparent;
      color: #cabe0c;
      overflow: hidden
  }

  .custom-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .4);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999
  }

  .custom-container {
      position: relative;
      width: 90%;
      max-width: 420px;
      background: linear-gradient(145deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 85%));
      border-radius: 20px;
      overflow: hidden;
      text-align: center;
      animation: rotateScaleIn .8s cubic-bezier(.175, .885, .32, 1.275), goldPulse 3.5s infinite ease-in-out;
      box-shadow: 0 20px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(212, 175, 55, .2);
      padding-bottom: 20px;
      border: 1px solid var(--lp-col-1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px)
  }

  @keyframes goldPulse {

      0%,
      100% {
          box-shadow: 0 20px 40px rgba(0, 0, 0, .7), 0 0 20px rgba(30, 144, 255, .3), 0 0 0 1px rgba(30, 144, 255, .2)
      }

      50% {
          box-shadow: 0 20px 40px rgba(0, 0, 0, .7), 0 0 30px rgba(0, 191, 255, .5), 0 0 0 1px rgba(0, 191, 255, .3)
      }
  }

  .custom-container::before {
      content: "";
      position: absolute;
      top: -100%;
      left: -100%;
      width: 200%;
      height: 200%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0) 45%, rgba(0, 191, 255, .28) 50%, rgba(255, 255, 255, 0) 55%);
      animation: shineDiagonal 5s linear infinite;
      z-index: 2;
      pointer-events: none
  }

  @keyframes shineDiagonal {
      0% {
          transform: translate(-100%, -100%) rotate(30deg)
      }

      100% {
          transform: translate(100%, 100%) rotate(30deg)
      }
  }

  .custom-image {
      width: 100%;
      display: block;
      border-bottom: 1px solid var(--lp-col-1)
  }

  .clk-btn-sgp {
      width: 97%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      font-family: Poppins, sans-serif;
      font-weight: 700;
      padding: 20px;
      position: relative;
      overflow: hidden
  }

  .clk-btn-sgp::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 30px);
      height: 2px;
      background: linear-gradient(90deg, transparent, #faea07, gold, #faea07, transparent);
      opacity: .4;
      filter: blur(1px)
  }

  .clk-btn-sgp a {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 16px 12px;
      margin: 0;
      border-radius: 14px;
      transition: all .4s cubic-bezier(.23, 1, .32, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 2px solid transparent;
      box-shadow: 0 8px 0 #000;
      clip-path: polygon(var(--blade-cut) 0, 100% 0, 100% calc(100% - var(--blade-cut)), calc(100% - var(--blade-cut)) 100%, 0 100%, 0 var(--blade-cut));
      z-index: 1
  }

  .clk-btn-sgp a::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, var(--lp-col-1), var(--lp-col-2), var(--lp-col-3), var(--lp-col-4), var(--lp-col-1));
      border-radius: 16px;
      z-index: -1;
      opacity: 0;
      transition: opacity .3s ease
  }

  .clk-btn-sgp a:hover::after {
      opacity: 1
  }

  .clk-btn-sgp a:hover {
      transform: translateY(-6px) scale(1.03);
      border-color: #ffbf00
  }

  .login {
      color: gold !important;
      background: linear-gradient(145deg, #535050, #000);
      border: 2px solid #cabe0c;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
      position: relative
  }

  .login::before {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      opacity: .7;
      transition: all .3s ease;
      filter: drop-shadow(0 0 3px gold)
  }

  .login:hover {
      background: linear-gradient(145deg, #222, #1a1a1a);
      box-shadow: 0 12px 0 #000, 0 20px 40px rgba(212, 175, 55, .4), 0 0 30px rgba(255, 215, 0, .2);
      color: #fff8dc !important;
      border-color: gold
  }

  .login:hover::before {
      opacity: 1;
      transform: translateY(-50%) rotate(15deg);
      filter: drop-shadow(0 0 8px gold)
  }

  .register {
      color: #000000 !important;
      background: linear-gradient(45deg, var(--lp-col-1), var(--lp-col-2), var(--lp-col-3), var(--lp-col-4), var(--lp-col-1));
      border: 2px solid #000;
      text-shadow: 0 1px 2px rgba(255, 255, 255, .3);
      position: relative
  }

  .register::before {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      opacity: .7;
      transition: all .3s ease
  }

  .register:hover {
      background: linear-gradient(145deg, gold, #faea07);
      box-shadow: 0 12px 0 #000, 0 20px 40px rgba(212, 175, 55, .5), 0 0 35px rgba(255, 215, 0, .3);
      color: #000 !important;
      border-color: #000
  }

  .register:hover::before {
      opacity: 1;
      transform: translateY(-50%) scale(1.2) rotate(360deg);
      filter: drop-shadow(0 0 5px #d1a000)
  }

  .clk-btn-sgp a span {
      display: inline-block;
      transition: transform .3s ease
  }

  .clk-btn-sgp a:hover span {
      transform: translateX(3px)
  }

  @media (max-width:768px) {
      .clk-btn-sgp {
          grid-template-columns: 1fr;
          gap: 12px
      }

      .clk-btn-sgp a {
          padding: 18px 12px
      }

      .login::before,
      .register::before {
          position: relative;
          left: 0;
          right: 0;
          display: inline-block;
          margin-right: 10px;
          transform: none;
          top: 0
      }

      .login:hover::before,
      .register:hover::before {
          transform: none
      }
  }

  @keyframes subtleGlow {

      0%,
      100% {
          box-shadow: 0 15px 35px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1)
      }

      50% {
          box-shadow: 0 15px 35px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 20px rgba(212, 175, 55, .15)
      }
  }

  .info-table {
      width: 90%;
      margin: 20px auto;
      border-collapse: collapse;
      color: #eee;
      font-size: 14px;
      position: relative;
      z-index: 3;
      background: rgba(0, 0, 0, .3);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, .3)
  }

  .info-table th {
      background: linear-gradient(135deg, #00b7ff, #003b8f);
      padding: 14px 10px;
      font-size: 15px;
      color: #000;
      border: none;
      font-weight: 700;
      letter-spacing: .8px;
      text-transform: uppercase
  }

  .info-table td {
      padding: 12px;
      border-bottom: 1px solid rgba(212, 175, 55, .1);
      text-align: left
  }

  .info-table tr:last-child td {
      border-bottom: none
  }

  .custom-footer {
      font-size: 13px;
      color: #ccc;
      padding: 20px 10px;
      position: relative;
      z-index: 3;
      line-height: 1.6;
      font-family: 'Playfair Display', serif
  }

  @keyframes rotateScaleIn {
      0% {
          opacity: 0;
          transform: scale(.3) rotate(-10deg)
      }

      50% {
          transform: scale(1.05) rotate(2deg)
      }

      100% {
          opacity: 1;
          transform: scale(1) rotate(0)
      }
  }

  .gold-particle {
      position: absolute;
      background: radial-gradient(circle, rgba(255, 215, 0, .8) 0, rgba(212, 175, 55, .4) 100%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: floatGold 10s infinite ease-in-out;
      box-shadow: 0 0 10px rgba(255, 215, 0, .6)
  }

  @keyframes floatGold {

      0%,
      100% {
          transform: translateY(0) translateX(0);
          opacity: 0
      }

      10% {
          opacity: .8
      }

      90% {
          opacity: .8
      }

      100% {
          transform: translateY(-120px) translateX(40px);
          opacity: 0
      }
  }

  .luxury-border {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid rgba(212, 175, 55, .2);
      border-radius: 20px;
      pointer-events: none;
      z-index: 4;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0) 0, rgba(212, 175, 55, .1) 50%, rgba(212, 175, 55, 0) 100%)
  }

  .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 32px;
      height: 32px;
      background: rgba(0, 0, 0, .5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 10;
      transition: all .3s ease;
      border: 1px solid var(--lp-col-1)
  }

  .close-btn:hover {
      background: var(--lp-col-1);
      transform: rotate(90deg)
  }

  .close-btn::after,
  .close-btn::before {
      content: '';
      position: absolute;
      width: 16px;
      height: 2px;
      background: #fff
  }

  .close-btn::before {
      transform: rotate(45deg)
  }

  .close-btn::after {
      transform: rotate(-45deg)
  }

  @media (max-width:480px) {
      .custom-container {
          width: 95%;
          max-width: 350px
      }

      .custom-buttons a {
          font-size: 14px;
          padding: 16px 0
      }

      .info-table {
          font-size: 13px
      }

      .custom-footer {
          font-size: 12px
      }

      .close-btn {
          width: 28px;
          height: 28px
      }
  }