/* Table Of Content by Ligaciputra77 */
            #sub_wrapper {
                background: #000000;
                max-width: 100%;
                position: relative;
                padding: 10px;
                border-radius: 4px;
                margin: 20px auto;
            }

            .tombol_toc {
                position: relative;
                font-weight: bold;
                outline: none;
                color: #FFFFFF;
            }

            .tombol_toc svg {
                float: right;
            }

            #daftarisi {
                background: #09123d;
                padding: 10px 10px 0;
                border-radius: 4px;
                margin-top: 10px;
                -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.05);
                box-shadow: 0 2px 15px rgba(0,0,0,.05);
            }

            #daftarisi a {
                text-decoration: none;
                color: #FFFFFF;
            }

            #daftarisi ol {
                padding: 0 0 0 20px;
                color: #FFFFFF;
                margin: 0
            }

            #daftarisi ol li.lvl1 {
                line-height: 1.8em;
                color: #FFFFFF;
                padding: 4px 0;
            }

            #daftarisi ol li.lvl1:nth-child(n+2) {
                border-top: 1px dashed #ddd;
            }

            #daftarisi ol li.lvl1 a {
                font-weight: 600;
            }

            #daftarisi ol li.lvl2 a {
                font-weight: 400;
            }

            #daftarisi ol li a:hover {
                text-decoration: underline;
            }

            :target::before {
                content: "";
                display: block;
                height: 40px;
                margin-top: -40px;
                visibility: hidden;
            }

            /*Accordion Styles*/
            .accordion h4 {
                color: #FFFF00;
                background-color: transparent;
                border: none;
            }

            .accordion h4 {
                font-size: 14px;
                line-height: 40px;
            }

            .accordion h4 i {
                height: 40px;
                line-height: 40px;
                position: absolute;
                right: 0px;
                font-size: 12px;
            }

            .nested-accordion h4 {
                font-size: 14px;
            }

            section[expanded] .fa-plus {
                transform: rotate(45deg);
            }

            section[expanded] .fa-angle-down {
                transform: rotate(180deg);
            }

            section[expanded] .fa-chevron-down {
                transform: rotate(180deg);
            }

            .login-join {
                width: 100%;
                position: fixed;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                border-top: 8px solid black;
                z-index: 2
            }

            .login-join ul {
                list-style: none;
                display: flex
            }

            .login-join li:nth-child(1) {
                background: linear-gradient(to bottom, #FFF000, #9E9E00);
                border: 5px solid yellow;
                color: #000
            }

            .login-join li {
                flex: 1;
                text-transform: uppercase
            }

            .login-join a {
                text-align: center;
                display: block;
                padding: 16px 0;
                font-size: 18px;
                font-weight: 600
            }

            .login-join li:nth-child(2) {
                background: linear-gradient(to bottom, #FF0000, #8F0000);
                border: 5px solid #FF0000;
                color: #FFFFFF
            }

            *,.product-features__heading p,body,html {
                margin: 0;
                padding: 0
            }

            #sidebar-close,.btn--primary {
                cursor: pointer
            }

            #sidebar__menu-btn,.btn,.green-text,.text--bold {
                font-weight: 700
            }

            #tour>div,.btn,.features__highlight__description,.features__highlight__title,.text--center,footer .meta-content {
                text-align: center
            }

            * {
                box-sizing: border-box;
                font-family: Roboto;
                transition: .2s linear;
                font-size: 16px;
                line-height: 150%
            }

            h1,h2 {
                line-height: 100%;
                margin-bottom: 1.5rem
            }

            body {
                background-color: #1F1F1F;
                color: #fff
            }

            .hero-bg {
                background: url(/assets/bg-main.webp) center center/cover #000000
            }

            .gradient-bg {
                background: #AB5000;
                background: -webkit-linear-gradient(to top,#414345,#232526);
                background: linear-gradient(to top,#414345,#232526)
            }

            .content-width {
                width: 70%;
                margin: 0 auto
            }

            .content {
                margin: 0 auto;
                padding: 4em 0;
                line-height: 160%
            }

            h1,h2,h3,h4,h5,h6 {
                color: #FFFFFF
            }

            h1 {
                font-size: 2.8em;
                color: #fff
            }

            h2 {
                font-size: 22px
            }

            h3 {
                font-size: 22px;
                line-height: 30px;
                color: #FFFF00;
                font-weight: 300;
                font-weight: 700;
            }

            h4 {
                font-size: 18px;
                line-height: 28px;
                color: #FFFFFF;
                font-weight: 450;
                font-weight: 700;
            }

            h5 {
                font-size: 12px;
                line-height: 26px;
                color: #FFFFFF;
                font-weight: 500;
                font-style: italic;
            }

            .clearfix {
                clear: both
            }

            .green-text {
                color: #3ebf43
            }

            .flex {
                display: flex
            }

            .flex-wrap {
                flex-wrap: wrap
            }

            .flex-center {
                justify-content: center;
                align-items: center
            }

            .flex-space-around {
                justify-content: space-around
            }

            .flex-space-between {
                justify-content: space-between
            }

            .flex-column {
                flex-direction: column
            }

            .flex-half {
                width: 48%
            }

            .text--capitalize {
                text-transform: capitalize
            }

            .text--secondary {
                color: #566584
            }

            .btn {
                padding: 12px 22px;
                margin: 0 10px;
                color: #fff;
                display: inline-block;
                border-radius: 15px;
                border: 2px solid transparent;
                text-transform: uppercase;
                letter-spacing: 1px;
                text-shadow: 0 1px 5px rgba(0,0,0,.75)
            }

            .btn--primary {
                background-color: #9E9E00;
                border-color: transparent;
                color: #fff
            }

            .btn--secondary {
                background-color: #9E9E00;
                background-image: linear-gradient(to bottom,#FFFF00,#9E9E00);
                border: 2px solid #FFFF00
            }

            .btn--primary:hover,.btn--secondary:hover {
                background-color: #e48f36;
                border-color: #FFFFFF;
                color: #fff
            }

            .sidebar__nav-link:hover,a:hover,footer .meta-content a {
                color: #9E9E00
            }

            a,footer a {
                color: #fff;
                text-decoration: none
            }

            .border-round {
                border-radius: 5px
            }

            .box-shadow {
                box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)
            }

            .animate {
                transition: .2s ease-in-out
            }

            .section-padding {
                padding: 60px 0
            }

            #hero {
                width: 100%
            }

            header.hero__header {
                background-color: #000000;
                border-bottom: 2px solid yellow;
                position:fixed;
                top: 0;
                width: 100%;
                padding: 8px 0;
                z-index: 1000;
                height: 80px
            }
            .content {
                padding: 80px 0;
        }

            .logo {
                width: 224px;
                margin-right: 30px
            }

            .hero__menu nav a {
                margin-left: 10px;
                margin-right: 10px;
                padding-bottom: 5px;
                border-bottom: 1px
            }

            .hero__body {
                margin: 0 auto;
                height: 70%
            }

            .hero__content {
                padding: 40px 0 90px;
                color: #fff;
                
            }

            .hero__content img {
                max-width: 95%
            }

            .hero__content>div,.product-features__content,.product-features__graphic {
                width: 50%;
            }

            .hero__content>div:nth-of-type(2) .btn {
                margin: 25px 0
            }

            @keyframes colorchange {
                0%,100% {
                    background: #FFFF00
                }

                50% {
                    background: #9E9E00
                }
            }

            .hero__content__cta {
                font-size: 140%;
            }

            .hero__content__cta.btn--primary {
                animation: 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite colorchange
            }

            #sidebar__menu-btn {
                background: 0 0;
                border: 0;
                color: #fff;
                font-size: 34px;
                display: none
            }

            #sidebar,.features__list {
                background-color: #1F1F1F
            }

            #sidebar {
                width: 300px;
                padding: 1.5rem
            }

            .sidebar__menu {
                padding: 0;
                margin: 0
            }

            .sidebar__header {
                line-height: 3.5rem;
                min-height: 3.5rem;
                color: #fff
            }

            .sidebar__nav-item {
                padding: 10px 0;
                margin: 0;
                list-style: none;
                color: #021425;
                text-transform: capitalize;
                letter-spacing: .6px;
                line-height: 2.0625
            }

            .sidebar__nav-link {
                cursor: pointer;
                text-decoration: none;
                color: #fff
            }

            #features {
                width: 100%;
                padding: 50px 0 0
            }

            .features__list {
                margin: -100px auto 0;
                padding: 20px 20px 10px;
                border: 5px solid yellow;
                background: linear-gradient(to bottom, yellow, #9E9E00);
                border-radius: 15px
            }

            .features__highlight__title {
                margin-top: 25px
            }

            .feature__item {
                padding: 0 10px
            }

            .features__divider::before {
                display: block;
                height: 3px;
                background-color: #FFFF00;
                content: " ";
                width: 70%;
                margin: 0 auto;
                border-radius: 50%
            }

            .product-feature,.product-features__content .product-features__heading {
                margin-bottom: 40px
            }

            #features ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: 0;
                padding: 0;
                width: 100%
            }

            #features ul li {
                list-style: square;
                margin-bottom: 10px;
                flex-basis: 15%
            }

            #features ul li img {
                border-radius: 4px
            }

            .features__highlight {
                padding: 20px 50px 50px
            }

            #tour p {
                margin-top: 50px;
                color: #8f8f91
            }

            #product-features {
                background: #03112d;
                border-top: 3px solid #9E9E00
            }

            #product-features>div {
                flex-direction: row
            }

            .product-features__graphic img {
                max-width: 90%;
                text-align: center
            }

            .product-features__heading h3 {
                font-size: 2rem;
                margin-bottom: 10px
            }

            .product-feature .product-feature__graphic {
                width: 120px;
                margin: 0
            }

            .product-feature__graphic img {
                max-width: 100%
            }

            .product-feature>div {
                margin-left: 30px
            }

            .product-feature>div h4 {
                font-size: 1.25rem;
                margin-bottom: 15px
            }

            #demo-cta {
                padding: 50px
            }

            footer {
                background-color: #000000;
                color: #fff
            }

            footer a:hover {
                color: #9E9E00;
                text-decoration: underline
            }

            .footer-item ul li,.footer-item ul li a {
                color: #566584;
                font-size: 13px
            }

            footer .footer-menu {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap
            }

            .footer-item {
                flex: 1;
                text-align: left;
                flex-basis: 200px
            }

            .footer-item .title {
                font-size: 140%;
                font-weight: 700;
                text-align: left;
                color: #778bc5
            }

            .footer-item .title::after {
                background-color: #ebebeb;
                content: " ";
                width: 50px;
                margin-left: 0
            }

            .footer-item ul {
                display: flex;
                flex-direction: column;
                margin-top: 10px;
                padding: 0
            }

            .footer-item ul li {
                list-style: none;
                margin-bottom: 5px
            }

            footer .social {
                display: flex;
                justify-content: center;
                margin: 20px
            }

            footer .social ul {
                display: flex;
                flex-direction: row;
                margin-top: 10px;
                padding: 0
            }

            footer .social ul li {
                list-style: none;
                margin-left: 10px;
                margin-right: 10px
            }

            footer .social ul li a {
                color: #ebebeb;
                font-size: 16px
            }

            footer .meta-content {
                font-size: 14px;
                margin-top: auto;
                margin-bottom: 15px
            }

            .table {
                width: 100%;
                border-right: 1px solid rgba(255,255,255,.15);
                border-top: 1px solid rgba(255,255,255,.15)
            }

            .table tr td {
                border-left: 1px solid rgba(255,255,255,.15);
                border-bottom: 1px solid rgba(255,255,255,.15);
                padding: 5px
            }

            .table tr:nth-child(2n) td {
                background: rgba(3,17,45,.35)
            }

            @media only screen and (max-width: 1450px) {
                #hero {
                    min-height:820px;
                }

                .hero__body {
                    height: 75%
                }

                h1 {
                    font-size: 2.8em
                }

                #features ul li {
                    flex-basis: 32%
                }

                .features__list {
                    margin-top: -80px;
                    padding: 20px 20px 10px
                }

                .features__list .feature__item {
                    padding: 0 5px
                }
            }

            @media only screen and (max-width: 1030px) {
                .content-width {
                    width:85%
                }

                h1 {
                    font-size: 2em;
                    margin-top: 100px;
                }

                h2 {
                    font-size: 1.8em
                }

                h3 {
                    font-size: 1.2em
                }

                nav.hide-mobile {
                    display: none
                }

                .features__highlight {
                    padding: 50px 30px
                }
            }

            @media only screen and (max-width: 768px) {
                .feature__item,.footer-item,.product-features__graphic {
                    margin-bottom:30px
                }

                .hero__menu nav a {
                    margin-left: 20px
                }

                .section-padding {
                    padding: 50px 0
                }

                .btn {
                    padding: 10px 20px
                }

                #product-features>div {
                    flex-direction: column
                }

                .product-features__content,.product-features__graphic {
                    width: 100%
                }

                .product-features__graphic img {
                    max-width: 95%;
                    margin: 0 auto
                }

                .product-features__heading h3 {
                    font-size: 1.5em
                }

                footer .footer-menu {
                    justify-content: flex-start
                }

                .footer-item {
                    flex-shrink: 0;
                    flex-grow: 0;
                    flex-basis: 50%
                }
            }

            @media only screen and (max-width: 600px) {
                .logo,.product-feature .product-feature__graphic {
                    width:200px
                }

                * {
                    font-size: 14px;
                    line-height: 160%
                }

                .logo {
                    margin-left: 15px;
                    margin-right: 0
                }

                .content-width {
                    width: 90%
                }

                #hero {
                    min-height: 720px;
                }

                #hero .hero__header .content-width {
                    margin: 0
                }

                #logo {
                    width: 50%
                }

                #hero header nav,.hero__header__cta {
                    display: none
                }

                #sidebar__menu-btn {
                    display: inline;
                    margin-right: 15px;
                    z-index: 1
                }

                .hero__body {
                    flex: 1;
                    padding: 40px 0
                }

                .hero__body .hero__content {
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                    padding-top: 0px
                }

                .hero__body .hero__content>div {
                    width: 100%;
                    text-align: center;
                    margin-top: 20px
                }

                #features ul li {
                    flex-basis: 48%
                }

                .features__list {
                    margin-top: -60px
                }

                h1 {
                    font-size: 1.7em;
                    margin-top: 1em
                }

                h2 {
                    font-size: 1.5em;
                    margin-bottom: 1em
                }

                h3 {
                    font-size: 1.2em
                }

                .features__highlight {
                    padding: 50px 10px
                }

                #footer-content {
                    width: 90%;
                    text-align: center
                }

                #footer-content p {
                    margin-bottom: .5em
                }
            }

