/* ============================================================
   SEKOLAHKAMI — Premium Bright Template Layer
   Clean, terang, tajam, dan modern untuk website sekolah.
   File ini sengaja diletakkan setelah template.css agar aman
   diterapkan tanpa menghapus struktur Joomla/template lama.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --premium-ink: #08251a;
  --premium-ink-2: #194334;
  --premium-muted: #63766d;
  --premium-green: #009944;
  --premium-green-2: #006d36;
  --premium-green-3: #10b95b;
  --premium-lime: #ecf400;
  --premium-gold: #ffd22e;
  --premium-blue: #0077ff;
  --premium-paper: #ffffff;
  --premium-soft: #f4fff8;
  --premium-soft-2: #ecfff3;
  --premium-line: rgba(0, 109, 54, .14);
  --premium-line-strong: rgba(0, 109, 54, .24);
  --premium-shadow: 0 24px 80px rgba(0, 109, 54, .14);
  --premium-shadow-soft: 0 12px 34px rgba(0, 109, 54, .08);
  --premium-radius: 26px;

  --ink: var(--premium-ink);
  --ink-soft: var(--premium-muted);
  --green: var(--premium-green);
  --green-deep: var(--premium-green-2);
  --green-mid: var(--premium-green-3);
  --green-soft: #dbffe8;
  --cream: #fffce3;
  --cream-soft: #f7ffe5;
  --paper: var(--premium-paper);
  --gold: var(--premium-lime);
  --gold-deep: #b2a900;
  --orange: #ff7a00;
  --orange-deep: #f15d00;
  --orange-bright: #ff9f1a;
  --border: var(--premium-line);
  --shadow-sm: var(--premium-shadow-soft);
  --shadow-md: var(--premium-shadow);
  --shadow-lg: 0 36px 110px rgba(0, 109, 54, .18);
  --container: 1440px;
  --gutter: clamp(18px, 5vw, 76px);
  --radius: 18px;
}

html {
  background: #f6fff9;
}

body.site {
  font-family: "Instrument Sans", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: var(--premium-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(236,244,0,.34), transparent 24rem),
    radial-gradient(circle at 96% 8%, rgba(0,153,68,.16), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #f4fff8 36%, #ffffff 100%);
}

body.site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,109,54,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,109,54,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 70%);
}

h1, h2, h3, h4, h5,
.brand-title,
.hero-title {
  font-family: "Sora", "Instrument Sans", system-ui, sans-serif;
  letter-spacing: -.045em;
}

p,
.lead,
.hero-subtitle {
  color: var(--premium-muted);
}

::selection {
  background: var(--premium-lime);
  color: var(--premium-ink);
}

.container,
.container-wide,
.container-narrow {
  width: min(100%, var(--container));
}

/* ---------- Topbar: bright signal strip ---------- */
.topbar {
  background: linear-gradient(90deg, var(--premium-green-2), var(--premium-green), var(--premium-green-3));
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.topbar-inner {
  min-height: 46px;
  padding: 8px 0;
  margin: 0;
  font-size: 12px;
}

.tb-item svg,
.tb-social-icon svg {
  color: var(--premium-lime);
  opacity: 1;
}

.topbar a:hover,
.tb-social-icon:hover {
  color: var(--premium-lime);
}

/* ---------- Header / Navigation ---------- */
.site-header {
  top: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,109,54,.12);
}

.site-header.is-scrolled {
  box-shadow: 0 18px 60px rgba(0,109,54,.12);
}

.header-inner {
  min-height: 82px;
  padding: 12px 0;
  gap: 24px;
}

.brand {
  min-width: 0;
  gap: 14px;
}

