:root {
                               --bg-main: #0a0b0d;
                               --bg-card: #121418;
                               --bg-panel: #1a1d24;
                               --yellow-primary: #00ff22;
                               --yellow-glow: rgba(255, 204, 0, 0.4);
                               --text-main: #e0e6ed;
                               --text-muted: #94a3b8;
                               --border-mecha: #2a2f3a;
                               --font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
                           }

                           * {
                               box-sizing: border-box;
                               margin: 0;
                               padding: 0;
                           }

                           body {
                               background-color: var(--bg-main);
                               color: var(--text-main);
                               font-family: var(--font-family);
                               line-height: 1.6;
                               padding: 20px 10px;
                           }

                           /* Container Utama Mecha UI */
                           .mecha-container {
                               max-width: 900px;
                               margin: 0 auto;
                               background: var(--bg-card);
                               border: 1px solid var(--border-mecha);
                               border-top: 4px solid var(--yellow-primary);
                               border-radius: 8px;
                               box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 204, 0, 0.15);
                               padding: 30px;
                               position: relative;
                               overflow: hidden;
                           }

                           /* EFEK CAHAYA PUTIH GLOSSY LEWAT */
                           .mecha-container::after {
                               content: '';
                               position: absolute;
                               top: -50%;
                               left: -150%;
                               width: 50%;
                               height: 200%;
                               background: linear-gradient(to right,
                                       rgba(255, 255, 255, 0) 0%,
                                       rgba(255, 255, 255, 0.25) 50%,
                                       rgba(255, 255, 255, 0) 100%);
                               transform: rotate(30deg);
                               animation: glossySweep 5s infinite ease-in-out;
                               pointer-events: none;
                           }

                           @keyframes glossySweep {
                               0% {
                                   left: -150%;
                               }

                               30% {
                                   left: 150%;
                               }

                               100% {
                                   left: 150%;
                               }
                           }

                           /* System Decal Tag */
                           .mecha-container::before {
                               content: 'SYSTEM ONLINE // SECURE DATA';
                               position: absolute;
                               top: 8px;
                               right: 15px;
                               font-size: 10px;
                               color: var(--yellow-primary);
                               letter-spacing: 2px;
                               font-weight: bold;
                               opacity: 0.8;
                           }

                           /* Header Title */
                           .mecha-header {
                               border-bottom: 2px solid var(--border-mecha);
                               padding-bottom: 15px;
                               margin-bottom: 25px;
                           }

                           .mecha-title {
                               color: var(--yellow-primary);
                               font-size: 1.6rem;
                               font-weight: 800;
                               text-transform: uppercase;
                               letter-spacing: 1px;
                               text-shadow: 0 0 10px var(--yellow-glow);
                           }

                           /* Section Headings */
                           .mecha-section-title {
                               color: var(--yellow-primary);
                               font-size: 1.3rem;
                               margin-bottom: 20px;
                               text-transform: uppercase;
                               letter-spacing: 1px;
                               display: flex;
                               align-items: center;
                               gap: 10px;
                           }

                           .mecha-section-title::before {
                               content: '';
                               display: inline-block;
                               width: 10px;
                               height: 10px;
                               background: var(--yellow-primary);
                               box-shadow: 0 0 8px var(--yellow-primary);
                           }

                           /* Article Styling */
                           .mecha-article p {
                               margin-bottom: 18px;
                               color: var(--text-main);
                               font-size: 0.98rem;
                               text-align: justify;
                           }

                           .mecha-article strong {
                               color: var(--yellow-primary);
                           }

                           /* Divider */
                           .mecha-divider {
                               height: 1px;
                               background: linear-gradient(90deg, transparent, var(--yellow-primary), transparent);
                               margin: 35px 0;
                           }

                           .review-carousel-wrapper {
                               position: relative;
                               margin-bottom: 10px;
                           }

                           .review-carousel {
                               display: flex;
                               gap: 15px;
                               overflow-x: auto;
                               scroll-behavior: smooth;
                               padding-bottom: 15px;
                               scrollbar-width: thin;
                               scrollbar-color: var(--yellow-primary) var(--bg-panel);
                           }

                           .review-carousel::-webkit-scrollbar {
                               height: 6px;
                           }

                           .review-carousel::-webkit-scrollbar-track {
                               background: var(--bg-panel);
                               border-radius: 4px;
                           }

                           .review-carousel::-webkit-scrollbar-thumb {
                               background: var(--yellow-primary);
                               border-radius: 4px;
                           }

                           .review-card {
                               min-width: 280px;
                               max-width: 320px;
                               background: var(--bg-panel);
                               border: 1px solid var(--border-mecha);
                               border-left: 3px solid var(--yellow-primary);
                               border-radius: 6px;
                               padding: 18px;
                               flex-shrink: 0;
                               display: flex;
                               flex-direction: column;
                               justify-content: space-between;
                               transition: transform 0.3s ease, border-color 0.3s ease;
                           }

                           .review-card:hover {
                               transform: translateY(-3px);
                               border-color: var(--yellow-primary);
                           }

                           .review-text {
                               font-size: 0.9rem;
                               color: var(--text-main);
                               font-style: italic;
                               margin-bottom: 12px;
                           }

                           .review-author {
                               font-size: 0.85rem;
                               font-weight: bold;
                               color: var(--yellow-primary);
                               text-align: right;
                           }

                           /* Carousel Navigation Buttons */
                           .carousel-nav {
                               display: flex;
                               justify-content: flex-end;
                               gap: 10px;
                               margin-top: 10px;
                           }

                           .nav-btn {
                               background: var(--bg-panel);
                               border: 1px solid var(--border-mecha);
                               color: var(--yellow-primary);
                               width: 35px;
                               height: 35px;
                               border-radius: 4px;
                               cursor: pointer;
                               font-weight: bold;
                               transition: background 0.2s, border-color 0.2s;
                           }

                           .nav-btn:hover {
                               background: var(--yellow-primary);
                               color: #000;
                               border-color: var(--yellow-primary);
                           }

                           .faq-item {
                               background: var(--bg-panel);
                               border: 1px solid var(--border-mecha);
                               border-radius: 4px;
                               margin-bottom: 12px;
                               overflow: hidden;
                               transition: border-color 0.3s ease;
                           }

                           .faq-item:hover {
                               border-color: var(--yellow-primary);
                           }

                           .faq-question {
                               width: 100%;
                               background: none;
                               border: none;
                               outline: none;
                               padding: 16px 20px;
                               color: #fff;
                               font-size: 0.95rem;
                               font-weight: 600;
                               text-align: left;
                               cursor: pointer;
                               display: flex;
                               justify-content: space-between;
                               align-items: center;
                               transition: background 0.3s ease;
                           }

                           .faq-question:hover {
                               background: rgba(255, 204, 0, 0.05);
                           }

                           .faq-icon {
                               width: 22px;
                               height: 22px;
                               background: var(--yellow-primary);
                               color: #000;
                               border-radius: 50%;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                               font-weight: bold;
                               font-size: 14px;
                               transition: transform 0.3s ease;
                               flex-shrink: 0;
                           }

                           .faq-answer {
                               max-height: 0;
                               overflow: hidden;
                               transition: max-height 0.35s ease-out, padding 0.35s ease;
                               background: #15171c;
                               padding: 0 20px;
                               color: var(--text-muted);
                               font-size: 0.92rem;
                           }

                           /* Active Accordion State */
                           .faq-item.active .faq-answer {
                               max-height: 200px;
                               padding: 15px 20px;
                               border-top: 1px solid var(--border-mecha);
                           }

                           .faq-item.active .faq-icon {
                               transform: rotate(45deg);
                               background: #ff4444;
                               color: #fff;
                           }

                           .faq-item.active {
                               border-color: var(--yellow-primary);
                               box-shadow: inset 3px 0 0 var(--yellow-primary);
                           }

                           /* Responsive Adjustments */
                           @media (max-width: 600px) {
                               .mecha-container {
                                   padding: 20px 15px;
                               }

                               .mecha-title {
                                   font-size: 1.3rem;
                               }

                               .review-card {
                                   min-width: 240px;
                               }
                           }

                           .mecha-generator-section {
                               background: #121418;
                               border: 1px solid #2a2f3a;
                               border-top: 3px solid #00ff22;
                               border-radius: 6px;
                               padding: 25px;
                               margin: 20px 0;
                               position: relative;
                               overflow: hidden;
                               font-family: 'Segoe UI', Roboto, sans-serif;
                               color: #e0e6ed;
                           }

                           /* Efek Cahaya Glossy Lewat */
                           .mecha-generator-section::after {
                               content: '';
                               position: absolute;
                               top: -50%;
                               left: -150%;
                               width: 50%;
                               height: 200%;
                               background: linear-gradient(to right,
                                       rgba(255, 255, 255, 0) 0%,
                                       rgba(255, 255, 255, 0.15) 50%,
                                       rgba(255, 255, 255, 0) 100%);
                               transform: rotate(30deg);
                               animation: glossySweepGen 6s infinite ease-in-out;
                               pointer-events: none;
                           }

                           @keyframes glossySweepGen {
                               0% {
                                   left: -150%;
                               }

                               30% {
                                   left: 150%;
                               }

                               100% {
                                   left: 150%;
                               }
                           }

                           .mecha-gen-title {
                               color: #00ff22;
                               font-size: 1.2rem;
                               font-weight: 800;
                               text-transform: uppercase;
                               letter-spacing: 1px;
                               margin-bottom: 20px;
                               display: flex;
                               align-items: center;
                               gap: 8px;
                               text-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
                           }

                           .mecha-gen-title::before {
                               content: '';
                               display: inline-block;
                               width: 8px;
                               height: 8px;
                               background: #00ff22;
                               box-shadow: 0 0 6px #00ff22;
                           }

                           /* Control Panel Layout */
                           .gen-controls {
                               display: flex;
                               flex-wrap: wrap;
                               gap: 15px;
                               margin-bottom: 20px;
                           }

                           .gen-group {
                               flex: 1;
                               min-width: 200px;
                           }

                           .gen-group label {
                               display: block;
                               font-size: 0.8rem;
                               color: #94a3b8;
                               text-transform: uppercase;
                               letter-spacing: 1px;
                               margin-bottom: 6px;
                               font-weight: bold;
                           }

                           .gen-select {
                               width: 100%;
                               background: #1a1d24;
                               border: 1px solid #2a2f3a;
                               color: #00ff22;
                               padding: 10px 12px;
                               border-radius: 4px;
                               font-size: 0.95rem;
                               font-weight: bold;
                               outline: none;
                               cursor: pointer;
                               transition: border-color 0.3s;
                           }

                           .gen-select:focus,
                           .gen-select:hover {
                               border-color: #00ff22;
                           }

                           .gen-btn {
                               background: #00ff22;
                               color: #000;
                               border: none;
                               padding: 10px 20px;
                               font-size: 0.95rem;
                               font-weight: 800;
                               text-transform: uppercase;
                               letter-spacing: 1px;
                               border-radius: 4px;
                               cursor: pointer;
                               transition: all 0.2s ease;
                               box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
                               align-self: flex-end;
                               height: 42px;
                           }

                           .gen-btn:hover {
                               background: #ffe066;
                               box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
                               transform: translateY(-1px);
                           }

                           .gen-btn:active {
                               transform: translateY(1px);
                           }

                           /* Result Box Display */
                           .gen-result-container {
                               background: #0a0b0d;
                               border: 1px dashed #2a2f3a;
                               border-radius: 6px;
                               padding: 20px;
                               text-align: center;
                               position: relative;
                           }

                           .gen-market-badge {
                               position: absolute;
                               top: 8px;
                               left: 12px;
                               font-size: 0.75rem;
                               color: #94a3b8;
                               letter-spacing: 1px;
                               text-transform: uppercase;
                           }

                           .gen-number-display {
                               display: flex;
                               justify-content: center;
                               gap: 12px;
                               margin-top: 15px;
                           }

                           .num-ball {
                               width: 45px;
                               height: 45px;
                               background: #1a1d24;
                               border: 2px solid #00ff22;
                               color: #fff;
                               font-size: 1.3rem;
                               font-weight: 800;
                               border-radius: 50%;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                               box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
                               transition: transform 0.2s ease;
                           }

                           .num-ball.spin {
                               animation: mechaPulse 0.15s infinite alternate;
                           }

                           @keyframes mechaPulse {
                               0% {
                                   transform: scale(0.95);
                                   opacity: 0.8;
                               }

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

                           @media (max-width: 600px) {
                               .mecha-generator-section {
                                   padding: 15px;
                               }

                               .gen-btn {
                                   width: 100%;
                               }

                               .num-ball {
                                   width: 38px;
                                   height: 38px;
                                   font-size: 1.1rem;
                               }
                           }