/* [17 Okt 2026] Masuk / Daftar / Lupa kata sandi desktop v2 (layout/auth-halaman.blade.php). STAGING.
   HANYA >= 992px. Di bawah itu (HP & tablet) tidak ada satu aturan pun di berkas ini yang berlaku, kecuali
   penyembunyian elemen baru (.dex-auth2-sisip) supaya tampilan lama + auth-mobile.css tetap utuh.
   Prefiks kelas: dex-auth2-. Token warna di body.dex-auth2-aktif (kelas dipasang skrip sebaris di partial,
   cadangan JS); mode gelap mengikuti body.darkmode-page (cookie theme, tombol .pengalih-tema-masuk lama).
   Elemen lama yang disembunyikan (tidak dihapus): .news-feed, blok "confirm the URL" sebelum tab,
   .step-row lupa sandi, pil #password-strength-status, ikon .fa-caret-down referensi.
   Spesifisitas: halaman lama memuat <style> sebaris (mis. .input-field:focus, .parsley-success !important) dan
   ui-fixes.css (body.darkmode-page ... !important). Aturan di sini memakai awalan body.dex-auth2-aktif + id
   wadah supaya menang tanpa menyentuh berkas lama; !important hanya di tempat lawannya juga !important.
   :is() dipakai untuk meringkas cakupan (#login-tab, #register-tab, #forgot-pane). */

/* ===================================================================== bawah 992px: elemen baru tidak tampil */
.dex-auth2[hidden],
.dex-auth2-bahan[hidden] { display: none !important; }
@media (max-width: 991.98px) {
	.dex-auth2,
	.dex-auth2-sisip { display: none !important; }
}

