/* Animasi perpindahan halaman: garis progres di atas + lapisan lembut bila lama.
   Disisipkan ke semua halaman oleh hook Csrf_token (application/hooks). */
:root {
	--tr-warna-1: #6fb3e0;
	--tr-warna-2: #438eb9;
	--tr-warna-3: #2b6a94;
	--tr-latar: rgba(245, 248, 251, .82);
}

#tr-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 0;
	height: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(90deg, var(--tr-warna-1), var(--tr-warna-2), var(--tr-warna-3));
	box-shadow: 0 0 10px rgba(67, 142, 185, .55);
	opacity: 0;
	pointer-events: none;
}
.tr-jalan #tr-bar {
	opacity: 1;
	animation: tr-maju 10s cubic-bezier(.08, .8, .2, 1) forwards;
}
.tr-tiba #tr-bar {
	opacity: 1;
	animation: tr-tuntas .55s ease-out forwards;
}

#tr-layar {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tr-latar);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.tr-lama #tr-layar {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease;
}

.tr-kotak {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 22px 30px 18px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(43, 106, 148, .14);
	transform: translateY(6px);
	transition: transform .25s ease;
}
.tr-lama .tr-kotak {
	transform: none;
}
.tr-putar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid rgba(67, 142, 185, .18);
	border-top-color: var(--tr-warna-2);
	animation: tr-putar .8s linear infinite;
}
.tr-teks {
	font: 600 12px/1 "Open Sans", Arial, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tr-warna-3);
	opacity: .8;
}

@keyframes tr-maju {
	0%   { width: 0; }
	20%  { width: 45%; }
	100% { width: 92%; }
}
@keyframes tr-tuntas {
	0%   { width: 70%; opacity: 1; }
	60%  { width: 100%; opacity: 1; }
	100% { width: 100%; opacity: 0; }
}
@keyframes tr-putar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.tr-jalan #tr-bar, .tr-tiba #tr-bar { animation: none; width: 100%; }
	.tr-tiba #tr-bar { opacity: 0; transition: opacity .3s; }
	.tr-putar { animation-duration: 2s; }
}