@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600|Orbitron:500,700');

/* === FUTURISTIC THEME START === */
:root {
  --primary-glow-color: #00f6ff;
  --secondary-glow-color: #ff00c1;
  --bg-color-start: #0a0b22;
  --bg-color-end: #1e143b;
  --text-color: #e0e0e0;
  --dark-panel-bg: rgba(10, 20, 40, 0.65);
}

/* --- Animated Background & Base Styles --- */
body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
  background-size: 200% 200%;
  animation: animated-gradient 15s ease infinite;
  color: var(--text-color);
  overflow-x: hidden;
}

@keyframes animated-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 5px var(--primary-glow-color), 0 0 10px var(--primary-glow-color); }
  50% { box-shadow: 0 0 20px var(--primary-glow-color), 0 0 30px var(--primary-glow-color); }
  100% { box-shadow: 0 0 5px var(--primary-glow-color), 0 0 10px var(--primary-glow-color); }
}

@keyframes glitch {
  2%,64% { transform: translate(2px,0) skew(0deg); }
  4%,60% { transform: translate(-2px,0) skew(0deg); }
  62% { transform: translate(0,0) skew(5deg); }
}

/* --- Main Login Container & Glassmorphism Effect --- */
.login_left_combo_parent,
.login form {
  background: var(--dark-panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 246, 255, 0.2);
  box-shadow: 0 0 25px rgba(0, 246, 255, 0.1);
  border-radius: 15px;
  overflow: hidden; /* Important for backdrop-filter */
}

.login_left_combo_parent {
  box-shadow: 2px 0 25px rgba(0, 246, 255, 0.2);
  border-right: 1px solid rgba(0, 246, 255, 0.4);
}

.login {
  background: transparent;
}

/* --- Typography & Text Effects --- */
.login .title,
.login_left_combo h1 {
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--primary-glow-color), 0 0 20px var(--primary-glow-color);
  animation: glitch 1.5s linear infinite;
}

.login .desc,
.login_left_combo p {
  color: var(--text-color);
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

.login_left_combo h1 {
  animation-delay: 0.5s;
}

a {
  color: var(--primary-glow-color);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--primary-glow-color);
}

/* --- Form Fields --- */
.wow_form_fields > label {
  color: var(--text-color);
  opacity: 0.8;
  font-weight: 500;
  letter-spacing: 1px;
}

.wow_form_fields input, .wow_form_fields textarea, .wow_form_fields select {
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: #fff;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 52px;
}

.wow_form_fields input:focus, .wow_form_fields textarea:focus, .wow_form_fields select:focus {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: var(--primary-glow-color);
  box-shadow: 0 0 15px -2px var(--primary-glow-color);
}

/* --- Buttons --- */
.login_signup_combo .login__ .btn {
  background: var(--primary-glow-color);
  color: #000;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 246, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.5);
}

.login_signup_combo .login__ .btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px var(--primary-glow-color), inset 0 0 10px rgba(255, 255, 255, 0.7);
}

.social_btns a {
    border: 1px solid rgba(0, 246, 255, 0.5);
    background: rgba(0, 246, 255, 0.1);
}
.social_btns a:hover {
    background: var(--primary-glow-color);
    transform: scale(1.1);
}
.social_btns a:hover svg {
    fill: #000;
}

/* --- Checkbox --- */
.terms label {
    color: var(--text-color);
    opacity: 0.8;
}
.terms label::before {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(0,0,0,0.2);
}
.terms input[type=checkbox]:checked+label::before {
    background-color: var(--primary-glow-color);
    border-color: var(--primary-glow-color);
}
.terms input[type=checkbox]:checked+label::after {
    border-color: #000;
}