@media (min-width: 992px) {

/* ===================================================================== token */
#dex-auth2 { --dex-auth2-css: 1; }

body.dex-auth2-aktif,
body:has(#dex-auth2) {
	--a2-kanan: clamp(480px, 42vw, 600px);
	--a2-latar: #F4F6FA;
	--a2-kartu: #FFFFFF;
	--a2-kartu-2: #F8FAFC;
	--a2-seg: #EDF1F7;
	--a2-input: #FFFFFF;
	--a2-garis: rgba(15, 23, 42, .08);
	--a2-garis-2: rgba(15, 23, 42, .16);
	--a2-teks: #0F172A;
	--a2-teks-2: #475569;
	--a2-teks-3: #64748B;
	--a2-aksen: #2563EB;
	--a2-aksen-2: #1D4ED8;
	--a2-aksen-bg: rgba(37, 99, 235, .10);
	--a2-hijau: #059669;
	--a2-hijau-bg: rgba(16, 185, 129, .12);
	--a2-merah: #DC2626;
	--a2-merah-bg: rgba(239, 68, 68, .09);
	--a2-kuning: #B45309;
	--a2-kuning-bg: rgba(245, 158, 11, .14);
	--a2-bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 22px 50px -24px rgba(15, 23, 42, .28);
	--a2-panel: radial-gradient(900px 520px at 88% 6%, rgba(56, 189, 248, .32), transparent 60%),
		radial-gradient(760px 520px at 0% 100%, rgba(99, 102, 241, .38), transparent 62%),
		linear-gradient(155deg, #0A1A4A 0%, #12307F 52%, #1D4ED8 100%);
}
body.darkmode-page.dex-auth2-aktif,
body.darkmode-page:has(#dex-auth2) {
	--a2-latar: #040C17;
	--a2-kartu: #0F1724;
	--a2-kartu-2: #131D2D;
	--a2-seg: #0A1220;
	--a2-input: #0B1320;
	--a2-garis: rgba(255, 255, 255, .08);
	--a2-garis-2: rgba(255, 255, 255, .15);
	--a2-teks: #F1F5F9;
	--a2-teks-2: #A5B4C8;
	--a2-teks-3: #7C8BA1;
	--a2-aksen: #60A5FA;
	--a2-aksen-2: #3B82F6;
	--a2-aksen-bg: rgba(59, 130, 246, .16);
	--a2-hijau: #34D399;
	--a2-hijau-bg: rgba(52, 211, 153, .14);
	--a2-merah: #F87171;
	--a2-merah-bg: rgba(248, 113, 113, .12);
	--a2-kuning: #FBBF24;
	--a2-kuning-bg: rgba(251, 191, 36, .14);
	--a2-bayang: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 54px -26px rgba(0, 0, 0, .85);
	--a2-panel: radial-gradient(900px 520px at 88% 6%, rgba(56, 189, 248, .18), transparent 60%),
		radial-gradient(760px 520px at 0% 100%, rgba(79, 70, 229, .26), transparent 62%),
		linear-gradient(155deg, #050E26 0%, #0B1B4D 55%, #13307F 100%);
}

/* ===================================================================== elemen lama disembunyikan (desktop v2) */
body.dex-auth2-aktif .register.register-with-news-feed > .news-feed,
body:has(#dex-auth2) .register.register-with-news-feed > .news-feed,
body.dex-auth2-aktif #page_container > .register-content > .text-center.dex-auth2-lama,
body:has(#dex-auth2) #page_container > .register-content > .text-center.p-b-15:has(+ ul.nopaddingtabs),
body.dex-auth2-aktif #forgot-pane .step-row,
body:has(#dex-auth2) #forgot-pane .step-row,
body.dex-auth2-aktif #register-tab #password-strength-status,
body:has(#dex-auth2) #register-tab #password-strength-status,
body.dex-auth2-aktif #forgot-pane #password-strength-status,
body:has(#dex-auth2) #forgot-pane #password-strength-status,
body.dex-auth2-aktif #reference-btn > .fa-caret-down,
body:has(#dex-auth2) #reference-btn > .fa-caret-down {
	display: none !important;
}

/* ===================================================================== kerangka */
body.dex-auth2-aktif.bg-white,
body.darkmode-page.dex-auth2-aktif.bg-white {
	background-color: var(--a2-latar) !important;
}
#dex-auth2.dex-auth2[hidden] { display: block !important; }
.dex-auth2 *, .dex-auth2 *::before, .dex-auth2 *::after,
.dex-auth2-sisip, .dex-auth2-sisip *, .dex-auth2-sisip *::before, .dex-auth2-sisip *::after { box-sizing: border-box; }
.dex-auth2-sisip[hidden], .dex-auth2-sisip [hidden] { display: none !important; }

body.dex-auth2-aktif .register.register-with-news-feed .right-content {
	position: relative;
	float: right;
	width: var(--a2-kanan);
	min-height: 100vh;
	margin: 0 !important;
	padding: 22px clamp(32px, 3.4vw, 56px) 20px;
	display: flex;
	flex-direction: column;
	background: var(--a2-latar);
	color: var(--a2-teks);
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 500;
}
body.darkmode-page.dex-auth2-aktif .register.register-with-news-feed .right-content { background: var(--a2-latar); }

/* tombol tema lama: tetap node & handler yang sama, hanya dibentuk ulang */
body.dex-auth2-aktif .right-content > .text-right {
	position: absolute;
	top: 20px;
	right: clamp(24px, 3vw, 44px);
	padding: 0 !important;
	z-index: 5;
}
body.dex-auth2-aktif .right-content .pengalih-tema-masuk {
	width: 40px !important;
	height: 40px !important;
	border-radius: 12px;
	border: 1px solid var(--a2-garis-2);
	background-color: var(--a2-kartu);
	background-size: 18px !important;
	opacity: 1 !important;
	transition: border-color .15s, transform .15s;
}
body.dex-auth2-aktif .right-content .pengalih-tema-masuk:hover { border-color: var(--a2-aksen); }
body.darkmode-page.dex-auth2-aktif .right-content .pengalih-tema-masuk { background-color: var(--a2-kartu-2); }

/* logo lama */
body.dex-auth2-aktif .right-content > .text-center,
body.dex-auth2-aktif #forgot-pane > .register-header.text-center {
	text-align: left !important;
	padding: 4px 0 0 !important;
	margin: 0 !important;
	min-height: 48px;
}
body.dex-auth2-aktif .right-content > .text-center img,
body.dex-auth2-aktif #forgot-pane > .register-header.text-center img {
	/* [17 Okt 2026] masukan Iqbal: logo terlalu kecil (dulu 148px) */
	width: clamp(240px, 18vw, 300px) !important;
	max-width: 100%;
	height: auto;
}

/* isi utama: di tengah kolom bila pendek, mengalir bila panjang */
body.dex-auth2-aktif .right-content > #page_container,
body.dex-auth2-aktif #forgot-pane > #register_content {
	align-self: center;
	width: 100%;
	max-width: 452px;
	margin: auto 0;
	padding-top: 26px;
	padding-bottom: 18px;
}

/* kartu */
body.dex-auth2-aktif .register.register-with-news-feed #page_container > .register-content,
body.dex-auth2-aktif .register.register-with-news-feed #forgot-pane > #register_content {
	padding: 26px 28px 24px !important;
	background: var(--a2-kartu);
	border: 1px solid var(--a2-garis);
	border-radius: 20px;
	box-shadow: var(--a2-bayang);
	color: var(--a2-teks);
	animation: dex-auth2-naik .45s cubic-bezier(.2, .7, .2, 1) both;
}
body.dex-auth2-aktif .register.register-with-news-feed .tab-pane > .register-content {
	padding: 0 !important;
	background: transparent;
}
body.dex-auth2-aktif #page_container .tab-content,
body.dex-auth2-aktif #page_container .tab-pane {
	background: transparent !important;
	padding: 0;
}

/* ===================================================================== tab Masuk / Buat Akun (node lama) */
body.dex-auth2-aktif #page_container ul.nopaddingtabs {
	display: flex;
	gap: 4px;
	margin: 0 0 22px;
	padding: 4px !important;
	border: 0;
	border-radius: 14px;
	background: var(--a2-seg) !important;
	font-size: 14px !important;
}
body.dex-auth2-aktif #page_container ul.nopaddingtabs::before,
body.dex-auth2-aktif #page_container ul.nopaddingtabs::after { display: none; }
body.dex-auth2-aktif #page_container ul.nopaddingtabs > li {
	float: none;
	flex: 1 1 0;
	width: auto;
	margin: 0;
	border: 0 !important;
	border-radius: 10px;
	transition: background-color .2s, box-shadow .2s;
}
body.dex-auth2-aktif #page_container ul.nopaddingtabs > li > a {
	display: block;
	margin: 0;
	padding: 10px 12px;
	border: 0 !important;
	border-radius: 10px;
	background: transparent !important;
	color: var(--a2-teks-3) !important;
	font-weight: 700;
	text-align: center;
	letter-spacing: .01em;
}
body.dex-auth2-aktif #page_container ul.nopaddingtabs > li > a:hover { color: var(--a2-teks) !important; }
body.dex-auth2-aktif #page_container ul.nopaddingtabs > li.active {
	background: var(--a2-kartu);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px -6px rgba(15, 23, 42, .25);
}
body.darkmode-page.dex-auth2-aktif #page_container ul.nopaddingtabs > li.active { background: var(--a2-kartu-2); }
body.dex-auth2-aktif #page_container ul.nopaddingtabs > li.active > a { color: var(--a2-aksen) !important; }

/* ===================================================================== kolom isian (node lama) */
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .form-group.input-group {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 14px !important;
}
body.dex-auth2-aktif #register-tab #password-strengthen.form-group.input-group { margin-bottom: 0 !important; }
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .form-group.input-group > label {
	display: block;
	margin: 0 0 6px;
	color: var(--a2-teks-2);
	font-size: 13px;
	font-weight: 600;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .input-icons {
	position: relative;
	margin-bottom: 0;
	background: transparent !important;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) :is(.input-field, .input-captcha, .email-code) {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 44px 0 44px;
	border: 1px solid var(--a2-garis-2);
	border-radius: 12px;
	background: var(--a2-input) !important;
	color: var(--a2-teks);
	font-size: 15px;
	font-weight: 500;
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) :is(.input-captcha, .email-code) { padding-left: 14px; }
body.dex-auth2-aktif #forgot-pane .email-code { padding-right: 132px; }
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) :is(.input-field, .input-captcha, .email-code)::placeholder { color: var(--a2-teks-3); opacity: 1; }
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) :is(.input-field, .input-captcha, .email-code):focus {
	border-color: var(--a2-aksen);
	box-shadow: 0 0 0 4px var(--a2-aksen-bg);
	background: var(--a2-input) !important;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) :is(.input-field, .input-captcha, .email-code).parsley-success {
	border-color: var(--a2-hijau) !important;
	background: var(--a2-input) !important;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) :is(.input-field, .input-captcha, .email-code).parsley-error {
	border-color: var(--a2-merah) !important;
	background: var(--a2-input) !important;
	box-shadow: 0 0 0 4px var(--a2-merah-bg);
}
body.dex-auth2-aktif #register-tab #input-referral[readonly] {
	background: var(--a2-kartu-2) !important;
	color: var(--a2-teks-2);
}