.brand-logo {
  width: 62px;
  height: 62px;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.brand-logo::after {
  display: none;
}

.brand-logo img {
  width: 110%;
  height: 110%;
  /*object-fit: contain;
  padding: 0px;*/
}
@media (max-width: 760px) {
  .brand-logo {
    width: 52px;
    height: 52px;
  }
}

.brand-title {
  color: var(--premium-ink);
  font-size: clamp(15px, 1.45vw, 21px);
  font-weight: 800;
}

.brand-sub {
  width: fit-content;
  margin-top: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--premium-lime);
  color: var(--premium-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.primary-nav > ul {
  gap: 8px;
}

.primary-nav a {
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--premium-ink-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}

.primary-nav > ul > li > a::after {
  display: none;
}

.primary-nav a:hover,
.primary-nav a.is-active,
.primary-nav li.current > a,
.primary-nav li.active > a {
  background: var(--premium-soft-2);
  color: var(--premium-green-2) !important;
}

.primary-nav .submenu {
  top: calc(100% + 10px);
  min-width: 250px;
  padding: 10px;
  border: 1px solid var(--premium-line);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--premium-shadow);
  backdrop-filter: blur(16px);
}

.primary-nav .submenu a {
  border: 0;
  border-radius: 14px;
  padding: 11px 13px;
  letter-spacing: .06em;
}

.primary-nav .submenu a:hover {
  background: var(--premium-green);
  color: #fff !important;
}

.btn-ppdb,
.btn,
.link-arrow,
.article-nav-btn,
.pagenav a {
  border-radius: 999px;
}

.btn-ppdb {
  border: 0;
  background: linear-gradient(135deg, var(--premium-lime), var(--premium-gold));
  color: var(--premium-ink);
  box-shadow: 0 16px 36px rgba(236,244,0,.28);
}

.btn-ppdb::before {
  background: linear-gradient(135deg, var(--premium-green), var(--premium-green-2));
}

.btn-ppdb:hover {
  color: #fff;
}

/* ---------- Hero: editorial bright, sharp contrast ---------- */
.hero,
.hero-video-section,
.hero-wrapper {
  border-radius: 0 0 42px 42px;
  overflow: hidden;
}

.hero {
  background:
    linear-gradient(105deg, rgba(5,44,28,.78) 0%, rgba(0,109,54,.56) 43%, rgba(0,0,0,.08) 100%),
    radial-gradient(circle at 76% 20%, rgba(236,244,0,.38), transparent 22rem),
    linear-gradient(135deg, #006d36, #052c1c);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -28% auto;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg, rgba(236,244,0,.42) 0 8px, transparent 8px 22px);
  opacity: .62;
  z-index: 1;
  pointer-events: none;
}

.hero-video-overlay {
  background:
    linear-gradient(90deg, rgba(5,44,28,.88) 0%, rgba(0,109,54,.54) 48%, rgba(5,44,28,.10) 100%),
    linear-gradient(180deg, rgba(5,44,28,.15), rgba(5,44,28,.45)) !important;
  opacity: 1 !important;
}

.hero-inner {
  align-content: center;
  padding-top: clamp(70px, 12vh, 130px);
  padding-bottom: clamp(70px, 12vh, 130px);
}

.hero-content {
  position: relative;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow: 0 30px 90px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.hero-content::before {
  content: "SMP AL IRSYAD TEGAL";
  display: inline-flex;
  margin-bottom: 16px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--premium-lime);
  color: var(--premium-ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-title {
  margin: 0 0 18px;
  color: #fff;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: 0 16px 40px rgba(0,0,0,.24);
}

.hero-subtitle {
  max-width: 660px;
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.7;
}

.hero-actions,
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn,
.hero-actions a {
  min-height: 48px;
  padding: 14px 24px;
  border-width: 0;
  background: linear-gradient(135deg, var(--premium-green), var(--premium-green-2));
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 16px 34px rgba(0,109,54,.20);
}

.btn:hover,
.hero-actions a:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--premium-lime), var(--premium-gold));
  color: var(--premium-ink);
}

.btn-ghost,
.btn-outline {
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: none;
}

.btn-gold,
.btn-orange {
  background: linear-gradient(135deg, var(--premium-lime), var(--premium-gold));
  color: var(--premium-ink);
}

/* ---------- Moving strap ---------- */
.strap {
  margin: 0;
  background: var(--premium-lime);
  color: var(--premium-ink);
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}

.strap-inner {
  font-family: "Sora", sans-serif;
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 800;
  letter-spacing: .08em;
}

/* ---------- Sections ---------- */
.section,
.section-tight,
.cta-banner {
  position: relative;
}

.section {
  padding: clamp(64px, 8vw, 118px) 0;
}

.section-tight {
  padding: clamp(50px, 6vw, 88px) 0;
}

.bg-cream,
.bg-paper {
  background:
    radial-gradient(circle at 8% 12%, rgba(236,244,0,.20), transparent 18rem),
    linear-gradient(180deg, #fff, #f6fff9);
}

.bg-green {
  background:
    radial-gradient(circle at 12% 18%, rgba(236,244,0,.18), transparent 20rem),
    linear-gradient(135deg, #052c1c, #006d36);
}

.section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.eyebrow {
  padding: 8px 13px;
  border-radius: 999px;
  background: #eafff1;
  color: var(--premium-green-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.eyebrow::before,
.eyebrow.center::after {
  display: none;
}

.section-head h2,
.split-body h2,
.cta-inner h2,
.pullquote blockquote {
  color: var(--premium-ink);
  text-wrap: balance;
}

.bg-green .section-head h2,
.bg-green .pullquote blockquote,
.bg-green h2,
.bg-green h3 {
  color: #fff;
}

/* ---------- Cards: news, programs, pillars, modules ---------- */
.news-grid,
.programs,
.pillars,
.ekskul-grid,
.gallery,
.article-grid,
.stat-strip {
  gap: clamp(16px, 2vw, 26px);
}

.news-card,
.program-card,
.pillar,
.stat,
.visit-card,
.form-card,
.aside-card,
.content-block,
.download-item,
.notice-item,
.prestasi-item,
.testimonial-item-bold,
.ekskul-slide,
.org-node,
.sitemap-col {
  border: 1px solid var(--premium-line);
  border-radius: var(--premium-radius);
  background: rgba(255,255,255,.94);
  box-shadow: var(--premium-shadow-soft);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.news-card:hover,
.program-card:hover,
.pillar:hover,
.visit-card:hover,
.download-item:hover,
.notice-item:hover,
.prestasi-item:hover,
.testimonial-item-bold:hover,
.ekskul-slide:hover {
  transform: translateY(-6px);
  border-color: var(--premium-line-strong);
  box-shadow: var(--premium-shadow);
}

.news-card h3,
.program-body h3,
.pillar h3,
.ekskul-body h3,
.testimonial-author-bold strong,
.content-block h2,
.content-block h3 {
  color: var(--premium-ink);
  font-weight: 800;
}

.news-meta,
.program-tag,
.ekskul-tag,
.tag,
.chip,
.label {
  border-radius: 999px;
  background: #eafff1;
  color: var(--premium-green-2);
  font-weight: 900;
  letter-spacing: .08em;
}

.date,
.ndate,
.badge,
.pillar-num,
.stat strong {
  background: linear-gradient(135deg, var(--premium-lime), var(--premium-gold));
  color: var(--premium-ink);
  border-radius: 18px;
}

.news-img,
.program-img,
.ekskul-img,
.split-media {
  overflow: hidden;
}

.news-img,
.program-img,
.ekskul-img {
  border-radius: calc(var(--premium-radius) - 2px);
}

.news-card img,
.program-img img,
.split-media img,
.testimonial-avatar-bold img {
  filter: saturate(1.08) contrast(1.03);
}

.link-arrow {
  padding: 11px 17px;
  border: 1px solid var(--premium-line-strong);
  background: #fff;
  color: var(--premium-green-2);
  box-shadow: var(--premium-shadow-soft);
}

.link-arrow:hover {
  background: var(--premium-green);
  border-color: var(--premium-green);
  color: #fff;
}

/* ---------- Split / principal section ---------- */
.split {
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
}

.split-media {
  border-radius: 34px;
  box-shadow: var(--premium-shadow);
}

.split-media .frame {
  border-color: var(--premium-lime);
  border-radius: 34px;
}

.split-body {
  border: 1px solid var(--premium-line);
  border-radius: 34px;
  padding: clamp(24px, 4vw, 48px);
  background: rgba(255,255,255,.86);
  box-shadow: var(--premium-shadow-soft);
}

.lead {
  color: var(--premium-ink-2);
  font-style: normal;
  font-weight: 600;
}

/* ---------- Quote + testimonials ---------- */
.pullquote {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 34px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
}

.pullquote blockquote {
  color: #fff;
}

.attribution strong,
.attribution span {
  color: rgba(255,255,255,.86);
}

.testimonial-item-bold {
  background: rgba(255,255,255,.96);
  color: var(--premium-ink);
}

.testimonial-avatar-bold {
  border-radius: 22px;
  overflow: hidden;
}

.testimonial-quote-bold {
  color: var(--premium-ink-2);
}

/* ---------- CTA ---------- */
.cta-banner {
  padding: clamp(60px, 7vw, 96px) 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(236,244,0,.42), transparent 20rem),
    linear-gradient(135deg, #006d36, #009944);
  color: #fff;
}

.cta-inner {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 38px;
  padding: clamp(26px, 5vw, 58px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}

.cta-inner h2,
.cta-inner p {
  color: #fff;
}

.cta-inner .eyebrow {
  background: var(--premium-lime);
  color: var(--premium-ink);
}

/* ---------- Inner pages / article content ---------- */
.is-inner main,
.com-content-article,
.content-block {
  background: transparent;
}

.page-hero,
.hero-inner-page {
  border-radius: 0 0 38px 38px;
  background:
    radial-gradient(circle at 84% 10%, rgba(236,244,0,.34), transparent 18rem),
    linear-gradient(135deg, #006d36, #052c1c) !important;
}

.page-header,
.breadcrumbs,
.article-info,
.pagination,
.pager,
.pagenavi,
.mod-articles-nav {
  border-color: var(--premium-line);
}

.com-content-article,
.content-block {
  border-radius: 30px;
}

.com-content-article img {
  border-radius: 24px;
}

.content-block table,
.com-content-article table {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--premium-line);
}

.content-block th,
.com-content-article th {
  background: var(--premium-green);
  color: #fff;
}

input,
textarea,
select,
.form-field input,
.form-field textarea {
  border: 1px solid var(--premium-line-strong);
  border-radius: 18px;
  background: #fff;
  color: var(--premium-ink);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--premium-green);
  box-shadow: 0 0 0 4px rgba(0,153,68,.12);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(236,244,0,.20), transparent 22rem),
    linear-gradient(135deg, #052c1c, #006d36);
  color: rgba(255,255,255,.82);
}

.footer-top {
  border-bottom-color: rgba(255,255,255,.14);
}

.footer-brand h3,
.footer-col h4,
.site-footer strong {
  color: #fff;
}

.footer-social a,
.social-icon,
.footer-admin-actions .footer-admin-link {
  border-radius: 999px;
  border-color: rgba(255,255,255,.20);
}

.footer-social a:hover,
.social-icon:hover {
  background: var(--premium-lime);
  color: var(--premium-ink);
  border-color: var(--premium-lime);
}

.floating-whatsapp {
  background: linear-gradient(135deg, #15c66a, #008f3f);
  box-shadow: 0 18px 46px rgba(0,143,63,.30);
}

/* ---------- Admin edit controls: keep usable but polished ---------- */
.admin-edit-pill,
.section-edit-btn,
.article-edit-btn,
.floating-admin-dock .floating-admin-btn {
  border-radius: 999px !important;
  background: rgba(8,37,26,.92) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.20) !important;
}

/* ---------- Motion & responsive ---------- */
.reveal {
  transform: translateY(24px);
}

.reveal.is-in {
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .primary-nav {
    background:
      radial-gradient(circle at 88% 10%, rgba(236,244,0,.30), transparent 18rem),
      #ffffff;
  }

  .primary-nav a {
    border-radius: 0;
    border-bottom: 1px solid var(--premium-line);
  }

  .primary-nav a:hover,
  .primary-nav a.is-active,
  .primary-nav li.current > a,
  .primary-nav li.active > a {
    padding-left: 14px;
  }

  .nav-toggle {
    border-radius: 16px;
    background: #fff;
  }
}

@media (max-width: 760px) {
  .topbar-inner {
    justify-content: center;
  }

  .tb-group {
    gap: 14px;
  }

  .header-inner {
    min-height: 74px;
  }

  .brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .brand-sub {
    display: none;
  }

  .btn-ppdb {
    padding: 10px 14px;
    letter-spacing: .08em;
  }

  .hero,
  .hero-video-section,
  .hero-wrapper {
    border-radius: 0 0 28px 28px;
  }

  .hero-content {
    padding: 22px;
    border-radius: 26px;
  }

  .hero-content::before {
    font-size: 9px;
  }

  .section {
    padding: 58px 0;
  }

  .split-body,
  .cta-inner {
    border-radius: 26px;
  }
}


/* ============================================================
   Requested refinements — topbar, header, menu, section titles,
   4-column news, and full-color stats
   ============================================================ */

/* TopBar: center all text/items */
.topbar-inner {
  justify-content: center !important;
  text-align: center;
  flex-wrap: wrap;
  gap: 12px 26px;
}

.topbar .tb-group {
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 26px;
}

.topbar .tb-item {
  justify-content: center;
}

/* Header tagline: remove yellow line/pill styling */
.brand-sub,
body.is-home .site-header .brand-sub,
body.is-home .site-header.is-scrolled .brand-sub,
body.is-inner .site-header .brand-sub,
body.is-inner .site-header.is-scrolled .brand-sub,
body.is-blog-news .site-header .brand-sub,
.footer-brand .brand-sub {
  display: block;
  width: auto;
  margin-top: 5px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--premium-muted) !important;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.25;
  box-shadow: none !important;
}

/* Menu: make white list/dropdown more compact */
.primary-nav > ul {
  gap: 3px !important;
}

.primary-nav > ul > li > a,
.primary-nav a {
  padding: 8px 10px !important;
  font-size: 11px !important;
  letter-spacing: .045em !important;
  line-height: 1.1;
}

.primary-nav .submenu,
body.is-inner .site-header .primary-nav .submenu,
body.is-blog-news .site-header .primary-nav .submenu {
  min-width: 205px !important;
  padding: 7px !important;
  border-radius: 16px !important;
}

.primary-nav .submenu a,
body.is-inner .site-header .primary-nav .submenu a,
body.is-blog-news .site-header .primary-nav .submenu a {
  padding: 9px 10px !important;
  border-radius: 11px !important;
  font-size: 10.5px !important;
  letter-spacing: .045em !important;
}

.primary-nav li.has-children > a {
  padding-bottom: 8px !important;
}

/* Section title/description: new clean premium title model */
.section-head {
  position: relative;
  max-width: 980px;
  margin-bottom: clamp(26px, 4vw, 44px) !important;
  padding: 0 0 0 22px;
  border-left: 6px solid var(--premium-green);
}

.section-head.center {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-left: 0;
  text-align: center;
}

.section-head.center::before {
  content: "";
  display: block;
  width: 92px;
  height: 6px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--premium-green), var(--premium-lime));
}

.section-head .eyebrow,
.eyebrow {
  margin-bottom: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--premium-green-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

.bg-green .section-head .eyebrow,
.bg-green .eyebrow {
  color: var(--premium-lime) !important;
}

.section-head h2 {
  margin: 8px 0 10px !important;
  color: var(--premium-ink);
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  font-weight: 800;
}

.section-head .lead {
  max-width: 720px;
  margin: 0;
  color: var(--premium-muted);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
}

.section-head.center .lead {
  margin-left: auto;
  margin-right: auto;
}

/* Berita Terbaru: equal frame and 4-column layout */
.news-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.news-card-scope,
.admin-article-card-scope.news-card-scope {
  grid-column: auto !important;
  display: flex;
  min-width: 0;
}

.news-card-scope.is-feature,
.admin-article-card-scope.news-card-scope.is-feature,
.news-card.is-feature {
  grid-column: auto !important;
}

.news-card {
  width: 100%;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--premium-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(0,109,54,.08) !important;
}

.news-card .news-img,
.news-card.is-feature .news-img {
  width: 100%;
  aspect-ratio: 4 / 3 !important;
  margin: 0 0 14px !important;
  border-radius: 18px !important;
}

.news-card .date {
  top: 10px !important;
  left: 10px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
}

.news-card .date strong {
  font-size: 1.15rem !important;
}

.news-card .date span {
  font-size: 8px !important;
  letter-spacing: .12em !important;
}

.news-meta {
  width: fit-content;
  margin: 0 0 9px !important;
  padding: 5px 9px;
  font-size: 9px !important;
  letter-spacing: .09em !important;
}

.news-card h3,
.news-card.is-feature h3 {
  margin: 0 0 9px !important;
  font-size: clamp(1rem, 1.15vw, 1.18rem) !important;
  line-height: 1.28;
}

.news-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px !important;
  line-height: 1.55;
}

/* Statistik: full color blocks */
.stat-strip {
  gap: 16px !important;
  border: 0 !important;
  padding: 0;
  background: transparent;
}

.stat {
  min-height: 190px;
  padding: 34px 24px !important;
  border: 0 !important;
  border-radius: 28px !important;
  color: #fff;
  box-shadow: 0 20px 54px rgba(0,109,54,.18);
}

.stat:nth-child(1) { background: linear-gradient(135deg, #008f3f, #005b34); }
.stat:nth-child(2) { background: linear-gradient(135deg, #0077ff, #0050c8); }
.stat:nth-child(3) { background: linear-gradient(135deg, #ff8a00, #f15d00); }
.stat:nth-child(4) { background: linear-gradient(135deg, #06351f, #008f3f); }

.stat strong {
  background: transparent !important;
  color: #fff !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.stat strong sup {
  color: var(--premium-lime) !important;
}

.stat span {
  margin-top: 14px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: .12em !important;
}

@media (max-width: 1180px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1080px) {
  .primary-nav a {
    padding: 13px 0 !important;
    font-size: 13px !important;
  }

  .primary-nav .submenu {
    padding: 0 0 7px 14px !important;
  }

  .primary-nav .submenu a {
    padding: 9px 0 !important;
  }
}

@media (max-width: 720px) {
  .news-grid,
  .stat-strip {
    grid-template-columns: 1fr !important;
  }

  .section-head {
    padding-left: 16px;
    border-left-width: 5px;
  }
}

/* ============================================================
   Refinements 2 — topbar social right, transparent header accent,
   lighter menu hover, and updated running text style
   ============================================================ */

/* Topbar: kiri info kontak, kanan social media; jam layanan disembunyikan dari fallback HTML */
.topbar-inner {
  justify-content: space-between !important;
  text-align: left !important;
  gap: 18px 34px !important;
}

.topbar-inner > .tb-group {
  flex: 1 1 auto;
  justify-content: flex-start !important;
}

.topbar-inner > .tb-social {
  flex: 0 0 auto;
  justify-content: flex-end !important;
  margin-left: auto;
}

.topbar .tb-social-icon {
  gap: 7px;
}

.topbar-inner > .tb-group {
  padding-left: 240px;
}

@media (max-width: 760px) {
  .topbar-inner > .tb-group {
    padding-left: 0;
  }
}

/* Header transparan: tagline Islamic Boarding School dibuat oranye */
body.is-home .site-header:not(.is-scrolled) .brand-sub {
  color: #ff8a00 !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.22);
}

/* Setelah scroll dan halaman dalam tetap netral bersih */
body.is-home .site-header.is-scrolled .brand-sub,
body.is-inner .site-header .brand-sub,
body.is-blog-news .site-header .brand-sub {
  color: var(--premium-muted) !important;
  text-shadow: none;
}

/* Menu hover/active dibuat ringan, tidak membentuk bulatan putih besar */
.primary-nav > ul > li > a,
.primary-nav a {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
}

.primary-nav > ul > li > a::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s ease;
  opacity: .95;
}

.primary-nav > ul > li > a:hover::before,
.primary-nav > ul > li > a.is-active::before,
.primary-nav > ul > li.current > a::before,
.primary-nav > ul > li.active > a::before,
.primary-nav > ul > li.alias-parent-active > a::before,
.primary-nav > ul > li > a.active::before,
.primary-nav > ul > li > a.current::before,
.primary-nav > ul > li > a[aria-current="page"]::before {
  transform: scaleX(1);
  transform-origin: left;
}

.primary-nav a:hover,
.primary-nav a.is-active,
.primary-nav li.current > a,
.primary-nav li.active > a,
.primary-nav > ul > li.current > a,
.primary-nav > ul > li.active > a,
.primary-nav > ul > li.alias-parent-active > a,
.primary-nav > ul > li > a.active,
.primary-nav > ul > li > a.current,
.primary-nav > ul > li > a[aria-current="page"] {
  color: #ff8a00 !important;
}

body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"] {
  color: #ff8a00 !important;
}

.primary-nav .submenu a::before {
  display: none !important;
}

.primary-nav .submenu a:hover,
.primary-nav .submenu li.current > a,
.primary-nav .submenu li.active > a,
.primary-nav .submenu a.is-active {
  background: #f3fff8 !important;
  color: var(--premium-green-2) !important;
}

/* Running text: variasi badge baru */
.strap {
  background: linear-gradient(90deg, #06351f, #008f3f, #f3e600) !important;
  color: #fff !important;
  overflow: hidden;
}

.strap-inner {
  gap: clamp(18px, 4vw, 44px);
  font-size: clamp(12px, 1vw, 15px) !important;
  letter-spacing: .10em !important;
}

.strap-inner span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  color: #fff;
}

.strap-inner span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f3e600;
  box-shadow: 0 0 0 4px rgba(243,230,0,.16);
}

@media (max-width: 760px) {
  .topbar-inner {
    justify-content: center !important;
    text-align: center !important;
  }

  .topbar-inner > .tb-group,
  .topbar-inner > .tb-social {
    justify-content: center !important;
    margin-left: 0;
  }
}

/* ============================================================
   Revisi lanjutan 2026-07-13
   Hero hanya beranda, hero lebih jernih, dropdown hijau transparan,
   badge prestasi hero, statistik lebih besar, quote lega,
   sambutan kepala sekolah desain baru.
   ============================================================ */

/* 1. Hero hanya tampil di beranda; fallback CSS untuk halaman selain home */
body:not(.is-home) .hero,
body:not(.is-home) .hero-wrapper,
body:not(.is-home) .hero-video-section {
  display: none !important;
}

/* 2. Hero beranda lebih jernih / overlay dibuat transparan */
body.is-home .hero-video-overlay {
  opacity: 0 !important;
  background: transparent !important;
}

body.is-home .hero::before,
body.is-home .hero-content::before {
  display: none !important;
}

body.is-home .hero-content {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-home .hero-title,
body.is-home .hero-subtitle {
  text-shadow: 0 12px 34px rgba(0,0,0,.48), 0 2px 6px rgba(0,0,0,.32);
}

body.is-home .hero-title {
  color: #fff !important;
  font-weight: 800;
}

body.is-home .hero-subtitle {
  color: rgba(255,255,255,.96) !important;
  font-weight: 650;
}

/* 3. Dropdown transparan seperti header dengan sorotan aktif selaras */
.primary-nav .submenu,
body.is-home .site-header .primary-nav .submenu,
body.is-inner .site-header .primary-nav .submenu,
body.is-blog-news .site-header .primary-nav .submenu {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  box-shadow: 0 22px 55px rgba(0,55,28,.16) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

.primary-nav .submenu a,
body.is-home .site-header .primary-nav .submenu a,
body.is-inner .site-header .primary-nav .submenu a,
body.is-blog-news .site-header .primary-nav .submenu a {
  color: var(--premium-ink-2) !important;
  text-shadow: none !important;
}

.primary-nav .submenu a:hover,
.primary-nav .submenu li.current > a,
.primary-nav .submenu li.active > a,
.primary-nav .submenu a.is-active {
  background: rgba(0,153,68,.14) !important;
  color: var(--premium-green-2) !important;
}

body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.22) !important;
}

body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu a {
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}

body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu a:hover,
body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active {
  background: rgba(0,0,0,.55) !important;
  color: #ffd700 !important;
}

/* 4. Hero badge pengganti tombol SPMB 2027/Jadwal */
.hero-actions,
.hero-ctas {
  display: none !important;
}

.hero-certifications {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  width: fit-content;
  max-width: min(1000px, calc(100vw - 48px));
  margin-top: clamp(26px, 4vw, 44px);
}

.hero-cert-card {
  height: clamp(138px, 11vw, 164px);
  min-height: 104px;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 44px rgba(0,0,0,.18);
  backdrop-filter: blur(12px) saturate(1.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.16);
}

.hero-cert-card.is-accreditation {
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.hero-cert-card.is-awards {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: min(520px, calc(100vw - 48px));
  padding-inline: clamp(20px, 3vw, 34px);
}

.hero-cert-card strong {
  display: block;
  color: #fff;
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: clamp(3.6rem, 7vw, 5.9rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.05em;
  text-shadow: 0 10px 28px rgba(0,0,0,.30);
}

.hero-cert-card span {
  display: block;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hero-cert-card.is-accreditation span {
  margin-top: 8px;
}

.hero-cert-card.is-awards span {
  margin-top: 0;
  color: #fff;
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: clamp(1.08rem, 1.65vw, 1.75rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 10px 28px rgba(0,0,0,.28);
}

/* 5. Hilangkan running text */
.strap {
  display: none !important;
}

/* 6. Statistik dibuat lebih proporsional */
.stat-strip {
  gap: 18px !important;
}

.stat {
  min-height: 184px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 26px !important;
  border-radius: 30px !important;
  isolation: isolate;
  overflow: hidden;
}

.stat::before {
  content: "";
  position: absolute;
  inset: -45% auto auto -20%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  z-index: -1;
}

.stat::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -30px;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: rgba(243,230,0,.18);
  transform: rotate(18deg);
  z-index: -1;
}

.stat strong {
  font-size: clamp(2.45rem, 4.1vw, 3.85rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.055em;
}

.stat span {
  max-width: 230px;
  margin: 14px auto 0 !important;
  font-size: clamp(11.5px, 1vw, 14px) !important;
  line-height: 1.25;
  letter-spacing: .08em !important;
}

/* 7. Quote orang tua dibuat lebih lega */
.pullquote {
  max-width: 1180px !important;
  padding: clamp(48px, 6vw, 78px) clamp(34px, 7vw, 96px) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 40px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 28px 82px rgba(0,0,0,.18);
}

.pullquote::before {
  top: -30px !important;
  font-size: 130px !important;
}

.pullquote blockquote {
  max-width: 1000px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(1.7rem, 3vw, 3rem) !important;
  line-height: 1.34 !important;
}

/* 8. Sambutan kepala sekolah: desain editorial card baru */
.headmaster-redesign {
  background:
    radial-gradient(circle at 88% 12%, rgba(243,230,0,.22), transparent 24rem),
    linear-gradient(180deg, #ffffff, #f3fff8) !important;
}

.headmaster-redesign .headmaster-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: stretch;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(0,109,54,.14);
  border-radius: 44px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 28px 90px rgba(0,109,54,.12);
  overflow: hidden;
}

.headmaster-redesign .headmaster-card::before {
  content: "Sambutan";
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  top: clamp(12px, 2vw, 24px);
  color: rgba(0,109,54,.06);
  font-family: "Sora", sans-serif;
  font-size: clamp(3.8rem, 8vw, 8rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.headmaster-redesign .split-media {
  min-height: 480px;
  border-radius: 34px;
  box-shadow: none;
}

.headmaster-redesign .split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.headmaster-redesign .split-media .frame {
  display: none;
}

.headmaster-redesign .split-media .badge {
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  color: var(--premium-ink);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

.headmaster-redesign .split-media .badge strong {
  color: var(--premium-green-2);
  font-size: 2.8rem;
}

.headmaster-redesign .split-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px) !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.headmaster-redesign .split-body .eyebrow {
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e7fff0 !important;
  color: var(--premium-green-2);
}

.headmaster-redesign .split-body h2 {
  margin-top: 18px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.05;
}

.headmaster-redesign .split-body .lead {
  margin-top: 24px;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  line-height: 1.65;
  color: var(--premium-ink-2);
}

.headmaster-redesign .signature {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,109,54,.16);
}

.headmaster-redesign .signature strong {
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  display: block;
  margin-bottom: 8px;
}

.headmaster-redesign .headmaster-signature {
  display: block;
}

.headmaster-redesign .headmaster-signature-main {
  text-align: center;
}

.headmaster-redesign .headmaster-signature .signature-role {
  display: block;
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1.55;
  text-transform: uppercase;
}

.headmaster-redesign .headmaster-signature-meta {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  text-align: left;
}

.headmaster-redesign .headmaster-signature-meta span {
  display: block;
  color: var(--gold-deep);
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.55;
}

.headmaster-redesign .headmaster-signature-meta b {
  color: var(--premium-green-2);
  font-weight: 800;
}

@media (max-width: 980px) {
  .hero-certifications {
    width: 100%;
  }

  .hero-cert-card.is-awards {
    flex: 0 1 auto;
    width: max-content;
    max-width: calc(100vw - 48px);
  }

  .headmaster-redesign .headmaster-card {
    grid-template-columns: 1fr;
  }

  .headmaster-redesign .split-media {
    min-height: 360px;
  }
}

@media (max-width: 560px) {
  .hero-certifications {
    flex-direction: column;
    width: 100%;
  }

  .hero-cert-card {
    min-height: 90px;
  }

  .hero-cert-card.is-accreditation,
  .hero-cert-card.is-awards {
    flex-basis: auto;
    width: 100%;
  }

  .hero-cert-card.is-awards {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-cert-card.is-awards span {
    white-space: normal;
  }

  .pullquote {
    padding: 42px 22px !important;
    border-radius: 30px;
  }

  .headmaster-redesign .headmaster-card {
    border-radius: 30px;
    padding: 14px;
  }
}

/* ============================================
   Refinement request — logo, hero awards, pillars, headmaster
   ============================================ */

/* 1. Header logo sedikit lebih besar */
.site-header .brand-logo {
  width: 70px !important;
  height: 84px !important;
  flex: 0 0 70px !important;
}

.site-header .brand-logo img {
  width: 118% !important;
  height: 118% !important;
  object-fit: contain !important;
  transform: translate(-5%, -5%);
}

@media (max-width: 1080px) {
  .site-header .brand-logo {
    width: 62px !important;
    height: 74px !important;
    flex-basis: 62px !important;
  }
}

/* 2. Font badge Adiwiyata / Sekolah Penggerak / Sekolah Ramah Anak lebih menarik */
.hero-cert-card.is-awards {
  gap: 10px !important;
}

.hero-cert-card.is-awards span {
  --award-accent: var(--premium-gold);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 18px 9px 42px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px 999px 999px 12px;
  background:
    radial-gradient(circle at 16px 50%, rgba(255,255,255,.38), transparent 18px),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  color: #fff !important;
  font-family: "Sora", "Instrument Sans", sans-serif !important;
  font-size: clamp(1.02rem, 1.42vw, 1.48rem) !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 12px 28px rgba(0,0,0,.14);
}

.hero-cert-card.is-awards span:nth-child(1) { --award-accent: #f3e600; }
.hero-cert-card.is-awards span:nth-child(2) { --award-accent: #33e08a; }
.hero-cert-card.is-awards span:nth-child(3) { --award-accent: #ff9f1c; }

.hero-cert-card.is-awards span::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--award-accent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--award-accent) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--award-accent) 64%, transparent);
  transform: translateY(-50%);
}

/* 3. Section tiga pilar dibuat lebih artistik */
.pillars {
  position: relative;
  isolation: isolate;
  gap: clamp(18px, 2.4vw, 30px) !important;
  padding: clamp(18px, 2.8vw, 34px);
  border: 0 !important;
  border-radius: 40px;
  background:
    radial-gradient(circle at 8% 0%, rgba(243,230,0,.20), transparent 24rem),
    radial-gradient(circle at 92% 100%, rgba(0,143,63,.18), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(242,255,247,.92));
  box-shadow: 0 28px 90px rgba(0,109,54,.10);
  overflow: hidden;
}

.pillars::before {
  content: "";
  position: absolute;
  inset: 50% clamp(36px, 6vw, 88px) auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,109,54,.26), rgba(243,230,0,.68), rgba(0,109,54,.26), transparent);
  transform: translateY(-50%);
  z-index: 0;
}

.pillar {
  z-index: 1;
  min-height: 320px;
  padding: clamp(30px, 3.2vw, 44px) clamp(24px, 2.8vw, 34px) !important;
  border: 1px solid rgba(0,109,54,.13) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
    radial-gradient(circle at 100% 0%, rgba(243,230,0,.20), transparent 11rem) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 20px 54px rgba(0,109,54,.10) !important;
  overflow: hidden;
}

.pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 7px;
  background: linear-gradient(90deg, var(--premium-green), var(--premium-lime), var(--premium-gold));
}

.pillar::after {
  position: absolute;
  right: -12px;
  bottom: -24px;
  color: rgba(0,109,54,.055);
  font-family: "Sora", sans-serif;
  font-size: clamp(5.8rem, 8vw, 8.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
}

.pillar:nth-child(1)::after { content: "01"; }
.pillar:nth-child(2)::after { content: "02"; }
.pillar:nth-child(3)::after { content: "03"; }

.pillar:nth-child(2) {
  transform: translateY(18px);
}

.pillar:hover {
  transform: translateY(-8px) scale(1.012) !important;
}

.pillar:nth-child(2):hover {
  transform: translateY(8px) scale(1.012) !important;
}

.pillar-num {
  display: inline-flex;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px !important;
  background: rgba(0,109,54,.09) !important;
  color: var(--premium-green-2) !important;
  font-family: "Sora", "Instrument Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
}

.pillar h3 {
  margin-top: 28px !important;
  font-size: clamp(1.55rem, 2.1vw, 2.1rem) !important;
  line-height: 1.08 !important;
}

.pillar p {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

/* 4. Sambutan kepala sekolah dibuat lebih compact dan menarik */
.headmaster-redesign {
  padding-top: clamp(54px, 6vw, 78px) !important;
  padding-bottom: clamp(54px, 6vw, 78px) !important;
}

.headmaster-redesign .headmaster-card {
  max-width: 1080px;
  margin-inline: auto;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) !important;
  gap: clamp(20px, 3vw, 34px) !important;
  padding: clamp(14px, 2vw, 22px) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,255,249,.86)),
    radial-gradient(circle at 100% 0%, rgba(243,230,0,.22), transparent 18rem) !important;
  box-shadow: 0 24px 72px rgba(0,109,54,.11) !important;
}

.headmaster-redesign .headmaster-card::before {
  right: clamp(18px, 3vw, 38px) !important;
  top: 8px !important;
  font-size: clamp(2.8rem, 5.4vw, 5.8rem) !important;
}

.headmaster-redesign .split-media {
  min-height: 330px !important;
  max-height: 390px;
  border-radius: 26px !important;
}

.headmaster-redesign .split-media .badge {
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
}

.headmaster-redesign .split-media .badge strong {
  font-size: 2rem !important;
}

.headmaster-redesign .split-body {
  padding: clamp(22px, 3.2vw, 40px) !important;
}

.headmaster-redesign .split-body .eyebrow {
  padding: 7px 12px !important;
  font-size: 11px !important;
}

.headmaster-redesign .split-body h2 {
  margin-top: 14px !important;
  margin-bottom: 12px !important;
  font-size: clamp(1.55rem, 2.8vw, 2.7rem) !important;
  line-height: 1.1 !important;
}

.headmaster-redesign .split-body .lead {
  margin-top: 14px !important;
  font-size: clamp(1rem, 1.18vw, 1.12rem) !important;
  line-height: 1.58 !important;
}

.headmaster-redesign .split-body p:not(.lead) {
  font-size: 14.8px !important;
  line-height: 1.68 !important;
}

.headmaster-redesign .signature {
  margin-top: 18px !important;
  padding-top: 16px !important;
}

.headmaster-redesign .signature strong {
  font-size: 1.12rem !important;
}

.headmaster-redesign .headmaster-signature .signature-role,
.headmaster-redesign .headmaster-signature-meta span {
  font-size: .72rem !important;
}

@media (max-width: 980px) {
  .pillars::before {
    display: none;
  }

  .pillar:nth-child(2) {
    transform: none;
  }

  .pillar:nth-child(2):hover {
    transform: translateY(-8px) scale(1.012) !important;
  }

  .headmaster-redesign .headmaster-card {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .hero-cert-card.is-awards span {
    min-height: 38px;
    padding: 8px 14px 8px 36px;
    white-space: normal !important;
  }

  .hero-cert-card.is-awards span::before {
    left: 14px;
    width: 10px;
    height: 10px;
  }

  .pillars {
    padding: 14px;
    border-radius: 28px;
  }

  .pillar {
    min-height: 0;
    border-radius: 24px !important;
  }

  .headmaster-redesign .split-media {
    min-height: 260px !important;
  }
}

/* ============================================
   Parent quote carousel — editable via Template Style
   ============================================ */
.parent-quotes-section {
  overflow: hidden;
}

.parent-quote-rotator {
  position: relative;
}

.parent-quote-slides {
  display: grid;
  align-items: center;
}

.parent-quote-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 560ms ease,
    transform 560ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

.parent-quote-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.parent-quote-rotator blockquote {
  margin-bottom: 26px !important;
}

.parent-quote-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap: wrap;
  max-width: 100%;
  row-gap: 8px;
}

.parent-quote-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  cursor: pointer;
  transition:
    width 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}

.parent-quote-dots button:hover,
.parent-quote-dots button:focus-visible {
  transform: scale(1.16);
  background: #fff;
  outline: none;
}

.parent-quote-dots button.is-active {
  width: 28px;
  background: var(--premium-gold);
  box-shadow: 0 0 0 5px rgba(243,230,0,.15), 0 0 18px rgba(243,230,0,.38);
}

@media (prefers-reduced-motion: reduce) {
  .parent-quote-slide,
  .parent-quote-dots button {
    transition: none !important;
  }
}

/* ============================================
   Refinement request — logo, topbar alignment, profile page video frames
   ============================================ */

/* 1. Logo header dan footer diperbesar sedikit */
.site-header .brand-logo {
  width: 76px !important;
  height: 90px !important;
  flex: 0 0 76px !important;
}

.site-header .brand-logo img {
  width: 122% !important;
  height: 122% !important;
  transform: translate(-6%, -6%) !important;
}

.site-footer .brand {
  align-items: center !important;
  gap: 16px !important;
}

.site-footer .brand-logo {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-footer .brand-logo::after {
  display: none !important;
}

.site-footer .brand-logo img {
  width: 118% !important;
  height: 118% !important;
  object-fit: contain !important;
  transform: translate(-5%, -5%);
}

@media (max-width: 1080px) {
  .site-header .brand-logo {
    width: 66px !important;
    height: 78px !important;
    flex-basis: 66px !important;
  }

  .site-footer .brand-logo {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
  }
}

/* 2. Social media topbar kanan diratakan dengan tombol SPMB 2027 */
.topbar-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
}

.topbar-inner > .tb-group {
  min-width: 0;
  padding-left: 0 !important;
}

.topbar-inner > .tb-social {
  justify-self: end !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  text-align: right !important;
}

.site-header .header-actions {
  justify-self: end !important;
  margin-left: 0 !important;
}

@media (max-width: 760px) {
  .topbar-inner {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .topbar-inner > .tb-group,
  .topbar-inner > .tb-social {
    justify-self: center !important;
    justify-content: center !important;
  }
}

/* 3. Halaman Profil / Sejarah / Visi Misi lebih artistik dan smooth */
html {
  scroll-behavior: smooth;
}

body.is-inner #section-profil.profile-enhanced,
body.is-inner #section-sejarah.profile-enhanced,
body.is-inner #section-visimisi.profile-enhanced {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  min-height: 360px;
  padding: clamp(42px, 6vw, 78px) clamp(20px, 5vw, 72px) !important;
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(.2,.7,.2,1);
}

body.is-inner #section-profil.profile-enhanced.is-visible,
body.is-inner #section-sejarah.profile-enhanced.is-visible,
body.is-inner #section-visimisi.profile-enhanced.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.is-inner #section-profil {
  background:
    radial-gradient(circle at 8% 14%, rgba(243,230,0,.18), transparent 18rem),
    linear-gradient(135deg, #fffef8, #f2fff7) !important;
}

body.is-inner #section-sejarah {
  background:
    radial-gradient(circle at 86% 16%, rgba(243,230,0,.20), transparent 19rem),
    linear-gradient(135deg, #06351f, #008f3f) !important;
}

body.is-inner #section-visimisi {
  background:
    radial-gradient(circle at 90% 12%, rgba(0,143,63,.16), transparent 18rem),
    linear-gradient(135deg, #fff8df, #ffffff) !important;
}

body.is-inner #section-profil.profile-enhanced::before,
body.is-inner #section-sejarah.profile-enhanced::before,
body.is-inner #section-visimisi.profile-enhanced::before {
  content: "";
  position: absolute;
  inset: 20px clamp(18px, 4vw, 54px);
  border: 1px solid rgba(0,109,54,.10);
  border-radius: 34px;
  pointer-events: none;
  z-index: -1;
}

body.is-inner #section-sejarah.profile-enhanced::before {
  border-color: rgba(255,255,255,.15);
}

.profile-video-right .profile-video-frame {
  order: 2;
  justify-self: start;
}

.profile-video-left .profile-video-frame {
  justify-self: end;
}

.profile-video-frame {
  position: relative;
  width: min(100%, 350px);
  justify-self: center;
  padding: 9px;
  border: 1px solid rgba(0,109,54,.16);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.42)),
    radial-gradient(circle at 100% 0%, rgba(243,230,0,.22), transparent 9rem);
  box-shadow: 0 24px 70px rgba(0,109,54,.15);
}

#section-sejarah .profile-video-frame {
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  box-shadow: 0 28px 74px rgba(0,0,0,.22);
}

.profile-video-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 23px;
  background: #08251a;
}

.profile-video-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.28));
  pointer-events: none;
}

