body {
	font-family: "Poppins", sans-serif;
	background-color: #0b1b45;
	padding-top: 70px;
}

hr {
	border-top: 2px solid #fcd97b;
}

.main-bg {
	background-color: #0b1b45;
	color: #fff;
}

/* Logo */
.logo img {
	width: 100%;
}

/* Start Navbar */
.nav-link {
	color: #f2d482 !important;
	font-weight: 500;
	transition: color 0.2s ease-in-out;
	padding: 0.5rem 0.85rem;
}

.nav-link:hover {
	color: #f2f2ed !important;
}

.navbar-nav li.active>a {
	color: #f2f2ed !important;
	font-weight: 600;
	border-bottom: 2px solid #f9d65d;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(252,217,123)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:focus,
.navbar-toggler:hover {
	outline: none;
	box-shadow: 0 0 5px rgba(252, 217, 123, 0.6);
}

.navbar .nav-link,
.navbar .dropdown-toggle {
	height: 56px;
	line-height: 56px;
	padding-top: 0;
	padding-bottom: 0;
}

.navbar .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
}

#navbarCenter {
	justify-content: center;
}

#mainMenu .nav-item+.nav-item {
	margin-left: 0.25rem;
}

.user-name {
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.navbar .dropdown-menu {
	background: rgba(7, 36, 72, 0.96);
	border: 1px solid rgba(242, 212, 130, 0.15);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	min-width: 12rem;
	padding: 0.25rem;
}

.navbar .dropdown-item {
	color: #f2d482;
	padding: 0.45rem 0.75rem;
	border-radius: 0.375rem;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
	background: rgba(242, 212, 130, 0.12);
	color: #f2f2ed;
}

.navbar .dropdown-item.logout {
	background: transparent;
	border: 0;
}

.navbar .dropdown-item.logout:hover {
	background: rgba(242, 212, 130, 0.12);
}

/* End Navbar */

/* Tombol login/Registrasi */
.btn-login {
	background-color: #e74c3c;
	border: none;
	color: #fff;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 6px;
	transition: all 0.2s ease-in-out;
}

.btn-login:hover {
	background-color: #c0392b;
	color: #fff;
}

/* End Navbar */

/* Start Global Style */
.headling-center {
	display: block;
	text-align: center;
	transform: scaleX(1.5);
	transform-origin: center;
	font-size: 2.5rem;
	width: 100%;
	margin: 0 auto;
}

/* End Global Style */

/* Start Home Page */
.btn-token {
	background-color: #0b1b45;
	border: 1px solid #fcd97b;
	color: #fcd97b;
	padding: 8px 16px;
	border-radius: 25px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-token:hover {
	background-color: #fcd97b;
	color: #0b1b45;
}

.token-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.5;
}

.token-line img {
	height: 16px;
	width: 16px;
	object-fit: contain;
	vertical-align: middle;
}

.token-line i {
	font-size: 16px;
	vertical-align: middle;
}

.form-card {
	background-color: #122a5a;
	border: 2px solid #fcd97b;
	border-radius: 15px;
}

.lyfe-home-form .form-control {
	background-color: #4d6081;
	border: 2px solid #fcd97b;
	border-radius: 9px;
	color: #fff;
}

.lyfe-home-form .form-control::placeholder {
	color: #b0b6ca;
}

.btn-primary {
	background-color: #1d2eb0;
	border: 2px solid #fcd97b;
	font-weight: 600;
	border-radius: 9px;
}

.btn-primary:hover {
	background-color: #364bec;
}

.btn-danger {
	background-color: #e5474c;
	border: 2px solid #fcd97b;
	font-weight: 600;
	border-radius: 9px;
}

.btn-danger:hover {
	background-color: #ff5b60;
}

.headling-hasil {
	display: inline-block;
	transform: scaleX(1.5);
	transform-origin: left;
	font-size: 2.5rem;
}

.text-description {
	font-size: 18px;
	line-height: 1.8;
	color: #e3e3e3;
	text-align: justify;
}

.lyfe-strong {
	margin-left: 25px;
	display: inline-block;
}

.fa-question-circle-o {
	color: #78746c;
}

.dark-blue-bg {
	background-color: #172a5a;
	color: white;
}

#hasil-data .box-nomor-hasil {
	border: 2px solid #f5da7f80;
	border-left: 0px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	position: absolute;
	padding: 3px 17px;
	font-size: 79px;
	top: 0;
	left: 0;
	margin-top: 83px;
	line-height: 0.9;
}

