@font-face {
    font-family: 'Noto Sans KR ExtraBold';
    src: url('fonts/NotoSansKR-ExtraBold.eot');
    src: url('fonts/NotoSansKR-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-ExtraBold.woff2') format('woff2'),
        url('fonts/NotoSansKR-ExtraBold.woff') format('woff'),
        url('fonts/NotoSansKR-ExtraBold.ttf') format('truetype'),
        url('fonts/NotoSansKR-ExtraBold.svg#NotoSansKR-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR Black';
    src: url('fonts/NotoSansKR-Black.eot');
    src: url('fonts/NotoSansKR-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Black.woff2') format('woff2'),
        url('fonts/NotoSansKR-Black.woff') format('woff'),
        url('fonts/NotoSansKR-Black.ttf') format('truetype'),
        url('fonts/NotoSansKR-Black.svg#NotoSansKR-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR Bold';
    src: url('fonts/NotoSansKR-Bold.eot');
    src: url('fonts/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Bold.woff2') format('woff2'),
        url('fonts/NotoSansKR-Bold.woff') format('woff'),
        url('fonts/NotoSansKR-Bold.ttf') format('truetype'),
        url('fonts/NotoSansKR-Bold.svg#NotoSansKR-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR ExtraLight';
    src: url('fonts/NotoSansKR-ExtraLight.eot');
    src: url('fonts/NotoSansKR-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-ExtraLight.woff2') format('woff2'),
        url('fonts/NotoSansKR-ExtraLight.woff') format('woff'),
        url('fonts/NotoSansKR-ExtraLight.ttf') format('truetype'),
        url('fonts/NotoSansKR-ExtraLight.svg#NotoSansKR-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR Light';
    src: url('fonts/NotoSansKR-Light.eot');
    src: url('fonts/NotoSansKR-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Light.woff2') format('woff2'),
        url('fonts/NotoSansKR-Light.woff') format('woff'),
        url('fonts/NotoSansKR-Light.ttf') format('truetype'),
        url('fonts/NotoSansKR-Light.svg#NotoSansKR-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR Medium';
    src: url('fonts/NotoSansKR-Medium.eot');
    src: url('fonts/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Medium.woff2') format('woff2'),
        url('fonts/NotoSansKR-Medium.woff') format('woff'),
        url('fonts/NotoSansKR-Medium.ttf') format('truetype'),
        url('fonts/NotoSansKR-Medium.svg#NotoSansKR-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR Regular';
    src: url('fonts/NotoSansKR-Regular.eot');
    src: url('fonts/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Regular.woff2') format('woff2'),
        url('fonts/NotoSansKR-Regular.woff') format('woff'),
        url('fonts/NotoSansKR-Regular.ttf') format('truetype'),
        url('fonts/NotoSansKR-Regular.svg#NotoSansKR-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR SemiBold';
    src: url('fonts/NotoSansKR-SemiBold.eot');
    src: url('fonts/NotoSansKR-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-SemiBold.woff2') format('woff2'),
        url('fonts/NotoSansKR-SemiBold.woff') format('woff'),
        url('fonts/NotoSansKR-SemiBold.ttf') format('truetype'),
        url('fonts/NotoSansKR-SemiBold.svg#NotoSansKR-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans KR Thin';
    src: url('fonts/NotoSansKR-Thin.eot');
    src: url('fonts/NotoSansKR-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Thin.woff2') format('woff2'),
        url('fonts/NotoSansKR-Thin.woff') format('woff'),
        url('fonts/NotoSansKR-Thin.ttf') format('truetype'),
        url('fonts/NotoSansKR-Thin.svg#NotoSansKR-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face{
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
		url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
		url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
		url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
		url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style:normal;
}

html, body{
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: #3f3e3e;
}
.body-landing{
	overflow: hidden;
}

button,
input,
textarea{
	outline: none;
	border: 1px solid #174483 !important;
}

label{
	font-weight: bold;
}

.err{
	position: relative;
	display: block;
	color: red;
	display: none;
	font-family: 'Noto Sans KR Regular';
	font-size: 14px;
	margin-top:5px;
}

.swal-sm {
	width: 350px !important;
	font-size: 14px;
}

.swal-sm .swal2-popup {
  padding-top: 2.5em !important;
}

.swal-sm .swal2-title {
  	font-size: 16px !important;
}

.swal-sm .swal2-html-container {
  	font-size: 14px !important;
}

.swal-sm .swal2-confirm,
.swal-sm .swal2-cancel {
	padding: 4px 12px !important;
	font-size: 14px !important;
	border-radius: 4px !important;
}

/* Ukuran ikon swal2 (success, error, warning, dll) */
.swal-sm .swal2-icon {
	width: 50px !important;
	height: 50px !important;
	margin-top: 30px !important;
	margin-bottom: 10px !important;
}

/* Success icon (centang) penyesuaian */
.swal-sm .swal2-icon.swal2-success .swal2-success-line-tip,
.swal-sm .swal2-icon.swal2-success .swal2-success-line-long {
	height: 3px !important;
	background-color: #4ba319;
}

.swal-sm .swal2-icon.swal2-success .swal2-success-line-tip {
	top: 26px !important;
	left: 8px !important;
	width: 18px !important;
	transform: rotate(45deg);
}

.swal-sm .swal2-icon.swal2-success .swal2-success-line-long {
	top: 22px !important;
	right: 3px !important;
	width: 30px !important;
	transform: rotate(-45deg);
}

/* Lingkaran icon success */
.swal-sm .swal2-icon.swal2-success .swal2-success-ring {
	width: 50px !important;
	height: 50px !important;
	border-width: 4px !important;
}

/* Error icon (X) penyesuaian */
.swal-sm .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
	top: 23px !important;
	width: 30px !important;
	height: 3px !important;
	background-color: #e93c3c;
}

.swal-sm .swal2-icon.swal2-error .swal2-x-mark-line-left {
	left: 10px !important;
	transform: rotate(45deg);
}

.swal-sm .swal2-icon.swal2-error .swal2-x-mark-line-right {
	right: 10px !important;
	transform: rotate(-45deg);
}


	.text-error,
	.text-error:focus{
		border: solid 1px red;
	}
	.frame-text-input{
		position: relative;
		display: block;
	}
	.text-success{
		position: relative;
		display: block;
		border: solid 1px green !important;
		padding-right: 50px;
	}
		.icon-success{
			position: absolute;
			display: none;
			font-size: 24px;
			z-index: 9;
			right: 10px;
			top: 5px;
			color: green;
		}

	
	.content{
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100vh;
		max-width: 500px;
		left: 50%;
		transform: translateX(-50%);
		background: url('../../images/bg-top.png') top center no-repeat, url('../../images/bg-bottom.png') bottom center no-repeat, #007bff;
		background-size: 100% auto, 100% auto, cover;
	}

		.header-content{
			position: relative;
			display: block;
			width: 100%;
			height: auto;
			padding: 50px 30px 20px 30px;
			text-align: center;
			flex-shrink: 0;
		}
			.header-logo{
				margin-bottom: 20px;
				width: 100%;
			}
			.header-logo-atm{
				padding-top: 10px;
				width: 60%;
			}
			.header-logo-acara{
				width: 100%;
				margin-bottom: 20px;
				transform: scale(1.5);
			}

		.body-content{
			position: relative;
			display: block;
			width: 100%;
			flex: 1;
			padding: 0px 30px;
			color: #174483;
			font-family: 'Noto Sans KR Regular';
			font-size: 1em;
		}
			.judul-content{
				font-family: 'Noto Sans KR Bold';
				font-size: 26px;
				margin-top: 30px;
				margin-bottom: 20px;
				text-align: center;
			}
			.content-register{
				position: inherit;
				display: block;
				padding-bottom: 30px;
			}
				.border-red {
					border: 2px solid #174483 !important;
					border-radius: 10px;
					padding: 20px;
				}
				.border-red:focus {
					border-color: #174483 !important;
				}
				.select2-container--default .select2-selection--single {
					border: 2px solid #174483 !important;
					border-radius: 10px;
					padding: 10px 20px;
					height: auto;
					line-height: 1.2;
				}
				.select2-container--default .select2-selection--single .select2-selection__rendered {
					padding-left: 0;
					padding-right: 0;
					line-height: 1.2;
				}
				.select2-container--default .select2-selection--single .select2-selection__arrow {
					height: 100%;
					top: 0;
					right: 10px;
				}
				.btn-daftar{
					background-color: #174483;
					color: #fff;
					border: none;
					padding: 10px 50px;
					font-size: 18px;
					border-radius: 25px;
					cursor: pointer;
					font-family: 'Noto Sans KR Bold';
					transition: background-color 0.3s ease;
				}
				.btn-daftar:hover{
					background-color: #1254af;
				}

			.content-menu{
				position: inherit;
				display: block;
				margin-top: 20vh;
				padding-bottom: 30px;
			}
				.btn-menu{
					background-color: #174483;
					color: #fff;
					border: none;
					font-size: 1.5rem;
					font-family: 'Noto Sans KR SemiBold';
					width: 100%;
					text-align: center;
					padding: 10px 0px;
					margin-bottom: 30px;
					border-radius: 10px;
				}
				.box-sosmed{
					position: relative;
					display: block;
					width: 100%;
					margin-top: 30px;
				}
					.judul-sosmed{
						font-family: 'Noto Sans KR Bold';
						font-size: 20px;
						margin-bottom: 20px;
						text-align: center;
					}
					.isi-sosmed{
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 20px;
					}
						.isi-sosmed img{
							width: 60px;
							height: 60px;
							cursor: pointer;
						}

			.content-info{
				position: inherit;
				display: block;
				padding-bottom: 30px;
			}
				/* Info list (accordion) */
				.content-info .info-item{
					background: #fff;
					border: none;
					border-radius: 12px;
					margin-bottom: 15px;
					overflow: hidden;
					box-shadow: 0 2px 6px rgba(0,0,0,0.03);
				}
				.content-info .info-item-judul{
					cursor: pointer;
					color: #fff;
					padding: 7px 20px;
					background-color: #174483;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 12px;
					user-select: none;
					border-radius: 12px;
					box-shadow: 0 3px 8px rgba(0,0,0,0.5);
				}
				.content-info .info-item-judul .judul-text{
					font-family: 'Noto Sans KR Regular';
					font-size: 1.5rem;
					text-align: left;
					flex: 1;
				}
				.content-info .info-item-judul .icon{
					width: 25px;
					height: 25px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 1rem;
				}
				.content-info .info-item-detail{
					padding: 0 16px 0 16px;
					background: transparent;
					max-height: 0;
					overflow: hidden;
					color: #000;
					font-family: 'Noto Sans KR Regular';
					transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				}
				.content-info .info-item.open .info-item-detail{
					max-height: 1000px; /* increased for more content */
					padding: 12px 16px 16px 16px;
				}
				.content-info .detail-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 20px;
					padding: 10px 0;
					border-bottom: 1px solid #eee;
				}
				.content-info .detail-item:last-child{
					border-bottom: none;
				}
				.content-info .detail-item > div:first-child{
					flex: 1;
				}
				.content-info .detail-item-periode{
					font-family: 'Noto Sans KR SemiBold';
					font-size: 1rem;
					margin-bottom: 5px;
				}
				.content-info .detail-item-nama{
					font-family: 'Noto Sans KR Bold';
					font-size: 1.3rem;
					margin-bottom: 5px;
					line-height: 1.3rem;
				}
				.content-info .detail-item-deskripsi{
					font-size: 14px;
					line-height: 1.4;
				}
				.content-info .detail-item-maps{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 5px;
					cursor: pointer;
					text-align: center;
					flex-shrink: 0;
				}
				.content-info .detail-item-maps i{
					font-size: 32px;
					color: #174483;
					text-shadow: 0 2px 4px rgba(0,0,0,0.2);
				}
				.content-info .detail-item-maps span{
					font-size: 12px;
					color: #174483;
					font-family: 'Noto Sans KR Regular';
				}

			.content-qr{
				position: inherit;
				display: block;
				padding-bottom: 30px;
			}
				.qr-code-container{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 30px;
					background: #fff;
					border-radius: 15px;
					box-shadow: 0 4px 12px rgba(0,0,0,0.1);
					margin-bottom: 20px;
				}
				.qr-code-image{
					width: 250px;
					height: 250px;
					border: 3px solid #174483;
					border-radius: 10px;
					padding: 10px;
					background: #fff;
				}
				.btn-scan-qr,
				.btn-show-qr{
					background-color: #174483;
					color: #fff;
					border: none;
					padding: 12px 40px;
					font-size: 18px;
					border-radius: 25px;
					cursor: pointer;
					font-family: 'Noto Sans KR Bold';
					transition: background-color 0.3s ease;
					width: 100%;
					box-shadow: 0 3px 8px rgba(0,0,0,0.15);
				}
				.btn-scan-qr:hover,
				.btn-show-qr:hover{
					background-color: #d11a1a;
				}
				.btn-scan-qr i,
				.btn-show-qr i{
					margin-right: 8px;
				}
				#qr-reader{
					width: 100%;
					border-radius: 15px;
					overflow: hidden;
					margin-bottom: 20px;
					box-shadow: 0 4px 12px rgba(0,0,0,0.1);
				}

			.content-feedback{
				position: inherit;
				display: block;
				padding-bottom: 30px;
			}
				.feedback-form{
					background: #fff;
					padding: 25px;
					border-radius: 15px;
					box-shadow: 0 4px 12px rgba(0,0,0,0.1);
				}
				.rating-section{
					margin-bottom: 25px;
				}
				.rating-label,
				.feedback-label{
					display: block;
					font-family: 'Noto Sans KR Bold';
					font-size: 16px;
					color: #333;
					margin-bottom: 10px;
				}
				.star-rating{
					display: flex;
					justify-content: space-between;
					gap: 8px;
					font-size: 48px;
					width: 100%;
				}
				.star-rating i{
					color: #ddd;
					cursor: pointer;
					transition: color 0.2s ease;
					flex: 1;
					text-align: center;
				}
				.star-rating i.active,
				.star-rating i:hover{
					color: #ffc107;
				}
				.feedback-section{
					margin-bottom: 20px;
				}
				.feedback-textarea{
					width: 100%;
					padding: 12px;
					border: 2px solid #e0e0e0;
					border-radius: 10px;
					font-family: 'Noto Sans KR Regular';
					font-size: 14px;
					resize: vertical;
					transition: border-color 0.3s ease;
				}
				.feedback-textarea:focus{
					outline: none;
					border-color: #174483;
				}
				.btn-kirim-feedback{
					background-color: #174483;
					color: #fff;
					border: none;
					padding: 12px 40px;
					font-size: 18px;
					border-radius: 25px;
					cursor: pointer;
					font-family: 'Noto Sans KR Bold';
					transition: background-color 0.3s ease;
					width: 100%;
					box-shadow: 0 3px 8px rgba(0,0,0,0.15);
				}
				.btn-kirim-feedback:hover{
					background-color: #d11a1a;
				}
				.btn-kirim-feedback i{
					margin-right: 8px;
				}
				.feedback-sent{
					background: #fff;
					padding: 30px;
					border-radius: 15px;
					box-shadow: 0 4px 12px rgba(0,0,0,0.1);
					text-align: center;
				}
				.feedback-sent-icon{
					font-size: 64px;
					color: #4ba319;
					margin-bottom: 15px;
				}
				.feedback-sent h3{
					font-family: 'Noto Sans KR Bold';
					font-size: 24px;
					color: #333;
					margin-bottom: 10px;
				}
				.feedback-sent p{
					font-family: 'Noto Sans KR Regular';
					font-size: 16px;
					color: #666;
					margin-bottom: 25px;
				}
				.feedback-display{
					text-align: left;
					background: #f9f9f9;
					padding: 20px;
					border-radius: 10px;
				}
				.rating-display{
					margin-bottom: 15px;
				}
				.rating-display label{
					display: block;
					font-family: 'Noto Sans KR Bold';
					font-size: 16px;
					color: #333;
					margin-bottom: 8px;
				}
				.stars-display{
					display: flex;
					gap: 5px;
					font-size: 20px;
				}
				.stars-display i{
					color: #ddd;
				}
				.stars-display i.filled{
					color: #ffc107;
				}
				.kritik-display label{
					display: block;
					font-family: 'Noto Sans KR Bold';
					font-size: 16px;
					color: #333;
					margin-bottom: 8px;
				}
				.kritik-display p{
					font-family: 'Noto Sans KR Regular';
					font-size: 16px;
					color: #555;
					line-height: 1.6;
					margin: 0;
				}

			.content-history{
				position: inherit;
				display: block;
				padding-bottom: 30px;
			}
				.empty-history{
					background: #fff;
					padding: 40px 30px;
					border-radius: 15px;
					box-shadow: 0 4px 12px rgba(0,0,0,0.1);
					text-align: center;
				}
				.empty-icon{
					font-size: 64px;
					color: #ccc;
					margin-bottom: 15px;
				}
				.empty-history h3{
					font-family: 'Noto Sans KR Bold';
					font-size: 22px;
					color: #333;
					margin-bottom: 10px;
				}
				.empty-history p{
					font-family: 'Noto Sans KR Regular';
					font-size: 16px;
					color: #666;
					margin: 0;
				}
				.history-list{
					display: flex;
					flex-direction: column;
					gap: 12px;
				}
				.history-item{
					background: #fff;
					padding: 18px;
					border-radius: 12px;
					box-shadow: 0 2px 8px rgba(0,0,0,0.08);
					display: flex;
					gap: 15px;
					align-items: flex-start;
					transition: transform 0.2s ease, box-shadow 0.2s ease;
				}
				.history-item:hover{
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(0,0,0,0.12);
				}
				.history-icon{
					font-size: 32px;
					color: #4ba319;
					flex-shrink: 0;
				}
				.history-content{
					flex: 1;
				}
				.history-truck{
					font-family: 'Noto Sans KR Bold';
					font-size: 18px;
					color: #333;
					margin-bottom: 6px;
				}
				.history-location{
					font-family: 'Noto Sans KR Regular';
					font-size: 1.2rem;
					line-height: 1rem;
					color: #666;
					margin-bottom: 4px;
				}
				.history-location i{
					color: #174483;
					margin-right: 5px;
				}
				.history-description{
					font-family: 'Noto Sans KR Regular';
					font-size: 14px;
					color: #555;
					margin-bottom: 6px;
					line-height: 1.4;
				}
				.history-date{
					font-family: 'Noto Sans KR Regular';
					font-size: 13px;
					color: #999;
				}
				.history-date i{
					margin-right: 5px;
				}

		.footer-content{
			position: relative;
			display: block;
			width: 100%;
			padding: 20px 30px;
			text-align: center;
			flex-shrink: 0;
		}
			.btn-back-to-menu{
				background-color: #fff;
				color: #174483;
				border: 2px solid #174483;
				padding: 10px 30px;
				font-size: 16px;
				border-radius: 25px;
				cursor: pointer;
				font-family: 'Noto Sans KR Bold';
				transition: all 0.3s ease;
				box-shadow: 0 2px 6px rgba(0,0,0,0.1);
			}
			.btn-back-to-menu:hover{
				background-color: #174483;
				color: #fff;
			}
			.btn-back-to-menu i{
				margin-right: 8px;
			}




@media only screen
and (min-width: 601px) {
		.body-content{
			padding: 0px 50px;
		}
}

@media only screen
and (min-width: 1024px) {
	
}


/*Laptop / Desktop*/
@media only screen
and (min-width: 1280px) {
	
}


/*Desktop 1366*/
@media only screen
and (min-width: 1366px) {
	
}


/*Desktop MAC*/
@media only screen
and (min-width: 1440px) {
						
}


/*Desktop Full HD MAC*/
@media only screen
and (min-width: 1680px) {
	
}


/* Link Register Styling */
.text-register{
	color: #f11f1f;
	text-decoration: none;
	font-family: 'Noto Sans KR Regular';
}
.link-register {
    color: #f11f1f;
    text-decoration: none;
    font-family: 'Noto Sans KR Bold';
    transition: color 0.3s ease;
}

.link-register:hover {
    text-decoration: underline;
}

/* Link Login Styling */
.text-login{
	color: #f11f1f;
	text-decoration: none;
	font-family: 'Noto Sans KR Regular';
}
.link-login {
    color: #f11f1f;
    text-decoration: none;
    font-family: 'Noto Sans KR Bold';
    transition: color 0.3s ease;
}

.link-login:hover {
    text-decoration: underline;
}

/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
	
}