.profile-video-shell video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.03);
}

.profile-video-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--premium-ink);
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.profile-video-caption span {
  color: var(--premium-green-2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.profile-video-caption strong {
  font-family: "Sora", sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.profile-copy {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  justify-self: stretch;
  padding-right: clamp(4px, 1vw, 16px);
}

.profile-copy h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em;
}

.profile-copy p,
.profile-copy li {
  font-size: clamp(1rem, 1.15vw, 1.12rem) !important;
  line-height: 1.82 !important;
}

#section-sejarah .profile-copy h2,
#section-sejarah .profile-copy p,
#section-sejarah .profile-copy li {
  color: #fff !important;
}

#section-sejarah .profile-copy p,
#section-sejarah .profile-copy li {
  color: rgba(255,255,255,.88) !important;
}

#section-visimisi .profile-copy ul,
#section-visimisi .profile-copy ol {
  display: grid;
  gap: 12px;
  padding-left: 1.2rem;
}

@media (max-width: 860px) {
  body.is-inner #section-profil.profile-enhanced,
  body.is-inner #section-sejarah.profile-enhanced,
  body.is-inner #section-visimisi.profile-enhanced {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .profile-video-right .profile-video-frame {
    order: 0;
  }

  .profile-video-frame {
    width: min(100%, 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-inner #section-profil.profile-enhanced,
  body.is-inner #section-sejarah.profile-enhanced,
  body.is-inner #section-visimisi.profile-enhanced {
    scroll-behavior: auto;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Revisi 2026-07-14 — Ekskul/Testimoni, footer, artikel,
   topbar tengah, dan pengganti hero Profil Sekolah
   ============================================================ */

/* Topbar: kiri-kanan seimbang dan teks berada di tengah baris */
.topbar-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

.topbar-inner > .tb-group {
  grid-column: 1;
  justify-self: center !important;
  justify-content: center !important;
  padding-left: 0 !important;
  text-align: center !important;
}

.topbar-inner > .tb-social {
  grid-column: 2;
  justify-self: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.topbar .tb-item,
.topbar .tb-social-icon {
  align-items: center;
  justify-content: center;
}

/* Kegiatan Sekolah & Ekstrakurikuler: kartu lebih ekspresif */
#ekstrakurikuler {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(236,244,0,.28), transparent 20rem),
    radial-gradient(circle at 92% 18%, rgba(0,153,68,.16), transparent 24rem),
    linear-gradient(180deg, #ffffff, #f1fff6) !important;
}

#ekstrakurikuler::before {
  content: "";
  position: absolute;
  inset: 22px clamp(18px, 4vw, 58px);
  border: 1px solid rgba(0,153,68,.10);
  border-radius: 42px;
  pointer-events: none;
}

#ekstrakurikuler .section-head h2 {
  font-size: clamp(2rem, 4vw, 4rem) !important;
  line-height: 1.02;
}

#ekstrakurikuler .marquee-container,
#testimoni-alumni .marquee-container {
  margin-top: clamp(28px, 4vw, 52px) !important;
  padding: 12px 0 26px;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent) !important;
}

#ekstrakurikuler .marquee-track {
  gap: 22px !important;
}

#ekstrakurikuler .ekskul-slide {
  position: relative;
  flex: 0 0 clamp(270px, 24vw, 350px) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 20px 58px rgba(0,109,54,.14) !important;
  transform: rotate(-.35deg);
  isolation: isolate;
}

#ekstrakurikuler .ekskul-card-scope:nth-child(even) .ekskul-slide {
  transform: rotate(.45deg) translateY(16px);
}

#ekstrakurikuler .ekskul-slide::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 7px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--premium-green), var(--premium-lime));
}

#ekstrakurikuler .ekskul-slide:hover,
#ekstrakurikuler .ekskul-card-scope:nth-child(even) .ekskul-slide:hover {
  transform: translateY(-8px) rotate(0deg) !important;
  box-shadow: 0 30px 84px rgba(0,109,54,.22) !important;
}

#ekstrakurikuler .ekskul-img {
  height: 190px;
  border-radius: 26px 26px 14px 14px !important;
  overflow: hidden;
}

#ekstrakurikuler .ekskul-tag {
  top: 14px;
  left: 14px;
  padding: 7px 12px;
  background: rgba(255,255,255,.88) !important;
  color: var(--premium-green-2) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
}

#ekstrakurikuler .ekskul-body {
  padding: 22px 22px 28px;
  text-align: left;
}

#ekstrakurikuler .ekskul-body h3 {
  color: var(--premium-ink) !important;
  font-size: clamp(1.18rem, 1.5vw, 1.55rem);
  line-height: 1.16;
}

#ekstrakurikuler .ekskul-body p {
  margin-top: 10px;
  color: var(--premium-muted) !important;
}

/* Testimoni Alumni: nuansa premium gelap dengan kartu glass */
#testimoni-alumni {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(236,244,0,.22), transparent 20rem),
    radial-gradient(circle at 88% 68%, rgba(0,153,68,.28), transparent 26rem),
    linear-gradient(135deg, #041d13, #006d36 58%, #08251a) !important;
}

#testimoni-alumni::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 78%);
  pointer-events: none;
}

#testimoni-alumni .section-head h2 {
  font-size: clamp(2rem, 4vw, 4rem) !important;
  line-height: 1.04;
}

#testimoni-alumni .testimonial-item-bold {
  position: relative;
  flex: 0 0 clamp(300px, 28vw, 390px) !important;
  min-height: 330px;
  padding: 28px 26px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 34px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
  box-shadow: 0 26px 72px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

#testimoni-alumni .testimonial-item-bold::before {
  content: "\201C";
  position: absolute;
  right: 24px;
  top: 0;
  color: rgba(236,244,0,.24);
  font-family: Georgia, serif;
  font-size: 7rem;
  line-height: 1;
}

#testimoni-alumni .testimonial-avatar-bold {
  width: 92px !important;
  height: 92px !important;
  margin-bottom: 20px !important;
  border: 3px solid var(--premium-lime) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

#testimoni-alumni .testimonial-quote-bold {
  color: rgba(255,255,255,.92) !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
}

#testimoni-alumni .testimonial-quote-bold::before {
  display: none !important;
}

#testimoni-alumni .testimonial-author-bold strong {
  color: #fff !important;
}

#testimoni-alumni .testimonial-author-bold span {
  color: var(--premium-lime) !important;
  font-weight: 800;
}

#testimoni-alumni .btn-outline {
  background: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}

/* Footer: rapatkan brand sekolah dengan deskripsi */
.site-footer .footer-brand .brand {
  margin-bottom: 8px !important;
}

.site-footer .footer-brand p {
  margin-top: 4px !important;
  max-width: 420px;
  line-height: 1.55;
}

/* Artikel semua halaman: jarak atas-bawah lebih compact */
body.is-inner .section.admin-edit-scope {
  padding-top: clamp(16px, 2.4vw, 34px) !important;
  padding-bottom: clamp(18px, 2.6vw, 38px) !important;
}

body.is-inner .com-content-article,
body.is-inner .item-page,
body.is-inner .content-main,
body.is-inner .blog,
body.is-inner .blog-featured {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.is-inner .com-content-article,
body.is-inner .content-block {
  padding-top: clamp(18px, 2.6vw, 34px) !important;
  padding-bottom: clamp(18px, 2.6vw, 34px) !important;
}

body.is-inner .com-content-article > *:first-child,
body.is-inner .item-page > *:first-child,
body.is-inner .content-block > *:first-child {
  margin-top: 0 !important;
}

body.is-inner .com-content-article > *:last-child,
body.is-inner .item-page > *:last-child,
body.is-inner .content-block > *:last-child {
  margin-bottom: 0 !important;
}

body.is-inner .com-content-article p,
body.is-inner .content-block p,
body.is-inner .item-page p {
  margin-top: .65rem !important;
  margin-bottom: .85rem !important;
}

body.is-inner .com-content-article h2,
body.is-inner .content-block h2,
body.is-inner .item-page h2 {
  margin-top: 1.35rem !important;
  margin-bottom: .7rem !important;
}

body.is-inner .com-content-article h3,
body.is-inner .content-block h3,
body.is-inner .item-page h3 {
  margin-top: 1.1rem !important;
  margin-bottom: .55rem !important;
}

body.is-inner .article-nav-wrapper {
  margin-top: 28px !important;
  padding-top: 20px !important;
}

/* Pengganti hero khusus halaman Profil Sekolah */
.profile-replacement-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(118px, 15vw, 172px) 0 clamp(42px, 6vw, 76px);
  background:
    radial-gradient(circle at 12% 18%, rgba(236,244,0,.32), transparent 22rem),
    radial-gradient(circle at 84% 20%, rgba(16,185,91,.22), transparent 26rem),
    linear-gradient(135deg, #06351f, #009944);
  color: #fff;
}

.profile-replacement-hero::before {
  content: "PROFIL";
  position: absolute;
  right: -2vw;
  bottom: -1.6rem;
  color: rgba(255,255,255,.08);
  font-family: "Sora", sans-serif;
  font-size: clamp(5rem, 16vw, 15rem);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .8;
}

.profile-replacement-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  align-items: end;
  gap: clamp(24px, 5vw, 70px);
}

/* Geser isi card: angka bergeser ke tengah, label bergeser ke kanan */
.profile-replacement-stats strong {
  padding-left: clamp(12px, 2vw, 28px);
}

.profile-replacement-stats span {
  padding-left: clamp(10px, 1.6vw, 22px);
}

.profile-replacement-copy .eyebrow {
  color: var(--premium-lime) !important;
}

.profile-replacement-copy h1 {
  max-width: 780px;
  margin: 14px 0 16px;
  color: #fff;
  font-size: clamp(2.6rem, 6.5vw, 6.8rem);
  line-height: .92;
  letter-spacing: -.07em;
  text-shadow: 0 20px 52px rgba(0,0,0,.24);
}

.profile-replacement-copy p {
  max-width: 660px;
  color: rgba(255,255,255,.90);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.65;
}

.profile-replacement-stats {
  display: grid;
  gap: 12px;
}

.profile-replacement-stats div {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 22px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}

.profile-replacement-stats strong {
  color: var(--premium-lime);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}