.text-kosong {
	padding-top: 50px;
	height: 185px;
}

#hasil-data p.text-isi {
	max-height: 231px;
	overflow: auto;
	padding-left: 75px;
	margin-left: 20px;
	text-indent: -20px;
	padding-left: 20px;
	font-size: 0.9rem;
}

.text-warning2 {
	color: #c3b594 !important;
}

.btn-hitung {
	display: ruby;
}

.icon-checklist {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: auto;
}

.result-box {
	border-radius: 12px;
	max-height: 212px;
	overflow-y: auto;
	overflow-x: hidden;
	border: 2px solid #fcd97b;
	border-radius: 15px;
	background-color: #122a5a;
}

.result-box::-webkit-scrollbar {
	width: 6px;
}

.result-box::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 6px;
}

.result-box::-webkit-scrollbar-thumb:hover {
	background-color: #fcd97b;
}

.title-box-hasil {
	transform: scaleX(1.5);
}

/* End Home Page */

/* Start Get Your Reading Page */
.report-item {
	padding: 15px;
}

.horizontal-layout {
	display: flex;
	align-items: center;
}

/* Style Ikon SVG */
.icon-container {
	width: 50px;
	height: 50px;
	margin-right: 15px;
	flex-shrink: 0;
}

.item-icon {
	width: 100%;
	height: 100%;
}

/* Style Teks */
.text-content {
	display: flex;
	flex-direction: column;
	color: white;
}

.item-title {
	font-size: 0.9rem;
	margin-bottom: 2px;
	white-space: nowrap;
}

/* Style Token Info */
.token-info {
	font-size: 0.8rem;
	display: flex;
	align-items: center;
}

/* Token line style (match desain GYR di homepage) */
.report-item-gyr .token-info {
	color: #f2d482;
	font-weight: 500;
}

.report-item-gyr .token-info small {
	color: #f2d482;
	font-size: 0.8rem;
}

.report-item-gyr .token-info.token-line {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}


.token-info .fa {
	margin-right: 5px;
}

.small-icon {
	width: 14px;
	height: 14px;
	margin-right: 4px;
	vertical-align: middle;
}

.token-small {
	margin-left: 5px;
}

/* Button report */
.lyfe-report-button {
	background-color: #e5474c;
	border-radius: 12px;
	border: 2px solid white;
	outline: none;
	cursor: pointer;
	padding: 15px 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	width: fit-content;
	display: flex;
	align-items: center;
}

.button-inner-content {
	display: flex;
	align-items: center;
	gap: 15px;
}

