/* =========================================================
   MODERN UPT DETAIL
   Minimal • Modern • Elegant • Responsive
========================================================= */

:root {
	--upt-primary: #0ab7a3;
	--upt-primary-dark: #078f80;
	--upt-primary-soft: #e9faf7;

	--upt-dark: #123330;
	--upt-text: #526562;
	--upt-muted: #81918e;

	--upt-bg: #f7faf9;
	--upt-white: #ffffff;

	--upt-border: rgba(10, 183, 163, 0.12);

	--upt-shadow: 0 20px 55px rgba(18, 51, 48, 0.09);
}

/* =========================================================
   BASE
========================================================= */

.upt-detail-page {
	overflow: hidden;
	background: var(--upt-bg);
	color: var(--upt-dark);
}

.upt-detail-page *,
.upt-detail-page *::before,
.upt-detail-page *::after {
	box-sizing: border-box;
}

.word-break-all {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* =========================================================
   HERO UPT
========================================================= */

.upt-detail-hero {
	position: relative;

	min-height: 500px;

	display: flex;
	align-items: center;

	overflow: hidden;
	isolation: isolate;

	/*
     * Background image menggunakan
     * coverneww.jpg dari inline style PHP
     */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* =========================================================
   HERO OVERLAY
========================================================= */

.upt-hero-overlay {
	position: absolute;
	inset: 0;

	z-index: 1;

	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0.3) 55%,
		rgba(0, 0, 0, 0.48) 100%
	);
}

/* =========================================================
   PARALLAX DECORATION
========================================================= */

.upt-parallax-layer {
	position: absolute;

	pointer-events: none;

	will-change: transform;

	z-index: 2;
}

/* Lingkaran besar */

.upt-parallax-layer-one {
	width: 520px;
	height: 520px;

	right: -220px;
	top: -230px;

	border-radius: 50%;

	border: 1px solid rgba(255, 255, 255, 0.13);

	box-shadow:
		0 0 0 60px rgba(255, 255, 255, 0.025),
		0 0 0 120px rgba(255, 255, 255, 0.015);
}

/* Lingkaran kecil */

.upt-parallax-layer-two {
	width: 280px;
	height: 280px;

	left: -150px;
	bottom: -170px;

	border-radius: 50%;

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

/* Glow */

.upt-parallax-glow {
	position: absolute;

	width: 220px;
	height: 220px;

	right: 17%;
	bottom: 10%;

	border-radius: 50%;

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

	filter: blur(45px);

	pointer-events: none;

	z-index: 2;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.upt-hero-content {
	position: relative;

	z-index: 5;

	max-width: 950px;

	margin: auto;

	padding: 75px 20px 95px;

	text-align: center;

	color: #ffffff;
}

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

.upt-logo-wrap {
	position: relative;

	width: 100%;

	max-width: 310px;

	min-height: 145px;

	margin: 0 auto 22px;

	display: flex;

	align-items: center;
	justify-content: center;
}

/*
 * Logo PNG langsung.
 *
 * Tidak menggunakan:
 * - background putih
 * - border
 * - circle
 * - logo ring
 */

.upt-logo-modern {
	position: relative;

	z-index: 3;

	display: block;

	width: auto;
	height: auto;

	max-width: 300px;
	max-height: 145px;

	object-fit: contain;

	/*
     * Drop shadow mengikuti bentuk
     * PNG transparan.
     */
	filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.32))
		drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));

	transition:
		transform 0.45s ease,
		filter 0.45s ease;
}

/* Hover logo */

.upt-logo-wrap:hover .upt-logo-modern {
	transform: translateY(-3px) scale(1.025);

	filter: drop-shadow(0 9px 18px rgba(0, 0, 0, 0.35))
		drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}

/* =========================================================
   HERO LABEL
========================================================= */