.profile-replacement-stats span {
  color: #fff;
  font-family: "Bricolage Grotesque", "Space Grotesk", "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 32;
  background: linear-gradient(92deg, #ffffff 0%, #f6ffd6 45%, #ecf400 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}

/* ============================================================
   Fix hero card: cegah tulisan tumpang tindih di dalam card
   (ICC / TCC / Pesantren / Ekstrakurikuler dsb).
   Kolom value ("Pesantren", "Organisasi" dsb) terlalu panjang
   untuk grid 80px 1fr, jadi gunakan auto-width + wrap aman.

   Catatan: daftar selector di bawah harus ditambah setiap kali
   ada halaman baru dengan value panjang. Slug-nya mengikuti
   class .school-page-hero-<slug> di index.php.
   ============================================================ */
.school-page-hero-program-unggulan .profile-replacement-stats div,
.school-page-hero-icc .profile-replacement-stats div,
.school-page-hero-tcc .profile-replacement-stats div,
.school-page-hero-pesantren .profile-replacement-stats div,
.school-page-hero-galeri .profile-replacement-stats div,
.school-page-hero-fasilitas .profile-replacement-stats div,
.school-page-hero-ekstrakurikuler .profile-replacement-stats div,
.school-page-hero-kontak .profile-replacement-stats div {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  padding: 16px 22px;
  align-items: center;
}

.school-page-hero-program-unggulan .profile-replacement-stats strong,
.school-page-hero-icc .profile-replacement-stats strong,
.school-page-hero-tcc .profile-replacement-stats strong,
.school-page-hero-pesantren .profile-replacement-stats strong,
.school-page-hero-galeri .profile-replacement-stats strong,
.school-page-hero-fasilitas .profile-replacement-stats strong,
.school-page-hero-ekstrakurikuler .profile-replacement-stats strong,
.school-page-hero-kontak .profile-replacement-stats strong {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  padding-left: 0;
  white-space: nowrap;
  line-height: 1.1;
}

/* ============================================================
   Revisi 2026-07-31 — Samakan teks putih (label) pada card
   hero halaman Program Unggulan / ICC / TCC / Pesantren /
   Galeri / Fasilitas / Ekstrakurikuler / Kontak dengan
   halaman Profil Sekolah.
   Hanya keperluan wrap yang dipertahankan supaya tidak
   overflow; ukuran, posisi, dan warna mengikuti default
   .profile-replacement-stats span (halaman Profil).
   ============================================================ */
.school-page-hero-program-unggulan .profile-replacement-stats span,
.school-page-hero-icc .profile-replacement-stats span,
.school-page-hero-tcc .profile-replacement-stats span,
.school-page-hero-pesantren .profile-replacement-stats span,
.school-page-hero-galeri .profile-replacement-stats span,
.school-page-hero-fasilitas .profile-replacement-stats span,
.school-page-hero-ekstrakurikuler .profile-replacement-stats span,
.school-page-hero-kontak .profile-replacement-stats span {
  padding-left: clamp(10px, 1.6vw, 22px);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   Halaman Ekstrakurikuler — lebarkan kolom card hero.

   Masalah: pada layar >= 1440px baris "Organisasi" +
   "KEPEMIMPINAN" butuh 388px, sedangkan ruang dalam card hanya
   384px (kolom stats dipatok maks 430px di
   .profile-replacement-inner). Selisih 4px itu membuat label
   "KEPEMIMPINAN" pecah jadi dua baris.

   Solusi: lebarkan kolom stats khusus halaman ini menjadi 470px
   sehingga jarak antar elemen (gap 18px, padding-left label
   22px) tetap sama persis dengan halaman Program Unggulan —
   yang dilebarkan hanya wadahnya, bukan spasinya.
   ============================================================ */
.school-page-hero-ekstrakurikuler .profile-replacement-inner {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 470px);
}

/* Layar ponsel: card menyempit mengikuti lebar layar, jadi
   rapatkan letter-spacing dan padding agar tetap satu baris. */
@media (max-width: 430px) {
  .school-page-hero-ekstrakurikuler .profile-replacement-stats span {
    letter-spacing: .10em;
    padding-left: 10px;
  }

  .school-page-hero-ekstrakurikuler .profile-replacement-stats div {
    column-gap: 12px;
    padding: 16px;
  }
}

/* Ponsel sangat kecil (<=360px): satu baris tidak lagi cukup,
   jadi susun angka di atas label supaya tidak pernah menumpuk. */
@media (max-width: 360px) {
  .school-page-hero-ekstrakurikuler .profile-replacement-stats div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .school-page-hero-ekstrakurikuler .profile-replacement-stats span {
    padding-left: 0;
  }
}

/* ============================================================
   Halaman Fasilitas — sejajarkan (vertical center) 3 card
   dengan judul "Fasilitas Belajar yang Nyaman, Bersih,
   dan Modern" pada bagian hero.
   ============================================================ */
.school-page-hero-fasilitas .profile-replacement-inner {
  align-items: center !important;
}

.school-page-hero-fasilitas .profile-replacement-stats {
  align-self: center !important;
}

body.is-profile-page .section.admin-edit-scope {
  padding-top: 0 !important;
}

@media (max-width: 900px) {
  .topbar-inner {
    grid-template-columns: 1fr !important;
  }

  .topbar-inner > .tb-group,
  .topbar-inner > .tb-social {
    grid-column: 1 !important;
  }

  .profile-replacement-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #ekstrakurikuler .ekskul-card-scope:nth-child(even) .ekskul-slide,
  #ekstrakurikuler .ekskul-slide {
    transform: none !important;
  }

  .profile-replacement-stats div {
    grid-template-columns: 64px 1fr;
  }
}

/* ============================================================
   Revisi 2026-07-14 — rapatkan section/artikel + topbar center
   ============================================================ */

/* Topbar: seluruh teks dikumpulkan di tengah area konten, sesuai panduan gambar */
.topbar .container.topbar-inner {
  display: flex !important;
  width: min(100%, var(--container)) !important;
  max-width: var(--container) !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 3vw, 40px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 4vw, 56px) !important;
  text-align: center !important;
}

.topbar-inner > .tb-group,
.topbar-inner > .tb-social {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.topbar .tb-group,
.topbar .tb-social {
  flex-wrap: wrap !important;
  row-gap: 6px !important;
}

.topbar .tb-item,
.topbar .tb-social-icon {
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap;
}

/* Global vertical rhythm: section tidak terlalu renggang */
.section {
  padding-top: clamp(34px, 4.4vw, 68px) !important;
  padding-bottom: clamp(34px, 4.4vw, 68px) !important;
}

.section-tight {
  padding-top: clamp(24px, 3.4vw, 46px) !important;
  padding-bottom: clamp(24px, 3.4vw, 46px) !important;
}

.section-head {
  margin-bottom: clamp(18px, 2.7vw, 32px) !important;
}

.section-head.center::before {
  margin-bottom: 12px !important;
}

.section-head .eyebrow,
.eyebrow {
  margin-bottom: 8px !important;
}

.section-head h2 {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

.split {
  gap: clamp(24px, 4vw, 54px) !important;
}

.stat-strip,
.news-grid,
.programs,
.pillars,
.ekskul-grid,
.gallery,
.article-grid {
  gap: clamp(14px, 2vw, 22px) !important;
}

.marquee-container,
#ekstrakurikuler .marquee-container,
#testimoni-alumni .marquee-container {
  margin-top: clamp(18px, 3vw, 36px) !important;
}

.cta-banner {
  padding-top: clamp(40px, 5vw, 68px) !important;
  padding-bottom: clamp(40px, 5vw, 68px) !important;
}

.headmaster-redesign {
  padding-top: clamp(38px, 5vw, 62px) !important;
  padding-bottom: clamp(38px, 5vw, 62px) !important;
}

.parent-quotes-section .pullquote {
  padding-top: clamp(34px, 4.5vw, 56px) !important;
  padding-bottom: clamp(34px, 4.5vw, 56px) !important;
}

/* Artikel dan halaman component Joomla dibuat lebih compact */
body.is-inner .section.admin-edit-scope,
body.is-blog-news .section.admin-edit-scope,
body.is-profile-page .section.admin-edit-scope {
  padding-top: clamp(8px, 1.6vw, 22px) !important;
  padding-bottom: clamp(14px, 2vw, 28px) !important;
}

body.is-inner .container > .com-content-article,
body.is-inner .content-main > .com-content-article,
body.is-inner .item-page,
body.is-inner .content-block,
body.is-inner .blog,
body.is-inner .blog-featured {
  padding-top: clamp(14px, 2vw, 26px) !important;
  padding-bottom: clamp(14px, 2vw, 26px) !important;
}

body.is-inner .com-content-article p,
body.is-inner .content-block p,
body.is-inner .item-page p {
  margin-top: .45rem !important;
  margin-bottom: .65rem !important;
}

body.is-inner .com-content-article h2,
body.is-inner .content-block h2,
body.is-inner .item-page h2 {
  margin-top: 1rem !important;
  margin-bottom: .5rem !important;
}

body.is-inner .com-content-article h3,
body.is-inner .content-block h3,
body.is-inner .item-page h3 {
  margin-top: .85rem !important;
  margin-bottom: .45rem !important;
}

body.is-inner .article-nav-wrapper {
  margin-top: 20px !important;
  padding-top: 16px !important;
}

/* Category/blog override karena CSS blog dimuat dari override component */
.blog-all-news {
  padding-top: clamp(20px, 3vw, 42px) !important;
  padding-bottom: clamp(24px, 3.4vw, 48px) !important;
  min-height: auto !important;
}

.blog-grid {
  gap: clamp(14px, 2vw, 22px) !important;
  margin-bottom: 30px !important;
}

.blog-card-content {
  padding: 18px 18px 20px !important;
}

.blog-card-title {
  margin-bottom: 8px !important;
}

.blog-card-intro {
  margin-bottom: 14px !important;
}

.profile-replacement-hero {
  padding-top: clamp(96px, 12vw, 142px) !important;
  padding-bottom: clamp(32px, 5vw, 58px) !important;
}

@media (max-width: 900px) {
  .topbar .container.topbar-inner {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .topbar .tb-group,
  .topbar .tb-social {
    justify-content: center !important;
  }
}

/* ============================================================
   Revisi 2026-07-14 — aksen kuning pada header transparan
   ============================================================ */

body.is-home .site-header:not(.is-scrolled) .brand-sub,
body.is-inner .site-header:not(.is-scrolled) .brand-sub {
  color: var(--premium-lime) !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.24);
}

body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"],
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"] {
  color: var(--premium-lime) !important;
}

body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"]::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current::before,
body.is-inner .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"]::before {
  background: var(--premium-lime) !important;
  color: var(--premium-lime) !important;
  box-shadow: 0 0 0 4px rgba(236,244,0,.10), 0 0 18px rgba(236,244,0,.28);
}

/* ============================================================
   Revisi — Kurikulum Pendidikan + header artikel normal
   ============================================================ */

.curriculum-card-grid .curriculum-card {
  min-height: 100%;
}

.curriculum-detail-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(236,244,0,.20), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(16,185,91,.18), transparent 26rem),
    linear-gradient(180deg, #f7fff9 0%, #ffffff 100%);
}

.curriculum-detail-panel {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: stretch;
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid rgba(0,109,54,.12);
  border-radius: clamp(28px, 4vw, 44px);
  background: rgba(255,255,255,.86);
  box-shadow: 0 28px 80px rgba(0,109,54,.12);
}

.curriculum-detail-copy h2 {
  margin: 10px 0 14px;
  color: var(--premium-green-3);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.curriculum-detail-copy p {
  color: var(--premium-muted);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.7;
}

.curriculum-detail-list {
  display: grid;
  gap: 14px;
}

.curriculum-detail-list article {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(0,109,54,.12);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,255,244,.86));
  box-shadow: 0 16px 42px rgba(0,109,54,.08);
}

.curriculum-detail-list strong {
  display: block;
  margin-bottom: 8px;
  color: var(--premium-green-3);
  font-family: "Sora", sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
}

.curriculum-detail-list p {
  margin: 0;
  color: var(--premium-muted);
  line-height: 1.65;
}

/* Header/topbar untuk halaman artikel & blog-news — DIHAPUS.
   Halaman ini sekarang mengikuti header Beranda (aturan di index.php
   body.site & body.site:not(.is-home)). */

body.is-inner.is-article-page .section.admin-edit-scope,
body.is-inner.is-blog-news .section.admin-edit-scope {
  padding-top: clamp(26px, 3.8vw, 54px) !important;
}

@media (max-width: 900px) {
  .curriculum-detail-panel {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Revisi dashboard content — section dinamis + halaman sekolah
   ============================================================ */

.dynamic-content-section .section-manage-pill {
  position: absolute;
  top: 18px;
  right: clamp(18px, 4vw, 58px);
}

.dynamic-content-section .news-grid {
  align-items: stretch;
}

.dynamic-content-section .news-card {
  height: 100%;
}

.dynamic-content-section .news-card p,
.dynamic-content-section .ekskul-body p,
.dynamic-content-section .testimonial-quote-bold {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.school-page-hero {
  overflow: hidden;
  isolation: isolate;
}

.school-page-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% 45%;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(236,244,0,.32), rgba(0,153,68,.16) 45%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
}

.school-page-hero-galeri::before { content: "GALERI" !important; }
.school-page-hero-pengumuman::before { content: "INFO" !important; }
.school-page-hero-kontak::before { content: "KONTAK" !important; }
.school-page-hero-fasilitas::before { content: "FASILITAS" !important; }
.school-page-hero-program-unggulan::before { content: "PROGRAM" !important; }
.school-page-hero-program-unggulan-icc::before { content: "ICC" !important; }
.school-page-hero-program-unggulan-tcc::before { content: "TCC" !important; }
.school-page-hero-program-unggulan-pesantren::before { content: "PESANTREN" !important; }

/* ============================================
 * Program Unggulan — kartu grid halaman parent
 * ============================================ */
.program-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    margin-top: clamp(24px, 3vw, 36px);
}
.program-card {
    position: relative;
    padding: clamp(24px, 2.6vw, 34px);
    border-radius: 28px;
    border: 1px solid rgba(0,109,54,.16);
    background:
        linear-gradient(160deg, rgba(255,255,255,.98), rgba(245,255,246,.92)),
        radial-gradient(circle at 90% 0%, rgba(236,244,0,.24), transparent 50%);
    box-shadow: 0 24px 60px rgba(7,95,43,.10);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(7,95,43,.16);
}
.program-card-num {
    font-family: "Sora", sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
    color: rgba(0,109,54,.16);
    letter-spacing: -.04em;
}
.program-card-label {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,153,68,.10);
    color: var(--green, #009944);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.program-card h3 {
    margin: 0;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    color: var(--green-deep, #006d36);
    line-height: 1.25;
}
.program-card p {
    margin: 0;
    color: var(--ink-soft, #354a41);
    line-height: 1.6;
}
.program-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold, #b8860b);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .02em;
}
.program-card-link:hover { color: var(--green-deep, #006d36); }
.program-card-link svg { transition: transform .25s ease; }
.program-card-link:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
    .program-cards-grid { grid-template-columns: 1fr; }
}

/* ============================================
 * Fasilitas — grid kartu foto + judul
 * ============================================ */
.fasilitas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    margin-top: clamp(24px, 3vw, 36px);
}
.fasilitas-card {
    background: #fff;
    border: 1px solid rgba(0,109,54,.12);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(7,95,43,.10);
    transition: transform .3s ease, box-shadow .3s ease;
}
.fasilitas-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 66px rgba(7,95,43,.16);
}
.fasilitas-card figure {
    margin: 0;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #06351f, #009944);
}
.fasilitas-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.fasilitas-card:hover img { transform: scale(1.04); }
.fasilitas-card figcaption {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    backdrop-filter: blur(6px);
}
.fasilitas-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fasilitas-card-body h3 {
    margin: 0;
    color: var(--green-deep, #006d36);
    font-size: 1.15rem;
    line-height: 1.3;
}
.fasilitas-card-body p {
    margin: 0;
    color: var(--ink-soft, #354a41);
    line-height: 1.6;
}
@media (max-width: 1100px) {
    .fasilitas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .fasilitas-grid { grid-template-columns: 1fr; }
}

.school-page-section {
  position: relative;
}

.school-feature-grid,
.school-notice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.school-feature-card,
.school-notice-grid article,
.school-split-panel,
.school-contact-panel,
.school-contact-card {
  border: 1px solid rgba(0,109,54,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,255,246,.9)),
    radial-gradient(circle at 18% 0%, rgba(236,244,0,.18), transparent 34%);
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(7,95,43,.10);
}

.school-feature-card,
.school-notice-grid article {
  padding: clamp(24px, 3vw, 34px);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.school-feature-card:hover,
.school-notice-grid article:hover {
  transform: translateY(-6px);
  border-color: rgba(0,153,68,.32);
  box-shadow: 0 32px 74px rgba(7,95,43,.16);
}

.school-feature-card span,
.school-notice-grid article strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--premium-green), var(--premium-green-2));
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.school-feature-card h3,
.school-notice-grid article h3 {
  margin: 20px 0 12px;
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.18rem, 1.6vw, 1.55rem);
}

.school-feature-card p,
.school-notice-grid article p,
.school-split-panel p,
.school-contact-panel p {
  color: var(--premium-ink-2);
  line-height: 1.72;
}

.school-split-panel,
.school-contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  padding: clamp(28px, 4vw, 54px);
}

.school-split-panel h2,
.school-contact-panel h2 {
  margin-top: 16px;
  color: var(--premium-green-2);
  font-size: clamp(1.6rem, 3vw, 2.65rem);
}

.school-mini-list {
  display: grid;
  gap: 12px;
}

.school-mini-list span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 18px;
  background: rgba(0,153,68,.08);
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-weight: 800;
}

.school-mini-list span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--premium-lime);
  box-shadow: 0 0 0 6px rgba(236,244,0,.18);
}

.school-gallery-mosaic {
  display: grid;
  grid-template-columns: 1.15fr .9fr .95fr 1.05fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.school-gallery-mosaic-5 {
  grid-template-columns: 1.05fr .95fr .95fr 1.05fr .95fr;
}

.school-gallery-mosaic-5 figure:nth-child(5) {
  transform: translateY(-6px);
}

.school-gallery-mosaic figure {
  position: relative;
  min-height: 330px;
  margin: 0;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 64px rgba(7,95,43,.16);
}

.school-gallery-mosaic figure:nth-child(2) {
  transform: translateY(28px);
}

.school-gallery-mosaic figure:nth-child(3) {
  transform: translateY(-12px);
}

.school-gallery-mosaic figure:nth-child(4) {
  transform: translateY(18px);
}

/* Frame galeri dapat diklik: seluruh area gambar menjadi tautan menuju
   section galerinya masing-masing. */
.school-gallery-mosaic .school-gallery-link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  cursor: pointer;
}

.school-gallery-mosaic .school-gallery-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,60,29,.42) 0%, rgba(0,109,54,0) 42%, rgba(0,60,29,.5) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}

.school-gallery-mosaic figure:hover .school-gallery-link::after,
.school-gallery-mosaic .school-gallery-link:focus-visible::after {
  opacity: 1;
}

.school-gallery-mosaic .school-gallery-link:focus-visible {
  outline: 3px solid var(--premium-lime, #ecf400);
  outline-offset: -5px;
}

/* Lencana "Lihat" muncul saat frame disentuh kursor.
   Diletakkan di sudut KANAN ATAS supaya tidak bertumpuk dengan figcaption
   yang berada di kiri bawah (judul frame bisa cukup panjang sementara
   lebar frame hanya sekitar 230-260px). */
.school-gallery-mosaic .school-gallery-cta {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--premium-green-2, #006d36);
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
}

.school-gallery-mosaic .school-gallery-cta svg {
  width: 15px;
  height: 15px;
}

.school-gallery-mosaic figure:hover .school-gallery-cta,
.school-gallery-mosaic .school-gallery-link:focus-visible .school-gallery-cta {
  opacity: 1;
  transform: translateY(0);
}

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

.school-gallery-mosaic figure:hover img {
  transform: scale(1.06);
}

.school-gallery-mosaic figure {
  transition: transform .45s ease, box-shadow .45s ease;
}

/* Frame terangkat sedikit saat disentuh kursor tanpa menghapus offset
   mosaik tiap kolom (offset diterapkan ulang per posisi di bawah). */
.school-gallery-mosaic figure:nth-child(1):hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 74px rgba(7,95,43,.26);
}

.school-gallery-mosaic figure:nth-child(2):hover {
  transform: translateY(20px);
  box-shadow: 0 32px 74px rgba(7,95,43,.26);
}

.school-gallery-mosaic figure:nth-child(3):hover {
  transform: translateY(-20px);
  box-shadow: 0 32px 74px rgba(7,95,43,.26);
}

