:root {
	--bg-soft: #f4f7f9;
	--bg-paper: #ffffff;
	--text-main: #133247;
	--text-muted: #5f7280;
	--brand: #0c7086;
	--brand-deep: #084f60;
	--accent: #f2a94e;
	--line: #d6e1e7;
	--glow: 0 12px 30px rgba(12, 112, 134, 0.12);
}

/* Folder-style grouping for tabelJemaat */
tr.family-group-header td {
	background-color: #e8f4f8 !important;
	border-top: 2px solid var(--brand) !important;
	font-weight: 600;
	color: var(--brand-deep);
}
tr.family-member td {
	background-color: #ffffff;
}
tr.family-member td:first-child,
tr.family-member td:nth-child(2) {
	background-color: #f8fbfc;
}

.is-public-hidden,
.public-register-table .is-public-hidden {
	display: none !important;
}

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: var(--text-main);
	background: var(--bg-soft);
	opacity: 0;
	animation: pageReveal 0.45s ease forwards;
}

.bku-table-scroll {
	max-height: 60vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.bku-table-scroll .dataTables_wrapper {
	min-width: 980px;
}

.bku-table {
	font-size: 0.72rem;
	white-space: nowrap;
}

.bku-table th,
.bku-table td {
	padding: 0.35rem 0.4rem;
}

.bku-table .btn {
	padding: 0.2rem 0.35rem;
	font-size: 0.68rem;
}

.family-edit-dialog {
	position: absolute;
	inset: 1rem;
	width: auto;
	max-width: none;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	transform: none !important;
}

#editFamilyModal {
	height: 100vh !important;
	max-height: 100vh !important;
	overflow: hidden !important;
}

.family-edit-dialog .modal-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
	position: relative;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 22px 60px rgba(19, 50, 71, 0.2);
	overflow: hidden;
}

.family-edit-dialog form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 0;
	min-height: 0;
}

.family-edit-dialog .modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 6rem;
}

.family-edit-dialog .modal-footer {
	flex-shrink: 0;
}

.family-edit-header {
	background: linear-gradient(120deg, var(--brand-deep), var(--brand));
	color: #fff;
	padding: 1.25rem 1.5rem;
}

.family-edit-header .btn-close {
	filter: invert(1) grayscale(1) brightness(2);
}

.family-edit-subtitle {
	color: rgba(255, 255, 255, 0.78);
}

.family-edit-body {
	background: #f8fbfc;
	padding: 1.5rem;
}

.family-edit-section {
	background: var(--bg-paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 1.25rem;
}

.family-edit-section + .family-edit-section {
	margin-top: 1rem;
}

.family-edit-section-heading {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.family-edit-step {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #e6f4f6;
	color: var(--brand-deep);
	font-weight: 700;
	flex: 0 0 auto;
}

.family-edit-section-heading h6 {
	margin: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
}

.family-edit-section-heading p {
	margin: 0.2rem 0 0;
	color: var(--text-muted);
	font-size: 0.8rem;
}

.edit-family-krt-table {
	margin-bottom: 0;
	border-color: var(--line);
}

.edit-family-krt-table thead th {
	background: #edf6f7;
	color: var(--brand-deep);
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

.edit-family-krt-table tbody th {
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
}

.edit-family-krt-table td {
	width: 8rem;
}

.edit-family-krt-table .period-before-entry {
	background: #f3f5f6;
}

.edit-family-krt-table .period-before-entry::after {
	content: '';
	display: block;
	height: 1.15rem;
}

.edit-family-krt-table .form-check-input:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.edit-family-krt-table .form-check-input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	border-color: #8aa7b0;
	cursor: pointer;
}

.edit-family-krt-table .form-check-input:checked {
	background-color: var(--brand);
	border-color: var(--brand);
}

.family-edit-footer {
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 1rem 1.5rem;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1rem;
	z-index: 2;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 -6px 18px rgba(19, 50, 71, 0.12);
}

.modal#editMemberModal {
	position: fixed;
	inset: 0;
	overflow: hidden;
}

.member-edit-dialog {
	position: absolute;
	top: 0.5rem;
	left: 50%;
	height: calc(100vh - 1rem) !important;
	max-height: calc(100vh - 1rem) !important;
	min-height: 0 !important;
	width: calc(100% - 1rem);
	max-width: 800px;
	margin: 0 !important;
	transform: translateX(-50%) !important;
	overflow: hidden;
}

.member-edit-dialog .modal-content {
	display: flex;
	flex-direction: column;
	height: 100% !important;
	max-height: 100% !important;
	min-height: 0 !important;
}

.member-edit-dialog .modal-header,
.member-edit-dialog .modal-footer {
	flex: 0 0 auto;
}

.member-edit-dialog form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 0;
	min-height: 0;
	overflow: hidden;
}

.member-edit-body {
	flex: 1 1 auto;
	height: 0;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 1rem;
}