.upt-hero-label {
	display: inline-block;

	margin-bottom: 12px;

	font-size: 0.72rem;

	font-weight: 750;

	letter-spacing: 0.22em;

	color: rgba(255, 255, 255, 0.9);

	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   NAMA UPT
========================================================= */

.upt-hero-title {
	max-width: 900px;

	margin: 0 auto;

	color: #ffffff;

	font-size: clamp(2rem, 5vw, 3.5rem);

	line-height: 1.13;

	font-weight: 750;

	letter-spacing: -0.025em;

	/*
     * Shadow dibuat cukup kuat agar
     * nama RS tetap terbaca di atas foto.
     */
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.7),
		0 6px 18px rgba(0, 0, 0, 0.45),
		0 12px 35px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   HERO LINE
========================================================= */

.upt-hero-line {
	width: 55px;
	height: 3px;

	margin: 23px auto 18px;

	border-radius: 10px;

	background: #ffffff;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   HERO DESCRIPTION
========================================================= */

.upt-hero-description {
	max-width: 650px;

	margin: auto;

	color: rgba(255, 255, 255, 0.9);

	font-size: 0.98rem;

	line-height: 1.8;

	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   HERO BOTTOM CURVE
========================================================= */

.upt-hero-bottom {
	position: absolute;

	left: -5%;
	right: -5%;

	bottom: -45px;

	height: 90px;

	background: var(--upt-bg);

	border-radius: 50% 50% 0 0;

	z-index: 6;
}

/* =========================================================
   COMMON SECTION
========================================================= */

.upt-profile-section,
.upt-contact-section,
.upt-detail-description {
	position: relative;
}

/* =========================================================
   PROFILE SECTION
========================================================= */

.upt-profile-section {
	padding: 70px 0 100px;

	background: var(--upt-bg);
}

/* Section label */

.upt-section-label {
	display: inline-block;

	margin-bottom: 10px;

	font-size: 0.7rem;

	font-weight: 800;

	letter-spacing: 0.18em;

	color: var(--upt-primary);
}

/* Section title */

.upt-section-title {
	margin: 0;

	color: var(--upt-dark);

	font-size: clamp(1.8rem, 3vw, 2.6rem);

	line-height: 1.2;

	font-weight: 750;

	letter-spacing: -0.025em;
}

.upt-section-title span {
	color: var(--upt-primary);
}

/* Section line */

.upt-title-line {
	width: 48px;
	height: 3px;

	margin: 18px 0 23px;

	border-radius: 5px;

	background: var(--upt-primary);
}

/* =========================================================
   PHOTO GEDUNG UPT
========================================================= */

.upt-photo-wrapper {
	position: relative;

	/*
     * Memberikan ruang agar dekorasi
     * di belakang frame tetap terlihat.
     */
	padding: 18px 22px 22px 18px;
}

/* =========================================================
   PHOTO DECORATION
========================================================= */

/*
 * Decorative dots di belakang frame.
 */

.upt-photo-wrapper::before {
	content: "";

	position: absolute;

	width: 145px;
	height: 145px;

	left: -10px;
	top: -10px;

	border-radius: 50%;

	background: radial-gradient(
		circle,
		rgba(10, 183, 163, 0.22) 2px,
		transparent 2.5px
	);

	background-size: 14px 14px;

	z-index: 0;
}

/*
 * Decorative circle kanan bawah.
 */

.upt-photo-wrapper::after {
	content: "";

	position: absolute;

	width: 105px;
	height: 105px;

	right: -15px;
	bottom: -15px;

	border-radius: 50%;

	background: rgba(10, 183, 163, 0.07);

	z-index: 0;
}

/* =========================================================
   PHOTO FRAME
========================================================= */

.upt-photo-card {
	position: relative;

	z-index: 2;

	overflow: hidden;

	/*
     * Frame putih tebal
     * seperti referensi gambar.
     */
	padding: 10px;

	border-radius: 28px;

	background: #ffffff;

	box-shadow:
		0 18px 40px rgba(18, 51, 48, 0.13),
		0 5px 15px rgba(18, 51, 48, 0.07);

	/*
     * Sedikit miring agar terasa
     * seperti desain editorial.
     */
	transform: rotate(-1.2deg);

	transition:
		transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.45s ease;
}

/* Hover frame */

.upt-photo-card:hover {
	transform: rotate(0deg) translateY(-6px);

	box-shadow:
		0 28px 55px rgba(18, 51, 48, 0.16),
		0 8px 20px rgba(18, 51, 48, 0.08);
}

/* =========================================================
   FOTO GEDUNG
========================================================= */

.upt-main-image {
	display: block;

	width: 100%;

	height: 430px;

	object-fit: cover;

	/*
     * Radius bagian dalam frame.
     */
	border-radius: 20px;

	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover image */

.upt-photo-card:hover .upt-main-image {
	transform: scale(1.035);
}

/* =========================================================
   PHOTO CAPTION
========================================================= */

.upt-photo-caption {
	position: absolute;

	left: 25px;
	bottom: 24px;

	display: flex;

	align-items: center;

	gap: 9px;

	padding: 10px 16px;

	border-radius: 50px;

	color: var(--upt-dark);

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

	backdrop-filter: blur(10px);

	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14);

	font-size: 0.78rem;

	font-weight: 700;
}

.upt-photo-caption i {
	color: var(--upt-primary);
}

/* =========================================================
   PROFILE TEXT
========================================================= */

.upt-profile-content {
	padding-left: 15px;
}

.upt-description {
	color: var(--upt-text);

	font-size: 0.96rem;

	line-height: 1.9;
}

/* =========================================================
   CONTACT SECTION
========================================================= */

.upt-contact-section {
	padding: 95px 0;

	background: #ffffff;
}

/* Heading */

.upt-section-heading {
	max-width: 650px;

	margin: 0 auto 50px;

	text-align: center;
}

.upt-section-heading .upt-title-line {
	margin: 18px auto;
}

.upt-section-heading p {
	margin: 0;

	color: var(--upt-muted);

	line-height: 1.7;
}

/* =========================================================
   INFORMATION CARDS
========================================================= */

.upt-info-card {
	position: relative;

	height: 100%;

	min-height: 285px;

	padding: 32px 27px;

	overflow: hidden;

	border: 1px solid var(--upt-border);

	border-radius: 20px;

	background: #ffffff;

	box-shadow: 0 10px 35px rgba(18, 51, 48, 0.045);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

/* Card decoration */

.upt-info-card::after {
	content: "";

	position: absolute;

	width: 110px;
	height: 110px;

	right: -50px;
	bottom: -50px;

	border-radius: 50%;

	background: var(--upt-primary-soft);

	transition: transform 0.4s ease;
}

/* Hover */

.upt-info-card:hover {
	transform: translateY(-8px);

	border-color: rgba(10, 183, 163, 0.22);

	box-shadow: 0 22px 50px rgba(18, 51, 48, 0.1);
}

.upt-info-card:hover::after {
	transform: scale(1.35);
}

/* =========================================================
   INFORMATION ICON
========================================================= */

.upt-info-icon {
	position: relative;

	z-index: 2;

	width: 55px;
	height: 55px;

	margin-bottom: 25px;

	display: flex;

	justify-content: center;
	align-items: center;

	border-radius: 16px;

	background: var(--upt-primary-soft);

	color: var(--upt-primary);

	font-size: 1.35rem;
}

/* =========================================================
   CARD NUMBER
========================================================= */

.upt-info-number {
	position: absolute;

	right: 22px;
	top: 25px;

	color: rgba(10, 183, 163, 0.08);

	font-size: 3rem;

	line-height: 1;

	font-weight: 800;
}

/* =========================================================
   CARD TITLE
========================================================= */

.upt-info-card h3 {
	position: relative;

	z-index: 2;

	margin-bottom: 12px;

	color: var(--upt-dark);

	font-size: 1.05rem;

	font-weight: 750;
}

/* Divider */

.upt-info-divider {
	width: 28px;
	height: 2px;

	margin-bottom: 15px;

	border-radius: 4px;

	background: var(--upt-primary);
}

/* Card text */

.upt-info-card p {
	position: relative;

	z-index: 2;

	margin-bottom: 8px;

	color: var(--upt-text);

	font-size: 0.82rem;

	line-height: 1.7;
}

.upt-info-card strong {
	color: var(--upt-dark);

	font-size: 0.72rem;
}

/* =========================================================
   WEBSITE LINK
========================================================= */

.upt-info-link {
	display: block;

	height: 100%;

	color: inherit;

	text-decoration: none;
}

.upt-open-link {
	position: relative;

	z-index: 5;

	display: inline-flex;

	align-items: center;

	gap: 7px;

	margin-top: 10px;

	color: var(--upt-primary);

	font-size: 0.72rem;

	font-weight: 750;
}

.upt-open-link i {
	transition: transform 0.25s ease;
}

.upt-info-card:hover .upt-open-link i {
	transform: translateX(4px);
}

/* =========================================================
   LONG DESCRIPTION
========================================================= */

.upt-detail-description {
	padding: 105px 0;

	overflow: hidden;

	background: linear-gradient(135deg, #f4faf8 0%, #ffffff 50%, #f1faf8 100%);
}

.upt-description-inner {
	position: relative;

	z-index: 2;
}

/* Sticky heading desktop */

.upt-description-heading {
	position: sticky;

	top: 100px;
}

.upt-description-heading p {
	max-width: 340px;

	margin: 0;

	color: var(--upt-muted);

	line-height: 1.8;
}

/* =========================================================
   LONG DESCRIPTION CARD
========================================================= */

.upt-long-description {
	padding: 38px;

	border: 1px solid rgba(10, 183, 163, 0.1);

	border-radius: 22px;

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

	box-shadow: 0 20px 50px rgba(18, 51, 48, 0.06);

	backdrop-filter: blur(12px);

	color: var(--upt-text);

	font-size: 0.95rem;

	line-height: 1.95;
}

/* =========================================================
   DESCRIPTION ORBS
========================================================= */

.upt-description-orb {
	position: absolute;

	border-radius: 50%;

	pointer-events: none;
}

.upt-orb-one {
	width: 280px;
	height: 280px;

	right: -120px;
	top: 50px;

	background: rgba(10, 183, 163, 0.045);
}

.upt-orb-two {
	width: 180px;
	height: 180px;

	left: -90px;
	bottom: 60px;

	background: rgba(10, 183, 163, 0.035);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.upt-empty-state {
	display: flex;

	align-items: center;

	gap: 15px;

	padding: 20px;

	border-radius: 14px;

	background: var(--upt-primary-soft);

	color: var(--upt-text);
}

.upt-empty-state i {
	color: var(--upt-primary);

	font-size: 1.5rem;
}

.upt-empty-state p {
	margin: 0;
}

/* =========================================================
   NOT FOUND
========================================================= */

.upt-not-found {
	min-height: 65vh;

	display: flex;

	align-items: center;

	padding: 80px 0;
}

.upt-empty-page {
	max-width: 600px;

	margin: auto;

	padding: 55px 30px;

	text-align: center;

	border-radius: 24px;

	background: #ffffff;

	box-shadow: var(--upt-shadow);
}

.upt-empty-icon {
	width: 75px;
	height: 75px;

	margin: 0 auto 25px;

	display: flex;

	justify-content: center;
	align-items: center;

	border-radius: 22px;

	background: var(--upt-primary-soft);

	color: var(--upt-primary);

	font-size: 1.8rem;
}

.upt-empty-page h2 {
	margin-bottom: 12px;

	color: var(--upt-dark);

	font-size: 1.6rem;
}

.upt-empty-page p {
	margin-bottom: 25px;

	color: var(--upt-muted);
}

/* =========================================================
   BACK BUTTON
========================================================= */

.upt-back-button {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding: 12px 20px;

	border-radius: 50px;

	color: #ffffff;

	background: var(--upt-primary);

	text-decoration: none;

	font-size: 0.82rem;

	font-weight: 700;

	transition: 0.3s ease;
}

.upt-back-button:hover {
	color: #ffffff;

	background: var(--upt-primary-dark);

	transform: translateY(-2px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
	/* Hero */

	.upt-detail-hero {
		min-height: 460px;
	}

	.upt-hero-content {
		padding: 65px 20px 85px;
	}

	/* Logo */

	.upt-logo-wrap {
		max-width: 280px;

		min-height: 130px;
	}

	.upt-logo-modern {
		max-width: 270px;

		max-height: 130px;
	}

	/* Profile */

	.upt-profile-content {
		padding-left: 0;
	}

	/* Photo */

	.upt-photo-wrapper {
		max-width: 720px;

		margin: 0 auto;
	}

	.upt-main-image {
		height: 390px;
	}

	/* Description */

	.upt-description-heading {
		position: static;
	}

	.upt-description-heading p {
		max-width: 600px;
	}
}

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

@media (max-width: 767.98px) {
	/* Hero */

	.upt-detail-hero {
		min-height: 430px;
	}

	.upt-hero-content {
		padding: 55px 15px 75px;
	}

	/* Logo */

	.upt-logo-wrap {
		max-width: 250px;

		min-height: 115px;

		margin-bottom: 18px;
	}

	.upt-logo-modern {
		max-width: 240px;

		max-height: 115px;
	}

	.upt-hero-label {
		font-size: 0.6rem;

		letter-spacing: 0.16em;
	}

	.upt-hero-title {
		font-size: clamp(1.7rem, 8vw, 2.3rem);
	}

	.upt-hero-description {
		font-size: 0.84rem;

		line-height: 1.7;
	}

	/* Sections */

	.upt-profile-section,
	.upt-contact-section,
	.upt-detail-description {
		padding: 65px 0;
	}

	/* Photo */

	.upt-photo-wrapper {
		padding: 12px 15px 18px 10px;
	}

	.upt-photo-card {
		padding: 8px;

		border-radius: 23px;

		transform: rotate(-0.7deg);
	}

	.upt-main-image {
		height: 280px;

		border-radius: 17px;
	}

	.upt-photo-caption {
		left: 18px;

		bottom: 18px;

		padding: 8px 13px;

		font-size: 0.7rem;
	}

	/* Profile content */

	.upt-profile-content {
		margin-top: 15px;
	}

	/* Info card */

	.upt-info-card {
		min-height: 255px;
	}

	/* Long description */

	.upt-long-description {
		padding: 25px 21px;

		border-radius: 18px;

		font-size: 0.88rem;
	}

	.upt-description-heading {
		margin-bottom: 5px;
	}
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
	/* Hero */

	.upt-detail-hero {
		min-height: 410px;
	}

	/* Logo */

	.upt-logo-wrap {
		max-width: 220px;

		min-height: 100px;
	}

	.upt-logo-modern {
		max-width: 215px;

		max-height: 100px;
	}

	/* Title */

	.upt-hero-title {
		font-size: 1.65rem;
	}

	/* Section title */

	.upt-section-title {
		font-size: 1.75rem;
	}

	/* Photo */

	.upt-photo-wrapper {
		padding: 8px 10px 15px 7px;
	}

	.upt-photo-card {
		padding: 7px;

		border-radius: 20px;
	}

	.upt-main-image {
		height: 240px;

		border-radius: 15px;
	}

	.upt-photo-caption {
		left: 14px;

		bottom: 14px;
	}

	/* Long description */

	.upt-long-description {
		padding: 22px 18px;
	}
}

/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.upt-logo-modern,
	.upt-main-image,
	.upt-photo-card,
	.upt-info-card,
	.upt-open-link i {
		animation: none !important;

		transition: none !important;
	}

	.upt-parallax-layer {
		transform: none !important;
	}
}