@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap");

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	font-family: "Poppins", sans-serif;
}

a,
button {
	outline: none;
}

img {
	display: block;
	width: 100%;
}

html,
body {
	height: 100%;
}

@-webkit-keyframes mmfadeIn {
	0% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeIn {
	0% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-webkit-keyframes mmfadeOut {
	0% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes mmfadeOut {
	0% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@-webkit-keyframes mmslideIn {
	0% {
		transform: translateY(15%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes mmslideIn {
	0% {
		transform: translateY(15%);
	}

	to {
		transform: translateY(0);
	}
}

@-webkit-keyframes mmslideOut {
	0% {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10%);
	}
}

@keyframes mmslideOut {
	0% {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10%);
	}
}

.micromodal-slide {
	display: none;
}

.micromodal-slide.is-open {
	display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
	animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
	animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
	animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
	animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
	will-change: transform;
}

.modal__overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0009;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999999;
	backdrop-filter: blur(2px);
}

.modal__container {
	background-image: url("../images/popup-bg.png");
	background-size: contain;
	background-position: center;
	border-radius: 10px;
	box-sizing: border-box;
	width: 320px;
	height: 522px;
	overflow: hidden;
	padding: 70px 20px;
	overflow-y: hidden;
	margin-top: -30px;
}

.modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal__title {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	color: #00449e;
	box-sizing: border-box;
}

.modal__close {
	width: 48px;
	height: 48px;
	position: absolute;
	top: 36px;
	right: 0;
	border-radius: 50%;
	border: none;
	background-color: transparent;
	background-image: url("../images/close.png");
	background-size: cover;
	outline: none;
	cursor: pointer;
}

/* .modal__header .modal__close:before {
	content: "\2715";
} */

.modal__content {
	line-height: 1.5;
	color: #000c;
}

.modal__kucing {
	position: absolute;
	left: -50%;
	right: 0;
	bottom: -5%;
	width: 30%;
	margin: auto;
}

.container {
	width: 100%;
}

.wrap {
	width: 100%;
	position: relative;
}

.bg {
	width: 100%;
	overflow: hidden;
}

.bg-d {
	display: none;
	width: 1920px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.bg-m {
	display: block;
	width: 100%;
}

.daily-streak {
	width: 95px;
	position: fixed;
	top: 10px;
	left: 10px;
	cursor: pointer;
}

.point {
	position: fixed;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
}

.point-ketupat {
	width: 55px;
	position: relative;
	z-index: 1;
	margin-right: -33px;
}

.point-text {
	font-weight: bold;
	font-size: 20px;
	top: 22px;
	right: 10px;
	text-align: center;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 33px;
	min-width: 100px;
	border: solid 3px #547f11;
	padding-left: 30px;
	padding-right: 15px;
	width: auto;
	height: 40px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.leaderboard {
	width: 95px;
	position: fixed;
	top: 120px;
	left: 10px;
	cursor: pointer;
}

.leaderboard-score {
	font-weight: 700;
}

.content {
	width: 100%;
	max-width: 690px;
	height: 100%;
	position: absolute;
	bottom: 0;
	margin: auto;
	left: 0;
	right: 0;
}

.path-wrap {
	width: fit-content;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.day-btn {
	position: absolute;
	margin: auto;
	width: 85px;
	height: 85px;
	cursor: pointer;
}

.day-current {
	-webkit-animation: pulsing 2000ms infinite;
	-moz-animation: pulsing 2000ms infinite;
	-o-animation: pulsing 2000ms infinite;
	animation: pulsing 2000ms infinite;
}

.day-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
}

.day-btn-done {
	filter: grayscale(1);
}

.btn-text {
	position: absolute;
	bottom: 32%;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	color: #fff;
	font-weight: 700;
	font-size: 22px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.day-btn-unlocked .btn-text {
	bottom: 38%;
	font-size: 26px;
}

.day-btn-locked .btn-text {
	font-size: 0;
}

.day-btn-locked::before {
	content: "";
	width: 25px;
	height: 25px;
	background-image: url(../images/lock.png);
	background-position: center;
	background-size: contain;
	display: block;
	position: absolute;
	bottom: 38%;
	left: 0;
	right: 0;
	margin: auto;
}

.day-btn-done,
.day-btn-locked {
	pointer-events: none;
}

.day-btn-done .img-unlocked,
.day-btn-locked .img-unlocked {
	display: none;
}

.day-btn-unlocked .img-locked {
	display: none;
}

.day-btn-1 {
	bottom: 1%;
	left: 33%;
	right: 0;
}

.day-btn-2 {
	bottom: 5%;
	left: 28%;
	right: 0;
}

.day-btn-3 {
	bottom: 6%;
	left: 0;
	right: 30%;
}

.day-btn-4 {
	bottom: 10%;
	left: 0;
	right: 5%;
}

.day-btn-5 {
	bottom: 13%;
	left: 48%;
	right: 0;
}

.day-btn-6 {
	bottom: 19%;
	left: 29%;
	right: 0;
}

.day-btn-7 {
	bottom: 21.5%;
	left: 0;
	right: 20%;
}

.day-btn-8 {
	bottom: 24%;
	left: 0;
	right: 63%;
}

.day-btn-9 {
	bottom: 25.5%;
	left: 0;
	right: 5%;
}

.day-btn-10 {
	bottom: 29%;
	left: 0;
	right: 9%;
}

.day-btn-11 {
	bottom: 32%;
	left: 0;
	right: 54%;
}

.day-btn-12 {
	bottom: 34.5%;
	left: 18%;
	right: 0;
}

.day-btn-13 {
	bottom: 35%;
	left: 23%;
	right: 0;
}

.day-btn-13 {
	bottom: 37%;
	left: 0;
	right: 31%;
}

.day-btn-14 {
	bottom: 40%;
	left: 0;
	right: 0;
}

.day-btn-15 {
	bottom: 44%;
	left: 0;
	right: 25%;
}

.day-btn-16 {
	bottom: 49%;
	left: 0;
	right: 75%;
}

.day-btn-17 {
	bottom: 49%;
	left: 0;
	right: 2%;
}

.day-btn-18 {
	bottom: 53%;
	left: 60%;
	right: 0;
}

.day-btn-19 {
	bottom: 56.5%;
	left: 22%;
	right: 0;
}

.day-btn-20 {
	bottom: 56%;
	left: 0;
	right: 35%;
}

.day-btn-21 {
	bottom: 61%;
	left: 0;
	right: 22%;
}

.day-btn-22 {
	bottom: 64%;
	left: 30%;
	right: 0;
}

.day-btn-23 {
	bottom: 69%;
	left: 43%;
	right: 0;
}

.day-btn-24 {
	bottom: 71%;
	left: 0;
	right: 27%;
}

.day-btn-25 {
	bottom: 74%;
	left: 0;
	right: 71%;
}

.day-btn-26 {
	bottom: 75%;
	left: 6%;
	right: 0;
}

.day-btn-27 {
	bottom: 77%;
	left: 72%;
	right: 0;
}

.day-btn-28 {
	bottom: 80%;
	left: 25%;
	right: 0;
}

.day-btn-29 {
	bottom: 85%;
	left: 0;
	right: 4%;
}

.day-btn-30 {
	bottom: 89%;
	left: 3%;
	right: 0;
}

.popup-title {
	height: 42px;
	width: fit-content;
	margin: 0 auto 15px;
}

.popup-title img {
	width: auto;
	height: 100%;
}

.popup-logo-sponsor {
	width: 85px;
	height: 45px;
	margin: 10px auto 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	display: none;
}

.popup-logo-sponsor img {
	height: 100%;
	object-fit: contain;
}

.popup-logo-sponsor a {
	height: fit-content;
	display: flex;
}

.task-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.task-box {
	width: 100%;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	border-radius: 10px;
	background: #fff;
	padding: 10px 5px 10px 15px;
	border: solid 3px #00529c;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	position: relative;
	overflow: hidden;
	min-height: 66px;
}

.task-done {
	background: #f27123;
	color: #fff;
}

.task-inactive {
	background-color: #e5e5e5;
	border-color: #717171;
	color: #555555;
	cursor: not-allowed;
	pointer-events: none;
}

.task-inactive .task-status {
	display: none;
}

.task-status {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.task-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.leaderboard-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 270px;
	gap: 10px;
	overflow-y: auto;
	padding: 5px 8px;
}

.leaderboard-wrapper::-webkit-scrollbar {
	width: 5px;
}

.leaderboard-wrapper::-webkit-scrollbar-track {
	border-radius: 5px;
	background-color: #fff;
}

.leaderboard-wrapper::-webkit-scrollbar-thumb {
	width: 5px;
	background-color: #227acd;
	border-radius: 5px;
}

.leaderboard-item {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: solid 3px #00529c;
	padding: 5px 16px;
	border-radius: 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.leaderboard-rank-name {
	display: flex;
	gap: 4px;
}

.leaderboard-number {
	width: 20px;
}

.popup-title-streak {
	margin-bottom: 4px;
}

.streak-subtitle {
	font-size: 14px;
	text-align: center;
	margin-bottom: 7px;
	line-height: 1.4;
	color: #fff;
}

.streak-wrapper {
	display: grid;
	gap: 5px 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.streak-box {
	position: relative;
}

.streak-active {
	cursor: pointer;
}

.streak-active::after {
	content: "AMBIL";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: auto;
	font-size: 12px;
	font-weight: 700;
	color: #000;
	background: #f27123;
	padding: 2px 10px;
	border-radius: 8px;
	text-align: center;
	border: solid 2px #c58a00;
}

.berkah-bg {
	background-color: #0e9ad3;
	background-image: url("../images/start-m.jpg");
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.start-container {
	position: relative;
	padding: 20px;
	max-width: 500px;
	margin: auto;
	height: 100%;
	overflow-y: hidden;
}

.logo-berkah-harian {
	width: 180px;
	margin: auto;
}

.sponsor {
	font-size: 12px;
	max-width: 100px;
	text-align: center;
	margin: 10px auto 15px;
	color: #fff;
	display: none;
}

.logo-sponsor {
	margin: 10px auto 5px;
	max-width: 90px;
}

.text-start {
	font-size: 14px;
	text-align: center;
	margin-top: 10px;
	color: #fff;
}

.btn-container {
	width: 200px;
	margin: 10px auto;
}

.btn-item {
	display: inline-block;
	width: 100%;
	display: flex;
	margin-bottom: 10px;
	cursor: pointer;
}

.treasure {
	position: absolute;
	width: 160px;
}

.treasure-1 {
	bottom: 29%;
	right: 5%;
}

.treasure-2 {
	bottom: 63%;
	left: 2%;
}

.bonus-point-img {
	width: 170px;
	margin: -20px auto -25px;
}

.bonus-point-text {
	font-size: 16px;
	text-align: center;
	font-size: 14px;
	color: #fff;
}

.btn-cek-bonus {
	width: 220px;
	display: block;
	margin: 10px auto;
}

#modal-panduan .modal__container,
#modal-bonus-point .modal__container {
	background-image: url(../images/popup-bg.png);
}

.modal-tasks .modal__container {
	background-image: url(../images/popup-bg.png);
}

#modal-leaderboard .modal__container {
	background-image: url(../images/popup-bg.png);
}

#modal-daily-streak .modal__container,
#modal-daily-streak-done .modal__container {
	background-image: url(../images/popup-bg.png);
}

.popup-title-panduan {
	height: 60px;
	width: fit-content;
	margin: -15px auto 10px;
}

.panduan-wrapper {
	max-height: 250px;
	overflow-y: auto;
	padding-right: 5px;
	color: #fff;
	padding-bottom: 35px;
}

.panduan-wrapper::-webkit-scrollbar {
	width: 5px;
	border-radius: 5px;
}

.panduan-wrapper::-webkit-scrollbar-track {
	background-color: #fff;
	border-radius: 5px;
}

.panduan-wrapper::-webkit-scrollbar-thumb {
	background-color: #227acd;
	border-radius: 5px;
}

.panduan-wrapper ul {
	padding-inline-start: 24px;
	font-size: 14px;
}

.kucing-bg {
	position: absolute;
	bottom: 0;
	width: 50%;
	bottom: -8%;
	right: 0;
}

.footer {
	padding: 20px;
	background-color: #000;
	color: #999;
	text-align: center;
	font-size: 12px;
}

.logo-kompas-footer {
	display: flex;
	width: 120px;
	margin: 0 auto 10px;
}

.board-1 {
	position: absolute;
	bottom: 8%;
	width: 40%;
	right: 2%;
}

.board-2 {
	position: absolute;
	width: 40%;
	bottom: 35%;
	left: -7%;
}

.board-3 {
	position: absolute;
	width: 35%;
	bottom: 52%;
	left: 30%;
}

.board-4 {
	position: absolute;
	width: 40%;
	bottom: 72%;
	right: 0%;
}

.socmedButton,
.socmedList {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.socmedBlock {
	width: fit-content;
	margin: 10px auto 0;
	background-color: rgb(1 56 106/40%);
	padding: 5px 15px;
	border-radius: 20px;
	position: relative;
}

.socmedList {
	padding: 0px;
}

.socmedButton {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 30px;
	-ms-flex-preferred-size: 30px;
	flex-basis: 30px;
	gap: 8px;
	padding: 4px;
}

.socmedButton span {
	pointer-events: none;
}

.socmedButton.-tooltip:before {
	content: attr(data-title);
	position: absolute;
	width: auto;
	background: #fff;
	color: #00529c;
	padding: 2px 5px;
	border-radius: 4px;
	font-size: 10px;
	text-align: center;
	white-space: nowrap;
	top: -20px;
}

.socmedTxt {
	font-size: 11px;
	font-weight: 400;
	color: var(--cl-gray-med);
}

.icoSocmed {
	position: relative;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.icoSocmed:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-position: 50%;
	background-size: contain;
	background-repeat: no-repeat;
	/* -webkit-filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(318deg) brightness(110%) contrast(101%);
	filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(318deg) brightness(110%) contrast(101%); */
}

.icoFacebook:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M12.7971%2016.3677V12.1083H14.2341L14.4477%2010.4406H12.7971V9.37835C12.7971%208.89711%2012.9312%208.56763%2013.6219%208.56763H14.497V7.0808C14.0712%207.03516%2013.6432%207.01313%2013.215%207.0148C11.9448%207.0148%2011.0728%207.79017%2011.0728%209.2136V10.4375H9.64522V12.1052H11.0759V16.3677H12.7971Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fsvg%3E");
}

.icoLine:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M18.1213%2010.7824C18.1213%207.90514%2015.2368%205.56427%2011.6912%205.56427C8.14553%205.56427%205.26103%207.90514%205.26103%2010.7824C5.26103%2013.3619%207.55127%2015.5226%2010.6383%2015.9306C10.848%2015.9758%2011.1331%2016.0686%2011.2048%2016.2476C11.2699%2016.4104%2011.2476%2016.6653%2011.2259%2016.8292C11.2259%2016.8292%2011.1506%2017.2831%2011.1343%2017.3795C11.106%2017.5422%2011.0047%2018.0153%2011.6912%2017.7266C12.3776%2017.438%2015.3941%2015.5461%2016.743%2013.993C17.6747%2012.9714%2018.1213%2011.9323%2018.1213%2010.7824Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3Cpath%20d%3D%22M15.9818%2012.444H14.1737C14.1417%2012.444%2014.111%2012.4313%2014.0884%2012.4087C14.0658%2012.3861%2014.0531%2012.3555%2014.0531%2012.3235V9.51794C14.0531%209.48597%2014.0658%209.45531%2014.0884%209.4327C14.111%209.4101%2014.1417%209.3974%2014.1737%209.3974H15.9818C16.0137%209.3974%2016.0444%209.4101%2016.067%209.4327C16.0896%209.45531%2016.1023%209.48597%2016.1023%209.51794V9.97418C16.1023%2010.0061%2016.0896%2010.0368%2016.067%2010.0594C16.0444%2010.082%2016.0137%2010.0947%2015.9818%2010.0947H14.7541V10.5678H15.9818C16.0137%2010.5678%2016.0444%2010.5805%2016.067%2010.6031C16.0896%2010.6257%2016.1023%2010.6564%2016.1023%2010.6884V11.1488C16.1023%2011.1808%2016.0896%2011.2115%2016.067%2011.2341C16.0444%2011.2567%2016.0137%2011.2694%2015.9818%2011.2694H14.7541V11.7431H15.9818C16.0137%2011.7431%2016.0444%2011.7558%2016.067%2011.7784C16.0896%2011.801%2016.1023%2011.8317%2016.1023%2011.8636V12.3193C16.1029%2012.3354%2016.1002%2012.3516%2016.0944%2012.3667C16.0886%2012.3818%2016.0798%2012.3956%2016.0685%2012.4072C16.0573%2012.4189%2016.0438%2012.4281%2016.0289%2012.4345C16.014%2012.4408%2015.9979%2012.444%2015.9818%2012.444Z%22%20fill%3D%22%2301529C%22%2F%3E%3Cpath%20d%3D%22M9.29969%2012.444C9.33166%2012.444%209.36232%2012.4313%209.38493%2012.4087C9.40753%2012.3861%209.42023%2012.3554%209.42023%2012.3235V11.8678C9.42023%2011.8359%209.40753%2011.8052%209.38493%2011.7826C9.36232%2011.76%209.33166%2011.7473%209.29969%2011.7473H8.072V9.51733C8.072%209.48536%208.0593%209.4547%208.0367%209.43209C8.01409%209.40949%207.98343%209.39679%207.95147%209.39679H7.49342C7.46145%209.39679%207.43079%209.40949%207.40818%209.43209C7.38558%209.4547%207.37288%209.48536%207.37288%209.51733V12.3217C7.37288%2012.3536%207.38558%2012.3843%207.40818%2012.4069C7.43079%2012.4295%207.46145%2012.4422%207.49342%2012.4422H9.3015L9.29969%2012.444Z%22%20fill%3D%22%2301529C%22%2F%3E%3Cpath%20d%3D%22M10.387%209.39197H9.93132C9.86341%209.39197%209.80836%209.44701%209.80836%209.51492V12.3211C9.80836%2012.389%209.86341%2012.444%209.93132%2012.444H10.387C10.4549%2012.444%2010.5099%2012.389%2010.5099%2012.3211V9.51492C10.5099%209.44701%2010.4549%209.39197%2010.387%209.39197Z%22%20fill%3D%22%2301529C%22%2F%3E%3Cpath%20d%3D%22M13.4914%209.39197H13.0358C13.0038%209.39197%2012.9732%209.40467%2012.9506%209.42727C12.9279%209.44988%2012.9152%209.48054%2012.9152%209.51251V11.1796L11.6315%209.44561C11.6286%209.44102%2011.6251%209.43677%2011.6213%209.43295L11.614%209.42572L11.6074%209.42029H11.6038L11.5972%209.41547H11.5935L11.5869%209.41186H11.5827H11.5761H11.5718H11.5646H11.5598H11.5526H11.5477H11.5411H11.0764C11.0445%209.41186%2011.0138%209.42456%2010.9912%209.44716C10.9686%209.46977%2010.9559%209.50043%2010.9559%209.5324V12.3385C10.9559%2012.3705%2010.9686%2012.4012%2010.9912%2012.4238C11.0138%2012.4464%2011.0445%2012.4591%2011.0764%2012.4591H11.5327C11.5646%2012.4591%2011.5953%2012.4464%2011.6179%2012.4238C11.6405%2012.4012%2011.6532%2012.3705%2011.6532%2012.3385V10.6552L12.9388%2012.391C12.9472%2012.4033%2012.9578%2012.4139%2012.9701%2012.4223L12.9773%2012.4271H12.9809L12.987%2012.4302H12.993H12.9972H13.0057C13.0163%2012.4328%2013.0272%2012.4342%2013.0382%2012.4344H13.4914C13.5234%2012.4344%2013.5541%2012.4217%2013.5767%2012.3991C13.5993%2012.3765%2013.612%2012.3458%2013.612%2012.3138V9.51492C13.6123%209.49889%2013.6094%209.48295%2013.6035%209.46805C13.5976%209.45314%2013.5887%209.43957%2013.5775%209.42812C13.5663%209.41667%2013.5529%209.40758%2013.5381%209.40137C13.5233%209.39516%2013.5075%209.39196%2013.4914%209.39197Z%22%20fill%3D%22%2301529C%22%2F%3E%3C%2Fsvg%3E");
}

.icoTelegram:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M6.27007%2011.0677L13.2341%208.19839C13.9216%207.8995%2016.2529%206.94307%2016.2529%206.94307C16.2529%206.94307%2017.3288%206.52463%2017.2392%207.54084C17.2093%207.95928%2016.9702%209.42382%2016.7311%2011.0079L15.9839%2015.7004C15.9839%2015.7004%2015.9241%2016.3879%2015.416%2016.5074C14.9079%2016.627%2014.071%2016.089%2013.9216%2015.9694C13.802%2015.8798%2011.6799%2014.5348%2010.9028%2013.8772C10.6936%2013.6979%2010.4545%2013.3392%2010.9327%2012.9208C12.0087%2011.9345%2013.2939%2010.709%2014.071%209.93193C14.4297%209.57327%2014.7883%208.73638%2013.2939%209.7526L9.0796%2012.592C9.0796%2012.592%208.60138%2012.8909%207.70472%2012.6219C6.80807%2012.3529%205.76196%2011.9942%205.76196%2011.9942C5.76196%2011.9942%205.04464%2011.5459%206.27007%2011.0677Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fsvg%3E");
}

.icoCopyLink:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cpath%20d%3D%22M13.7492%209.63533C13.8269%209.71323%2013.8706%209.81878%2013.8706%209.92881C13.8706%2010.0388%2013.8269%2010.1444%2013.7492%2010.2223L10.2222%2013.7493C10.1436%2013.8258%2010.0383%2013.8686%209.92872%2013.8686C9.81909%2013.8686%209.71379%2013.8258%209.63524%2013.7493C9.55752%2013.6714%209.51388%2013.5658%209.51388%2013.4558C9.51388%2013.3458%209.55752%2013.2402%209.63524%2013.1623L13.1622%209.63533C13.2401%209.55762%2013.3457%209.51397%2013.4557%209.51397C13.5658%209.51397%2013.6713%209.55762%2013.7492%209.63533ZM12.2792%2014.0454L10.8092%2015.5102C10.6174%2015.7045%2010.3889%2015.8587%2010.137%2015.964C9.88506%2016.0693%209.61477%2016.1235%209.34175%2016.1235C9.06874%2016.1235%208.79844%2016.0693%208.54654%2015.964C8.29464%2015.8587%208.06616%2015.7045%207.87434%2015.5102C7.48577%2015.1207%207.26755%2014.593%207.26755%2014.0428C7.26755%2013.4926%207.48577%2012.9649%207.87434%2012.5754L9.33916%2011.1053C9.41078%2011.0263%209.44926%2010.9227%209.44664%2010.8161C9.44401%2010.7095%209.40048%2010.6079%209.32505%2010.5325C9.24962%2010.4571%209.14808%2010.4135%209.04144%2010.4109C8.9348%2010.4083%208.83124%2010.4468%208.75219%2010.5184L7.28217%2011.9884C6.73663%2012.5339%206.43015%2013.2739%206.43015%2014.0454C6.43015%2014.8169%206.73663%2015.5568%207.28217%2016.1024C7.82772%2016.6479%208.56764%2016.9544%209.33916%2016.9544C10.1107%2016.9544%2010.8506%2016.6479%2011.3961%2016.1024L12.8662%2014.6323C12.9439%2014.5544%2012.9875%2014.4489%2012.9875%2014.3389C12.9875%2014.2288%2012.9439%2014.1233%2012.8662%2014.0454C12.8279%2014.0063%2012.7823%2013.9752%2012.7319%2013.954C12.6815%2013.9328%2012.6273%2013.9218%2012.5727%2013.9218C12.518%2013.9218%2012.4639%2013.9328%2012.4135%2013.954C12.3631%2013.9752%2012.3174%2014.0063%2012.2792%2014.0454ZM16.1023%207.28227C15.8321%207.01212%2015.5115%206.79783%2015.1585%206.65163C14.8056%206.50543%2014.4273%206.43018%2014.0453%206.43018C13.6633%206.43018%2013.285%206.50543%2012.932%206.65163C12.5791%206.79783%2012.2584%207.01212%2011.9883%207.28227L10.5183%208.75228C10.4467%208.83133%2010.4082%208.93489%2010.4108%209.04153C10.4134%209.14817%2010.457%209.24972%2010.5324%209.32514C10.6078%209.40057%2010.7094%209.4441%2010.816%209.44673C10.9226%209.44936%2011.0262%209.41087%2011.1052%209.33925L12.5753%207.87443C12.7671%207.68015%2012.9956%207.5259%2013.2475%207.42062C13.4994%207.31535%2013.7697%207.26113%2014.0427%207.26113C14.3157%207.26113%2014.586%207.31535%2014.8379%207.42062C15.0898%207.5259%2015.3183%207.68015%2015.5101%207.87443C15.8987%208.26394%2016.1169%208.79166%2016.1169%209.34185C16.1169%209.89203%2015.8987%2010.4198%2015.5101%2010.8093L14.0453%2012.2793C14.0062%2012.3175%2013.9751%2012.3631%2013.9539%2012.4135C13.9327%2012.4639%2013.9217%2012.5181%2013.9217%2012.5728C13.9217%2012.6274%2013.9327%2012.6816%2013.9539%2012.732C13.9751%2012.7824%2014.0062%2012.828%2014.0453%2012.8662C14.0827%2012.9057%2014.1278%2012.9371%2014.1779%2012.9586C14.2279%2012.98%2014.2817%2012.991%2014.3362%2012.9909C14.3913%2012.9908%2014.4459%2012.9797%2014.4967%2012.9583C14.5476%2012.9369%2014.5936%2012.9056%2014.6322%2012.8662L16.1023%2011.3962C16.6466%2010.85%2016.9522%2010.1104%2016.9522%209.33925C16.9522%208.56814%2016.6466%207.82847%2016.1023%207.28227Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fsvg%3E");
}

.icoTwitter:after,
.icoX:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cg%20clip-path%3D%22url(%23clip0_924_38)%22%3E%3Cpath%20d%3D%22M12.9317%2011.0506L16.4135%207.01471H15.5885L12.5652%2010.519L10.1505%207.01471H7.36543L11.0169%2012.3139L7.36543%2016.5461H8.19056L11.3832%2012.8455L13.9333%2016.5461H16.7184L12.9315%2011.0506H12.9317ZM11.8016%2012.3606L11.4316%2011.8329L8.48787%207.6341H9.75523L12.1308%2011.0227L12.5008%2011.5503L15.5889%2015.9549H14.3215L11.8016%2012.3608V12.3606Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_924_38%22%3E%3Crect%20width%3D%2210.5221%22%20height%3D%2210.7284%22%20fill%3D%22white%22%20transform%3D%22translate(6.43015%206.32697)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.icoWhatsapp:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cg%20clip-path%3D%22url(%23clip0_924_43)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.4191%207.96677C14.9338%207.47824%2014.3563%207.09088%2013.7202%206.82712C13.0841%206.56336%2012.402%206.42844%2011.7133%206.43019C8.82576%206.43019%206.47508%208.78029%206.47391%2011.669C6.47391%2012.5923%206.71493%2013.4933%207.17305%2014.2882L6.43015%2017.0024L9.20743%2016.2735C9.97565%2016.6917%2010.8363%2016.911%2011.711%2016.9114H11.7133C14.6003%2016.9114%2016.951%2014.5613%2016.9522%2011.6725C16.9542%2010.9842%2016.8197%2010.3023%2016.5566%209.66621C16.2934%209.03014%2015.9068%208.45253%2015.4191%207.96677ZM11.7133%2016.0272H11.7116C10.9316%2016.0273%2010.166%2015.8175%209.49513%2015.4197L9.3364%2015.3252L7.68835%2015.7576L8.12779%2014.151L8.0245%2013.9864C7.58844%2013.2922%207.3576%2012.4888%207.35863%2011.669C7.3598%209.26817%209.31306%207.31491%2011.7151%207.31491C12.2872%207.31364%2012.8538%207.42584%2013.3822%207.64501C13.9106%207.86419%2014.3903%208.18599%2014.7935%208.59179C15.1989%208.99566%2015.5202%209.47586%2015.7388%2010.0046C15.9575%2010.5334%2016.0692%2011.1003%2016.0675%2011.6725C16.0663%2014.0734%2014.113%2016.0272%2011.7133%2016.0272ZM14.102%2012.7656C13.9706%2012.6996%2013.3275%2012.3833%2013.2073%2012.3396C13.0877%2012.2958%2013.0007%2012.2742%2012.9132%2012.4049C12.8257%2012.5357%2012.5747%2012.8304%2012.4983%2012.9179C12.4218%2013.0054%2012.3454%2013.0159%2012.2146%2012.9506C12.0839%2012.8852%2011.662%2012.7469%2011.1619%2012.3011C10.7726%2011.9538%2010.51%2011.5255%2010.4335%2011.3942C10.3571%2011.2629%2010.4254%2011.1922%2010.4913%2011.1269C10.5503%2011.0685%2010.622%2010.974%2010.6874%2010.8975C10.7528%2010.8211%2010.7744%2010.7668%2010.8181%2010.6793C10.8619%2010.5917%2010.8403%2010.5153%2010.807%2010.4499C10.7744%2010.384%2010.5123%209.7397%2010.4032%209.47767C10.2976%209.22381%2010.1896%209.25766%2010.1091%209.25416C10.0257%209.25075%209.94218%209.24919%209.85871%209.24949C9.79233%209.25118%209.72701%209.26657%209.66686%209.29469C9.60671%209.32281%209.55301%209.36305%209.50914%209.41289C9.38892%209.5442%209.05103%209.8605%209.05103%2010.5048C9.05103%2011.1491%209.52023%2011.7717%209.58559%2011.8593C9.65095%2011.9468%2010.5088%2013.2686%2011.8219%2013.8359C12.1347%2013.9707%2012.3786%2014.0512%2012.5683%2014.1119C12.8817%2014.2117%2013.1671%2014.1971%2013.3929%2014.1639C13.6444%2014.1265%2014.1673%2013.8476%2014.2764%2013.5418C14.3856%2013.236%2014.3856%2012.9739%2014.3529%2012.9191C14.3202%2012.8642%2014.2321%2012.831%2014.102%2012.7656Z%22%20fill%3D%22%23FBFBFB%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_924_43%22%3E%3Crect%20width%3D%2210.5221%22%20height%3D%2210.5221%22%20fill%3D%22white%22%20transform%3D%22translate(6.43015%206.43018)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

.icoInstagram::after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.292279%22%20y%3D%220.292279%22%20width%3D%2222.7978%22%20height%3D%2222.7978%22%20rx%3D%2211.3989%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%220.584559%22%2F%3E%3Cmask%20id%3D%22mask0_965_66%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Cpath%20d%3D%22M19%205H5V19H19V5Z%22%20fill%3D%22white%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23mask0_965_66)%22%3E%3Cpath%20d%3D%22M12.25%2014.4375C12.8302%2014.4375%2013.3866%2014.207%2013.7968%2013.7968C14.207%2013.3866%2014.4375%2012.8302%2014.4375%2012.25C14.4375%2011.6698%2014.207%2011.1134%2013.7968%2010.7032C13.3866%2010.293%2012.8302%2010.0625%2012.25%2010.0625C11.6698%2010.0625%2011.1134%2010.293%2010.7032%2010.7032C10.293%2011.1134%2010.0625%2011.6698%2010.0625%2012.25C10.0625%2012.8302%2010.293%2013.3866%2010.7032%2013.7968C11.1134%2014.207%2011.6698%2014.4375%2012.25%2014.4375Z%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.875%207H9.625C8.92881%207%208.26113%207.27656%207.76884%207.76884C7.27656%208.26113%207%208.92881%207%209.625V14.875C7%2015.5712%207.27656%2016.2389%207.76884%2016.7312C8.26113%2017.2234%208.92881%2017.5%209.625%2017.5H14.875C15.5712%2017.5%2016.2389%2017.2234%2016.7312%2016.7312C17.2234%2016.2389%2017.5%2015.5712%2017.5%2014.875V9.625C17.5%208.92881%2017.2234%208.26113%2016.7312%207.76884C16.2389%207.27656%2015.5712%207%2014.875%207Z%22%20stroke%3D%22%23FBFBFB%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.0937%209.95343C15.2387%209.95343%2015.3778%209.89581%2015.4804%209.79325C15.583%209.6907%2015.6406%209.5516%2015.6406%209.40656C15.6406%209.26151%2015.583%209.12242%2015.4804%209.01986C15.3778%208.9173%2015.2387%208.85968%2015.0937%208.85968C14.9487%208.85968%2014.8097%208.91727%2014.7072%209.01977C14.6047%209.12227%2014.5471%209.2613%2014.5471%209.40626C14.5471%209.55123%2014.6047%209.69025%2014.7072%209.79276C14.8097%209.89526%2014.9487%209.95343%2015.0937%209.95343Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	filter: none;
}

.share-text {
	font-size: 12px;
	text-align: center;
	color: #fff;
	margin-bottom: 3px;
}

@media screen and (min-width: 375px) {
	.modal__kucing {
		width: 150px;
	}

	.day-btn {
		width: 100px;
		height: 100px;
	}

	.day-btn-unlocked .btn-text {
		font-size: 28px;
	}



	.logo-berkah-harian {
		width: 200px;
	}


}

@media screen and (min-width: 390px) {
	.logo-berkah-harian {
		padding-top: 60px;
	}

	.sponsor {
		margin: 20px auto;
	}

	.btn-container {
		margin: 30px auto;
	}
}

@media screen and (min-width: 768px) {
	.modal__container {
		width: 417px;
		height: 680px;
		padding: 100px 20px;
	}

	.modal__close {
		top: 60px;
		right: 14px;
	}

	#modal-leaderboard .modal__kucing {
		left: 0;
		right: 13%;
		margin: auto;
	}

	.popup-title-panduan {
		height: 80px;
	}

	.panduan-wrapper {
		max-height: 335px;
	}

	.panduan-wrapper ul {
		font-size: 16px;
	}

	.berkah-bg {
		background-image: url(../images/start.jpg);
	}

	.kucing-bg {
		width: 200px;
	}

	.logo-berkah-harian {
		width: 350px;
	}

	.text-start {
		font-size: 18px;
	}

	.btn-container {
		width: 225px;
	}

	.bg-d {
		display: block;
	}

	.bg-m {
		display: none;
	}

	.day-btn {
		width: 150px;
		height: 150px;
	}

	.btn-text {
		bottom: 30%;
		font-size: 40px;
	}

	.day-btn-unlocked .btn-text {
		bottom: 40%;
		font-size: 40px;
	}

	.day-btn-locked::before {
		width: 40px;
		height: 40px;
	}

	.daily-streak {
		width: 110px;
		top: 25px;
		left: 30px;
	}

	.leaderboard {
		width: 110px;
		top: 155px;
		left: 25px;
	}

	.leaderboard-wrapper {
		max-height: 350px;
	}

	.point {
		top: 25px;
		right: 20px;
		width: 175px;
	}

	.point-ketupat {
		width: 75px;
	}

	.point-text {
		font-size: 26px;
		top: 33px;
		right: 20px;
		height: 48px;
	}

	.treasure {
		width: 250px;
	}

	.treasure-2 {
		bottom: 64%;
	}

	.streak-active::after {
		font-size: 16px;
	}

	.popup-logo-sponsor {
		width: 90px;
		height: 50px;
	}

	.socmedBlock {
		border-radius: 40px;
		padding: 8px 16px;
	}

	.socmedButton {
		min-width: 46px;
		-ms-flex-preferred-size: 46px;
		flex-basis: 46px;
	}

	.icoSocmed {
		width: 36px;
		height: 36px;
	}

	.buttonInstagram {
		display: none;
	}
}

@media screen and (min-width: 1100px) {
	.logo-berkah-harian {
		width: 250px;
		padding-top: 0;
	}

	.btn-container {
		width: 175px;
	}

	.modal__kucing {
		width: 175px;
		left: -20%;
	}
}

@media screen and (min-width: 768px) and (max-height: 700px) {
	.berkah-bg {
		background-position: bottom -60px center;
	}

	.logo-berkah-harian {
		width: 210px;
	}

	.sponsor {
		margin: 10px auto;
	}

	.btn-container {
		width: 140px;
		margin: 20px auto;
	}

	.modal__container {
		width: 320px;
		height: 522px;
		padding: 70px 10px;
	}

	.modal__close {
		top: 36px;
		right: 0;
	}

	.leaderboard-wrapper {
		max-height: 250px;
	}

	.modal__kucing {
		width: 120px;
	}

	.streak-subtitle {
		font-size: 12px;
	}

	#modal-daily-streak .modal__kucing {
		width: 120px;
	}

	.panduan-wrapper {
		max-height: 235px;
	}
}

@-webkit-keyframes pulsing {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@-moz-keyframes pulsing {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@-o-keyframes pulsing {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes pulsing {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}