@media (max-width: 575.98px) {
	.member-edit-dialog {
		top: 0.25rem;
		height: calc(100vh - 0.5rem) !important;
		max-height: calc(100vh - 0.5rem) !important;
		width: calc(100% - 0.5rem);
	}

	.member-edit-dialog .modal-header,
	.member-edit-dialog .modal-footer {
		padding: 0.75rem 1rem;
	}

	.member-edit-dialog .modal-body {
		padding: 1rem;
	}
}

.member-edit-footer {
	flex-shrink: 0;
	background: #fff;
	border-top: 1px solid var(--line);
}

@media (max-width: 575.98px) {
	.family-edit-body,
	.family-edit-header,
	.family-edit-footer {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.family-edit-section {
		padding: 1rem;
	}

	.edit-family-krt-table {
		font-size: 0.78rem;
	}

	.edit-family-krt-table td {
		width: 3.5rem;
	}
}

.budget-amount,
.budget-amount-value {
	background-color: #fff200 !important;
	color: #111 !important;
}

@keyframes pageReveal {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'Fraunces', serif;
	letter-spacing: 0.2px;
}

.site-navbar {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid rgba(12, 112, 134, 0.08);
	box-shadow: 0 10px 24px rgba(68, 93, 109, 0.06);
}

.site-navbar > .container {
	max-width: 1480px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	gap: 0.9rem;
}

.site-brand {
	font-weight: 700;
	color: var(--brand-deep) !important;
	flex-shrink: 0;
}

.brand-title {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 1.08rem;
	line-height: 1.2;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: normal;
	max-width: 760px;
}

.brand-logo {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 50%;
	background: transparent;
	padding: 0;
	flex-shrink: 0;
}

.kop-jemaat-header {
	display: block;
	width: min(520px, 34vw);
	height: auto;
	max-height: 110px;
	object-fit: contain;
}

.site-navlink {
	color: var(--text-main);
	font-size: 1.02rem;
	letter-spacing: 0.01em;
	padding: 0.82rem 1.12rem;
	border-radius: 999px;
	transition: all 0.2s ease-in-out;
	font-weight: 700;
}

.site-navlink:hover,
.site-navlink:focus,
.site-navlink.active {
	color: #fff;
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	box-shadow: 0 10px 18px rgba(12, 112, 134, 0.18);
}

.site-navbar .navbar-nav {
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.28rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0.3rem 0.5rem;
	border-radius: 999px;
	background: rgba(12, 112, 134, 0.04);
	border: 1px solid rgba(12, 112, 134, 0.08);
}

.site-navbar .nav-item {
	white-space: nowrap;
}

.site-navbar .dropdown-menu {
	font-size: 0.82rem;
	box-shadow: 0 18px 42px rgba(12, 112, 134, 0.12);
	border: 1px solid rgba(12, 112, 134, 0.08);
	border-radius: 16px;
	padding: 0.5rem;
}

.site-navbar .dropdown-menu-wide {
	min-width: 240px;
}

.site-navbar .dropdown-menu-narrow {
	min-width: 190px;
}

.site-navbar .dropdown-item {
	padding: 0.55rem 0.8rem;
	white-space: nowrap;
	border-radius: 10px;
	transition: all 0.15s ease;
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
	background: rgba(12, 112, 134, 0.08);
	color: var(--brand-deep);
}

@media (max-width: 1200px) {
	.site-navbar .navbar-nav {
		flex-wrap: wrap;
		gap: 0.08rem;
	}

	.site-navbar .nav-link {
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}

	.site-navlink {
		font-size: 0.95rem;
	}

	.kop-jemaat-header {
		width: min(340px, 28vw);
	}
}

@media (min-width: 992px) and (max-width: 1366px) {
	.site-navbar {
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	.site-navlink {
		font-size: 0.98rem;
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}

	.kop-jemaat-header {
		width: min(420px, 28vw);
		max-height: 96px;
	}
}

@media (max-width: 991px) {
	.site-navbar .navbar-nav {
		justify-content: flex-start;
		padding: 0.55rem 0.7rem;
		margin-top: 0.5rem;
		width: 100%;
	}

	.site-navlink {
		font-size: 0.96rem;
		padding: 0.7rem 0.85rem;
	}

	.kop-jemaat-header {
		width: min(260px, 52vw);
	}
}

.greeting-ticker {
	position: relative;
	overflow: hidden;
	background: var(--brand-deep);
	color: #fff;
	border-bottom: 1px solid rgba(242, 169, 78, 0.5);
}

.ticker-viewport {
	overflow: hidden;
	padding: 0.65rem 1rem;
}

.ticker-track {
	display: inline-flex;
	min-width: max-content;
	gap: 5rem;
	animation: tickerScroll 32s linear infinite;
}

.ticker-track span {
	font-size: 0.86rem;
	font-weight: 500;
	white-space: nowrap;
}

.ticker-track i {
	color: var(--accent);
}

@keyframes tickerScroll {
	from {
		transform: translateX(100%);
	}

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

.btn-brand {
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	color: #fff;
	border: none;
	box-shadow: var(--glow);
}

.btn-brand:hover,
.btn-brand:focus {
	color: #fff;
	transform: translateY(-1px);
}

.hero-section {
	position: relative;
	overflow: hidden;
	min-height: 78vh;
	display: flex;
	align-items: center;
	color: #fff;
	background: linear-gradient(110deg, rgba(8, 79, 96, 0.72), rgba(12, 112, 134, 0.45));
}

.hero-section::before,
.hero-section::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: rgba(242, 169, 78, 0.10);
	filter: blur(8px);
}

.hero-section::before {
	width: 220px;
	height: 220px;
	top: -60px;
	right: 8%;
}

.hero-section::after {
	width: 280px;
	height: 280px;
	bottom: -120px;
	left: 12%;
}

.hero-content {
	position: relative;
	z-index: 2;
}

.hero-image-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.75rem;
}

.hero-image {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	border-radius: 22px;
	object-fit: cover;
	box-shadow: 0 20px 40px rgba(4, 20, 27, 0.22);
	border: 3px solid rgba(255, 255, 255, 0.25);
}

.hero-kicker {
	display: inline-block;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.hero-actions .btn {
	min-width: 180px;
}

.section-pad {
	padding: 4.5rem 0;
}

.feature-card,
.schedule-card,
.glass-card {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 12px 26px rgba(15, 35, 45, 0.06);
}

.feature-card {
	padding: 1.6rem;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 34px rgba(12, 112, 134, 0.14);
}

.feature-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	margin-bottom: 1rem;
}

/* --- Stat summary cards --- */
.stat-summary-card {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 8px 22px rgba(15, 35, 45, 0.06);
	padding: 1.3rem 1rem;
	text-align: center;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-summary-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(12, 112, 134, 0.12);
}

.stat-summary-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
}

