/*
Theme Name: Skansa School
Theme URI: https://skansa.test
Author: Skansa Dev
Author URI: https://skansa.test
Description: Theme WordPress tema sekolah untuk SMK Skansa. v6: tampilan beranda mengikuti referensi mobischool (highlight lingkaran emas, kartu jurusan potret, lencana agenda putih-biru, kartu guru).
Version: 6.0.31
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skipsa
Tags: education, school, custom-menu, custom-logo, featured-images
*/

/* ====== Tokens (mengikuti mobischool-demo2) ====== */
:root {
	--sk-blue: #1a4a9b;
	--sk-blue-dark: #143a7a;
	--sk-blue-soft: #eef4fd;
	--sk-orange: #f68708;
	--sk-orange-dark: #d97306;
	--sk-ink: #262626;
	--sk-muted: #6b7280;
	--sk-line: #e5e7eb;
	--sk-bg: #ffffff;
	--sk-bg-alt: #f7f8fa;
	--sk-r: 12px;
	--sk-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .07);
	--sk-shadow-lg: 0 10px 30px rgba(15, 23, 42, .13);
	--sk-font: "Rubik", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sk-font);
	color: var(--sk-ink);
	background: var(--sk-bg);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--sk-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* ====== Topbar ====== */
.sk-topbar {
	background: var(--sk-blue-dark);
	color: #b9c9e8;
	font-size: .78rem;
	padding: 7px 0;
}
.sk-topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sk-topbar a { color: #dbe6f8; font-weight: 500; }
.sk-topbar a:hover { color: #ffffff; }
.sk-topbar-left { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sk-topbar-left a, .sk-topbar-addr { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; }
.sk-topbar-left svg { width: 13px; height: 13px; opacity: .75; }
.sk-topbar-social { display: inline-flex; align-items: center; gap: 8px; }
.sk-topbar-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	transition: background .12s ease;
}
.sk-topbar-social a:hover { background: var(--sk-orange); color: #fff; }
.sk-topbar-social svg { width: 13px; height: 13px; }

/* ====== Header ====== */
.sk-header {
	background: var(--sk-bg);
	border-bottom: 1px solid var(--sk-line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.sk-header-top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sk-branding { display: flex; align-items: center; gap: 14px; justify-self: center; }

.sk-brand-logo-img { display: block; height: 52px; width: auto; object-fit: contain; margin: 0; }

.sk-header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

.sk-brand-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: var(--sk-r);
	background: var(--sk-blue);
	color: #fff;
	font-weight: 700;
	letter-spacing: .04em;
}

.sk-site-title { font-size: 1.28rem; font-weight: 700; margin: 0; color: var(--sk-blue); white-space: nowrap; }
.sk-site-title a { color: inherit; }
.sk-site-title a:hover { text-decoration: none; color: var(--sk-orange); }
.sk-site-desc { font-size: .74rem; color: var(--sk-muted); margin: 0; }

.sk-header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

.sk-nav-toggle {
	display: inline-flex;
	background: none;
	border: none;
	font-size: 1.5rem;
	padding: 6px 8px;
	cursor: pointer;
	color: var(--sk-ink);
	justify-self: start;
	line-height: 1;
}
.sk-nav-toggle:hover { color: var(--sk-blue); }

.sk-bell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	color: var(--sk-blue);
	transition: background .12s ease;
}
.sk-bell svg { width: 20px; height: 20px; }
.sk-bell:hover { background: var(--sk-blue-soft); text-decoration: none; }
.sk-bell-badge {
	position: absolute;
	top: 9px; right: 9px;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: #e11d48;
	box-shadow: 0 0 0 2px #fff;
}

/* ====== Nav ala demo2: UPPERCASE bold, rata tengah, tanpa kotak ====== */
.sk-nav {
	background: var(--sk-bg);
	border-top: 1px solid var(--sk-line);
	border-bottom: 1px solid var(--sk-line);
}

.sk-nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	gap: 0;
	flex-wrap: nowrap;
	justify-content: center;
	width: fit-content;
}

.sk-nav a {
	display: block;
	padding: 0 16px;
	line-height: 46px;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sk-ink);
	white-space: nowrap;
	transition: color .12s ease;
}
.sk-nav a:hover { color: var(--sk-blue); text-decoration: none; background: none; }

.sk-nav .current-menu-item > a,
.sk-nav .current_page_item > a,
.sk-nav .current-menu-parent > a {
	color: var(--sk-blue);
}

.sk-nav .menu-item-has-children { position: relative; }
.sk-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 5px; height: 5px;
	margin-left: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
	opacity: .55;
}
.sk-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	min-width: 240px;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sk-line);
	box-shadow: var(--sk-shadow-lg);
	border-radius: var(--sk-r);
	padding: 8px;
	z-index: 60;
}
.sk-nav .menu-item-has-children:hover > .sub-menu { display: flex; }
.sk-nav .sub-menu .sub-menu { top: 0; left: 100%; }

.sk-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	line-height: 1.4;
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sk-ink);
	border-radius: 8px;
}
.sk-nav .sub-menu a:hover { background: var(--sk-blue-soft); color: var(--sk-blue); }
.sk-nav .sub-menu .current-menu-item > a { color: var(--sk-blue); font-weight: 600; }
.sk-nav .sub-menu .menu-item-has-children > a::after { display: none; }

.sk-menu-icon { display: inline-flex; flex-shrink: 0; color: var(--sk-blue); }
.sk-menu-icon svg { width: 15px; height: 15px; }

/* ====== Bar pengumuman ====== */
.sk-notice {
	background: var(--sk-blue-soft);
	border-bottom: 1px solid #d7e4f8;
	padding: 9px 0;
	font-size: .88rem;
}
.sk-notice .container { display: flex; align-items: center; gap: 12px; }
.sk-notice-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sk-blue);
}
.sk-live-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #e11d48;
	animation: sk-pulse 1.4s ease-in-out infinite;
}
@keyframes sk-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .45); opacity: 1; }
	50% { box-shadow: 0 0 0 5px rgba(225, 29, 72, 0); opacity: .75; }
}
.sk-notice-link { color: var(--sk-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-notice-link:hover { color: var(--sk-blue); }
.sk-notice-more { margin-left: auto; flex-shrink: 0; font-size: .82rem; font-weight: 600; }

/* ====== Hero ala demo2: foto + overlay, konten tengah ====== */
.sk-hero {
	position: relative;
	background: var(--sk-blue-dark);
	overflow: hidden;
	max-width: 1120px;
	margin: 0 auto;
	border-radius: 12px;
}
@media (max-width: 1168px) {
	.sk-hero { border-radius: 0; }
}

.sk-hero-slides { position: relative; }
.sk-hero-slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 430px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s;
}
.sk-hero-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.sk-hero-slide .container { padding: 0 24px; width: 100%; }

.sk-hero-date {
	display: block;
	color: rgba(255, 255, 255, .85);
	font-size: .82rem;
	font-weight: 600;
	margin-bottom: 10px;
}

.sk-hero h2 {
	color: #fff;
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	font-weight: 700;
	line-height: 1.25;
	max-width: 820px;
	margin: 0 auto 26px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.sk-btn {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .92rem;
	transition: background .15s ease;
}
.sk-btn-primary { background: var(--sk-orange); color: #fff; }
.sk-btn-primary:hover { background: var(--sk-orange-dark); text-decoration: none; }

.sk-hero-dots { position: absolute; right: 24px; bottom: 22px; display: flex; gap: 7px; z-index: 2; }
.sk-hero-dot {
	width: 20px; height: 4px;
	border-radius: 999px;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: background .2s ease;
}
.sk-hero-dot.is-active { background: var(--sk-orange); }

/* ====== Band logo sekolah (menimpa hero) ====== */
.sk-brand-band {
	position: relative;
	z-index: 2;
	text-align: center;
	margin-top: -52px;
	padding: 0 24px;
}
.sk-brand-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 104px; height: 104px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #fff;
	box-shadow: var(--sk-shadow-lg);
	overflow: hidden;
}
.sk-brand-circle .sk-brand-logo-img { height: auto; max-height: 84px; max-width: 84px; }
.sk-brand-band h2 { margin: 14px 0 2px; font-size: 1.6rem; font-weight: 700; color: var(--sk-ink); }
.sk-brand-band p { margin: 0; color: var(--sk-muted); }

/* ====== Section ====== */
.sk-section { padding: 64px 0; }
.sk-section-alt { background: var(--sk-bg-alt); }

.sk-section-title { text-align: center; margin-bottom: 38px; }
.sk-section-title h2 {
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sk-ink);
	margin: 0 0 6px;
}
.sk-section-title p {
	color: var(--sk-muted);
	margin: 0 auto;
	max-width: 560px;
}

.sk-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--sk-line);
	position: relative;
}
.sk-section-head::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 72px; height: 2px;
	background: var(--sk-orange);
}
.sk-section-head h2 {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 1.38rem;
	font-weight: 700;
	color: var(--sk-blue);
	margin: 0;
}
.sk-sh-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--sk-blue-soft);
	color: var(--sk-blue);
	flex-shrink: 0;
}
.sk-sh-icon svg { width: 21px; height: 21px; }
.sk-link-more { font-weight: 600; font-size: .88rem; color: var(--sk-blue); white-space: nowrap; }
.sk-link-more::after { content: " →"; }
.sk-link-more:hover { color: var(--sk-orange); }

