/* =========================================================
   ACCOUNT - Scoped "rem" only for .pb_account
   Desktop equivalent: html{font-size:62.5%}  => 1rem = 10px
   Mobile equivalent : html{font-size:32%}    => 1rem = 5.12px
   NOTE: rem diganti jadi calc(var(--pb-rem) * X) supaya scoped.
========================================================= */
.binsur_account input:focus,
.binsur_account button:focus,
.binsur_account select:focus { outline: none; }

.mobile {display:none;}

.binsur_account { --pb-rem: 10px; } /* desktop base */

/* Backdrop lebih gelap + sedikit blur feel */
.binsur_account .modal-backdrop.show{
  opacity: 0.78;
}

/* Modal container: lebih kecil & compact */
.binsur_account .binsur_modal .modal-dialog{
  width: 100%;
  max-width: min(92vw, calc(var(--pb-rem) * 56)); /* max ~560px, mobile ikut 92vw */
  margin: calc(var(--pb-rem) * 1.0) auto;
  padding-left: calc(var(--pb-rem) * 1.2);
  padding-right: calc(var(--pb-rem) * 1.2);
}

/* Modal content: glass + border glow tipis */
.binsur_account .binsur_modal .modal-content{
  position: relative;
  background: rgba(10,12,16,0.78);
  border: 1px solid rgba(135,207,255,0.18);
  border-radius: calc(var(--pb-rem) * 0.8);
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Accent line halus di atas biar “premium” */
.binsur_account .binsur_modal .modal-content:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(135,207,255,0.0),
    rgba(135,207,255,0.55),
    rgba(135,207,255,0.0)
  );
  pointer-events:none;
}

/* Header: lebih kecil, clean, tetap sticky feel */
.binsur_account .binsur_modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: calc(var(--pb-rem) * 1.2);
  padding: calc(var(--pb-rem) * 1.8) calc(var(--pb-rem) * 2.0);
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Title: nggak kegedean, tetap tegas */
.binsur_account .binsur_modal__title{
  color:#fff;
  font-weight:800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: clamp(16px, 2.1vw, calc(var(--pb-rem) * 2.0)); /* max ~20px */
  line-height: 1.1;
}

/* Close button: compact, modern */
.binsur_account .binsur_modal__close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pb-rem) * 3.6);
  height: calc(var(--pb-rem) * 3.6);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: calc(var(--pb-rem) * 0.7);
  background: rgba(255,255,255,0.06);
  padding: 0;
  color: #fff;
  font-size: calc(var(--pb-rem) * 2.2);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.binsur_account .binsur_modal__close:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(135,207,255,0.25);
  transform: translateY(-1px);
}

/* BODY: lebih rapat + scroll enak */
.binsur_account .binsur_modal__body{
  max-height: calc(100vh - (var(--pb-rem) * 16));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--pb-rem) * 1.4) calc(var(--pb-rem) * 1.6);
  scrollbar-gutter: stable;
}

/* Scrollbar lebih slim */
.binsur_account .binsur_modal__body::-webkit-scrollbar{
  width: 8px;
}
.binsur_account .binsur_modal__body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 10px;
}

/* Form wrapper: lebih minimal, gak bulky */
.binsur_account .binsur_modal .lf{
  padding: calc(var(--pb-rem) * 1.6);
  max-width: none;
  margin: 0;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: calc(var(--pb-rem) * 0.7);
  position: relative;
}

/* Dekor pojok: opsional (kalau mau lebih clean, matiin aja block ini) */
.binsur_account .binsur_modal .lf:before,
.binsur_account .binsur_modal .lf:after{
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  opacity: 0.85;
}
.binsur_account .binsur_modal .lf:before{
  background: url('/images/common/icon_lt.png') 0 0 no-repeat;
  left: -1px;
  top: -1px;
}
.binsur_account .binsur_modal .lf:after{
  background: url('/images/common/icon_rb.png') 0 0 no-repeat;
  right: -1px;
  bottom: -1px;
}

/* List spacing: lebih rapat */
.binsur_account .binsur_modal .lf_list{
  margin-bottom: calc(var(--pb-rem) * 1.6);
}
.binsur_account .binsur_modal .lf_list li{
  margin-bottom: calc(var(--pb-rem) * 1.2);
}
.binsur_account .binsur_modal .lf_list li:last-child{
  margin-bottom: 0;
}

/* Input full width fix */
.binsur_account .binsur_modal .inp{ width: 100%; }
.binsur_account .binsur_modal .inp input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Footer: lebih rapih */
.binsur_account .binsur_modal__foot{
  margin-top: calc(var(--pb-rem) * 1.0);
  border-top: none;
  padding-top: 0;
}

/* =========================
   BASE
========================= */
.binsur_account {
  /* background:url('/images/common/bg_login.jpg') center 0 no-repeat; */
  padding-top: calc(var(--pb-rem) * 25); /*awalnya 10*/
  position: relative;
}

