: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:#6a3be0;--accent4:#5329b3;--accent5:#3a1f8c;--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);}
*{box-sizing:border-box;margin:0;padding:0;transition:all 0.3s ease;}
html,body{overflow-x:hidden;height:100%;scroll-behavior:smooth;}
body{background:var(--panel1);color:var(--text2);font-family:Inter,system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background 0.3s ease,color 0.3s ease,font-size 0.3s ease;}
.main-container{min-height:100%;transition:min-height 0.3s ease;}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px;transition:padding 0.3s ease,max-width 0.3s ease;}
.header{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--accent2);z-index:90;transition:background 0.3s ease,border-color 0.3s ease;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;transition:all 0.3s ease;}
.logo{width:170px;height:50px;transition:width 0.3s ease,height 0.3s ease;}
.left{display:flex;align-items:center;gap:20px;flex:1;transition:gap 0.3s ease;}
.right{display:flex;align-items:center;gap:10px;transition:gap 0.3s ease;}
.whatsappLink{text-decoration:none;color:var(--text2);transition:color 0.3s ease;}
.whatsappLink:hover{color:var(--accent1);}
.btn-outline{border:1px solid var(--accent2);color:var(--text2);padding:8px 13px;border-radius:12px;text-decoration:none;font-weight:600;position:relative;overflow:hidden;transition:all 0.3s ease;font-family:"Orbitron",sans-serif;}
.btn-outline::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--glass2);border-radius:12px;transition:left 0.4s ease;z-index:0;}
.btn-outline:hover::before{left:0;}
.btn-primary{font-family:"Orbitron",sans-serif;background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));color:var(--text2);padding:9px 14px;border-radius:10px;text-decoration:none;font-weight:700;transition:all 0.3s ease;}
.btn-primary:hover{color:var(--bg5);opacity:0.9;}
.hamb{display:none;background:none;border:0;margin-left:8px;cursor:pointer;transition:transform 0.3s ease;}
.hamb span{display:block;width:20px;height:2px;background:var(--panel);margin:4px 0;border-radius:2px;transition:background 0.3s ease;}
.topnav {display: flex;align-items: center;gap: 30px;margin: 0 auto;position: relative;z-index: 50;}
.nav:not(.dropdown) {position: relative;color: var(--text2);text-decoration: none;font-weight: bold;padding: 10px 2px;border-radius: 6px;transition: transform 0.3s ease;cursor: pointer;}
.nav:not(.dropdown):hover {color: var(--accent1);animation: pulseSoft 0.8s ease-in-out infinite;}
.nav:not(.dropdown):active {transform: scale(0.95);}
@keyframes pulseSoft {0% {transform: scale(1);}50% {transform: scale(1.08);}100% {transform: scale(1);}}

.sidebar,.sidebar-overlay{display:none;}
.sidebar{overflow-y:auto;}
.sidebar-image{margin-top:20px;width:100%;transition:all 0.3s ease;}
.sidebar-image img{width:100%;height:auto;border-radius:8px;display:block;transition:transform 0.3s ease,width 0.3s ease,height 0.3s ease;}

.translate-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--glass5);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:200;opacity:0;pointer-events:none;transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1);}
.translate-popup.active{opacity:1;pointer-events:auto;}
.translate-popup h2{color:var(--text1);text-align:center;margin-bottom:20px;font-size:2.1rem;opacity:0;transform:translateY(-10px);transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.5s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;gap:10px;}
.translate-popup h2 i{color:var(--accent1);font-size:2.1rem;}
.translate-popup.active h2{opacity:1;transform:translateY(0);}
.translate-buttons{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.5s cubic-bezier(0.4,0,0.2,1);}
.translate-popup.active .translate-buttons{opacity:1;transform:translateY(0);}
.translate-buttons button{background:none;border:none;padding:0;cursor:pointer;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),box-shadow 0.4s ease;}
.translate-buttons button img{width:70px;height:auto;display:block;border-radius:6px;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),box-shadow 0.4s ease;}
.translate-buttons button:hover img{transform:scale(1.15);}