/* ikon kiri (span .dexauth-field-icon lama, di desktop lama tersembunyi) */
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .input-icons > .dexauth-field-icon {
	display: flex;
	position: absolute;
	left: 14px;
	top: 14px;
	width: 20px;
	height: 20px;
	color: var(--a2-teks-3);
	pointer-events: none;
	z-index: 2;
	transition: color .15s;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .input-icons:focus-within > .dexauth-field-icon { color: var(--a2-aksen); }

/* ikon mata / hapus (i.icon lama, handler onclick tetap) */
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .input-icons > i.icon {
	position: absolute;
	top: 0;
	right: 4px;
	height: 48px;
	min-width: 40px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--a2-teks-3);
	cursor: pointer;
	z-index: 3;
	border-radius: 10px;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .input-icons > i.icon:hover { color: var(--a2-aksen); }

/* pesan Parsley & status lama (username/email/konfirmasi): teks kecil, bukan blok berwarna */
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) .parsley-errors-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	color: var(--a2-merah);
	font-size: 12.5px;
	font-weight: 600;
}
body.dex-auth2-aktif #register-tab .strength-status {
	margin: 6px 0 0 !important;
	padding: 0 0 0 20px !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent no-repeat left center / 14px 14px !important;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}
body.dex-auth2-aktif #register-tab .strength-status.weak-password,
body.dex-auth2-aktif #register-tab .strength-status.medium-password {
	color: var(--a2-merah) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5h.01'/%3E%3C/svg%3E") !important;
}
body.dex-auth2-aktif #register-tab .strength-status.strong-password {
	color: var(--a2-hijau) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") !important;
}

/* syarat kata sandi (ul#password-rules lama .dexauth-rules; di desktop lama tersembunyi) + versi lupa sandi */
body.dex-auth2-aktif #register-tab ul.dexauth-rules,
body.dex-auth2-aktif #forgot-pane ul.dex-auth2-aturan {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 12px;
	margin: 8px 0 14px;
	padding: 0;
	list-style: none;
}
body.dex-auth2-aktif #register-tab ul.dexauth-rules > li,
body.dex-auth2-aktif #forgot-pane ul.dex-auth2-aturan > li {
	position: relative;
	padding-left: 20px;
	color: var(--a2-teks-3);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.6;
	transition: color .15s;
}
body.dex-auth2-aktif #register-tab ul.dexauth-rules > li::before,
body.dex-auth2-aktif #forgot-pane ul.dex-auth2-aturan > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1.5px solid var(--a2-garis-2);
	transition: background-color .15s, border-color .15s;
}
body.dex-auth2-aktif #register-tab ul.dexauth-rules > li.is-ok,
body.dex-auth2-aktif #forgot-pane ul.dex-auth2-aturan > li.is-ok { color: var(--a2-hijau); }
body.dex-auth2-aktif #register-tab ul.dexauth-rules > li.is-ok::before,
body.dex-auth2-aktif #forgot-pane ul.dex-auth2-aturan > li.is-ok::before {
	border-color: var(--a2-hijau);
	background: var(--a2-hijau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
body.dex-auth2-aktif #register-tab ul.dexauth-rules.is-flagged > li:not(.is-ok) { color: var(--a2-merah); }
body.dex-auth2-aktif #register-tab ul.dexauth-rules.is-flagged > li:not(.is-ok)::before { border-color: var(--a2-merah); }

/* dropdown "How did you hear about us" (node & handler lama) */
body.dex-auth2-aktif #register-tab #reference-btn.dropdown-btn {
	position: relative;
	display: flex;
	align-items: center;
	height: 48px;
	margin: 0 !important;
	padding: 0 44px;
	border: 1px solid var(--a2-garis-2);
	border-radius: 12px;
	background: var(--a2-input);
	color: var(--a2-teks);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
body.dex-auth2-aktif #register-tab #reference-btn.dropdown-btn::before,
body.dex-auth2-aktif #register-tab #reference-btn.dropdown-btn::after { display: none; }
body.dex-auth2-aktif #register-tab #reference-btn.dropdown-btn:focus,
body.dex-auth2-aktif #register-tab #reference-btn[aria-expanded="true"] {
	outline: none;
	border-color: var(--a2-aksen);
	box-shadow: 0 0 0 4px var(--a2-aksen-bg);
}
body.dex-auth2-aktif #register-tab #reference-btn.is-invalid {
	border-color: var(--a2-merah);
	box-shadow: 0 0 0 4px var(--a2-merah-bg);
}
body.dex-auth2-aktif #register-tab #reference-btn > span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
body.dex-auth2-aktif #register-tab #reference-btn > .dexauth-ref-icon,
body.dex-auth2-aktif #register-tab #reference-btn > .dexauth-ref-chevron {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--a2-teks-3);
}
body.dex-auth2-aktif #register-tab #reference-btn > .dexauth-ref-icon { left: 14px; }
body.dex-auth2-aktif #register-tab #reference-btn > .dexauth-ref-chevron { right: 14px; transition: transform .2s; }
body.dex-auth2-aktif #register-tab #reference-btn[aria-expanded="true"] > .dexauth-ref-chevron { transform: translateY(-50%) rotate(180deg); }
body.dex-auth2-aktif #register-tab #reference.dropdown-content {
	top: 54px;
	left: 0;
	right: 0;
	width: auto;
	max-height: 264px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--a2-garis-2);
	border-radius: 14px;
	background: var(--a2-kartu) !important;
	box-shadow: var(--a2-bayang);
	z-index: 30;
}
body.dex-auth2-aktif #register-tab #reference .dropdown-list {
	margin: 0 !important;
	padding: 10px 12px !important;
	border-radius: 9px;
	color: var(--a2-teks);
	font-size: 14px;
	font-weight: 500;
}
body.dex-auth2-aktif #register-tab #reference .dropdown-list .col-md-12 { padding: 0; }
body.dex-auth2-aktif #register-tab #reference .dropdown-list:hover,
body.dex-auth2-aktif #register-tab #reference .dropdown-list:focus {
	outline: none;
	background: var(--a2-aksen-bg);
	color: var(--a2-aksen);
}

