/**
 * Tema STIA Modern: banner kepala (6 Nov 2026), pengganti gambar banner.
 *
 * Layar lebar: kartu biru tua selebar bar menu, berisi lambang STIA, nama
 * jurnal, E-ISSN, penerbit, dan dua prodi; di kanan, bukit dan laut Fakfak
 * dengan matahari emas. Gerak: ombak bergeser pelan, cincin matahari
 * berputar, kilap berkedip, dan seberkas cahaya melintas sesekali.
 * Ponsel/tablet: lambang + nama jurnal saja di bar putih.
 *
 * Semua gerak berhenti bila pengunjung memilih "kurangi gerakan".
 */

.stia_banner {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
	color: var(--stia-biru-tua);
}

.stia_banner:hover,
.stia_banner:focus {
	text-decoration: none;
	color: var(--stia-biru-tua);
}

.stia_banner_hias,
.stia_banner_label,
.stia_banner_penerbit,
.stia_banner_prodi {
	display: none;
}

.stia_banner_lambang {
	flex: none;
	display: grid;
	place-items: center;
}

.stia_banner_lambang img {
	display: block;
	width: 42px;
	height: auto;
	max-height: none;
	border-radius: 0;
	box-shadow: none;
}

.stia_banner_teks {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.stia_banner_judul {
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* ---------- layar lebar ---------- */

@media (min-width: 992px) {
	.stia_banner {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		gap: 26px;
		min-height: 216px;
		padding: 28px 40px;
		border-radius: 22px;
		color: #fff;
		background:
			radial-gradient(520px 260px at 0% 100%, rgba(47, 143, 216, .38), transparent 70%),
			radial-gradient(420px 220px at 78% 0%, rgba(245, 197, 66, .16), transparent 70%),
			linear-gradient(105deg, #071340 0%, var(--stia-biru-tua) 38%, var(--stia-biru) 72%, #1f5fb8 100%);
		box-shadow: var(--stia-bayang-dalam);
	}

	.stia_banner:hover,
	.stia_banner:focus {
		color: #fff;
	}

	.stia_banner:focus-visible {
		outline: 3px solid var(--stia-emas);
		outline-offset: 3px;
	}

	/* bingkai kaca tipis di tepi kartu */
	.stia_banner:before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		border-radius: inherit;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06);
		pointer-events: none;
	}

	/* seberkas cahaya yang melintas sesekali */
	.stia_banner:after {
		content: "";
		position: absolute;
		top: -20%;
		bottom: -20%;
		left: -30%;
		width: 22%;
		z-index: 1;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
		transform: skewX(-18deg) translateX(0);
		animation: stia-banner-cahaya 11s ease-in-out 1.5s infinite;
		pointer-events: none;
	}

	.stia_banner_hias {
		display: block;
		position: absolute;
		inset: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
	}

	.stia_banner_lambang {
		position: relative;
		width: 132px;
		height: 132px;
		border-radius: 50%;
		background: radial-gradient(circle at 50% 40%, #fff 0%, #f4f7fd 70%, #e3ebf8 100%);
		box-shadow:
			0 0 0 4px rgba(245, 197, 66, .85),
			0 0 0 10px rgba(255, 255, 255, .08),
			0 18px 34px -12px rgba(0, 0, 0, .55);
		animation: stia-banner-apung 7s ease-in-out infinite;
	}

	.stia_banner_lambang img {
		width: 104px;
	}

	.stia_banner_teks {
		gap: 6px;
		max-width: 640px;
		animation: stia-banner-masuk .9s var(--stia-lentur) both;
	}

	.stia_banner_label {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 10px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--stia-emas);
	}

	.stia_banner_titik {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .55);
	}

	.stia_banner_judul {
		font-size: clamp(30px, 3.2vw, 44px);
		line-height: 1.04;
		letter-spacing: -.005em;
		background: linear-gradient(180deg, #ffffff 30%, #d7e6ff 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: none;
		filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
	}

	.stia_banner_penerbit {
		display: block;
		margin-top: 2px;
		font-size: 14.5px;
		font-weight: 500;
		color: rgba(255, 255, 255, .78);
	}

	.stia_banner_prodi {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 8px;
	}

	.stia_banner_prodi span {
		padding: 4px 12px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 600;
		color: #fff;
		background: rgba(255, 255, 255, .10);
		border: 1px solid rgba(255, 255, 255, .22);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	/* gerak hiasan SVG (satuan px = satuan viewBox) */
	.stia_banner_ombak_1 {
		animation: stia-banner-ombak-1 26s linear infinite;
	}

	.stia_banner_ombak_2 {
		animation: stia-banner-ombak-2 38s linear infinite;
	}

	.stia_banner_cincin {
		transform-box: fill-box;
		transform-origin: center;
		animation: stia-banner-putar 60s linear infinite;
	}

	.stia_banner_matahari {
		transform-box: fill-box;
		transform-origin: center;
		animation: stia-banner-denyut 8s ease-in-out infinite;
	}

	.stia_banner_kilap circle {
		animation: stia-banner-kedip 4.5s ease-in-out infinite;
	}

	.stia_banner_kilap circle:nth-child(2) { animation-delay: 1.1s; }
	.stia_banner_kilap circle:nth-child(3) { animation-delay: 2.3s; }
	.stia_banner_kilap circle:nth-child(4) { animation-delay: 3.1s; }
	.stia_banner_kilap circle:nth-child(5) { animation-delay: .6s; }
}

/* layar lebar tapi belum cukup untuk teks penuh: hiasan kanan diredam */
@media (min-width: 992px) and (max-width: 1199px) {
	.stia_banner {
		min-height: 196px;
		padding: 24px 30px;
		gap: 22px;
	}

	.stia_banner_lambang {
		width: 112px;
		height: 112px;
	}

	.stia_banner_lambang img {
		width: 88px;
	}

	.stia_banner_hias {
		opacity: .75;
	}
}

@keyframes stia-banner-ombak-1 {
	from { transform: translateX(0); }
	to { transform: translateX(-1200px); }
}

@keyframes stia-banner-ombak-2 {
	from { transform: translateX(-1080px); }
	to { transform: translateX(0); }
}

@keyframes stia-banner-putar {
	to { transform: rotate(360deg); }
}

@keyframes stia-banner-denyut {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.06); opacity: .88; }
}

@keyframes stia-banner-kedip {
	0%, 100% { opacity: .15; }
	50% { opacity: .95; }
}

@keyframes stia-banner-apung {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@keyframes stia-banner-masuk {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes stia-banner-cahaya {
	0% { transform: skewX(-18deg) translateX(0); }
	55%, 100% { transform: skewX(-18deg) translateX(720%); }
}

@media (prefers-reduced-motion: reduce) {
	.stia_banner:after,
	.stia_banner_lambang,
	.stia_banner_teks,
	.stia_banner_ombak_1,
	.stia_banner_ombak_2,
	.stia_banner_cincin,
	.stia_banner_matahari,
	.stia_banner_kilap circle {
		animation: none !important;
	}

	.stia_banner:after {
		display: none;
	}
}

@media print {
	.stia_banner {
		background: none !important;
		color: #000 !important;
		box-shadow: none !important;
	}

	.stia_banner:after,
	.stia_banner_hias {
		display: none !important;
	}

	.stia_banner_judul {
		-webkit-text-fill-color: #000;
		background: none;
		filter: none;
	}
}