.login-popup{position:fixed;top:0;left:0;width:100%;height:100%;display:none;background:var(--glass5);z-index:9999;overflow-y:auto;padding:40px 0;transition:opacity 0.35s ease,transform 0.35s ease;}
.login-popup-inner{margin:auto;background:linear-gradient(90deg,var(--bg1),var(--bg2),var(--bg3));border-radius:16px;width:600px;max-width:95%;padding:40px 35px;color:var(--text2);display:flex;flex-direction:column;align-items:center;position:relative;box-shadow:0 15px 40px var(--glass4);transition:box-shadow 0.3s ease,transform 0.3s ease;transform:translateY(0);}
.icon-close2{position:absolute;top:5px;right:15px;font-family:"Orbitron",sans-serif;font-size:30px;font-weight:900;color:var(--red);cursor:pointer;}
.icon-close2:hover{color:var(--text1);}
.login-logo{margin-bottom:30px;text-align:center;}
.login-logo img{display:block;margin:0 auto;width:200px;height:auto;transition:transform 0.3s ease;}
.login-form{display:flex;flex-direction:column;align-items:center;width:100%;}
.input-item{display:flex;align-items:center;width:100%;margin-bottom:18px;background:var(--bg3);border-radius:10px;padding:12px 15px;border:1px solid var(--accent5);transition:border-color 0.3s ease;}
.input-item:hover{border-color:var(--accent1);}
.input-item i{margin-right:12px;color:var(--text2);font-size:18px;}
.input-item input{flex:1;border:none;outline:none;background:transparent;color:var(--text2);font-size:16px;padding:8px 0;transition:color 0.3s ease;}
.input-item input:focus{color:var(--text2);}
.forgot-password{font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:22px;align-self:center;transition:color 0.2s ease;text-decoration:none;}
.forgot-password:hover{color:var(--accent1);}
.btn-login {width: 100%;padding: 14px;font-size: 1rem;background-color: var(--panel);color: var(--accent1);border: 1px solid var(--accent1);border-radius: 8px;cursor: pointer;transition: 0.3s;margin-top: 10px;font-family: 'Orbitron', sans-serif;}
.btn-login:hover:not(:disabled) {color: var(--text1);background-color: var(--panel1);border: 1px solid var(--text2);}
.btn-login:disabled {opacity: 0.5;cursor: not-allowed;}
.msg-error-div{color:var(--red);font-weight:700;font-size:14px;margin:12px 0;text-align:center;min-height:22px;opacity:0;max-height:0;overflow:hidden;transition:opacity 0.3s ease,max-height 0.3s ease;}
.msg-error-div.show{opacity:1;max-height:50px;}
._breakLineContainer{display:flex;align-items:center;width:100%;margin:25px 0;}
._breakLine{flex:1;height:1px;background:var(--text2);transition:background 0.3s ease;}
._breakLineSpan{margin:0 12px;font-size:12px;color:var(--text2);transition:color 0.3s ease;}
.whatsapp-container{width:100%;margin-bottom:20px;display:flex;justify-content:center;}
.btnText{font-family:"Orbitron",sans-serif;}
.whatsapp-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:50%;max-width:300px;background:transparent;border:2px solid var(--accent1);padding:12px 50px;border-radius:10px;color:var(--text2);cursor:pointer;font-weight:bold;font-size:16px;text-decoration:none;transition:all 0.3s ease;outline:none;}
.whatsapp-button i{font-size:20px;transition:transform 0.3s ease;}
.whatsapp-button:hover{border:2px solid var(--text1);background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));color:var(--accent1);}
.whatsapp-button:active i{transform:scale(1.2);transition:transform 0.2s ease;}
.msg-box{text-align:center;font-size:12px;color:var(--text2);transition:color 0.3s ease;}
.msg-box .line{height:1px;background:var(--text2);margin:10px 0;transition:background 0.3s ease;}