.school-gallery-mosaic figure:nth-child(4):hover {
  transform: translateY(10px);
  box-shadow: 0 32px 74px rgba(7,95,43,.26);
}

.school-gallery-mosaic-5 figure:nth-child(5):hover {
  transform: translateY(-14px);
  box-shadow: 0 32px 74px rgba(7,95,43,.26);
}

/* Target anchor tidak tertutup header sticky saat frame diklik. */
#galeri-video-publikasi,
#galeri-kegiatan-harian,
#galeri-prestasi,
#galeri-agenda-keagamaan,
#galeri-ekskul {
  scroll-margin-top: 96px;
}

.school-gallery-mosaic figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.school-contact-panel {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}

.school-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.school-contact-card {
  padding: clamp(24px, 3vw, 34px);
}

.school-contact-card span {
  display: block;
  margin-top: 18px;
  color: var(--gold-deep);
  font-family: "Sora", sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.school-contact-card span:first-child {
  margin-top: 0;
}

.school-contact-card p {
  margin: 8px 0 0;
}

.school-contact-card a {
  color: var(--premium-green-2);
  font-weight: 800;
}

@media (max-width: 1100px) {
  .school-gallery-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .school-feature-grid,
  .school-notice-grid,
  .school-split-panel,
  .school-contact-panel,
  .school-gallery-mosaic {
    grid-template-columns: 1fr;
  }

  .school-gallery-mosaic figure,
  .school-gallery-mosaic figure:nth-child(2),
  .school-gallery-mosaic figure:nth-child(3),
  .school-gallery-mosaic figure:nth-child(4),
  .school-gallery-mosaic figure:nth-child(5),
  .school-gallery-mosaic figure:nth-child(1):hover,
  .school-gallery-mosaic figure:nth-child(2):hover,
  .school-gallery-mosaic figure:nth-child(3):hover,
  .school-gallery-mosaic figure:nth-child(4):hover,
  .school-gallery-mosaic-5 figure:nth-child(5):hover {
    min-height: 260px;
    transform: none;
  }

  /* Di layar sentuh lencana "Lihat" ditampilkan permanen supaya jelas
     bahwa frame dapat diklik (tidak ada status hover). */
  .school-gallery-mosaic .school-gallery-cta {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Photo Gallery — 13 section galeri foto (menarik & modern)
   ============================================================ */
.photo-gallery-section {
  position: relative;
  overflow: hidden;
  --pg-accent: #0d8f4a;
  --pg-accent-2: #1fb573;
}
.photo-gallery-section::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--pg-accent-2) 22%, transparent), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.photo-gallery-section::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--pg-accent) 18%, transparent), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.photo-gallery-section > .container { position: relative; z-index: 1; }

.photo-gallery-head {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.pg-head-left h2 {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.15;
  margin: 14px 0 12px;
  color: var(--premium-dark, #14261c);
  letter-spacing: -.01em;
}
.pg-lead {
  color: #4a5c53;
  max-width: 620px;
  font-size: .98rem;
  line-height: 1.65;
}
.pg-lead strong { color: var(--pg-accent); font-weight: 600; }

.pg-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pg-accent) 12%, #fff), color-mix(in srgb, var(--pg-accent-2) 8%, #fff));
  color: var(--pg-accent);
  font-family: "Sora", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 25%, transparent);
}
.pg-badge-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2));
  color: #fff;
}
.pg-badge-icon svg { width: 16px; height: 16px; }

.pg-head-right {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
}
.pg-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(15, 40, 25, .08);
  border: 1px solid color-mix(in srgb, var(--pg-accent) 15%, transparent);
}
.pg-counter-num {
  font-family: "Sora", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--pg-accent);
  line-height: 1;
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pg-counter-label {
  font-family: "Sora", sans-serif;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6b7a72;
  line-height: 1.3;
}
.pg-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  color: #6b7a72;
}
.pg-meta span {
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 40, 25, .08);
}

/* ============ SLIDER ============ */
.pg-slider {
  position: relative;
}
.pg-slider-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  perspective: 1600px;
}
.pg-slider-track {
  position: relative;
  width: 100%;
}
.pg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
  will-change: transform, opacity, filter;
}
.pg-slide:first-child { position: relative; }
.pg-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.pg-slide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: 14px;
}
.pg-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #eef2ef;
  box-shadow: 0 14px 36px rgba(15, 40, 25, .12);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, opacity .45s ease;
  isolation: isolate;
  transform-origin: center;
}
.pg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
  filter: saturate(1.02);
}
.pg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(15, 40, 25, .22);
}
.pg-card:hover img { transform: scale(1.08); filter: saturate(1.15); }
.pg-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pg-accent) 0%, transparent), color-mix(in srgb, var(--pg-accent-2) 60%, transparent));
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 1;
  mix-blend-mode: multiply;
}
.pg-card:hover::after { opacity: .35; }

/* Entrance animation per-card when slide becomes active */
.pg-slide.is-active .pg-card {
  animation: pg-card-in .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--pg-delay, 0ms);
}
@keyframes pg-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ SLIDER CONTROLS ============ */
.pg-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.pg-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 25%, transparent);
  background: #fff;
  color: var(--pg-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 40, 25, .10);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.pg-nav:hover {
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2));
  color: #fff;
  transform: translateY(-2px);
}
.pg-nav svg { width: 20px; height: 20px; }
.pg-dots {
  display: inline-flex;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(15, 40, 25, .08);
}
.pg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--pg-accent) 25%, #d6dcd7);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, width .25s ease;
  padding: 0;
}
.pg-dot.is-active {
  width: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2));
}

/* ============ SLIDE TRANSITION EFFECTS ============ */
/* fade — default, no extra transform */
.pg-effect-fade .pg-slide { transform: translateY(0); }

/* slide horizontal */
.pg-effect-slide .pg-slide:not(.is-active) { transform: translateX(60px); }
.pg-effect-slide .pg-slide.is-active { transform: translateX(0); }

/* zoom */
.pg-effect-zoom .pg-slide:not(.is-active) { transform: scale(.86); }
.pg-effect-zoom .pg-slide.is-active { transform: scale(1); }

/* flip */
.pg-effect-flip .pg-slide:not(.is-active) { transform: rotateY(90deg); }
.pg-effect-flip .pg-slide.is-active { transform: rotateY(0deg); }
.pg-effect-flip .pg-slide-grid { transform-style: preserve-3d; }

/* mosaic — cards enter staggered from different directions */
.pg-effect-mosaic .pg-slide.is-active .pg-card:nth-child(odd)  { animation-name: pg-mosaic-left; }
.pg-effect-mosaic .pg-slide.is-active .pg-card:nth-child(even) { animation-name: pg-mosaic-right; }
@keyframes pg-mosaic-left  { from { opacity: 0; transform: translateX(-40px) rotate(-4deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes pg-mosaic-right { from { opacity: 0; transform: translateX( 40px) rotate( 4deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }

/* rotate */
.pg-effect-rotate .pg-slide:not(.is-active) { transform: rotate(-6deg) scale(.9); }
.pg-effect-rotate .pg-slide.is-active { transform: rotate(0) scale(1); }

/* blur */
.pg-effect-blur .pg-slide:not(.is-active) { filter: blur(14px); opacity: 0; }
.pg-effect-blur .pg-slide.is-active { filter: blur(0); }

/* stack — cards fly in from bottom stacked */
.pg-effect-stack .pg-slide.is-active .pg-card { animation-name: pg-stack-in; }
@keyframes pg-stack-in { from { opacity: 0; transform: translateY(60px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* cube */
.pg-effect-cube .pg-slide:not(.is-active) { transform: rotateX(-70deg); transform-origin: bottom; }
.pg-effect-cube .pg-slide.is-active { transform: rotateX(0deg); }

/* wave — sequential card wave */
.pg-effect-wave .pg-slide.is-active .pg-card { animation-name: pg-wave-in; }
@keyframes pg-wave-in {
  0%   { opacity: 0; transform: translateY(30px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* iris */
.pg-effect-iris .pg-slide:not(.is-active) { clip-path: circle(0% at 50% 50%); }
.pg-effect-iris .pg-slide.is-active { clip-path: circle(140% at 50% 50%); transition: clip-path .8s ease, opacity .5s ease; }

/* split */
.pg-effect-split .pg-slide:not(.is-active) { clip-path: inset(0 50% 0 50%); opacity: 0; }
.pg-effect-split .pg-slide.is-active { clip-path: inset(0 0 0 0); transition: clip-path .8s ease, opacity .5s ease; }

/* pixel */
.pg-effect-pixel .pg-slide:not(.is-active) { filter: blur(20px) contrast(1.4); opacity: 0; transform: scale(1.05); }
.pg-effect-pixel .pg-slide.is-active { filter: blur(0) contrast(1); transform: scale(1); }

.pg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(10, 25, 18, 0) 40%, rgba(10, 25, 18, .78) 100%);
  color: #fff;
  z-index: 2;
}
/* legacy hover gradient (kept for compatibility with .pg-card via ::after already defined above) */

.pg-index {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--pg-accent);
  font-family: "Sora", sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.pg-caption {
  transform: translateY(6px);
  opacity: .96;
  transition: transform .45s ease, opacity .45s ease;
}
.pg-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pg-accent-2) 78%, transparent);
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pg-caption h3 {
  font-family: "Sora", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.pg-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  opacity: 0;
  transform: scale(.7) rotate(-45deg);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  z-index: 3;
}
.pg-zoom svg { width: 18px; height: 18px; }
.pg-card:hover .pg-zoom { opacity: 1; transform: scale(1) rotate(0); }
.pg-card:hover .pg-caption { transform: translateY(0); opacity: 1; }

@media (max-width: 1100px) {
  .pg-slide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 180px;
  }
}

@media (max-width: 780px) {
  .photo-gallery-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .pg-head-right { justify-content: flex-start; }
  .pg-slide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 160px;
    gap: 10px;
  }
  .pg-caption h3 { font-size: .95rem; }
  .pg-slider-controls { gap: 12px; }
  .pg-nav { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .pg-slide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
  }
}

/* ============================================================
   Halaman Profil Sekolah — 3 section video kreatif
   ============================================================ */

body.is-profile-page {
  background:
    radial-gradient(circle at 9% 18%, rgba(236,244,0,.18), transparent 25rem),
    radial-gradient(circle at 100% 36%, rgba(0,153,68,.12), transparent 28rem),
    #fffaf0;
}

.profile-page-hero-creative {
  min-height: 78vh;
  display: flex;
  align-items: end;
  background:
    linear-gradient(135deg, rgba(6,53,31,.92), rgba(0,153,68,.72)),
    url("../images/campus-3.jpg") center/cover no-repeat !important;
}

.profile-page-hero-creative::before {
  content: "JELAJAH" !important;
}

.profile-page-hero-creative::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(6,53,31,.96), rgba(6,53,31,.45) 48%, rgba(236,244,0,.16)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 96px);
  pointer-events: none;
}

.profile-page-hero-creative .profile-replacement-inner {
  align-items: center;
}

.profile-hero-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.profile-hero-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.profile-hero-jump a:hover {
  transform: translateY(-3px);
  background: var(--premium-lime);
  color: var(--premium-green-2);
}

.profile-story-sections {
  position: relative;
  overflow: hidden;
}

.profile-story-sections::before {
  content: "";
  position: absolute;
  left: clamp(24px, 6vw, 84px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(0,109,54,.22), rgba(236,244,0,.6), transparent);
  pointer-events: none;
}

body.is-profile-page #section-profil.profile-creative-section,
body.is-profile-page #section-sejarah.profile-creative-section,
body.is-profile-page #section-visimisi.profile-creative-section {
  grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  gap: clamp(8px, 1vw, 18px);
  margin: clamp(22px, 4vw, 54px) auto;
  width: min(1180px, calc(100% - 32px));
  min-height: 0;
  padding: clamp(24px, 4vw, 48px) !important;
  border: 1px solid rgba(0,109,54,.13);
  border-radius: clamp(28px, 4vw, 48px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.66)),
    radial-gradient(circle at 0% 0%, rgba(236,244,0,.22), transparent 19rem) !important;
  box-shadow: 0 34px 90px rgba(7,95,43,.12);
}

body.is-profile-page #section-sejarah.profile-creative-section {
  background:
    linear-gradient(135deg, rgba(6,53,31,.98), rgba(0,126,61,.88)),
    radial-gradient(circle at 100% 0%, rgba(236,244,0,.22), transparent 20rem) !important;
}

.profile-creative-section::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(0,109,54,.10);
  border-radius: calc(clamp(28px, 4vw, 48px) - 10px);
  pointer-events: none;
}

#section-sejarah.profile-creative-section::after {
  border-color: rgba(255,255,255,.13);
}

.profile-creative-section .profile-video-frame {
  width: min(100%, 450px);
  transform: rotate(-1.3deg);
  transition: transform .35s ease, box-shadow .35s ease;
}

.profile-creative-section.profile-video-right .profile-video-frame {
  transform: rotate(1.3deg);
}

.profile-creative-section:hover .profile-video-frame {
  transform: rotate(0deg) translateY(-6px);
}

.profile-creative-section .profile-video-shell {
  aspect-ratio: 4 / 3;
  border-radius: 28px;
}

.profile-creative-section .profile-video-shell video {
  filter: saturate(1.08) contrast(1.04);
}

.profile-creative-section .profile-copy {
  max-width: 720px;
}

.profile-creative-section .profile-copy .eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--gold-deep) !important;
}

#section-sejarah .profile-copy .eyebrow {
  color: var(--premium-lime) !important;
}

.profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.profile-chip-row span,
.profile-timeline-mini span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,153,68,.08);
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: .82rem;
  font-weight: 850;
}

.profile-chip-row span::before,
.profile-timeline-mini span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--premium-lime);
  box-shadow: 0 0 0 6px rgba(236,244,0,.18);
}

.profile-timeline-mini {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.profile-timeline-mini span {
  justify-content: flex-start;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color: #fff;
}

.profile-timeline-mini strong {
  color: var(--premium-lime);
}

.vision-mission-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  margin-top: 22px;
}

.vision-mission-grid article {
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid rgba(0,109,54,.14);
  border-radius: 28px;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.vision-mission-grid strong {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vision-mission-grid p,
.vision-mission-grid ul {
  margin: 0;
}

.vision-mission-grid ul {
  padding-left: 1.1rem;
}

@media (max-width: 900px) {
  .profile-page-hero-creative {
    min-height: 68vh;
  }

  .profile-story-sections::before {
    display: none;
  }

  body.is-profile-page #section-profil.profile-creative-section,
  body.is-profile-page #section-sejarah.profile-creative-section,
  body.is-profile-page #section-visimisi.profile-creative-section,
  .vision-mission-grid {
    grid-template-columns: 1fr;
  }

  .profile-creative-section.profile-video-right .profile-video-frame,
  .profile-creative-section .profile-video-frame {
    order: 0;
    transform: none;
  }
}

/* Versi alternatif: cinematic neon editorial + dashboard editable */
.profile-neo-hero {
  min-height: 88vh;
  align-items: center;
  padding-top: clamp(126px, 14vw, 178px) !important;
  padding-bottom: clamp(62px, 7vw, 96px) !important;
  background:
    linear-gradient(100deg, rgba(0,28,17,.98) 0%, rgba(0,80,42,.84) 48%, rgba(4,126,63,.58) 100%),
    url("../images/campus-1.jpg") center/cover no-repeat !important;
}

.profile-neo-hero .section-edit-btn,
.profile-neo-card .section-edit-btn {
  z-index: 7;
}

.profile-neo-hero::before {
  content: "PROFIL" !important;
  right: -4vw;
  bottom: -2vw;
  color: rgba(236,244,0,.12);
  text-shadow: 0 0 44px rgba(236,244,0,.18);
}

.profile-neo-hero::after {
  background:
    radial-gradient(circle at 18% 18%, rgba(236,244,0,.34), transparent 18rem),
    radial-gradient(circle at 92% 66%, rgba(255,255,255,.18), transparent 20rem),
    linear-gradient(120deg, rgba(0,26,14,.86), rgba(0,88,44,.42) 54%, rgba(236,244,0,.10)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.13) 0 1px, transparent 1px 34px);
}

.profile-neo-hero .profile-replacement-copy h1 {
  max-width: 900px;
  font-size: clamp(3.2rem, 8.2vw, 8.8rem);
  line-height: .82;
  letter-spacing: -.085em;
}

.profile-neo-hero .profile-replacement-copy p {
  max-width: 720px;
  font-size: clamp(1.06rem, 1.55vw, 1.38rem);
}

.profile-neo-hero .profile-replacement-stats {
  transform: rotate(-2deg);
}

.profile-neo-hero .profile-replacement-stats div {
  grid-template-columns: 92px 1fr;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}

.profile-neo-sections {
  padding: clamp(34px, 5vw, 70px) 0 clamp(62px, 8vw, 110px);
  background:
    radial-gradient(circle at 5% 8%, rgba(236,244,0,.22), transparent 21rem),
    linear-gradient(180deg, #fff8df, #f7fff9 42%, #fff);
}

.profile-neo-sections::before {
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(0,109,54,0), rgba(0,109,54,.18), rgba(236,244,0,.85), rgba(0,109,54,0));
}

body.is-profile-page #section-profil.profile-neo-card,
body.is-profile-page #section-sejarah.profile-neo-card,
body.is-profile-page #section-visimisi.profile-neo-card {
  width: min(1240px, calc(100% - 34px));
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(8px, 1vw, 18px) !important;
  padding: clamp(18px, 2.8vw, 34px) !important;
  border-radius: clamp(34px, 5vw, 60px);
  border: 1px solid rgba(0,109,54,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.62)),
    radial-gradient(circle at 0 0, rgba(236,244,0,.28), transparent 18rem) !important;
  box-shadow:
    0 34px 90px rgba(7,95,43,.13),
    inset 0 1px 0 rgba(255,255,255,.82);
}

body.is-profile-page #section-sejarah.profile-neo-card {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  background:
    radial-gradient(circle at 18% 20%, rgba(236,244,0,.24), transparent 19rem),
    linear-gradient(135deg, rgba(4,40,25,.98), rgba(0,122,62,.92)) !important;
  box-shadow:
    0 38px 110px rgba(0,55,29,.26),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.profile-neo-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(236,244,0,.56), rgba(0,153,68,.05), rgba(0,109,54,.20));
  filter: blur(14px);
  opacity: .55;
}

.profile-neo-card::after {
  inset: 14px;
  border-radius: calc(clamp(34px, 5vw, 60px) - 12px);
  border-style: dashed;
}

.profile-neo-card .profile-video-frame {
  width: 100%;
  align-self: stretch;
  padding: 10px;
  border-radius: 38px;
  transform: none !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.48)),
    radial-gradient(circle at 100% 0, rgba(236,244,0,.24), transparent 12rem);
}

.profile-neo-dark .profile-video-frame {
  order: 2;
}

.profile-neo-card .profile-video-shell {
  height: 100%;
  min-height: 390px;
  aspect-ratio: auto;
  border-radius: 30px;
}