.report-icon {
	font-size: 36px;
	color: white;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.main-text {
	color: #0b1b45;
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.token-details {
	display: flex;
	align-items: center;
	color: #0b1b45;
	font-size: 14px;
	font-weight: 500;
}

.token-q-icon {
	color: #78746c;
	font-size: 16px;
	margin-right: 5px;
}

.emoji-icon {
	font-size: 18px;
	margin-left: 5px;
	line-height: 1;
}

.lyfe-report-button:hover {
	background-color: #d13a40;
}

.lyfe-report-section {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	padding: 17px;
	flex-direction: column;
	font-family: "Poppins", sans-serif;
	color: #fff;
}

img .icon-doc {
	width: 50px;
}

.compass-outer {
	width: 100%;
	display: flex;
	justify-content: center;
}

.compass-wrapper {
	position: relative;
	width: 350px;
	height: 350px;
	margin: 0 auto;
}

.compass-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	object-fit: cover;
}

.compass-center {
	position: absolute;
	left: 49.5%;
	top: 56%;
	width: 75px;
	height: 75px;
	background: #fae390;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: bold;
	color: #d22c2c;
	border: 3px solid #b1a264;
	z-index: 2;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}

.compass-circle {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 5px solid #d22c2c;
	border-radius: 50%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	z-index: 1;
}

.compass-num {
	position: absolute;
	font-size: 20px;
	user-select: none;
	z-index: 2;
}

.arah_utara {
	left: 50%;
	top: 4%;
	transform: translate(-50%, 0);
}

.arah_timur_laut {
	left: 95%;
	top: 18%;
	transform: translate(-50%, 0);
}

.arah_timur {
	left: 104%;
	top: 55.8%;
	transform: translate(-50%, -50%);
}

.arah_tenggara {
	left: 96%;
	top: 85%;
	transform: translate(-50%, 0);
}

.arah_selatan {
	left: 50%;
	top: 115%;
	transform: translate(-50%, -100%);
}

.arah_barat_daya {
	right: 92%;
	top: 85%;
	transform: translate(-50%, 0);
}

.arah_barat {
	right: 100%;
	top: 55.8%;
	transform: translate(-50%, -50%);
}

.arah_barat_laut {
	left: 5%;
	top: 18.4%;
	transform: translate(-50%, 0);
}

/* Sinergi kolaborasi */
.partner-group {
	display: flex;
	align-items: center;
}

.partner-group .partner-actions {
	margin-left: 8px;
	white-space: nowrap;
}

.partner-group .btn {
	margin-left: 4px;
}

@media (max-width: 576px) {
	.partner-group {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.partner-group .input {
		width: 100%;
	}

	.partner-group .input.small {
		width: 100%;
	}

	.partner-group .partner-actions {
		margin-left: 0;
		margin-top: 6px;
		display: flex;
		justify-content: flex-end;
		gap: 6px;
	}

	.partner-group .btn {
		margin-left: 0;
	}
}

/* End Get Your Reading Page */

.lyfe-report-card {
	border: 2px solid #f2d482;
	border-radius: 10px;
	padding: 25px 30px;
	width: 100%;
	max-height: 320px;
	min-height: 320px;
	overflow-y: auto;
	line-height: 1.7;
	font-size: 0.95rem;
	scrollbar-width: thin;
	scrollbar-color: #f2d482 #0b1b45;
}

.element-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.8;
	font-size: 1.2rem;
	letter-spacing: 8px;
	text-align: center;
}

.angka-wrapper p {
	margin: 4px 0;
}

.element-text p {
	margin: 4px 0;
}

.alignment-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.form-tgl-lahir {
	display: flex;
	gap: 25px;
	align-items: center;
}

.form-container {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 15px;
}

.input {
	border: 2px solid #f2d482;
	background-color: transparent;
	border-radius: 6px;
	padding: 8px 12px;
	color: #fff;
	outline: none;
	width: 220px;
	font-size: 0.9rem;
}

.input-tgl-lahir-baru {
	margin-left: 12px;
	padding: 4px 12px;
	border-radius: 5px;
}

@media (max-width: 575.98px) {
	.input-tgl-lahir-baru {
		margin-left: 0px;
		padding: 4px 12px;
		border-radius: 5px;
	}
}

.input.small {
	width: 100px;
}

.input::placeholder {
	color: #aaa;
}

.token-button-fixed,
.token-button-desktop {
	border: 2px solid #f2d482;
	background: transparent;
	color: #f2d482;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
}

/* desktop: fixed di kanan bawah */
.token-button-desktop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1050;
	/* di atas konten biasa */
}

.token-button-fixed:hover {
	background-color: #f2d482;
	color: #031b40;
}

.faq-section {
	padding: 60px 0;
}

.faq-title {
	font-size: 28px;
	letter-spacing: 1px;
}

.faq-item {
	margin-bottom: 25px;
}

.faq-question {
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 8px;
}

.faq-answer {
	color: #fff;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* Start Contact Page */
.contact-section p {
	font-size: 15px;
	line-height: 1.7;
}

.contact-section ul {
	list-style: none;
	padding: 0;
	margin: 20px 0 20px;
	margin-left: 30px;
}

.contact-section ul li {
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 20px;
}

.contact-form .form-box {
	background-color: #172c56;
	border: 1px solid #f2d482;
	border-radius: 8px;
	padding: 25px;
}

.contact-form textarea {
	width: 100%;
	height: 120px;
	border: none;
	border-radius: 5px;
	padding: 10px;
	margin: 10px 0;
	font-family: inherit;
	resize: none;
}

.contact-form textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px #f2d482;
}

.btn-send {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 8px 20px;
	border-radius: 6px;
	cursor: pointer;
}

.btn-send:hover {
	background-color: #0069d9;
}

.note {
	font-size: 13px;
	margin-top: 15px;
	color: #ccc;
}

.btn-wrapper {
	text-align: right;
	margin-top: 5px;
}

.contact-text p {
	font-size: 20px;
}

.contact-email {
	margin-top: 11rem;
}

/* End Contact Page */