.slotdemo-section {padding: 40px 0;background: var(--bg3);font-family: sans-serif;transition: all 0.3s ease;}
.slotdemo-container {display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;gap: 32px;width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 18px;box-sizing: border-box;transition: all 0.3s ease;}
.slotdemo-left,.slotdemo-right {flex: 1 1 48%;background: var(--bg1);border-radius: 12px;padding: 24px;box-sizing: border-box;min-height: 100%;transition: all 0.3s ease;}
.slotdemo-title {font-size: 1.6rem;margin-bottom: 12px;font-weight: 600;color: var(--accent1);font-family: "Orbitron", sans-serif;transition: all 0.3s ease;}
.slotdemo-desc {color: var(--text2);line-height: 1.6;font-size: 1rem;transition: all 0.3s ease;}
.slotdemo-faq-title {font-size: 1.6rem;font-weight: 600;margin-bottom: 16px;color: var(--accent1);font-family: "Orbitron", sans-serif;transition: all 0.3s ease;}
.faq-item {border-bottom: 1px solid var(--glass2);margin-bottom: 10px;padding-bottom: 10px;transition: all 0.3s ease;}
.faq-question {width: 100%;background: none;border: none;color: var(--text2);font-size: 1rem;text-align: left;padding: 10px 0;display: flex;justify-content: space-between;align-items: center;cursor: pointer;transition: all 0.3s ease;}
.faq-question:hover {color: var(--accent1);transition: color 0.3s ease;}
.arrow {font-size: 1.1rem;transition: transform 0.3s ease;}
.faq-answer {display: none;color: var(--text2);padding: 8px 0 0 0;line-height: 1.6;font-size: 0.95rem;transition: all 0.3s ease;}
.faq-item.active .faq-answer {display: block;}
.faq-item.active .arrow {transform: rotate(180deg);transition: transform 0.3s ease;}

.live-tv-section {padding: 20px 0;box-sizing: border-box;}
.live-tv-header {max-width: 1200px;margin: 0 auto 16px auto;padding: 0 20px;text-align: left;display: flex;flex-direction: column;gap: 4px;}
.live-tv-header h1{color:var(--accent1);font-family:'Orbitron',sans-serif;font-size:2rem;margin-bottom:8px;}
#malaysia-time {font-size:0.8rem;color:var(--text2);margin-bottom:10px;}
.live-tv-wrap {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;max-width: 1200px;margin: 0 auto;padding: 0 20px;box-sizing: border-box;}
.iframe-item {position: relative;border-radius: 10px;overflow: hidden;background: var(--bg5);min-height: 300px;transition: all 0.3s ease; box-shadow:0 14px 36px var(--glass4);}
.iframe-title {position: absolute;top: 0;left: 0;width: 100%;padding: 6px 10px;background: var(--glass5);color: var(--text2);z-index: 15;box-sizing: border-box;font-family: "Orbitron", sans-serif;transition: all 0.3s ease;}
.iframe-item iframe {width: 100%;height: 100%;border: none;display: block;pointer-events: none;opacity: 0.8;transition: all 0.35s ease;}
.video-overlay {position: absolute;inset: 0;background: var(--glass1);backdrop-filter: blur(4px);z-index: 10;pointer-events: auto;transition: opacity 0.35s ease;}
.video-overlay.hidden {opacity: 0;pointer-events: none;transition: opacity 0.35s ease;}
.live-tv-buttons {position: absolute;bottom: 10px;left: 10px;display: flex;gap: 10px;z-index: 20;transition: all 0.3s ease;}
.live-tv-buttons button {background: var(--glass5);color: var(--accent1);padding: 6px 12px;border-radius: 6px;border: none;cursor: pointer;backdrop-filter: blur(10px);transition: all 0.3s ease;}
.live-tv-buttons button:hover {color: var(--text2);background: var(--bg5);transition: all 0.3s ease;}
.iframe-item img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 10px;z-index: 5;transition: transform 0.3s ease, opacity 0.3s ease;}
.iframe-item img:hover {transform: scale(1.03);opacity: 0.9;transition: transform 0.3s ease, opacity 0.3s ease;}
:fullscreen iframe,
:-webkit-full-screen iframe {width: 100vw !important;height: 100vw !important;border-radius: 0 !important;transition: all 0.3s ease;}