.stat-summary-value {
	font-family: 'Fraunces', serif;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--brand-deep);
	line-height: 1.1;
	margin-bottom: 0.3rem;
}

.stat-summary-value-money {
	font-size: clamp(0.9rem, 3.2vw, 1.3rem);
	overflow-wrap: anywhere;
}

.stat-summary-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 575.98px) {
	.stat-summary-value-money {
		font-size: clamp(0.76rem, 3.8vw, 1rem) !important;
		line-height: 1.15;
	}
}

/* --- Chart cards --- */
.chart-card {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 8px 22px rgba(15, 35, 45, 0.06);
	padding: 1.4rem;
	height: 100%;
}

.chart-card-header {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--brand-deep);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 1.1rem;
}

.chart-wrap-donut {
	max-width: 320px;
	margin: 0 auto;
}

.chart-wrap-bar {
	position: relative;
	height: 260px;
}

.section-title {
	color: var(--brand-deep);
}

.section-subtitle {
	color: var(--text-muted);
}

.schedule-card {
	padding: 1.3rem;
	height: 100%;
}

.schedule-time {
	color: var(--brand);
	font-weight: 700;
}

.ibadah-table {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ibadah-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	background: #f8fbfc;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.ibadah-day {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--brand);
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	white-space: nowrap;
	min-width: 52px;
	text-align: center;
}

.ibadah-name {
	flex: 1;
	font-weight: 600;
	color: var(--text-main);
	font-size: 0.9rem;
}

.ibadah-time {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--brand);
	white-space: nowrap;
}

.ibadah-special-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.ibadah-special-list li {
	font-size: 0.9rem;
	color: var(--text-main);
	line-height: 1.5;
}

.text-brand { color: var(--brand) !important; }

.btn-outline-brand {
	border: 1.5px solid var(--brand);
	color: var(--brand);
	background: transparent;
	font-weight: 600;
	transition: all 0.2s;
}

.btn-outline-brand:hover {
	background: var(--brand);
	color: #fff;
}

.annual-schedule {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.weekly-schedule {
	display: grid;
	grid-template-columns: 0.85fr 1.4fr;
	gap: 1.5rem;
	align-items: start;
}

.weekly-day-picker {
	display: block;
	gap: 0.55rem;
	grid-column: 1 / -1;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 1.25rem;
	box-shadow: 0 12px 28px rgba(15, 35, 45, 0.06);
}

.weekly-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
	color: var(--text-main);
}

.weekly-week-nav {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #f8fbfc;
	color: var(--brand-deep);
	font-size: 1.25rem;
	line-height: 1;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
}

.weekly-week-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.55rem;
}

.weekly-schedule {
	grid-template-columns: 1fr;
}

.weekly-day-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #f8fbfc;
	color: var(--text-main);
	padding: 0.75rem 0.9rem;
	text-align: center;
	font-weight: 700;
	min-height: 92px;
	flex-direction: column;
	gap: 0.35rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.weekly-day-button:hover,
.weekly-day-button.is-selected {
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 18px rgba(12, 112, 134, 0.2);
}

.weekly-day-button small {
	display: block;
	font-weight: 500;
	opacity: 0.72;
	font-size: 0.72rem;
}

.weekly-day-button .weekly-day-count {
	min-width: 1.5rem;
	text-align: center;
	font-size: 0.75rem;
	border-radius: 999px;
	background: rgba(242, 169, 78, 0.2);
	padding: 0.2rem 0.35rem;
}