/* Start Purchase Token Page */
.token-card {
	position: relative;
	background: transparent;
	border: 2px solid transparent;
	border-radius: 15px;
	padding: 25px 10px 10px;
	transition: all 0.3s ease;
	cursor: pointer;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.token-card:hover {
	transform: translateY(-5px);
}

.token-card.active {
	border: 2px solid #f7c15a;
	box-shadow: 0 0 25px rgba(247, 193, 90, 0.4);
}

.token-icon {
	width: 100%;
	height: auto;
	max-width: 200px;
}

.token-icon-premium {
	max-width: 127px;
}

.token-title {
	font-size: 22px;
	font-weight: 700;
	margin: 10px 0 0;
}

.token-price {
	position: absolute;
	bottom: 15px;
	right: 20px;
	font-size: 20px;
	font-weight: 500;
	margin: 0;
}

.token-note {
	color: #ffffff;
	font-size: 14px;
}

.token-card.premium {
	border: 2px solid #f2d482;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 0 10px rgba(242, 212, 130, 0.3);
}

/* End Purchase Token Page */

/* Start Login Page */
.lyfe-login-section {
	padding: 60px 0;
}

.lyfe-login {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.lyfe-slogan-box {
	padding-right: 80px !important;
}

.lyfe-login-card {
	background-color: #172c56;
	border: 1px solid #f2d482;
	border-radius: 10px;
}

.lyfe-logo h2 {
	color: #ffc107;
	font-size: 2.5rem;
}

.lyfe-login-card h4 {
	font-weight: 500;
}

.lyfe-btn-masuk {
	background-color: #28a745;
	border-color: #28a745;
	height: 2rem;
}

.lyfe-btn-signup {
	background-color: #dc3545;
	border-color: #dc3545;
	height: 2rem;
}

.text-lyfe-login {
	transform: scaleX(1.2);
	font-size: 3rem;
	transform-origin: left;
	padding-right: 23px;
}

/* End Login Page */

.mt-1 {
	margin-top: 1rem !important;
}

.mt-2 {
	margin-top: 2rem !important;
}

.mt-3 {
	margin-top: 3rem !important;
}

.mt-4 {
	margin-top: 4rem !important;
}

.mt-7 {
	margin-top: 7rem !important;
}

.mt-8 {
	margin-top: 8rem !important;
}

.mt-9 {
	margin-top: 9rem !important;
}

.mt-10 {
	margin-top: 10rem !important;
}

.mt-11 {
	margin-top: 11rem !important;
}

.mb-1 {
	margin-bottom: 1rem !important;
}

.text-warning {
	color: #fcd97b !important;
}

.headling-form {
	width: 100%;
	margin: auto;
	max-width: 240px;
	letter-spacing: 2px;
}

.text-large {
	font-size: 23px;
}

/* Responsif */

@media (min-width: 992px) {
	.history-wrapper {
		margin-left: 100px;
	}
}

@media (max-width: 991.98px) {
	.history-wrapper {
		margin-left: 0;
	}
}

/* Tablet (Bootstrap breakpoint) */
@media (max-width: 991.98px) {
	body {
		width: 100%;
		overflow-x: hidden;
	}

	.container,
	.container-fluid {
		max-width: 100%;
		overflow-x: hidden;
	}

	#navbarCenter {
		max-height: 70vh;
		overflow-y: auto;
	}

	.nav-link {
		padding: 0.5rem 0.75rem;
	}

	.headling-hasil {
		width: 580px;
		transform: scaleX(1.5);
		transform-origin: left;
	}

	.right-col h1 {
		width: 200px;
		transform: scaleX(1.5);
		transform-origin: left;
	}

	.headling-center {
		transform: scaleX(1.2);
		font-size: 1.5rem;
	}

	.navbar-nav li.active a {
		display: inline-block;
		border-bottom: 2px solid #f9d65d;
	}

	/* Start Home Page */
	.h4.text-warning {
		font-size: 1rem !important;
		line-height: 1.4;
	}

	.text-large {
		font-size: 0.95rem !important;
	}

	.token-line {
		font-size: 11px !important;
	}

	.token-line img {
		height: 14px;
		width: 14px;
	}

	.token-line i {
		font-size: 14px;
	}

	.text-warning2 {
		font-size: 11px !important;
	}

	.text-kosong {
		padding-top: 50px !important;
		height: 220px !important;
	}

	.title-box-hasil {
		transform: scaleX(1.2);
		font-size: 1rem;
	}

	/* End Home Page */

	.form-container {
		justify-content: flex-end;
		width: 100%;
	}

	.token-button-fixed {
		white-space: nowrap;
		width: 13%;
		bottom: 15px;
		right: 15px;
		font-size: 0.7rem;
		padding: 8px 16px;
	}

	/* Start Contact Page */
	.contact-email {
		margin-top: 2rem;
	}

	/* End Contact Page */

	/* Start Purchase Token Page */
	.token-price {
		position: absolute;
		right: 5px;
		font-size: 15px;
		bottom: 3px;
	}

	/* End Purchase Token Page */
}

/* Mobile landscape dan kecil */
@media (max-width: 768px) {
	body {
		width: 100%;
		overflow-x: hidden;
	}

	.container,
	.container-fluid {
		max-width: 100%;
		overflow-x: hidden;
	}

	.logo img {
		width: 75%;
	}

	.form-card {
		margin-bottom: 20px;
	}

	.headling-hasil {
		width: 450px;
		transform: scaleX(1.5);
		transform-origin: left;
	}

	.headling-center {
		width: 300px;
		transform: scaleX(1);
		font-size: 1.5rem;
	}

	.input {
		width: 100%;
	}

	.input.small {
		width: 48%;
	}

	.form-container {
		gap: 8px;
	}

	.token-button-fixed {
		white-space: nowrap;
		width: 13%;
		bottom: 15px;
		right: 15px;
		font-size: 0.5rem;
		padding: 8px 16px;
	}

	/* Start get your reading */
	.compass-wrapper {
		transform: scale(0.8);
		transform-origin: top center;
	}

	/* End get your reading */

	/* Start Purchase Token Page */
	.token-price {
		position: absolute;
		right: 5px;
		font-size: 15px;
		bottom: 3px;
	}

	/* End Purchase Token Page */
}

/* Mobile kecil (HP) */
@media (max-width: 575.98px) {
	body {
		width: 100%;
		overflow-x: hidden;
	}

	.container,
	.container-fluid {
		max-width: 100%;
		overflow-x: hidden;
	}

	.headling-center {
		font-size: 2rem !important;
		transform: scaleX(1.2) !important;
		text-align: left !important;
	}

	.headling-hasil {
		width: 220px;
		transform: scaleX(1.3);
		transform-origin: left;
	}

	/* Start Home Page */
	.row.align-items-stretch {
		display: flex !important;
		flex-direction: column !important;
	}

	.right-col {
		order: 1;
	}

	.left-col {
		order: 2;
	}

	#hasil-data-mobile {
		order: 3;
	}

	#hasil-data-mobile {
		width: 100% !important;
		max-width: 100% !important;
	}

	#hasil-data-mobile {
		width: 90% !important;
		margin: 0 auto;
	}

	.h4.text-warning {
		font-size: 1rem !important;
		line-height: 1.4;
	}

	.text-large {
		font-size: 0.95rem !important;
	}

	.token-line {
		font-size: 11px !important;
	}

	.token-line img {
		height: 14px;
		width: 14px;
	}

	.token-line i {
		font-size: 14px;
	}

	.text-warning2 {
		font-size: 11px !important;
	}

	.text-kosong {
		padding-top: 50px !important;
		height: 220px !important;
	}

	.lyfe-pola-box h5 {
		font-size: 1.2rem;
		color: #ffc107 !important;
		border-bottom: 2px solid #ffc107 !important;
		margin-bottom: 1rem !important;
	}

	.title-box-hasil {
		transform: scaleX(1.2);
		font-size: 1rem;
	}

	/* End Home Page */

	.form-container {
		flex-direction: column;
		align-items: stretch;
	}

	.input,
	.input.small {
		width: 100%;
	}

	.token-button-fixed {
		width: auto;
		padding: 6px 12px;
	}

	/* Start Get Your Reading Page */
	.items-row {
		display: grid !important;
		grid-template-columns: repeat(1, 1fr);
		gap: 15px;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 15px;
	}

	.items-row .col-6 {
		max-width: 100% !important;
		flex: none !important;
		padding: 0 !important;
	}

	.horizontal-layout {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: left;
	}

	.report-item {
		background: transparent;
		padding: 9px;
	}

	.lyfe-report-button {
		padding: 6px 10px;
	}

	.icon-doc {
		width: 18px;
	}

	.main-text {
		font-size: 0.8rem;
	}

	.token-details {
		font-size: 0.7rem;
	}

	.token-details img {
		padding-left: 3px;
	}

	.compass-outer {
		width: 100%;
		display: flex;
		justify-content: center;
		/* jarak atas-bawah kompas */
		margin: 10px 0 20px;
	}

	.compass-outer {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 10px 0 20px;
	}

	.compass-wrapper {
		position: relative;
		margin: 0 auto;
	}

	.compass-bg {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* lingkaran tengah benar-benar di tengah */
	.compass-center {
		position: absolute;
		top: 52%;
		left: 49.5%;
		width: 75px;
		/* sama seperti desktop dulu */
		height: 75px;
		transform: translate(-50%, -50%);
	}

	/* End Get Your Reading Page */

	/* Start Contact Page */
	.contact-section h2 {
		font-size: 22px;
	}

	.contact-email {
		margin-top: 2rem;
	}

	/* End Contact Page */

	/* Start Purchase Token Page */
	.lyfe-token-section h2 {
		font-size: 22px;
	}

	.token-price {
		position: absolute;
		right: 5px;
		font-size: 15px;
		bottom: 3px;
	}

	/* End Purchase Token Page */

	/* Start Login Page */
	.text-lyfe-login {
		transform: scaleX(1.2);
		font-weight: bold;
		font-size: 2rem;
	}

	.lyfe-slogan-highlight {
		font-style: italic;
		transform: scaleX(1.2);
		transform-origin: left;
		font-size: 2rem;
	}

	.lyfe-slogan-box {
		padding-right: 30px !important;
	}

	/* End Login Page */

	/* Start mobile compass */
	@media (max-width: 576px) {
		.compass-wrapper {
			width: 260px;
			height: 260px;
		}

		.compass-wrapper .compass-bg {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: contain;
			/* penting */
		}

		.compass-center {
			width: 60px;
			height: 60px;
			font-size: 22px;
		}

		.compass-num {
			font-size: 16px;
		}

		/* POSISI ANGKA UNTUK MOBILE */
		#arah_utara {
			left: 50%;
			top: 4%;
			transform: translate(-50%, 0);
		}

		#arah_timur_laut {
			left: 93%;
			top: 17%;
			transform: translate(-50%, 0);
		}

		#arah_timur {
			left: 101%;
			top: 53%;
			transform: translate(-50%, -50%);
		}

		#arah_tenggara {
			left: 93%;
			top: 79.5%;
			transform: translate(-50%, 0);
		}

		#arah_selatan {
			left: 50%;
			top: 110%;
			transform: translate(-50%, -100%);
		}

		#arah_barat_daya {
			left: 5%;
			top: 79.5%;
			transform: translate(-50%, 0);
		}

		#arah_barat {
			right: 97%;
			top: 53%;
			transform: translate(-50%, -50%);
		}

		#arah_barat_laut {
			left: 7%;
			top: 16.5%;
			transform: translate(-50%, 0);
		}
	}

	/* End mobile compass */
}