.sk-cat-badge {
	display: inline-block;
	background: var(--sk-blue-soft);
	color: var(--sk-blue);
	padding: 2px 10px;
	border-radius: 4px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
}

/* ====== Grid & kartu ====== */
.sk-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

.sk-card {
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.sk-card:hover { box-shadow: var(--sk-shadow-lg); transform: translateY(-3px); }

.sk-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2456b5, var(--sk-blue-dark));
	color: rgba(255, 255, 255, .85);
}
.sk-card-thumb > svg { width: 42px; height: 42px; stroke-width: 1.4; }
.sk-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sk-card:hover .sk-card-thumb img { transform: scale(1.04); }

/* ====== Kartu berita foto + overlay putih (ala demo2) ====== */
.sk-news-card {
	position: relative;
	border-radius: var(--sk-r);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: flex-end;
	text-decoration: none;
	background: var(--sk-blue-dark);
	border: 1px solid var(--sk-line);
	transition: transform .18s ease, box-shadow .18s ease;
}
.sk-news-card:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow-lg); text-decoration: none; }
.sk-news-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.sk-news-card:hover img { transform: scale(1.05); }
.sk-news-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15, 30, 60, 0) 30%, rgba(15, 30, 60, .88) 100%);
}
.sk-news-body {
	position: relative;
	z-index: 1;
	padding: 18px;
	width: 100%;
	color: #fff;
}
.sk-news-meta {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: #ffc266;
	text-transform: uppercase;
}
.sk-news-body h3 {
	margin: 5px 0 0;
	font-size: 1rem;
	line-height: 1.45;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.sk-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-card-body h3 { margin: 0; font-size: 1.04rem; line-height: 1.45; }
.sk-card-body h3 a { color: var(--sk-ink); }
.sk-card-body h3 a:hover { color: var(--sk-blue); }
.sk-card-meta { font-size: .78rem; color: var(--sk-muted); margin: 0; }
.sk-card-meta .sk-date { color: var(--sk-orange); font-weight: 600; }
.sk-card-body p { margin: 0; font-size: .92rem; color: #4b5563; }

.sk-more-link { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .85rem; }
.sk-more-link::after { content: " →"; }

/* ====== Lingkaran stories (tautan cepat) ====== */
.sk-quick { padding-top: 46px; padding-bottom: 46px; }

.sk-quick-grid {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	padding: 8px 4px 16px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	justify-content: flex-start;
}
.sk-quick-grid::-webkit-scrollbar { height: 4px; }
.sk-quick-grid::-webkit-scrollbar-thumb { background: #d7dce4; border-radius: 4px; }

.sk-quick-item {
	flex: 0 0 84px;
	scroll-snap-align: center;
	text-align: center;
	transition: transform .15s ease;
}
.sk-quick-item:hover { transform: translateY(-3px); text-decoration: none; }
.sk-quick-item:first-child { margin-left: auto; }
.sk-quick-item:last-child { margin-right: auto; }

/* ring gradien oranye ala demo2 */
.sk-quick-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px; height: 78px;
	margin: 0 auto 9px;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(120deg, #f9b234, var(--sk-orange));
}
.sk-quick-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	border-radius: 50%;
	background: #fff;
	color: var(--sk-blue);
	border: 2px solid #fff;
	box-shadow: var(--sk-shadow);
}
.sk-quick-icon svg { width: 30px; height: 30px; }
.sk-quick-item:hover .sk-quick-icon { color: var(--sk-orange); }
.sk-quick-photo {
	display: block;
	width: 100%; height: 100%;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
}
.sk-quick-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sk-quick-label { font-weight: 500; font-size: .78rem; color: var(--sk-ink); line-height: 1.35; }

/* ====== Jurusan: kartu foto overlay ala demo2 ====== */
.sk-jurusan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.sk-jur-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 5 / 6;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, #2456b5, var(--sk-blue-dark));
	text-decoration: none;
	border: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.sk-jur-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.sk-jur-card:hover img { transform: scale(1.06); }
.sk-jur-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15, 25, 50, .08) 35%, rgba(15, 25, 50, .82) 100%);
}
.sk-jur-line {
	position: relative;
	z-index: 1;
	width: 44px; height: 3px;
	border-radius: 2px;
	background: var(--sk-orange);
	margin: 0 0 10px 20px;
}
.sk-jur-card h3 {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	padding: 0 20px 20px;
}
.sk-jur-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sk-shadow-lg); }

/* ====== Pimpinan ====== */
.sk-lead-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	max-width: 960px;
	margin: 0 auto;
}

.sk-lead-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	padding: 18px 20px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sk-lead-card:hover { border-color: var(--sk-orange); box-shadow: var(--sk-shadow-lg); }

.sk-lead-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sk-blue);
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem;
	flex-shrink: 0;
}
.sk-lead-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sk-lead-info { min-width: 0; }
.sk-lead-info strong { display: block; color: var(--sk-ink); font-size: .98rem; line-height: 1.4; }
.sk-lead-role {
	display: inline-block;
	margin-top: 4px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sk-orange);
}

/* ====== Agenda / Pengumuman ====== */
.sk-agenda-item {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	padding: 14px 16px;
	margin-bottom: 10px;
	align-items: center;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sk-agenda-item:hover { border-color: var(--sk-orange); box-shadow: var(--sk-shadow-lg); }

.sk-agenda-date {
	background: var(--sk-blue);
	color: #fff;
	border-radius: 10px;
	min-width: 58px;
	text-align: center;
	flex-shrink: 0;
	overflow: hidden;
}
.sk-agenda-date strong { display: block; font-size: 1.45rem; line-height: 1.2; font-weight: 700; padding: 7px 8px 5px; }
.sk-agenda-date span {
	display: block;
	background: var(--sk-blue-dark);
	font-size: .58rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 4px 2px 5px;
}

.sk-agenda-item strong a { color: var(--sk-ink); font-size: .95rem; line-height: 1.45; }
.sk-agenda-item strong a:hover { color: var(--sk-blue); }
.sk-agenda-item .sk-card-meta { margin-top: 2px; }

/* ====== Statistik ====== */
.sk-stats {
	background: linear-gradient(140deg, var(--sk-blue-dark), var(--sk-blue));
	color: #fff;
	padding: 46px 0;
}
.sk-stats .sk-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); text-align: center; }