.provider-box {
  width: 250px;
  max-width: 250px;
}
        .provider-img {
  border: 5px solid #ffff00;
  border-radius: 15px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ===== Tambahan non-AMP + efek premium gaming ===== */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  padding-bottom: 78px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 0, .10), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(255, 0, 0, .08), transparent 24%);
}

.hero__header {
  box-shadow: 0 0 22px rgba(255, 255, 0, .32);
}

.logo {
  width: 150px;
  max-width: 150px;
}

.site-logo-img,
.hero__logo {
  width: 150px;
  height: auto;
  display: block;
}

.hero__content {
  gap: 32px;
  align-items: center;
}

.hero-image-col {
  position: relative;
  overflow: visible;
}

.hero-main-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 4px solid #ffff00;
  border-radius: 22px;
  box-shadow: 0 0 18px rgba(255, 255, 0, .70), 0 0 44px rgba(255, 0, 0, .22);
  animation: heroSlideIn 1.05s cubic-bezier(.18,.85,.32,1.18) both, heroBorderPulse 2.4s ease-in-out infinite 1.1s;
}

.hero-image-col::after {
  content: "";
  position: absolute;
  inset: 0;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 22px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.05) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.05) 65%, transparent 100%);
  transform: translateX(-140%);
  animation: heroShine 2.8s ease-in-out 1.05s infinite;
  pointer-events: none;
}