.custom-content{display:flex;justify-content:center;background:var(--bg4);padding:20px 0;width:100%;box-sizing:border-box;}
.custom-inner{display:flex;gap:20px;width:100%;max-width:1200px;padding:0 20px;box-sizing:border-box;}
.custom-left,.custom-right{flex:1;}
.custom-left img{width:100%;height:auto;object-fit:cover;border-radius:12px;padding:10px;}
.custom-left h3{color:var(--accent1);margin:10px 0;font-size:20px;font-family:"Orbitron",sans-serif;}
.custom-left p{color:var(--text2);margin:0;line-height:1.5;}
.custom-right{padding-left:40px;}
.custom-right img:not(.provider-logo){width:100%;height:auto;object-fit:cover;border-radius:12px;padding:10px;}
.provider-logo{width:160px;height:60px;object-fit:cover;display:block;margin-bottom:10px;}
.custom-right h2{color:var(--accent1);margin:0 0 10px;font-size:20px;font-family:"Orbitron",sans-serif;}
.custom-right p{color:var(--text2);margin:0;line-height:1.5;}

.faq-extra-content{background:var(--panel);display:flex;align-items:flex-start;gap:30px;text-align:left;will-change:transform;backface-visibility:hidden;transform:translateZ(0);transition:all 0.3s ease;flex-wrap:wrap;}
.faq-extra-content .wrap{display:flex;align-items:flex-start;width:100%;padding:30px 18px;box-sizing:border-box;will-change:transform;backface-visibility:hidden;transform:translateZ(0);transition:all 0.3s ease;flex-wrap:wrap;}
.vertical-title{writing-mode:vertical-rl;transform:rotate(180deg);font-size:24px;font-weight:bold;flex-shrink:0;margin-right:20px;font-family:"Orbitron",sans-serif;color:var(--accent2);transition:all 0.3s ease;}
.faq-content{flex:1;}
.faq-content h1,.faq-content h2,.faq-content h3{font-size:20px;margin-bottom:10px;font-weight:normal;color:var(--accent1);transition:all 0.3s ease;font-family:sans-serif;}
.faq-content p{font-size:15px;color:var(--text2);margin-bottom:16px;line-height:1.5;transition:color 0.3s ease;}
.faq-toggle{display:inline-block;padding:8px 30px;margin-top:15px;background:transparent;color:var(--text2);border:1px solid var(--accent2);border-radius:8px;cursor:pointer;transition:all 0.3s ease;}
.top-footer{background:var(--panel);padding:28px 12px;box-sizing:border-box;transition:all 0.3s ease;}
.top-footer .container{max-width:1150px;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:768px){
.wrap{width:100%;max-width:100%;padding:0 12px;box-sizing:border-box;transition:all 0.3s ease;}
body{font-size:15px;transition:all 0.3s ease;}
.header-inner{height:60px;justify-content:center;position:relative;transition:all 0.3s ease;}
.header .right .btn-outline,.header .right .btn-primary{display:none;transition:all 0.3s ease;}
.logo{width:170px;height:50px;transition:all 0.3s ease;}
.sidebar,.sidebar-overlay{display:block;transition:all 0.35s ease-in-out;}
.sidebar{position:fixed;top:0;right:-250px;width:240px;height:100%;background:linear-gradient(135deg,var(--bg2),var(--bg3),var(--bg5));box-shadow:-4px 0 20px var(--glass3);transition:right 0.35s ease-in-out;z-index:1000;padding:20px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;}
.sidebar.active{right:0;transition:right 0.35s ease-in-out;}
.sidebar-buttons{display:flex;flex-direction:column;gap:8px;padding:8px 0;}
.sidebar-buttons a{flex:1 1 100%;text-align:center;padding:8px 0;font-size:12px;transition:all 0.3s ease;}
.sidebar-nav{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;}
.sidebar-nav a{flex:1 1 100%;padding:10px 12px;text-align:center;border-radius:6px;border:1px solid var(--accent1);background:linear-gradient(135deg,var(--bg2),var(--bg3),var(--bg5));box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 0.3s ease,color 0.3s ease;}
.sidebar-nav a:hover{color:var(--accent1);transition:color 0.3s ease;}
.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--glass5);opacity:0;pointer-events:none;transition:opacity 0.35s ease-in-out;z-index:900;}
.sidebar-overlay.active{opacity:1;pointer-events:auto;transition:opacity 0.35s ease-in-out;}
.topnav{display:none;transition:all 0.3s ease;}
.hamb{display:block;position:absolute;left:10px;top:50%;transform:translateY(-50%);width:30px;height:22px;z-index:100;cursor:pointer;transition:all 0.3s ease;}
.hamb span{display:block;height:2px;background:var(--accent1);margin:4px 0;border-radius:2px;transition:transform 0.35s ease-in-out,width 0.35s ease-in-out;position:relative;}
.hamb span:nth-child(2){width:120%;margin-left:-10%;transition:all 0.3s ease;}
.hamb span:nth-child(2)::after{content:'';position:absolute;right:-8px;top:-4px;border:6px solid transparent;border-left-color:var(--accent2);transition:all 0.3s ease;}
.nav-tabs{font-size:12px;display:flex;justify-content:flex-start;gap:6px;flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;box-sizing:border-box;transition:all 0.3s ease;}
.translate-popup h2{font-size:25px;transition:all 0.3s ease;}
.translate-buttons button img{width:60px;transition:all 0.3s ease;}
.slotdemo-section{padding:20px 0;transition:all 0.3s ease;}
.slotdemo-container{flex-direction:column;gap:20px;padding:0 14px;transition:all 0.3s ease;}
.slotdemo-left,.slotdemo-right {flex: 1 1 100%;width: 100%;padding: 20px;}
.slotdemo-title,.slotdemo-faq-title {font-size:1.5rem;margin-bottom:10px;transition:all 0.3s ease;}
.slotdemo-desc,.faq-answer {font-size:0.95rem;line-height:1.5;transition:all 0.3s ease;}
.faq-item {margin-bottom: 8px;padding-bottom: 8px;}
.faq-question {font-size: 0.95rem;}
.live-tv-header h1 {font-size: 1.5rem;margin-bottom: 6px;}
.live-tv-wrap {grid-template-columns: 1fr;padding: 10px;gap: 16px;}
.iframe-item {min-height: 220px;}
.iframe-title {font-size: 0.9rem;padding: 4px 8px;}
.live-tv-buttons button {padding: 5px 10px;font-size: 0.9rem;}
.custom-content{flex-direction:column;padding:12px 10px;gap:12px;transition:all 0.3s ease;}
.custom-inner{flex-direction:column;gap:12px;padding:0 10px;max-width:100%;transition:all 0.3s ease;}
.custom-left,.custom-right{flex:1 1 100%;transition:all 0.3s ease;}
.custom-right{padding-left:0;transition:all 0.3s ease;}
.custom-left img,.custom-right img:not(.provider-logo){width:100%;height:auto;padding:5px;transition:all 0.3s ease;}
.custom-left h3,.custom-right h2{font-size:18px;transition:all 0.3s ease;}
.custom-left p,.custom-right p{font-size:14px;line-height:1.4;transition:all 0.3s ease;}
.provider-logo{width:130px;height:50px;transition:all 0.3s ease;}
.login-popup-inner{width:100%;padding:25px 20px;transition:all 0.3s ease;}
.input-item{width:100%;transition:all 0.3s ease;}
.btn-login{padding:12px 0;transition:all 0.3s ease;}
.footer-top-row,.footer-bottom-row{flex-direction:column;align-items:flex-start;gap:10px;transition:all 0.3s ease;}
.cm-image{margin-top:10px;max-width:320px;}}

@media(max-width:480px){
.wrap{width:100%;max-width:100%;padding:0 12px;box-sizing:border-box;transition:all 0.3s ease;}
body{font-size:14px;transition:all 0.3s ease;}
.custom-content,.custom-inner{gap:10px;}
.nav-tabs{gap:4px;}
.cta-row a{width:48%;}
.faq-extra-content{padding:10px 8px;gap:10px;}
.vertical-title{font-size:16px;margin-right:10px;}
.translate-buttons button img{width:50px;}}