:root {--panel: #141425;--panel1: #1c1c31;--red: #ff0000;--bg1: #2a2a44;--bg2: #222236;--bg3: #17172a;--bg4: #10101c;--bg5: #08081a;--text0: #ffffff;--text1: #e9e9e9;--text2: #bdbdbd;--accent1: #957fff;--accent2: #7c4dff;--accent3: #88ff00;--glass1: rgba(255, 255, 255, 0.05);--glass2: rgba(255, 255, 255, 0.15);--glass3: rgba(0, 0, 0, 0.2);--glass4: rgba(0, 0, 0, 0.4);--glass5: rgba(0, 0, 0, 0.6);}
body {margin: 0;font-family: Arial, sans-serif;background: var(--bg4);color: var(--text2);line-height: 1.5;}
a {text-decoration: none;}
header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;background: var(--panel);position: sticky;top: 0;z-index: 100;border-bottom: 1px solid var(--accent1);}
header .logo {width: 150px;display: flex;align-items: center;}
header .logo img {width: 100%;height: auto;object-fit: contain;}
.header-items {display: flex;gap: 20px;font-weight: normal;}
.header-items a {color: var(--text2);padding: 6px 10px;border-radius: 5px;transition: transform 0.3s, color 0.3s;position: relative;}
.header-items a:hover {color: var(--accent1);animation: pulse 0.6s infinite;cursor: pointer;}
@keyframes pulse {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}}
.menu-btn {display: none;font-size: 22px;color: var(--accent1);cursor: pointer;}
.wrap { width:1200px; max-width:95%; margin:auto; }
#malaysia-time {font-size:0.8rem;color:var(--text2);}
.marquee-wrap {padding: 10px 0;display: flex;gap: 10px;align-items: center;border-radius: 8px;margin-top: 10px;position: relative;overflow: hidden;}
.marquee-left {white-space: nowrap;color: var(--accent1);}
.marquee {overflow: hidden;white-space: nowrap;width: 100%;color: var(--accent1);}
.marquee span {display: inline-block;padding-left: 100%;animation: marq 12s linear infinite;}
@keyframes marq {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}
.marquee:hover span {animation-play-state: paused;}
.hero-grid {margin: 10px 0;display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
.hero-left {padding: 10px 12px;background: var(--bg2);border-radius: 10px;border-bottom:2px solid var(--accent1);display: flex;flex-direction: column;justify-content: flex-start;gap: 8px;}
.hero-left h1 {font-family:"Orbitron",sans-serif;color: var(--accent1);margin: 0;font-size: 24px;}
.hero-left p {margin: 0;font-size: 14px;line-height: 1.4;}
.hero-left a {color: var(--accent1);}
.hero-right {background: var(--bg2);border-bottom:2px solid var(--accent1);border-radius: 10px;overflow: hidden;}
.slider {position: relative;width: 105%;height: 280px;border-radius: 10px;overflow: hidden;}
.slider img {width: 100%;height: 100%;object-fit: cover;position: absolute;opacity: 0;transition: 0.6s;}
.slider img.active {opacity: 1;}
.slider .prev, .slider .next {position: absolute;top: 50%;transform: translateY(-50%);font-size: 30px;color: var(--text0);cursor: pointer;z-index: 10;padding: 10px;}
.slider .prev:hover, .slider .next:hover {color: var(--accent1);transform: translateY(-50%);}
.slider .prev {left: 0px;}
.slider .next {right: 30px;}
.under-auth {display: flex;gap: 15px;margin-top: 10px;}
.under-auth button {padding: 12px 24px;border-radius: 8px;font-weight: 600;cursor: pointer;font-size: 16px;font-family:"Orbitron",sans-serif;}
.btn-login {background: transparent;color: var(--text2);border: 1px solid var(--accent1);}
.btn-login:hover {background: linear-gradient(135deg, var(--accent2), var(--accent1));color: var(--bg5);border: 1px solid var(--panel);}
.btn-register {background: linear-gradient(135deg, var(--accent1), var(--accent2));color: var(--bg5);border: 1px solid var(--panel);}
.btn-register:hover {background: transparent;color: var(--text2);border: 1px solid var(--accent1);}
.btn-whatsapp{background: var(--accent3);color: var(--bg5);border: 1px solid var(--text0);}
.btn-whatsapp:hover{background: transparent;color: var(--accent3);border: 1px solid var(--accent3);}
.header-whatsapp{display: none;}
.faq {margin: 10px 0;background: var(--bg2);padding: 20px;border-radius: 10px;border-bottom: 2px solid var(--accent1);}
.faq details{ background: var(--glass5);}
.faq-divider {height: 2px;background: var(--accent1);margin: 20px 0;border-radius: 2px;}
.faq-divider-dashed {height: 1px;border-bottom: 2px dashed var(--accent1);margin: 20px 0;}
.faq h1, .faq h2, .faq h3 {color: var(--accent1);font-family: "Orbitron", sans-serif;margin-bottom: 5px;padding-bottom: 5px;font-size: 20px;line-height: 1.0;}
details {margin-bottom: 10px;cursor: pointer;padding: 10px;border-radius: 6px;transition: 0.3s;color: var(--text2);font-size: 16px;line-height: 1.8;}
details:hover {background: var(--glass5);color: var(--accent1);}
.faq p {color: var(--text2);font-size: 15px;line-height: 1.3;margin-top: 10px;}
.sidebar-nav {position: fixed;top: 0;left: 0;width: 260px;height: 100%;background: var(--panel);padding: 20px;transform: translateX(-100%);transition: transform 0.3s ease;overflow-y: auto;z-index: 200;border-right: 1px solid var(--accent1);}
.sidebar-nav.show {transform: translateX(0);}
.sidebar-nav a {display: flex;align-items: center;gap: 10px;color: var(--text2);padding: 10px;border-radius: 6px;transition: 0.3s;border-bottom: 1px solid transparent;}
.sidebar-nav a:hover {background: var(--glass3);color: var(--accent1);transform: scale(1.03);border-bottom: 1px solid var(--accent1);}
.sidebar-nav .divider {border-bottom: 1px solid var(--accent1);margin: 10px 0;}
.fa-animate {transition: 0.4s;}
.fa-animate:hover {transform: rotate(20deg) scale(1.3);color: var(--text0);}
#translatePopup {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: var(--glass5);display: flex;justify-content: center;align-items: center;z-index: 300;}
#translatePopup .popup-content {background: var(--glass5);backdrop-filter: blur(10px);border-bottom: 3px solid var(--accent1);padding: 30px;border-radius: 20px;text-align: center;}
.lang-img {width: 70px;margin: 10px;cursor: pointer;border-radius: 10px;transition: 0.3s;}
.lang-img:hover {transform: scale(1.1);}
.top-footer{background:var(--panel);padding:28px 12px;box-sizing:border-box;transition:all 0.3s ease;}
.top-footer a {color: var(--accent1);}
.top-footer .container{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:24px;will-change:transform;backface-visibility:hidden;transform:translateZ(0);transition:all 0.3s ease;}
.footer-top-row,.footer-bottom-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;will-change:transform;backface-visibility:hidden;transform:translateZ(0);transition:all 0.3s ease;}
.footer-col{display:flex;flex-direction:column;gap:5px;flex:1;transition:all 0.3s ease;}
.footer-col .title{font-family:Orbitron,sans-serif;font-weight:700;font-size:17px;color:var(--accent1);display:flex;align-items:center;gap:6px;transition:all 0.3s ease;}
.footer-col .content-text{color:var(--text2);max-width:300px;display:block;padding:5px;transition:all 0.3s ease;}
.footer-col .content-text img{max-width:150px;height:auto;border-radius:8px;display:block;margin:0;transition:all 0.3s ease;}
.icon-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start;padding:0 4px;transition:all 0.3s ease;}
.icon-row img{cursor:pointer;object-fit:contain;display:block;filter:none;transition:all 0.3s ease;}
.cm-image{max-width:370px;height:auto;border-radius:8px;transition:all 0.3s ease;}
.security-ftrmerge img{width:90px;height:40px;transition:all 0.3s ease;}
.paymentMethod-ftrmerge img{width:40px;height:36px;transition:all 0.3s ease;}
.responsibleGaming-ftrmerge img{width:45px;height:36px;transition:all 0.3s ease;}
.license-ftrmerge img{width:60px;height:40px;transition:all 0.3s ease;}

@media(max-width:900px){
.hero-grid { grid-template-columns:1fr; }
.slider {position: relative;width: 100%;height: 175px;}
.slider .prev {left: 0px;}
.slider .next {right: 0px;}
.menu-btn { display:block; }
.header-items { display:none; }
.btn-whatsapp{display: none;}
.header-whatsapp {display: flex;align-items: center;justify-content: center;position: absolute;right: 40px;top: 50%;transform: translateY(-50%);padding: 4px 16px;border-radius: 10px;font-weight: 800;cursor: pointer;z-index: 150;transition: all 0.3s ease;}
.header-whatsapp:hover {color: var(--accent3);}
.header-whatsapp i {font-size: 30px;margin-right: 10px;color: var(--accent3);}
.footer-top-row,.footer-bottom-row{flex-direction:column;align-items:flex-start;gap:10px;transition:all 0.3s ease;}}