.binsur_account .con { padding-bottom: calc(var(--pb-rem) * 16.6); }

.binsur_account .con > h1 {
  text-align: center;
  margin-bottom: calc(var(--pb-rem) * 5);
  position: relative;
}

.binsur_account .lf {
  padding: calc(var(--pb-rem) * 5); /*awalnya 10*/
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.binsur_account .lf:before,
.binsur_account .lf:after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
}

.binsur_account .lf:before { background: url('/images/common/icon_lt.png') 0 0 no-repeat; left: -1px; top: -1px; }
.binsur_account .lf:after  { background: url('/images/common/icon_rb.png') 0 0 no-repeat; right: -1px; bottom: -1px; }

.binsur_account .forget_area .lf:before,
.binsur_account .forget_area .lf:after { display: none; }

.binsur_account .lf .login_fb {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(var(--pb-rem) * 0.02);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.7);
  border: 1px solid #87cfff;
  display: block;
  max-width: 100%;
  position: relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 5px;
  background: rgba(104, 154, 255, 0.7);
}

.binsur_account .lf .login_fb i {
  display: inline-block;
  width: 31px;
  height: 31px;
  background: url('/images/common/icon_facebook.png') 0 0 no-repeat;
  vertical-align: middle;
  top: -2px;
  margin-right: calc(var(--pb-rem) * 1);
  position: relative;
}

.binsur_account .lf .login_fb:hover { background: #689aff; }

.binsur_account .lf .login_fb:before,
.binsur_account .lf .login_fb:after {
  content: '';
  display: block;
  width: 4px;
  height: 10px;
  background: #fff;
  position: absolute;
}

.binsur_account .lf .login_fb:before { left: calc(var(--pb-rem) * 1); bottom: 0; }
.binsur_account .lf .login_fb:after  { right: calc(var(--pb-rem) * 1); top: 0; }

.binsur_account .lf .division {
  font-size: 0;
  margin: calc(var(--pb-rem) * 3) 0;
  position: relative;
  text-align: center;
}

.binsur_account .lf .division:before,
.binsur_account .lf .division:after {
  content: '';
  display: block;
  width: calc((100% - 100px) / 2);
  height: 1px;
  background: #467294;
  top: 50%;
  position: absolute;
}

.binsur_account .lf .division:before { left: 0; }
.binsur_account .lf .division:after  { right: 0; }

.binsur_account .lf .division span {
  display: inline-block;
  width: 100px;
  font-size: 14px;
  color: #87cfff;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
}

.binsur_account .lf .division span:before,
.binsur_account .lf .division span:after {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  background: #ff0000;
  top: 50%;
  position: absolute;
  transform: translate(0, -50%);
}

.binsur_account .lf .division span:before { left: 0; }
.binsur_account .lf .division span:after  { right: 0; }

.binsur_account .lf_list { margin-bottom: calc(var(--pb-rem) * 2); }

.binsur_account .lf_list li {
  margin-bottom: calc(var(--pb-rem) * 1.7);
  position: relative;
}

.binsur_account .lf_list li:last-child { margin-bottom: 0; }

.binsur_account .lf_list li.error {
  font-family: 'Roboto';
  border-radius: 5px;
  background: rgba(255, 234, 0, 0.2) url('/images/common/icon_noti.png')
    calc(var(--pb-rem) * 1.2) center no-repeat;
  border: 1px solid rgba(255, 234, 0, 0.5);
  font-size: 12px;
  color: #fff;
  margin-top: calc(var(--pb-rem) * -1);
  padding: calc(var(--pb-rem) * 1.7) calc(var(--pb-rem) * 2)
           calc(var(--pb-rem) * 1.7) calc(var(--pb-rem) * 4.8);
  text-align: left;
}

.binsur_account .lf_list li.captcha .g-recaptcha > div { margin: 0 auto; }

.captcha > div {
  margin-bottom: calc(var(--pb-rem) * 2);
  text-align: left;
}

.captcha > div > div {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  display: inline-block;
}

.binsur_account .lf_list li .tit {
  display: block;
  color: #ff0000;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.binsur_account .lf_list li .inp {
  height: 60px;
  line-height: 60px;
  border: 1px solid #87cfff;
  position: relative;
}

.binsur_account .lf_list li .inp .timer {
  position: absolute;
  right: calc(var(--pb-rem) * 7);
  top: 50%;
  transform: translate(0, -50%);
  color: #fd0;
  font-size: 12px;
  font-family: 'Roboto';
}

.binsur_account .lf_list li .inp:before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background:
    url('/images/common/dot_w.jpg') 0 0 no-repeat,
    url('/images/common/dot_w.jpg') right 0 no-repeat,
    url('/images/common/dot_w.jpg') 0 bottom no-repeat,
    url('/images/common/dot_w.jpg') right bottom no-repeat;
}