.weekly-day-button.is-selected .weekly-day-count {
	background: rgba(255, 255, 255, 0.2);
}

.calendar-panel,
.event-panel {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 12px 28px rgba(15, 35, 45, 0.06);
}

.calendar-panel {
	padding: 1.25rem;
}

.calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.calendar-year {
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--brand-deep);
}

.year-nav {
	border: 1px solid var(--line);
	background: #f8fbfc;
	color: var(--brand-deep);
	width: 38px;
	height: 38px;
	border-radius: 10px;
	font-size: 1.4rem;
	line-height: 1;
}

.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.5rem;
}

.month-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.5rem;
	margin-bottom: 0.4rem;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	text-align: center;
}

.calendar-months {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.month-card {
	background: #f9fbfc;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 0.8rem;
}

.month-name {
	font-weight: 800;
	font-size: 0.9rem;
	color: var(--brand-deep);
	margin-bottom: 0.75rem;
	text-align: center;
}

.calendar-day,
.calendar-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 10px;
	font-size: 0.78rem;
	font-weight: 600;
}

.calendar-empty {
	background: transparent;
}

.calendar-day {
	border: 1px solid transparent;
	background: #fff;
	color: var(--text-main);
	cursor: pointer;
	transition: all 0.2s ease;
}

.calendar-day:hover {
	border-color: rgba(12, 112, 134, 0.25);
	transform: translateY(-1px);
}

.calendar-day.is-event {
	background: rgba(12, 112, 134, 0.1);
	border-color: rgba(12, 112, 134, 0.25);
	color: var(--brand-deep);
	position: relative;
}

.calendar-day.is-event::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.calendar-day.is-today {
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 800;
}

.calendar-day.selected {
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 18px rgba(12, 112, 134, 0.2);
}

.calendar-day.selected.is-today {
	border-color: transparent;
}

.event-panel {
	padding: 1.3rem;
}

.event-panel-header {
	margin-bottom: 1rem;
}

.event-tag {
	display: inline-block;
	background: rgba(242, 169, 78, 0.12);
	color: #8b5d13;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.8rem;
}

.event-panel-header h3 {
	margin: 0;
	font-size: 1.45rem;
	color: var(--brand-deep);
}

.selected-events {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.event-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.8rem 0.9rem;
	background: #f8fbfc;
	border: 1px solid var(--line);
	border-radius: 14px;
}

