/*
Theme Name: WP-Sekolah by MakeNalar Project
Theme URI: https://makenalar.web.id
Author: MakeNalar Project
Author URI: https://makenalar.web.id
Description: Tema WordPress serbaguna untuk website sekolah (SD/SMP/SMA/sederajat) -- portal berita, profil sekolah, direktori guru & staff, galeri foto & video, ekstrakurikuler, bahan ajar, kalender akademik, dan lainnya, dengan tampilan modern, rapi, dan mudah dikelola tanpa plugin tambahan.
Version: 7.67
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: smpn21
Tags: education, blog, news, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

WP-Sekolah Theme is distributed under the terms of the GNU GPL v2 or later.

Built by MakeNalar Project.
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --c-primary: #3498db;
  --c-primary-dark: #006397;
  --c-primary-darker: #002d47;
  --c-primary-light: #eaf4fc;
  --c-secondary: #fc8f34;
  --c-secondary-dark: #944a00;
  --c-tertiary: #c48400;
  --c-success: #27ae60;
  --c-error: #ba1a1a;
  --c-border: #bfc7d2;
  --c-border-light: #e5e8ee;
  --c-outline: #707881;
  --c-gray: #bdc3c7;
  --c-surface: #f8f9fa;
  --c-surface-alt: #f1f4fa;
  --c-surface-container: #ebeef4;
  --c-white: #ffffff;
  --c-text: #2c3e50;
  --c-text-light: #3f4850;
  --c-text-muted: #6b7684;
  --c-footer-bg: #1f2937;
  --c-footer-text: #bdc3c7;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-pill: 9999px;

  --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container-max: 100%;
  --gutter: 24px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-primary-dark);
  color: #fff;
  padding: 10px 18px;
  z-index: 10000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .container { padding: 0 32px; }
}

img.alignleft { float: left; margin: 0 24px 16px 0; }
img.alignright { float: right; margin: 0 0 16px 24px; }
img.aligncenter { display: block; margin: 0 auto 16px; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--c-text-muted); padding: 6px 0; }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar {
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid #5dade2;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar__info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar__info span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__info .dashicons,
.topbar__info i { font-size: 13px; }
.topbar__info .topbar-hide-mobile { display: none; }
@media (min-width: 768px) {
  .topbar__info .topbar-hide-mobile { display: inline-flex; }
}
.topbar__social { display: flex; gap: 8px; }
.topbar__social a {
  width: 34px; height: 34px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: background .2s, color .2s, transform .2s;
}
.topbar__social a:hover { background: rgba(255,255,255,.22); color: var(--c-secondary); transform: translateY(-1px); }

/* =========================================================
   SITE HEADER / HERO
   ========================================================= */
.site-header { background: #fff; }
/* Interior-page branding row (header.php's non-front-page logo): the
   custom-logo theme support is flex-sized, so without an explicit cap here
   the raw uploaded image (e.g. 450x444) renders at full size and blows out
   the whole header on every single/page/archive template. */
.site-header .custom-logo-link { display: inline-flex; }
.site-header .custom-logo { max-height: 52px; width: auto; display: block; }

.hero {
  position: relative;
  background: var(--c-gray) center/cover no-repeat;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: rgba(0, 20, 35, 0.6);
}
/* Crossfade layer for the auto-rotating hero background (added by main.js
   only when several hero images are set). Sits above the base image but
   below the dark overlay and the content. */
.hero__fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero__fade.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__fade { transition: none; }
}
.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 900px) {
  .hero .container { flex-direction: row; justify-content: space-between; align-items: center; }
}

.hero__brand {
  flex: 1;
  color: #fff;
  text-align: center;
  opacity: .55;
  transition: opacity .4s ease, filter .4s ease;
}
.hero__brand:hover,
.hero .container.is-hover-brand .hero__brand { opacity: 1; filter: drop-shadow(0 0 14px rgba(0,0,0,.5)); }
.hero .container.is-hover-panel .hero__brand { opacity: .22; }
@media (min-width: 900px) { .hero__brand { text-align: left; } }
.hero__logo {
  height: 84px; width: 84px;
  object-fit: contain;
  margin: 0 auto 16px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
@media (min-width: 900px) { .hero__logo { margin: 0 0 16px; } }
.hero__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
@media (min-width: 900px) { .hero__title { font-size: 40px; } }
.hero__address {
  font-size: 13px;
  font-weight: 500;
  opacity: .85;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media (min-width: 900px) { .hero__address { font-size: 14px; justify-content: flex-start; } }
.hero__tagline { font-size: 16px; font-weight: 500; opacity: .92; }
@media (min-width: 900px) { .hero__tagline { font-size: 18px; } }

.hero__panel {
  width: 100%;
  max-width: 440px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: #fff;
  opacity: 1;
  transition: opacity .4s ease, transform .4s ease;
}
.hero .container.is-hover-brand .hero__panel { opacity: .22; }
.hero .container.is-hover-panel .hero__panel { opacity: 1; transform: scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.hero__principal { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hero__principal img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
  cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease, z-index .01s;
}
.hero__principal img:hover {
  transform: scale(2.4);
  z-index: 20;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.hero__principal h5 { font-size: 17px; font-weight: 700; }
.hero__principal p { font-size: 12px; opacity: .85; margin-top: 2px; }
.hero__quote {
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: #f1f4fa;
  padding-left: 14px;
  border-left: 2px solid var(--c-secondary);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--c-secondary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background .2s;
}
.hero__cta:hover { background: #e07b1f; color: #fff; }

/* =========================================================
   PRIMARY NAVIGATION
   ========================================================= */
.site-nav {
  background: var(--c-primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-sm);
}
.site-nav .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 52px;
}
.primary-menu {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
@media (min-width: 960px) { .primary-menu { display: flex; } }
.primary-menu > li { position: relative; }
.primary-menu > li > a,
.primary-menu > li > span,
.primary-menu > li > .nav-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 14px;
  transition: color .2s;
}
.primary-menu > li > span { cursor: default; }
.primary-menu > li > a:hover,
.primary-menu > li:hover > span,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a { color: var(--c-secondary); }
.primary-menu .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 220px;
  background: #fff;
  color: var(--c-text);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .18s ease;
  z-index: 50;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu li a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.primary-menu .sub-menu li a:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }
.primary-menu .menu-item-has-children > a::after,
.primary-menu .menu-item-has-children > span::after {
  font-family: 'FontAwesome';
  content: "\f107";
  font-size: 11px;
  margin-left: 2px;
}
.submenu-toggle { display: none; }

.site-nav__tools { display: flex; align-items: center; gap: 6px; }
.nav-search-toggle, .nav-mobile-toggle {
  background: none; border: 0; color: #fff; font-size: 16px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.nav-search-toggle:hover, .nav-mobile-toggle:hover { background: rgba(255,255,255,.15); }
.nav-mobile-toggle { display: inline-flex; }
@media (min-width: 960px) { .nav-mobile-toggle { display: none; } }

.mobile-menu {
  display: none;
  background: var(--c-primary-dark);
  padding: 8px 0 16px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { display: flex; flex-direction: column; }
.mobile-menu li { position: relative; }
.mobile-menu li a,
.mobile-menu li > span { display: block; padding: 12px 24px; color: #fff; font-weight: 600; font-size: 14px; border-top: 1px solid rgba(255,255,255,.12); cursor: default; }
.mobile-menu li > a { cursor: pointer; }
.mobile-menu li.menu-item-has-children > a,
.mobile-menu li.menu-item-has-children > span { padding-right: 48px; }
.mobile-menu .menu-item-has-children > a::after,
.mobile-menu .menu-item-has-children > span::after { content: none; }
/* Hover doesn't exist on touch, so the sub-menu is shown/hidden by
   toggling .is-open on the parent <li> (see main.js) instead of relying
   on the desktop-only :hover / :focus-within rule above. */
.mobile-menu .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border-radius: 0;
  background: rgba(0,0,0,.15);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.mobile-menu li.is-open > .sub-menu { max-height: 400px; }
.mobile-menu .sub-menu a { font-weight: 500; opacity: .9; padding-left: 40px; }
.mobile-menu .submenu-toggle {
  display: flex;
  position: absolute;
  right: 0; top: 0;
  width: 48px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; font-size: 13px;
  cursor: pointer;
  transition: transform .2s;
}
.mobile-menu li.is-open > .submenu-toggle { transform: rotate(180deg); }

.nav-search-form-wrap {
  display: none;
  position: absolute;
  right: 0; top: 100%;
  background: #fff;
  padding: 12px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  width: min(320px, 90vw);
  z-index: 45;
}
.nav-search-form-wrap.is-open { display: block; }
.nav-search-form-wrap .search-form { display: flex; gap: 8px; }
.nav-search-form-wrap input[type="search"] {
  flex: 1;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14px;
}
.nav-search-form-wrap button { background: var(--c-primary); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 0 14px; }

/* =========================================================
   SECTION TITLE (ribbon)
   ========================================================= */
.section-title {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 24px;
}
.section-title__label {
  background: var(--c-primary);
  color: #fff;
  padding: 9px 22px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--radius-sm) 20px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
/* Opt-in Title Case variant (template-parts/section-title.php 'case' => 'title'). */
.section-title__label--tc { text-transform: none; letter-spacing: .01em; }
.section-title__rule { flex: 1; border-bottom: 2px solid var(--c-primary); margin-bottom: 1px; }
.section-title__more {
  position: absolute;
  right: 0; bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
}
.section-title__more:hover { text-decoration: underline; }

/* Homepage: space consecutive sections apart, and a subtle "no data yet"
   line so an empty section still reads as its own block. */
.layout__content > .section-title:not(:first-child) { margin-top: 44px; }
.home-section-empty { color: var(--c-text-muted); font-size: 14px; padding: 8px 0 4px; margin: 0; }
.home-section-empty a { color: var(--c-primary); }

/* =========================================================
   HOMEPAGE SLIDER (headline + terbaru/populer list)
   ========================================================= */
.headline-slider { margin: 40px 0; }
.headline-slider__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-height: 460px;
}
@media (min-width: 860px) {
  /* Slide takes all remaining width; the "Terbaru / Populer" list is
     capped narrow so the headline image stays as large as possible. */
  .headline-slider__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); height: 520px; }
}
@media (min-width: 1200px) {
  .headline-slider__grid { height: 560px; }
}
.headline-main {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--c-border);
  min-height: 320px;
  height: 100%;
}
.headline-main__track { position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; }
/* One-directional horizontal slide ("swipe"), no cross-fade: the incoming
   slide travels in from the right, and the outgoing one -- tagged
   .is-leaving by main.js just for the length of the animation -- travels
   out to the left. Idle slides sit off-screen right and are clipped by
   .headline-main / .headline-main__track (both overflow:hidden). */
.headline-slide {
  position: absolute; inset: 0;
  z-index: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.headline-slide.is-active { visibility: visible; z-index: 3; transform: translateX(0); }
.headline-slide.is-leaving { visibility: visible; z-index: 2; transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) {
  .headline-slide { transition: none; }
}
.headline-slide img, .headline-slide__placeholder {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
  transition: transform 7s ease;
}
.headline-slide__placeholder { background: var(--c-gray); }
.headline-slide.is-active img { transform: scale(1.08); }
.headline-main__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.85); color: var(--c-text);
  display: flex; align-items: center; justify-content: center;
  z-index: 6; box-shadow: var(--shadow-sm);
  transition: opacity .2s, background .2s, color .2s;
}
/* Hover-to-reveal only makes sense on devices with a real pointer; touch
   devices can't hover, so the arrows must stay visible there or they're
   effectively undiscoverable. */
@media (hover: hover) and (pointer: fine) {
  .headline-main__arrow { opacity: 0; }
  .headline-main:hover .headline-main__arrow,
  .headline-main:focus-within .headline-main__arrow { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .headline-main__arrow { width: 34px; height: 34px; background: rgba(255,255,255,.75); }
}
.headline-main__arrow--prev { left: 14px; }
.headline-main__arrow--next { right: 14px; }
.headline-main__arrow:hover { background: var(--c-secondary); color: #fff; }
.headline-main__dots { position: absolute; bottom: 16px; right: 18px; z-index: 6; display: flex; gap: 2px; }
.headline-main__dots button {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.headline-main__dots button::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55); transition: background .2s, width .2s, border-radius .2s;
}
.headline-main__dots button.is-active::before { background: #fff; width: 20px; border-radius: 4px; }
.headline-main__badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; z-index: 3; }
.badge {
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0 8px 0 0;
  box-shadow: var(--shadow-sm);
}
.badge--accent { background: var(--c-secondary); }
.badge--success { background: var(--c-success); }
.headline-main__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  color: #fff;
  z-index: 2;
}
.headline-main__date { color: var(--c-secondary); font-weight: 700; font-size: 13px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.headline-main__title { font-size: 20px; font-weight: 700; line-height: 1.3; }
@media (min-width: 640px) { .headline-main__title { font-size: 26px; } }
.headline-main__title:hover { color: var(--c-secondary); }

.headline-list {
  display: none;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--c-border);
  border-left: 0;
}
@media (min-width: 860px) { .headline-list { display: flex; } }
.headline-list__tabs { display: flex; border-bottom: 1px solid var(--c-border); }
.headline-list__tabs button {
  flex: 1;
  background: none;
  border: 0;
  padding: 12px 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--c-text-muted);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.headline-list__tabs button.is-active { color: var(--c-primary); border-bottom: 2px solid var(--c-primary); background: #fff; margin-bottom: -1px; }
.headline-list__items { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
/* Only the title is a real <a>, stretched via ::after to cover the whole
   row (same pattern as .news-card__title) -- NOT the whole item wrapped
   in one <a>. LiteSpeed Cache's lazy-load injects a <noscript> fallback
   right after every <img>, and an <a> containing "<img><noscript>...
   </noscript><div>...</div>" makes some browsers' HTML parser hoist that
   trailing <div> out of the anchor entirely, breaking the layout. */
.headline-list__item { position: relative; cursor: pointer; display: flex; gap: 10px; }
.headline-list__thumb { flex-shrink: 0; }
.headline-list__item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.headline-list__item h5 {
  font-size: 12px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.headline-list__item h5 a { color: inherit; }
.headline-list__item h5 a::after { content: ''; position: absolute; inset: 0; }
.headline-list__item h5 a:hover { color: var(--c-secondary); }
.headline-list__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.headline-list__badges .badge { position: relative; z-index: 2; font-size: 8px; padding: 2px 6px; }

/* =========================================================
   MAIN LAYOUT (content + sidebar)
   ========================================================= */
.site-main-wrap { padding: 0 0 48px; }
.layout { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 992px) { .layout { flex-direction: row; align-items: flex-start; } }
.layout__content { flex: 1; min-width: 0; }
@media (min-width: 992px) {
  /* Wider content: it takes all remaining space while the sidebar is
     held to a compact fixed width (enough for a 300px ad + padding). */
  .layout--with-sidebar .layout__content { width: auto; }
  .layout--with-sidebar .layout__sidebar { flex: 0 0 auto; width: 26%; max-width: 340px; }
}
.layout__sidebar { display: flex; flex-direction: column; gap: 24px; width: 100%; }

/* =========================================================
   NEWS CARDS
   ========================================================= */
.news-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
/* Wider container (see --container-max) -> article listings run two per
   row from tablet up. */
@media (min-width: 700px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
.news-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: box-shadow .2s, transform .2s;
}
.news-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .13); transform: translateY(-2px); }
/* Without this, the generic .staff-filter category-filter script's
   [hidden] attribute has no visible effect: .news-card's own
   display:flex is equal-or-higher specificity than the UA stylesheet's
   [hidden]{display:none}, so author CSS silently wins and the "hidden"
   item keeps rendering. Same class of bug already fixed for
   .ekskul-card[hidden] earlier -- news-card just never had a filter
   applied to it directly until the Galeri video section needed one. */
.news-card[hidden] { display: none; }
/* Stretched-link: the title's <a> is the only real link, expanded via
   ::after to cover the whole card so the entire card is clickable
   without nesting invalid <a> elements inside each other. */
.news-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.news-card:hover .news-card__go { background: var(--c-secondary-dark); }
/* Vertical card: image on top, body below (matches the reference). */
.news-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-surface);
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .news-card__media img { transform: scale(1.05); }

/* Row of category pills inside the body (above the title). */
.news-card__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.news-card__cat-pill {
  position: relative;
  z-index: 2;                 /* stays clickable above the stretched title link */
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
}
.news-card__cat-pill:hover { background: var(--c-primary-dark); color: #fff; }

.news-card__date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-text-muted);
}
.news-card__date i { font-size: 11px; }