/* teks bantu referral lama */
body.dex-auth2-aktif #register-tab .form-group.input-group > small.text-muted {
	display: block;
	margin-top: 6px;
	color: var(--a2-teks-3) !important;
	font-size: 12px;
	font-weight: 500;
}

/* kotak centang (node lama) */
body.dex-auth2-aktif #register-tab .form-group:has(> .checkbox),
body.dex-auth2-aktif #register-tab .dexauth-consent-check { margin: 0 0 4px !important; }
body.dex-auth2-aktif #register-tab .checkbox { margin: 0; }
body.dex-auth2-aktif #register-tab .checkbox > label,
body.dex-auth2-aktif #register-tab .checkbox > label.text-black {
	display: block;
	padding-left: 26px;
	color: var(--a2-teks-2) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.55;
	cursor: pointer;
}
body.dex-auth2-aktif #register-tab .checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 2px 0 0 -26px;
	accent-color: var(--a2-aksen);
	cursor: pointer;
}
body.dex-auth2-aktif #register-tab .checkbox a,
body.dex-auth2-aktif #register-tab .checkbox a.text-black,
body.dex-auth2-aktif #register-tab .checkbox a strong { color: var(--a2-aksen) !important; font-weight: 700; }

/* ===================================================================== tombol utama (node lama) */
body.dex-auth2-aktif #login-tab #login-btns,
body.dex-auth2-aktif #register-tab #register-btns-shadow,
body.dex-auth2-aktif #forgot-pane .form-data button.step,
body.dex-auth2-aktif #forgot-pane .form-data-done .btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--a2-aksen) 0%, var(--a2-aksen-2) 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 12px 26px -14px rgba(37, 99, 235, .85);
	transition: filter .15s, transform .1s, box-shadow .15s;
}
body.dex-auth2-aktif #login-tab #login-btns:hover,
body.dex-auth2-aktif #register-tab #register-btns-shadow:hover,
body.dex-auth2-aktif #forgot-pane .form-data button.step:hover,
body.dex-auth2-aktif #forgot-pane .form-data-done .btn-primary:hover { filter: brightness(1.07); }
body.dex-auth2-aktif #login-tab #login-btns:active,
body.dex-auth2-aktif #register-tab #register-btns-shadow:active,
body.dex-auth2-aktif #forgot-pane .form-data button.step:active { transform: translateY(1px); }
body.dex-auth2-aktif #login-tab #login-btns:focus-visible,
body.dex-auth2-aktif #register-tab #register-btns-shadow:focus-visible,
body.dex-auth2-aktif #forgot-pane .form-data button.step:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--a2-aksen-bg), 0 12px 26px -14px rgba(37, 99, 235, .85);
}
body.dex-auth2-aktif #login-tab .form-group.input-group:has(> #login-btns) { margin-bottom: 0 !important; }
body.dex-auth2-aktif #login-tab #login > br { display: none; }
body.dex-auth2-aktif #register-tab .register-buttons { margin: 14px 0 0 !important; }

/* status memproses (cegah klik ganda; teks lama tetap, hanya disamarkan) */
.dex-auth2-sibuk {
	position: relative;
	color: transparent !important;
	cursor: progress !important;
	filter: saturate(.85);
}
.dex-auth2-sibuk::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dex-auth2-putar .7s linear infinite;
}

/* tautan lama di bawah form */
body.dex-auth2-aktif #login-tab #login > .row,
body.dex-auth2-aktif #forgot-pane .dexauth-legacy-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 14px 0 0;
}
body.dex-auth2-aktif #login-tab #login > .row::before,
body.dex-auth2-aktif #login-tab #login > .row::after,
body.dex-auth2-aktif #forgot-pane .dexauth-legacy-links::before,
body.dex-auth2-aktif #forgot-pane .dexauth-legacy-links::after { display: none; }
body.dex-auth2-aktif #login-tab #login > .row > [class*="col-"],
body.dex-auth2-aktif #forgot-pane .dexauth-legacy-links > [class*="col-"] {
	float: none;
	width: auto;
	padding: 0;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) a.text-info {
	color: var(--a2-aksen) !important;
	font-size: 13.5px;
	font-weight: 600;
}
body.dex-auth2-aktif :is(#login-tab, #register-tab, #forgot-pane) a.text-info:hover { text-decoration: underline; }
body.dex-auth2-aktif #register-tab #register > .row.text-center { margin: 14px 0 0; }

/* ===================================================================== OAuth (node lama, gaya disesuaikan tema) */
body.dex-auth2-aktif #page_container .dex-oauth { margin: 18px 0 0; }
body.dex-auth2-aktif #page_container .dex-oauth-atau {
	margin: 0 0 14px;
	color: var(--a2-teks-3);
	font-size: 12.5px;
	font-weight: 600;
	text-transform: lowercase;
}
body.dex-auth2-aktif #page_container .dex-oauth-atau::before,
body.dex-auth2-aktif #page_container .dex-oauth-atau::after { border-top-color: var(--a2-garis-2); }
body.dex-auth2-aktif #page_container .dex-oauth-apple {
	max-width: none;
	height: 46px;
	border-radius: 12px;
	font-weight: 600;
}
body.darkmode-page.dex-auth2-aktif #page_container .dex-oauth-apple {
	background: #fff;
	border-color: #fff;
	color: #000;
}
body.dex-auth2-aktif #page_container .dex-oauth-pesan { border-radius: 10px; }