/* home tambahan */
.btn-tampil-banyak {
	padding: 2px 5px;
	border-radius: 6px;
	font-size: 12px;
}

.report-item-home {
	padding: 0px;
}

.icon-container-home {
	width: 30px;
	height: 30px;
	margin-right: 6px;
}

.item-title-home {
	font-size: 11px;
	font-weight: 600;
}

.token-info-home {
	font-size: 11px;
}

.token-line-home {
	height: 23px;
	width: 23px;
}

.token-small-home {
	width: 12px;
	height: auto;
}

.btn-get-reading {
	display: flex;
	flex-direction: row-reverse;
	border: 1px solid #fcd97b;
	border-radius: 9px;
	background-color: #00b900;
	font-size: 19px;
}

.btn-get-reading img {
	width: 100%;
	height: auto;
}

.btn-get-reading .unify-icon {
	width: 17px;
	margin-left: 10px;
}

.btn-get-reading .token {
	font-size: 15px;
	margin-top: 4px;
	color: #fcd97b;
}

.btn-get-reading .smart-icon {
	width: 33px;
	margin-right: 65px;
	margin-top: -2px;
}

.btn-get-reading .txt-bold {
	margin-right: 51px;
}

.btn-purchase {
	display: flex;
	flex-direction: row-reverse;
	border: 1px solid #fcd97b;
	border-radius: 9px;
	background-color: #11b571;
	font-size: 19px;
}