.news-card__cat {
  position: absolute; top: 10px; left: 10px;
  background: var(--c-secondary);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
}
/* Used when a card has no thumbnail to overlay onto (e.g. mixed search
   results): same badge, but flows inline above the title instead. */
.news-card__cat--static {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.news-card__body { flex: 1; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.news-card__title {
  font-size: 19px; font-weight: 800; line-height: 1.3; margin: 0; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__title a { color: inherit; }
.news-card:hover .news-card__title { color: var(--c-primary-dark); }
.news-card__excerpt {
  font-size: 14px; line-height: 1.6; color: var(--c-text-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.news-card__meta-info { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text-muted); flex-wrap: wrap; }
.news-card__go {
  background: var(--c-secondary);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.pagination-nav { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pagination-nav a, .pagination-nav span {
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  padding: 0 10px;
}
.pagination-nav .current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination-nav a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* =========================================================
   GALLERY GRID
   ========================================================= */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-grid__item {
  display: block;
  height: 130px;
  overflow: hidden;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  position: relative;
}
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s, opacity .3s; opacity: .92; }
.photo-grid__item:hover img { transform: scale(1.1); opacity: 1; }

.photo-grid__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 18px 8px 6px;
}

/* =========================================================
   VIDEO SECTION
   ========================================================= */

/* Homepage "VIDEO TERBARU": a uniform 6-card grid (separate from the
   1-big-plus-list .video-grid used elsewhere). */
.video-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (min-width: 992px) { .video-cards { grid-template-columns: repeat(3, 1fr); } }
.video-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.video-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.video-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-card__media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s, transform .3s; }
.video-card:hover .video-card__media img { opacity: 1; transform: scale(1.04); }
.video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card__play i {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--c-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  padding-left: 3px;
  transition: background .2s, color .2s;
}
.video-card:hover .video-card__play i { background: var(--c-secondary); color: #fff; }
.video-card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.video-card__title { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--c-text); }
.video-card:hover .video-card__title { color: var(--c-primary-dark); }
.video-card__date { display: block; font-size: 12px; color: var(--c-text-muted); }

.video-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); margin-bottom: 40px; }
@media (min-width: 992px) { .video-grid { grid-template-columns: 2fr 1fr; } }
.video-main {
  position: relative;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
}
.video-main img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.video-main__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-main__play span {
  width: 64px; height: 64px;
  background: var(--c-secondary);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow-md);
}
.video-main__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  color: #fff; font-weight: 700; font-size: 17px;
}
.video-list { display: flex; flex-direction: column; gap: 16px; }
.video-list__item {
  display: flex; gap: 12px; align-items: center;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: #fff;
  transition: background .2s;
}
.video-list__item:hover { background: var(--c-surface-alt); }
.video-list__thumb { width: 96px; height: 64px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: #ddd; }
.video-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-list__thumb::after {
  content: "\f04b";
  font-family: 'FontAwesome';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px;
  background: rgba(0,0,0,.25);
}
.video-list__title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.video-list__date { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; }

/* =========================================================
   AD SLOTS (Iklan)
   ========================================================= */
.ad-slot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ad-ratio, 300 / 250);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 auto;
}
.ad-slot--sidebar { max-width: 336px; margin: 0 auto; }
.ad-slot--dalam_artikel { max-width: 336px; margin: 24px auto; }
.ad-slot--banner_beranda { max-width: 100%; margin: 0 0 32px; }
.ad-slot a { display: block; width: 100%; height: 100%; }
.ad-slot img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
}
.ad-slot__label {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 2;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* =========================================================
   SIDEBAR WIDGETS
   ========================================================= */
.widget {
  background: #fff;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.widget__title {
  background: var(--c-primary);
  color: #fff;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid var(--c-primary-dark);
}
.widget__body { padding: 16px 20px; }

/* Widgets added via Appearance > Widgets (classic mode) render their
   content as direct children of .widget with no .widget__body wrapper,
   so the body would sit flush to the card edge. Pad those children to
   match the hand-built .widget > .widget__body widgets and the block
   widgets (.widget_block, padded separately below). */
.widget:not(.widget_block) > :not(.widget__title):not(.widget__body) {
  padding-left: 20px;
  padding-right: 20px;
}
.widget:not(.widget_block) > :not(.widget__title):not(.widget__body):first-child,
.widget:not(.widget_block) > .widget__title + :not(.widget__body) {
  padding-top: 16px;
}
.widget:not(.widget_block) > :not(.widget__title):not(.widget__body):last-child {
  padding-bottom: 16px;
}

.widget ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.widget ul li a {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--c-text-light);
}
.widget ul li a:before {
  content: "\f0da";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--c-secondary);
  font-size: 12px;
  flex-shrink: 0;
}
.widget ul li a:hover { color: var(--c-secondary); }

.widget_search .search-form { display: flex; gap: 8px; }
.widget_search input[type="search"] { flex: 1; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; }
.widget_search button { background: var(--c-primary); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 0 14px; }

.widget_recent_entries li, .widget_categories li, .widget_archive li, .widget_pages li, .widget_meta li, .widget_nav_menu li {
  padding-bottom: 8px; border-bottom: 1px dashed var(--c-border-light);
}
.widget_recent_entries li:last-child, .widget_categories li:last-child, .widget_archive li:last-child { border-bottom: 0; }

/* Classic Tag Cloud widget (<div class="tagcloud">) -- identical pills to
   the .wp-block-tag-cloud block version further down. */
.widget_tag_cloud .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.widget_tag_cloud .tagcloud a {
  background: var(--c-surface-container);
  color: var(--c-text-light) !important;
  font-size: 12px !important;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.widget_tag_cloud .tagcloud a:hover { background: var(--c-secondary); color: #fff !important; }

/* Classic Recent Comments widget (<ul id="recentcomments">) -- dashed
   rows like the other list widgets, no caret bullets (each row has two
   inline links), author link in the primary colour. */
.widget_recent_comments ul { gap: 0; }
#recentcomments li,
.widget_recent_comments li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-muted);
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-border-light);
}
#recentcomments li:first-child,
.widget_recent_comments li:first-child { padding-top: 0; }
#recentcomments li:last-child,
.widget_recent_comments li:last-child { border-bottom: 0; padding-bottom: 0; }
/* #recentcomments in the selectors so these win over .widget ul li a
   (equal class count, higher type count) -- core and the theme's
   hand-built widget both use <ul id="recentcomments">. */
#recentcomments li a,
.widget_recent_comments ul li a {
  display: inline;
  font-weight: 600;
  color: var(--c-text-light);
}
#recentcomments li a:hover,
.widget_recent_comments ul li a:hover { color: var(--c-secondary); }
#recentcomments li a:before,
.widget_recent_comments ul li a:before { content: none; }
.widget_recent_comments .comment-author-link,
.widget_recent_comments .comment-author-link a { color: var(--c-primary); font-weight: 700; }

/* WP core calendar widget styling */
.widget_calendar table { width: 100%; border-collapse: collapse; text-align: center; font-size: 12px; }
.widget_calendar caption { background: var(--c-surface-alt); padding: 8px; font-weight: 600; border: 1px solid var(--c-border-light); }
.widget_calendar th { padding: 8px 0; font-weight: 700; border: 1px solid var(--c-border-light); background: #fff; }
.widget_calendar td { padding: 8px 0; border: 1px solid var(--c-border-light); }
.widget_calendar td#today { background: var(--c-primary-light); font-weight: 700; color: var(--c-primary-dark); }
.widget_calendar td a { color: var(--c-primary); font-weight: 700; }
.widget_calendar tfoot td { border: 0; padding-top: 8px; font-weight: 600; }
.widget_calendar tfoot #next { text-align: right; }
.widget_calendar tfoot a { color: var(--c-primary); }

.archive-year { font-weight: 700; font-size: 13px; color: var(--c-primary-dark); margin: 12px 0 6px; text-transform: uppercase; }
.archive-year:first-child { margin-top: 0; }

/* =========================================================
   WORDPRESS CORE + BLOCK WIDGETS (uniform look)
   Modern WordPress adds "Archives", "Categories", "Latest
   Posts", etc. as *block* widgets (.widget_block / .wp-block-*)
   whose markup differs from classic widgets. These rules make
   every WP-generated widget match the theme's .widget card:
   coloured title bar, boxed body, caret bullets, dashed rows.
   ========================================================= */

/* Block widgets have no .widget__body wrapper -- content sits
   flush against the card. Restore the same inner padding. Scoped to
   .widget.widget_block so the footer widget area (.footer-col.widget_block)
   keeps its own dark styling. */
.widget.widget_block { padding: 16px 20px; }
.widget.widget_block > :first-child { margin-top: 0; }
.widget.widget_block > :last-child { margin-bottom: 0; }

/* A leading heading block becomes the coloured title bar that
   classic widgets get from .widget__title. */
.widget.widget_block > h1:first-child,
.widget.widget_block > h2:first-child,
.widget.widget_block > h3:first-child,
.widget.widget_block > h4:first-child,
.widget.widget_block > .wp-block-heading:first-child,
.widget.widget_block > .widget-title:first-child,
.widget.widget_block > .wp-block-group:first-child > .wp-block-heading:first-child {
  margin: -16px -20px 14px;
  padding: 10px 20px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--c-primary-dark);
}
.widget.widget_block > .wp-block-group:first-child { margin: -16px -20px 0; padding: 0; }
.widget.widget_block > .wp-block-group:first-child > :not(.wp-block-heading) { margin-left: 20px; margin-right: 20px; }
.widget.widget_block > .wp-block-group:first-child > .wp-block-heading:first-child { margin-top: 0; }

/* Secondary headings / paragraphs inside a block widget. */
.widget.widget_block .wp-block-heading { font-size: 14px; font-weight: 700; color: var(--c-text); margin: 14px 0 8px; }
.widget.widget_block p { font-size: 14px; line-height: 1.6; color: var(--c-text-light); margin: 0 0 10px; }
.widget.widget_block p:last-child { margin-bottom: 0; }
.widget.widget_block p a { color: var(--c-primary); text-decoration: underline; }