/* ===================================================================== pesan lama (alert) */
body.dex-auth2-aktif :is(#page_container, #forgot-pane) .alert {
	position: relative;
	margin: 0 0 16px !important;
	padding: 11px 36px 11px 14px !important;
	border-radius: 12px;
	border-width: 1px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.55;
}
body.dex-auth2-aktif :is(#page_container, #forgot-pane) .alert.alert-danger {
	background: var(--a2-merah-bg) !important;
	border-color: rgba(239, 68, 68, .35) !important;
	color: var(--a2-merah);
}
body.dex-auth2-aktif :is(#page_container, #forgot-pane) .alert.alert-success {
	background: var(--a2-hijau-bg) !important;
	border-color: rgba(16, 185, 129, .35) !important;
	color: var(--a2-hijau);
}
body.dex-auth2-aktif :is(#page_container, #forgot-pane) .alert ul { margin: 0; padding-left: 18px; }
body.dex-auth2-aktif :is(#page_container, #forgot-pane) .alert > br:first-of-type { display: none; }
body.dex-auth2-aktif :is(#page_container, #forgot-pane) .alert .close {
	position: absolute;
	top: 9px;
	right: 12px;
	color: inherit;
	opacity: .6;
	text-shadow: none;
}

/* ===================================================================== lupa sandi (node lama) */
body.dex-auth2-aktif #forgot-pane.m-t-login { margin-top: 0 !important; }
body.dex-auth2-aktif #forgot-pane .form-data.row,
body.dex-auth2-aktif #forgot-pane .form-data-done.row { margin: 0 !important; }
body.dex-auth2-aktif #forgot-pane .form-data::before,
body.dex-auth2-aktif #forgot-pane .form-data::after { display: none; }
body.dex-auth2-aktif #forgot-pane .form-data > .col-md-12 {
	float: none;
	width: auto;
	padding: 0;
}
body.dex-auth2-aktif #forgot-pane .form-data > .col-md-12 > .form-group { margin: 6px 0 0; }
body.dex-auth2-aktif #forgot-pane .captcha-row { gap: 8px; }
body.dex-auth2-aktif #forgot-pane .captcha-row .input-captcha {
	flex: 1 1 auto;
	height: 48px;
	letter-spacing: .12em;
}
body.dex-auth2-aktif #forgot-pane .captcha-row #captcha_image {
	height: 48px;
	max-width: 150px;
	margin: 0;
	border: 1px solid var(--a2-garis-2);
	border-radius: 12px;
	background: #fff;
}
body.dex-auth2-aktif #forgot-pane .captcha-row .btn-captcha-refresh {
	width: 48px;
	height: 48px;
	line-height: 48px;
	border: 1px solid var(--a2-garis-2);
	border-radius: 12px;
	background: var(--a2-kartu);
	color: var(--a2-aksen);
	transition: background-color .15s, border-color .15s, transform .3s;
}
body.dex-auth2-aktif #forgot-pane .captcha-row .btn-captcha-refresh:hover,
body.dex-auth2-aktif #forgot-pane .captcha-row .btn-captcha-refresh:focus {
	background: var(--a2-aksen-bg);
	border-color: var(--a2-aksen);
	color: var(--a2-aksen);
}
body.dex-auth2-aktif #forgot-pane #get_code {
	top: 4px;
	right: 4px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 9px;
	background: var(--a2-aksen-bg);
	color: var(--a2-aksen);
	font-weight: 700;
	box-shadow: none;
}
body.dex-auth2-aktif #forgot-pane #get_code:hover { background: var(--a2-aksen); color: #fff; }
body.dex-auth2-aktif #forgot-pane #get_code[disabled] { opacity: .75; cursor: default; }
body.dex-auth2-aktif #forgot-pane .form-data-done p { color: var(--a2-teks); font-size: 15px; font-weight: 600; }

/* ===================================================================== elemen baru: anti-phishing */
.dex-auth2-phish {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--a2-garis);
	border-radius: 14px;
	background: var(--a2-kartu-2);
}
.dex-auth2-phish p { margin: 0; }
.dex-auth2-phish-atas { display: flex; align-items: center; gap: 12px; }
.dex-auth2-phish-ikon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--a2-hijau-bg);
	color: var(--a2-hijau);
}
.dex-auth2-phish-teks { min-width: 0; }
.dex-auth2-phish-judul { color: var(--a2-teks-3); font-size: 12px; font-weight: 600; }
.dex-auth2-phish-url {
	color: var(--a2-teks);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
}
.dex-auth2-phish-url b { font-weight: 800; }
.dex-auth2-phish-skema { color: var(--a2-hijau); font-weight: 700; }
.dex-auth2-phish-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px !important;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--a2-teks-2);
}
.dex-auth2-phish-status-ikon {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--a2-teks-3);
}
.dex-auth2-phish[data-status="ok"] .dex-auth2-phish-status { color: var(--a2-hijau); }
.dex-auth2-phish[data-status="ok"] .dex-auth2-phish-status-ikon { background: var(--a2-hijau); box-shadow: 0 0 0 3px var(--a2-hijau-bg); }
.dex-auth2-phish[data-status="sub"] .dex-auth2-phish-status { color: var(--a2-aksen); }
.dex-auth2-phish[data-status="sub"] .dex-auth2-phish-status-ikon { background: var(--a2-aksen); box-shadow: 0 0 0 3px var(--a2-aksen-bg); }
.dex-auth2-phish[data-status="bahaya"] { border-color: rgba(239, 68, 68, .45); background: var(--a2-merah-bg); }
.dex-auth2-phish[data-status="bahaya"] .dex-auth2-phish-ikon { background: var(--a2-merah-bg); color: var(--a2-merah); }
.dex-auth2-phish[data-status="bahaya"] .dex-auth2-phish-status { color: var(--a2-merah); }
.dex-auth2-phish[data-status="bahaya"] .dex-auth2-phish-status-ikon { background: var(--a2-merah); box-shadow: 0 0 0 3px var(--a2-merah-bg); }
.dex-auth2-phish-tip {
	margin-top: 6px !important;
	color: var(--a2-teks-3);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}

/* ===================================================================== elemen baru: bantuan kolom */
.dex-auth2-caps {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--a2-kuning-bg);
	color: var(--a2-kuning);
	font-size: 12px;
	font-weight: 700;
}