.event-bullet {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	color: #fff;
	font-size: 0.75rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

/* Category accent colours */
.cat-ibadah   { border-left: 3px solid #0c7086; }
.cat-doa      { border-left: 3px solid #7c5cbf; }
.cat-sakramen { border-left: 3px solid #1a9a6c; }
.cat-pelatihan{ border-left: 3px solid #d68a1a; }
.cat-retret   { border-left: 3px solid #2e8b57; }
.cat-sosial   { border-left: 3px solid #e05c5c; }
.cat-pastoral { border-left: 3px solid #2980b9; }
.cat-rapat    { border-left: 3px solid #888; }

.cat-ibadah   .event-bullet { background: linear-gradient(135deg, #0c7086, #0a5a70); }
.cat-doa      .event-bullet { background: linear-gradient(135deg, #7c5cbf, #5c3a9e); }
.cat-sakramen .event-bullet { background: linear-gradient(135deg, #1a9a6c, #12714f); }
.cat-pelatihan .event-bullet{ background: linear-gradient(135deg, #d68a1a, #b57316); }
.cat-retret   .event-bullet { background: linear-gradient(135deg, #2e8b57, #1d6b40); }
.cat-sosial   .event-bullet { background: linear-gradient(135deg, #e05c5c, #c23b3b); }
.cat-pastoral .event-bullet { background: linear-gradient(135deg, #2980b9, #1a5f8a); }
.cat-rapat    .event-bullet { background: linear-gradient(135deg, #888, #666); }

.event-title {
	font-weight: 800;
	color: var(--text-main);
	margin-bottom: 0.2rem;
}

.event-meta {
	font-size: 0.8rem;
	color: var(--text-muted);
	line-height: 1.5;
}

.empty-state {
	padding: 1.25rem;
	border: 1px dashed var(--line);
	border-radius: 14px;
	background: #fbfcfd;
	color: var(--text-muted);
	text-align: center;
}

/* Upcoming events divider inside event panel */
.upcoming-divider {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.upcoming-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}

.upcoming-events-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 260px;
	overflow-y: auto;
}

.upcoming-event-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
	background: #f8fbfc;
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
	width: 100%;
}

.upcoming-event-item:hover {
	border-color: rgba(12, 112, 134, 0.3);
	background: rgba(12, 112, 134, 0.04);
	transform: translateX(2px);
}

.upcoming-event-date {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--brand);
	white-space: nowrap;
	min-width: 48px;
}

.upcoming-event-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(12, 112, 134, 0.1);
	color: var(--brand);
	font-size: 0.65rem;
	flex-shrink: 0;
}

.upcoming-event-title {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-main);
	line-height: 1.3;
}

.upcoming-events-list::-webkit-scrollbar { width: 4px; }
.upcoming-events-list::-webkit-scrollbar-track { background: transparent; }
.upcoming-events-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.stat-summary-value-money {
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

@media (max-width: 575px) {
	.stat-summary-card {
		padding: 0.85rem 0.65rem;
	}

	.stat-summary-value-money {
		font-size: clamp(0.76rem, 3.8vw, 1rem) !important;
	}

	.stat-summary-label {
		font-size: 0.7rem;
		line-height: 1.25;
	}
}

@media (max-width: 991px) {
	.weekly-schedule {
		grid-template-columns: 1fr;
	}

	.annual-schedule {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.weekly-day-picker {
		padding: 0.85rem;
	}

	.weekly-week-days {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.calendar-months {
		grid-template-columns: 1fr;
	}
}

.sermon-card,
.bulletin-card {
	background: var(--bg-paper);
	border: 1px solid var(--line);
	border-left: 5px solid var(--accent);
	border-radius: 16px;
	box-shadow: 0 12px 26px rgba(15, 35, 45, 0.06);
}

.sermon-card {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 2rem;
}

#jadwal-kegiatan .calendar-panel {
	width: 100%;
}

#khotbahMingguIni,
#jadwal-ibadah,
#jadwal-kegiatan {
	position: relative;
}

#khotbahMingguIni::before,
#jadwal-ibadah::before,
#jadwal-kegiatan::before {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	border-radius: 999px;
	background: var(--accent);
	margin: 0 auto 1.5rem;
}

#jadwal-ibadah {
	background: linear-gradient(180deg, rgba(238, 247, 248, 0.7), rgba(255, 255, 255, 0));
}

#jadwal-kegiatan {
	background: linear-gradient(180deg, rgba(255, 248, 237, 0.55), rgba(255, 255, 255, 0));
}

#jadwal-ibadah .section-subtitle,
#jadwal-kegiatan .section-subtitle {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
}

.sermon-card h3,
.bulletin-card h3 {
	color: var(--brand-deep);
}

.sermon-meta {
	color: var(--brand);
	font-size: 0.86rem;
	font-weight: 700;
	margin-bottom: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sermon-verse {
	color: var(--text-main);
	font-family: 'Fraunces', serif;
	font-size: 1.15rem;
	font-style: italic;
	margin-bottom: 1rem;
}

.bulletin-card {
	padding: 1.5rem;
}

.buletin-embed-wrap {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #f1f3f5;
}

.buletin-embed {
	display: block;
	width: 100%;
	height: 300px;
	border: none;
}

@media (max-width: 991px) {
	.buletin-embed {
		height: 360px;
	}
}

.dok-section-label {
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-deep);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--line);
}

.gallery-thumb {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4/3;
	cursor: zoom-in;
	background: #e9eef0;
}

.gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.gallery-thumb:hover .gallery-img {
	transform: scale(1.06);
}

.gallery-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10,40,55,0.75) 0%, transparent 55%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0.75rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gallery-thumb:hover .gallery-overlay {
	opacity: 1;
}

.gallery-title {
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
}

.gallery-date {
	color: rgba(255,255,255,0.75);
	font-size: 0.72rem;
	margin-top: 0.15rem;
}

.media-card {
	background: var(--bg-paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 26px rgba(15, 35, 45, 0.06);
}

.media-photo,
.video-frame {
	display: block;
	width: 100%;
	height: 260px;
}

.media-photo {
	object-fit: cover;
}

.video-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.media-card-body {
	padding: 1.3rem;
}

.register-entry-table-card .card-header small {
	display: block;
	opacity: 0.8;
}

.register-entry-table-wrap {
	max-height: 26rem;
	overflow: auto;
}

.register-entry-table {
	font-size: 0.78rem;
	white-space: nowrap;
}

.register-entry-table th,
.register-entry-table td {
	padding: 0.42rem 0.55rem;
	vertical-align: middle;
}

@media (max-width: 575.98px) {
	.register-entry-table-card .card-header {
		align-items: flex-start !important;
		flex-direction: column;
	}

	.register-entry-table {
		font-size: 0.72rem;
	}
}

.app-navbar {
	background: linear-gradient(110deg, var(--brand-deep), #0a5f73);
	border-bottom: 4px solid #0d0d0d;
	padding: 0.2rem 1rem;
}

.app-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .btn {
	color: #f2f7f9 !important;
}

.app-navbar .navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 800;
	margin-right: 1rem;
	white-space: nowrap;
}

.app-main-menu {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	margin-left: auto;
}

.app-navbar .nav-item {
	margin-left: 0.1rem;
}

.app-navbar .nav-link {
	font-weight: 700;
	padding: 0.65rem 0.7rem;
	font-size: 0.8rem;
	line-height: 1.1;
	text-transform: none;
	white-space: nowrap;
}

.app-navbar .nav-link.active,
.app-navbar .nav-link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 6px;
}

.app-logout-btn {
	background: #d71f1f;
	border: none;
	padding: 0.5rem 1rem;
	font-weight: 700;
	border-radius: 8px;
	font-size: 0.9rem;
	box-shadow: 0 8px 18px rgba(201, 24, 24, 0.25);
	white-space: nowrap;
}

.app-logout-btn:hover {
	background: #b91717;
	color: #fff !important;
}

.app-shell {
	padding: 2rem 0 3rem;
}

.app-shell .card {
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 10px 22px rgba(15, 35, 45, 0.05);
}

.app-header-card {
	padding: 1.4rem 1.6rem;
	margin-bottom: 1.4rem;
}

.app-header-card p {
	color: var(--text-muted);
	margin-bottom: 0;
}

.subpage-tabs {
	border-bottom: 1px solid var(--line);
	gap: 0.35rem;
}

.subpage-tabs .nav-item {
	margin-bottom: -1px;
}

.subpage-tabs .nav-link {
	color: var(--text-main);
	font-weight: 700;
	border: 1px solid var(--line);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	padding: 0.7rem 1rem;
	background: #f4f9fb;
	transition: all 0.2s ease;
}

.subpage-tabs .nav-link:hover {
	background: #edf5f8;
}

.subpage-tabs .nav-link.active {
	background: var(--brand-deep);
	color: #fff;
	border-color: var(--brand-deep);
	box-shadow: 0 -4px 12px rgba(8, 79, 96, 0.12);
}

.card-stat {
	border: none;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease;
}

.card-stat:hover {
	transform: translateY(-4px);
}

.icon-box {
	font-size: 2.2rem;
	opacity: 0.85;
}

.quick-link {
	text-decoration: none;
	color: inherit;
}

.quick-link .feature-card h6 {
	margin-bottom: 0.25rem;
}

.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 0.75rem;
	background:
		radial-gradient(circle at 10% 10%, rgba(12, 112, 134, 0.2), transparent 34%),
		radial-gradient(circle at 90% 90%, rgba(242, 169, 78, 0.2), transparent 32%),
		#e8f0f4;
}

.login-page > .container {
	width: min(100%, 1100px);
	max-width: 1100px;
	margin: 0 auto;
}

.login-panel {
	width: min(100%, 1100px);
	margin: 0 auto;
	border-radius: 22px;
	border: 1px solid var(--line);
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(12, 58, 69, 0.12);
}

.login-side {
	background: linear-gradient(150deg, var(--brand-deep), var(--brand));
	color: #fff;
	padding: 2rem;
}

.login-form {
	background: var(--bg-paper);
	padding: 2rem;
}

.form-control {
	border-radius: 12px;
	border-color: #c7d5de;
}

.form-control:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 0.2rem rgba(12, 112, 134, 0.16);
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container {
	display: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.password-input-group {
	border-radius: 12px;
	overflow: hidden;
}

.password-input-group .form-control {
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.password-toggle-btn {
	width: 3rem;
	border: 1px solid #c7d5de;
	border-left: 0;
	background: #fff;
	color: var(--brand-deep);
	border-radius: 0 12px 12px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus,
.password-toggle-btn:active {
	background: #f2f8fa;
	border-color: #a9c3ce;
	color: var(--brand-deep);
}

.password-toggle-btn i {
	font-size: 1rem;
}

.dataTables_wrapper .dt-buttons {
	margin-bottom: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.dataTables_wrapper .dt-buttons .btn {
	border-radius: 999px;
	border: none;
	padding: 0.34rem 0.85rem;
	font-size: 0.82rem;
	box-shadow: 0 8px 18px rgba(10, 95, 115, 0.14);
}

.dt-buttons .buttons-excel,
.dt-buttons .js-export-excel {
	background: #168653 !important;
	color: #fff !important;
}

.dt-buttons .buttons-pdf,
.dt-buttons .js-export-pdf {
	background: #df3049 !important;
	color: #fff !important;
}

.dt-buttons .buttons-print,
.dt-buttons .js-preview-print {
	background: #10bde0 !important;
	color: #fff !important;
}

.dataTables_wrapper .dataTables_filter input {
	border-radius: 999px;
	border: 1px solid #bdd0db;
	padding: 0.3rem 0.75rem;
	margin-left: 0.5rem;
}

.table thead th {
	font-size: 0.84rem;
	text-transform: uppercase;
	letter-spacing: 0.45px;
}

#tabelJemaatLengkap {
	min-width: 1900px;
	table-layout: fixed;
}

#daftar-jemaat-lengkap .dataTables_scrollHead table,
#daftar-jemaat-lengkap .dataTables_scrollBody table {
	min-width: 1900px !important;
	table-layout: fixed !important;
}

#daftar-jemaat-lengkap .dataTables_scrollHead th,
#daftar-jemaat-lengkap .dataTables_scrollBody td {
	box-sizing: border-box;
}

#tabelJemaatLengkap thead th {
	white-space: normal;
	line-height: 1.25;
	vertical-align: middle;
	padding: 0.75rem 0.65rem;
}

#tabelJemaatLengkap tbody td {
	white-space: nowrap;
	vertical-align: middle;
	padding: 0.65rem;
}

#tabelJemaatLengkap th:nth-child(1),
#tabelJemaatLengkap td:nth-child(1) { width: 145px; }
#tabelJemaatLengkap th:nth-child(2),
#tabelJemaatLengkap td:nth-child(2) { width: 190px; }
#tabelJemaatLengkap th:nth-child(3),
#tabelJemaatLengkap td:nth-child(3) { width: 78px; }
#tabelJemaatLengkap th:nth-child(4),
#tabelJemaatLengkap td:nth-child(4) { width: 120px; }
#tabelJemaatLengkap th:nth-child(5),
#tabelJemaatLengkap td:nth-child(5) { width: 65px; }
#tabelJemaatLengkap th:nth-child(6),
#tabelJemaatLengkap td:nth-child(6) { width: 105px; }
#tabelJemaatLengkap th:nth-child(7),
#tabelJemaatLengkap td:nth-child(7) { width: 55px; }
#tabelJemaatLengkap th:nth-child(8),
#tabelJemaatLengkap td:nth-child(8) { width: 125px; }
#tabelJemaatLengkap th:nth-child(9),
#tabelJemaatLengkap td:nth-child(9) { width: 115px; }
#tabelJemaatLengkap th:nth-child(10),
#tabelJemaatLengkap td:nth-child(10) { width: 135px; }
#tabelJemaatLengkap th:nth-child(11),
#tabelJemaatLengkap td:nth-child(11) { width: 150px; }
#tabelJemaatLengkap th:nth-child(12),
#tabelJemaatLengkap td:nth-child(12) { width: 95px; }
#tabelJemaatLengkap th:nth-child(13),
#tabelJemaatLengkap td:nth-child(13) { width: 110px; }
#tabelJemaatLengkap th:nth-child(14),
#tabelJemaatLengkap td:nth-child(14) { width: 150px; }
#tabelJemaatLengkap th:nth-child(15),
#tabelJemaatLengkap td:nth-child(15) { width: 105px; }
#tabelJemaatLengkap th:nth-child(16),
#tabelJemaatLengkap td:nth-child(16) { width: 90px; }
#tabelJemaatLengkap th:nth-child(17),
#tabelJemaatLengkap td:nth-child(17) { width: 130px; }
#tabelJemaatLengkap th:nth-child(18),
#tabelJemaatLengkap td:nth-child(18) { width: 175px; }

#tabelJemaatLengkap td:last-child {
	white-space: nowrap;
}

#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(1), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(1) { width: 145px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(2), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(2) { width: 190px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(3), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(3) { width: 78px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(4), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(4) { width: 120px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(5), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(5) { width: 65px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(6), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(6) { width: 105px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(7), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(7) { width: 55px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(8), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(8) { width: 125px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(9), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(9) { width: 115px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(10), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(10) { width: 135px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(11), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(11) { width: 150px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(12), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(12) { width: 95px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(13), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(13) { width: 110px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(14), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(14) { width: 150px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(15), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(15) { width: 105px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(16), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(16) { width: 90px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(17), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(17) { width: 130px !important; }
#daftar-jemaat-lengkap .dataTables_scrollHead th:nth-child(18), #daftar-jemaat-lengkap .dataTables_scrollBody td:nth-child(18) { width: 175px !important; }

.nav-tabs .nav-link {
	border-radius: 12px 12px 0 0;
	padding: 0.55rem 1rem;
	border: 1px solid #caddE7;
}

.nav-tabs .nav-link.active {
	border-color: #9dc2d3;
	background: var(--brand-deep);
	color: #fff !important;
	font-weight: 800;
}

.subpage-tabs .nav-link.active,
.subpage-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
	color: #fff !important;
}

.btn.active,
.btn:active,
.btn-check:checked + .btn {
	color: #fff !important;
	background-color: var(--brand-deep);
	border-color: var(--brand-deep);
}

.btn:focus-visible,
.nav-link:focus-visible {
	outline: 3px solid rgba(242, 169, 78, 0.8);
	outline-offset: 2px;
}

.site-footer {
	border-top: 1px solid rgba(12, 112, 134, 0.18);
	padding: 1.2rem 0;
}

.site-footer p,
.site-footer small,
.site-footer a {
	margin: 0;
	color: inherit;
	text-decoration: none;
}

.site-footer-public {
	background: #ecf4f7;
	color: #355768;
}

.footer-pekikan {
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #0c7086;
}

.footer-pekikan .footer-pekikan-jawab {
	font-style: italic;
	font-weight: 600;
	color: #355768;
}

.footer-contact-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	border: 1px solid rgba(12, 112, 134, 0.12);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.52);
	box-shadow: 0 8px 22px rgba(12, 112, 134, 0.06);
}

.footer-brand-block {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 180px;
}

.footer-brand-name {
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.footer-tagline {
	font-size: 0.8rem;
	color: var(--text-muted);
}

.footer-contacts {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.55rem 1rem;
	text-align: right;
}

.footer-contacts a {
	font-size: 0.82rem;
	line-height: 1.4;
	color: #234b5d;
	transition: color 0.2s ease;
}

.footer-contacts a:hover,
.footer-contacts a:focus {
	color: var(--brand-deep);
	text-decoration: underline;
}

.footer-contact-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.55rem;
}

.footer-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	background: #ffffff;
	border: 1px solid rgba(12, 112, 134, 0.12);
	color: var(--brand-deep);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-action-btn:hover,
.footer-action-btn:focus {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(12, 112, 134, 0.12);
	text-decoration: none;
}

.footer-action-btn.whatsapp {
	background: #eafaf0;
	color: #1b7a3b;
	border-color: rgba(27, 122, 59, 0.15);
}

.location-map-card {
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid rgba(12, 112, 134, 0.12);
	box-shadow: 0 14px 28px rgba(12, 112, 134, 0.08);
	background: #fff;
}

.location-map-card iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

@media (max-width: 767px) {
	.footer-contact-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-contacts {
		justify-content: flex-start;
		text-align: left;
	}

	.footer-contact-actions {
		justify-content: flex-start;
	}

	.location-map-card iframe {
		height: 300px;
	}
}

.site-footer-admin {
	background: #0c3f4d;
	color: #d6eaef;
}

.site-footer-admin a:hover,
.site-footer-public a:hover {
	text-decoration: underline;
}

.portal-topbar {
	padding: 1rem 1.25rem;
	background: linear-gradient(115deg, #0a5a6d, #0c7086);
	color: #edf8fb;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.portal-brand-title {
	display: inline-flex;
	align-items: center;
	line-height: 1.25;
}

.portal-brand-logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 50%;
	background: #ffffff;
	padding: 2px;
	flex-shrink: 0;
}

.portal-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 1rem;
	padding: 1rem;
	min-height: calc(100vh - 140px);
}

.portal-sidebar {
	background: linear-gradient(165deg, #0c3f4d, #0a5f73);
	color: #e7f3f7;
	border-radius: 20px;
	padding: 1.2rem;
	box-shadow: 0 16px 30px rgba(12, 63, 77, 0.25);
}

.portal-menu-btn {
	text-align: left;
	color: #e7f3f7;
	border: 1px solid rgba(231, 243, 247, 0.24);
	border-radius: 12px;
	padding: 0.65rem 0.8rem;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.92rem;
}

.portal-menu-btn:hover,
.portal-menu-btn:focus {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.15);
}

.portal-menu-btn.active {
	color: #0a3f50 !important;
	background: #f3fbff;
	border-color: #f3fbff;
	font-weight: 700;
}

.portal-menu-btn.active i,
.portal-menu-btn.active:hover,
.portal-menu-btn.active:focus {
	color: #0a3f50 !important;
}

.portal-quick {
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-size: 0.8rem;
}

.portal-content-head {
	padding: 1rem 1.2rem;
}

.portal-content-head p {
	color: var(--text-muted);
}

.portal-frame-wrap {
	background: #fff;
	border-radius: 20px;
	border: 1px solid var(--line);
	overflow: hidden;
	box-shadow: 0 12px 24px rgba(15, 35, 45, 0.08);
}

#portalFrame {
	width: 100%;
	height: max(700px, calc(100vh - 210px));
	border: 0;
	background: #f4f7f9;
}

.portal-frame-wrap {
	overflow: auto;
}

@media (max-width: 767px) {
	#portalFrame {
		height: max(820px, calc(100vh - 170px));
	}
}

@media (min-width: 992px) {
	.site-navbar > .container,
	.hero-content,
	.section-pad > .container,
	.site-footer-public > .container {
		width: calc(100% - 3rem);
		max-width: none;
	}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.site-navbar > .container,
	.hero-content,
	.section-pad > .container,
	.site-footer-public > .container {
		max-width: 1280px;
	}
}

@media (max-width: 991.98px) {
	.brand-title {
		font-size: 0.94rem;
		max-width: 520px;
	}

	.brand-logo {
		width: 36px;
		height: 36px;
	}

	.kop-jemaat-header {
		width: min(520px, 78vw);
		max-height: 78px;
	}

	.hero-section {
		min-height: 68vh;
		text-align: center;
	}

	.hero-actions {
		justify-content: center;
	}

	.portal-layout {
		grid-template-columns: 1fr;
	}

	#portalFrame {
		height: 72vh;
	}
}

@media (max-width: 767.98px) {
	.section-pad {
		padding: 3.2rem 0;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.site-footer {
		text-align: center;
	}

	.login-page {
		padding: 1rem 0.5rem;
		align-items: flex-start;
	}

	.login-page > .container {
		width: 100%;
	}

	.login-panel {
		border-radius: 18px;
	}

	.login-side,
	.login-form {
		padding: 1.25rem 1rem;
	}

	.login-side {
		min-height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	body {
		opacity: 1;
		animation: none;
	}

	.ticker-track {
		animation: none;
		transform: none;
	}
}