.sk-stat-card { padding: 10px 16px; border-left: 1px solid rgba(255, 255, 255, .16); }
.sk-stat-card:first-child { border-left: none; }
@media (max-width: 640px) { .sk-stat-card { border-left: none; } }

.sk-stat-num { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; margin: 0; line-height: 1.15; color: #fff; }
.sk-stat-label { margin: 4px 0 0; color: #ffc266; font-size: .88rem; font-weight: 500; }

/* ====== Konten / single ====== */
.sk-main-wrap { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
@media (min-width: 900px) {
	.sk-main-wrap.has-sidebar { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
}

.sk-page-header { padding: 32px 0 0; }
.sk-page-header h1 { color: var(--sk-blue); margin: 0; font-weight: 700; }

.sk-entry { background: #fff; border: 1px solid var(--sk-line); border-radius: var(--sk-r); padding: 30px; }
.sk-entry h1, .sk-entry h2, .sk-entry h3 { color: var(--sk-ink); }
.sk-entry-thumb { border-radius: var(--sk-r); margin-bottom: 20px; }
.sk-post-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

/* ====== Sidebar ====== */
.sk-sidebar .widget {
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	padding: 20px;
	margin-bottom: 16px;
}
.sk-sidebar .widget h2 {
	font-size: .78rem;
	margin: 0 0 12px;
	color: var(--sk-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
}
.sk-sidebar ul { list-style: none; margin: 0; padding: 0; }
.sk-sidebar ul li { padding: 7px 0; border-bottom: 1px solid var(--sk-line); font-size: .92rem; }
.sk-sidebar ul li:last-child { border-bottom: none; }

/* ====== Pagination ====== */
.sk-pagination { text-align: center; margin-top: 28px; }
.sk-pagination .page-numbers {
	display: inline-block;
	padding: 8px 15px;
	margin: 3px;
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: 8px;
	font-weight: 600;
	color: var(--sk-ink);
}
.sk-pagination .page-numbers:hover { border-color: var(--sk-blue); color: var(--sk-blue); text-decoration: none; }
.sk-pagination .current { background: var(--sk-blue); color: #fff; border-color: var(--sk-blue); }

/* ====== Footer ====== */
.sk-footer {
	background: var(--sk-blue-dark);
	color: #b9c9e8;
	margin-top: 64px;
	padding: 52px 0 0;
	border-top: 4px solid var(--sk-orange);
}
.sk-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 40px; }
@media (max-width: 900px) { .sk-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sk-footer-grid { grid-template-columns: 1fr; } }

.sk-footer-brand .sk-brand-logo-img { height: 52px; background: rgba(255, 255, 255, .94); padding: 6px; border-radius: 8px; }
.sk-footer-name { margin: 14px 0 6px; color: #fff; font-size: 1.15rem; font-weight: 700; }
.sk-footer-desc { margin: 0 0 16px; font-size: .88rem; line-height: 1.7; }

.sk-footer h4 { color: #fff; margin: 0 0 14px; font-weight: 600; font-size: .92rem; }
.sk-footer ul { list-style: none; margin: 0; padding: 0; }
.sk-footer ul li { padding: 4px 0; font-size: .88rem; }
.sk-footer a { color: #b9c9e8; }
.sk-footer a:hover { color: #ffc266; }

.sk-footer-bottom {
	margin-top: 44px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 16px 0;
	text-align: center;
	font-size: .8rem;
	color: #8ba3cc;
}

/* ====== Tombol melayang ====== */
.sk-fab {
	position: fixed;
	right: 20px;
	z-index: 80;
	width: 50px; height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	box-shadow: var(--sk-shadow-lg);
	transition: transform .14s ease, opacity .25s ease;
}
.sk-fab svg { width: 24px; height: 24px; }
.sk-fab:hover { transform: scale(1.06); text-decoration: none; }
.sk-fab-wa { bottom: 82px; background: #22c55e; color: #fff; }
.sk-fab-top { bottom: 22px; background: var(--sk-blue); color: #fff; font-size: 1.3rem; opacity: 0; visibility: hidden; pointer-events: none; }
.sk-fab-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* ====== Komentar ====== */
.sk-comments { margin-top: 30px; }
.comment-list .comment { background: #fff; border: 1px solid var(--sk-line); border-radius: var(--sk-r); padding: 16px; margin-bottom: 12px; list-style: none; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: var(--sk-r);
	font: inherit;
}
.comment-form input[type="submit"] {
	background: var(--sk-blue);
	color: #fff;
	border: none;
	padding: 11px 26px;
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--sk-blue-dark); }

/* ====== Biodata guru ====== */
.sk-bio { background: #fff; border: 1px solid var(--sk-line); border-radius: var(--sk-r); padding: 30px; }
.sk-bio-head { display: flex; align-items: center; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--sk-line); }
.sk-bio-avatar {
	display: flex; align-items: center; justify-content: center;
	width: 104px; height: 104px;
	border-radius: 50%; overflow: hidden;
	background: var(--sk-blue); color: #fff;
	font-weight: 700; font-size: 2.2rem;
	flex-shrink: 0;
}
.sk-bio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sk-bio-head h2 { margin: 0; color: var(--sk-ink); font-size: 1.4rem; }
.sk-bio-role {
	display: inline-block; margin-top: 6px;
	font-size: .8rem; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--sk-orange);
}
.sk-bio-table { width: 100%; border-collapse: collapse; font-size: .93rem; margin-top: 8px; }
.sk-bio-table th {
	text-align: left; color: var(--sk-muted); font-weight: 600;
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid var(--sk-line);
	width: 200px; vertical-align: top; white-space: nowrap;
}
.sk-bio-table td { padding: 12px 0; border-bottom: 1px solid var(--sk-line); }
.sk-bio-table tr:last-child th, .sk-bio-table tr:last-child td { border-bottom: none; }
.sk-bio-empty { color: #cbd5e1; }
.sk-bio-content { margin-top: 24px; }
.sk-bio-content h3 { font-size: 1.05rem; color: var(--sk-ink); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--sk-orange); display: inline-block; }
.sk-back-link { font-weight: 600; font-size: .9rem; color: var(--sk-muted); }
.sk-back-link:hover { color: var(--sk-blue); }

/* ====== Animasi halus ====== */
html.sk-js .sk-card,
html.sk-js .sk-lead-card,
html.sk-js .sk-jurusan-card,
html.sk-js .sk-agenda-item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s ease, transform .4s ease, box-shadow .18s ease;
}
html.sk-js .sk-card.sk-in,
html.sk-js .sk-lead-card.sk-in,
html.sk-js .sk-jurusan-card.sk-in,
html.sk-js .sk-agenda-item.sk-in {
	opacity: 1;
	transform: translateY(0);
}

/* ====== Mobile ====== */
@media (max-width: 900px) {
	.sk-nav { display: none; border-top: none; }
	.sk-nav.is-open { display: block; }
	.sk-nav ul { flex-direction: column; width: 100%; justify-content: flex-start; }
	.sk-nav a { line-height: 1.4; padding: 10px 4px; }
	.sk-nav .sub-menu { position: static; display: block; box-shadow: none; padding-left: 18px; border: none; }
	.sk-nav .sub-menu a { padding: 8px 12px; }
	.sk-topbar-left { display: none; }
	.sk-hero { padding: 58px 0 74px; }
	.sk-hero-dots { left: 0; right: 0; justify-content: center; }
	.sk-section { padding: 48px 0; }
	.sk-lead-grid { grid-template-columns: 1fr; }
	.sk-fab { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	html.sk-js .sk-card, html.sk-js .sk-lead-card, html.sk-js .sk-jurusan-card, html.sk-js .sk-agenda-item { opacity: 1; transform: none; transition: none; }
	.sk-hero-slide { transition: none; }
}

/* ====== Banner arsip berikon (ala demo2) ====== */
.sk-archive-hero {
	background: linear-gradient(140deg, var(--sk-blue-dark) 0%, var(--sk-blue) 90%);
	color: #fff;
	padding: 40px 0 36px;
	position: relative;
	overflow: hidden;
}
.sk-archive-hero::before {
	content: "";
	position: absolute;
	right: -50px; top: -50px;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: rgba(246, 135, 8, .14);
}
.sk-archive-hero::after {
	content: "";
	position: absolute;
	right: 110px; bottom: -90px;
	width: 160px; height: 160px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
}
.sk-archive-hero .container { position: relative; z-index: 1; }
.sk-archive-kicker {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #ffc266;
}
.sk-archive-hero h1 { margin: 6px 0 4px; font-size: 1.85rem; font-weight: 700; letter-spacing: -.01em; }
.sk-archive-desc { max-width: 640px; margin: 0; color: #cddcf5; font-size: .95rem; }
.sk-archive-count {
	display: inline-block;
	margin-top: 12px;
	background: rgba(255, 255, 255, .13);
	border-radius: 999px;
	padding: 3px 14px;
	font-size: .76rem;
	font-weight: 600;
}

.sk-archive-wrap { padding: 34px 0 20px; }

/* ====== Baris daftar (pengumuman / download) ====== */
.sk-arc-rows { display: flex; flex-direction: column; gap: 12px; }

.sk-arc-row {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	padding: 15px 18px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sk-arc-row:hover { border-color: var(--sk-orange); box-shadow: var(--sk-shadow-lg); }

.sk-arc-row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 10px;
	background: var(--sk-blue-soft);
	color: var(--sk-blue);
	flex-shrink: 0;
}
.sk-arc-row-icon svg { width: 20px; height: 20px; }

.sk-arc-row-main { min-width: 0; flex: 1; }
.sk-arc-row-main h3 { margin: 0; font-size: 1rem; line-height: 1.45; }
.sk-arc-row-main h3 a { color: var(--sk-ink); }
.sk-arc-row-main h3 a:hover { color: var(--sk-blue); text-decoration: none; }
.sk-arc-row-main p { margin: 3px 0 0; color: var(--sk-muted); font-size: .86rem; }

.sk-arc-row-date {
	flex-shrink: 0;
	font-size: .78rem;
	font-weight: 600;
	color: var(--sk-orange);
	white-space: nowrap;
}

.sk-dl-btn {
	flex-shrink: 0;
	background: var(--sk-orange);
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	padding: 8px 18px;
	border-radius: 999px;
	transition: background .15s ease;
}
.sk-dl-btn:hover { background: var(--sk-orange-dark); color: #fff; text-decoration: none; }

/* ====== Garis waktu agenda ====== */
.sk-timeline { position: relative; padding-left: 24px; max-width: 780px; }
.sk-timeline::before {
	content: "";
	position: absolute;
	left: 7px; top: 10px; bottom: 10px;
	width: 2px;
	background: var(--sk-line);
}
.sk-tl-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	padding: 14px 16px;
	margin-bottom: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sk-tl-item::before {
	content: "";
	position: absolute;
	left: -23px; top: 50%;
	margin-top: -6px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--sk-orange);
	box-shadow: 0 0 0 4px var(--sk-blue-soft);
}
.sk-tl-item:hover { border-color: var(--sk-orange); box-shadow: var(--sk-shadow-lg); }
.sk-tl-item .sk-card-meta { display: inline-flex; align-items: center; gap: 5px; }
.sk-tl-item .sk-card-meta svg { width: 13px; height: 13px; color: var(--sk-orange); }

/* ====== Kartu foto overlay ====== */
.sk-photo-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 16 / 10;
	border-radius: var(--sk-r);
	overflow: hidden;
	background: linear-gradient(135deg, #2456b5, var(--sk-blue-dark));
	border: 1px solid var(--sk-line);
	transition: transform .18s ease, box-shadow .18s ease;
}
.sk-photo-card:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow-lg); text-decoration: none; }
.sk-photo-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.sk-photo-card:hover img { transform: scale(1.05); }
.sk-photo-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15, 30, 60, .05) 40%, rgba(15, 30, 60, .85) 100%);
}
.sk-photo-sq { aspect-ratio: 1 / 1; }
.sk-photo-caption {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 14px 16px;
	color: #fff;
	font-weight: 600;
	font-size: .9rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sk-photo-body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 16px 18px;
	color: #fff;
}
.sk-photo-body h3 {
	margin: 4px 0 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.45;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.sk-play-badge {
	position: absolute;
	z-index: 2;
	top: 50%; left: 50%;
	transform: translate(-50%, -60%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(246, 135, 8, .95);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
	transition: transform .18s ease;
}
.sk-play-badge svg { width: 24px; height: 24px; }
.sk-photo-card:hover .sk-play-badge { transform: translate(-50%, -60%) scale(1.08); }

.sk-gal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

/* ====== Lencana medali prestasi ====== */
.sk-medal {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.sk-medal-1 { background: #fef3c7; color: #b45309; }
.sk-medal-2 { background: #e5e7eb; color: #4b5563; }
.sk-medal-3 { background: #fde8d7; color: #c2540a; }
.sk-medal-x { background: var(--sk-blue-soft); color: var(--sk-blue); }
.sk-tingkat { color: var(--sk-muted); }

/* ====== Kartu orang (siswa / kelas) ====== */
.sk-person-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	padding: 16px 18px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sk-person-card:hover { border-color: var(--sk-orange); box-shadow: var(--sk-shadow-lg); }
.sk-person-meta { font-size: .78rem; color: var(--sk-muted); }

/* ====== Kosong ====== */
.sk-arc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px dashed var(--sk-line);
	border-radius: var(--sk-r);
	padding: 48px 24px;
	text-align: center;
	color: var(--sk-muted);
}

/* ====== Halaman pengumuman ala demo2: daftar berfoto + widget agenda ====== */
.sk-peng-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
}
@media (max-width: 960px) {
	.sk-peng-grid { grid-template-columns: 1fr; }
}

.sk-peng-list { display: flex; flex-direction: column; gap: 28px; }

.sk-peng-item { display: flex; gap: 20px; }
.sk-peng-thumb {
	flex: 0 0 190px;
	aspect-ratio: 16 / 11;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2456b5, var(--sk-blue-dark));
	color: rgba(255, 255, 255, .85);
}
.sk-peng-thumb svg { width: 34px; height: 34px; }
.sk-peng-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sk-peng-item:hover .sk-peng-thumb img { transform: scale(1.05); }

.sk-peng-label {
	display: inline-block;
	color: var(--sk-blue);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.sk-peng-body h3 { margin: 9px 0 4px; font-size: 1.22rem; line-height: 1.4; }
.sk-peng-body h3 a { color: var(--sk-ink); }
.sk-peng-body h3 a:hover { color: var(--sk-blue); text-decoration: none; }
.sk-peng-date { font-size: .78rem; color: var(--sk-muted); margin-bottom: 8px; }
.sk-peng-body > p { margin: 0; color: #4b5563; font-size: .95rem; }

.sk-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sk-line);
}
.sk-side-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--sk-ink); }
.sk-side-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	font-size: .85rem;
	color: var(--sk-ink);
	white-space: nowrap;
}
.sk-side-more svg { width: 14px; height: 14px; }
.sk-side-more:hover { color: var(--sk-blue); text-decoration: none; }

.sk-side-agenda {
	display: flex;
	gap: 14px;
	margin-bottom: 22px;
}
.sk-side-agenda h3 { margin: 2px 0 6px; font-size: 1rem; line-height: 1.4; }
.sk-side-agenda h3 a { color: var(--sk-ink); }
.sk-side-agenda h3 a:hover { color: var(--sk-blue); text-decoration: none; }
.sk-side-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .8rem;
	color: var(--sk-muted);
	margin-bottom: 3px;
}
.sk-side-meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.sk-side-empty { font-size: .88rem; color: var(--sk-muted); }

/* ====== Beranda: berita besar + agenda dua kolom (ala demo2) ====== */
.sk-home-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 44px;
	align-items: start;
}
@media (max-width: 960px) {
	.sk-home-grid { grid-template-columns: 1fr; }
}

.sk-news-card.sk-feat { aspect-ratio: 16 / 9; }
.sk-feat .sk-news-body h3 { font-size: 1.5rem; }
.sk-feat .sk-news-meta { color: rgba(255, 255, 255, .78); }
.sk-feat-date {
	display: block;
	margin-top: 8px;
	font-size: .75rem;
	color: rgba(255, 255, 255, .78);
}
.sk-peng-mini .sk-peng-thumb { flex-basis: 120px; }
.sk-peng-mini h3 { font-size: 1.02rem; margin-top: 7px; }

/* ====== Tenaga pengajar: kartu horizontal ala demo2 ====== */
.sk-guru-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 22px 44px;
}
.sk-guru-card {
	display: flex;
	align-items: center;
	gap: 16px;
}
.sk-guru-photo {
	flex: 0 0 92px;
	width: 92px; height: 92px;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2456b5, var(--sk-blue-dark));
	color: rgba(255, 255, 255, .85);
}
.sk-guru-photo svg { width: 34px; height: 34px; }
.sk-guru-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-guru-body { min-width: 0; padding: 0; }
.sk-guru-body strong { display: block; color: var(--sk-ink); font-size: .98rem; line-height: 1.4; }
.sk-guru-role { display: block; font-size: .78rem; color: var(--sk-muted); margin-top: 3px; }
.sk-guru-card:hover .sk-guru-body strong { color: var(--sk-blue); }

/* ====== Footer minimal ala demo2 ====== */
.sk-footer-min {
	background: var(--sk-bg-alt);
	border-top: 1px solid var(--sk-line);
	margin-top: 56px;
	padding: 20px 0;
	text-align: center;
	color: var(--sk-muted);
	font-size: .85rem;
}

/* =====================================================================
   v6.0.0 — Penyegaran visual mengikuti gambar referensi (mobischool):
   highlight lingkaran emas, kartu jurusan potret yang bisa digeser di HP,
   lencana tanggal agenda putih-biru, kartu guru putih, judul seksi tegas.
   Blok ini sengaja ditaruh paling akhir agar menimpa aturan lama dengan
   kekhususan (specificity) yang sama — hapus blok ini untuk kembali ke v5.
   ===================================================================== */
:root {
	--sk-gold: #f6b81e;
	--sk-gold-soft: #fdeec9;
	--sk-r-lg: 18px;
	--sk-shadow-v6: 0 2px 6px rgba(15, 23, 42, .06), 0 14px 34px rgba(15, 23, 42, .10);
}

/* Header lengket diberi bayangan lembut agar terpisah dari konten */
.sk-header { box-shadow: 0 1px 0 var(--sk-line), 0 8px 24px rgba(15, 23, 42, .05); }
.sk-bell-badge {
	position: absolute; top: 9px; right: 10px;
	width: 9px; height: 9px; border-radius: 50%;
	background: #ef4444; border: 2px solid #fff;
}

/* Hero: sudut lebih membulat + judul lebih tegas */
.sk-hero { border-radius: var(--sk-r-lg); margin-top: 18px; }
@media (max-width: 1168px) { .sk-hero { border-radius: 0; margin-top: 0; } }
.sk-hero h2 { font-weight: 800; letter-spacing: -.01em; }
.sk-btn-primary { box-shadow: 0 8px 20px rgba(246, 135, 8, .35); }
.sk-btn-primary:hover { transform: translateY(-1px); }

/* Band nama sekolah: lebih besar & tegas seperti referensi */
.sk-brand-band h2 { font-size: clamp(1.55rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -.01em; }
.sk-brand-band p { font-size: .98rem; }
.sk-brand-circle { border-color: var(--sk-gold-soft); }

/* Judul seksi tengah (Jurusan dll.): garis emas di bawah judul */
.sk-section-title h2 { font-size: 1.85rem; font-weight: 800; }
.sk-section-title h2::after {
	content: ""; display: block;
	width: 56px; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, var(--sk-gold), var(--sk-orange));
	margin: 10px auto 0;
}
.sk-section-title p { font-size: .95rem; }

/* ====== Highlight lingkaran (stories) ala referensi ====== */
.sk-quick { padding-top: 38px; padding-bottom: 38px; }
.sk-quick-grid { gap: 20px; padding-top: 6px; }
.sk-quick-item { flex-basis: 104px; }
.sk-quick-ring {
	width: 92px; height: 92px;
	padding: 4px;
	background: linear-gradient(135deg, #ffd23e 0%, var(--sk-gold) 45%, #f59e0b 100%);
	box-shadow: 0 8px 18px rgba(245, 158, 11, .28);
	transition: transform .18s ease, box-shadow .18s ease;
}
.sk-quick-item:hover .sk-quick-ring { transform: scale(1.05); box-shadow: 0 12px 24px rgba(245, 158, 11, .38); }
.sk-quick-icon { border-width: 3px; }
.sk-quick-icon svg { width: 34px; height: 34px; }
.sk-quick-photo { border-width: 3px; }
.sk-quick-label { font-weight: 600; font-size: .82rem; }

/* ====== Kartu jurusan: potret, sudut besar, chip emoji, gradasi cadangan ====== */
.sk-jurusan-grid { gap: 22px; }
.sk-jur-card { border-radius: var(--sk-r-lg); aspect-ratio: 4 / 5; box-shadow: var(--sk-shadow); }
.sk-jur-card:nth-child(4n+2) { background: linear-gradient(150deg, #0e7490, #164e63); }
.sk-jur-card:nth-child(4n+3) { background: linear-gradient(150deg, #b45309, #7c2d12); }
.sk-jur-card:nth-child(4n+4) { background: linear-gradient(150deg, #6d28d9, #3b1470); }
.sk-jur-line { background: var(--sk-gold); width: 48px; height: 4px; margin-left: 22px; }
.sk-jur-card h3 { font-size: 1.35rem; font-weight: 800; padding: 0 22px 22px; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.sk-jur-card h3 + .sk-jur-desc { margin-top: -14px; }
.sk-jur-desc {
	position: relative; z-index: 1;
	display: block;
	padding: 0 22px 22px;
	color: rgba(255, 255, 255, .86);
	font-size: .83rem; line-height: 1.5;
}
.sk-jur-emoji {
	position: absolute; top: 16px; left: 16px; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	font-size: 1.35rem; line-height: 1;
	box-shadow: var(--sk-shadow);
}
/* Di HP: jurusan menjadi deretan geser (scroll-snap) seperti referensi */
@media (max-width: 760px) {
	.sk-jurusan-grid {
		display: flex;
		overflow-x: auto;
		padding: 4px 4px 14px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.sk-jur-card { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ====== Berita utama: label kategori menjadi chip oranye ====== */
.sk-news-card { border-radius: var(--sk-r-lg); }
.sk-feat .sk-news-meta {
	display: inline-block;
	background: var(--sk-orange); color: #fff;
	padding: 3px 11px; border-radius: 999px;
	font-size: .68rem; letter-spacing: .07em;
}
.sk-feat .sk-news-body { padding: 22px; }
.sk-feat .sk-news-body h3 { font-weight: 800; }

/* ====== Lencana tanggal agenda: putih di atas, biru di bawah (referensi) ====== */
.sk-agenda-date {
	background: #fff;
	color: var(--sk-ink);
	border: 1.5px solid #dbe3ef;
	border-radius: 12px;
	min-width: 62px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .07);
}
.sk-agenda-date strong { padding: 6px 8px 4px; font-size: 1.5rem; font-weight: 800; }
.sk-agenda-date span {
	background: var(--sk-blue);
	color: #fff;
	font-size: .6rem; font-weight: 700;
	padding: 4px 2px 6px;
}
.sk-side-agenda { padding: 10px 12px; border-radius: 14px; transition: background .15s ease, transform .15s ease; }
.sk-side-agenda:hover { background: var(--sk-blue-soft); transform: translateX(3px); }
.sk-side-agenda h3 { font-weight: 700; }

/* ====== Tenaga pengajar: kartu putih bersih di atas latar abu ====== */
.sk-guru-grid { gap: 18px 22px; }
.sk-guru-card {
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: 16px;
	padding: 14px 16px;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sk-guru-card:hover { box-shadow: var(--sk-shadow-v6); transform: translateY(-3px); border-color: #f3cf7d; text-decoration: none; }
.sk-guru-photo { flex-basis: 84px; width: 84px; height: 84px; border-radius: 14px; }
.sk-guru-body strong { font-size: 1rem; font-weight: 700; }
.sk-guru-role {
	display: inline-block; margin-top: 5px;
	background: var(--sk-blue-soft); color: var(--sk-blue);
	padding: 2px 9px; border-radius: 999px;
	font-size: .72rem; font-weight: 600;
}

/* Statistik & kartu umum: sudut dan bayangan diselaraskan */
.sk-card { border-radius: 16px; }
.sk-stats { background: linear-gradient(140deg, var(--sk-blue-dark), var(--sk-blue) 70%, #2563eb); }
.sk-stat-num { font-weight: 800; }

/* Animasi muncul untuk elemen baru v6 */
html.sk-js .sk-guru-card,
html.sk-js .sk-peng-item,
html.sk-js .sk-news-card {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s ease, transform .4s ease, box-shadow .18s ease;
}
html.sk-js .sk-guru-card.sk-in,
html.sk-js .sk-peng-item.sk-in,
html.sk-js .sk-news-card.sk-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	html.sk-js .sk-guru-card, html.sk-js .sk-peng-item, html.sk-js .sk-news-card { opacity: 1; transform: none; transition: none; }
	.sk-quick-item:hover .sk-quick-ring, .sk-btn-primary:hover { transform: none; }
}

/* =====================================================================
   v6.0.2 — Jumlah ganjil tetap rapi: baris terakhir selalu di TENGAH.
   Grid diganti flex-wrap rata tengah; ukuran kartu dikunci (maks 252px =
   lebar kolom 4 pada wadah 1120px) supaya kartu baris terakhir tidak
   melebar aneh dan tidak menempel ke kiri. Berlaku untuk jumlah berapa
   pun (5, 6, 7, 8, ...): sisa kartu di baris bawah otomatis terpusat.
   ===================================================================== */
.sk-jurusan-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sk-jur-card {
	flex: 1 1 240px;
	max-width: 252px;
}
/* Chip emoji jurusan sedikit diperbesar agar terbaca jelas */
.sk-jur-emoji { width: 50px; height: 50px; font-size: 1.6rem; }

/* Pola yang sama untuk Tenaga Pengajar: sisa kartu baris terakhir terpusat */
.sk-guru-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sk-guru-card {
	flex: 1 1 320px;
	max-width: 525px;
}

/* HP: jurusan tetap deretan geser seperti sebelumnya */
@media (max-width: 760px) {
	.sk-jurusan-grid { flex-wrap: nowrap; justify-content: flex-start; }
	.sk-jur-card { flex: 0 0 72%; max-width: none; }
	.sk-guru-card { max-width: none; }
}

/* =====================================================================
   v6.0.3 — Pola rata tengah yang sama untuk grid kartu umum beranda
   (Prestasi Siswa): kelas tambahan .sk-grid-center, dipakai scoped di
   front-page saja agar grid arsip/index tidak ikut berubah. Ukuran kartu
   dikunci maks 343px (= lebar kolom 3 pada wadah 1120px, sesuai tampilan
   sekarang) sehingga sisa kartu di baris terakhir terpusat, tidak melebar.
   ===================================================================== */
.sk-grid.sk-grid-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sk-grid.sk-grid-center > .sk-card {
	flex: 1 1 300px;
	max-width: 343px;
}
@media (max-width: 640px) {
	.sk-grid.sk-grid-center > .sk-card { max-width: none; }
}

/* =====================================================================
   v6.0.4 — Header arsip (Pengumuman, Agenda, Prestasi, dll.) dibuat luwes.
   Penyebab kaku sebelumnya: pita persegi penuh selebar layar menempel ke
   header situs, sudut siku, gradasi datar, semua teks bertumpuk rata kiri.
   Sekarang: kartu melayang bersudut 20px dengan bayangan, gradasi biru
   3 tahap, ring emas dekoratif, garis aksen emas di bawah judul, lencana
   jumlah konten bergaya kaca, dan animasi muncul lembut.
   ===================================================================== */
.sk-archive-hero {
	max-width: 1120px;
	margin: 22px auto 0;
	border-radius: 20px;
	padding: 38px 0 34px;
	background: linear-gradient(120deg, var(--sk-blue-dark) 0%, var(--sk-blue) 55%, #2563eb 100%);
	box-shadow: var(--sk-shadow-v6);
	animation: sk-hero-in .5s ease both;
}
@media (max-width: 1168px) {
	.sk-archive-hero { margin: 14px 12px 0; }
}
.sk-archive-hero::before {
	right: -70px; top: -70px;
	width: 230px; height: 230px;
	background: transparent;
	border: 26px solid rgba(246, 184, 30, .28);
}
.sk-archive-hero::after {
	right: 120px; bottom: -110px;
	width: 190px; height: 190px;
	background: rgba(255, 255, 255, .09);
}
.sk-archive-kicker { display: inline-flex; align-items: center; gap: 8px; }
.sk-archive-kicker::before {
	content: "";
	width: 22px; height: 2px;
	border-radius: 2px;
	background: var(--sk-gold);
}
.sk-archive-hero h1 { font-size: 2rem; font-weight: 800; }
.sk-archive-hero h1::after {
	content: "";
	display: block;
	width: 56px; height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sk-gold), var(--sk-orange));
	margin-top: 10px;
}
.sk-archive-count {
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .35);
}
.sk-archive-wrap { padding-top: 28px; }

@keyframes sk-hero-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sk-archive-hero { animation: none; }
}

/* =====================================================================
   v6.0.5 — Hero beranda KHUSUS slider foto: tanpa judul, tanggal, dan
   tombol di atas foto (markup-nya dibuang dari front-page.php). Foto tampil
   bersih; bila slideshow punya URL tujuan, seluruh foto bisa diklik lewat
   tautan tak terlihat. Titik navigasi diberi bayangan agar tetap terbaca
   di atas foto terang. Bila belum ada foto slideshow, hero disembunyikan
   dan band nama sekolah berdiri sendiri (kelas --solo).
   ===================================================================== */
.sk-hero-link { position: absolute; inset: 0; z-index: 1; display: block; }
.sk-hero-dot { background: rgba(255, 255, 255, .75); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.sk-hero-dot.is-active { background: var(--sk-orange); }
.sk-brand-band--solo { margin-top: 30px; }

/* =====================================================================
   v6.0.7 — Banyak jabatan: kartu guru menampilkan tiap jabatan sebagai
   chip terpisah yang membungkus rapi (flex-wrap), dan di tabel biodata
   tiap jabatan tampil pada barisnya sendiri.
   ===================================================================== */
.sk-guru-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sk-guru-roles .sk-guru-role { margin-top: 0; }
.sk-bio-jabatan { display: block; }
.sk-bio-jabatan + .sk-bio-jabatan { margin-top: 3px; }

/* =====================================================================
   v6.0.8 — Halaman satu prestasi pola biodata: foto siswa besar di tengah
   atas (maks 620px, rasio 4/3, sudut 16px), judul otomatis di tengah
   bawahnya, lalu tabel data bergaya tabel biodata.
   ===================================================================== */
.sk-prestasi-photo { text-align: center; margin-bottom: 22px; }
.sk-prestasi-photo img {
	width: 100%; max-width: 620px;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: 16px;
	box-shadow: var(--sk-shadow-v6);
}
.sk-prestasi-nophoto {
	display: flex; align-items: center; justify-content: center;
	width: 100%; max-width: 620px; aspect-ratio: 4 / 3;
	margin: 0 auto;
	border-radius: 16px;
	background: linear-gradient(135deg, #2456b5, var(--sk-blue-dark));
	color: rgba(255, 255, 255, .85);
}
.sk-prestasi-nophoto svg { width: 72px; height: 72px; }
.sk-prestasi-title {
	text-align: center;
	font-size: 1.6rem; font-weight: 800;
	color: var(--sk-ink);
	margin: 0 0 10px;
	line-height: 1.35;
}

/* =====================================================================
   v6.0.9 — Halaman galeri foto (Fasilitas & Ekstrakurikuler): kisi foto
   4/3 yang bisa diklik, tampil besar lewat lightbox (dibangun nav.js).
   ===================================================================== */
.sk-gallery-intro { max-width: 760px; margin: 0 auto 22px; color: var(--sk-muted); line-height: 1.7; }
.sk-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}
.sk-g-item {
	display: block; border-radius: 14px; overflow: hidden;
	box-shadow: var(--sk-shadow-v6);
	aspect-ratio: 4 / 3;
}
.sk-g-item img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .35s ease;
}
.sk-g-item:hover img { transform: scale(1.05); }
.sk-gallery-none { color: var(--sk-muted); font-style: italic; }

.sk-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(9, 13, 26, .93);
	display: flex; align-items: center; justify-content: center;
}
.sk-lightbox[hidden] { display: none; }
.sk-lb-img {
	max-width: 92vw; max-height: 88vh;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.sk-lb-close, .sk-lb-prev, .sk-lb-next {
	position: absolute;
	border: none; cursor: pointer;
	background: rgba(255, 255, 255, .14); color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease;
}
.sk-lb-close:hover, .sk-lb-prev:hover, .sk-lb-next:hover { background: rgba(255, 255, 255, .3); }
.sk-lb-close { top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; }
.sk-lb-prev, .sk-lb-next {
	top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px; border-radius: 50%; font-size: 30px;
}
.sk-lb-prev { left: 16px; }
.sk-lb-next { right: 16px; }
.sk-lb-count {
	position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
	color: #fff; font-size: .9rem; font-weight: 600;
	background: rgba(255, 255, 255, .14);
	padding: 5px 14px; border-radius: 999px;
}
@media (max-width: 640px) {
	.sk-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* =====================================================================
   v6.0.10 — (1) Bar pengumuman berjalan (marquee): lintasan berisi sampai
   5 pengumuman terbaru, digandakan PHP agar putarannya mulus; berhenti
   saat kursor di atasnya; hormati prefers-reduced-motion.
   (2) Halaman presentasi jurusan: hero berfoto sampul, kartu presentasi,
   kepala seksi berkelompok.
   ===================================================================== */
.sk-notice-viewport {
	flex: 1 1 auto; min-width: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.sk-notice-track {
	display: flex; width: max-content;
	animation-name: sk-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.sk-notice:hover .sk-notice-track { animation-play-state: paused; }
.sk-notice-group { display: flex; align-items: center; white-space: nowrap; }
.sk-notice-group .sk-notice-link { overflow: visible; text-overflow: clip; }
.sk-notice-sep { margin: 0 16px; color: var(--sk-gold, #e8a33d); font-weight: 700; }
@keyframes sk-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sk-notice-track { animation: none; }
}

.sk-archive-hero--cover { background-size: cover; background-position: center; }
.sk-jurusan-presentasi {
	background: #fff;
	border: 1px solid #e6ebf4;
	border-radius: 16px;
	box-shadow: var(--sk-shadow-v6);
	padding: 26px 28px;
	margin: 4px 0 30px;
	color: var(--sk-ink);
	line-height: 1.75;
}
.sk-jurusan-presentasi p { margin: 0 0 14px; }
.sk-jurusan-presentasi p:last-child { margin-bottom: 0; }
.sk-jur-sec-head {
	display: flex; align-items: center; gap: 12px;
	margin: 30px 0 16px;
}
.sk-jur-sec-head h2 { font-size: 1.35rem; font-weight: 800; color: var(--sk-ink); margin: 0; }
.sk-jur-sec-count {
	font-size: .8rem; font-weight: 700; color: var(--sk-blue);
	background: #e8effc; padding: 4px 12px; border-radius: 999px;
}
.sk-jur-more-note { color: var(--sk-muted); font-size: .9rem; margin: 10px 0 0; }

/* =====================================================================
   v6.0.11 — Sambutan Kepala Sekolah: foto besar di tengah atas
   (maks 460px, rasio 4/5 potret), nama + jabatan terpusat, teks
   sambutan dalam kartu putih (memakai gaya .sk-jurusan-presentasi).
   ===================================================================== */
.sk-sambutan-photo { text-align: center; margin-bottom: 20px; }
.sk-sambutan-photo img {
	width: 100%; max-width: 460px;
	aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: 20px;
	box-shadow: var(--sk-shadow-v6);
}
.sk-sambutan-photo .sk-prestasi-nophoto { max-width: 460px; aspect-ratio: 4 / 5; }
.sk-sambutan-name {
	text-align: center; font-size: 1.55rem; font-weight: 800;
	color: var(--sk-ink); margin: 0 0 4px; line-height: 1.35;
}
.sk-sambutan-role {
	text-align: center; color: var(--sk-blue); font-weight: 700;
	margin: 0 0 22px; font-size: 1rem;
}
.sk-sambutan-body { max-width: 820px; margin-left: auto; margin-right: auto; }

/* =====================================================================
   v6.0.14 — Perbaikan responsif blok atas beranda di handphone (laporan
   teli): (1) aturan lama @media 900px memberi .sk-hero padding 58/74px
   sisa era hero teks — bersama min-height slide 430px, hero di HP jadi
   ±562px; (2) titik slider di tengah tertutup lingkaran logo sekolah;
   (3) baris lingkaran 4×84px + celah 28px = 420px sehingga lingkaran
   ke-4 terpotong & harus digeser. Kini: hero mengikuti rasio foto,
   titik kembali ke kanan bawah, lingkaran jadi kisi 4 kolom penuh.
   ===================================================================== */
@media (max-width: 900px) {
	.sk-hero { padding: 0; margin-top: 0; }
	.sk-hero-slide { min-height: 0; aspect-ratio: 21 / 9; }
	.sk-hero-dots { left: auto; right: 16px; bottom: 14px; justify-content: flex-end; }
	.sk-brand-band { margin-top: -40px; }
	.sk-brand-circle { width: 84px; height: 84px; }
	.sk-brand-circle .sk-brand-logo-img { max-height: 66px; max-width: 66px; }
	.sk-quick-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
		overflow: visible;
		padding: 4px 0 0;
	}
	.sk-quick-item { flex: none; }
	.sk-quick-item:first-child { margin-left: 0; }
	.sk-quick-item:last-child { margin-right: 0; }
	.sk-quick-ring { width: 68px; height: 68px; }
}
@media (max-width: 640px) {
	.sk-hero-slide { aspect-ratio: 16 / 10; }
	.sk-hero-dots { right: 12px; bottom: 12px; }
	.sk-hero-dot { width: 16px; }
	.sk-brand-band { margin-top: -32px; padding: 0 16px; }
	.sk-brand-circle { width: 70px; height: 70px; }
	.sk-brand-circle .sk-brand-logo-img { max-height: 54px; max-width: 54px; }
	.sk-brand-band h2 { font-size: 1.28rem; margin-top: 10px; }
	.sk-brand-band p { font-size: .88rem; }
	.sk-quick { padding-top: 30px; padding-bottom: 30px; }
	.sk-quick-grid { gap: 10px; }
	.sk-quick-ring { width: 58px; height: 58px; margin-bottom: 7px; }
	.sk-quick-icon svg { width: 23px; height: 23px; }
	.sk-quick-label { font-size: .72rem; }
}

/* =====================================================================
   v6.0.17 — Kutipan di bawah nama sekolah pada band logo (arahan teli:
   cukup tampil di bawah tulisan nama sekolah, menggantikan slogan
   bila sakelar Kutipan menyala & ada pos kutipan).
   ===================================================================== */
.sk-brand-quote {
	max-width: 660px;
	margin: 6px auto 0;
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--sk-ink);
}
.sk-brand-quote-src {
	font-style: normal;
	font-weight: 700;
	font-size: .85rem;
	color: var(--sk-orange, #e07b24);
	white-space: nowrap;
}

/* =====================================================================
   v6.0.18 — Halaman satu Agenda rinci: kepala berisi lencana tanggal
   besar + chip status hitung mundur, foto, tabel detail, dan daftar
   agenda berikutnya memakai gaya item agenda beranda.
   ===================================================================== */
.sk-agenda-head { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.sk-agenda-date--big { min-width: 92px; border-radius: 14px; }
.sk-agenda-date--big strong { font-size: 2.35rem; padding: 12px 10px 7px; }
.sk-agenda-date--big span { font-size: .68rem; padding: 5px 2px 7px; }
.sk-agenda-head-main { min-width: 0; }
.sk-agenda-title { font-size: 1.55rem; font-weight: 800; color: var(--sk-ink); margin: 6px 0 4px; line-height: 1.35; }
.sk-agenda-when { margin: 0; color: var(--sk-muted); font-weight: 600; }
.sk-agenda-status {
	display: inline-block;
	font-size: .78rem; font-weight: 700;
	padding: 4px 12px; border-radius: 999px;
	background: #e8effc; color: var(--sk-blue);
}
.sk-agenda-status.is-hot { background: #fdeeda; color: #b45f06; }
.sk-agenda-status.is-soon { background: #e6f6ec; color: #137333; }
.sk-agenda-status.is-past { background: #eef0f3; color: #68707c; }
.sk-agenda-photo { margin-bottom: 20px; }
.sk-agenda-photo img {
	width: 100%; max-height: 420px; object-fit: cover;
	border-radius: 14px; display: block;
}
@media (max-width: 640px) {
	.sk-agenda-head { gap: 14px; }
	.sk-agenda-date--big { min-width: 74px; }
	.sk-agenda-date--big strong { font-size: 1.9rem; }
	.sk-agenda-title { font-size: 1.3rem; }
}

/* =====================================================================
   v6.0.19 — Perbaikan ikon pin raksasa pada Agenda Berikutnya (laporan
   lapangan teli): SVG ikon dari skansa_school_icon() tidak membawa
   ukuran; tema mengukurnya per konteks, dan konteks .sk-card-meta pada
   item agenda belum punya aturan → ikon tampil sebesar kartu. Kini
   semua ikon di dalam baris meta kartu dibatasi 13px (menyamai aturan
   .sk-tl-item yang sudah ada).
   ===================================================================== */
.sk-card-meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.sk-agenda-item .sk-card-meta { display: flex; align-items: center; gap: 5px; }


/* =====================================================================
   v6.0.27 — Kutipan di band nama sekolah dibuat RATA TENGAH (laporan
   teli dari hosting: kutipan tampil menempel kiri). Aturan v6.0.17
   memusatkan bloknya (margin auto) tapi tidak memusatkan teksnya, dan
   tata letak band membuatnya tetap tampak kiri; kini teks dipaksa
   tengah dengan selektor yang lebih kuat.
   ===================================================================== */
.sk-brand-band .sk-brand-quote {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}


/* =====================================================================
   v6.0.29 — Tiga perbaikan HP dari screenshot teli (hosting, 16:00):
   (1) Label lingkaran pertama diganti "Kepala Sekolah" → "Sambutan"
       (tautannya memang sudah ke halaman sambutan).
   (2) Logo tampak dobel & lingkaran lambang menimpa bar pengumuman:
       blok v6.0.14 memberi .sk-brand-band margin-top NEGATIF di HP
       (-40/-32px) tanpa kecuali — pada mode solo (hero kosong, seperti
       hosting yang belum punya foto slideshow) band ikut tertarik ke
       atas menimpa bar pengumuman. Kini mode solo dikunci berjarak
       normal di semua ukuran layar (selektor ganda, menang atas blok
       v6.0.14). Selain itu logo kecil di header disembunyikan khusus
       di BERANDA pada HP — di sana sudah ada lambang besar di band.
   (3) Judul berita utama di HP terlalu besar & menumpuk foto: kini
       1.08rem, dibatasi 3 baris, padding diperkecil.
   ===================================================================== */
.sk-brand-band.sk-brand-band--solo { margin-top: 30px; }
@media (max-width: 900px) {
	.sk-brand-band.sk-brand-band--solo { margin-top: 22px; }
	.home .sk-branding { visibility: hidden; }
	.sk-feat .sk-news-body h3 { font-size: 1.25rem; }
}
@media (max-width: 640px) {
	.sk-feat .sk-news-body { padding: 14px 16px; }
	.sk-feat .sk-news-body h3 {
		font-size: 1.08rem;
		line-height: 1.32;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.sk-feat-date { margin-top: 5px; }
}


/* =====================================================================
   v6.0.30 — Koreksi arah dari teli atas v6.0.29: yang dipertahankan
   adalah logo ATAS (header), yang disembunyikan adalah lingkaran
   lambang di band nama sekolah — khusus tampilan HP. Aturan v6.0.29
   yang menyembunyikan logo header dibatalkan (visibility dikembalikan),
   lingkaran band disembunyikan ≤900px, dan band tidak lagi ditarik
   menimpa elemen di atasnya di HP (nama sekolah duduk rapi di bawah
   bar pengumuman / hero).
   ===================================================================== */
@media (max-width: 900px) {
	.home .sk-branding { visibility: visible; }
	.sk-brand-circle { display: none; }
	.sk-brand-band { margin-top: 20px; }
	.sk-brand-band h2 { margin-top: 0; }
}


/* =====================================================================
   v6.0.31 — Logo bisa diklik menuju Beranda (permintaan teli): tautan
   .sk-logo-link membungkus logo di header dan lambang di band nama
   sekolah. (Perilaku header menempel/sticky saat digulir sudah ada
   sejak tema dasar dan terverifikasi hidup di situs live pada hari
   yang sama — tidak diubah.)
   ===================================================================== */
.sk-logo-link { display: inline-flex; align-items: center; justify-content: center; }
.sk-logo-link:hover { text-decoration: none; }