/* Block lists reuse the classic list treatment. */
.wp-block-archives,
.wp-block-categories,
.wp-block-page-list,
.wp-block-latest-posts,
.wp-block-rss,
.wp-block-latest-comments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-latest-comments { display: flex; flex-direction: column; gap: 8px; }

/* Contextual classnames WordPress adds to block widgets
   (widget_archive, widget_categories, ...) already match the
   existing dashed-row rules; extend the "last row, no border"
   reset to the block wrappers too. */
.wp-block-archives li:last-child,
.wp-block-categories li:last-child,
.wp-block-page-list li:last-child,
.widget_pages li:last-child,
.widget_meta li:last-child,
.widget_nav_menu li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Category / archive post counts: push to the right, muted. */
.widget_categories li,
.widget_archive li,
.wp-block-categories li,
.wp-block-archives li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.widget_categories li a,
.widget_archive li a,
.wp-block-categories li a,
.wp-block-archives li a { flex: 1; }
.wp-block-categories__post-count,
.wp-block-archives li > span,
.widget_categories .count,
.widget_archive .count {
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 600;
}

/* Nested category / page children. */
.widget li .children,
.widget li .sub-menu,
.wp-block-categories li ul,
.wp-block-page-list .submenu-container,
.wp-block-page-list__submenu {
  width: 100%;
  margin: 8px 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Current item highlight. */
.widget .current-cat > a,
.widget .current-cat-ancestor > a,
.widget .current_page_item > a,
.widget .current-menu-item > a,
.wp-block-navigation-item.current-menu-item > a,
.wp-block-pages-list__item.current-menu-item > a { color: var(--c-primary-dark); font-weight: 800; }

/* Dropdown (Display as dropdown) for archives / categories. */
.widget select {
  width: 100%;
  max-width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.widget select:focus { border-color: var(--c-primary); outline: 2px solid var(--c-primary-light); }
.wp-block-categories-dropdown,
.wp-block-archives-dropdown { margin: 0; }

/* Latest Posts block. */
.wp-block-latest-posts:not(.is-grid) > li {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--c-border-light);
}
.wp-block-latest-posts:not(.is-grid) > li:last-child { border-bottom: 0; padding-bottom: 0; }
.wp-block-latest-posts.is-grid { gap: 14px; }
.wp-block-latest-posts li a:before,
.wp-block-rss li a:before,
.widget_rss li a:before { content: none; }
.wp-block-latest-posts__post-title { font-weight: 700; font-size: 14px; color: var(--c-text-light); }
.wp-block-latest-posts__post-title:hover { color: var(--c-secondary); }
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date,
.widget_recent_entries .post-date {
  display: block;
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin-top: 6px;
}
.wp-block-latest-posts__featured-image img { border-radius: var(--radius-sm); margin-bottom: 6px; }

/* Latest Comments block. */
.wp-block-latest-comments__comment {
  font-size: 13px;
  line-height: 1.55;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--c-border-light);
}
.wp-block-latest-comments__comment:last-child { border-bottom: 0; padding-bottom: 0; }
.wp-block-latest-comments__comment-meta { font-weight: 600; color: var(--c-text-light); }
.wp-block-latest-comments__comment-author,
.wp-block-latest-comments__comment-link { color: var(--c-primary); font-weight: 700; }
.wp-block-latest-comments__comment-date { display: block; font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.wp-block-latest-comments__comment-excerpt p { margin: 6px 0 0; font-size: 13px; color: var(--c-text-muted); }
.wp-block-latest-comments__comment-avatar { border-radius: var(--radius-sm); }

/* RSS block. */
.wp-block-rss__item {
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--c-border-light);
}
.wp-block-rss__item:last-child { border-bottom: 0; padding-bottom: 0; }
.wp-block-rss__item-title a { font-weight: 700; font-size: 14px; color: var(--c-text-light); }
.wp-block-rss__item-title a:hover { color: var(--c-secondary); }
.wp-block-rss__item-publish-date,
.wp-block-rss__item-author { display: inline-block; font-size: 12px; color: var(--c-text-muted); margin-top: 4px; }
.wp-block-rss__item-excerpt { font-size: 13px; line-height: 1.6; color: var(--c-text-muted); margin-top: 4px; }

/* Tag Cloud block -- mirror .widget_tag_cloud .tagcloud a. */
.wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-block-tag-cloud a {
  background: var(--c-surface-container);
  color: var(--c-text-light) !important;
  font-size: 12px !important;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.wp-block-tag-cloud a:hover { background: var(--c-secondary); color: #fff !important; }

/* Search block -- mirror .widget_search. */
.wp-block-search__label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.wp-block-search .wp-block-search__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
}
.wp-block-search .wp-block-search__button {
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.wp-block-search .wp-block-search__button:hover { background: var(--c-primary-dark); }
.wp-block-search .wp-block-search__button svg { fill: currentColor; }

/* Calendar block -- mirror .widget_calendar. */
.wp-block-calendar table { width: 100%; border-collapse: collapse; text-align: center; font-size: 12px; }
.wp-block-calendar caption { background: var(--c-surface-alt); padding: 8px; font-weight: 600; border: 1px solid var(--c-border-light); }
.wp-block-calendar th { padding: 8px 0; font-weight: 700; border: 1px solid var(--c-border-light); background: #fff; }
.wp-block-calendar td { padding: 8px 0; border: 1px solid var(--c-border-light); }
.wp-block-calendar tbody td#today { background: var(--c-primary-light); font-weight: 700; color: var(--c-primary-dark); }
.wp-block-calendar a { color: var(--c-primary); font-weight: 700; }
.wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; }
.wp-calendar-nav a { color: var(--c-primary); font-weight: 600; }
.wp-calendar-nav .pad { display: none; }

/* Block buttons that can land in a widget. */
.widget .wp-block-button__link,
.widget .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-weight: 700;
  font-size: 13px;
}
.widget .wp-block-button__link:hover,
.widget .wp-element-button:hover { background: var(--c-primary-dark); color: #fff; }

/* ---------- Navigation Menu widget (classic + block) ---------- */
.widget_nav_menu .menu,
.widget_nav_menu ul { gap: 0; }
.widget_nav_menu li,
.wp-block-navigation .wp-block-navigation-item {
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-border-light);
}
.widget_nav_menu li:first-child { padding-top: 0; }
.widget_nav_menu > div > ul > li:last-child,
.widget_nav_menu > ul > li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget_nav_menu .sub-menu,
.wp-block-navigation__submenu-container {
  margin: 8px 0 0 14px;
  border-top: 1px dashed var(--c-border-light);
  padding-top: 8px;
}
.widget_nav_menu .sub-menu li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget_nav_menu .sub-menu a { font-size: 13px; font-weight: 500; }
.widget_nav_menu .current-menu-item > a,
.widget_nav_menu .current-menu-ancestor > a,
.wp-block-navigation .current-menu-item > a { color: var(--c-primary-dark); font-weight: 800; }

/* ---------- Text & Custom HTML widgets ---------- */
.textwidget,
.custom-html-widget { font-size: 14px; line-height: 1.7; color: var(--c-text-light); }
.textwidget > :first-child,
.custom-html-widget > :first-child { margin-top: 0; }
.textwidget > :last-child,
.custom-html-widget > :last-child { margin-bottom: 0; }
.textwidget p,
.custom-html-widget p { margin: 0 0 10px; }
.textwidget a,
.custom-html-widget a { color: var(--c-primary); text-decoration: underline; display: inline; }
.textwidget a:before,
.custom-html-widget a:before { content: none; }
.textwidget h1, .textwidget h2, .textwidget h3, .textwidget h4, .textwidget h5, .textwidget h6,
.custom-html-widget h1, .custom-html-widget h2, .custom-html-widget h3,
.custom-html-widget h4, .custom-html-widget h5, .custom-html-widget h6 {
  font-size: 15px; font-weight: 700; color: var(--c-text); margin: 14px 0 8px;
}
.textwidget ul, .textwidget ol,
.custom-html-widget ul, .custom-html-widget ol {
  display: block; list-style: revert; padding-left: 20px; margin: 10px 0;
}
.textwidget li, .custom-html-widget li {
  display: list-item; margin-bottom: 4px; border: 0; padding: 0;
}
.textwidget img, .custom-html-widget img {
  max-width: 100%; height: auto; border-radius: var(--radius-sm);
}
.textwidget blockquote,
.custom-html-widget blockquote {
  border-left: 3px solid var(--c-secondary); padding-left: 14px;
  font-style: italic; color: var(--c-text-muted); margin: 12px 0;
}
.textwidget table,
.custom-html-widget table { width: 100%; border-collapse: collapse; font-size: 13px; }
.textwidget table th, .textwidget table td,
.custom-html-widget table th, .custom-html-widget table td { border: 1px solid var(--c-border-light); padding: 6px 8px; }

/* ---------- Classic RSS widget -- mirror .wp-block-rss__item ---------- */
.widget_rss ul { gap: 0; }
.widget_rss li {
  padding: 10px 0; border-bottom: 1px dashed var(--c-border-light);
}
.widget_rss li:first-child { padding-top: 0; }
.widget_rss li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget_rss .rsswidget { font-weight: 700; font-size: 14px; color: var(--c-text-light); }
.widget_rss .rsswidget:hover { color: var(--c-secondary); }
.widget_rss .rss-date {
  display: block; font-size: 12px; color: var(--c-text-muted); margin-top: 2px;
}
.widget_rss .rssSummary {
  font-size: 13px; line-height: 1.6; color: var(--c-text-muted); margin-top: 4px;
}
.widget_rss cite {
  display: block; font-size: 12px; color: var(--c-text-muted);
  font-style: italic; margin-top: 4px;
}

/* ---------- Media widgets (Image / Gallery / Audio / Video) ---------- */
.widget_media_image img,
.widget_media_gallery img,
.widget_media_video video,
.widget_media_video .wp-video {
  max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block;
}
.widget_media_image .widget-image-link { display: block; }
.widget .wp-caption-text,
.widget figcaption {
  font-size: 12px; color: var(--c-text-muted); margin-top: 6px; text-align: center;
}
.widget_media_gallery .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.widget_media_gallery .gallery-item { width: auto !important; margin: 0 !important; }

/* =========================================================
   POST / PAGE CONTENT
   ========================================================= */
.article-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 28px; }
@media (max-width: 640px) { .article-card { padding: 18px; } }

.entry-header { margin-bottom: 20px; }
.entry-title { font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--c-text); margin: 10px 0 16px; }
@media (min-width: 768px) { .entry-title { font-size: 32px; } }
.entry-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--c-border-light); }
.entry-meta a { color: var(--c-primary); font-weight: 600; }
.entry-meta__author { display: flex; align-items: center; gap: 10px; }
.entry-meta__author img { border-radius: 50%; }
.entry-meta__author a { font-size: 14px; font-weight: 700; color: var(--c-text); display: block; }
.entry-meta__author a:hover { color: var(--c-primary); }
.entry-meta__author span { font-size: 12px; color: var(--c-text-muted); display: block; margin-top: 1px; }
.entry-meta__views { font-size: 13px; color: var(--c-text-muted); display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.entry-thumbnail { margin-bottom: 24px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--c-border); }
.entry-content { font-size: 16px; line-height: 1.8; color: var(--c-text-light); }
.entry-content > * + * { margin-top: 18px; }
.entry-content h2 { font-size: 22px; font-weight: 700; color: var(--c-text); }
.entry-content h3 { font-size: 19px; font-weight: 700; color: var(--c-text); }
.entry-content a { color: var(--c-primary); text-decoration: underline; }
.entry-content blockquote { border-left: 3px solid var(--c-secondary); padding-left: 18px; font-style: italic; color: var(--c-text-muted); }
.entry-content ul, .entry-content ol { padding-left: 22px; list-style: revert; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content table th, .entry-content table td { border: 1px solid var(--c-border-light); padding: 8px 10px; }
.entry-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-border-light); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-tags a {
  background: var(--c-surface-container); color: var(--c-text-light);
  font-size: 12px; padding: 5px 10px; border-radius: var(--radius-sm);
}
.entry-tags a:hover { background: var(--c-secondary); color: #fff; }

.share-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.share-buttons__label { font-size: 13px; font-weight: 700; color: var(--c-text); margin-right: 4px; }
.share-buttons__btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--c-surface-container); color: var(--c-text-light);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: background .15s, color .15s;
}
.share-buttons__btn--whatsapp:hover { background: #25d366; color: #fff; }
.share-buttons__btn--facebook:hover { background: #1877f2; color: #fff; }
.share-buttons__btn--twitter:hover { background: #14171a; color: #fff; }
.share-buttons__btn--copy:hover { background: var(--c-primary); color: #fff; }

.related-posts { margin-top: 32px; }

/* .nav-previous/.nav-next (not the nested <a>) are the flex container's
   direct children, so flex:1 belongs on them — putting it on the <a>
   instead (as before) had no effect and left an empty side collapsed to
   near-zero width whenever only one of prev/next existed. */
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 32px; }
.post-nav .nav-previous, .post-nav .nav-next { flex: 1 1 240px; }
.post-nav a {
  display: block; height: 100%; background: #fff; border: 2px solid var(--c-border); border-radius: var(--radius-md);
  padding: 16px 18px; transition: border-color .15s, box-shadow .15s;
}
.post-nav a:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.post-nav .nav-next { text-align: right; }
.post-nav-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--c-primary); margin-bottom: 8px;
}
.post-nav .nav-next .post-nav-label { justify-content: flex-end; }
.post-nav-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; font-weight: 600; color: var(--c-text); line-height: 1.4;
}