.btn-purchase img {
	width: 100%;
	height: auto;
}

.btn-purchase .unify-icon {
	width: 88px;
	margin-left: 10px;
}

.btn-purchase .unify-icon-white {
	width: 30px;
	margin-left: 48px;
}

.token-button-fixed img,
.token-button-desktop img {
	width: 19px;
	margin-right: 5px;
}

.result-box-home {
	font-size: 1rem;
}

.result-box-home img {
	width: 25px;
}

.token-price-khusus {
	font-size: 20px;
}

@media (max-width: 991.98px) {
	.btn-purchase {
		font-size: 15px;
	}

	.btn-purchase .unify-icon {
		margin-left: 6px;
		width: 78px;
	}

	.btn-purchase .unify-icon-white {
		margin-left: 20px;
		width: 26px;
	}

	.btn-get-reading {
		font-size: 15px;
		padding: 0.375rem 0.33rem;
	}

	.btn-get-reading .txt-bold {
		margin-right: 4px;
	}

	.btn-get-reading .unify-icon {
		width: 16px;
		margin-left: 6px;
	}

	.btn-get-reading .token {
		font-size: 13px;
		margin-top: 2px;
	}

	.result-box-home {
		font-size: 0.9rem;
	}

	.result-box-home img {
		width: 20px;
	}

	.lyfe-report-section {
		padding-top: 2px;
	}

	.gyr {
		padding-left: 0px;
		padding-right: 0px;
	}

	.gyr .headling-center {
		transform: scaleX(1.1) !important;
	}

	.report-item-gyr {
		padding: 0px;
	}

	.token-icon {
		width: 104px;
		height: auto;
	}

	.token-price {
		position: relative;
		margin-top: 13px;
		margin-right: -30px;
	}

	.token-price-khusus {
		font-size: 15px;
		margin-top: 13px;
	}

	.token-note {
		font-size: 8px;
	}
}