.dex-auth2-meter { margin: 10px 0 0; }
.dex-auth2-meter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.dex-auth2-meter-bar > span {
	height: 5px;
	border-radius: 999px;
	background: var(--a2-garis-2);
	transition: background-color .25s;
}
.dex-auth2-meter-teks {
	margin: 6px 0 0;
	color: var(--a2-teks-3);
	font-size: 12px;
	font-weight: 600;
}
.dex-auth2-meter-nilai { font-weight: 800; color: var(--a2-teks-2); }
.dex-auth2-meter[data-tingkat="1"] .dex-auth2-meter-bar > span:nth-child(-n+1) { background: var(--a2-merah); }
.dex-auth2-meter[data-tingkat="2"] .dex-auth2-meter-bar > span:nth-child(-n+2) { background: #F59E0B; }
.dex-auth2-meter[data-tingkat="3"] .dex-auth2-meter-bar > span:nth-child(-n+3) { background: #10B981; }
.dex-auth2-meter[data-tingkat="4"] .dex-auth2-meter-bar > span { background: #059669; }
.dex-auth2-meter[data-tingkat="1"] .dex-auth2-meter-nilai { color: var(--a2-merah); }
.dex-auth2-meter[data-tingkat="2"] .dex-auth2-meter-nilai { color: var(--a2-kuning); }
.dex-auth2-meter[data-tingkat="3"] .dex-auth2-meter-nilai,
.dex-auth2-meter[data-tingkat="4"] .dex-auth2-meter-nilai { color: var(--a2-hijau); }

.dex-auth2-cocok {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	margin: 6px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--a2-teks-3);
}
.dex-auth2-cocok[data-status="kosong"] { display: none; }
.dex-auth2-cocok-ikon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
}
.dex-auth2-cocok[data-status="ok"] { color: var(--a2-hijau); }
.dex-auth2-cocok[data-status="ok"] .dex-auth2-cocok-ikon {
	border-color: var(--a2-hijau);
	background: var(--a2-hijau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}

.dex-auth2-progres { margin: 0 0 18px; }
.dex-auth2-progres p {
	display: flex;
	justify-content: space-between;
	margin: 0 0 6px;
	color: var(--a2-teks-3);
	font-size: 12px;
	font-weight: 600;
}
.dex-auth2-progres-nilai { color: var(--a2-teks); font-weight: 800; }
.dex-auth2-progres-bar {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--a2-seg);
}
.dex-auth2-progres-bar > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--a2-aksen), #10B981);
	transition: width .35s cubic-bezier(.2, .7, .2, 1);
}
.dex-auth2-progres[data-lengkap="1"] .dex-auth2-progres-nilai { color: var(--a2-hijau); }

.dex-auth2-ref { margin: 8px 0 0; }
.dex-auth2-ref-status {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--a2-teks-3);
}
.dex-auth2-ref-status[data-status="kosong"] { display: none; }
.dex-auth2-ref-status[data-status="ok"] { color: var(--a2-hijau); }
.dex-auth2-ref-status[data-status="salah"] { color: var(--a2-merah); }
.dex-auth2-ref-kartu {
	display: flex;
	gap: 12px;
	padding: 12px 14px;
	border: 1px dashed rgba(37, 99, 235, .35);
	border-radius: 14px;
	background: var(--a2-aksen-bg);
}
.dex-auth2-ref-ikon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--a2-kartu);
	color: var(--a2-aksen);
}
.dex-auth2-ref-kartu p { margin: 0; }
.dex-auth2-ref-judul { color: var(--a2-teks); font-size: 13.5px; font-weight: 800; }
.dex-auth2-ref-isi { margin-top: 2px !important; color: var(--a2-teks-2); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.dex-auth2-ref-tautan {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	color: var(--a2-aksen) !important;
	font-size: 12.5px;
	font-weight: 700;
}
.dex-auth2-ref-tautan:hover { text-decoration: underline; }

.dex-auth2-slot-captcha { margin: 4px 0 12px; display: flex; justify-content: center; }
.dex-auth2-slot-captcha:empty { display: none; }
.dex-auth2-antibot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	color: var(--a2-teks-3);
	font-size: 11.5px;
	font-weight: 600;
}
.dex-auth2-captcha-bantu {
	margin: 6px 0 0;
	color: var(--a2-teks-3);
	font-size: 12px;
	font-weight: 500;
}

/* stepper lupa sandi */
.dex-auth2-langkah { position: relative; margin: 0 0 20px; }
.dex-auth2-langkah-label {
	margin: 0 0 12px;
	color: var(--a2-aksen);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.dex-auth2-langkah-daftar {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dex-auth2-langkah-daftar > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--a2-teks-3);
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
	transition: color .2s;
}
.dex-auth2-langkah-daftar > li:first-child { align-items: flex-start; text-align: left; }
.dex-auth2-langkah-daftar > li:last-child { align-items: flex-end; text-align: right; }
.dex-auth2-langkah-bulat {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--a2-garis-2);
	background: var(--a2-kartu);
	color: var(--a2-teks-3);
	font-size: 13px;
	transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.dex-auth2-langkah-bulat b { font-weight: 800; }
.dex-auth2-langkah-daftar > li.aktif { color: var(--a2-teks); }
.dex-auth2-langkah-daftar > li.aktif .dex-auth2-langkah-bulat {
	border-color: var(--a2-aksen);
	background: var(--a2-aksen);
	color: #fff;
	box-shadow: 0 0 0 5px var(--a2-aksen-bg);
}
.dex-auth2-langkah-daftar > li.selesai { color: var(--a2-hijau); }
.dex-auth2-langkah-daftar > li.selesai .dex-auth2-langkah-bulat {
	border-color: var(--a2-hijau);
	background: var(--a2-hijau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	color: transparent;
}
.dex-auth2-langkah-jalur {
	position: absolute;
	z-index: 0;
	left: 17px;
	right: 17px;
	top: 47px;
	height: 3px;
	border-radius: 999px;
	background: var(--a2-garis-2);
}
.dex-auth2-langkah-jalur > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--a2-hijau), var(--a2-aksen));
	transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.dex-auth2-langkah[data-langkah="2"] .dex-auth2-langkah-jalur > span { width: 50%; }
.dex-auth2-langkah[data-langkah="3"] .dex-auth2-langkah-jalur > span { width: 100%; background: var(--a2-hijau); }
.dex-auth2-langkah-bantu {
	margin: 16px 0 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--a2-kartu-2);
	border: 1px solid var(--a2-garis);
}
.dex-auth2-langkah-bantu > p {
	display: none;
	margin: 0;
	color: var(--a2-teks-2);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.55;
}
.dex-auth2-langkah[data-langkah="1"] .dex-auth2-langkah-bantu > p[data-ke="1"],
.dex-auth2-langkah[data-langkah="2"] .dex-auth2-langkah-bantu > p[data-ke="2"],
.dex-auth2-langkah[data-langkah="3"] .dex-auth2-langkah-bantu > p[data-ke="3"] { display: block; }
.dex-auth2-langkah-bantu > p.dex-auth2-langkah-catatan { margin-top: 4px; color: var(--a2-teks-3); font-size: 12px; }