/* --- Floating Icons --- */
.floating-help, .mabar-event, .live-event {
  animation: bounce 2s infinite;
  filter: drop-shadow(0 0 8px var(--primary-glow-color));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.floating-help:hover, .mabar-event:hover, .live-event:hover {
  filter: drop-shadow(0 0 15px var(--secondary-glow-color));
  transform: scale(1.1);
  animation-play-state: paused;
}

.live-event { animation-delay: 0.2s; }
.mabar-event { animation-delay: 0.4s; }

/* === FUTURISTIC THEME END === */

/* Original User CSS (with modifications for compatibility) */
*{box-sizing:border-box;outline:0!important}
.w100{width:100%}.ad-placement-header-footer{display:none}#re-send{margin-bottom:0;margin-top:20px}.welcome-container{width:100%;height:100%}.help-block-welcome{color:#aaa;margin-bottom:5px;font-size:12px}#welcomeheader{width:100%;position:fixed;z-index:99;top:0;background: rgba(10, 20, 40, 0.5); backdrop-filter: blur(10px); box-shadow: 0 4px 20px -8px rgba(0,246,255,.3)}
#welcomeheader .mdbtn{transition:all .2s ease;cursor:pointer;min-width:88px;text-align:center;border-radius:3px;user-select:none;border:2px solid var(--primary-glow-color);outline:0;padding:5px 0;height:auto;margin:7.5px 0; color: var(--primary-glow-color);}
#welcomeheader .mdbtn:hover{background-color:rgba(0,246,255,.2)}.absul-right{position:relative}.logo{display:block;margin-top:10px;margin-right:55px}.logo img{max-width:130px}.welcome-search-con{color:#fff;position:relative}.welcome-search-con i{position:absolute;left:10px;top:2px}.login,.welcome-footer,.wrapper{position:relative}
.welcome-search{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,0.2);padding:5px 13px 5px 30px;width:400px;margin-top:-15px;max-width:400px;border-radius:5px;height:32px;transition:background .2s ease-out, box-shadow .2s ease-out;outline:0;font-family:Helvetica Neue,HelveticaNeue,Helvetica,Arial,sans-serif; color: #fff;}
.welcome-search:focus { box-shadow: 0 0 10px var(--primary-glow-color); }
.welcome-footer{padding:10px;font-size: 13px; text-align: center; background: rgba(0,0,0,0.3);}
.welcome-footer a:not(.lang){text-shadow:none}
footer:empty{padding:0}
.wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;min-height:calc(100vh);margin:0}
.g-recaptcha{transform:scale(.85);transform-origin:0 0}
.login {width: 100%; min-height: 100%; display: flex;}
.login form {width: 100%;max-width: 550px;min-width: 50%;margin: auto; padding: 30px 40px;}
.login .col-md-6 {padding: 0;}
.login_left_combo_parent {width: 50%;position: relative;height: 100%;overflow: visible; padding: 40px;}
.login_left_combo_parent > svg {position: absolute;top: -3px;right: -3px;bottom: -3px;left: -3px;width: 102%;height: 102%;pointer-events: none;}
.login_left_combo {display: flex;height: 100%;position: relative;z-index: 1;width: 100%;max-width: 550px;min-width: 53%;flex-direction: column;margin: auto;overflow: hidden;}
.login_left_combo .logo {margin: 85px 0 0;}
.login_left_combo .logo img {max-width: 200px;}
.login_left_combo h1 {font-size: 40px;margin: 100px 0 0;font-weight: bold;line-height: 53px;}
.login_left_combo p {font-size: 18px;margin: 20px 0 50px;letter-spacing: 0.64px;max-width: 400px;}
.login_left_combo > .img {margin-top: auto;border: 16px solid rgb(255 255 255 / 10%);border-radius: 40px 40px 0 0;border-bottom: 0;}
.login_left_combo > .img img {width: 100%;border-radius: 20px 20px 0 0;aspect-ratio: 1;object-fit: cover;}

.login_innre {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;min-height: calc(100% - 60px);}
.login_innre:after,.login_innre:before {-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow: 1;flex-grow: 1;content: '';display: block;height: 24px}

.terms,.terms label,.user-image,.users-profiles{position:relative}