.modal-custom {
	font-weight: 600;
	border-radius: 6px;
	color: #0b1b45;
}

.modal-custom .modal-header .close {
	color: #0b1b45;
}

/* end home tambahan */

/* Start modal home */
#modalFullReading .modal-content {
	background-color: #0b1b45;
	color: #ffffff;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Header */
#modalFullReading .modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#modalFullReading .modal-title {
	color: #ffffff;
}

/* Close button */
#modalFullReading .close {
	color: #ffffff;
	opacity: 0.8;
}

#modalFullReading .close:hover {
	opacity: 1;
}

/* Body */
#modalFullReading .modal-body {
	color: #f1f1f1;
}

/* Footer */
#modalFullReading .modal-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Card / Box inside modal */
#modalFullReading .border.rounded {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Labels & small text */
#modalFullReading label,
#modalFullReading h6 {
	color: #ffffff;
}

#modalFullReading small,
#modalFullReading .text-muted {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Inputs */
#modalFullReading .form-control {
	background-color: #0f265f;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

#modalFullReading .form-control::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

#modalFullReading .form-control:focus {
	background-color: #0f265f;
	color: #ffffff;
	border-color: #4da3ff;
	box-shadow: 0 0 0 0.15rem rgba(77, 163, 255, 0.25);
}

/* Radio button text */
#modalFullReading .custom-control-label {
	color: #ffffff;
}

/* Warning text */
#modalFullReading #fullreading-warning {
	color: #ffb3b3;
}

/* Primary button */
#modalFullReading .btn-primary {
	background-color: #1f6bff;
	border-color: #1f6bff;
}

#modalFullReading .btn-primary:hover {
	background-color: #1558d6;
	border-color: #1558d6;
}

/* End modal home */

/* === FULL READING RESULT PAGE === */

/* Card utama accordion */
#fullreading-accordion-page .card {
	background-color: #0b1b45;
	/* GANTI WARNA DI SINI */
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	color: #ffffff;
}

/* Header accordion */
#fullreading-accordion-page .card-header {
	background-color: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Button title */
#fullreading-accordion-page .btn-link {
	color: #ffffff;
	text-decoration: none;
	width: 100%;
	text-align: left;
}

#fullreading-accordion-page .btn-link:hover,
#fullreading-accordion-page .btn-link:focus {
	text-decoration: none;
	color: #fcd97b;
}