/* Comments */
.comments-area { margin-top: 40px; }
.comments-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.comment-list { display: flex; flex-direction: column; gap: 16px; }
.comment-body { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--radius-sm); padding: 16px; }
.comment-author { font-weight: 700; font-size: 14px; }
.comment-meta { font-size: 12px; color: var(--c-text-muted); margin-bottom: 8px; }
/* The reply form itself (comment_form()'s default markup) -- previously
   only the inputs/textarea/submit button were styled, leaving the
   surrounding WordPress-generated text (title, "logged in as" notice,
   required-fields notice, field labels) completely bare/unstyled. */
.comment-respond { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--radius-sm); padding: 20px 24px; margin-top: 24px; }
.comment-reply-title { font-size: 18px; font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.comment-reply-title small { font-weight: 500; font-size: 13px; margin-left: 8px; }
.comment-reply-title small a { color: var(--c-primary); }
.logged-in-as, .comment-notes { font-size: 13px; color: var(--c-text-muted); margin-bottom: 16px; }
.logged-in-as a { color: var(--c-primary); }
.comment-notes .required, .comment-form label .required { color: var(--c-error); }
.comment-form p { margin-bottom: 4px; }
.comment-form label { display: block; font-weight: 600; font-size: 14px; color: var(--c-text); margin-bottom: 6px; }
.comment-form input, .comment-form textarea { width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
.comment-form textarea { min-height: 120px; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-muted); }
.comment-form .comment-form-cookies-consent input { width: auto; margin: 0; }
.comment-form .form-submit input { width: auto; background: var(--c-primary); color: #fff; font-weight: 700; padding: 10px 24px; cursor: pointer; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14px;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn--outline { background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: #fff; }
.btn--accent { background: var(--c-secondary); color: #fff; }
.btn--accent:hover { background: var(--c-secondary-dark); color: #fff; }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb { font-size: 13px; color: var(--c-text-muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--c-primary); }
.breadcrumb .sep { margin: 0 6px; }

/* =========================================================
   404 / NO RESULTS
   ========================================================= */
.no-results { text-align: center; padding: 60px 20px; background: #fff; border: 2px dashed var(--c-border); border-radius: var(--radius-sm); }
.no-results .icon { font-size: 48px; color: var(--c-primary); margin-bottom: 16px; }
.no-results h1, .no-results h2 { font-size: 24px; margin-bottom: 10px; }
.no-results p { color: var(--c-text-muted); margin-bottom: 20px; }

/* =========================================================
   STATIC PAGE HERO (Profil, Visi Misi, Kontak, Direktori)
   ========================================================= */
.page-hero {
  background: var(--c-primary-dark) center/cover no-repeat;
  color: #fff;
  padding: 48px 0;
  position: relative;
  margin-bottom: 40px;
}
.page-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 30, 50, .55); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: 30px; font-weight: 700; margin-bottom: 6px; }
.page-hero p { font-size: 15px; opacity: .9; }
.page-hero--plain { background-color: var(--c-primary); background-image: none !important; }
.page-hero--plain::before { display: none; }

.page-heading { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.page-heading h1 { font-size: 30px; font-weight: 700; color: var(--c-text); margin-bottom: 10px; }
.page-heading h1 i { color: var(--c-primary); margin-right: 8px; }
.page-heading p { font-size: 15px; color: var(--c-text-muted); }

.info-list { display: flex; flex-direction: column; gap: 12px; }
.info-list li { display: flex; gap: 10px; font-size: 14px; color: var(--c-text-light); align-items: flex-start; }
.info-list li i { color: var(--c-secondary); margin-top: 3px; }

/* =========================================================
   PROFIL SEKOLAH
   ========================================================= */
.profil-layout { display: flex; flex-direction: column; gap: 32px; padding-bottom: 40px; }
@media (min-width: 992px) { .profil-layout { flex-direction: row; align-items: flex-start; } }
.profil-nav { width: 100%; flex-shrink: 0; }
@media (min-width: 992px) { .profil-nav { width: 260px; position: sticky; top: 90px; } }
.profil-nav > div { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 16px; }
.profil-nav h3 { font-size: 16px; font-weight: 700; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--c-border-light); }
.profil-nav nav { display: flex; flex-direction: column; gap: 4px; }
.profil-nav nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--c-text-light); }
.profil-nav nav a:hover { background: var(--c-surface-alt); color: var(--c-primary-dark); }
.profil-nav nav a.is-active { background: var(--c-primary-light); color: var(--c-primary-dark); }

.profil-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.profil-intro { padding-bottom: 24px; border-bottom: 1px solid var(--c-border-light); }
.profil-intro h1 { font-size: 30px; font-weight: 700; color: var(--c-text); margin-bottom: 12px; }
.profil-intro p { font-size: 16px; color: var(--c-text-muted); max-width: 65ch; }

.profil-section { scroll-margin-top: 100px; }
.profil-section__title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.profil-section__title h2 { font-size: 22px; font-weight: 700; color: var(--c-text); }
.profil-section__icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--c-primary-light); color: var(--c-primary-dark);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.profil-section__icon--accent { background: #fdecd8; color: var(--c-tertiary); }
.profil-section__icon--soft { background: #ffe9d6; color: var(--c-secondary-dark); }

.profil-sejarah { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .profil-sejarah { padding: 32px; } }

.profil-sejarah__figure { margin: 0; }
.profil-sejarah__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); }
.profil-sejarah__figure figcaption { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--c-primary); font-size: 13px; line-height: 1.55; color: var(--c-text-muted); }

.profil-sejarah__text { max-width: 72ch; }
.profil-sejarah__hint { margin: 0; color: var(--c-text-muted); font-style: italic; }

/* Profil / Selayang Pandang -- plain content page */
.profil-figure { margin: 0 0 24px; }
.profil-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--c-border); }
.profil-figure figcaption { margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--c-primary); font-size: 13px; line-height: 1.55; color: var(--c-text-muted); }
.profil-filosofi-list { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-border-light); }
.profil-filosofi-list h2 { font-size: 20px; font-weight: 700; color: var(--c-text); margin-bottom: 14px; }
.profil-filosofi-list ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.profil-filosofi-list li { font-size: 15px; line-height: 1.65; color: var(--c-text-light); }
.profil-filosofi-list li strong { color: var(--c-text); }
.profil-sejarah__text p { margin-bottom: 1em; }
.profil-sejarah__text p:last-child { margin-bottom: 0; }
.profil-sejarah__text h3 { margin: 32px 0 14px; padding-bottom: 8px; font-size: 17px; color: var(--c-primary-dark); border-bottom: 2px solid var(--c-primary-light); }
.profil-sejarah__text h3:first-child { margin-top: 0; }

/* "Identitas Singkat Sekolah" key/value card */
.profil-sejarah__text .profil-identitas { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--c-border-light); border-radius: var(--radius-md); overflow: hidden; }
.profil-sejarah__text .profil-identitas li { display: grid; grid-template-columns: 190px 1fr; align-items: baseline; gap: 4px 18px; padding: 11px 16px; font-size: 14px; line-height: 1.5; }
.profil-sejarah__text .profil-identitas li + li { border-top: 1px solid var(--c-border-light); }
.profil-sejarah__text .profil-identitas li:nth-child(odd) { background: var(--c-surface-alt); }
.profil-sejarah__text .profil-identitas strong { font-weight: 600; color: var(--c-text); }
.profil-sejarah__text .profil-identitas span { color: var(--c-text-light); }
@media (max-width: 560px) { .profil-sejarah__text .profil-identitas li { grid-template-columns: 1fr; gap: 2px; } }

.profil-filosofi { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .profil-filosofi { grid-template-columns: 260px 1fr; align-items: start; } }
.profil-filosofi__logo {
  background: var(--c-surface-container); border: 1px solid var(--c-border); border-radius: var(--radius-md);
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden;
}
@media (min-width: 768px) { .profil-filosofi__logo { position: sticky; top: 100px; } }
.profil-filosofi__logo img { max-width: 70%; max-height: 70%; object-fit: contain; }
.profil-filosofi__logo i { font-size: 64px; color: var(--c-border); }