@keyframes heroSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-90px) scale(.94);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes heroShine {
  0% { transform: translateX(-140%); opacity: 0; }
  18% { opacity: .85; }
  48%, 100% { transform: translateX(140%); opacity: 0; }
}

@keyframes heroBorderPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,255,0,.60), 0 0 38px rgba(255,0,0,.18); }
  50% { box-shadow: 0 0 28px rgba(255,255,0,1), 0 0 70px rgba(255,0,0,.35); }
}

.hero-copy h1 {
  text-shadow: 0 0 12px rgba(255,255,0,.34), 0 4px 18px rgba(0,0,0,.9);
}

.btn,
.login-join a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::before,
.login-join a::before {
  content: "";
  position: absolute;
  inset: -35% auto -35% -60%;
  width: 42%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-18deg);
  animation: buttonShine 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes buttonShine {
  0%, 35% { left: -65%; opacity: 0; }
  45% { opacity: .9; }
  68%, 100% { left: 130%; opacity: 0; }
}

.daftar-glow {
  color: #000 !important;
  background: linear-gradient(180deg, #ffff00 0%, #d6c900 48%, #8f8f00 100%) !important;
  border: 2px solid #ffff00 !important;
  box-shadow: 0 0 12px rgba(255,255,0,.80), 0 0 30px rgba(255,255,0,.45), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.25) !important;
  animation: daftarBlink 1.12s ease-in-out infinite, daftarPulse 2.2s ease-in-out infinite;
}

