/* =========================================================
   sections.css — bagian halaman di bawah hero
   ========================================================= */
.section { padding: clamp(64px, 9vw, 120px) 0; scroll-margin-top: 72px; }
.section--tint { background: var(--tint); border-block: 1px solid var(--border); }
.sec-head { max-width: 720px; }
.sec-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.875rem, 4.2vw, 3rem); line-height: 1.12; letter-spacing: -.01em;
  text-wrap: balance;
}
.sec-lead { margin-top: 16px; max-width: 60ch; font-size: 1.0625rem; color: var(--text-muted); }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--primary); }
.textlink .ic { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.textlink:hover .ic { transform: translateX(4px); }

/* ---------- Tentang ---------- */
.about { display: grid; gap: 40px; }
.values li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--border); }
.values li:last-child { border-bottom: 1px solid var(--border); }
.values__icon, .feat__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary); color: #fff; }
[data-theme="dark"] .values__icon, [data-theme="dark"] .feat__icon { color: var(--primary-dark); }
.values h3, .feat h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.values p, .feat p { margin-top: 4px; color: var(--text-muted); }

/* ---------- Program ---------- */
.pgm { display: grid; gap: 16px; margin-top: 40px; }
.pgm__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 28px; min-height: 320px; border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pgm__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pgm__lvl { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.75rem, 6vw, 3.75rem); line-height: 1; letter-spacing: -.02em; margin-bottom: 18px; }
.pgm__name { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.pgm__prog { display: inline-flex; padding: 3px 12px; border-radius: 99px; font-size: .8125rem; font-weight: 700; }
.pgm__desc { margin-top: 8px; max-width: 34ch; }
.pgm__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; min-height: 44px; font-weight: 600; }
.pgm__link .ic { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.pgm__link:hover .ic { transform: translateX(4px); }
.pgm__item--green { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); color: var(--text); }
.pgm__item--green .pgm__prog { background: var(--primary); color: #fff; }
[data-theme="dark"] .pgm__item--green .pgm__prog { color: var(--primary-dark); }
.pgm__item--white { background: var(--background); border: 1px solid var(--border); }
.pgm__item--white .pgm__prog { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }
.pgm__item--white .pgm__desc { color: var(--text-muted); }
.pgm__item--navy { background: linear-gradient(135deg, #2c7a1e, #3a902a); color: #fff; border: 1px solid transparent; }
[data-theme="dark"] .pgm__item--navy { background: linear-gradient(135deg, #12361a, #1b4a20); border-color: var(--border); }
.pgm__item--navy .pgm__prog { background: #fff; color: #1d5a1a; }
.pgm__item--navy .pgm__desc { color: rgba(255, 255, 255, .95); }
.pgm__item--navy :focus-visible, .section--navy :focus-visible { --focus: #fff; }

/* Kartu dengan warna kustom dari dashboard (Program & Jenjang) */
.pgm__item--custom { background: var(--cbg); color: var(--ctext); border: 1px solid color-mix(in srgb, var(--ctext) 16%, transparent); }
.pgm__item--custom .pgm__prog { background: color-mix(in srgb, var(--ctext) 16%, transparent); color: var(--ctext); }
.pgm__item--custom .pgm__desc { color: color-mix(in srgb, var(--ctext) 82%, transparent); }
.pgm__item--custom .pgm__link { color: var(--ctext); }
.pgm__item--custom :focus-visible { --focus: var(--ctext); }

/* ---------- Keunggulan ---------- */
.feat-wrap { display: grid; gap: 40px; }
.feat li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--border); }

/* ---------- Kegiatan ---------- */
.section--navy { background: linear-gradient(135deg, #2a7a1f, #3a922a); color: #fff; }
[data-theme="dark"] .section--navy { background: linear-gradient(135deg, #12361a, #1b4a20); }
.section--navy .sec-title { color: #fff; }
.acts { margin-top: 32px; }
.acts a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .28); transition: color .25s; }
.acts li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.acts b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 5.5vw, 3.5rem); line-height: 1.1; }
.acts span { grid-column: 1; grid-row: 2; color: rgba(255, 255, 255, .94); font-size: .9375rem; }
.acts .ic { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; color: #fff; transition: transform .3s var(--ease); }
.acts a:hover { color: #e7f7db; }
.acts a:hover .ic { transform: translateX(6px); }

/* ---------- Berita ---------- */
.news { display: grid; gap: 32px; margin-top: 36px; }
.nfeat .meta, .nlist .meta { font-size: .8125rem; font-weight: 600; color: var(--secondary); }
[data-theme="dark"] .nfeat .meta, [data-theme="dark"] .nlist .meta { color: var(--accent-light); }
.nfeat__media {
  display: grid; place-items: center; height: clamp(200px, 32vw, 320px); margin-bottom: 20px; border-radius: var(--radius-lg); color: var(--accent-light);
  background: linear-gradient(135deg, #2f7d20, #6cbd44);
}
.nfeat__media .ic { width: 44px; height: 44px; }
.nfeat h3 { margin-top: 6px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.nfeat p:last-child { margin-top: 10px; color: var(--text-muted); max-width: 52ch; }
.nfeat h3 a:hover, .nlist h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.nlist li { padding: 20px 0; border-top: 1px solid var(--border); }
.nlist li:last-child { border-bottom: 1px solid var(--border); }
.nlist h3 { margin-top: 4px; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }

/* ---------- Galeri ---------- */
.gal { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 12px; margin-top: 32px; }
.gal__tile {
  position: relative; display: flex; align-items: flex-end; padding: 16px; overflow: hidden; border-radius: var(--radius-md); color: #fff;
  background: linear-gradient(135deg, #2f7d20, #4fa432);
}
.gal__tile::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23a9de8a' stroke-width='1.2'%3E%3Crect x='24' y='24' width='48' height='48'/%3E%3Crect x='24' y='24' width='48' height='48' transform='rotate(45 48 48)'/%3E%3C/svg%3E"); }
.gal__tile span { position: relative; font-weight: 600; font-size: .9375rem; }
.gal__tile--a { background: linear-gradient(135deg, #2f7d20, #6cbd44); }
.gal__tile--b { background: linear-gradient(135deg, #1d5a1a, #3f9a2b); }
.gal__tile--c { background: linear-gradient(135deg, #3f9a2b, #8fd06a); }
.gal__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 44, 18, .72), transparent 55%); }
.gal__tile > * { z-index: 1; }
.gal__tile--big { grid-column: span 2; grid-row: span 2; }

/* ---------- CTA ---------- */
.section--cta { padding-block: clamp(40px, 6vw, 72px); }
.cta {
  position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-lg); color: var(--text);
  background: linear-gradient(120deg, var(--tint-2), var(--tint) 62%, var(--background));
  border: 1px solid var(--border);
}
.cta::after { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%236cbd44' stroke-width='1.4'%3E%3Crect x='24' y='24' width='48' height='48'/%3E%3Crect x='24' y='24' width='48' height='48' transform='rotate(45 48 48)'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(to left, #000, transparent 70%); mask-image: linear-gradient(to left, #000, transparent 70%); }
.cta > * { position: relative; z-index: 1; }
.cta .sec-title { max-width: 20ch; color: var(--text); }
.cta > p { margin-top: 14px; max-width: 52ch; color: var(--text-muted); }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta .btn--ghost { color: var(--primary); border-color: var(--primary); background: transparent; }
.cta .btn--ghost:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: var(--primary); }

/* ---------- Kontak ---------- */
.contact { display: grid; gap: 36px; }
.crows { display: grid; gap: 12px; align-content: start; }
.crow { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color .25s, transform .25s var(--ease); }
.crow:hover { border-color: var(--accent); transform: translateX(4px); }
.crow__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary); color: #fff; }
[data-theme="dark"] .crow__icon { color: var(--primary-dark); }
.crow b { display: block; font-weight: 700; }
.crow small { display: block; color: var(--text-muted); font-size: .875rem; }
.crow__go { color: var(--primary); }

/* ---------- Footer ---------- */
.footer { padding: 56px 0 24px; background: var(--tint); color: var(--text); border-top: 1px solid var(--border); }
.footer__grid { display: grid; gap: 32px; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { width: 48px; height: 48px; border-radius: 12px; background: #fff; padding: 2px; border: 1px solid var(--border); }
.footer__brand strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--text); }
.footer__brand span { font-size: .8125rem; color: var(--text-muted); }
.footer__h { margin-bottom: 10px; font-weight: 700; color: var(--text); }
.footer li a { display: inline-flex; min-height: 36px; align-items: center; color: var(--text-muted); }
.footer li a:hover { color: var(--primary); text-decoration: underline; }
.footer__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .8125rem; color: var(--text-muted); }

/* ---------- Breakpoint ---------- */
@media (min-width: 768px) {
  .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .gal { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .acts a { grid-template-columns: minmax(0, 1fr) minmax(0, 360px) 36px; }
  .acts span { grid-column: 2; grid-row: 1; }
  .acts .ic { grid-column: 3; grid-row: 1; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 900px) {
  .about { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
  .pgm { grid-template-columns: repeat(3, 1fr); }
  .feat-wrap { grid-template-columns: 1fr 1.4fr; gap: 72px; }
  .feat { grid-template-columns: 1fr; }
  .news { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
  .contact { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
}
@media (min-width: 1200px) { .feat { grid-template-columns: 1fr 1fr; } }

/* Sisakan ruang untuk quick-access dock di sisi kanan (>= 1024px) */
@media (min-width: 1024px) {
  .section .container, .footer .container {
    padding-right: max(0px, calc(76px - (100% - min(100% - 2 * var(--gutter), var(--container))) / 2));
  }
}