@import url("/fonts/fonts.php");

/* =========================================================
   GLOBAL
   File: css/style.css
   ========================================================= */

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

html,
body {
	height: 100%;
	font-family: Arial, sans-serif;
	overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.container {
	display: flex;
	flex-direction: column;
	background: url("../images/bg-standard-hutri.png") no-repeat center center
		fixed;
	background-size: cover;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

/* =========================================================
   LAYOUT SECTIONS
   ========================================================= */

.top-section {
	display: flex;
	flex-basis: 30%;
	height: 30%;
	overflow: hidden;
	margin-top: 1%;
}

.middle-section {
	display: flex;
	flex-basis: 40%;
	height: 40%;
	align-items: center;
	justify-content: center;
	margin-top: 415px;
	z-index: 2;
}

/* =========================================================
   BOTTOM APPLICATION SECTION
   ========================================================= */

/*
   PENTING:

   bottom-section sekarang HANYA untuk icon aplikasi.

   Running checklist sudah dipisahkan dari section ini.

   Jarak icon ke running checklist:
   19px ≈ 0,5 cm
*/

.bottom-section {
	position: absolute;

	left: 0;

	/*
	   Checklist:
	   bottom = 5%
	   height = 60px
	   gap = 19px

	   Jadi icon berada tepat 19px di atas checklist.
	*/
	bottom: calc(5% + 60px + 19px);

	width: 100%;

	display: grid;

	grid-template-columns: repeat(5, 1fr);

	align-items: end;

	justify-items: center;

	gap: 10px;

	padding: 0 10px;

	margin: 0;

	height: auto;

	z-index: 10;
}

.bottom-section .column {
	width: 100%;
	height: auto;

	display: flex;

	justify-content: center;

	align-items: flex-end;
}

.bottom-section .column img {
	width: clamp(120px, 20vw, 300px);

	height: auto;

	max-height: 175px;

	object-fit: contain;

	transition: all 0.3s ease;

	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.bottom-section .column img:hover {
	transform: scale(1.15);

	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
}

/* =========================================================
   HORIZONTAL SLIDER
   ========================================================= */

.horizontal-slider-container {
	width: 100%;
	height: 80%;
	overflow: hidden;
	position: relative;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
	margin-top: 1%;
}

.horizontal-slider {
	display: flex;
	height: 100%;
	will-change: transform;
}

.horizontal-slider .slide {
	flex: 0 0 auto;
	padding: 0 5px;
	display: flex;
	align-items: center;
}

.horizontal-slider img {
	height: 100%;
	width: auto;
	max-height: 150px;
	object-fit: contain;
	border-radius: 8px;
	transition: transform 0.3s ease;
}

.horizontal-slider-container:hover .horizontal-slider img {
	transform: scale(1.1);
}

/* =========================================================
   MAIN BACK SECTION
   ========================================================= */

.back-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: -8%;
	z-index: 0;
}

.back-column {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 50 !important;
}

/* =========================================================
   COLUMN
   ========================================================= */

.column {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.column img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* =========================================================
   COLUMN 1
   ========================================================= */

.column1 {
	margin-top: 10px;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.column1 img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* =========================================================
   RKFT
   ========================================================= */

.rkft {
	text-align: center;
	margin-top: 5%;
	margin: 20px 0;
	z-index: 50 !important;
}

.rkft img {
	width: 400px;
	height: auto;
	transition: transform 0.3s ease;
}

/* =========================================================
   TEXT BACK
   ========================================================= */

.text-back {
	font-size: clamp(20px, 4vw, 40px);
	color: #8a0000;
	font-weight: bold;
	text-align: center;

	text-shadow:
		1px 1px 0 #fff,
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff;

	line-height: 1.4;

	animation: zoomIn 10s;
}

.zoom-text-back {
	font-size: clamp(20px, 4vw, 40px);
	color: #8a0000;
	font-weight: bold;
	text-align: center;

	text-shadow:
		1px 1px 0 #fff,
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff;

	line-height: 1.4;

	animation: zoomIn 10s;
}

/* =========================================================
   HIASAN NATAL / RAMADHAN
   ========================================================= */

.natal {
	font-family: "Almalik Regular";
	display: block;
	font-size: larger;
	animation: glowText 2.8s ease-in-out infinite;
}

.puasa {
	font-family: "Almalik Regular";
	display: block;
	font-size: 50pt;
	color: #008a3c !important;
	animation: glowText 2.8s ease-in-out infinite;
}

/* =========================================================
   GLOW TEXT
   ========================================================= */

@keyframes glowText {
	0% {
		text-shadow:
			1px 1px 0 #fff,
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			0 0 6px rgba(255, 255, 255, 0.6),
			0 0 12px rgba(176, 23, 23, 0.6);
	}

	25% {
		text-shadow:
			1px 1px 0 #fff,
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			0 0 12px gold,
			0 0 24px #ff0000;
	}

	50% {
		text-shadow:
			1px 1px 0 #fff,
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			0 0 6px rgba(255, 255, 255, 0.6),
			0 0 12px rgba(176, 23, 23, 0.6);
	}

	75% {
		text-shadow:
			1px 1px 0 #fff,
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			0 0 12px rgb(0, 255, 81),
			0 0 24px #40fe3c;
	}

	100% {
		text-shadow:
			1px 1px 0 #fff,
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			0 0 6px rgba(255, 255, 255, 0.6),
			0 0 12px rgba(176, 23, 23, 0.6);
	}
}

/* =========================================================
   NATAL WRAPPER
   ========================================================= */

.natal-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: -10px;
	flex-wrap: wrap;
}

.natal-icon {
	flex-shrink: 0;
}

/* =========================================================
   NATAL ICON
   ========================================================= */

.natal-icon {
	animation: floatIcon 3.5s ease-in-out infinite;

	filter: drop-shadow(0 0 0 #008a3c) drop-shadow(1px 0 0 #008a3c)
		drop-shadow(-1px 0 0 #008a3c) drop-shadow(0 1px 0 #008a3c)
		drop-shadow(0 -1px 0 #008a3c) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.ramadhan-icon {
	filter: drop-shadow(0 0 0 #008a3c) drop-shadow(1px 0 0 #008a3c)
		drop-shadow(-1px 0 0 #008a3c) drop-shadow(0 1px 0 #008a3c)
		drop-shadow(0 -1px 0 #008a3c) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

/* =========================================================
   NATAL ICON DELAY
   ========================================================= */

.natal-icon.left {
	animation-delay: 0s;
}

.natal-icon.right {
	animation-delay: 1.5s;
}

/* =========================================================
   FLOAT ICON
   ========================================================= */

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

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

/* =========================================================
   SNOW SYSTEM
   3 LAYER + WIND
   ========================================================= */

.snow-system {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	overflow: hidden;
}

.snow-layer {
	position: absolute;
	inset: 0;

	background-repeat: repeat;

	animation-name: snowFallWind;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	will-change: transform;

	opacity: 1 !important;

	transition: none !important;
}

/* =========================================================
   SNOW LAYER BACK
   ========================================================= */

.layer-back {
	background-image:
		radial-gradient(
			1px 1px at 20px 30px,
			rgba(255, 255, 255, 0.35),
			transparent
		),
		radial-gradient(
			1px 1px at 160px 210px,
			rgba(255, 255, 255, 0.25),
			transparent
		),
		radial-gradient(
			0.8px 0.8px at 280px 140px,
			rgba(255, 255, 255, 0.2),
			transparent
		);

	background-size: 300px 300px;

	animation-duration: 22s;

	opacity: 0.6 !important;
}

/* =========================================================
   SNOW LAYER MID
   ========================================================= */

.layer-mid {
	background-image:
		radial-gradient(
			1.5px 1.5px at 40px 70px,
			rgba(255, 255, 255, 0.6),
			transparent
		),
		radial-gradient(
			1.5px 1.5px at 190px 230px,
			rgba(255, 255, 255, 0.5),
			transparent
		),
		radial-gradient(
			1.2px 1.2px at 320px 160px,
			rgba(255, 255, 255, 0.45),
			transparent
		);

	background-size: 350px 350px;

	animation-duration: 16s;

	opacity: 0.85 !important;
}

/* =========================================================
   SNOW LAYER FRONT
   ========================================================= */

.layer-front {
	background-image:
		radial-gradient(
			2px 2px at 90px 110px,
			rgba(255, 255, 255, 0.9),
			transparent
		),
		radial-gradient(
			2px 2px at 260px 300px,
			rgba(255, 255, 255, 0.8),
			transparent
		),
		radial-gradient(
			1.8px 1.8px at 360px 200px,
			rgba(255, 255, 255, 0.85),
			transparent
		);

	background-size: 400px 400px;

	animation-duration: 12s;

	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));

	opacity: 1 !important;
}

/* =========================================================
   SNOW FALL + WIND
   ========================================================= */

@keyframes snowFallWind {
	from {
		transform: translate(-30px, -100%);
	}

	to {
		transform: translate(80px, 100%);
	}
}

/* =========================================================
   SNOW GROUND
   ========================================================= */

/*
.snow-ground {
	position: absolute;
	bottom: 3%;
	left: 0;
	width: 100%;
	height: 0;

	background: linear-gradient(
		to top,
		rgba(255, 255, 255, 0.9),
		rgba(255, 255, 255, 0.6),
		transparent
	);

	filter: blur(1px);

	opacity: 0;

	animation: snowGroundLoop 140s infinite linear;
}
*/

/*
@keyframes snowGroundLoop {

	0% {
		height: 0;
		opacity: 0;
	}

	5% {
		opacity: 0.3;
	}

	20% {
		height: 20px;
		opacity: 0.6;
	}

	40% {
		height: 40px;
		opacity: 0.8;
	}

	60% {
		height: 60px;
		opacity: 1;
	}

	75% {
		height: 80px;
		opacity: 1;
	}

	85% {
		height: 80px;
		opacity: 1;
	}

	90% {
		height: 60px;
		opacity: 0.8;
	}

	95% {
		height: 30px;
		opacity: 0.5;
	}

	100% {
		height: 0;
		opacity: 0;
	}
}
*/

/* =========================================================
   SNOW RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
	.layer-back {
		animation-duration: 26s;
	}

	.layer-mid {
		animation-duration: 20s;
	}

	.layer-front {
		animation-duration: 15s;
	}

	@keyframes snowGroundLoop {
		0% {
			height: 0;
			opacity: 0;
		}

		20% {
			height: 15px;
			opacity: 0.6;
		}

		40% {
			height: 30px;
			opacity: 0.8;
		}

		60% {
			height: 45px;
			opacity: 1;
		}

		75% {
			height: 60px;
			opacity: 1;
		}

		85% {
			height: 60px;
			opacity: 1;
		}

		90% {
			height: 40px;
			opacity: 0.8;
		}

		95% {
			height: 20px;
			opacity: 0.5;
		}

		100% {
			height: 0;
			opacity: 0;
		}
	}
}

@media (max-width: 480px) {
	.snow-ground {
		animation-duration: 100s;
	}

	@keyframes snowGroundLoop {
		0% {
			height: 0;
			opacity: 0;
		}

		25% {
			height: 10px;
			opacity: 0.6;
		}

		50% {
			height: 20px;
			opacity: 0.8;
		}

		75% {
			height: 30px;
			opacity: 1;
		}

		85% {
			height: 30px;
			opacity: 1;
		}

		90% {
			height: 20px;
			opacity: 0.8;
		}

		95% {
			height: 10px;
			opacity: 0.5;
		}

		100% {
			height: 0;
			opacity: 0;
		}
	}
}

/* =========================================================
   BOTTOM APPLICATION ICONS
   ========================================================= */

.bottom-section .column {
	flex: 0 1 auto;
}

.bottom-section .column img {
	width: clamp(120px, 20vw, 300px);
	height: auto;
	max-height: 175px;

	transition: all 0.3s ease;

	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.bottom-section .column img:hover {
	transform: scale(1.15);

	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
}

/* =========================================================
   RUNNING CHECKLIST - ATAS
   ========================================================= */

.running-checklist-container-red {
	position: absolute;
	bottom: 17%;
	width: 100%;

	background: linear-gradient(
		90deg,
		rgba(138, 0, 0, 0.8) 0%,
		rgba(138, 0, 0, 0.9) 50%,
		rgba(138, 0, 0, 0.8) 100%
	);

	padding: 12px 0;

	color: white;

	font-size: clamp(14px, 2vw, 20px);

	overflow: hidden;

	border-top: 2px solid gold;
	border-bottom: 2px solid gold;
}

/* =========================================================
   RUNNING CHECKLIST - UTAMA
   ========================================================= */

/*
   TINGGI DITETAPKAN 60PX.

   bottom-section:
   bottom: calc(5% + 60px + 19px);

   running checklist:
   bottom: 5%;

   HASIL:
   JARAK ICON KE CHECKLIST = 19PX
   ≈ 0,5 CM
*/

.running-checklist-container {
	position: absolute;

	left: 0;

	bottom: 5%;

	width: 100%;

	height: 100px;

	min-height: 60px;
	max-height: 100px;

	background: linear-gradient(
		90deg,
		rgba(138, 0, 0, 0.29) 0%,
		rgba(138, 0, 0, 0.29) 50%,
		rgba(138, 0, 0, 0.29) 100%
	);

	padding: 12px 0;

	color: white;

	font-size: clamp(14px, 2vw, 20px);

	overflow: hidden;

	border-top: 2px solid gold;
	border-bottom: 2px solid gold;

	box-sizing: border-box;

	z-index: 20;
}

/* =========================================================
   RUNNING CHECKLIST TITLE
   ========================================================= */

.running-checklist-title {
	font-weight: bold;
	margin-bottom: 5px;

	color: #ffd700;

	text-shadow: 1px 1px 2px #000;

	text-align: center !important;
}

/* =========================================================
   RUNNING CHECKLIST ANIMATION
   ========================================================= */

.running-checklist {
	display: inline-block;

	white-space: nowrap;

	padding-left: 100%;

	animation: scrollChecklist 120s linear infinite;
}

.running-checklist:hover {
	animation-play-state: paused;
}

/* =========================================================
   OPD ITEM
   ========================================================= */

.opd-item {
	display: inline-block;

	margin: 0 20px;

	padding: 4px 12px;

	background: rgba(255, 255, 255, 0.1);

	border-radius: 20px;

	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* =========================================================
   SEPARATOR
   ========================================================= */

.separator {
	color: gold;
	font-weight: bold;
}

/* =========================================================
   HEADER
   ========================================================= */

.header {
	position: fixed;

	top: 0;
	left: 0;

	width: 100%;

	height: 3%;

	padding: 5px 50px;

	background: rgba(255, 255, 255, 0.1);

	display: flex;

	justify-content: space-between;

	align-items: center;

	backdrop-filter: blur(10px);

	border-bottom: 2px solid rgba(255, 255, 255, 0.2);

	z-index: 100;
}

.header::before {
	content: "";

	position: absolute;

	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);

	transition: 0.5s;

	pointer-events: none;
}

.header:hover::before {
	left: 100%;
}

/* =========================================================
   HEADER LOGO
   ========================================================= */

.h-logo {
	color: #8a0000;

	font-size: 25px;

	text-decoration: none;

	font-weight: 600;

	cursor: pointer;

	z-index: 1002;
}

.logo-img {
	display: inline-block;

	transition: transform 0.3s ease;

	z-index: 1002 !important;
}

.logo-img:hover {
	transform: scale(1.2) translateY(10px);

	z-index: 1002 !important;
}

.logo-img2:hover {
	transform: scale(1.9);

	transition: transform 0.3s ease;
}

/* =========================================================
   HEADER NAVBAR
   ========================================================= */

.h-navbar {
	display: flex;

	align-items: center;

	z-index: 1001 !important;
}

/* =========================================================
   NAV ICON
   ========================================================= */

.nav-icon img {
	display: block;

	object-fit: contain;
}

/* =========================================================
   NAV ICON SIZE
   ========================================================= */

.nav-icon.sipde-bmd img {
	width: 50px;
	height: 20px;
}

.nav-icon.jaga-id img {
	width: 60px;
	height: 20px;
}

.nav-icon.kalkulator-susut img {
	width: 24px;
	height: 24px;
}

.nav-icon.e-checklist img {
	width: 20px;
	height: 20px;
}

.nav-icon.monitor-app img {
	width: 21px;
	height: 21px;
}

/* =========================================================
   NAV ICON HOVER
   ========================================================= */

.nav-icon:hover img {
	transform: scale(1.15);

	filter: brightness(1.15) drop-shadow(0 0 4px #fff)
		drop-shadow(0 0 6px #8a0000);
}

.logo-img3:hover {
	transform: scale(1.1);

	transition: transform 0.3s ease;
}

/* =========================================================
   HEADER NAV LINKS
   ========================================================= */

.h-navbar a {
	color: white;

	font-size: medium;

	text-decoration: none;

	margin-left: 35px;

	transition: 0.8s;

	text-shadow:
		1px 1px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000;
}

.h-navbar a:hover {
	color: #8a0000 !important;

	font-weight: bold;

	font-size: x-large !important;

	transform: scale(1.1);

	text-shadow:
		1px 1px 0 #fff,
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
	position: fixed;

	bottom: 0;
	left: 0;

	width: 100%;

	height: 3%;

	padding: 5px 10px;

	background: rgba(255, 255, 255, 0.1);

	display: flex;

	justify-content: space-between;

	align-items: center;

	backdrop-filter: blur(10px);

	border-top: 2px solid rgba(255, 255, 255, 0.2);

	box-sizing: border-box;

	z-index: 100;
}

.footer::before {
	content: "";

	position: absolute;

	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);

	transition: 0.5s;

	pointer-events: none;
}

.footer:hover::before {
	left: 100%;
}

/* =========================================================
   FOOTER NAVBAR
   ========================================================= */

.f-navbar {
	display: flex;

	justify-content: space-between;

	width: 100%;
}

.f-navbar a {
	color: #8a0000;

	font-size: medium;

	text-decoration: none;

	transition: 0.3s;
}

.f-navbar a:hover {
	color: rgb(1, 3, 122);

	font-weight: bold;

	font-size: larger !important;

	text-shadow:
		1px 1px 0 #fff,
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff;
}

.f-navbar .center {
	flex: 1;
	text-align: center;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes scrollChecklist {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gentlePulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.9;
		transform: scale(1.02);
	}
}

@keyframes zoomGlow {
	0%,
	100% {
		filter: brightness(0.95) drop-shadow(0 0 5px rgba(255, 255, 255, 0.1))
			drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
	}

	25% {
		filter: brightness(1.05) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3))
			drop-shadow(0 0 25px rgba(255, 255, 255, 0.4))
			drop-shadow(0 0 35px rgba(255, 255, 255, 0.2));
	}

	50% {
		filter: brightness(0.95) drop-shadow(0 0 5px rgba(255, 215, 0, 0.1))
			drop-shadow(0 0 10px rgba(176, 23, 23, 0.2));
	}

	75% {
		filter: brightness(1.05) drop-shadow(0 0 15px rgba(255, 215, 0, 0.3))
			drop-shadow(0 0 25px rgba(176, 23, 23, 0.4))
			drop-shadow(0 0 35px rgba(255, 255, 255, 0.2));
	}
}

/* =========================================================
   RESPONSIVE - 1024PX
   ========================================================= */

@media (max-width: 1024px) {
	.top-section {
		height: 25vh;
	}

	.bottom-section {
		bottom: calc(80px + 60px + 19px);

		height: auto;

		gap: 15px;
	}

	.running-checklist-container {
		bottom: 80px;
	}
}

/* =========================================================
   RESPONSIVE - 768PX
   ========================================================= */

@media (max-width: 768px) {
	.container {
		padding-top: 60px;

		padding-bottom: 60px;
	}

	.top-section {
		height: 20vh;
	}

	.middle-section {
		padding: 10px;
	}

	.zoom-text-back {
		font-size: 24px;
	}

	.natal {
		font-size: 28px;
	}

	/* =====================================================
	   APPLICATION ICONS MOBILE
	   ===================================================== */

	.bottom-section {
		position: absolute;

		left: 0;

		/*
		   Checklist pada mobile:
		   bottom = 60px

		   tinggi checklist = 60px

		   gap = 19px

		   Icon:
		   60 + 60 + 19
		*/
		bottom: calc(60px + 60px + 19px);

		width: 100%;

		display: grid;

		grid-template-columns: repeat(2, 1fr);

		align-items: end;

		justify-items: center;

		height: auto;

		padding: 10px;

		gap: 10px;
	}

	.bottom-section .column {
		width: 100%;
	}

	.bottom-section .column img {
		width: clamp(100px, 25vw, 200px);

		max-height: 150px;
	}

	/* =====================================================
	   CHECKLIST MOBILE
	   ===================================================== */

	.running-checklist-container {
		position: absolute;

		left: 0;

		bottom: 60px;

		width: 100%;

		height: 60px;

		min-height: 60px;

		max-height: 60px;

		margin-top: 0;

		font-size: 14px;
	}

	/* HEADER */

	.header,
	.footer {
		padding: 8px 15px;
	}

	.h-navbar,
	.f-navbar {
		gap: 10px;
	}
}

/* =========================================================
   RESPONSIVE MOBILE - MAX 480PX
   KHUSUS HP:
   5 LOGO APLIKASI SELALU SEJAJAR 1 BARIS
   ========================================================= */

@media (max-width: 480px) {
	.zoom-text-back {
		font-size: 20px;
	}

	.natal {
		font-size: 24px;
	}

	/* =====================================================
	   BOTTOM APPLICATION ICONS
	   5 LOGO = 1 BARIS
	   ===================================================== */

	.bottom-section {
		position: absolute;

		left: 0;

		width: 100%;

		/*
			Footer = sekitar 50px
			Checklist = 60px
			Jarak icon ke checklist = 12px

			Jadi icon ditempatkan tepat
			di atas running checklist.
		*/
		bottom: calc(50px + 60px + 12px);

		/*
			PENTING:
			JANGAN 1fr.

			Harus 5 kolom agar semua logo
			sejajar dalam satu baris.
		*/
		grid-template-columns: repeat(5, minmax(0, 1fr));

		align-items: center;

		justify-items: center;

		width: 100%;

		height: 65px;

		padding: 0 6px;

		gap: 2px;

		margin: 0;

		z-index: 10;
	}

	/* =====================================================
	   MASING-MASING KOLOM
	   ===================================================== */

	.bottom-section .column {
		width: 100%;

		height: 65px;

		display: flex;

		justify-content: center;

		align-items: center;

		flex: none;

		min-width: 0;
	}

	/* =====================================================
	   LOGO APLIKASI MOBILE
	   ===================================================== */

	.bottom-section .column img {
		/*
			Ukuran otomatis mengikuti lebar HP.

			412px:
			sekitar 58px

			360px:
			sekitar 50px

			320px:
			sekitar 45px
		*/
		width: clamp(45px, 14vw, 60px);

		height: auto;

		max-width: 100%;

		max-height: 55px;

		object-fit: contain;

		transform: none !important;

		transition: none;
	}

	/* =====================================================
	   HILANGKAN EFEK HOVER PADA TOUCHSCREEN
	   ===================================================== */

	.bottom-section .column img:hover {
		transform: none;

		filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
	}

	/* =====================================================
	   RUNNING CHECKLIST MOBILE
	   ===================================================== */

	.running-checklist-container {
		position: absolute;

		left: 0;

		bottom: 50px;

		width: 100%;

		height: 60px;

		min-height: 60px;

		max-height: 60px;

		margin: 0;

		padding: 8px 0;

		font-size: 12px;

		overflow: hidden;

		z-index: 20;
	}

	/* =====================================================
	   CHECKLIST TEXT
	   ===================================================== */

	.running-checklist {
		animation-duration: 60s;

		white-space: nowrap;
	}

	/* =====================================================
	   OPD ITEM
	   ===================================================== */

	.opd-item {
		margin: 0 6px;

		padding: 2px 7px;

		font-size: 12px;
	}

	/* =====================================================
	   SEPARATOR
	   ===================================================== */

	.separator {
		margin: 0 2px;
	}

	/* =====================================================
	   HEADER & FOOTER
	   ===================================================== */

	.header,
	.footer {
		padding-left: 10px;

		padding-right: 10px;
	}

	/* =====================================================
	   NAVBAR MOBILE
	   ===================================================== */

	.h-navbar {
		gap: 5px;

		margin-left: auto;
	}

	.h-navbar a {
		margin-left: 8px;
	}

	/* =====================================================
	   FOOTER MOBILE
	   ===================================================== */

	.footer {
		height: 50px;

		padding-top: 5px;

		padding-bottom: 5px;
	}

	.f-navbar {
		font-size: 11px;
	}

	.copyright {
		font-size: 11px;

		white-space: nowrap;
	}
}

/* =========================================================
   PRINT STYLES
   ========================================================= */

@media print {
	.header,
	.footer,
	.running-checklist-container,
	.horizontal-slider-container {
		display: none;
	}

	.container {
		background: white !important;
	}

	.zoom-text-back {
		color: black !important;

		text-shadow: none !important;
	}
}