.binsur_account .lf_list li .inp:focus-within { border: 1px solid #fff; }

.binsur_account .lf_list li .inp:focus-within:before {
  background:
    url('/images/common/dot_r.jpg') 0 0 no-repeat,
    url('/images/common/dot_r.jpg') right 0 no-repeat,
    url('/images/common/dot_r.jpg') 0 bottom no-repeat,
    url('/images/common/dot_r.jpg') right bottom no-repeat;
}

.binsur_account .lf_list li .inp input {
  display: block;
  font-size: 14px;
  color: #87cfff;
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
  border: none;
  background: rgba(135, 207, 255, 0.2);
  padding: 0 calc(var(--pb-rem) * 8) 0 calc(var(--pb-rem) * 2); /*disini ubah panjang input*/
  position: relative;
  z-index: 1;
}

/* kalau ada icon/button kanan, baru besar */
.binsur_account .lf_list li .inp.has-pw input{
  padding-right: 60px;      /* ruang buat pw_show */
}

.binsur_account .lf_list li .inp.has-timer input{
  padding-right: 120px;     /* ruang buat timer */
}

.binsur_account .lf_list li .inp.has-check input{
  padding-right: 90px;      /* ruang buat tombol cek */
}

/* kalau ada status icon true/false + pw_show, amankan lebih lega */
.binsur_account .lf_list li .inp.has-pw.inp.true input,
.binsur_account .lf_list li .inp.has-pw.inp.false input{
  padding-right: 90px;
}

.binsur_account .lf_list li .inp input::placeholder { color: #87cfff; }
.binsur_account .lf_list li .inp input:focus { color: #fff; }
.binsur_account .lf_list li .inp input:focus::placeholder { color: #fff; }

/* FIX: gba -> rgba */
.binsur_account .lf_list li .inp input:-webkit-autofill,
.binsur_account .lf_list li .inp input:-webkit-autofill:hover,
.binsur_account .lf_list li .inp input:-webkit-autofill:focus,
.binsur_account .lf_list li .inp input:-webkit-autofill:active {
  -webkit-text-fill-color: #87cfff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(135, 207, 255, 0.2) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.binsur_account .lf_list li .inp.true:after,
.binsur_account .lf_list li .inp.false:after {
  right: calc(var(--pb-rem) * 4.5);
  top: 50%;
  margin-top: -8px;
  content: '';
  display: block;
  position: absolute;
  width: 18px;
  height: 17px;
  background-repeat: no-repeat;
  background-image: url('/images/common/pw_state_n.png');
}

.binsur_account .lf_list li .inp.true:after  { background-position: 0 0; }
.binsur_account .lf_list li .inp.false:after { background-position: 0 -17px; }

.binsur_account .lf_list li .pw_show {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: calc(var(--pb-rem) * 1);
  margin-top: -9px;
  border: 0;
  background-color: rgba(255, 255, 255, 0);
  display: block;
  width: 24px;
  height: 18px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  appearance: none;
  -webkit-appearance: none;
  z-index: 2;
}

.binsur_account .lf_list li input[type=password] + .pw_show {
  background-image: url('/images/common/icon_eye_off_on.png');
}

.binsur_account .lf_list li input[type=text] + .pw_show {
  background-image: url('/images/common/icon_eye_on_off.png');
}

.binsur_account .lf_list li .pw_show:hover { background-position: 0 -18px; }

.binsur_account .lf_list li .btn_check {
  cursor: pointer;
  background: rgba(104, 154, 255, 0.4);
  border: 0;
  border-left: 1px solid #87cfff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60px;
  padding: 0;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: calc(var(--pb-rem) * 0.02);
  appearance: none;
  -webkit-appearance: none;
  z-index: 2;
}

.binsur_account .lf_list li .btn_check:hover { background: #689aff; }

.binsur_account .lf .go_login {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(var(--pb-rem) * 0.02);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.7);
  border: 1px solid #ff0000;
  display: block;
  max-width: 100%;
  position: relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 5px;
  background: rgba(255, 0, 0, 0.6);
}

.binsur_account .lf .go_login:before,
.binsur_account .lf .go_login:after {
  transition: all ease-in-out 0.2s;
  content: '';
  display: block;
  width: 4px;
  height: 10px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
}

.binsur_account .lf .go_login:before { left: calc(var(--pb-rem) * 1); bottom: 0; }
.binsur_account .lf .go_login:after  { right: calc(var(--pb-rem) * 1); top: 0; }

.binsur_account .lf .go_login:hover { background: rgba(255, 0, 0, 0.8); }

.binsur_account .lf .go_login:hover:before,
.binsur_account .lf .go_login:hover:after { height: 15px; }

.binsur_account .lf .fg_con {
  margin-top: calc(var(--pb-rem) * 2);
  padding-top: calc(var(--pb-rem) * 2);
  border-top: 1px solid #467294;
  position: relative;
  font-size: 0;
}

.binsur_account .lf .fg_con .g-recaptcha { margin-bottom: calc(var(--pb-rem) * 2); }

.binsur_account .lf .fg_con .g-recaptcha > div {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.binsur_account .lf .fg_con:before {
  content: '';
  display: block;
  width: 10px;
  height: 3px;
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, 0);
  background: #ff0000;
}

.binsur_account .lf .fg_con .txt {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 140px);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
}

.binsur_account .lf .fg_con .txt:after {
  position: relative;
  top: -2px;
  content: '';
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 14px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url('/images/common/arr_l_lg.png');
}

.binsur_account .lf .fg_con .txt:hover { color: #ff0000; font-weight: bold; }
.binsur_account .lf .fg_con .txt:hover:after { background-position: 0 -14px; }

.binsur_account .lf .fg_con .go_join {
  border: 1px solid #ff0000;
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: calc(var(--pb-rem) * 0.02);
  font-weight: 500;
  vertical-align: middle;
  width: 140px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

.binsur_account .lf .fg_con .go_join:hover { background: rgba(255, 0, 0, 0.5); }

.binsur_account .binsur_login_slide {
  position: relative;
  padding: calc(var(--pb-rem) * 3) 0;
  margin-bottom: calc(var(--pb-rem) * 3);
  border-top: 1px solid #5879d4;
  border-bottom: 1px solid #5879d4;
  background: rgba(104, 154, 255, 0.9) url(/images/common/news/bg_ptn_news.png) 0 0 repeat;
}

.binsur_account .binsur_login_slide .inner { padding: 0 calc(var(--pb-rem) * 6); }
.binsur_account .binsur_login_slide .lv_slide li { padding-left: calc(var(--pb-rem) * 1.2); }

.binsur_account .binsur_login_slide .lv_slide li a {
  padding-top: 56.25%;
  border: 1px solid rgba(0,0,0,0.5);
  outline: none;
  display: block;
  position: relative;
}

.binsur_account .binsur_login_slide .lv_slide li a:before,
.binsur_account .binsur_login_slide .lv_slide li a:after {
  z-index: 1;
  content: '';
  display: none;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.binsur_account .binsur_login_slide .lv_slide li a:before { border: 3px solid #ffdd00; }
.binsur_account .binsur_login_slide .lv_slide li a:after {
  background: url('/images/common/icon_lt_b.png') 0 0 no-repeat,
            url('/images/common/icon_rb_b.png') right bottom no-repeat;
}

.binsur_account .binsur_login_slide .lv_slide li a img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.binsur_account .binsur_login_slide .lv_slide li a:hover:before,
.binsur_account .binsur_login_slide .lv_slide li a:hover:after { display: block; }

.binsur_account .binsur_login_slide .slick-track { margin: 0 auto; }

.binsur_account .binsur_login_slide .slick-arrow {
  width: 42px;
  height: 52px;
  font-size: 0;
  border: none;
  background: none;
  outline: none;
  color: transparent;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
}

.binsur_account .binsur_login_slide .slick-arrow:hover { background-position: 0 -52px; }
.binsur_account .binsur_login_slide .slick-prev { background-image: url("/images/common/arr_l_sl.png"); left: calc(var(--pb-rem) * -4.8); }
.binsur_account .binsur_login_slide .slick-next { background-image: url("/images/common/arr_r_sl.png"); right: calc(var(--pb-rem) * -6); }

.binsur_account .footer { background: none; position: relative; }

.binsur_account .lf .accept {
  position: relative;
  color: #87cfff;
  line-height: normal;
  margin-top: calc(var(--pb-rem) * 1.5);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
}

.binsur_account .lf .accept a { color: #fff; }
.binsur_account .lf .accept a:hover { text-decoration: underline; }
.binsur_account .lf .accept input[type=checkbox] { display: none; }

.binsur_account .lf .accept input[type=checkbox] + label {
  position: relative;
  padding-left: calc(var(--pb-rem) * 3);
  cursor: pointer;
  display: inline-block;
}

.binsur_account .lf .accept input[type=checkbox] + label:before {
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background: #ffffff;
  border: 1px solid #689aff;
}

.binsur_account .lf .accept input[type=checkbox]:checked + label:before {
  background: #ffffff url('/images/common/check_on.png') center center no-repeat;
}

.binsur_account .ad_link {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: hidden;
}

.binsur_account .ad_link img,
.binsur_account .ad_link video {
  max-width: none;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.binsur_account .lf .time {
  text-align: center;
  padding: 4px 0;
  color: #ffdd00;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
}

.binsur_account .lf .time img {
  position: relative;
  top: -6px;
  margin-right: calc(var(--pb-rem) * 1);
}

.binsur_account .m { display: none; }

.binsur_account .lf_list li input[type=password]::-ms-reveal,
.binsur_account .lf_list li input[type=password]::-ms-clear { display: none; }

.binsur_account .binsur_login .btn_line_r02 { display: block; margin: calc(var(--pb-rem) * 3) auto 0; }

.binsur_account .forget_area {
  max-width: 600px;
  margin: 0 auto;
  padding: calc(var(--pb-rem) * 5);
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  border-top: 1px solid #87cfff;
  border-bottom: 1px solid #87cfff;
}

.binsur_account .forget_area:before,
.binsur_account .forget_area:after {
  content: '';
  display: block;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
  width: 10px;
  height: 3px;
  background: #ff0000;
}

.binsur_account .forget_area:before { top: -2px; }
.binsur_account .forget_area:after  { bottom: -2px; }

.binsur_account .forget_area .lf { border: none; background: none; padding: calc(var(--pb-rem) * 5); }

.binsur_account .forget_area .btns_two { font-size: 0; }

.binsur_account .forget_area .btns_two a {
  width: calc((100% - calc(var(--pb-rem) * 2)) / 2);
  display: inline-block;
}

.binsur_account .forget_area .btns_two .btn_line_r { margin-right: calc(var(--pb-rem) * 2); }

.binsur_account .find_info {
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  padding: calc(var(--pb-rem) * 1.9) calc(var(--pb-rem) * 2.5);
  word-break: keep-all;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #87cfff;
  max-width: 600px;
  margin: calc(var(--pb-rem) * 2) auto 0;
}

.binsur_account .find_info .go_find {
  color: #fff;
  border: 1px solid #87cfff;
  margin-left: 10px;
  padding: calc(var(--pb-rem) * 1) calc(var(--pb-rem) * 2);
  border-radius: 5px;
  font-weight: bold;
}

.binsur_account .find_info .go_find:after {
  position: relative;
  top: -1px;
  content: '';
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 14px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url('/images/common/arr_l_lg.png');
}

.binsur_account .find_info .go_find:hover { color: #ff0000; }
.binsur_account .find_info .go_find:hover:after { background-position: 0 -14px; }

.binsur_account .lf_list li .tw_sel { position: relative; }

.binsur_account .lf_list li .tw_sel > a {
  font-family: 'Roboto';
  border: 1px solid #87cfff;
  position: relative;
  display: block;
  height: 60px;
  line-height: 60px;
  padding: 0 calc(var(--pb-rem) * 1.5);
  background:
    rgba(135, 207, 255, 0.2)
    url('/images/common/mypage/sel_cate_arr.png')
    right calc(var(--pb-rem) * 2) top 50% no-repeat;
  font-size: 14px;
  color: #fff;
}

.binsur_account .lf_list li .tw_sel > a:before {
  content: '';
  display: block;
  position: absolute;
  top: -1px; bottom: -1px; left: -1px; right: -1px;
  background:
    url('/images/common/dot_w.jpg') 0 0 no-repeat,
    url('/images/common/dot_w.jpg') right 0 no-repeat,
    url('/images/common/dot_w.jpg') 0 bottom no-repeat,
    url('/images/common/dot_w.jpg') right bottom no-repeat;
}

.binsur_account .lf_list li .tw_sel ul {
  display: none;
  z-index: 1;
  position: absolute;
  left: 0; right: 0;
  background: #000000;
  border: 1px solid rgba(135, 207, 255, 0.5);
  border-top: 0;
}

.binsur_account .lf_list li .tw_sel li { padding: calc(var(--pb-rem) * 1.5); margin-bottom: 0; }

.binsur_account .lf_list li .tw_sel li:hover { background: rgba(255, 255, 255, 0.3); color: #ffffff; }

.binsur_account .lf_list li .tw_sel li a { font-size: 14px; color: #87cfff; font-family: 'Roboto'; }
.binsur_account .lf_list li .tw_sel li a:hover { color: #ffffff; font-weight: bold; }

.binsur_account .lf_list li .tw_sel a img {
  vertical-align: middle;
  margin-right: calc(var(--pb-rem) * 1);
  border: 1px solid #000;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  top: -1px;
}

.binsur_account .lf_list li .tw_sel > a:focus-within { border: 1px solid #fff; color: #ffffff; }
.binsur_account .lf_list li .tw_sel > a:focus-within:before {
  background:
    url('/images/common/dot_r.jpg') 0 0 no-repeat,
    url('/images/common/dot_r.jpg') right 0 no-repeat,
    url('/images/common/dot_r.jpg') 0 bottom no-repeat,
    url('/images/common/dot_r.jpg') right bottom no-repeat;
}

.binsur_account .footer .info { display: none; }
.binsur_account .footer .info .list_service { display: none; }

/* ====== SELECT ====== */
.binsur_account .lf_list li .inp select{
  width:100%;
  height:100%;
  min-width:0;
  box-sizing:border-box;

  border:none;
  background: rgba(135, 207, 255, 0.2)
    url('/images/common/sel_cate_arr.png') /* pastiin path benar */
    right calc(var(--pb-rem) * 2) center no-repeat;

  font-size:14px;
  font-family:'Roboto';
  color:#87cfff;
  padding: 0 calc(var(--pb-rem) * 8) 0 calc(var(--pb-rem) * 2);

  cursor:pointer;

  /* hilangin arrow default browser */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  position: relative;
  z-index: 1; /* di atas overlay */
}

/* Option styling (hasil tergantung browser/OS) */
.binsur_account .lf_list li .inp select option{
  background: #0a0c10;     /* background list */
  color: #ffffff;          /* warna teks */
}

/* Placeholder option (Pilih) */
.binsur_account .lf_list li .inp select option[value=""]{
  color: rgba(255,255,255,0.6);
}

.binsur_account .lf_list li .inp select:focus{ color:#fff; }

/* placeholder (option value="") biar warnanya lebih pudar */
.binsur_account .lf_list li .inp select:required:invalid{
  color: rgba(135, 207, 255, 0.75);
}

/* Pesan error / catatan (text-danger d-block mt-1) versi lebih enak di dark UI */
.binsur_account .text-danger.d-block{
  color: #ffb3b3 !important;                 /* merah lembut */
  font-size: 12px;
  line-height: 1.4;

  padding: 8px 10px;
  border-radius: 6px;

  background: rgba(255, 77, 77, 0.10);       /* highlight tipis */
  border: 1px solid rgba(255, 77, 77, 0.22);
}

/* kalau isinya pakai <i>, jangan terlalu miring/kontras */
.binsur_account .text-danger.d-block i{
  font-style: italic;                         /* opsional: matiin italic biar lebih clean */
  opacity: 0.95;
}

/* kalau ada <a> di dalamnya */
.binsur_account .text-danger.d-block a{
  color: #ffd0d0;
  text-decoration: underline;
}
.binsur_account .text-danger.d-block a:hover{
  color: #ffffff;
}


/* =========================
   MEDIA QUERIES (tetap sama, tapi rem -> scoped calc)
========================= */

@media screen and (min-width: 1921px) {
  .binsur_account { background-size: cover; }
}

@media screen and (max-width: 1023px) {
  .pc {display:none;}	
  .mobile {display:block;}

  .binsur_account { padding-top: calc(var(--pb-rem) * 9.5); background-size: cover; }
  .binsur_account .con { padding: 0 calc(var(--pb-rem) * 2.5) calc(var(--pb-rem) * 10); }
  .binsur_account .lf { padding: calc(var(--pb-rem) * 10) calc(var(--pb-rem) * 5); }

  .binsur_account .lf:before,
  .binsur_account .lf:after{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* kalau kepotong karena overflow hidden di parent, ini bantu */
  .binsur_account .lf{
    overflow: visible;
  }

  .binsur_account .lf .fg_con { text-align: center; }

  .binsur_account .lf .fg_con .txt {
    display: block;
    width: 100%;
    margin-bottom: calc(var(--pb-rem) * 3);
  }

  .binsur_account .binsur_login_slide .inner { padding: 0 calc(var(--pb-rem) * 2.5); }
  .binsur_account .binsur_login_slide .slick-arrow { display: none !important; }

  .binsur_account .forget_area { max-width: none; margin: 0 calc(var(--pb-rem) * 2.5); padding: 0; }
  .binsur_account .forget_area .lf { max-width: none; }

  .binsur_account .find_info { max-width: none; margin: calc(var(--pb-rem) * 2) calc(var(--pb-rem) * 2.5) 0; }

  .binsur_account .m { display: inline; }
}

@media screen and (max-width: 1280px) {
  .go_quick { display: none; }
}

@media screen and (max-width: 768px) {
	
  .binsur_account { --pb-rem: 5.12px; }
  
  /* modal sedikit lebih lebar di tablet, tapi tetap compact */
  .binsur_account .binsur_modal .modal-dialog{
    max-width: min(94vw, calc(var(--pb-rem) * 110)); /* ~563px */
    margin: calc(var(--pb-rem) * 1.2) auto;
    padding-left: calc(var(--pb-rem) * 2.0);
    padding-right: calc(var(--pb-rem) * 2.0);
  }

  /* header/body lebih rapat */
  .binsur_account .binsur_modal__head{
    padding: calc(var(--pb-rem) * 3.0) calc(var(--pb-rem) * 3.2);
  }

  .binsur_account .binsur_modal__body{
    max-height: calc(100vh - (var(--pb-rem) * 28));
    padding: calc(var(--pb-rem) * 2.6) calc(var(--pb-rem) * 3.0);
  }

  .binsur_account .binsur_modal .lf{
    padding: calc(var(--pb-rem) * 3.0);
    border-radius: calc(var(--pb-rem) * 1.2);
  }

  /* tombol close sedikit lebih kecil */
  .binsur_account .binsur_modal__close{
    width: calc(var(--pb-rem) * 7.2);
    height: calc(var(--pb-rem) * 7.2);
    font-size: calc(var(--pb-rem) * 4.2);
  }
  
  .pc {display:none;}	
  .mobile {display:block;}
  .binsur_account .con > h1 img { max-width: 234px; }

  .binsur_account .lf .division span { font-size: calc(var(--pb-rem) * 2.3); }

  .binsur_account .lf .login_fb,
  .binsur_account .lf .go_login {
    height: 35px;
    line-height: 35px;
    font-size: calc(var(--pb-rem) * 2.4);
    border-radius: 3px;
  }

  .binsur_account .lf .login_fb i { width: 20px; height: 20px; background-size: 20px auto; }

  .binsur_account .lf_list { margin-bottom: calc(var(--pb-rem) * 3); }
  .binsur_account .lf_list li { margin-bottom: calc(var(--pb-rem) * 3); }

  .binsur_account .lf_list li .tit { font-size: calc(var(--pb-rem) * 2.3); }

  .binsur_account .lf_list li .inp { height: 35px; line-height: 35px; }

  .binsur_account .lf_list li .inp input {
    font-size: calc(var(--pb-rem) * 2.1);
    padding-right: calc(var(--pb-rem) * 10); /*disini ubah panjang input*/
  }

  .binsur_account .lf_list li .inp .timer {
    right: calc(var(--pb-rem) * 10);
    font-size: calc(var(--pb-rem) * 2.1);
  }

  .binsur_account .lf .go_login:before,
  .binsur_account .lf .go_login:after,
  .binsur_account .lf .login_fb:before,
  .binsur_account .lf .login_fb:after { width: 2px; height: 5px; }

  .binsur_account .lf .go_login:hover:before,
  .binsur_account .lf .go_login:hover:after { height: 8px; }

  .binsur_account .lf .fg_con { margin-top: calc(var(--pb-rem) * 3); }

  .binsur_account .lf .fg_con .txt { font-size: calc(var(--pb-rem) * 2.3); }

  .binsur_account .lf .fg_con .txt:after {
    width: 5px;
    height: 8px;
    background-size: 5px auto;
    top: -1px;
  }

  .binsur_account .lf .fg_con .txt:hover:after { background-position: 0 -8px; }

  .binsur_account .lf .fg_con .go_join {
    width: 136px;
    height: 30px;
    line-height: 29px;
    border-radius: 3px;
    font-size: calc(var(--pb-rem) * 2.1);
  }

  .binsur_account .ad_link img,
  .binsur_account .ad_link video { min-width: 0; height: 100%; }

  .binsur_account .lf_list li .btn_check { font-size: calc(var(--pb-rem) * 2.1); width: 45px; }

  .binsur_account .lf_list li.error {
    font-size: calc(var(--pb-rem) * 2.3);
    background-size: 16px auto;
    padding-left: calc(var(--pb-rem) * 5.8);
  }

  .binsur_account .lf_list li .inp.true:after,
  .binsur_account .lf_list li .inp.false:after {
    width: 14px;
    height: 13px;
    background-size: 14px auto;
    right: calc(var(--pb-rem) * 8);
    margin-top: -7px;
  }

  .binsur_account .lf_list li .inp.false:after { background-position: 0 -13px; }

  .binsur_account .lf .accept { font-size: calc(var(--pb-rem) * 2.3); }

  .binsur_account .lf .accept input[type=checkbox] + label {
    padding-left: calc(var(--pb-rem) * 5);
  }

  .binsur_account .lf .time { font-size: calc(var(--pb-rem) * 2.3); }
  .binsur_account .lf .time img { width: 15px; top: -2px; }

  .binsur_account .find_info { font-size: calc(var(--pb-rem) * 2.3); }

  .binsur_account .lf_list li .tw_sel > a {
    height: 35px;
    line-height: 35px;
    font-size: calc(var(--pb-rem) * 2.3);
  }

  .binsur_account .lf_list li .tw_sel li a { font-size: calc(var(--pb-rem) * 2.3); }
  .binsur_account .lf_list li .tw_sel a img { width: 24px; top: -2px; }
}

@media screen and (max-width: 420px) {
  .binsur_account .binsur_login_slide .inner { padding: 0; }
  .binsur_account .lf_list li.captcha .g-recaptcha { transform: scale(0.77); transform-origin: 0 0; }
}

@media screen and (max-width: 375px) {
  .captcha > div > div { transform: translate(-50%, 0) scale(0.8); }
}

@keyframes opaque {
  0% {
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0.1;
  }
}

@keyframes shadowPulse01 {
  22% {
    background: #ffffff;
  }
  44% {
    background: #ffea00;
  }
  66% {
    background: #ff0000;
  }
  88% {
    background: #86cefe;
  }
  100% {
    background: #ffffff;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* loading */
.loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
}
.loading .load {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}
.loading .circle-loader {
  position: relative;
  width: 0;
  height: 0;
}
.loading .circle-loader div {
  height: 10px;
  width: 10px;
  background-color: #87cfff;
  border-radius: 50%;
  position: absolute;
  animation: shadowPulse01 8s linear infinite, opaque 0.8s ease-in-out infinite both;
}

.loading .circle-loader > div:nth-child(1) { top: -25px; left: 0;}
.loading .circle-loader > div:nth-child(2) { top: -17px;left: 17px; animation-delay: 0.1s;}
.loading .circle-loader > div:nth-child(3) {top: 0; left: 25px; animation-delay: 0.2s;}
.loading .circle-loader > div:nth-child(4) { top: 17px; left: 17px; animation-delay: 0.3s;}
.loading .circle-loader > div:nth-child(5) { top: 25px; left: 0; animation-delay: 0.4s;}
.loading .circle-loader > div:nth-child(6) { top: 17px; left: -17px; animation-delay: 0.5s;}
.loading .circle-loader > div:nth-child(7) {top: 0; left: -25px; animation-delay: 0.6s;}
.loading .circle-loader > div:nth-child(8) { top: -17px; left: -17px; animation-delay: 0.7s;}
.loader {position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; width: 100px; height: 100px;}
.loader span { border: 10px solid transparent; background-image: linear-gradient(#000, #000),  linear-gradient(to right, rgba(255, 255, 255, 0.4) 65%,  #fff 100%); background-origin: border-box; background-clip: content-box, border-box;  border-radius: 50%; display: inline-block; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}
.loader span+ font {position: relative; font-size:10px; line-height:100px; font-family:'Roboto'; font-weight:700; display:block;  text-align:center; color:#fff; text-transform:uppercase;}

 .forgot-password-page .binsur_login {
                position: relative;
                z-index: 1;
            }

            .forgot-password-page .con {
                padding-top: calc(var(--pb-rem) * 2);
            }

            .forgot-password-page .forget_area {
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
                box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
            }

            .forgot-password-page .forget_area .lf {
                max-width: none;
            }

            .forgot-password-page .fp_intro {
                margin-bottom: calc(var(--pb-rem) * 3);
                text-align: center;
            }

            .forgot-password-page .fp_kicker {
                display: inline-block;
                margin-bottom: calc(var(--pb-rem) * 1.2);
                padding: calc(var(--pb-rem) * 0.7) calc(var(--pb-rem) * 1.4);
                border: 1px solid rgba(135, 207, 255, 0.45);
                border-radius: 999px;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.12em;
                color: #87cfff;
            }

            .forgot-password-page .fp_intro h1 {
                margin: 0 0 calc(var(--pb-rem) * 1.2);
                font-size: clamp(28px, 4vw, 38px);
                font-weight: 800;
                letter-spacing: 0.04em;
                color: #fff;
            }

            .forgot-password-page .fp_intro p {
                max-width: 460px;
                margin: 0 auto;
                font-family: 'Roboto', sans-serif;
                font-size: 13px;
                line-height: 1.7;
                color: #c7e4ff;
            }

            .forgot-password-page .fp_note {
                margin-bottom: calc(var(--pb-rem) * 2);
                padding: calc(var(--pb-rem) * 1.5) calc(var(--pb-rem) * 1.8);
                border: 1px solid rgba(135, 207, 255, 0.35);
                border-radius: 5px;
                background: rgba(8, 22, 35, 0.82);
                font-family: 'Roboto', sans-serif;
                font-size: 12px;
                line-height: 1.6;
                color: #c7e4ff;
            }

            .forgot-password-page .fp_note strong {
                color: #fff;
            }

            .forgot-password-page .fp-error {
                display: none;
                margin-top: 8px;
                font-family: 'Roboto', sans-serif;
                font-size: 12px;
                line-height: 1.5;
                color: #ffd5d5;
            }

            .forgot-password-page .fp-error.show {
                display: block;
            }

            .forgot-password-page .lf_list li .inp.is-invalid {
                border-color: #ff7a7a;
                box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12);
            }

            .forgot-password-page .lf_list li .inp.is-invalid:before {
                background:
                    url('/images/common/dot_r.jpg') 0 0 no-repeat,
                    url('/images/common/dot_r.jpg') right 0 no-repeat,
                    url('/images/common/dot_r.jpg') 0 bottom no-repeat,
                    url('/images/common/dot_r.jpg') right bottom no-repeat;
            }

            .forgot-password-page .go_login {
                width: 100%;
                cursor: pointer;
                font-family: inherit;
            }

            .forgot-password-page .go_login[disabled] {
                opacity: 0.65;
                cursor: not-allowed;
                pointer-events: none;
            }

            .forgot-password-page .go_login .spinner-border {
                vertical-align: -0.2em;
            }

            .forgot-password-page .find_info {
                margin-top: calc(var(--pb-rem) * 2.5);
            }

            @media (max-width: 991.98px) {
                .forgot-password-page .con {
                    padding-top: 0;
                }

                .forgot-password-page .fp_intro p {
                    max-width: 100%;
                }
            }
        </style>