/* kaki kolom kanan */
.dex-auth2-kaki {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	padding-top: 10px;
	font-size: 12.5px;
	font-weight: 600;
}
.dex-auth2-kaki a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--a2-teks-3) !important;
}
.dex-auth2-kaki a:hover { color: var(--a2-aksen) !important; text-decoration: none; }

/* ===================================================================== panel kiri */
.dex-auth2-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: var(--a2-kanan);
	z-index: 1;
	display: flex;
	overflow: hidden;
	background: var(--a2-panel);
	color: #E2E8F0;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 500;
}
.dex-auth2-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%);
	pointer-events: none;
}
.dex-auth2-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	pointer-events: none;
	animation: dex-auth2-melayang 18s ease-in-out infinite alternate;
}
.dex-auth2-orb-1 { width: 420px; height: 420px; top: -120px; right: -80px; background: #38BDF8; }
.dex-auth2-orb-2 { width: 360px; height: 360px; bottom: -140px; left: -60px; background: #6366F1; animation-duration: 22s; animation-direction: alternate-reverse; }
body.darkmode-page .dex-auth2-orb { opacity: .3; }

.dex-auth2-panel-isi {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 40px clamp(36px, 4.6vw, 76px) 30px;
	overflow-y: auto;
	scrollbar-width: none;
}
.dex-auth2-panel-isi::-webkit-scrollbar { display: none; }
.dex-auth2-panel p { margin: 0; }
.dex-auth2-panel h2,
.dex-auth2-panel h3 {
	margin: 0;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
	color: #fff;
}
.dex-auth2-panel-tengah {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: auto 0;
}
.dex-auth2-panel [data-untuk] { display: none; }
.dex-auth2[data-mode="login"] .dex-auth2-panel [data-untuk~="login"],
.dex-auth2[data-mode="register"] .dex-auth2-panel [data-untuk~="register"],
.dex-auth2[data-mode="forgot"] .dex-auth2-panel [data-untuk~="forgot"],
.dex-auth2[data-mode="verifikasi"] .dex-auth2-panel [data-untuk~="verifikasi"] { display: block; }

.dex-auth2-ojk {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 7px 14px 7px 10px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.dex-auth2-ojk svg { flex: 0 0 auto; color: #6EE7B7; }

.dex-auth2-alis {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #93C5FD;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.dex-auth2-titik {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34D399;
	box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
	animation: dex-auth2-denyut 2.2s ease-out infinite;
}
.dex-auth2-judul {
	font-size: clamp(30px, 2.9vw, 44px) !important;
	font-weight: 800 !important;
	line-height: 1.12 !important;
	letter-spacing: -.025em;
}
.dex-auth2-sub {
	margin-top: 12px !important;
	max-width: 520px;
	color: rgba(226, 232, 240, .82);
	font-size: clamp(14.5px, 1.1vw, 16.5px);
	line-height: 1.6;
}

.dex-auth2-fitur {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dex-auth2-fitur > li { display: flex; gap: 14px; align-items: flex-start; }
.dex-auth2-fitur-ikon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	background: rgba(255, 255, 255, .09);
	color: #BFDBFE;
}
.dex-auth2-fitur h3 { font-size: 15px !important; font-weight: 700 !important; line-height: 1.4; }
.dex-auth2-fitur p { margin-top: 2px; color: rgba(226, 232, 240, .72); font-size: 13.5px; line-height: 1.55; }

.dex-auth2-tips {
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px;
	background: rgba(255, 255, 255, .07);
}
.dex-auth2-tips h3 { font-size: 15px !important; font-weight: 800 !important; margin-bottom: 10px !important; }
.dex-auth2-tips ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dex-auth2-tips li { display: flex; gap: 10px; color: rgba(226, 232, 240, .85); font-size: 13.5px; line-height: 1.55; }
.dex-auth2-tips li svg { flex: 0 0 auto; margin-top: 2px; color: #FCD34D; }

.dex-auth2-statistik {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.dex-auth2-statistik dt { color: #fff; font-size: clamp(18px, 1.6vw, 23px); font-weight: 800; letter-spacing: -.01em; }
.dex-auth2-statistik dd { margin: 2px 0 0; color: rgba(226, 232, 240, .7); font-size: 12px; font-weight: 600; line-height: 1.4; }

/* kartu harga */
.dex-auth2-harga {
	padding: 14px 16px 12px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px;
	background: rgba(8, 18, 48, .35);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.dex-auth2-harga-kepala {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.dex-auth2-harga-kepala h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px !important;
	font-weight: 800 !important;
}
.dex-auth2-langsung {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(52, 211, 153, .14);
	color: #6EE7B7;
	font-size: 11px;
	font-weight: 700;
}
.dex-auth2-langsung .dex-auth2-titik { width: 6px; height: 6px; }
.dex-auth2-harga[data-status="gagal"] .dex-auth2-langsung,
.dex-auth2-harga[data-status="memuat"] .dex-auth2-langsung { display: none; }
.dex-auth2-harga-tautan {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #BFDBFE !important;
	font-size: 12.5px;
	font-weight: 700;
}
.dex-auth2-harga-tautan:hover { color: #fff !important; text-decoration: none; }
.dex-auth2-harga-isi { margin: 0; padding: 0; list-style: none; }
.dex-auth2-harga-baris {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto 76px;
	align-items: center;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none !important;
	transition: background-color .15s;
}
.dex-auth2-harga-baris:hover { background: rgba(255, 255, 255, .07); }
.dex-auth2-harga-isi > li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.dex-auth2-koin-ikon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}
.dex-auth2-koin-ikon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.dex-auth2-koin-nama { min-width: 0; }
.dex-auth2-koin-nama b { display: block; color: #fff; font-size: 13.5px; font-weight: 800; }
.dex-auth2-koin-nama span { display: block; overflow: hidden; color: rgba(226, 232, 240, .6); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.dex-auth2-koin-harga {
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	border-radius: 6px;
	padding: 1px 4px;
	transition: background-color .6s, color .6s;
}
.dex-auth2-koin-harga.naik { background: rgba(52, 211, 153, .25); }
.dex-auth2-koin-harga.turun { background: rgba(248, 113, 113, .25); }
.dex-auth2-koin-ubah {
	justify-self: end;
	min-width: 68px;
	padding: 3px 8px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: center;
	background: rgba(255, 255, 255, .1);
	color: #E2E8F0;
}
.dex-auth2-koin-ubah.plus { background: rgba(52, 211, 153, .16); color: #6EE7B7; }
.dex-auth2-koin-ubah.minus { background: rgba(248, 113, 113, .16); color: #FCA5A5; }
.dex-auth2-harga-pesan { display: none; padding: 8px 6px; color: rgba(226, 232, 240, .7); font-size: 13px; }
.dex-auth2-harga[data-status="memuat"] .dex-auth2-harga-memuat,
.dex-auth2-harga[data-status="gagal"] .dex-auth2-harga-kosong { display: block; }
.dex-auth2-harga[data-status="gagal"] .dex-auth2-harga-isi { display: none; }
.dex-auth2-harga-catatan { margin-top: 6px !important; color: rgba(226, 232, 240, .5); font-size: 11px; }

.dex-auth2-panel-kaki {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(226, 232, 240, .6);
	font-size: 12px;
	font-weight: 600;
}

/* ===================================================================== animasi */
.dex-auth2-muncul { animation: dex-auth2-naik .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes dex-auth2-naik { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dex-auth2-putar { to { transform: rotate(360deg); } }
@keyframes dex-auth2-melayang { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-40px, 50px, 0) scale(1.12); } }
@keyframes dex-auth2-denyut {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
	70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ===================================================================== mode gelap: ui-fixes.css memasang
   `body.darkmode-page p|h3|label { color: var(--dark-text) }` (0,1,2) yang mengalahkan warna kelas tunggal di atas.
   Warna yang sama dipasang ulang dengan awalan body.darkmode-page agar token tetap berlaku. */
body.darkmode-page .dex-auth2-panel .dex-auth2-ojk,
body.darkmode-page .dex-auth2-panel .dex-auth2-judul,
body.darkmode-page .dex-auth2-panel h3 { color: #fff; }
body.darkmode-page .dex-auth2-panel .dex-auth2-alis { color: #93C5FD; }
body.darkmode-page .dex-auth2-panel .dex-auth2-sub { color: rgba(226, 232, 240, .82); }
body.darkmode-page .dex-auth2-panel .dex-auth2-fitur p { color: rgba(226, 232, 240, .72); }
body.darkmode-page .dex-auth2-panel .dex-auth2-harga-pesan { color: rgba(226, 232, 240, .7); }
body.darkmode-page .dex-auth2-panel .dex-auth2-harga-catatan { color: rgba(226, 232, 240, .5); }
body.darkmode-page .dex-auth2-panel .dex-auth2-panel-kaki { color: rgba(226, 232, 240, .6); }
body.darkmode-page .dex-auth2-sisip .dex-auth2-phish-judul,
body.darkmode-page .dex-auth2-sisip .dex-auth2-phish-tip,
body.darkmode-page .dex-auth2-sisip.dex-auth2-antibot,
body.darkmode-page .dex-auth2-sisip.dex-auth2-captcha-bantu,
body.darkmode-page .dex-auth2-sisip .dex-auth2-meter-teks,
body.darkmode-page .dex-auth2-sisip.dex-auth2-cocok,
body.darkmode-page .dex-auth2-sisip .dex-auth2-ref-status,
body.darkmode-page .dex-auth2-sisip.dex-auth2-progres p { color: var(--a2-teks-3); }
body.darkmode-page .dex-auth2-sisip .dex-auth2-phish-url,
body.darkmode-page .dex-auth2-sisip .dex-auth2-ref-judul { color: var(--a2-teks); }
body.darkmode-page .dex-auth2-sisip .dex-auth2-phish-status,
body.darkmode-page .dex-auth2-sisip .dex-auth2-ref-isi,
body.darkmode-page .dex-auth2-sisip .dex-auth2-langkah-bantu > p { color: var(--a2-teks-2); }
body.darkmode-page .dex-auth2-sisip .dex-auth2-langkah-bantu > p.dex-auth2-langkah-catatan { color: var(--a2-teks-3); }
body.darkmode-page .dex-auth2-sisip .dex-auth2-langkah-label { color: var(--a2-aksen); }
body.darkmode-page .dex-auth2-sisip.dex-auth2-caps { color: var(--a2-kuning); }
body.darkmode-page .dex-auth2-phish[data-status="ok"] .dex-auth2-phish-status,
body.darkmode-page .dex-auth2-sisip.dex-auth2-cocok[data-status="ok"],
body.darkmode-page .dex-auth2-sisip .dex-auth2-ref-status[data-status="ok"] { color: var(--a2-hijau); }
body.darkmode-page .dex-auth2-phish[data-status="sub"] .dex-auth2-phish-status { color: var(--a2-aksen); }
body.darkmode-page .dex-auth2-phish[data-status="bahaya"] .dex-auth2-phish-status,
body.darkmode-page .dex-auth2-sisip .dex-auth2-ref-status[data-status="salah"] { color: var(--a2-merah); }
body.darkmode-page.dex-auth2-aktif #forgot-pane .form-data-done p { color: var(--a2-teks); }

/* layar pendek: kurangi isi panel bertahap */
@media (max-height: 860px) {
	.dex-auth2-statistik { display: none; }
	.dex-auth2-panel-tengah { gap: 18px; }
}
@media (max-height: 740px) {
	.dex-auth2-fitur p { display: none; }
	.dex-auth2-sub { margin-top: 8px !important; }
}
@media (max-height: 620px) {
	.dex-auth2-harga { display: none; }
}

} /* akhir @media (min-width: 992px) */

/* ===================================================================== kurangi gerak */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
	.dex-auth2-muncul,
	.dex-auth2-orb,
	.dex-auth2-titik,
	body.dex-auth2-aktif .register.register-with-news-feed #page_container > .register-content,
	body.dex-auth2-aktif .register.register-with-news-feed #forgot-pane > #register_content { animation: none !important; }
	.dex-auth2-progres-bar > span,
	.dex-auth2-langkah-jalur > span,
	.dex-auth2-koin-harga,
	.dex-auth2-meter-bar > span { transition: none !important; }
	.dex-auth2-sibuk::after { animation-duration: 1.6s; }
}

/* [17 Okt 2026] lencana reCAPTCHA (position:fixed, menjorok ke kanan) masih membuat halaman bisa digeser ke samping
   karena overflow-x hanya dipotong di body; potong juga di html (file ini hanya dimuat di halaman masuk/daftar/lupa sandi). */
@media (min-width: 768px) {
	html { overflow-x: hidden; }
}