.forgot_password {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;margin:-7px 0 50px}
.forgot_password > a {font-size: 16px;}
.login_signup_combo{margin:20px 0;position:relative}
.login_signup_combo .login__{display:flex;align-items:center;justify-content:center}
.login_signup_combo .login__ .btn {width: 100%;line-height: 60px;border-radius: 12px;font-size: 20px;}
.login_signup_combo .signup__ {text-align: center;margin: 15px 0 -10px;font-size: 15px; color: var(--text-color);}
.social_btns {text-align: center;margin: 50px 0 30px;}
.social_btns p {margin-bottom:5px;opacity: 0.6; color: var(--text-color);}
.social_btns a {text-decoration: none;width: 40px;height: 40px;margin: 3px 2.2px 0;border-radius: 50%;transition: all .2s ease;padding: 8px;}
.social_btns a.no_padd {padding: 0;}
.social_btns a.no_padd svg {width: 40px;height: 40px;}
.errors, .success {padding: 12px;border-radius: 12px;border: 0;font-size: 15px;}
.errors { background: #ff0055; color: #fff; text-shadow: 1px 1px 1px #000; }
.success { background: #139c4e; color: #fff; text-shadow: 1px 1px 1px #000; }
.errors:empty, .success:empty {padding: 0;}
.login .title {font-size: 44px;margin: 0 0 17px;font-weight: 600;}
.login .desc {font-size: 16px;letter-spacing: 0.57px;}
.random_users{margin-top:80px}
.users-profiles{padding:0;width:100%;margin:30px auto 0;text-align:center;display:block}
.user-image, .user-image img {width:44px;height:44px;border-radius:50%}
.user-image {display: inline-block;margin: -7px -4px;box-shadow: 0 0 0 3px var(--bg-color-start);}
.terms{padding-left:22px}
.terms input[type=checkbox]{opacity:0;margin:0 0 6px 4px;display:none}
.terms label::after,.terms label::before{display:inline-block;left:0;margin-left:-20px}
.terms label{padding-left: 20px;cursor: pointer;user-select: none;font-size: 16px;}
.terms label::before{content:"";position:absolute;width: 24px;height: 24px;top: -1px;border-radius: 5px;transition:all 90ms cubic-bezier(0,0,.2,.1)}
.terms label::after{position:absolute;width:16px;height:16px;top:0;padding-left:3px;padding-top:1px;font-size:11px;color:#555}
.terms input[type=checkbox]:checked+label::after{border:2px solid #000;border-top:none;border-right:none;content:"";height:5px;left:7px;position:absolute;top:7px;transform:rotate(-45deg);width:10px;transition:.2s;}
.typed-cursor{opacity:1;-webkit-animation:blink .7s infinite;-moz-animation:blink .7s infinite;animation:blink .7s infinite;color:#e9e9e9;font-size:28px}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.login .footer {
	text-align: center;
}
.spinner{-webkit-animation:rotator 1.7s linear infinite;animation:rotator 1.7s linear infinite;width:27px;margin-right:15px;opacity:0;visibility:hidden}.spinner.show{opacity:1;visibility:visible}.spinner__path{stroke-dasharray:187;stroke-dashoffset:0;-webkit-transform-origin:center;transform-origin:center;-webkit-animation:dash 1.7s ease-in-out infinite;animation:dash 1.7s ease-in-out infinite;stroke:var(--primary-glow-color)}@-webkit-keyframes rotator{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotator{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}to{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}to{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}

/* All other original styles below remain largely the same... */
#wo_language_modal{background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.04'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center #e0e0e0;border-bottom:1px solid #c8c8c8}#wo_language_modal .language_head{font-size:18px;overflow:hidden}#wo_language_modal ul{padding:0}#wo_language_modal ul .language_select{width:18.7%;display:inline-block;text-align:center;margin:30px 2px 5px}#wo_language_modal ul .language_select a{display:table;text-decoration:none;font-weight:700;font-size:13px;width:100%}#wo_language_modal ul .language_select a .language_initial{display:table-caption;width:50px;height:50px;background:0 0;margin:0 auto 8px;box-shadow:0 1px 3px rgba(0,0,0,.24);border-radius:50%;transition:all .2s ease-in-out}.carousel,.carousel-inner{height:100%}#wo_language_modal ul .language_select:hover .language_initial{box-shadow:0 2px 6px rgba(0,0,0,.5)}.animated{-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated_2{-webkit-animation-duration:.2s;animation-duration:.2s}.animated_4{-webkit-animation-duration:.4s;animation-duration:.4s}.animated_5{-webkit-animation-duration:.5s;animation-duration:.5s}.animated_6{-webkit-animation-duration:.6s;animation-duration:.6s}.animated_8{-webkit-animation-duration:.8s;animation-duration:.8s}.animated_9{-webkit-animation-duration:.9s;animation-duration:.9s}.animated_10{-webkit-animation-duration:1s;animation-duration:1s}.animated_12{-webkit-animation-duration:1.2s;animation-duration:1.2s}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,15%,0);transform:translate3d(0,15%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,15%,0);transform:translate3d(0,15%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}.carousel{z-index:-1}.carousel-inner .item{background-repeat:no-repeat;background-size:cover;background-position:center;height:100%}
.wow_form_fields {position: relative;margin: 20px 0;}
.wow_form_fields input, .wow_form_fields select {height: 52px;}
.wow_form_fields textarea {resize: vertical;}

/* ... The rest of your CSS remains here ... */

.runner-text {
    position: fixed;
    top: 65px; /* Moved down a bit to not overlap header */
    left: 100%;  
    width: 100%;
    white-space: nowrap;  
    overflow: hidden;
    z-index: 90;
    background-color: transparent;
    color: #fff;
    padding: 10px;  
    font-size: 16px; 
    animation: runner 25s linear infinite;  
    text-shadow: 0 0 5px var(--primary-glow-color), 0 0 10px var(--primary-glow-color);
}

@keyframes runner {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-200%); } /* Increased distance for smoother loop */
}

.floating-help, .live-event, .mabar-event {
    position: fixed;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    z-index: 1000;
    background-size: cover;
    background-position: center;
    box-shadow: none; /* Shadow handled by filter */
}

.mabar-event {
    bottom: 200px;
    background-image: url('https://superchat.my.id/gambar/stik.png');
    animation: bounce 2s infinite, slideshowmabar 8s infinite;
}

.live-event {
    bottom: 140px;
    background-image: url('https://static.vecteezy.com/system/resources/previews/016/017/082/original/live-live-transparent-live-icon-free-png.png');
    animation: bounce 2s infinite, slideshowlive 8s infinite;
}

.floating-help {
    bottom: 80px;
    background-image: url('https://membership.my.id/gambar/bluez.png');
    animation: bounce 2s infinite, slideshow 8s infinite;
}

.floating-help a, .live-event a, .mabar-event a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: transparent;
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-15px) scale(1.05); }
    60% { transform: translateY(-7px) scale(1); }
}