.profile-neo-card .profile-video-shell video {
  transform: scale(1.01);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

.profile-neo-card:hover .profile-video-shell video {
  transform: scale(1.08);
  filter: saturate(1.2) contrast(1.08);
}

.profile-neo-card .profile-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3.3vw, 48px) clamp(6px, 1vw, 14px);
  max-width: none !important;
}

.profile-section-number {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  right: clamp(24px, 4vw, 52px);
  color: rgba(0,109,54,.10);
  font-family: "Sora", sans-serif;
  font-size: clamp(4.8rem, 11vw, 10rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.08em;
  pointer-events: none;
}

.profile-neo-dark .profile-section-number {
  color: rgba(255,255,255,.10);
}

.profile-neo-card .profile-copy h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(2.2rem, 4.8vw, 5.15rem) !important;
  letter-spacing: -.07em;
}

.profile-neo-card .profile-copy p,
.profile-neo-card .profile-copy li {
  position: relative;
  z-index: 1;
  font-size: clamp(1.02rem, 1.18vw, 1.18rem) !important;
}

.profile-neo-dark .profile-chip-row span,
.profile-neo-dark .profile-timeline-mini span {
  background: rgba(255,255,255,.11);
}

.profile-neo-card .vision-mission-grid article {
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
    radial-gradient(circle at 100% 0, rgba(236,244,0,.20), transparent 10rem);
}

@media (max-width: 900px) {
  .profile-neo-hero {
    min-height: 74vh;
  }

  .profile-neo-hero .profile-replacement-stats {
    transform: none;
  }

  body.is-profile-page #section-profil.profile-neo-card,
  body.is-profile-page #section-sejarah.profile-neo-card,
  body.is-profile-page #section-visimisi.profile-neo-card {
    grid-template-columns: 1fr;
  }

  .profile-neo-dark .profile-video-frame {
    order: 0;
  }

  .profile-neo-card .profile-video-shell {
    min-height: 260px;
  }

  .profile-section-number {
    top: 16px;
    right: 20px;
    font-size: clamp(4rem, 18vw, 7rem);
  }
}

/* Profil Sekolah: video dibuat proporsi HP/portrait */
body.is-profile-page .profile-neo-card .profile-video-frame {
  width: min(100%, 330px);
  max-width: 330px;
  align-self: center;
  justify-self: center;
  padding: 12px;
  border-radius: 46px;
}

body.is-profile-page .profile-neo-card .profile-video-shell {
  aspect-ratio: 9 / 16;
  height: auto;
  min-height: 0;
  border-radius: 36px;
}

body.is-profile-page .profile-neo-card .profile-video-frame::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 3;
  width: 72px;
  height: 8px;
  border-radius: 999px;
  background: rgba(6,53,31,.82);
  transform: translateX(-50%);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

body.is-profile-page .profile-neo-card .profile-video-caption {
  left: 22px;
  right: 22px;
  bottom: 22px;
}

@media (max-width: 900px) {
  body.is-profile-page .profile-neo-card .profile-video-frame {
    width: min(100%, 292px);
  }
}

/* Profil Sekolah — frame Visi & Misi dibuat lebih luas */
body.is-profile-page #section-visimisi.profile-neo-card {
  width: min(1440px, calc(100% - 24px));
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 76px);
  padding: clamp(22px, 3.6vw, 54px) !important;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy {
  max-width: none;
  padding-right: clamp(10px, 2vw, 28px);
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy h2 {
  max-width: 980px;
  font-size: clamp(2.35rem, 4.7vw, 5.2rem) !important;
}

body.is-profile-page #section-visimisi .vision-mission-grid {
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: stretch;
}

body.is-profile-page #section-visimisi .vision-mission-grid article {
  padding: clamp(22px, 2.8vw, 36px);
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child p {
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.28rem) !important;
  font-weight: 800;
  line-height: 1.55 !important;
  letter-spacing: -.02em;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding-left: 0;
  list-style: none;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) li {
  position: relative;
  min-height: 100%;
  padding: 13px 14px 13px 42px;
  border: 1px solid rgba(0,109,54,.11);
  border-radius: 18px;
  background: rgba(0,153,68,.045);
  line-height: 1.55 !important;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) li::before {
  content: counter(mission);
  counter-increment: mission;
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--premium-lime);
  color: var(--premium-green-2);
  font-family: "Sora", sans-serif;
  font-size: .68rem;
  font-weight: 900;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) ul {
  counter-reset: mission;
}

@media (max-width: 1120px) {
  body.is-profile-page #section-visimisi .vision-mission-grid,
  body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body.is-profile-page #section-visimisi.profile-neo-card {
    grid-template-columns: 1fr;
    width: min(100% - 24px, 760px);
  }
}

/* Revisi layout Visi & Misi: Visi di atas, Misi di bawah */
body.is-profile-page #section-visimisi .vision-mission-grid {
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 28px);
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child {
  position: relative;
  overflow: hidden;
  border-color: rgba(236,244,0,.42);
  background:
    radial-gradient(circle at 100% 0, rgba(236,244,0,.32), transparent 12rem),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(247,255,249,.76));
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child::after {
  content: "VISI";
  position: absolute;
  right: 18px;
  bottom: -8px;
  color: rgba(0,109,54,.07);
  font-family: "Sora", sans-serif;
  font-size: clamp(3.4rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -.08em;
  pointer-events: none;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.66)),
    radial-gradient(circle at 0 0, rgba(0,153,68,.12), transparent 16rem);
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2)::after {
  content: "MISI";
  position: absolute;
  right: 18px;
  top: -10px;
  color: rgba(0,109,54,.055);
  font-family: "Sora", sans-serif;
  font-size: clamp(3.4rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -.08em;
  pointer-events: none;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child p {
  max-width: 920px;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
  body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) ul {
    grid-template-columns: 1fr;
  }
}

/* Final layout Visi & Misi: video di atas, frame Visi/Misi melebar penuh di bawah */
body.is-profile-page #section-visimisi.profile-neo-card {
  grid-template-columns: 1fr;
  width: min(1440px, calc(100% - 24px));
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-video-frame {
  order: 1;
  width: min(100%, 330px);
  max-width: 330px;
  justify-self: center;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy {
  order: 2;
  width: 100%;
  max-width: none;
  padding: clamp(18px, 3vw, 38px) clamp(10px, 2.4vw, 30px);
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy h2,
body.is-profile-page #section-visimisi.profile-neo-card .profile-copy .eyebrow {
  text-align: center;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy h2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

body.is-profile-page #section-visimisi .vision-mission-grid {
  width: 100%;
  max-width: none;
}

body.is-profile-page #section-visimisi .vision-mission-grid article {
  width: 100%;
}

/* ============================================================
   Revisi Visi & Misi — frame hijau/mint selaras template
   ============================================================ */
body.is-profile-page #section-visimisi.profile-neo-card {
  width: min(1320px, calc(100% - 28px));
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "phone heading"
    "phone vision"
    "mission mission";
  align-items: start;
  gap: clamp(18px, 2.6vw, 36px) clamp(28px, 4vw, 72px);
  padding: clamp(30px, 4.5vw, 62px) !important;
  border-radius: 42px;
  background:
    radial-gradient(circle at 9% 12%, rgba(0,153,68,.16), transparent 18rem),
    radial-gradient(circle at 92% 80%, rgba(16,185,91,.14), transparent 20rem),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,255,246,.88)) !important;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-video-frame {
  grid-area: phone;
  order: initial;
  width: min(100%, 270px);
  max-width: 270px;
  align-self: center;
  justify-self: center;
  padding: 10px;
  border-radius: 32px;
  box-shadow: 0 28px 74px rgba(7,95,43,.16);
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-video-shell {
  border-radius: 24px;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy {
  display: contents;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy .eyebrow,
body.is-profile-page #section-visimisi.profile-neo-card .profile-copy h2 {
  grid-area: heading;
  text-align: left;
  z-index: 2;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy .eyebrow {
  align-self: start;
  margin-top: 4px;
  margin-bottom: 0;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-copy h2 {
  align-self: start;
  margin-top: 28px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 760px;
  color: #05351f;
  font-size: clamp(2.2rem, 4.4vw, 5.25rem) !important;
  line-height: .92 !important;
}

body.is-profile-page #section-visimisi.profile-neo-card .profile-section-number {
  top: 34px;
  right: 52px;
  color: rgba(0,109,54,.07);
  font-size: clamp(5.5rem, 11vw, 10rem);
}

body.is-profile-page #section-visimisi .vision-mission-grid {
  display: contents;
}

body.is-profile-page #section-visimisi .vision-mission-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,109,54,.16);
  border-radius: 40px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 22px 58px rgba(0,109,54,.13);
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child {
  grid-area: vision;
  min-height: 210px;
  padding: clamp(22px, 2.8vw, 34px);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 14rem),
    linear-gradient(135deg, var(--premium-green-2), var(--premium-green));
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) {
  grid-area: mission;
  min-height: 310px;
  padding: clamp(24px, 3.2vw, 42px);
  background:
    radial-gradient(circle at 0% 0%, rgba(0,153,68,.12), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,255,244,.86));
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child::after,
body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2)::after {
  display: none;
}

body.is-profile-page #section-visimisi .vision-mission-grid strong {
  margin-bottom: 14px;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  letter-spacing: -.035em;
  text-transform: none;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child strong,
body.is-profile-page #section-visimisi .vision-mission-grid article:first-child p {
  color: #ffffff;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) strong {
  color: var(--premium-green-2);
}

body.is-profile-page #section-visimisi .vision-mission-grid article:first-child p {
  max-width: 100%;
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1rem, 1.18vw, 1.22rem) !important;
  font-weight: 700;
  line-height: 1.55 !important;
  letter-spacing: -.01em;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) ul {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) li {
  border-color: rgba(0,109,54,.14);
  background: rgba(255,255,255,.76);
  color: var(--premium-ink-2);
  font-size: .94rem !important;
  box-shadow: 0 10px 24px rgba(0,109,54,.07);
}

body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) li::before {
  background: linear-gradient(135deg, var(--premium-green-2), var(--premium-green-3));
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0,109,54,.20);
}

@media (max-width: 980px) {
  body.is-profile-page #section-visimisi.profile-neo-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "phone"
      "vision"
      "mission";
    width: min(100% - 24px, 760px);
  }

  body.is-profile-page #section-visimisi.profile-neo-card .profile-copy .eyebrow,
  body.is-profile-page #section-visimisi.profile-neo-card .profile-copy h2 {
    text-align: center;
  }

  body.is-profile-page #section-visimisi.profile-neo-card .profile-copy h2 {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.is-profile-page #section-visimisi .vision-mission-grid article:nth-child(2) ul {
    grid-template-columns: 1fr;
  }
  .hero-title {
  max-width: 22ch;
  white-space: normal;
}
}

/* =========================================================
   Custom request:
   - Header putih (scrolled/inner/blog): menu aktif hijau,
     sorot hover hijau transparan
   - Tagline "Islamic School" saat header putih → hitam
   ========================================================= */

/* 1) Menu aktif top-level = hijau ketika header putih */
body.is-home .site-header.is-scrolled .primary-nav > ul > li.current > a,
body.is-home .site-header.is-scrolled .primary-nav > ul > li.active > a,
body.is-home .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.is-active,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.active,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.current,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"],
body.is-inner .site-header .primary-nav > ul > li.current > a,
body.is-inner .site-header .primary-nav > ul > li.active > a,
body.is-inner .site-header .primary-nav > ul > li.alias-parent-active > a,
body.is-inner .site-header .primary-nav > ul > li > a.is-active,
body.is-inner .site-header .primary-nav > ul > li > a.active,
body.is-inner .site-header .primary-nav > ul > li > a.current,
body.is-inner .site-header .primary-nav > ul > li > a[aria-current="page"],
body.is-blog-news .site-header .primary-nav > ul > li.current > a,
body.is-blog-news .site-header .primary-nav > ul > li.active > a,
body.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a,
body.is-blog-news .site-header .primary-nav > ul > li > a.is-active,
body.is-blog-news .site-header .primary-nav > ul > li > a.active,
body.is-blog-news .site-header .primary-nav > ul > li > a.current,
body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"] {
  color: var(--premium-green-2) !important;
}

/* Garis bawah indikator aktif juga hijau */
body.is-home .site-header.is-scrolled .primary-nav > ul > li.current > a::after,
body.is-home .site-header.is-scrolled .primary-nav > ul > li.active > a::after,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.is-active::after,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.active::after,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.current::after,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"]::after,
body.is-inner .site-header .primary-nav > ul > li.current > a::after,
body.is-inner .site-header .primary-nav > ul > li.active > a::after,
body.is-inner .site-header .primary-nav > ul > li > a.is-active::after,
body.is-inner .site-header .primary-nav > ul > li > a.active::after,
body.is-inner .site-header .primary-nav > ul > li > a.current::after,
body.is-inner .site-header .primary-nav > ul > li > a[aria-current="page"]::after,
body.is-blog-news .site-header .primary-nav > ul > li.current > a::after,
body.is-blog-news .site-header .primary-nav > ul > li.active > a::after,
body.is-blog-news .site-header .primary-nav > ul > li > a.is-active::after,
body.is-blog-news .site-header .primary-nav > ul > li > a.active::after,
body.is-blog-news .site-header .primary-nav > ul > li > a.current::after,
body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"]::after {
  background: var(--premium-green-2) !important;
}

/* Hover top-level = hijau + latar hijau transparan */
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a:hover,
body.is-inner .site-header .primary-nav > ul > li > a:hover,
body.is-blog-news .site-header .primary-nav > ul > li > a:hover {
  color: var(--premium-green-2) !important;
  background: rgba(0,153,68,.12) !important;
  border-radius: 8px !important;
}