@keyframes daftarBlink {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255,255,0,.70), 0 0 24px rgba(255,255,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  }
  50% {
    box-shadow: 0 0 24px rgba(255,255,0,1), 0 0 55px rgba(255,255,0,.75), 0 0 90px rgba(255,255,0,.28), inset 0 1px 0 rgba(255,255,255,.75);
  }
}

.btn--primary:hover,
.btn--secondary:hover,
.login-join a:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.sidebar-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(320px, 86vw) !important;
  background: linear-gradient(180deg, #080808, #1f1f1f) !important;
  border-left: 2px solid #ffff00;
  box-shadow: -18px 0 45px rgba(0,0,0,.62), 0 0 20px rgba(255,255,0,.32);
  transform: translateX(110%);
  transition: transform .28s ease;
  z-index: 5000;
}

body.sidebar-open .sidebar-panel {
  transform: translateX(0);
}

body.sidebar-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  z-index: 4999;
}

.sidebar-close-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #111;
  color: #ffff00;
  border: 1px solid #ffff00;
}

.accordion section {
  border-bottom: 1px solid rgba(255,255,0,.22);
}

.accordion h4 {
  position: relative;
  cursor: pointer;
  padding: 12px 38px 12px 0;
  min-height: 46px;
}

.accordion .faq-answer {
  display: none;
  padding: 0 0 16px;
}