@keyframes slideshow {
    0%, 49% { background-image: url('https://superchat.my.id/gambar/bluez.png'); }
    50%, 100% { background-image: url('https://superchat.my.id/gambar/orangez.png'); }
}

@keyframes slideshowlive {
    0%, 49% { background-image: url('https://static.vecteezy.com/system/resources/previews/016/017/082/original/live-live-transparent-live-icon-free-png.png'); }
    50%, 100% { background-image: url('https://media.tenor.com/wU-hCae1a8sAAAAC/live.gif'); }
}

@keyframes slideshowmabar {
    0%, 49% { background-image: url('https://superchat.my.id/gambar/stik.png'); }
    50%, 100% { background-image: url('https://www.harperwoodslibrary.org/site-assets/images/game-controller.png/@@images/image.png'); }
}

/* Media Queries */
@media (min-width:400px) {
.payment_box {width: 360px;}
}

@media (min-width:1200px){
.container{width:97%}
}

@media (max-width:1250px) {
.login_left_combo_parent {width: 40%; padding: 30px;}
.login .col-md-6 {width: 60%;}
}

@media (max-width:930px) {
.login {flex-direction: column; padding: 20px;}
.login_left_combo_parent {width: 100%;height: auto; margin-bottom: 20px; padding: 20px;}
.login_left_combo {max-width: 100%;min-width: 100%;}
.login_left_combo > .img {display: none;}
.login .col-md-6 {width: 100%;}
.login form {padding: 20px;}
.login_left_combo h1 { margin-top: 30px; font-size: 32px; }
.login_left_combo p { margin-bottom: 30px; }
.login_left_combo .logo { margin: 20px 0 0; }
}

@media (max-width:640px){
.login_innre {padding: 0 15px;}
.login_left_combo_parent {padding: 15px;}
.login_left_combo h1 {
    font-size: 28px;
    line-height: normal;margin: 20px 0 0;
}
.login_left_combo p {
    font-size: 15px;
    margin: 10px 0 20px;
}
}