.profil-filosofi__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; }
.profil-filosofi__item {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.profil-filosofi__item:nth-child(3n+2) { border-left-color: var(--c-secondary); }
.profil-filosofi__item:nth-child(3n) { border-left-color: var(--c-tertiary); }
.profil-filosofi__num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  background: var(--c-primary-light); color: var(--c-primary-dark);
}
.profil-filosofi__item:nth-child(3n+2) .profil-filosofi__num { background: #fdecd8; color: var(--c-secondary-dark); }
.profil-filosofi__item:nth-child(3n) .profil-filosofi__num { background: #ffe9d6; color: var(--c-tertiary); }
.profil-filosofi__body { min-width: 0; }
.profil-filosofi__body h4 { font-size: 15px; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.profil-filosofi__body p { font-size: 14px; color: var(--c-text-muted); line-height: 1.6; }

.fasilitas-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .fasilitas-grid { grid-template-columns: repeat(3, 1fr); } }
.fasilitas-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .2s; }
.fasilitas-card:hover { box-shadow: var(--shadow-md); }
.fasilitas-card__media { aspect-ratio: 4/3; overflow: hidden; border-bottom: 1px solid var(--c-border); }
.fasilitas-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fasilitas-card__body { padding: 16px; }
.fasilitas-card__label { display: inline-block; background: var(--c-surface-container); color: var(--c-text-light); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.fasilitas-card__body h3 { font-size: 16px; font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.fasilitas-card__body p { font-size: 13px; color: var(--c-text-muted); line-height: 1.6; }

/* =========================================================
   VISI & MISI
   ========================================================= */
.vm-quote-card {
  background: #fff; border: 1px solid var(--c-border); border-left: 6px solid var(--c-primary);
  border-radius: var(--radius-md); padding: 32px;
}
.vm-quote-card h2 { font-size: 24px; font-weight: 700; color: var(--c-primary-dark); margin-bottom: 16px; }
.vm-quote-card blockquote { border-left: 3px solid var(--c-secondary); padding-left: 18px; font-size: 18px; font-style: italic; color: var(--c-text-light); line-height: 1.7; }
.vm-empty { color: var(--c-text-muted); font-style: italic; }

.vm-visi-list { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--c-border); display: flex; flex-direction: column; gap: 10px; }
.vm-visi-item { display: flex; gap: 14px; align-items: flex-start; }
.vm-visi-item__number {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; background: var(--c-primary); color: #fff;
}
.vm-visi-item p { font-size: 15px; color: var(--c-text-light); line-height: 1.65; padding-top: 3px; }

.vm-stack { display: flex; flex-direction: column; gap: 36px; padding-bottom: 40px; }
.vm-section { min-width: 0; }

.vm-misi-list { display: flex; flex-direction: column; gap: 14px; }
.vm-misi-item { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 18px 20px; }
.vm-misi-item__number {
  width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--c-primary-light); color: var(--c-primary-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.vm-misi-item p { font-size: 15px; color: var(--c-text-light); line-height: 1.6; padding-top: 6px; }

/* Tujuan Sekolah -- daftar bertingkat dari editor (boleh tempel dari Word) */
.vm-tujuan { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 24px 28px; }
.vm-tujuan > *:first-child { margin-top: 0; }
.vm-tujuan ol, .vm-tujuan ul { padding-left: 26px; margin: 10px 0; }
.vm-tujuan ol { list-style: decimal; }
.vm-tujuan ol ol { list-style: lower-alpha; }
.vm-tujuan ol ol ol { list-style: lower-roman; }
.vm-tujuan ul { list-style: disc; }
.vm-tujuan ul ul { list-style: circle; }
.vm-tujuan li { margin: 6px 0; line-height: 1.7; }
.vm-tujuan > ol > li { margin: 12px 0; font-weight: 600; color: var(--c-text); }
.vm-tujuan > ol > li > ol li,
.vm-tujuan > ol > li > ul li { font-weight: 400; color: var(--c-text-light); }
.vm-tujuan p { margin: 0 0 10px; }
.vm-tujuan h2, .vm-tujuan h3, .vm-tujuan h4 { margin: 18px 0 8px; color: var(--c-text); }

.vm-notes { margin-top: 4px; }

/* =========================================================
   PRAKATA KEPALA SEKOLAH (class names kept as "sambutan-*" --
   internal only, not shown to visitors)
   ========================================================= */
.sambutan-layout { display: flex; flex-direction: column; gap: 32px; padding-bottom: 48px; }
@media (min-width: 900px) { .sambutan-layout { flex-direction: row; align-items: flex-start; } }
.sambutan-profile { width: 100%; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 20px; text-align: center; }
@media (min-width: 900px) { .sambutan-profile { width: 280px; flex-shrink: 0; position: sticky; top: 90px; } }
.sambutan-profile__photo { width: 100%; aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; background: var(--c-surface-alt); }
.sambutan-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.sambutan-profile__photo--placeholder { display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--c-border); }
.sambutan-profile h4 { font-size: 17px; font-weight: 700; color: var(--c-text); }
.sambutan-profile__title { font-size: 13px; color: var(--c-primary); font-weight: 600; margin-top: 4px; }
.sambutan-profile__meta { text-align: left; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-border-light); display: flex; flex-direction: column; gap: 14px; }
.sambutan-profile__meta > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.sambutan-profile__meta i { color: var(--c-primary); margin-top: 3px; }
.sambutan-profile__meta strong { display: block; color: var(--c-text); }
.sambutan-profile__meta span { color: var(--c-text-muted); }

.sambutan-content { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 28px; }
.sambutan-content__updated { font-size: 13px; color: var(--c-text-muted); margin: 8px 0 20px; }
.sambutan-signature { margin-top: 32px; text-align: right; }
.sambutan-signature__image img { max-height: 60px; margin-left: auto; }
.sambutan-signature__name { font-weight: 700; color: var(--c-text); margin-top: 4px; }
.sambutan-signature__nip { font-size: 13px; color: var(--c-primary); }

/* =========================================================
   DIREKTORI GURU & STAFF
   ========================================================= */
.staff-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.staff-filter button, .staff-filter a {
  background: #fff; border: 1px solid var(--c-border); color: var(--c-text-light);
  font-size: 13px; font-weight: 600; padding: 12px 20px; min-height: 44px; border-radius: var(--radius-sm);
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.staff-filter button:hover, .staff-filter a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.staff-filter button.is-active, .staff-filter a.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.staff-filter a em, .staff-filter button em { font-style: normal; opacity: .65; font-size: 12px; margin-left: 2px; }

/* =========================================================
   CONTENT TOOLBAR (filter kategori + pencarian -- halaman Berita)
   ========================================================= */
.content-toolbar {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.content-toolbar .staff-filter {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border-light);
}
.content-toolbar__search { display: flex; gap: 8px; max-width: 420px; }
.content-toolbar__search input[type="search"] {
  flex: 1; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; min-height: 44px; min-width: 0;
}
.content-toolbar__search button {
  background: var(--c-primary); color: #fff; border: 0; border-radius: var(--radius-sm);
  padding: 0 18px; min-height: 44px; cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.content-toolbar__search button:hover { background: var(--c-primary-dark); }
.content-toolbar__reset {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; color: var(--c-text-light); text-decoration: none;
  padding: 0 6px;
}
.content-toolbar__reset:hover { color: var(--c-primary); }
@media (max-width: 640px) {
  .content-toolbar { padding: 16px; }
  .content-toolbar__search { max-width: none; flex-wrap: wrap; }
}

/* Topik / Kumpulan Artikel page */
.topik-count { font-size: 13px; color: var(--c-text-light); margin: 0 0 16px; }

.staff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 36px; }
@media (min-width: 640px) { .staff-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .staff-grid { grid-template-columns: repeat(4, 1fr); } }
.staff-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .2s; }
.staff-card:hover { box-shadow: var(--shadow-md); }
.staff-card__photo {
  aspect-ratio: 4/3; overflow: hidden; background: var(--c-surface-alt);
  display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--c-border);
}
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__body { padding: 16px; }
.staff-card__badge { display: inline-block; background: var(--c-surface-container); color: var(--c-text-light); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.staff-card__body h4 { font-size: 16px; font-weight: 700; color: var(--c-text); line-height: 1.3; }
.staff-card__subtitle { font-size: 13px; color: var(--c-text-muted); margin-top: 4px; }
.staff-card__detail { font-size: 12px; color: var(--c-text-light); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.staff-card__detail i { color: var(--c-secondary); }
.staff-card[hidden] { display: none; }

.staff-card__link {
  display: block; height: 100%; color: inherit; text-decoration: none;
  outline-offset: -2px;
}
.staff-card__link:focus-visible { outline: 2px solid var(--c-primary); }
.staff-card__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12px; font-weight: 600; color: var(--c-primary);
}
.staff-card__more i { transition: transform .15s; }
.staff-card__link:hover .staff-card__more i { transform: translateX(3px); }

/* =========================================================
   DIREKTORI GURU & STAFF -- DETAIL MODAL
   ========================================================= */
body.has-modal-open { overflow: hidden; }
.staff-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.staff-modal[hidden] { display: none; }
.staff-modal__overlay {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(2px);
}
.staff-modal__dialog {
  position: relative; z-index: 1; background: #fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  width: 100%; max-width: 440px; max-height: calc(100vh - 40px);
  overflow: auto; animation: staffModalIn .18s ease-out;
}
@keyframes staffModalIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.staff-modal__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--c-text);
  font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.staff-modal__close:hover { background: #fff; color: var(--c-primary); }
.staff-modal__photo {
  aspect-ratio: 4/3; background: var(--c-surface-alt);
  display: flex; align-items: center; justify-content: center;
}
.staff-modal__photo[hidden] { display: none; }
.staff-modal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-modal__body { padding: 22px 24px 26px; }
.staff-modal__badge {
  display: inline-block; background: var(--c-surface-container); color: var(--c-text-light);
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-sm); margin-bottom: 10px;
}
.staff-modal__badge[hidden] { display: none; }
.staff-modal__body h2 { font-size: 20px; font-weight: 800; color: var(--c-text); line-height: 1.3; margin: 0; }
.staff-modal__jabatan { font-size: 14px; color: var(--c-text-muted); margin-top: 6px; }
.staff-modal__jabatan[hidden] { display: none; }
.staff-modal__meta { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--c-border-light); }
.staff-modal__meta li {
  font-size: 13px; color: var(--c-text-light); padding: 10px 0;
  display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--c-border-light);
}
.staff-modal__meta li[hidden] { display: none; }
.staff-modal__meta i { color: var(--c-secondary); width: 16px; text-align: center; }
.staff-modal__share {
  margin-top: 18px; background: var(--c-primary); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 10px 16px; min-height: 40px;
  font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s;
}
.staff-modal__share:hover { background: var(--c-primary-dark); }
@media (max-width: 480px) {
  .staff-modal { padding: 0; align-items: flex-end; }
  .staff-modal__dialog { max-width: none; max-height: 92vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
}

/* =========================================================
   STRUKTUR ORGANISASI (bagan saja)
   Isi kotak diatur di Panel Sekolah -> Struktur Organisasi.
   ========================================================= */
.struktur-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 40px; padding-bottom: 8px; }

/* --- Bagan + konektor --- */
.struktur-chart { --sc-line: var(--c-primary); position: relative; min-width: 860px; max-width: 1120px; margin: 0 auto; padding: 8px 4px 16px; }

.struktur-chart__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.struktur-chart__head .struktur-box--komite { justify-self: end; width: 250px; margin-right: 66px; }
.struktur-chart__head .struktur-box--kepala-sekolah { position: relative; width: 250px; }
.struktur-chart__head .struktur-box--kepala-sekolah::before {   /* garis koordinasi ke Komite -- ada jarak di kedua ujungnya */
  content: ""; position: absolute; right: calc(100% + 18px); top: 50%; width: 30px; height: 6px;
  background: var(--c-success); transform: translateY(-50%);
}

.struktur-chart__branch {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-top: 36px; position: relative;
}
.struktur-chart__branch::before {   /* tiang tengah dari Kepala Sekolah ke bar */
  content: ""; position: absolute; left: 50%; top: -36px; width: 3px; height: 24px;
  background: var(--sc-line); transform: translateX(-50%);
}
.struktur-chart__branch::after {    /* bar distribusi horizontal */
  content: ""; position: absolute; top: -12px; left: 12.5%; right: 12.5%; height: 3px;
  background: var(--sc-line);
}
.struktur-chart__branch > .struktur-box { position: relative; }
.struktur-chart__branch > .struktur-box::before {   /* turunan ke tiap kotak */
  content: ""; position: absolute; left: 50%; top: -12px; width: 3px; height: 12px;
  background: var(--sc-line); transform: translateX(-50%);
}
.struktur-chart__branch > .struktur-box::after {   /* mata panah "garis perintah" masuk ke kotak */
  content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--sc-line);
}

.struktur-chart__branch--unit {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 52%; margin: 40px auto 0;
}
.struktur-chart__branch--unit::before { top: -40px; height: 40px; }
.struktur-chart__branch--unit::after { left: 25%; right: 25%; }

.struktur-chart__guru { display: flex; justify-content: center; margin-top: 36px; position: relative; }
.struktur-chart__guru::before {
  content: ""; position: absolute; left: 50%; top: -36px; width: 3px; height: 36px;
  background: var(--sc-line); transform: translateX(-50%);
}
.struktur-chart__guru::after {   /* mata panah "garis perintah" masuk ke kotak Guru Mapel */
  content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--sc-line);
}

/* --- Kotak jabatan --- */
.struktur-box {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  padding: 12px 14px; border: 1.5px solid var(--c-border); border-radius: 6px;
  background: var(--c-surface); color: var(--c-text); min-height: 98px;
}
.struktur-box__photo {
  width: 46px; height: 58px; border: 1.5px solid var(--c-border); background: #fff;
  display: block; overflow: hidden; flex: 0 0 auto;
}
.struktur-box__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.struktur-box__label { font-size: 12px; font-weight: 800; text-transform: uppercase; line-height: 1.2; letter-spacing: .3px; color: var(--c-primary-dark); }
.struktur-box__label--solo { text-align: center; }
.struktur-box__name { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--c-text); }
.struktur-box--link { transition: box-shadow .15s, transform .15s; }
.struktur-box--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.struktur-box--link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Warna per jabatan mengikuti dokumen struktur resmi. */
.struktur-box--kepala-sekolah { background: #e6f5e6; border-color: #7cc47c; }
.struktur-box--komite { background: #ececec; border-color: #b6b6b6; }
.struktur-box--waka-kurikulum,
.struktur-box--waka-kesiswaan,
.struktur-box--waka-sarpras { background: #fdf3d6; border-color: #f0c33c; }
.struktur-box--kepala-tu { background: #f6d9c8; border-color: #e6926a; }
.struktur-box--kepala-perpus,
.struktur-box--kepala-lab-ipa { background: #b7f0dd; border-color: #3ec9a6; }
.struktur-box--guru {
  background: var(--c-primary-light); border-color: var(--c-primary);
  align-items: center; justify-content: center; min-height: 0; max-width: 320px; padding: 14px 18px;
}

/* --- Koordinator mata pelajaran (opsional) --- */
.struktur-koordinator { margin-top: 32px; }
.struktur-koordinator__title { text-align: center; font-weight: 800; text-transform: uppercase; font-size: 13px; margin-bottom: 14px; }
.struktur-koordinator__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.struktur-koordinator__box { border: 2px solid var(--c-error); border-radius: 6px; padding: 10px 12px; background: #fff; }
.struktur-koordinator__mapel { font-weight: 800; font-size: 12px; text-transform: uppercase; margin-bottom: 6px; }
.struktur-koordinator__box ul { list-style: none; margin: 0; padding: 0; }
.struktur-koordinator__box li { font-size: 12px; line-height: 1.55; color: var(--c-text-light); }

/* --- Legenda (samakan dengan warna konektor pada bagan) --- */
.struktur-legenda {
  width: max-content; max-width: 100%; margin: 4px 0 40px auto;
  border: 2px solid var(--c-text); border-radius: 4px; padding: 12px 22px 14px; background: #fff;
}
.struktur-legenda__title { text-align: center; font-weight: 800; letter-spacing: 2px; font-size: 13px; margin-bottom: 12px; }
.struktur-legenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.struktur-legenda li { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 16px; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--c-text); }
.struktur-legenda__mark { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; }
.struktur-legenda__arrow {
  width: 15px; height: 24px;
  clip-path: polygon(38% 0, 62% 0, 62% 52%, 100% 52%, 50% 100%, 0 52%, 38% 52%);
}
.struktur-legenda__arrow--1 { background: var(--c-primary); }
.struktur-legenda__arrow--2 { background: #e6926a; }
.struktur-legenda__bar { width: 46px; height: 8px; border-radius: 2px; background: var(--c-success); }
.struktur-legenda__box { width: 30px; height: 22px; border: 2.5px solid var(--c-error); border-radius: 2px; }

@media print {
  .site-header, .site-footer, .page-hero, #wpadminbar, .breadcrumb { display: none !important; }
  .struktur-scroll { overflow: visible; }
  .struktur-chart { min-width: 0; max-width: none; }
}

/* =========================================================
   GALERI FOTO (masonry archive)
   ========================================================= */
.gallery-masonry { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 16px; grid-auto-flow: dense; margin-bottom: 32px; }
@media (min-width: 768px) { .gallery-masonry { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; } }
.gallery-masonry__item {
  position: relative; display: block; grid-column: span 2; grid-row: span 1;
  border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--c-border);
}
@media (min-width: 768px) { .gallery-masonry__item { grid-column: span 2; grid-row: span 1; } }
.gallery-masonry__item--big { grid-column: span 2; grid-row: span 2; }
.gallery-masonry__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gallery-masonry__item:hover img { transform: scale(1.06); }
.gallery-masonry__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent 70%); color: #fff;
}
.gallery-masonry__caption .badge { margin-bottom: 8px; }
.gallery-masonry__caption h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.gallery-masonry__item--big .gallery-masonry__caption h3 { font-size: 20px; }
.gallery-masonry__caption p { font-size: 12px; opacity: .9; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-masonry__item[hidden] { display: none; }

/* =========================================================
   GALERI VIDEO (archive)
   ========================================================= */
.video-main--archive { display: block; margin-bottom: 0; }
.video-main__flag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.video-main__excerpt { font-size: 13px; color: #e5e7eb; margin-top: 6px; max-width: 60ch; }
.kategori-count-list { display: flex; flex-direction: column; gap: 4px; }
.kategori-count-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--c-border-light); font-size: 14px; color: var(--c-text-light); }
.kategori-count-list li:last-child { border-bottom: 0; }
.kategori-count-list__num { background: var(--c-surface-container); color: var(--c-text-light); font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); }

/* =========================================================
   HUBUNGI KAMI
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 8px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info h2, .contact-form-wrap h2 { font-size: 20px; font-weight: 700; margin-bottom: 18px; color: var(--c-text); }
.contact-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.contact-list li i { width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary-light); color: var(--c-primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-list li strong { display: block; font-size: 13px; color: var(--c-text); }
.contact-list li span { font-size: 14px; color: var(--c-text-light); }

.contact-info--dark {
  background: var(--c-primary-dark); color: #fff; border-radius: var(--radius-md); padding: 28px;
}
.contact-info--dark h2 { color: #fff; }
.contact-info--dark .contact-list li i { background: rgba(255,255,255,.15); color: #fff; }
.contact-info--dark .contact-list li strong { color: #fff; }
.contact-info--dark .contact-list li span { color: rgba(255,255,255,.85); }
.contact-info--dark .footer-social a { background: rgba(255,255,255,.15); }
.contact-info--dark .footer-social a:hover { background: var(--c-secondary); }

.contact-map { margin-top: 20px; border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; }
.contact-map iframe { width: 100%; height: 280px; border: 0; display: block; }

.contact-form-wrap { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 28px; }
.form-row-pair { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) { .form-row-pair { grid-template-columns: 1fr 1fr; } }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--c-text); }
.form-row .req { color: var(--c-error); }
.form-row input, .form-row textarea {
  width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--c-primary); border-width: 2px; padding: 9px 11px; }
.form-notice { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; }
.form-notice--success { background: #e8f8ee; color: #1e7e42; border: 1px solid #b7e6c6; }
.form-notice--error { background: #fdeceb; color: #ba1a1a; border: 1px solid #f5c2bf; }

/* =========================================================
   EKSTRAKURIKULER
   ========================================================= */
.ekskul-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 8px; }
@media (min-width: 640px) { .ekskul-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ekskul-grid { grid-template-columns: repeat(3, 1fr); } }
.ekskul-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .2s; }
.ekskul-card[hidden] { display: none; }
.ekskul-card:hover { box-shadow: var(--shadow-md); }
.ekskul-card__media { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--c-surface-alt); }
.ekskul-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ekskul-card:hover .ekskul-card__media img { transform: scale(1.06); }
.ekskul-card__badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,.92); color: var(--c-text);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm);
}
.ekskul-card__body { flex: 1; padding: 20px; display: flex; flex-direction: column; position: relative; }
.ekskul-card__body h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.ekskul-card__body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ekskul-card__body h3 a:hover { color: var(--c-secondary); }
.ekskul-card__body p { font-size: 14px; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 16px; flex: 1; }