.accordion section[expanded] .faq-answer {
  display: block;
}

.provider-box {
  margin: 0 auto;
}

.provider-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.provider-box:hover .provider-img {
  transform: translateY(-5px) scale(1.035);
  filter: brightness(1.08);
  box-shadow: 0 0 22px rgba(255,255,0,.8), 0 0 40px rgba(255,0,0,.24);
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  margin: 0 auto;
  text-align: left;
  border: 1px solid #ffff00;
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 18px rgba(255,255,0,.18);
}

.info-table td {
  padding: 9px;
  border: 1px solid rgba(255,255,0,.55);
}

.features__highlight h2,
.features__highlight h3 {
  text-align: center;
}

.reveal-card {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media only screen and (max-width: 600px) {
  body { padding-bottom: 74px; }
  .hero__content { gap: 10px; }
  .hero-main-img { border-radius: 16px; }
  .hero-image-col::after { border-radius: 16px; }
  .login-join a { padding: 12px 0; }
}
/* Provider / Game Image 1 Baris Responsif */
#features ul {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  margin: 0;
  align-items: stretch;
}

#features ul li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  flex-basis: auto !important;
  width: 100%;
  min-width: 0;
}

.provider-box {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1;
}

.provider-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 5px solid #ffff00;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Agar kotaknya tidak membuat gambar turun ke bawah */
.features__list {
  overflow: hidden;
}
/* Desktop / Tablet besar: 1 baris 6 gambar */
#features ul {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  margin: 0;
}

