:root {
     --lp-col-1: #ffee00;
     --lp-col-2: #e5ec6a;
     --lp-col-3: #c8b71f;
     --lp-col-4: #e3e64d;
     --lp-grad-gold: linear-gradient(135deg, var(--lp-col-1) 0%, var(--lp-col-4) 50%, #b5b01a 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: #f4f1dd;
     --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 {
     font-family: Arial, Roboto, sans-serif;
     text-align: center;
     font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
     font-weight: 700;
     letter-spacing: .6px;
     line-height: 1.25;
     margin: 46px 0 26px;
     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);
 }

 .section-title::after {
     content: "";
     display: block;
     width: 74px;
     height: 3px;
     margin: 14px auto 0;
     border-radius: 3px;
     background: var(--lp-grad-gold);
     box-shadow: var(--lp-shadow-gold);
 }

 /* ---------- 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(230, 217, 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) ---------- */
 body {
     padding-bottom: 78px;
 }

 .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;
     }

     body {
         padding-bottom: 72px;
     }

     .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;
     }
 }
 /*-------------------------------------------------------other--------------------------------------------------*/

  /* === TITLE MATCH COLOR WITH FAQ === */

  .cok-faq-title {
      text-align: center;
      color: #ffffff;
      font-size: 32px;
      margin-top: 25px;
      margin-bottom: 25px;
      font-weight: 800;
      font-family: "Segoe UI", sans-serif;
      text-shadow: 0 0 12px #9e9e9eaa, 0 0 20px #d3d3d3;
      letter-spacing: 1px;
  }

  /* === FAQ CONTAINER === */

  .cok-faq {
      max-width: 1200px;
      margin: 10px auto 40px auto;
      font-family: "Segoe UI", sans-serif;
  }

  /* === QUESTION BUTTON === */

  .cok-faq-q {
      width: 100%;
      padding: 14px;
      background: #1a170b;
      color: #ffffff;
      font-weight: bold;
      border: 1px solid #3d3d3d55;
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      margin-bottom: 8px;
      transition: .25s ease;
      box-shadow: 0 0 10px #00000022;
  }

  .cok-faq-q:hover {
      background: #322d09;
      box-shadow: 0 0 15px #00000044;
  }

  /* === ANSWER BOX === */

  .cok-faq-a {
      max-height: 0;
      overflow: hidden;
      background: #0f1623;
      color: #e6faff;
      margin-top: -5px;
      border-radius: 0 0 8px 8px;
      padding: 0 14px;
      border-left: 1px solid #00000033;
      border-right: 1px solid #00000033;
      border-bottom: 1px solid #00000033;
      transition: max-height .35s ease, padding .25s ease;
      box-shadow: inset 0 0 10px #00000022;
  }

  .cok-faq-a.open {
      max-height: 500px;
      padding: 14px;
  }

  /* === RESPONSIVE === */

  @media (max-width: 480px) {
      .cok-faq-title {
          font-size: 26px;
      }
  }



        .testi-slot {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
            font-family: 'Poppins', sans-serif;
        }
    
        .testi-title {
            text-align: center;
            font-size: 32px;
            font-weight: 800;
            background: linear-gradient(135deg, #ffd11a 0%, #ffb800 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 40px;
        }
    
        .testi-slider {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }
    
        .testi-card {
            background: linear-gradient(145deg, #efd396, #111);
            border: 1px solid #ffd11a55;
            border-radius: 16px;
            padding: 24px;
            color: #ffeaea;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
            transition: transform .3s ease;
        }
    
        .testi-card:hover {
            transform: translateY(-6px);
        }
    
        .stars {
            color: #ffd11a;
            font-size: 20px;
            margin-bottom: 12px;
        }
    
        .testi-card p {
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 16px;
        }
    
        .player {
            font-weight: 600;
            color: #ffb800;
        }
    
        small {
            display: block;
            margin-top: 6px;
            font-size: 12px;
            color: #aaa;
        }
    
        .testi-cta {
            text-align: center;
            margin-top: 40px;
        }
    
        .testi-cta a {
            display: inline-block;
            background: linear-gradient(135deg, #ffd11a 0%, #ffb800 100%);
            color: #000;
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 700;
            text-decoration: none;
            transition: .3s ease;
        }
    
        .testi-cta a:hover {
            box-shadow: 0 0 20px #ffd11aaa;
        }
    
        @media(max-width:600px) {
            .testi-title {
                font-size: 26px;
            }
        }