.ekskul-hero {
  background: var(--c-primary-dark) center/cover no-repeat;
  position: relative; color: #fff; padding: 56px 0; margin-bottom: 32px;
}
.ekskul-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,20,35,.55); }
.ekskul-hero .container { position: relative; z-index: 1; max-width: 900px; }
.ekskul-hero h1 { font-size: 30px; font-weight: 700; margin: 10px 0; }
@media (min-width: 768px) { .ekskul-hero h1 { font-size: 38px; } }
.ekskul-hero p { font-size: 16px; opacity: .92; max-width: 65ch; }

.ekskul-section { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 24px; margin-bottom: 24px; }
.ekskul-section--center { text-align: center; }
.ekskul-section h2 { font-size: 20px; font-weight: 700; color: var(--c-text); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ekskul-section h2 i { color: var(--c-primary); }
.ekskul-section h4 { font-size: 15px; font-weight: 700; margin: 16px 0 8px; }
.ekskul-section h4:first-of-type { margin-top: 0; }
.ekskul-quote { border-left: 3px solid var(--c-secondary); padding-left: 16px; font-style: italic; color: var(--c-text-light); }
.ekskul-misi-list { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; color: var(--c-text-light); font-size: 15px; }

.ekskul-program-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .ekskul-program-grid { grid-template-columns: repeat(2, 1fr); } }
.ekskul-program-card { background: var(--c-surface-alt); border: 1px solid var(--c-border-light); border-radius: var(--radius-sm); padding: 16px; }
.ekskul-program-card h5 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ekskul-program-card p { font-size: 13px; color: var(--c-text-muted); line-height: 1.6; }

.ekskul-prestasi-grid { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; }
@media (min-width: 640px) { .ekskul-prestasi-grid { grid-template-columns: repeat(3, 1fr); } }
.ekskul-prestasi-card { position: relative; background: var(--c-surface-alt); border: 1px solid var(--c-border-light); border-radius: var(--radius-sm); padding: 20px; text-align: center; }
.ekskul-prestasi-card__year { position: absolute; top: 10px; right: 10px; background: var(--c-success); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); }
.ekskul-prestasi-card i { font-size: 30px; color: var(--c-tertiary); margin-bottom: 10px; }
.ekskul-prestasi-card h5 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ekskul-prestasi-card p { font-size: 12px; color: var(--c-text-muted); }

.ekskul-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .ekskul-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.ekskul-gallery-grid__item { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--c-border); }
.ekskul-gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ekskul-gallery-grid__item:hover img { transform: scale(1.08); }

.ekskul-info-widget .widget__body { display: flex; flex-direction: column; gap: 16px; }
.ekskul-info-row { display: flex; gap: 12px; align-items: flex-start; }
.ekskul-info-row i { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary-light); color: var(--c-primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.ekskul-info-row strong { display: block; font-size: 12px; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.ekskul-info-row span { display: block; font-size: 14px; color: var(--c-text); }

.ekskul-pembina-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ekskul-pembina-item { display: flex; align-items: center; gap: 8px; }
.ekskul-pembina-item__name { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); }
.ekskul-pembina-item__role { display: block; font-size: 11px; color: var(--c-text-muted); }

/* =========================================================
   BAHAN AJAR
   ========================================================= */
.materi-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .materi-grid { grid-template-columns: repeat(2, 1fr); } }
.materi-card { position: relative; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: box-shadow .2s; }
.materi-card:hover { box-shadow: var(--shadow-md); }
.materi-card[hidden] { display: none; }
.materi-card__media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; background: var(--c-surface-container); overflow: hidden;
  font-size: 42px; color: var(--c-border);
}
.materi-card__media img { width: 100%; height: 100%; object-fit: cover; }
.materi-card__body { padding: 16px; }
.materi-card__badge { display: inline-block; background: var(--c-surface-container); color: var(--c-text-light); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.materi-card__body h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.materi-card__body h4 a:hover { color: var(--c-secondary); }
.materi-card__body p { font-size: 13px; color: var(--c-text-muted); line-height: 1.6; margin-bottom: 14px; }

.materi-video-list { display: flex; flex-direction: column; gap: 14px; }
.materi-video-item {
  display: flex; gap: 14px; background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: 12px; align-items: center;
  transition: box-shadow .2s;
}
.materi-video-item:hover { box-shadow: var(--shadow-md); }
.materi-video-item[hidden] { display: none; }
.materi-video-item__thumb { position: relative; width: 140px; height: 90px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-container); }
.materi-video-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.materi-video-item__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); color: #fff; font-size: 20px;
}
.materi-video-item__body { flex: 1; min-width: 0; }
.materi-video-item__body h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.materi-video-item__body p { font-size: 13px; color: var(--c-text-muted); margin-bottom: 6px; }
.materi-video-item__duration { font-size: 12px; color: var(--c-text-muted); }

.mapel-filter-list { display: flex; flex-direction: column; gap: 2px; }
.mapel-filter-list button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; border-left: 3px solid transparent;
  padding: 10px 12px; font-size: 14px; color: var(--c-text-light); font-weight: 600;
  text-align: left; border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s, color .15s;
}
.mapel-filter-list button:hover { background: var(--c-surface-alt); }
.mapel-filter-list button.is-active { background: var(--c-primary-light); border-left-color: var(--c-primary); color: var(--c-primary-dark); }
.mapel-filter-list button em { font-style: normal; background: var(--c-surface-container); color: var(--c-text-muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.mapel-filter-list button.is-active em { background: var(--c-primary); color: #fff; }

.info-box { background: var(--c-primary-light); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 18px; }
.info-box h4 { font-size: 14px; font-weight: 700; color: var(--c-primary-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.info-box p { font-size: 13px; color: var(--c-text-light); line-height: 1.6; margin-bottom: 12px; }

.materi-viewer { border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; background: #000; }
.materi-viewer iframe { width: 100%; border: 0; display: block; }
.materi-viewer--pdf iframe { height: 70vh; min-height: 420px; background: #525659; }
.materi-viewer--video { aspect-ratio: 16/9; }
.materi-viewer--video iframe { height: 100%; }
.materi-viewer__note { font-size: 12px; color: var(--c-text-muted); margin-top: 10px; }

/* =========================================================
   LMS (arsip + single)
   ========================================================= */
.lms-active-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 18px; font-weight: 700; color: var(--c-text); margin: 6px 0 18px;
}
.lms-active-title__count {
  background: var(--c-surface-container); color: var(--c-text-light);
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill);
}

.lms-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }
.lms-item {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md);
  padding: 20px; transition: box-shadow .2s;
}
.lms-item:hover { box-shadow: var(--shadow-md); }
.lms-item__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lms-item__badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-primary-light); color: var(--c-primary-dark);
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-sm);
}
.lms-item__badge--alt { background: var(--c-surface-container); color: var(--c-text-light); }
.lms-item__date { font-size: 12px; color: var(--c-text-muted); margin-left: auto; white-space: nowrap; }
.lms-item__title { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.lms-item__title a { color: var(--c-text); }
.lms-item__title a:hover { color: var(--c-primary); }
.lms-item__desc { font-size: 14px; color: var(--c-text-muted); line-height: 1.6; margin: 0; }

.lms-item__files { margin-top: 14px; border-top: 1px solid var(--c-border-light); padding-top: 12px; }
.lms-item__files-label { font-size: 13px; font-weight: 600; color: var(--c-text-light); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.lms-item__files ul,
.lms-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lms-item__files a,
.lms-file-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); text-decoration: none; color: var(--c-text);
  transition: border-color .15s, background .15s;
}
.lms-item__files a:hover,
.lms-file-list a:hover { border-color: var(--c-primary); background: #fff; }
.lms-file__ext {
  flex-shrink: 0; min-width: 44px; text-align: center;
  background: var(--c-primary); color: #fff; font-size: 10px; font-weight: 800;
  padding: 3px 6px; border-radius: 3px; letter-spacing: .03em;
}
.lms-file__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; word-break: break-word; }
.lms-file__size { flex-shrink: 0; font-size: 12px; color: var(--c-text-muted); }
.lms-file__go { flex-shrink: 0; color: var(--c-primary); }

.lms-item__link { margin-top: 14px; }
.lms-item__link .btn { width: 100%; }

.lms-block { margin-bottom: 28px; }
.lms-block__note { font-size: 14px; color: var(--c-text-light); line-height: 1.7; margin: 0 0 14px; }

.lms-single__crumb { font-size: 13px; margin: 0 0 6px; opacity: .9; }
.lms-single__crumb a { color: inherit; text-decoration: underline; }
.lms-single__crumb span { margin: 0 6px; }
.lms-single__meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin: 8px 0 0; opacity: .9; }
.lms-single__meta i { margin-right: 5px; }

.lms-related { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lms-related li { border-bottom: 1px dashed var(--c-border-light); padding-bottom: 8px; }
.lms-related li:last-child { border-bottom: 0; }
.lms-related a { font-size: 13px; font-weight: 600; color: var(--c-text); }
.lms-related a:hover { color: var(--c-primary); }
.lms-related__all { font-size: 13px; font-weight: 700; color: var(--c-primary); }

/* Shared avatar for anything referencing a Tenaga Pendidik entry (real
   photo if set) or an external/manual name (initial-letter fallback). */
.smpn21-staff-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.smpn21-staff-avatar--fallback {
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

.materi-sidebar .widget__body { padding-top: 20px; }
.materi-sidebar__title { font-size: 20px; font-weight: 700; color: var(--c-text); line-height: 1.3; margin: 10px 0 16px; }
.materi-sidebar__author { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--c-border-light); }
.materi-sidebar__author strong { display: block; font-size: 14px; color: var(--c-text); }
.materi-sidebar__author span { display: block; font-size: 12px; color: var(--c-text-muted); }
.materi-sidebar__meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.materi-sidebar__meta li { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding-bottom: 8px; border-bottom: 1px dashed var(--c-border-light); }
.materi-sidebar__meta li span { color: var(--c-text-muted); }
.materi-sidebar__meta li strong { color: var(--c-text); }

/* =========================================================
   KALENDER AKADEMIK
   ========================================================= */
.kalender-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.kalender-nav__label { font-size: 20px; font-weight: 700; color: var(--c-text); min-width: 180px; text-align: center; text-transform: capitalize; }
.kalender-nav__arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--c-border); color: var(--c-text-light);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.kalender-nav__arrow:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* minmax(0, 1fr), not plain 1fr: a bare 1fr track has an implicit min
   size of "auto" (its content's min-content width), which refuses to
   shrink a cell below that and overflows the grid on narrow screens.
   minmax(0, 1fr) removes that floor so all 7 columns truly share the
   width evenly. */
.kalender-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.kalender-grid__weekday { text-align: center; font-size: 12px; font-weight: 700; color: var(--c-text-muted); padding: 8px 0; text-transform: uppercase; }
.kalender-grid__cell {
  aspect-ratio: 1/1; background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--radius-sm);
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.kalender-grid__cell--empty { background: transparent; border-color: transparent; }
.kalender-grid__cell.has-event { border-color: var(--c-border); }
.kalender-grid__cell.is-today { border-color: var(--c-primary); border-width: 2px; background: var(--c-primary-light); }
.kalender-grid__date { font-size: 13px; font-weight: 600; color: var(--c-text); }
.kalender-grid__cell.is-today .kalender-grid__date { color: var(--c-primary-dark); }
.kalender-grid__dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }

.kalender-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; background: var(--c-outline); }
.kalender-dot--libur { background: var(--c-error); }
.kalender-dot--ujian { background: var(--c-secondary); }
.kalender-dot--agenda { background: var(--c-primary); }
.kalender-dot--lainnya { background: var(--c-outline); }

.kalender-agenda-empty { color: var(--c-text-muted); font-size: 14px; }
.kalender-agenda-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-border-light); }
.kalender-agenda-item .kalender-dot { margin-top: 6px; width: 10px; height: 10px; }
.kalender-agenda-item__body { flex: 1; }
.kalender-agenda-item__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.kalender-agenda-item__meta strong { font-size: 15px; color: var(--c-text); }
.kalender-agenda-item__date { display: block; font-size: 12px; color: var(--c-text-muted); }
.kalender-agenda-item__date i { margin-right: 4px; }
.kalender-agenda-item__desc { font-size: 13px; color: var(--c-text-muted); margin-top: 6px; }

.kalender-legend { display: flex; flex-direction: column; gap: 10px; }
.kalender-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-light); }

/* Homepage sidebar "Kalender Akademik" widget: a short upcoming-agenda
   list + link to the full month-grid page (replaces the default
   WordPress get_calendar() widget, which just linked to post-by-date
   archives and had no relation to the school's actual academic dates). */