#features ul li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-width: 0;
}

.provider-box {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1;
}

.provider-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 4px solid #ffff00;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Mobile: jadi 2 baris, masing-masing 3 gambar */
@media only screen and (max-width: 600px) {
  #features ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .features__list {
    padding: 14px;
    border-radius: 14px;
  }

  .provider-img {
    border-width: 3px;
    border-radius: 5px;
  }
}/* Review Pemain */
.player-review-section {
  width: 100%;
  margin: 45px auto 20px;
  padding: 24px;
  border: 2px solid #ffff00;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 0, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(0,0,0,0.88), rgba(35,35,20,0.94));
  box-shadow: 0 0 18px rgba(255, 255, 0, 0.35);
}

.review-title {
  text-align: center;
  color: #ffff00;
  font-size: 24px;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
}

.review-subtitle {
  text-align: center;
  color: #ffffff;
  margin-bottom: 24px;
  font-size: 15px;
}

.review-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.review-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(255, 255, 0, 0.45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(18,18,18,0.96), rgba(42,42,18,0.92));
  box-shadow: inset 0 0 12px rgba(255,255,0,0.08), 0 0 10px rgba(0,0,0,0.55);
}

.review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  animation: reviewShine 5s infinite;
}

.review-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.review-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: 2px solid #ffff00;
  object-fit: cover;
  background: #000;
  box-shadow: 0 0 8px rgba(255,255,0,0.7);
}

.review-header h4 {
  margin: 0;
  color: #ffff00;
  font-size: 16px;
  line-height: 1.2;
}

.review-header span {
  display: block;
  color: #d8d8d8;
  font-size: 12px;
  margin-top: 2px;
}

.review-card p {
  position: relative;
  z-index: 1;
  color: #f5f5f5;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 10px;
}

.review-stars {
  position: relative;
  z-index: 1;
  color: #ffff00;
  font-size: 20px;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(255,255,0,0.85);
}

@keyframes reviewShine {
  0% {
    left: -120%;
  }
  45% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

/* Mobile */
@media only screen and (max-width: 600px) {
  .player-review-section {
    padding: 16px;
    margin-top: 35px;
    border-radius: 14px;
  }

  .review-title {
    font-size: 20px;
  }

  .review-subtitle {
    font-size: 13px;
  }

  .review-card {
    padding: 15px;
  }

  .review-card p {
    font-size: 14px;
  }

  .review-stars {
    font-size: 18px;
  }
}/* Samakan lebar kolom review dengan isi artikel */
.player-review-section.content-width {
  width: 70%;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Supaya review tidak full layar */
.player-review-section {
  width: auto;
}

/* Tablet */
@media only screen and (max-width: 1030px) {
  .player-review-section.content-width {
    width: 85%;
    max-width: 85%;
  }
}

/* Mobile */
@media only screen and (max-width: 600px) {
  .player-review-section.content-width {
    width: 90%;
    max-width: 90%;
  }
}