/* 2) Tagline "Islamic School" saat header putih = warna menu yang dilembutkan */
body.is-home .site-header.is-scrolled .brand-sub,
body.is-inner .site-header .brand-sub,
body.is-blog-news .site-header .brand-sub,
body.is-inner .site-header.is-scrolled .brand-sub,
body.is-blog-news .site-header.is-scrolled .brand-sub {
  color: var(--premium-muted, var(--ink-soft, #4a5650)) !important;
  color: color-mix(in srgb, var(--ink, #1f2a23) 82%, #ffffff) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}


/* Custom request 2026-07-22: saat header putih/scrolled, tagline brand mengikuti warna menu dengan tone lebih lembut. */
body.is-home .site-header.is-scrolled .brand-sub,
body.site .site-header.is-scrolled .brand-sub,
.site-header.is-scrolled .brand-sub {
  color: var(--premium-muted, var(--ink-soft, #4a5650)) !important;
  color: color-mix(in srgb, var(--ink, #1f2a23) 82%, #ffffff) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* Custom request 2026-07-22: menu aktif utama oranye tanpa block; dropdown tetap disorot oranye transparan. */
.site-header .primary-nav > ul > li > a:hover,
.site-header .primary-nav > ul > li > a.is-active,
.site-header .primary-nav > ul > li > a.active,
.site-header .primary-nav > ul > li > a.current,
.site-header .primary-nav > ul > li > a[aria-current="page"],
.site-header .primary-nav > ul > li.current > a,
.site-header .primary-nav > ul > li.active > a,
.site-header .primary-nav > ul > li.alias-parent-active > a,
body.is-home .site-header .primary-nav > ul > li > a:hover,
body.is-home .site-header .primary-nav > ul > li > a.is-active,
body.is-home .site-header .primary-nav > ul > li > a.active,
body.is-home .site-header .primary-nav > ul > li > a.current,
body.is-home .site-header .primary-nav > ul > li > a[aria-current="page"],
body.is-home .site-header .primary-nav > ul > li.current > a,
body.is-home .site-header .primary-nav > ul > li.active > a,
body.is-home .site-header .primary-nav > ul > li.alias-parent-active > a,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a:hover,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.is-active,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.active,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a.current,
body.is-home .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"],
body.is-home .site-header.is-scrolled .primary-nav > ul > li.current > a,
body.is-home .site-header.is-scrolled .primary-nav > ul > li.active > a,
body.is-home .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a,
body.is-inner .site-header .primary-nav > ul > li > a:hover,
body.is-inner .site-header .primary-nav > ul > li > a.is-active,
body.is-inner .site-header .primary-nav > ul > li > a.active,
body.is-inner .site-header .primary-nav > ul > li > a.current,
body.is-inner .site-header .primary-nav > ul > li > a[aria-current="page"],
body.is-inner .site-header .primary-nav > ul > li.current > a,
body.is-inner .site-header .primary-nav > ul > li.active > a,
body.is-inner .site-header .primary-nav > ul > li.alias-parent-active > a,
body.is-blog-news .site-header .primary-nav > ul > li > a:hover,
body.is-blog-news .site-header .primary-nav > ul > li > a.is-active,
body.is-blog-news .site-header .primary-nav > ul > li > a.active,
body.is-blog-news .site-header .primary-nav > ul > li > a.current,
body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"],
body.is-blog-news .site-header .primary-nav > ul > li.current > a,
body.is-blog-news .site-header .primary-nav > ul > li.active > a,
body.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a {
  color: var(--button-orange, var(--orange, #ff5a00)) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .primary-nav > ul > li > a:hover::after,
.site-header .primary-nav > ul > li > a.is-active::after,
.site-header .primary-nav > ul > li > a.active::after,
.site-header .primary-nav > ul > li > a.current::after,
.site-header .primary-nav > ul > li > a[aria-current="page"]::after,
.site-header .primary-nav > ul > li.current > a::after,
.site-header .primary-nav > ul > li.active > a::after,
.site-header .primary-nav > ul > li.alias-parent-active > a::after {
  background: var(--button-orange, var(--orange, #ff5a00)) !important;
}

.site-header .primary-nav .submenu a:hover,
.site-header .primary-nav .submenu li.current > a,
.site-header .primary-nav .submenu li.active > a,
.site-header .primary-nav .submenu a.is-active,
.site-header .primary-nav .submenu a.active,
.site-header .primary-nav .submenu a.current,
body.is-home .site-header.is-scrolled .primary-nav .submenu a:hover,
body.is-home .site-header.is-scrolled .primary-nav .submenu li.current > a,
body.is-home .site-header.is-scrolled .primary-nav .submenu li.active > a,
body.is-home .site-header.is-scrolled .primary-nav .submenu a.is-active,
body.is-inner .site-header .primary-nav .submenu a:hover,
body.is-inner .site-header .primary-nav .submenu li.current > a,
body.is-inner .site-header .primary-nav .submenu li.active > a,
body.is-inner .site-header .primary-nav .submenu a.is-active,
body.is-blog-news .site-header .primary-nav .submenu a:hover,
body.is-blog-news .site-header .primary-nav .submenu li.current > a,
body.is-blog-news .site-header .primary-nav .submenu li.active > a,
body.is-blog-news .site-header .primary-nav .submenu a.is-active {
  color: #ffffff !important;
  background: #005a2b !important;
  border-left-color: #005a2b !important;
  font-weight: 700 !important;
}

/* Fix dropdown Profil Sekolah:
   submenu anchor (#section-...) jangan ikut terlihat aktif semua.
   Hover tetap memakai style highlight dropdown yang sudah ada. */
.site-header .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
.site-header .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
.site-header .primary-nav .submenu a.is-active[href*="#"]:not(:hover),
.site-header .primary-nav .submenu a.active[href*="#"]:not(:hover),
.site-header .primary-nav .submenu a.current[href*="#"]:not(:hover),
body.is-inner .site-header .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
body.is-inner .site-header .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
body.is-inner .site-header .primary-nav .submenu a.is-active[href*="#"]:not(:hover),
body.is-blog-news .site-header .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
body.is-blog-news .site-header .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
body.is-blog-news .site-header .primary-nav .submenu a.is-active[href*="#"]:not(:hover) {
  color: var(--premium-ink-2, var(--ink, #1f2a23)) !important;
  background: transparent !important;
  border-left-color: transparent !important;
}

body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active[href*="#"]:not(:hover),
body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu a.active[href*="#"]:not(:hover),
body.is-home .site-header:not(.is-scrolled) .primary-nav .submenu a.current[href*="#"]:not(:hover) {
  color: rgba(255,255,255,.94) !important;
  background: transparent !important;
  border-left-color: transparent !important;
  text-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}

/* ============================================================
   Detail artikel — gambar utama di atas isi + header terbaca
   ============================================================ */
body.is-article-page {
  background:
    radial-gradient(circle at 10% 7%, rgba(0,153,68,.11), transparent 26rem),
    radial-gradient(circle at 92% 4%, rgba(255,90,0,.08), transparent 24rem),
    linear-gradient(180deg, #f8f4ec 0%, #fffdf8 58%, #f8f4ec 100%) !important;
}

body.is-article-page .section.admin-edit-scope {
  position: relative;
  padding-top: clamp(28px, 4vw, 58px) !important;
  padding-bottom: clamp(42px, 6vw, 82px) !important;
  background:
    linear-gradient(180deg, rgba(0,109,54,.045), rgba(255,255,255,0) 260px) !important;
}

body.is-article-page .section.admin-edit-scope > .container {
  max-width: 1120px !important;
}

body.is-article-page .content-main {
  min-width: 0;
}

body.is-article-page .com-content-article,
body.is-article-page .item-page {
  position: relative;
  overflow: hidden;
  max-width: 940px;
  margin-inline: auto !important;
  padding: clamp(22px, 4vw, 48px) !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(20,42,29,.1) !important;
  border-radius: clamp(24px, 3.2vw, 38px) !important;
  box-shadow: 0 26px 80px rgba(20,42,29,.12) !important;
}

body.is-article-page .com-content-article::before,
body.is-article-page .item-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: linear-gradient(90deg, var(--button-orange, #ff5a00), var(--green, #009944), var(--gold, #f4c542));
  pointer-events: none;
}

body.is-article-page .com-content-article .page-header,
body.is-article-page .item-page .page-header {
  display: block !important;
  border: 0 !important;
  margin: 0 0 clamp(12px, 2vw, 20px) !important;
  padding: 0 !important;
}

body.is-article-page .com-content-article .page-header h1,
body.is-article-page .com-content-article .page-header h2,
body.is-article-page .item-page .page-header h1,
body.is-article-page .item-page .page-header h2 {
  max-width: 860px;
  margin: 0 !important;
  color: var(--green-deep, #12351f) !important;
  font-family: "Sora", "Instrument Sans", sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}

body.is-article-page .article-info,
body.is-article-page .com-content-article dl.article-info,
body.is-article-page .item-page dl.article-info {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 clamp(18px, 2.8vw, 30px) !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ink-soft, #4a5650) !important;
  font-size: .9rem !important;
}

body.is-article-page .article-info dd,
body.is-article-page .article-info dt {
  margin: 0 !important;
}

body.is-article-page .article-info dd {
  padding: 7px 12px !important;
  border: 1px solid rgba(0,109,54,.12);
  border-radius: 999px;
  background: rgba(0,153,68,.07);
}

body.is-article-page .com-content-article .item-image,
body.is-article-page .com-content-article figure.item-image,
body.is-article-page .com-content-article .pull-left.item-image,
body.is-article-page .com-content-article .pull-right.item-image,
body.is-article-page .com-content-article .com-content-article__image,
body.is-article-page .com-content-article .article-image,
body.is-article-page .com-content-article .article-full-image,
body.is-article-page .com-content-article .item-image-full,
body.is-article-page .item-page .item-image,
body.is-article-page .item-page figure.item-image,
body.is-article-page .item-page .pull-left.item-image,
body.is-article-page .item-page .pull-right.item-image,
body.is-article-page .item-page .com-content-article__image,
body.is-article-page .item-page .article-image,
body.is-article-page .item-page .article-full-image,
body.is-article-page .item-page .item-image-full {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(22px, 3.2vw, 38px) !important;
  padding: 0 !important;
  border-radius: clamp(18px, 2.6vw, 30px) !important;
  overflow: hidden !important;
  background: var(--green-deep, #12351f) !important;
  box-shadow: 0 24px 58px rgba(20,42,29,.16) !important;
}

body.is-article-page .com-content-article .item-image img,
body.is-article-page .com-content-article .com-content-article__image img,
body.is-article-page .com-content-article .article-image img,
body.is-article-page .com-content-article .article-full-image img,
body.is-article-page .com-content-article .item-image-full img,
body.is-article-page .item-page .item-image img,
body.is-article-page .item-page .com-content-article__image img,
body.is-article-page .item-page .article-image img,
body.is-article-page .item-page .article-full-image img,
body.is-article-page .item-page .item-image-full img {
  display: block !important;
  width: 100% !important;
  height: clamp(240px, 44vw, 520px) !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  transform: scale(1.001);
}

body.is-article-page .com-content-article figure.item-image figcaption,
body.is-article-page .item-page figure.item-image figcaption {
  padding: 10px 16px;
  color: rgba(255,255,255,.82);
  font-size: .84rem;
}

body.is-article-page .com-content-article > p:first-of-type:has(img:only-child),
body.is-article-page .item-page > p:first-of-type:has(img:only-child) {
  margin: 0 0 clamp(22px, 3.2vw, 38px) !important;
}

body.is-article-page .com-content-article > p:first-of-type:has(img:only-child) img,
body.is-article-page .item-page > p:first-of-type:has(img:only-child) img {
  display: block;
  width: 100%;
  height: clamp(240px, 44vw, 520px);
  object-fit: cover;
  border-radius: clamp(18px, 2.6vw, 30px) !important;
  box-shadow: 0 24px 58px rgba(20,42,29,.16);
}

body.is-article-page .com-content-article p,
body.is-article-page .item-page p,
body.is-article-page .com-content-article li,
body.is-article-page .item-page li {
  color: #27352d !important;
  font-size: clamp(1rem, 1.2vw, 1.08rem) !important;
  line-height: 1.78 !important;
}

body.is-article-page .com-content-article p,
body.is-article-page .item-page p {
  margin-block: .85rem 1rem !important;
}

body.is-article-page .com-content-article h2,
body.is-article-page .item-page h2,
body.is-article-page .com-content-article h3,
body.is-article-page .item-page h3 {
  color: var(--green-deep, #12351f) !important;
  letter-spacing: -.025em;
}

body.is-article-page .com-content-article blockquote,
body.is-article-page .item-page blockquote {
  margin: clamp(20px, 3vw, 34px) 0 !important;
  padding: clamp(18px, 3vw, 30px) !important;
  border-left: 5px solid var(--button-orange, #ff5a00) !important;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,90,0,.08), rgba(0,153,68,.07));
}

body.is-article-page .article-nav-wrapper {
  max-width: 940px;
  margin-inline: auto;
}

@media (max-width: 760px) {
  body.is-article-page .com-content-article,
  body.is-article-page .item-page {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  body.is-article-page .com-content-article .item-image img,
  body.is-article-page .item-page .item-image img,
  body.is-article-page .com-content-article .com-content-article__image img,
  body.is-article-page .item-page .com-content-article__image img,
  body.is-article-page .com-content-article > p:first-of-type:has(img:only-child) img,
  body.is-article-page .item-page > p:first-of-type:has(img:only-child) img {
    height: 235px !important;
  }
}

/* =====================================================
   Beranda: header transparan — menu aktif & hover KUNING
   ===================================================== */
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"] {
  color: #ffd700 !important;
}

/* Garis bawah indikator (underline) juga kuning */
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::after,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::after,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::after,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::before,
body.is-home .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::after {
  background: #ffd700 !important;
}

/* ============================================================
   Halaman Artikel & Semua Berita/Blog:
   Header selalu tampil seperti kondisi Beranda SETELAH SCROLL
   (putih solid), baik sebelum maupun sesudah user scroll.
   ============================================================ */

/* Sembunyikan topbar hijau di atas header untuk halaman ini
   agar header putih langsung berada di atas */
body.is-article-page .topbar,
body.is-blog-news .topbar {
  display: none !important;
}

/* Header putih solid – fixed – untuk semua state (sebelum & sesudah scroll) */
body.is-article-page .site-header,
body.is-article-page .site-header:not(.is-scrolled),
body.is-article-page .site-header.is-scrolled,
body.is-blog-news .site-header,
body.is-blog-news .site-header:not(.is-scrolled),
body.is-blog-news .site-header.is-scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 6px 18px rgba(20, 42, 29, .08) !important;
  z-index: 1000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Brand — warna hijau deep saat header putih */
body.is-article-page .site-header .brand,
body.is-article-page .site-header .brand-title,
body.is-blog-news .site-header .brand,
body.is-blog-news .site-header .brand-title {
  color: var(--green-deep, #12351f) !important;
  text-shadow: none !important;
}
body.is-article-page .site-header .brand-sub,
body.is-blog-news .site-header .brand-sub {
  color: color-mix(in srgb, var(--ink, #1f2a23) 82%, #ffffff) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* Menu utama — HITAM (idle) */
body.is-article-page .site-header .primary-nav > ul > li > a,
body.is-article-page .site-header .primary-nav > ul > li > a:not(:hover),
body.is-blog-news .site-header .primary-nav > ul > li > a,
body.is-blog-news .site-header .primary-nav > ul > li > a:not(:hover) {
  color: var(--ink, #1f2a23) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}

/* Menu aktif & hover — HIJAU DEEP, BOLD */
body.is-article-page .site-header .primary-nav > ul > li > a:hover,
body.is-article-page .site-header .primary-nav > ul > li > a.is-active,
body.is-article-page .site-header .primary-nav > ul > li > a.active,
body.is-article-page .site-header .primary-nav > ul > li > a.current,
body.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"],
body.is-article-page .site-header .primary-nav > ul > li.current > a,
body.is-article-page .site-header .primary-nav > ul > li.active > a,
body.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a,
body.is-blog-news .site-header .primary-nav > ul > li > a:hover,
body.is-blog-news .site-header .primary-nav > ul > li > a.is-active,
body.is-blog-news .site-header .primary-nav > ul > li > a.active,
body.is-blog-news .site-header .primary-nav > ul > li > a.current,
body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"],
body.is-blog-news .site-header .primary-nav > ul > li.current > a,
body.is-blog-news .site-header .primary-nav > ul > li.active > a,
body.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a {
  color: var(--green-deep, #12351f) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Underline indikator aktif — HIJAU DEEP */
body.is-article-page .site-header .primary-nav > ul > li > a:hover::after,
body.is-article-page .site-header .primary-nav > ul > li > a.is-active::after,
body.is-article-page .site-header .primary-nav > ul > li > a.active::after,
body.is-article-page .site-header .primary-nav > ul > li > a.current::after,
body.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"]::after,
body.is-article-page .site-header .primary-nav > ul > li.current > a::after,
body.is-article-page .site-header .primary-nav > ul > li.active > a::after,
body.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a::after,
body.is-blog-news .site-header .primary-nav > ul > li > a:hover::after,
body.is-blog-news .site-header .primary-nav > ul > li > a.is-active::after,
body.is-blog-news .site-header .primary-nav > ul > li > a.active::after,
body.is-blog-news .site-header .primary-nav > ul > li > a.current::after,
body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"]::after,
body.is-blog-news .site-header .primary-nav > ul > li.current > a::after,
body.is-blog-news .site-header .primary-nav > ul > li.active > a::after,
body.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a::after {
  background: var(--green-deep, #12351f) !important;
}

/* Nav toggle border pakai warna gelap */
body.is-article-page .site-header .nav-toggle,
body.is-blog-news .site-header .nav-toggle {
  border-color: var(--border, #e0e0e0) !important;
}
body.is-article-page .site-header .nav-toggle span,
body.is-blog-news .site-header .nav-toggle span {
  background: var(--ink, #1f2a23) !important;
}

/* Dropdown/submenu — kartu putih dengan bayangan */
body.is-article-page .site-header .primary-nav .submenu,
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu,
body.is-blog-news .site-header .primary-nav .submenu,
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-article-page .site-header .primary-nav .submenu a,
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu a,
body.is-blog-news .site-header .primary-nav .submenu a,
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu a {
  color: var(--ink, #1f2a23) !important;
  background: transparent !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

/* Sorotan item dropdown — hijau agak gelap, teks putih bold */
body.is-article-page .site-header .primary-nav .submenu a:hover,
body.is-article-page .site-header .primary-nav .submenu li:hover > a,
body.is-article-page .site-header .primary-nav .submenu li.current > a,
body.is-article-page .site-header .primary-nav .submenu li.active > a,
body.is-article-page .site-header .primary-nav .submenu a.is-active,
body.is-article-page .site-header .primary-nav .submenu a.active,
body.is-article-page .site-header .primary-nav .submenu a.current,
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu a:hover,
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li:hover > a,
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a,
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a,
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active,
body.is-blog-news .site-header .primary-nav .submenu a:hover,
body.is-blog-news .site-header .primary-nav .submenu li:hover > a,
body.is-blog-news .site-header .primary-nav .submenu li.current > a,
body.is-blog-news .site-header .primary-nav .submenu li.active > a,
body.is-blog-news .site-header .primary-nav .submenu a.is-active,
body.is-blog-news .site-header .primary-nav .submenu a.active,
body.is-blog-news .site-header .primary-nav .submenu a.current,
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu a:hover,
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li:hover > a,
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a,
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a,
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active {
  background: #005a2b !important;
  color: #ffffff !important;
  border-left-color: #005a2b !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Submenu anchor (#section-...) tidak boleh terlihat aktif semua */
body.is-article-page .site-header .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
body.is-article-page .site-header .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
body.is-article-page .site-header .primary-nav .submenu a.is-active[href*="#"]:not(:hover),
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
body.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active[href*="#"]:not(:hover),
body.is-blog-news .site-header .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
body.is-blog-news .site-header .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
body.is-blog-news .site-header .primary-nav .submenu a.is-active[href*="#"]:not(:hover),
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a[href*="#"]:not(:hover),
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a[href*="#"]:not(:hover),
body.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active[href*="#"]:not(:hover) {
  background: transparent !important;
  color: var(--ink, #1f2a23) !important;
  border-left-color: transparent !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

/* Konten utama diberi jarak atas karena header sekarang fixed dan
   topbar dihilangkan pada dua halaman ini. */
body.is-article-page main,
body.is-blog-news main {
  padding-top: var(--site-header-h, 82px) !important;
}

/* ============================================================
   Custom request 2026-07-30:
   Halaman Artikel & semua Berita/Blog — pada header (baik
   sebelum maupun sesudah scroll), warna hover menu (yang
   tersentuh kursor) dan underline aktif WAJIB hijau tua bold
   (#0f3c23), bukan kuning.
   Selektor spesifisitas tinggi + !important agar mengalahkan
   semua aturan sebelumnya termasuk yang memakai #ffd700, oranye,
   atau var(--green-deep).
   ============================================================ */

/* Warna teks menu utama saat hover / aktif */
html body.is-article-page .site-header .primary-nav > ul > li > a:hover,
html body.is-article-page .site-header .primary-nav > ul > li > a:focus,
html body.is-article-page .site-header .primary-nav > ul > li > a:focus-visible,
html body.is-article-page .site-header .primary-nav > ul > li > a.is-active,
html body.is-article-page .site-header .primary-nav > ul > li > a.active,
html body.is-article-page .site-header .primary-nav > ul > li > a.current,
html body.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"],
html body.is-article-page .site-header .primary-nav > ul > li.current > a,
html body.is-article-page .site-header .primary-nav > ul > li.active > a,
html body.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a:hover,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.is-active,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.active,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.current,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"],
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.current > a,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.active > a,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a,
html body.is-blog-news .site-header .primary-nav > ul > li > a:hover,
html body.is-blog-news .site-header .primary-nav > ul > li > a:focus,
html body.is-blog-news .site-header .primary-nav > ul > li > a:focus-visible,
html body.is-blog-news .site-header .primary-nav > ul > li > a.is-active,
html body.is-blog-news .site-header .primary-nav > ul > li > a.active,
html body.is-blog-news .site-header .primary-nav > ul > li > a.current,
html body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"],
html body.is-blog-news .site-header .primary-nav > ul > li.current > a,
html body.is-blog-news .site-header .primary-nav > ul > li.active > a,
html body.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a:hover,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.is-active,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.active,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.current,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"],
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.current > a,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.active > a,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a {
  color: #0f3c23 !important;
  font-weight: 700 !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Underline indikator (::before dan ::after) — hijau tua bold */
html body.is-article-page .site-header .primary-nav > ul > li > a:hover::before,
html body.is-article-page .site-header .primary-nav > ul > li > a:hover::after,
html body.is-article-page .site-header .primary-nav > ul > li > a.is-active::before,
html body.is-article-page .site-header .primary-nav > ul > li > a.is-active::after,
html body.is-article-page .site-header .primary-nav > ul > li > a.active::before,
html body.is-article-page .site-header .primary-nav > ul > li > a.active::after,
html body.is-article-page .site-header .primary-nav > ul > li > a.current::before,
html body.is-article-page .site-header .primary-nav > ul > li > a.current::after,
html body.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"]::before,
html body.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"]::after,
html body.is-article-page .site-header .primary-nav > ul > li.current > a::before,
html body.is-article-page .site-header .primary-nav > ul > li.current > a::after,
html body.is-article-page .site-header .primary-nav > ul > li.active > a::before,
html body.is-article-page .site-header .primary-nav > ul > li.active > a::after,
html body.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a::before,
html body.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a:hover::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a:hover::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.is-active::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.is-active::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.active::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.active::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.current::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a.current::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"]::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"]::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.current > a::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.current > a::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.active > a::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.active > a::after,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a::before,
html body.is-article-page .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a::after,
html body.is-blog-news .site-header .primary-nav > ul > li > a:hover::before,
html body.is-blog-news .site-header .primary-nav > ul > li > a:hover::after,
html body.is-blog-news .site-header .primary-nav > ul > li > a.is-active::before,
html body.is-blog-news .site-header .primary-nav > ul > li > a.is-active::after,
html body.is-blog-news .site-header .primary-nav > ul > li > a.active::before,
html body.is-blog-news .site-header .primary-nav > ul > li > a.active::after,
html body.is-blog-news .site-header .primary-nav > ul > li > a.current::before,
html body.is-blog-news .site-header .primary-nav > ul > li > a.current::after,
html body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"]::before,
html body.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"]::after,
html body.is-blog-news .site-header .primary-nav > ul > li.current > a::before,
html body.is-blog-news .site-header .primary-nav > ul > li.current > a::after,
html body.is-blog-news .site-header .primary-nav > ul > li.active > a::before,
html body.is-blog-news .site-header .primary-nav > ul > li.active > a::after,
html body.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a::before,
html body.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a:hover::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a:hover::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.is-active::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.is-active::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.active::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.active::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.current::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a.current::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"]::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a[aria-current="page"]::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.current > a::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.current > a::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.active > a::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.active > a::after,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a::before,
html body.is-blog-news .site-header.is-scrolled .primary-nav > ul > li.alias-parent-active > a::after {
  background: #0f3c23 !important;
  background-color: #0f3c23 !important;
  border-color: #0f3c23 !important;
}

/* ============================================================
   Custom request 2026-07-30 (lanjutan):
   Halaman Artikel & Berita/Blog SEBELUM SCROLL harus tampil
   sama persis dengan SESUDAH SCROLL (header putih solid, tanpa
   topbar hijau, brand hijau deep, menu hitam, hover/underline
   hijau bold #0f3c23).

   Selektor memakai body.site.is-article-page / body.site.is-blog-news
   agar spesifisitas (0,3,x) mengalahkan aturan inline di PHP
   yang memakai body.site:not(.is-home) (0,2,x).
   ============================================================ */

/* Sembunyikan topbar hijau di atas header untuk kedua halaman ini */
html body.site.is-article-page .topbar,
html body.site.is-blog-news .topbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Paksa header sebelum-scroll = kondisi setelah-scroll:
   putih solid, fixed, ada shadow, TIDAK transparan. */
html body.site.is-article-page .site-header,
html body.site.is-article-page .site-header:not(.is-scrolled),
html body.site.is-article-page .site-header.is-scrolled,
html body.site.is-blog-news .site-header,
html body.site.is-blog-news .site-header:not(.is-scrolled),
html body.site.is-blog-news .site-header.is-scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 6px 18px rgba(20, 42, 29, .08) !important;
  z-index: 1000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Brand & tagline — hijau deep / abu-abu gelap (bukan putih & bukan kuning) */
html body.site.is-article-page .site-header .brand,
html body.site.is-article-page .site-header .brand-title,
html body.site.is-article-page .site-header:not(.is-scrolled) .brand,
html body.site.is-article-page .site-header:not(.is-scrolled) .brand-title,
html body.site.is-blog-news .site-header .brand,
html body.site.is-blog-news .site-header .brand-title,
html body.site.is-blog-news .site-header:not(.is-scrolled) .brand,
html body.site.is-blog-news .site-header:not(.is-scrolled) .brand-title {
  color: #12351f !important;
  text-shadow: none !important;
}
html body.site.is-article-page .site-header .brand-sub,
html body.site.is-article-page .site-header:not(.is-scrolled) .brand-sub,
html body.site.is-blog-news .site-header .brand-sub,
html body.site.is-blog-news .site-header:not(.is-scrolled) .brand-sub {
  color: color-mix(in srgb, #1f2a23 82%, #ffffff) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* Menu utama idle — hitam (bukan putih) baik sebelum maupun sesudah scroll */
html body.site.is-article-page .site-header .primary-nav > ul > li > a,
html body.site.is-article-page .site-header .primary-nav > ul > li > a:not(:hover),
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a:not(:hover),
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > div > ul > li > a:not(:hover),
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .mod-menu > li > a:not(:hover),
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .nav > li > a:not(:hover),
html body.site.is-blog-news .site-header .primary-nav > ul > li > a,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a:not(:hover),
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a:not(:hover),
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > div > ul > li > a:not(:hover),
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .mod-menu > li > a:not(:hover),
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .nav > li > a:not(:hover) {
  color: #1f2a23 !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}

/* Menu hover / aktif — hijau bold #0f3c23 (menimpa aksen kuning
   dari inline style PHP body.site:not(.is-home) …) */
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"],
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > div > ul > li > a:hover,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > div > ul > li > a.is-active,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > div > ul > li.current > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > div > ul > li.active > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .mod-menu > li > a:hover,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .mod-menu > li > a.is-active,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .mod-menu > li.current > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .mod-menu > li.active > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"],
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > div > ul > li > a:hover,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > div > ul > li > a.is-active,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > div > ul > li.current > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > div > ul > li.active > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .mod-menu > li > a:hover,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .mod-menu > li > a.is-active,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .mod-menu > li.current > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .mod-menu > li.active > a {
  color: #0f3c23 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Underline aktif/hover sebelum scroll — hijau bold */
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"]::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"]::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.is-active::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.active::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a.current::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"]::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a[aria-current="page"]::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.current > a::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.active > a::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li.alias-parent-active > a::after {
  background: #0f3c23 !important;
  background-color: #0f3c23 !important;
  border-color: #0f3c23 !important;
}

/* Nav toggle (hamburger) border & garis — pakai warna gelap */
html body.site.is-article-page .site-header:not(.is-scrolled) .nav-toggle,
html body.site.is-blog-news .site-header:not(.is-scrolled) .nav-toggle {
  border-color: #e0e0e0 !important;
}
html body.site.is-article-page .site-header:not(.is-scrolled) .nav-toggle span,
html body.site.is-blog-news .site-header:not(.is-scrolled) .nav-toggle span {
  background: #1f2a23 !important;
}

/* Dropdown submenu sebelum scroll — kartu putih (bukan kaca transparan) */
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu a {
  color: #1f2a23 !important;
  background: transparent !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu a:hover,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li:hover > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu a:hover,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li:hover > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li.current > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu li.active > a,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav .submenu a.is-active {
  background: #005a2b !important;
  color: #ffffff !important;
  border-left-color: #005a2b !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Main content dapat ruang di atas karena header fixed dari awal */
html body.site.is-article-page main,
html body.site.is-blog-news main {
  padding-top: var(--site-header-h, 82px) !important;
}

/* ============================================================
   Custom request 2026-07-30 (fix bayangan kuning underline):
   Menu memakai dua pseudo-element (::before dan ::after) yang
   di aturan lain di-set warna kuning/gold. Keduanya menumpuk
   sehingga terlihat seperti "bayangan kuning" di bawah garis
   hijau. Solusi: matikan ::after (biarkan hanya ::before yang
   solid hijau bold), dan hilangkan opacity + shadow apa pun.
   ============================================================ */

/* Nonaktifkan pseudo ::after pada seluruh state (idle & aktif),
   sebelum & sesudah scroll, untuk halaman Artikel & Blog. */
html body.site.is-article-page .site-header .primary-nav > ul > li > a::after,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a::after,
html body.site.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a::after,
html body.site.is-article-page .site-header .primary-nav > ul > li > a:hover::after,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.is-active::after,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.active::after,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.current::after,
html body.site.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"]::after,
html body.site.is-article-page .site-header .primary-nav > ul > li.current > a::after,
html body.site.is-article-page .site-header .primary-nav > ul > li.active > a::after,
html body.site.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a::after,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a::after,
html body.site.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a:hover::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.is-active::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.active::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.current::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"]::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li.current > a::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li.active > a::after,
html body.site.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Pastikan underline ::before benar-benar solid hijau bold #0f3c23,
   tanpa opacity/blur/shadow yang menyebabkan efek bayangan kuning. */
html body.site.is-article-page .site-header .primary-nav > ul > li > a::before,
html body.site.is-article-page .site-header:not(.is-scrolled) .primary-nav > ul > li > a::before,
html body.site.is-article-page .site-header.is-scrolled .primary-nav > ul > li > a::before,
html body.site.is-article-page .site-header .primary-nav > ul > li > a:hover::before,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.is-active::before,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.active::before,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.current::before,
html body.site.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"]::before,
html body.site.is-article-page .site-header .primary-nav > ul > li.current > a::before,
html body.site.is-article-page .site-header .primary-nav > ul > li.active > a::before,
html body.site.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a::before,
html body.site.is-blog-news .site-header:not(.is-scrolled) .primary-nav > ul > li > a::before,
html body.site.is-blog-news .site-header.is-scrolled .primary-nav > ul > li > a::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a:hover::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.is-active::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.active::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.current::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"]::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li.current > a::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li.active > a::before,
html body.site.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a::before {
  background: #0f3c23 !important;
  background-color: #0f3c23 !important;
  background-image: none !important;
  border-color: #0f3c23 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
}

/* Matikan text-shadow/box-shadow apa pun pada link menu itu sendiri
   (mencegah glow kuning dari aturan lain). */
html body.site.is-article-page .site-header .primary-nav > ul > li > a,
html body.site.is-article-page .site-header .primary-nav > ul > li > a:hover,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.is-active,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.active,
html body.site.is-article-page .site-header .primary-nav > ul > li > a.current,
html body.site.is-article-page .site-header .primary-nav > ul > li > a[aria-current="page"],
html body.site.is-article-page .site-header .primary-nav > ul > li.current > a,
html body.site.is-article-page .site-header .primary-nav > ul > li.active > a,
html body.site.is-article-page .site-header .primary-nav > ul > li.alias-parent-active > a,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a:hover,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.is-active,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.active,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a.current,
html body.site.is-blog-news .site-header .primary-nav > ul > li > a[aria-current="page"],
html body.site.is-blog-news .site-header .primary-nav > ul > li.current > a,
html body.site.is-blog-news .site-header .primary-nav > ul > li.active > a,
html body.site.is-blog-news .site-header .primary-nav > ul > li.alias-parent-active > a {
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* ============================================================
   Custom request 2026-07-30:
   PROGRAM UNGGULAN — desain modern (parent + sub ICC/TCC/Pesantren)
   Semua konten dapat diedit dari dashboard Template Style.
   ============================================================ */

/* ===== Parent page: intro & 3 kartu ===== */
.program-hero-modern {
  position: relative;
  overflow: hidden;
  padding-top: clamp(80px, 10vw, 130px) !important;
  padding-bottom: clamp(60px, 8vw, 100px) !important;
  background:
    radial-gradient(1200px 500px at 8% -10%, rgba(0,153,68,.14), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(255,138,61,.10), transparent 60%),
    linear-gradient(180deg, #f6f2e8 0%, #fffdf7 55%, #f6f2e8 100%);
}
.program-hero-modern::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 8px;
  background: linear-gradient(90deg, #0f3c23, #1f8a4c, #e0b336, #ff8a3d, #0f3c23);
  opacity: .85;
}
.program-hero-modern .program-intro-head {
  max-width: 780px;
  margin: 0 auto clamp(40px, 5vw, 70px) !important;
  text-align: center;
}
.program-hero-modern .program-intro-head h2 {
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  color: #0f3c23;
  margin: 12px 0 14px;
}
.program-hero-modern .program-intro-head .lead {
  color: #4a5650;
  font-size: 1.08rem;
  line-height: 1.7;
}

.program-cards-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(50px, 7vw, 90px);
}
.program-card-modern {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(20, 42, 29, .08);
  box-shadow: 0 16px 40px rgba(20, 42, 29, .08);
  transition: transform .35s ease, box-shadow .35s ease;
  isolation: isolate;
}
.program-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(20, 42, 29, .16);
}
.program-card-modern::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--pc-accent), var(--pc-accent-2));
  z-index: 2;
}
.program-card-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent-2));
  display: grid;
  place-items: center;
  color: #fff;
}
.program-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.program-card-modern:hover .program-card-media img {
  transform: scale(1.06);
}
.program-card-media-fallback {
  opacity: .95;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}
.program-card-body {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.program-card-num {
  display: inline-block;
  font-size: .74rem;
  font-weight: 800;
  color: #0f3c23;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}
.program-card-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc-accent) 12%, transparent);
  color: var(--pc-accent);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
}
.program-card-body h3 {
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: 1.35rem;
  line-height: 1.25;
  color: #12351f;
  letter-spacing: -.02em;
  margin: 2px 0 6px;
}
.program-card-body p {
  color: #4a5650;
  line-height: 1.6;
  font-size: .96rem;
  margin: 0 0 16px;
  flex: 1;
}
.program-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--pc-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}
.program-card-link:hover {
  background: var(--pc-accent-2);
  transform: translateX(3px);
}

/* Pilar bawah */
.program-pillars {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 50px);
  background: linear-gradient(135deg, #ffffff 0%, #f6f2e8 100%);
  border: 1px solid rgba(20, 42, 29, .08);
  border-radius: 30px;
  box-shadow: 0 18px 44px rgba(20, 42, 29, .08);
}
.program-pillars-title {
  text-align: center;
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: #12351f;
  margin: 0 0 clamp(20px, 3vw, 34px);
  letter-spacing: -.02em;
}
.program-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
}
.program-pillar-item {
  padding: 22px 22px 24px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(20, 42, 29, .08);
  position: relative;
}
.program-pillar-num {
  display: inline-block;
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f3c23;
  opacity: .28;
  letter-spacing: -.03em;
}
.program-pillar-item strong {
  display: block;
  color: #12351f;
  font-size: 1.05rem;
  margin: 4px 0 8px;
}
.program-pillar-item p {
  color: #4a5650;
  line-height: 1.6;
  font-size: .93rem;
  margin: 0;
}

/* ===== Sub-page detail (ICC / TCC / Pesantren) ===== */
.program-detail-modern {
  position: relative;
  overflow: hidden;
  padding-top: clamp(80px, 10vw, 130px) !important;
  padding-bottom: clamp(60px, 8vw, 100px) !important;
  background:
    radial-gradient(900px 500px at 90% -10%, color-mix(in srgb, var(--pd-accent-2) 22%, transparent), transparent 60%),
    radial-gradient(1200px 500px at -10% 100%, color-mix(in srgb, var(--pd-accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #fffdf7 0%, #f6f2e8 100%);
}
.program-detail-modern::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--pd-accent), var(--pd-accent-2));
}

.program-detail-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  margin-bottom: clamp(50px, 6vw, 80px);
}
.program-detail-copy .eyebrow {
  color: var(--pd-accent);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: .82rem;
}
.program-detail-copy h2 {
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  color: #12351f;
  letter-spacing: -.035em;
  margin: 10px 0 14px;
}
.program-detail-copy > p {
  color: #4a5650;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 22px;
  max-width: 62ch;
}

.program-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 22px 0 26px;
  max-width: 560px;
}
.program-detail-stat {
  padding: 16px 14px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(20, 42, 29, .08);
  box-shadow: 0 10px 28px rgba(20, 42, 29, .06);
  text-align: center;
}
.program-detail-stat strong {
  display: block;
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: 1.55rem;
  color: var(--pd-accent);
  letter-spacing: -.02em;
  line-height: 1;
}
.program-detail-stat span {
  display: block;
  margin-top: 6px;
  color: #4a5650;
  font-size: .82rem;
  line-height: 1.35;
}

.program-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.program-detail-actions .btn.btn-orange {
  background: var(--pd-accent) !important;
  border-color: var(--pd-accent) !important;
  color: #fff !important;
}
.program-detail-actions .btn.btn-orange:hover {
  background: var(--pd-accent-2) !important;
  border-color: var(--pd-accent-2) !important;
}
.btn-ghost-dark {
  color: #12351f !important;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 6px;
  transition: color .2s ease;
}
.btn-ghost-dark:hover { color: var(--pd-accent) !important; }

.program-detail-figure {
  position: relative;
  margin: 0;
  border-radius: 34px;
  overflow: hidden;
  aspect-ratio: 5/6;
  box-shadow: 0 30px 60px rgba(20, 42, 29, .18);
  transform: rotate(-.6deg);
}
.program-detail-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.program-detail-figure figcaption {
  position: absolute;
  bottom: 18px;
  left: 18px;
  padding: 8px 16px;
  background: #ffffff;
  color: var(--pd-accent);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .8rem;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

/* Highlights grid */
.program-detail-highlights { margin-bottom: clamp(50px, 6vw, 80px); }
.program-detail-highlights h3,
.program-detail-timeline h3 {
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  color: #12351f;
  letter-spacing: -.025em;
  margin: 0 0 20px;
}
.program-detail-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.program-highlight-card {
  position: relative;
  padding: 24px 22px 26px;
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(20, 42, 29, .08);
  box-shadow: 0 12px 30px rgba(20, 42, 29, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.program-highlight-card:hover {
  transform: translateY(-4px);
  border-color: var(--pd-accent);
  box-shadow: 0 22px 44px rgba(20, 42, 29, .12);
}
.program-highlight-num {
  display: inline-block;
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: 1.35rem;
  color: var(--pd-accent);
  font-weight: 800;
  letter-spacing: -.02em;
  opacity: .85;
}
.program-highlight-card strong {
  display: block;
  color: #12351f;
  margin: 6px 0 8px;
  font-size: 1.02rem;
}
.program-highlight-card p {
  color: #4a5650;
  line-height: 1.6;
  font-size: .92rem;
  margin: 0;
}

/* Timeline */
.program-detail-timeline { margin-bottom: clamp(50px, 6vw, 80px); }
.program-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  counter-reset: pgtl;
  position: relative;
}
.program-timeline-list::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, var(--pd-accent), var(--pd-accent-2));
  opacity: .35;
}
.program-timeline-list li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(20, 42, 29, .08);
  box-shadow: 0 10px 26px rgba(20, 42, 29, .06);
}
.program-timeline-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pd-accent), var(--pd-accent-2));
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.program-timeline-list strong {
  display: block;
  color: #12351f;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.program-timeline-list p {
  margin: 0;
  color: #4a5650;
  font-size: .95rem;
  line-height: 1.6;
}

/* Quote */
.program-detail-quote {
  position: relative;
  max-width: 900px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(20, 42, 29, .08);
  border-left: 6px solid var(--pd-accent);
  box-shadow: 0 20px 48px rgba(20, 42, 29, .10);
}
.program-detail-quote svg {
  color: var(--pd-accent);
  opacity: .35;
  margin-bottom: 8px;
}
.program-detail-quote p {
  font-family: "Sora", "Instrument Sans", sans-serif;
  color: #12351f;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.program-detail-quote cite {
  font-style: normal;
  color: #4a5650;
  font-size: .95rem;
}
.program-detail-quote cite strong {
  color: var(--pd-accent);
  margin-right: 4px;
}

/* Nav antar sub */
.program-detail-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.program-detail-nav-item {
  padding: 16px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(20, 42, 29, .1);
  text-decoration: none;
  color: #12351f;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.program-detail-nav-item:hover {
  transform: translateY(-3px);
  border-color: var(--pd-accent);
  color: var(--pd-accent);
}
.program-detail-nav-item.is-current {
  background: linear-gradient(135deg, var(--pd-accent), var(--pd-accent-2));
  color: #ffffff !important;
  border-color: transparent;
}
.program-detail-nav-key {
  font-family: "Sora", "Instrument Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.program-detail-nav-label {
  font-weight: 600;
  font-size: .95rem;
  opacity: .85;
}

/* Responsive */
@media (max-width: 960px) {
  .program-cards-modern { grid-template-columns: 1fr 1fr; }
  .program-pillars-grid { grid-template-columns: 1fr 1fr; }
  .program-detail-hero { grid-template-columns: 1fr; }
  .program-detail-figure { transform: none; aspect-ratio: 4/3; }
  .program-detail-highlights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .program-cards-modern { grid-template-columns: 1fr; }
  .program-pillars-grid { grid-template-columns: 1fr; }
  .program-detail-stats { grid-template-columns: 1fr 1fr; }
  .program-detail-highlights-grid { grid-template-columns: 1fr; }
  .program-detail-nav { grid-template-columns: 1fr; }
}