.kalender-widget-list { display: flex; flex-direction: column; gap: 12px; }
.kalender-widget-list li { display: flex; align-items: flex-start; gap: 8px; }
.kalender-widget-list .kalender-dot { margin-top: 5px; }
.kalender-widget-list strong { display: block; font-size: 13px; color: var(--c-text); line-height: 1.4; }
.kalender-widget-list span { display: block; font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.kalender-widget-empty { font-size: 13px; color: var(--c-text-muted); }

/* Sidebar mini month calendar (Monday-first grid + per-day event dot +
   this-month agenda list). */
.kalender-mini {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.kalender-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: 8px 10px;
}
.kalender-mini__month {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  text-transform: capitalize;
}
.kalender-mini__nav {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.kalender-mini__nav:hover { background: var(--c-primary); color: #fff; }
.kalender-mini__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.kalender-mini__wd,
.kalender-mini__day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-right: 1px solid var(--c-border-light);
  border-bottom: 1px solid var(--c-border-light);
}
.kalender-mini__wd:nth-child(7n),
.kalender-mini__day:nth-child(7n) { border-right: 0; }
.kalender-mini__wd {
  background: var(--c-surface-alt);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--c-text-muted);
}
.kalender-mini__wd.is-weekend { color: var(--c-primary); }
.kalender-mini__day {
  font-weight: 600;
  color: var(--c-text);
}
.kalender-mini__day--empty { background: transparent; border-color: transparent; }
.kalender-mini__day.is-weekend { color: var(--c-text-muted); }
.kalender-mini__day.has-event { color: var(--c-primary-dark); font-weight: 800; }
.kalender-mini__day.is-today {
  background: var(--c-primary);
  color: #fff;
  font-weight: 800;
}
.kalender-mini__dot {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.kalender-mini__day.is-today .kalender-mini__dot { background: #fff; }

.kalender-mini__agenda { margin-top: 14px; }
.kalender-mini__agenda-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 8px;
}
.kalender-mini__agenda ul { display: flex; flex-direction: column; gap: 10px; }
.kalender-mini__agenda li { display: flex; align-items: flex-start; gap: 8px; }
.kalender-mini__agenda li .kalender-dot { margin-top: 5px; }
.kalender-mini__agenda strong { display: block; font-size: 13px; color: var(--c-text); line-height: 1.4; }
.kalender-mini__agenda li > div > span {
  display: block;
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 2px;
  text-transform: capitalize;
}

@media (max-width: 640px) {
  .kalender-grid__weekday { font-size: 10px; }
  .kalender-grid__cell { padding: 4px; }
  .kalender-grid__date { font-size: 11px; }
  .kalender-nav__label { font-size: 16px; min-width: 140px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  padding: 48px 0 20px;
  border-top: 4px solid var(--c-primary);
  margin-top: 40px;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-col h4 {
  color: #fff; font-size: 16px; font-weight: 700; text-transform: uppercase;
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #374151;
}
.footer-col p { font-size: 14px; margin-bottom: 10px; }
.footer-col address { font-style: normal; font-size: 14px; line-height: 1.7; }

/* Any WordPress widget (classic or block) dropped into the
   "Footer Kolom Tambahan" area -- matched to the dark footer palette
   so it stays uniform with the hand-built footer columns above. The
   [class*="widget"] guard keeps these off the hand-built .footer-col
   markup (.footer-contact-list, .footer-tags, .footer-social). */
.footer-col[class*="widget"].widget_block { padding: 0; background: none; border: 0; }
.footer-col[class*="widget"] .widget__title,
.footer-col[class*="widget"] .widget-title,
.footer-col[class*="widget"] > h1:first-child,
.footer-col[class*="widget"] > h2:first-child,
.footer-col[class*="widget"] > h3:first-child,
.footer-col[class*="widget"] > h4:first-child,
.footer-col[class*="widget"] > .wp-block-heading:first-child {
  margin: 0 0 16px;
  padding: 0 0 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid #374151;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0;
}
.footer-col[class*="widget"] .widget__body { padding: 0; }
.footer-col[class*="widget"] ul { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.footer-col[class*="widget"] li { border: 0; padding: 0; margin: 0; font-size: 14px; }
.footer-col[class*="widget"] li a { display: inline; color: var(--c-footer-text); font-weight: 500; }
.footer-col[class*="widget"] li a:before { content: none; }
.footer-col[class*="widget"] a:hover { color: #fff; }
.footer-col[class*="widget"] .textwidget,
.footer-col[class*="widget"] .custom-html-widget { font-size: 14px; line-height: 1.7; color: var(--c-footer-text); }
.footer-col[class*="widget"] .textwidget a,
.footer-col[class*="widget"] .custom-html-widget a { color: #fff; text-decoration: underline; }
.footer-col[class*="widget"] .children,
.footer-col[class*="widget"] .sub-menu { margin: 10px 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.footer-col[class*="widget"] .current-cat > a,
.footer-col[class*="widget"] .current_page_item > a,
.footer-col[class*="widget"] .current-menu-item > a { color: #fff; font-weight: 700; }
.footer-col[class*="widget"] .tagcloud,
.footer-col[class*="widget"] .wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-col[class*="widget"] .tagcloud a,
.footer-col[class*="widget"] .wp-block-tag-cloud a {
  background: #374151; color: #fff !important; font-size: 12px !important;
  line-height: 1; padding: 6px 10px; border-radius: var(--radius-sm); text-decoration: none;
}
.footer-col[class*="widget"] .tagcloud a:hover,
.footer-col[class*="widget"] .wp-block-tag-cloud a:hover { background: var(--c-secondary); }
.footer-col[class*="widget"] .rsswidget,
.footer-col[class*="widget"] .wp-block-latest-posts__post-title,
.footer-col[class*="widget"] .wp-block-rss__item-title a { color: #fff; font-weight: 700; font-size: 14px; }
.footer-col[class*="widget"] .rss-date,
.footer-col[class*="widget"] .rssSummary,
.footer-col[class*="widget"] .post-date,
.footer-col[class*="widget"] .wp-block-latest-posts__post-date,
.footer-col[class*="widget"] .wp-block-rss__item-excerpt { color: var(--c-footer-text); font-size: 12px; }
.footer-col[class*="widget"] select {
  width: 100%; padding: 9px 12px; font-size: 14px; color: #fff;
  background: #374151; border: 1px solid #4b5563; border-radius: var(--radius-sm);
}
.footer-col[class*="widget"] .search-form,
.footer-col[class*="widget"] .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.footer-col[class*="widget"] .search-form input[type="search"],
.footer-col[class*="widget"] .wp-block-search__input {
  flex: 1; min-width: 0; border: 1px solid #4b5563; background: #374151; color: #fff;
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px;
}
.footer-col[class*="widget"] .search-form button,
.footer-col[class*="widget"] .wp-block-search__button {
  border: 0; border-radius: var(--radius-sm); padding: 0 16px; margin: 0;
  background: var(--c-primary); color: #fff; font-weight: 700; cursor: pointer;
}
.footer-col[class*="widget"] .wp-block-search__button:hover,
.footer-col[class*="widget"] .search-form button:hover { background: var(--c-primary-dark); }
.footer-col[class*="widget"] img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.footer-col[class*="widget"] .wp-block-calendar table { font-size: 12px; }
.footer-col[class*="widget"] .wp-block-calendar th,
.footer-col[class*="widget"] .wp-block-calendar td { border-color: #374151; padding: 6px 0; }
.footer-col[class*="widget"] .wp-block-calendar a { color: #fff; }
.footer-tagline { font-weight: 700; color: #e5e7eb; }
.footer-contact-list li { font-size: 14px; margin-bottom: 12px; }
.footer-contact-list strong { display: block; color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 40px; height: 40px; font-size: 16px; border-radius: var(--radius-sm);
  background: #374151; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.footer-social a:hover { background: var(--c-secondary); transform: translateY(-2px); }
.footer-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-tags a { background: #374151; color: #fff; font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); }
.footer-tags a:hover { background: var(--c-secondary); }
.footer-bottom {
  border-top: 1px solid #374151; padding-top: 20px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: space-between;
  font-size: 12px; text-align: center;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; text-align: left; } }
.footer-bottom a { color: #fff; font-weight: 700; }
.footer-bottom a:hover { color: var(--c-secondary); }

/* =========================================================
   MISC UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.alignwide, .alignfull { max-width: 100%; }

/* =========================================================
   RUNNING TEXT (teks berjalan)
   ========================================================= */
.running-text {
  background: var(--c-primary-dark);
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.running-text .container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.running-text__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--c-secondary);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.running-text__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.running-text__track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: smpn21-marquee 40s linear infinite;
}
.running-text__group { display: inline-flex; flex: none; align-items: center; }
.running-text__item {
  position: relative;
  color: #fff;
  font-weight: 600;
  padding-right: 2.6rem;
  text-decoration: none;
  transition: color .15s;
}
.running-text__item::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  transform: translateY(-50%);
}
a.running-text__item:hover,
a.running-text__item:focus { color: var(--c-secondary); text-decoration: underline; }
.running-text__item--intro { color: var(--c-secondary); font-weight: 800; }
/* Pause on hover, keyboard focus, or touch/press (mobile has no hover --
   .is-touched is toggled by main.js on touchstart/touchend) so a title
   can be read and clicked/activated. */
.running-text:hover .running-text__track,
.running-text:focus-within .running-text__track,
.running-text:active .running-text__track,
.running-text.is-touched .running-text__track { animation-play-state: paused; }
@keyframes smpn21-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .running-text__track { animation: none; white-space: normal; flex-wrap: wrap; }
  .running-text__group { flex-wrap: wrap; }
  .running-text__group[aria-hidden="true"] { display: none; }
}
@media (max-width: 600px) {
  .running-text__label { font-size: 10px; }
  .running-text .container { gap: 8px; }
}

/* =========================================================
   PRIMARY NAV -- 13-item layout, tidy left-aligned wrap (match smkn1-cmi)
   ========================================================= */
/* Dropdown caret (desktop bar only): draw a plain CSS triangle instead of
   the old font-family:'FontAwesome' \f107 glyph, which does not resolve
   on the Font Awesome 6 build this theme loads (it rendered as a blank
   box / nothing -- the "messy" carets in the screenshot). Scoped to the
   desktop menu so the mobile slide-out keeps its "+" box instead. */
.site-nav .container > .primary-menu .menu-item-has-children > a::after,
.site-nav .container > .primary-menu .menu-item-has-children > span::after {
  font-family: inherit;
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 7px;
  opacity: .8;
  flex: none;
}

@media (min-width: 960px) {
  /* One flex line: [home] [menu, wraps internally] [tools]. The CONTAINER
     never wraps -- only .primary-menu does -- so the search/bell stay
     pinned to the right edge and vertically centred, exactly like the
     reference, instead of dropping to their own row. */
  .site-nav .container {
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 8px;
    row-gap: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .nav-home {
    flex: none;
    align-self: flex-start;
    background: rgba(255, 255, 255, .12);
    border-radius: 8px;
    margin-right: 4px;
  }
  .primary-menu {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;   /* both rows line up on the left */
    align-items: center;
    row-gap: 0;
    column-gap: 0;
    font-size: 12px;
  }
  .primary-menu > li > a,
  .primary-menu > li > span,
  .primary-menu > li > .nav-toggle-label {
    padding: 13px 16px;
    white-space: nowrap;
  }
  .primary-menu > li:nth-last-child(-n+4) > .sub-menu { left: auto; right: 0; }
  /* Search + bell: fixed size, hugging the right edge, centred against the
     (possibly two-row) menu block. */
  .site-nav__tools {
    flex: none;
    align-self: center;
    margin-left: auto;
  }
  .nav-home,
  .nav-bell { display: inline-flex; }
}
@media (min-width: 1280px) {
  .primary-menu { font-size: 12.5px; }
  .primary-menu > li > a,
  .primary-menu > li > span,
  .primary-menu > li > .nav-toggle-label { padding: 14px 19px; }
}

/* -------- Desktop hover dropdown: tidy panel --------
   The 13-item bar wraps to two rows on most laptops, so a first-row
   dropdown opens over the second row. Make that read as intentional: a
   solid bordered panel with a top accent that clearly floats above
   everything, the open parent highlighted so it connects to its menu,
   and roomy, evenly-spaced items. */
@media (min-width: 960px) {
  .primary-menu > li.menu-item-has-children:hover,
  .primary-menu > li.menu-item-has-children:focus-within { z-index: 120; }

  .primary-menu > li.menu-item-has-children:hover > a,
  .primary-menu > li.menu-item-has-children:hover > span,
  .primary-menu > li.menu-item-has-children:focus-within > a,
  .primary-menu > li.menu-item-has-children:focus-within > span {
    background: rgba(255, 255, 255, .14);
    color: #fff;
  }

  .primary-menu .sub-menu {
    top: calc(100% + 0px);
    min-width: 244px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-top: 3px solid var(--c-secondary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 20, 35, .22);
    transform: translateY(4px);
    z-index: 130;
  }
  .primary-menu li:hover > .sub-menu,
  .primary-menu li:focus-within > .sub-menu { transform: translateY(0); }

  .primary-menu .sub-menu li { display: block; }
  .primary-menu .sub-menu li a {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--c-text);
    transition: background .12s, color .12s;
  }
  .primary-menu .sub-menu li a:hover,
  .primary-menu .sub-menu li a:focus {
    background: var(--c-primary);
    color: #fff;
  }
}

/* -------- Mobile slide-out menu: match the reference layout -------- */
/* Solid full-width panel, taller rows with clear dividers.
   The mobile <ul> also carries the .primary-menu class, whose
   `align-items: center` was shrink-wrapping every <li> to its text width
   (text looked centred, dividers were short stubs, the "+" box floated
   mid-row). Force the column to stretch so every row is full width, text
   flush-left, and the "+" box pinned flush-right. */
.mobile-menu { padding: 0 0 24px; }
.mobile-menu ul,
.mobile-menu .primary-menu {
  align-items: stretch;
  gap: 0;
  width: 100%;
}
/* Each row is its own flex line: [label grows] [toggle]. The sub-menu
   <ul> is forced onto a wrapped line of its own, so the +/- toggle can
   only ever sit in the label row -- it no longer drifts down to the
   middle of an expanded section. */
.mobile-menu li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.mobile-menu li > a,
.mobile-menu li > span {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 15px 20px;
  font-size: 14px;
  text-align: left;
  border-top: 0;
}
.mobile-menu li.is-open > .sub-menu { max-height: 640px; }
.mobile-menu .sub-menu { flex: 0 0 100%; width: 100%; }
.mobile-menu .sub-menu a { padding-left: 34px; }

/* "+" / "-" toggle: bordered square box, stays centred against the label
   row and flush to the right (in flow, not absolutely positioned). */
.mobile-menu .submenu-toggle {
  position: static;
  flex: none;
  align-self: center;
  margin-right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 4px;
  background: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.mobile-menu .submenu-toggle:hover { background: rgba(255, 255, 255, .14); }
.mobile-menu .submenu-toggle i { display: none; }          /* draw the sign in CSS, not the icon font */
.mobile-menu .submenu-toggle::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
/* Override the old base rule that rotated this button 180deg when open. */
.mobile-menu li.is-open > .submenu-toggle { transform: none; }
.mobile-menu li.is-open > .submenu-toggle::after { content: "\2212"; }   /* minus sign */

/* Hamburger becomes an X (dark box) while the menu is open. */
.nav-mobile-toggle[aria-expanded="true"] {
  background: var(--c-primary-darker);
  border-radius: 6px;
}
.nav-mobile-toggle[aria-expanded="true"] i { display: none; }
.nav-mobile-toggle[aria-expanded="true"]::after {
  content: "\00d7";
  font-size: 26px;
  line-height: 1;
}

/* =========================================================
   TOPBAR LIVE CLOCK + mobile layout (match smkn1-cmi)
   ========================================================= */
.topbar .container { flex-wrap: wrap; }
.topbar__info { flex: 1 1 auto; min-width: 0; }
/* Date + live clock are one unit: calendar icon, date, then the time
   chip right beside it (matches smkn1-cmi). */
.topbar__datetime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.topbar__clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .92);
  color: var(--c-primary-dark);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.topbar__clock-time { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .topbar .container { justify-content: center; }
  .topbar__info { width: 100%; justify-content: center; }
  .topbar__social { width: 100%; justify-content: center; }
}

/* =========================================================
   NAV -- Beranda + Lonceng icons (mobile), match smkn1-cmi
   ========================================================= */
.nav-home,
.nav-bell {
  background: none;
  border: 0;
  color: #fff;
  font-size: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.nav-home:hover,
.nav-bell:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.nav-home { margin-right: 4px; }
/* Desktop visibility + styling for .nav-home / .nav-bell is set in the
   "PRIMARY NAV -- 13-item layout" block above (reference shows both on
   desktop as well as mobile). */

/* =========================================================
   TOP TAGS strip (front page, under the nav)
   ========================================================= */
.top-tags { background: #fff; border-bottom: 1px solid var(--c-border-light); }
.top-tags .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.top-tags__label {
  flex: none;
  font-weight: 800;
  font-size: 13px;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.top-tags__label i { color: var(--c-secondary); }
.top-tags__list { display: flex; flex-wrap: wrap; gap: 6px; }
.top-tags__pill {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  color: #fff;
  white-space: nowrap;
  transition: opacity .15s, transform .15s;
}
.top-tags__pill:hover { opacity: .88; transform: translateY(-1px); color: #fff; }
.top-tags__pill--0 { background: var(--c-primary); }
.top-tags__pill--1 { background: #16a085; }
.top-tags__pill--2 { background: var(--c-secondary); }
.top-tags__pill--3 { background: #e74c3c; }
.top-tags__pill--4 { background: #6c5ce7; }

/* =========================================================
   HEADLINE LIST -- now shown on mobile too, stacked under the slider
   ========================================================= */
.headline-list {
  display: flex;
  border-left: 2px solid var(--c-border);
}
@media (min-width: 860px) {
  .headline-list { border-left: 0; }
}
@media (max-width: 859px) {
  /* Cap the list height on phones so the page doesn't get a giant
     block -- it scrolls internally, same as the desktop panel does. */
  .headline-list__items { max-height: 340px; }
}

/* =========================================================
   HERO ON EVERY PAGE -- interior variant (no principal panel)
   ========================================================= */
.hero--interior { min-height: 240px; }
/* No panel to sit beside, so the brand is centred, full-strength, and
   doesn't stretch to fill a row. */
.hero--interior .container {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero--interior .hero__brand {
  flex: none;
  opacity: 1;
  text-align: center;
}
.hero--interior .hero__logo { margin: 0 auto 14px; }
.hero--interior .hero__title { font-size: 24px; }
.hero--interior .hero__address { justify-content: center; }
@media (min-width: 900px) {
  .hero--interior .hero__title { font-size: 34px; }
}
.hero__pagetitle {
  display: inline-block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--c-secondary);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 900px) {
  .hero__pagetitle { font-size: 22px; }
}

/* =========================================================
   SINGLE POST -- header (pills + title + meta) & author box
   ========================================================= */
.entry-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.entry-cat-pill {
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
}
.entry-cat-pill:hover { background: var(--c-primary-dark); color: #fff; }

/* Compact meta row: clock+date, user+display name, eye+views. */
.entry-meta {
  justify-content: flex-start;
  gap: 18px;
}
.entry-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.entry-meta__item i { font-size: 11px; }

/* Footer stacks vertically: author box, then share, then tags. */
.entry-footer { flex-direction: column; align-items: stretch; gap: 20px; }
.entry-author-box {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  padding: 18px;
}
.entry-author-box__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.entry-author-box__info { min-width: 0; }
.entry-author-box__label {
  display: block;
  font-size: 12px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.entry-author-box__name {
  display: inline-block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
  color: var(--c-text);
}
.entry-author-box__name:hover { color: var(--c-primary); }
.entry-author-box__bio {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-muted);
}

/* =========================================================
   CATEGORY / TERM ARCHIVE header
   ========================================================= */
.archive-header { margin-bottom: 22px; }
.archive-header .section-title { margin-bottom: 10px; }
.archive-header__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text-light);
  margin-top: 10px;
}
.archive-header__desc > :first-child { margin-top: 0; }
.archive-header__desc > :last-child { margin-bottom: 0; }
.archive-header__count {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

@media print {
  .site-header, .site-nav, .site-footer, .layout__sidebar, .topbar, .running-text, .top-tags { display: none; }
}

/* =========================================================
   LINK CARDS  (Page Template: Tautan Bergambar / Gambar + Link)
   Blok kartu "banner gambar + tombol Selengkapnya", meniru
   bagian "INFORMASI PUBLIK" pada situs Dinas Pendidikan.
   ========================================================= */
.link-cards__intro { margin: 24px 0 8px; }

.link-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0 44px;
}
/* 2 or 4 columns only -- so a full page of Informasi Publik cards (8) always
   fills complete rows at every width (no half-empty last row). */
@media (min-width: 560px)  { .link-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .link-cards { grid-template-columns: repeat(4, 1fr); } }

.link-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.link-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.link-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-primary-light);
  overflow: hidden;
}
.link-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.link-card:hover .link-card__media img { transform: scale(1.05); }

.link-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--c-primary);
  opacity: .5;
}

.link-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  flex: 1;
}

.link-card__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
  margin: 0;
}

.link-card__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary);
  padding-top: 6px;
  border-top: 1px solid var(--c-border-light);
  width: 100%;
}
.link-card:hover .link-card__more { color: var(--c-primary-dark); }

/* =========================================================
   LINK LIST  (Page Template: Daftar Tautan / Judul + Link)
   Two-column "Label : https://..." table.
   ========================================================= */
.link-list__intro { margin: 24px 0 8px; }

.link-list {
  margin: 24px 0 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow-x: auto;
}
.link-list table { width: 100%; border-collapse: collapse; }
.link-list tr { border-bottom: 1px solid var(--c-border-light); }
.link-list tr:last-child { border-bottom: 0; }

.link-list th,
.link-list td { padding: 16px 18px; text-align: left; vertical-align: top; }

.link-list th {
  width: 34%;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
}
.link-list__sep {
  width: 1%;
  padding-left: 0;
  padding-right: 0;
  font-weight: 700;
  color: var(--c-text-muted);
}
.link-list__value { word-break: break-word; }
.link-list__value a {
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
}
.link-list__value a:hover { color: var(--c-primary-dark); text-decoration: underline; }
.link-list__muted { color: var(--c-text-muted); }

@media (max-width: 600px) {
  .link-list th,
  .link-list td { display: block; padding: 12px 16px; }
  .link-list th { width: auto; padding-bottom: 2px; }
  .link-list__sep { display: none; }
  .link-list__value { padding-top: 2px; }
  .link-list tr { padding: 4px 0; }
}

/* Daftar Peserta Didik -- data table */
.pd-table__count { font-size: 13px; color: var(--c-text-light); margin: 24px 0 10px; }
.pd-table {
  margin: 0 0 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow-x: auto;
}
.pd-table table { width: 100%; border-collapse: collapse; min-width: 460px; }
.pd-table thead th {
  background: var(--c-surface-alt);
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--c-text-light);
  padding: 12px 16px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
}
.pd-table tbody td {
  padding: 12px 16px; font-size: 14px; color: var(--c-text); vertical-align: top;
  border-bottom: 1px solid var(--c-border-light);
}
.pd-table tbody tr:last-child td { border-bottom: 0; }
.pd-table tbody tr:nth-child(even) td { background: var(--c-surface); }
.pd-table__no { width: 52px; text-align: right; color: var(--c-text-muted); white-space: nowrap; }
.pd-table__jk { width: 60px; text-align: center; }
.pd-table__year { width: 96px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pd-table-wrap { margin: 0 0 44px; }
.pd-table-wrap .pd-table { margin: 0; }
.pd-table tbody tr[hidden] { display: none; }
.pd-search { display: block; max-width: 360px; margin: 0 0 12px; }
.pd-search__input {
  width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; min-height: 42px; min-width: 0;
}
.pd-search__input:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.pd-search__empty { font-size: 14px; color: var(--c-text-light); margin: 12px 0 0; }