/* Body isi module */
#fullreading-accordion-page .card-body {
	background-color: transparent;
	/* ikut card */
	color: #f1f1f1;
}

/* Label kecil (key field) */
#fullreading-accordion-page .text-muted,
#fullreading-accordion-page .small.text-muted {
	color: rgba(255, 255, 255, 0.65) !important;
}

/* Pre / hasil array */
#fullreading-accordion-page pre {
	background-color: rgba(0, 0, 0, 0.25);
	color: #ffffff;
	border-radius: 8px;
	padding: 12px;
}

.box-purchase-token {
	text-align: right;
	margin-top: 2px;
}

.box-purchase-token p {
	margin-bottom: 0px;
}

.box-purchase-token .harga {
	font-size: 20px;
}

.box-purchase-token .promo-code {
	font-size: 15px;
	color: #fff600;
}

.box-purchase-token .promo-info {
	font-size: 12px;
}

.box-purchase-token .promo-harga {
	font-weight: 600;
	color: #fff600;
}

.desc-gyr {
	font-size: 9px;
	display: block;
	text-align: center;
	line-height: 1.4;
}

@media (max-width: 576px) {
	.desc-gyr {
		font-size: 10px;
		padding: 0 8px;
		line-height: 3;
	}
}

.catatan-modal {
	border-radius: 6px;
	overflow: hidden;
	color: #000;
}

.catatan-header {
	background: #f6d26b;
	padding: 18px 12px;
}

.catatan-icon i {
	font-size: 38px;
	color: #1d2b3a;
}

.catatan-title {
	font-weight: 800;
	letter-spacing: .5px;
}

.catatan-body {
	max-height: 70vh;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.5;
}

.report-item-gyr .token-info,
.report-item-gyr .token-info * {
	white-space: nowrap !important;
}

.report-item-gyr .token-info {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap !important;
	line-height: 1.2;
}

.report-item-gyr .token-info .small-icon {
	margin-right: 0 !important;
}

.report-item-gyr .text-content {
	min-width: 0;
}


.token-line,
.token-line * {
	white-space: nowrap;
}

.report-item-gyr .token-line {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
	line-height: 1.1;
}

.report-item-gyr .token-line .token-small {
	width: 14px;
	height: 14px;
	object-fit: contain;
	flex: 0 0 14px;
}

.report-item-gyr .token-line .token-text {
	font-size: 12px;
	color: #FFD36A;
	display: inline-block;
}

@media (max-width: 576px) {

	.btn-get-reading {
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		padding: 10px 12px;
		font-size: 12px;
		gap: 6px;
	}

	.btn-get-reading .token {
		font-size: 11px;
		margin: 0;
	}

	.btn-get-reading .txt-bold {
		font-size: 12px;
		margin-right: 6px !important;
		margin-left: 4px;
	}

	.btn-get-reading .unify-icon img,
	.btn-get-reading .smart-icon img {
		width: 14px;
		height: 14px;
	}

	.btn-get-reading .unify-icon {
		margin-left: 0 !important;
	}

	.btn-get-reading .smart-icon {
		margin-right: 0 !important;
	}
}

@media (max-width: 575.98px) {

	.items-row .col-6,
	.items-row .col-md-6,
	.items-row .col-lg-3 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

}

.assistive-touch {
	position: fixed;
	bottom: 242px;
	right: 20px;
	width: 80px;
	height: 80px;
	z-index: 9999;
	cursor: pointer;
}

.assistive-touch img {
	width: 100%;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease;
}

.assistive-touch img:hover {
	transform: scale(1.1);
}

@media (max-width: 767.98px) {
	.text-mobile-nowrap {
		font-size: 5px;
		align-items: center;
		white-space: nowrap;
		line-height: 1.2;
	}
}

@media (max-width: 575.98px) {

	/* Start Get Your Reading Page */
	.icon-container {
		width: 50px;
		height: 50px;
	}

	.report-item-gyr .token-line .token-text {
		font-size: 9px;
		color: #FFD36A;
		display: inline-block;
	}

	.report-item {
		padding: 12px;
	}

	.text-content {
		width: auto;
		min-width: 0;
	}

	.item-title {
		font-size: 0.95rem;
		line-height: 1.25;
	}

	.token-info {
		font-size: 0.65rem;
		line-height: 1.1;
	}
}