/* ==========================================================================
   TKM — site-wide polish
   1. Parallax (CSS-first, JS only where CSS cannot reach)
   2. Section rhythm
   3. Dark -> light transition
   4. Card contrast & thumbnail fallback
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PARALLAX
   Pure CSS via background-attachment:fixed. No library, no scroll listener,
   so it costs nothing on the main thread.
   Applied ONLY to full-bleed photo bands (PPDB banners, video section) —
   deliberately not on content sections, to avoid motion sickness.
   -------------------------------------------------------------------------- */
.tkm-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Mobile fallback — REQUIRED.
   background-attachment:fixed is broken/janky on iOS Safari and drains
   battery on Android. Below 768px every parallax surface goes static. */
@media (max-width: 768px) {
  .tkm-parallax {
    background-attachment: scroll !important;
  }
}

/* Same for anything driven by the JS parallax controller. */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .tkm-parallax-js,
  .tkm-float {
    transform: none !important;
  }
}

.tkm-parallax-js,
.tkm-float {
  will-change: transform;
}

/* Decorative floating shapes (bonus): drift against the scroll direction. */
.tkm-float {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(212, 175, 55, .28);
  z-index: 1;
}
.tkm-float--diamond { transform: rotate(45deg); }
.tkm-float--ring { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .tkm-float { display: none; }
}

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM
   One scale for content blocks, one for utility bands, so the scroll cadence
   is even instead of drifting between 56px and 96px.
   -------------------------------------------------------------------------- */
.tkm-section > .tkm-head,
.tkm-head {
  margin-bottom: 3.5rem;
}
@media (max-width: 768px) {
  .tkm-head { margin-bottom: 2.5rem; }
}

/* --------------------------------------------------------------------------
   3. DARK -> LIGHT TRANSITION
   The jump from the near-black PPDB band into the white greeting block was
   abrupt. A diagonal divider plus an off-white ground softens the hand-off.
   -------------------------------------------------------------------------- */
.tkm-divider-diagonal {
  position: relative;
  overflow: hidden;
}
.tkm-divider-diagonal::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -5%;
  width: 110%;
  height: 70px;
  background: #1A1A1A;
  transform: skewY(-1.6deg);
  transform-origin: top left;
  z-index: 0;
}
.tkm-divider-diagonal > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .tkm-divider-diagonal::before { height: 44px; }
}

/* Soft vignette easing the eye out of a dark band into the next block. */
.tkm-fade-to-light::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(26,26,26,0) 0%, rgba(26,26,26,.85) 100%);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   4. CARD CONTRAST & THUMBNAIL FALLBACK
   -------------------------------------------------------------------------- */

/* Pamong grid read as "floating" with no clear edge. Firmer border and
   stronger text colour to meet contrast expectations. */
.tkm-card-pamong {
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}
.tkm-card-pamong:hover {
  border-color: #1A1A1A;
  box-shadow: 0 10px 28px rgba(17, 17, 17, .10);
  transform: translateY(-2px);
}
.tkm-card-pamong .tkm-pamong-name {
  color: #111111;          /* was #1A1A1A on #FAFAFA — now full-strength on white */
  font-weight: 700;
}
.tkm-card-pamong .tkm-pamong-role {
  color: #4B5563;          /* gray-600 -> darker, passes AA at 11px bold */
  font-weight: 600;
}
.tkm-card-pamong .tkm-pamong-bio {
  color: #52525B;          /* was gray-500, too faint */
  border-top: 1px solid #E0E0E0;
}

/* News/announcement cards: same firmer edge. */
.tkm-card-news {
  border: 1px solid #E0E0E0;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.tkm-card-news:hover {
  border-color: #1A1A1A;
  box-shadow: 0 10px 28px rgba(17, 17, 17, .10);
}

/* Thumbnail slot: fixed ratio so every card in the row is the same height,
   with or without a real image. */
.tkm-thumb-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F1F1F1;
  border: 1px solid #ECECEC;
}
.tkm-thumb-slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Branded fallback used when a post has no featured image — replaces the
   empty grey box that was breaking the row. */
.tkm-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.18) 0%, rgba(212,175,55,0) 60%),
    linear-gradient(160deg, #1A1A1A 0%, #0C0D11 100%);
}
.tkm-thumb-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,175,55,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.tkm-thumb-fallback img {
  position: relative;
  width: 46px;
  height: 46px;
  object-fit: contain;
  opacity: .92;
}
.tkm-thumb-fallback .tkm-fallback-mark {
  position: relative;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .16em;
  color: #0C0D11;
  background: linear-gradient(135deg, #D4AF37 0%, #F5D77F 55%, #996515 100%);
  padding: .35rem .6rem;
  line-height: 1;
}
.tkm-thumb-fallback .tkm-fallback-label {
  position: relative;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 215, 127, .75);
}

/* --------------------------------------------------------------------------
   5. COUNTDOWN BAND — realigned to the black + gold identity
   -------------------------------------------------------------------------- */
.tkm-countdown-band {
  background: #111111;
  border-top: 1px solid rgba(212, 175, 55, .22);
  border-bottom: 1px solid rgba(212, 175, 55, .22);
}
.tkm-countdown-band .tkm-count-num {
  color: #F5D77F;
  text-shadow: 0 0 22px rgba(212, 175, 55, .28);
}
.tkm-countdown-band .tkm-count-label {
  color: rgba(212, 175, 55, .72);
}
.tkm-countdown-band .tkm-count-sep {
  color: rgba(212, 175, 55, .35);
}
.tkm-countdown-band .tkm-count-cta {
  background: linear-gradient(135deg, #D4AF37 0%, #F5D77F 55%, #CCA43B 100%);
  color: #111111;
}
.tkm-countdown-band .tkm-count-cta:hover {
  filter: brightness(1.08);
}

/* Hero photo layer is translated by the JS parallax controller, so it is
   oversized to keep the lag from exposing a bare edge at the bottom. */
#tkm-hero.is-parallax .tkm-hero-stage {
  top: -12%;
  height: 124%;
}
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  #tkm-hero.is-parallax .tkm-hero-stage {
    top: 0;
    height: 100%;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   6. POPUP POSTER (kampanye marketing)
   Ditampilkan di halaman depan, bisa ditutup, lalu pengunjung masuk normal.
   -------------------------------------------------------------------------- */
.tkm-poster-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 320ms;
}
.tkm-poster-popup.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
}

.tkm-poster-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, .82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.tkm-poster-dialog {
  position: relative;
  max-width: min(92vw, 520px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(212, 175, 55, .45);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 40px rgba(212, 175, 55, .12);
  background: #0C0D11;
  transform: translateY(14px) scale(.97);
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
}
.tkm-poster-popup.is-open .tkm-poster-dialog {
  transform: translateY(0) scale(1);
}

.tkm-poster-dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
}
.tkm-poster-link { display: block; line-height: 0; }

.tkm-poster-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 175, 55, .5);
  background: #111111;
  color: #F5D77F;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.tkm-poster-close:hover {
  background: #F5D77F;
  color: #111111;
  transform: rotate(90deg);
}
.tkm-poster-close:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 3px;
}

.tkm-poster-caption {
  padding: .7rem 1rem;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 215, 127, .8);
  border-top: 1px solid rgba(212, 175, 55, .22);
}

@media (max-width: 640px) {
  .tkm-poster-dialog { max-width: 94vw; }
  .tkm-poster-close {
    top: -12px;
    right: -6px;
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tkm-poster-popup,
  .tkm-poster-dialog { transition: none; }
  .tkm-poster-dialog { transform: none; }
}

/* Cegah halaman ikut ter-scroll saat popup terbuka */
body.tkm-poster-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. STRIP KREDENSIAL (pindahan kartu indikator hero)
   Dulu menutupi separuh foto hero; sekarang jadi bar tipis di bawahnya.
   Isinya tetap ikut berganti mengikuti slide.
   -------------------------------------------------------------------------- */
.tkm-cred-strip {
  background: #111111;
  border-bottom: 1px solid rgba(212, 175, 55, .22);
  padding: 1.15rem 0;
}

.tkm-cred-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.tkm-cred-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  min-width: 0;
}
.tkm-cred-kat {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, .85);
  border: 1px solid rgba(212, 175, 55, .35);
  padding: .3rem .55rem;
  white-space: nowrap;
}
.tkm-cred-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 12px;
  font-weight: 700;
  color: #FFF2B2;
  letter-spacing: .01em;
}
.tkm-cred-badge svg { color: #D4AF37; }

.tkm-cred-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.tkm-cred-stat {
  padding: 0 1.25rem;
  border-left: 1px solid rgba(212, 175, 55, .18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.tkm-cred-stat:first-child { border-left: 0; padding-left: 0; }
.tkm-cred-stat:last-child { padding-right: 0; }

.tkm-cred-val {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #FFFFFF;
  line-height: 1.15;
}
.tkm-cred-lab {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, .75);
  margin-top: .15rem;
}

@media (max-width: 900px) {
  .tkm-cred-row { justify-content: flex-start; gap: 1rem; }
  .tkm-cred-stats { width: 100%; }
  .tkm-cred-stat { padding: 0 .9rem; }
}
@media (max-width: 560px) {
  .tkm-cred-strip { padding: 1rem 0; }
  .tkm-cred-stat {
    border-left: 0;
    padding: .35rem 0;
    width: 100%;
  }
  .tkm-cred-stats { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   8. TRUST BANNER (logo mitra industri)
   -------------------------------------------------------------------------- */
.tkm-trust {
  background: #F8F9FA;
  border-bottom: 1px solid #E8E8E8;
  padding: 2.25rem 0;
  overflow: hidden;
}
.tkm-trust-kicker {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8A8A8A;
  margin-bottom: 1.6rem;
}
.tkm-trust-empty {
  font-size: 12px;
  color: #9A9A9A;
  font-style: italic;
}
.tkm-trust-empty strong { color: #6B6B6B; font-style: normal; }

.tkm-trust-viewport {
  position: relative;
  overflow: hidden;
  /* pudar di kedua tepi supaya logo tidak terpotong mendadak */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tkm-trust-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: tkmMarquee calc(var(--tkm-n, 10) * 4s) linear infinite;
}
.tkm-trust-viewport:hover .tkm-trust-track { animation-play-state: paused; }
@keyframes tkmMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.tkm-trust-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}
.tkm-trust-item img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .55;
  transition: filter 300ms ease, opacity 300ms ease;
}
.tkm-trust-item:hover img { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tkm-trust-track { animation: none; }
  .tkm-trust-viewport { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   9. UVP (keunggulan utama)
   -------------------------------------------------------------------------- */
.tkm-uvp {
  background: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  padding: 4rem 0;
}
.tkm-uvp-grid {
  display: grid;
  grid-template-columns: repeat(var(--tkm-cols, 4), minmax(0, 1fr));
  gap: 2.5rem;
}
.tkm-uvp-item {
  text-align: center;
  padding: 0 .5rem;
  position: relative;
}
.tkm-uvp-item + .tkm-uvp-item::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: #E8E8E8;
}
.tkm-uvp-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.1rem;
  color: #111111;
  background: linear-gradient(135deg, #D4AF37 0%, #F5D77F 55%, #CCA43B 100%);
  box-shadow: 0 8px 22px rgba(212, 175, 55, .28);
}
.tkm-uvp-judul {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #111111;
  margin-bottom: .45rem;
  line-height: 1.3;
}
.tkm-uvp-desc {
  font-size: 12px;
  line-height: 1.65;
  color: #5A5A5A;
}

@media (max-width: 900px) {
  .tkm-uvp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .tkm-uvp-item + .tkm-uvp-item::before { display: none; }
}
@media (max-width: 520px) {
  .tkm-uvp-grid { grid-template-columns: 1fr; }
  .tkm-uvp { padding: 3rem 0; }
}

/* --------------------------------------------------------------------------
   10. ALUMNI SPOTLIGHT
   -------------------------------------------------------------------------- */
.tkm-alspot {
  background: linear-gradient(160deg, #1A1A1A 0%, #0C0D11 100%);
  border-bottom: 1px solid rgba(212, 175, 55, .18);
  position: relative;
  overflow: hidden;
}

.tkm-alspot-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: .5rem;
}
.tkm-alspot-viewport::-webkit-scrollbar { display: none; }

.tkm-alspot-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding: .25rem;
}

.tkm-alspot-card {
  position: relative;
  flex: 0 0 auto;
  width: min(84vw, 372px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(212, 175, 55, .28);
  transition: border-color 280ms ease, background 280ms ease, transform 280ms ease;
}
.tkm-alspot-card:hover {
  border-color: rgba(212, 175, 55, .65);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-3px);
}

/* Penanda data contoh, supaya tidak dikira alumni sungguhan */
.tkm-alspot-flag {
  position: absolute;
  top: .85rem;
  right: .85rem;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #111111;
  background: #F5D77F;
  padding: .22rem .5rem;
}

.tkm-alspot-foto {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 2px solid rgba(212, 175, 55, .5);
  background: linear-gradient(135deg, #1A1A1A, #0C0D11);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tkm-alspot-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* disamakan nadanya dengan tema web */
  filter: grayscale(35%) contrast(1.08) brightness(.98);
}
.tkm-alspot-inisial {
  font-size: 24px;
  font-weight: 900;
  color: #F5D77F;
  letter-spacing: -.02em;
}

.tkm-alspot-kutipan {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.75;
  color: #D8D8D8;
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
}

.tkm-alspot-meta {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(212, 175, 55, .22);
}
.tkm-alspot-nama {
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: .3rem;
  line-height: 1.3;
}
.tkm-alspot-kerja {
  font-size: 12px;
  font-weight: 700;
  color: #F5D77F;
  margin-bottom: .25rem;
}
.tkm-alspot-angkatan {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, .62);
}

.tkm-alspot-nav {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 2.25rem;
}
.tkm-alspot-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 21, 27, .9);
  border: 1px solid rgba(212, 175, 55, .35);
  color: #F5D77F;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.tkm-alspot-btn:hover {
  background: #D4AF37;
  border-color: #D4AF37;
  color: #111111;
}
.tkm-alspot-btn:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .tkm-alspot-viewport { scroll-behavior: auto; }
  .tkm-alspot-card { transition: none; }
}

/* ============================================================
   Inner pages (page.php, single-program_studi.php)
   Written as plain CSS on purpose: tailwind-built.css only carries
   the classes the Next.js reference actually used, so utilities that
   never appeared there are simply absent from the build.
   ============================================================ */

.tkm-page-hero {
  position: relative;
  background-color: #0C0D11;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.tkm-page-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 24px 64px;
}

.tkm-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #D4AF37;
}

.tkm-crumbs a { color: #D4AF37; text-decoration: none; }
.tkm-crumbs a:hover { color: #F5D77F; text-decoration: underline; }
.tkm-crumbs span[aria-hidden] { color: rgba(212, 175, 55, 0.45); }
.tkm-crumbs .is-current { color: #FFFFFF; }

.tkm-page-title {
  margin: 0;
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(30px, 5vw, 52px);
}

.tkm-page-rule {
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 24px;
  background: linear-gradient(90deg, #D4AF37, #996515);
}

.tkm-page-lead {
  max-width: 720px;
  margin: 20px 0 0;
  color: #D9D9DE;
  font-size: 15px;
  line-height: 1.75;
}

.tkm-page-body {
  background: #FAFAFA;
  padding: 96px 24px;
}

/* ---- prose column ---- */

.tkm-prose {
  max-width: 820px;
  margin: 0 auto;
  color: #3F3F46;
  font-size: 15px;
  line-height: 1.8;
}

.tkm-prose > *:first-child { margin-top: 0; }
.tkm-prose > *:last-child { margin-bottom: 0; }

.tkm-prose p { margin: 0 0 20px; }

.tkm-prose h2,
.tkm-prose h3,
.tkm-prose h4 {
  color: #1A1A1A;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.tkm-prose h2 { margin: 48px 0 16px; font-size: 24px; }
.tkm-prose h3 { margin: 36px 0 12px; font-size: 19px; }
.tkm-prose h4 { margin: 28px 0 10px; font-size: 16px; }

.tkm-prose h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 12px;
  background: #D4AF37;
}

.tkm-prose a { color: #996515; text-decoration: underline; text-underline-offset: 2px; }
.tkm-prose a:hover { color: #1A1A1A; }

.tkm-prose strong { color: #1A1A1A; font-weight: 700; }

.tkm-prose ul,
.tkm-prose ol { margin: 0 0 20px; padding-left: 22px; }
.tkm-prose li { margin-bottom: 8px; }
.tkm-prose ul > li::marker { color: #D4AF37; }
.tkm-prose ol > li::marker { color: #996515; font-weight: 700; }

.tkm-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px 0;
  border: 1px solid #E0E0E0;
}

.tkm-prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid #D4AF37;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #1A1A1A;
}

.tkm-prose hr { margin: 48px 0; border: 0; border-top: 1px solid #E0E0E0; }

/* Wide content must scroll inside itself, never push the page sideways. */
.tkm-prose .tkm-table-scroll,
.tkm-prose figure.wp-block-table { overflow-x: auto; }

.tkm-prose table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.tkm-prose th,
.tkm-prose td {
  padding: 12px 14px;
  border: 1px solid #E0E0E0;
  text-align: left;
  vertical-align: top;
}

.tkm-prose th {
  background: #1A1A1A;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.tkm-prose tbody tr:nth-child(even) { background: #F8F9FA; }

/* ---- fact strip: bidang keahlian / program studi / jurusan ---- */

.tkm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: 0 0 56px;
  background: #E0E0E0;
  border: 1px solid #E0E0E0;
}

.tkm-fact { background: #FFFFFF; padding: 22px 24px; }

.tkm-fact-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #996515;
}

.tkm-fact-value {
  display: block;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---- subject list ---- */

.tkm-subjects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.tkm-subjects li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  font-size: 14px;
  line-height: 1.5;
  color: #1A1A1A;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tkm-subjects li:hover {
  border-color: #1A1A1A;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.08);
}

.tkm-subjects li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background: #D4AF37;
}

/* ---- closing call to action ---- */

.tkm-page-cta {
  background: #111111;
  padding: 64px 24px;
  text-align: center;
}

.tkm-page-cta h2 {
  margin: 0 0 12px;
  color: #FFFFFF;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tkm-page-cta p {
  max-width: 560px;
  margin: 0 auto 28px;
  color: #A1A1AA;
  font-size: 14px;
  line-height: 1.7;
}

.tkm-page-cta .tkm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: linear-gradient(90deg, #D4AF37, #F5D77F, #CCA43B);
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.tkm-page-cta .tkm-cta-btn:hover { filter: brightness(1.1); }

/* ---- sibling programme links ---- */

.tkm-siblings { background: #F8F9FA; padding: 64px 24px; border-top: 1px solid #E0E0E0; }
.tkm-siblings-inner { max-width: 1280px; margin: 0 auto; }

.tkm-siblings-kicker {
  margin: 0 0 24px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #996515;
}

.tkm-siblings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.tkm-sibling {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tkm-sibling:hover { border-color: #1A1A1A; box-shadow: 0 6px 18px rgba(26, 26, 26, 0.08); }
.tkm-sibling svg { color: #D4AF37; }

@media (max-width: 767px) {
  .tkm-page-hero-inner { padding: 48px 20px 44px; }
  .tkm-page-body { padding: 56px 20px; }
  .tkm-page-cta,
  .tkm-siblings { padding: 48px 20px; }
  .tkm-facts { margin-bottom: 40px; }
}

/* ============================================================
   Legacy Elementor bodies, pulled onto the Gold Obsidian palette.

   Six inner pages still hold Elementor content while they wait to be
   rebuilt one at a time. Until then they render inside page.php, so this
   corrects colour and type only and deliberately leaves layout, columns
   and images alone.

   Scoped to .tkm-prose: the homepage and the programme pages carry no
   Elementor markup and are untouched. !important is needed because
   Elementor writes per-page generated stylesheets (uploads/elementor/css/
   post-NNNN.css) whose element classes otherwise win the cascade.

   Note on what is NOT here: the cool greys (#E3E4E8, #F5F5F5) on some
   sections also come from those generated files and cannot be targeted by
   colour from outside. They sit within a few points of the #FAFAFA ground,
   so they are left alone rather than blanket-overriding every section
   background and flattening the ones that are meant to be there.
   ============================================================ */

/* ---- type ---- */

.tkm-prose .elementor h1,
.tkm-prose .elementor h2,
.tkm-prose .elementor h3,
.tkm-prose .elementor h4,
.tkm-prose .elementor h5,
.tkm-prose .elementor h6,
.tkm-prose .elementor p,
.tkm-prose .elementor li,
.tkm-prose .elementor td,
.tkm-prose .elementor th,
.tkm-prose .elementor a,
.tkm-prose .elementor .elementor-heading-title,
.tkm-prose .elementor .elementor-text-editor,
.tkm-prose .elementor .elementor-button {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
}

/* Playfair is reserved for the italic pull-quote moment, never for headings,
   and the legacy pages set a serif on section titles. */
.tkm-prose .elementor h1,
.tkm-prose .elementor h2,
.tkm-prose .elementor .elementor-heading-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ---- colour ---- */

/* A violet section overlay, #504992. Gold is the only accent in this system,
   so the overlay becomes the standard ink dark band. Elementor already sets
   white text on it, so contrast is preserved by matching its lightness. */
.tkm-prose .elementor .elementor-background-overlay {
  background-color: #1A1A1A !important;
  opacity: 1 !important;
}

/* A hand-written WhatsApp launcher sits inside the Profil page's Elementor
   content (an HTML widget, not a plugin, and only on that one page). It pins
   itself bottom-LEFT with a 5px radius and pulls its icon from
   web.whatsapp.com, which does not load. Corrected here rather than by editing
   the page's builder data, so the fix survives a content re-save. */
.tkm-prose div[style*="position:fixed"] {
  left: auto !important;
  right: 20px !important;
  bottom: 20px !important;
}

.tkm-prose div[style*="position:fixed"] img[src*="whatsapp.com"] {
  display: none !important;
}

.tkm-prose div[style*="position:fixed"] button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
  padding: 13px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.tkm-prose div[style*="position:fixed"] button:hover {
  filter: brightness(1.08) !important;
}

@media (max-width: 767px) {
  .tkm-prose div[style*="position:fixed"] {
    right: 12px !important;
    bottom: 12px !important;
  }
  .tkm-prose div[style*="position:fixed"] button {
    padding: 11px 16px !important;
    font-size: 11px !important;
  }
}

/* Body links pick up the deep-gold link colour. */
.tkm-prose .elementor a:not(.elementor-button) {
  color: #996515 !important;
}

.tkm-prose .elementor a:not(.elementor-button):hover {
  color: #1A1A1A !important;
}

/* Buttons follow the Gold Obsidian spec: sharp, gold gradient, uppercase. */
.tkm-prose .elementor .elementor-button {
  background-image: linear-gradient(90deg, #D4AF37, #F5D77F, #CCA43B) !important;
  background-color: transparent !important;
  color: #000000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}

/* ---- shape: every corner is sharp in this system ---- */

.tkm-prose .elementor .elementor-section,
.tkm-prose .elementor .elementor-column,
.tkm-prose .elementor .elementor-widget-wrap,
.tkm-prose .elementor .elementor-widget-container,
.tkm-prose .elementor .elementor-button,
.tkm-prose .elementor img {
  border-radius: 0 !important;
}

/* ---- containment ---- */

/* These sections were authored full-bleed; keep them inside the reading
   column instead of letting them punch out of it. */
.tkm-prose .elementor {
  overflow-x: hidden;
}

.tkm-prose .elementor .elementor-section {
  max-width: 100%;
}

/* Pamong initials avatar, and the one image placeholder that shares its classes.
   The template asks for bg-gradient-to-br from-[#1A1A1A] to-[#0C0D11], but
   from-[#1A1A1A] never made it into tailwind-built.css. With no start stop the
   gradient is invalid, the browser drops it, and the gold initials sat straight
   on the white card at 1.4:1. Declared here so the circle renders as designed. */
.bg-gradient-to-br.from-\[\#1A1A1A\].to-\[\#0C0D11\] {
  background-image: linear-gradient(to bottom right, #1A1A1A, #0C0D11);
}

/* Square and portrait photos, which is most of Instagram, sit whole inside the
   16:10 slot over a blurred copy of themselves instead of losing their top and
   bottom to the crop. Landscape photos keep the edge-to-edge cover. */
.tkm-thumb-slot--contain > img {
  object-fit: contain;
}

.tkm-thumb-slot--contain > .tkm-thumb-backdrop {
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(18px) brightness(0.7) saturate(1.1);
}

/* ==========================================================================
   Visi & Misi (page-visi-misi.php)

   Four layouts in sequence, so no two sections of the page repeat one:
   the obsidian photo masthead, the ink band whose photo bleeds off the grid,
   the two-column numbered mission rows, and the goals list beside its own
   heading rail on a tinted ground.
   ========================================================================== */

.tkm-vm-hero .tkm-page-hero-inner {
  padding-top: 96px;
  padding-bottom: 88px;
}

/* ---- Visi: the one editorial moment on the page ---- */

.tkm-vm-visi {
  background: #1A1A1A;
  color: #FFFFFF;
  overflow: hidden; /* the photo below runs past the container on purpose */
}

.tkm-vm-visi-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 0 96px 24px;
}

/* Playfair is the design's pull-quote face, and the vision statement is the
   page's pull quote. Italic descenders need the extra leading. */
.tkm-vm-statement {
  margin: 24px 0 0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

/* The statement already names its own three pillars, so the emphasis sits
   inside the sentence instead of being repeated as three separate claims. */
.tkm-vm-key {
  color: #D4AF37;
}

.tkm-vm-pilar {
  display: flex;
  flex-wrap: wrap;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.tkm-vm-pilar li {
  flex: 1 1 150px;
  margin-right: 22px;
  padding: 24px 22px 0 0;
  border-right: 1px solid rgba(212, 175, 55, 0.18);
}

.tkm-vm-pilar li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

.tkm-vm-kode {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #D4AF37;
}

.tkm-vm-judul {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #FFFFFF;
}

.tkm-vm-visi-foto {
  margin: 0;
  position: relative;
}

/* Bleeds to the viewport edge on wide screens, which is the only place the page
   breaks its own frame. max() keeps it at the container padding below 1280px. */
.tkm-vm-visi-foto img {
  display: block;
  width: calc(100% + max(24px, (100vw - 1280px) / 2));
  max-width: none;
  height: clamp(320px, 40vw, 520px);
  object-fit: cover;
  border-left: 1px solid rgba(212, 175, 55, 0.35);
}

/* ---- Misi and Tujuan ---- */

.tkm-vm-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.tkm-vm-heading {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #1A1A1A;
}

.tkm-vm-heading--dark {
  color: #FFFFFF;
}

.tkm-vm-misi {
  background: #FAFAFA;
  padding: 96px 24px;
}

.tkm-vm-misi-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 0 56px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.tkm-vm-misi-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid #E0E0E0;
}

/* Deep gold rather than the accent: the numerals sit on a light ground, where
   the accent itself does not carry enough contrast to be read. */
.tkm-vm-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #996515;
}

.tkm-vm-misi-list p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #3F3F46;
  max-width: 62ch;
}

.tkm-vm-tujuan {
  background: #F1F1F1;
  border-top: 1px solid #E0E0E0;
  padding: 96px 24px;
}

.tkm-vm-tujuan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 56px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.tkm-vm-tujuan-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #E0E0E0;
  font-size: 14px;
  line-height: 1.65;
  color: #3F3F46;
}

.tkm-vm-tujuan-list svg {
  margin-top: 3px;
  color: #996515;
}

/* The goals sit beside their heading instead of under it, so the last reading
   block on the page does not repeat the mission layout one section earlier. */
.tkm-vm-inner--rail {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.tkm-vm-inner--rail .tkm-vm-tujuan-list {
  margin-top: 0;
}

.tkm-vm-rail-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5A5A5A;
}

/* ---- narrower screens ---- */

@media (max-width: 1023px) {
  .tkm-vm-visi-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 20px;
  }

  .tkm-vm-inner--rail {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tkm-vm-inner--rail .tkm-vm-tujuan-list {
    margin-top: 40px;
  }

  .tkm-vm-visi-foto img {
    width: 100%;
    height: clamp(240px, 56vw, 360px);
    border-left: 0;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
  }
}

@media (max-width: 767px) {
  .tkm-vm-hero .tkm-page-hero-inner {
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .tkm-vm-misi,
  .tkm-vm-tujuan {
    padding: 64px 20px;
  }

  .tkm-vm-pilar li {
    flex: 1 1 100%;
    margin-right: 0;
    padding: 18px 0 0;
    border-right: 0;
  }
}

/* ==========================================================================
   Sejarah Sekolah (page-sejarah.php)

   Five layouts in sequence, none of them repeated: the photo masthead, the
   narrative beside its founding record, the timeline on ink, the leadership
   stepper, the bar chart beside a photograph, and the school's own table.
   ========================================================================== */

.tkm-sej-heading {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #1A1A1A;
}

.tkm-sej-heading--dark {
  color: #FFFFFF;
}

.tkm-sej-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ---- Pendirian: the narrative with the record it comes from ---- */

.tkm-sej-awal {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-sej-awal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
}

/* The opening sentence is the page's entry point, so it is set a size up from
   the rest of the prose column. */
.tkm-sej-narasi > p:first-child {
  font-size: 19px;
  line-height: 1.75;
  color: #1A1A1A;
}

/* A record, not a card: hairlines and a gold cap rule, no shadow or radius. */
.tkm-sej-akta {
  border: 1px solid #E0E0E0;
  border-top: 3px solid #D4AF37;
  background: #FFFFFF;
  padding: 28px;
}

.tkm-sej-akta h2 {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1A1A1A;
}

.tkm-sej-akta dl {
  margin: 0;
}

.tkm-sej-akta dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #996515;
}

.tkm-sej-akta dd {
  margin: 6px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #E0E0E0;
  font-size: 15px;
  line-height: 1.55;
  color: #1A1A1A;
}

.tkm-sej-akta dd + dt {
  display: block;
  margin-top: 16px;
}

.tkm-sej-akta dd:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---- Tonggak: the timeline, the one dark band on the page ---- */

.tkm-sej-tonggak {
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 96px 24px;
}

.tkm-sej-timeline {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.tkm-sej-timeline li {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
}

.tkm-sej-tahun {
  padding: 0 32px 0 0;
  text-align: right;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #D4AF37;
}

/* The spine runs through the whole list; the dot marks each entry on it. */
.tkm-sej-tonggak-isi {
  position: relative;
  padding: 0 0 48px 34px;
  border-left: 1px solid rgba(212, 175, 55, 0.3);
}

.tkm-sej-timeline li:last-child .tkm-sej-tonggak-isi {
  padding-bottom: 0;
}

.tkm-sej-tonggak-isi::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 9px;
  width: 9px;
  height: 9px;
  background: #D4AF37;
}

.tkm-sej-tonggak-isi h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
}

.tkm-sej-tonggak-isi p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #E8E8E8;
  max-width: 62ch;
}

/* Scoped to beat .tkm-sej-tonggak-isi p above rather than reaching for
   !important, which the rest of this stylesheet never uses. */
.tkm-sej-tonggak-isi .tkm-sej-sk {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #E8E8E8;
}

/* ---- Kepemimpinan ---- */

.tkm-sej-pimpinan {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-sej-kepsek {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 40px 0 0;
}

/* No portrait exists for the headmaster, so initials stand in rather than a
   stock photograph of someone else. */
.tkm-sej-inisial {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  background: #1A1A1A;
  color: #D4AF37;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tkm-sej-kepsek-nama {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-sej-kepsek-peran {
  margin: 4px 0 0;
  font-size: 13px;
  color: #5A5A5A;
}

.tkm-sej-periode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.tkm-sej-periode li {
  padding: 20px 0 0;
  border-top: 2px solid #E0E0E0;
}

/* Periods are listed in order, so the last one is the period now running. */
.tkm-sej-periode li:last-child {
  border-top-color: #D4AF37;
}

.tkm-sej-periode-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5A5A5A;
}

.tkm-sej-periode li:last-child .tkm-sej-periode-label {
  color: #996515;
}

.tkm-sej-periode-tahun {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #1A1A1A;
}

.tkm-sej-periode-catatan {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #5A5A5A;
}

.tkm-sej-pimpinan-catatan {
  margin: 36px 0 0;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.7;
  color: #3F3F46;
}

/* ---- Pertumbuhan: the chart ---- */

.tkm-sej-tumbuh {
  background: #F1F1F1;
  padding: 88px 24px;
}

.tkm-sej-tumbuh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 56px;
  margin: 40px 0 0;
}

.tkm-sej-tumbuh-teks {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #3F3F46;
}

.tkm-sej-lonjakan {
  display: flex;
  gap: 48px;
  margin: 28px 0 0;
}

.tkm-sej-lonjakan dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5A5A5A;
}

.tkm-sej-lonjakan dd {
  margin: 4px 0 0;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #1A1A1A;
}

.tkm-sej-foto img {
  display: block;
  width: 100%;
  height: clamp(240px, 30vw, 340px);
  object-fit: cover;
  border: 1px solid #E0E0E0;
}

.tkm-sej-foto {
  margin: 0;
}

/* The bars overflow the padding box upward on purpose: the value label for the
   tallest year sits in that 24px of reserved space. */
.tkm-sej-chart {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 300px;
  box-sizing: border-box;
  padding: 24px 0 0;
  margin: 56px 0 60px;
  list-style: none;
  border-bottom: 1px solid #D8D8D8;
}

.tkm-sej-chart li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tkm-sej-val {
  flex: 0 0 auto;
  margin-bottom: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #5A5A5A;
}

/* Deep gold, not the accent: on a light ground the accent itself does not
   carry the 3:1 a bar needs to read as a shape. */
.tkm-sej-bar {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  background: #996515;
}

.tkm-sej-chart li.is-puncak .tkm-sej-bar {
  background: #1A1A1A;
}

.tkm-sej-chart li.is-puncak .tkm-sej-val {
  color: #1A1A1A;
}

.tkm-sej-tahun-kecil {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #5A5A5A;
}

/* ---- Tabel ---- */

.tkm-sej-tabel {
  background: #FFFFFF;
  border-top: 1px solid #E0E0E0;
  padding: 88px 24px;
}

.tkm-sej-tabel-wrap {
  margin: 36px 0 0;
  overflow-x: auto;
  border: 1px solid #E0E0E0;
}

.tkm-sej-tabel-wrap:focus-visible {
  outline: 2px solid #996515;
  outline-offset: 2px;
}

.tkm-sej-tabel table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* The caption would scroll away with the 940px table, so it is left for
   assistive tech only; the visible note sits under the table instead. */
.tkm-sej-tabel caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tkm-sej-tabel thead th {
  padding: 12px 14px;
  background: #1A1A1A;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}

.tkm-sej-tabel thead tr:last-child th {
  background: #1F1F1F;
}

.tkm-sej-tabel tbody td {
  padding: 11px 14px;
  text-align: center;
  font-size: 14px;
  color: #3F3F46;
  border-top: 1px solid #E0E0E0;
}

.tkm-sej-tabel tbody th[scope="row"] {
  padding: 11px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: #1A1A1A;
  border-top: 1px solid #E0E0E0;
  /* The year column stays put while the rest of the table scrolls sideways. */
  position: sticky;
  left: 0;
  background: #FFFFFF;
  z-index: 1;
}

.tkm-sej-tabel tbody tr:nth-child(even) td {
  background: #FAFAFA;
}

.tkm-sej-tabel tbody tr:nth-child(even) th[scope="row"] {
  background: #FAFAFA;
}

.tkm-sej-tabel td.is-jml {
  font-weight: 700;
  color: #1A1A1A;
}

.tkm-sej-tabel td.is-siswa {
  font-weight: 800;
  color: #996515;
}

.tkm-sej-tabel-catatan {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5A5A5A;
}

/* ---- narrower screens ---- */

@media (max-width: 1023px) {
  .tkm-sej-awal-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tkm-sej-tumbuh-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .tkm-sej-timeline li {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .tkm-sej-tahun {
    padding-right: 22px;
  }
}

@media (max-width: 767px) {
  .tkm-sej-awal,
  .tkm-sej-pimpinan,
  .tkm-sej-tumbuh,
  .tkm-sej-tabel {
    padding: 64px 20px;
  }

  .tkm-sej-tonggak {
    padding: 72px 20px;
  }

  /* The year moves above its entry so the text keeps a usable measure. */
  .tkm-sej-timeline li {
    grid-template-columns: 1fr;
  }

  .tkm-sej-tahun {
    padding: 0 0 6px 34px;
    text-align: left;
  }

  .tkm-sej-tonggak-isi {
    padding-bottom: 36px;
  }

  .tkm-sej-lonjakan {
    gap: 32px;
  }

  .tkm-sej-chart {
    height: 210px;
    gap: 3px;
    margin: 44px 0 52px;
  }

  /* At this width a value on every bar is unreadable, and only every third
     year label has room to sit without colliding with its neighbour. */
  .tkm-sej-val {
    display: none;
  }

  .tkm-sej-chart li:not(:nth-child(3n + 1)) .tkm-sej-tahun-kecil {
    display: none;
  }
}


/* ==========================================================================
   Dewan Pamong (page-pamong.php)

   The organisation chart is drawn as stacked, wrapping tiers (head, then the
   Waka/TU columns with their staff, then the Ketua Konsentrasi row) instead of
   one wide connector tree, so it always fits the viewport and never scrolls
   sideways. Connectors are centred pseudo-element lines between tiers. Below the
   chart is a directory grouped by tier.
   ========================================================================== */

.tkm-pm-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.tkm-pm-heading {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #1A1A1A;
}

/* ---- Bagan ---- */

.tkm-pm-bagan {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-pm-org {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tkm-pm-head-row {
  display: flex;
  justify-content: center;
}

/* each tier hangs off a centred connector dropping from the tier above */
.tkm-pm-band {
  position: relative;
  width: 100%;
  margin-top: 36px;
  padding-top: 36px;
}

.tkm-pm-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 36px;
  background: #D8D8D8;
}

.tkm-pm-band-label {
  margin: 0 0 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #996515;
}

.tkm-pm-cols,
.tkm-pm-units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}

.tkm-pm-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 178px;
}

/* staff stacked under a branch head, joined by a short drop */
.tkm-pm-colsub {
  position: relative;
  margin-top: 18px;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tkm-pm-colsub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 18px;
  background: #D8D8D8;
}

.tkm-pm-colitem {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- a node ---- */

.tkm-pm-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 178px;
  padding: 16px 12px;
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  text-align: center;
}

.tkm-pm-ava {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #1A1A1A;
  color: #D4AF37;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background-size: cover;
  background-position: center;
}

.tkm-pm-ava--photo {
  color: transparent;
}

.tkm-pm-nm {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-pm-jb {
  font-size: 11px;
  line-height: 1.35;
  color: #996515;
}

/* branch heads (Waka / Tata Usaha) carry a gold cap */
.tkm-pm-node--waka {
  border-top: 3px solid #D4AF37;
}

/* unit heads (Ketua Konsentrasi) carry a deep-gold cap to read as a tier */
.tkm-pm-node--unit {
  border-top: 3px solid #996515;
}

/* the head of school: dark card, gold monogram, a size larger */
.tkm-pm-node.is-root {
  width: 216px;
  padding: 22px 18px;
  background: #1A1A1A;
  border-color: #1A1A1A;
}

.tkm-pm-node.is-root .tkm-pm-ava {
  width: 50px;
  height: 50px;
  font-size: 17px;
  background: #D4AF37;
  color: #1A1A1A;
}

.tkm-pm-node.is-root .tkm-pm-nm {
  font-size: 15px;
  color: #FFFFFF;
}

.tkm-pm-node.is-root .tkm-pm-jb {
  font-size: 12px;
  color: #F5D77F;
}

/* a column head and its staff span the column width; staff sit a touch smaller */
.tkm-pm-col > .tkm-pm-node,
.tkm-pm-colsub .tkm-pm-node {
  width: 100%;
}

.tkm-pm-colsub .tkm-pm-node {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 11px 12px;
}

.tkm-pm-colsub .tkm-pm-ava {
  width: 34px;
  height: 34px;
  font-size: 12px;
  flex-shrink: 0;
}

.tkm-pm-colsub .tkm-pm-nm {
  font-size: 12px;
}

.tkm-pm-colsub .tkm-pm-jb {
  font-size: 10px;
}

/* ---- Direktori ---- */

.tkm-pm-direktori {
  background: #FFFFFF;
  border-top: 1px solid #E0E0E0;
  padding: 88px 24px;
}

.tkm-pm-grup {
  margin: 44px 0 0;
}

.tkm-pm-grup-judul {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E0E0E0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #996515;
}

.tkm-pm-kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}

.tkm-pm-kartu {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 22px;
  border: 1px solid #E0E0E0;
  background: #FAFAFA;
}

.tkm-pm-kartu.is-lead {
  grid-column: 1 / -1;
  background: #1A1A1A;
  border-color: #1A1A1A;
}

.tkm-pm-kartu-ava {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: #1A1A1A;
  color: #D4AF37;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background-size: cover;
  background-position: center;
}

.tkm-pm-kartu.is-lead .tkm-pm-kartu-ava {
  background: #D4AF37;
  color: #1A1A1A;
}

.tkm-pm-kartu-ava--photo {
  color: transparent;
}

.tkm-pm-kartu-nm {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #1A1A1A;
}

.tkm-pm-kartu.is-lead .tkm-pm-kartu-nm {
  color: #FFFFFF;
}

.tkm-pm-kartu-jb {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #996515;
}

.tkm-pm-kartu.is-lead .tkm-pm-kartu-jb {
  color: #F5D77F;
}

.tkm-pm-kartu-bio {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: #3F3F46;
}

.tkm-pm-kartu.is-lead .tkm-pm-kartu-bio {
  color: #E8E8E8;
  max-width: 70ch;
}

/* ---- phones ---- */

@media (max-width: 767px) {
  .tkm-pm-bagan,
  .tkm-pm-direktori {
    padding: 64px 20px;
  }

  .tkm-pm-cols,
  .tkm-pm-units {
    gap: 14px;
  }

  .tkm-pm-col {
    width: 100%;
    max-width: 340px;
  }

  .tkm-pm-node {
    width: 100%;
    max-width: 340px;
  }

  .tkm-pm-units .tkm-pm-node {
    width: 100%;
  }

  .tkm-pm-kartu.is-lead {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Daftar Guru (page-daftar-guru.php)

   ID card: the school logo top-left, name to the right, a gold ridge at the
   base, and the teacher's photo as a cut-out figure standing on that ridge.
   Upload a transparent PNG and the card supplies the background. Cards stay
   white in both themes; ink and gold flip to the light theme's navy and lime.
   ========================================================================== */

.tkm-gr-body {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-gr-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.tkm-gr-count {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #996515;
}

.tkm-gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}

.tkm-gr-item {
  display: flex;
  flex-direction: column;
}

.tkm-gr-card {
  position: relative;
  aspect-ratio: 300 / 388;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.tkm-gr-logo {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 4;
  height: 30px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

/* name sits in the right column, clear of the figure on the left */
.tkm-gr-name {
  position: absolute;
  top: 20%;
  left: 57%;
  right: 18px;
  z-index: 4;
}

.tkm-gr-nm {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #1A1A1A;
}

.tkm-gr-dot {
  display: block;
  width: 9px;
  height: 9px;
  margin: 16px 0 0;
  background: #D4AF37;
}

.tkm-gr-nip {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #5A5A5A;
}

.tkm-gr-nip span {
  font-weight: 800;
  color: #1A1A1A;
}

/* the gold ridge across the base */
.tkm-gr-mtn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 26%;
  display: block;
  fill: #D4AF37;
}

/* the cut-out figure: contained so a transparent PNG is never cropped,
   anchored to the bottom-left so it stands on the ridge */
.tkm-gr-figure {
  position: absolute;
  bottom: 0;
  left: -2%;
  z-index: 2;
  width: 60%;
  height: 94%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}

/* a teacher with no photo: the card centres its name, like an unfilled badge */
.tkm-gr-card.no-foto .tkm-gr-name {
  top: 22%;
  left: 24px;
  right: 24px;
  text-align: center;
}

.tkm-gr-card.no-foto .tkm-gr-dot {
  margin-left: auto;
  margin-right: auto;
}

.tkm-gr-card.no-foto .tkm-gr-figure.is-initial {
  width: 100%;
  left: 0;
}

/* honest placeholder: a monogram standing where the figure would be */
.tkm-gr-figure.is-initial {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8%;
  left: 0;
}

.tkm-gr-figure.is-initial span {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  background: #1A1A1A;
  color: #D4AF37;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tkm-gr-mapel {
  margin: 14px 2px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: #996515;
}

.tkm-gr-kosong {
  margin: 0;
  font-size: 15px;
  color: #5A5A5A;
}

@media (max-width: 767px) {
  .tkm-gr-body {
    padding: 64px 20px;
  }

  .tkm-gr-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 20px;
  }
}

/* ==========================================================================
   Prestasi (page-prestasi.php)

   A wall of achievement cards: photo with a gold medal ribbon, then level,
   year and the achievement. Editable from the Prestasi menu.
   ========================================================================== */

.tkm-pr-body {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-pr-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ---- summary strip ---- */

.tkm-pr-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid #E0E0E0;
}

.tkm-pr-stat-total {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #996515;
}

.tkm-pr-stat-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1A1A1A;
}

.tkm-pr-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.tkm-pr-tally li {
  font-size: 13px;
  color: #5A5A5A;
}

.tkm-pr-tally b {
  color: #1A1A1A;
}

/* ---- grid ---- */

.tkm-pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

.tkm-pr-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  overflow: hidden;
}

.tkm-pr-foto {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #1A1A1A;
}

.tkm-pr-foto.is-empty {
  display: grid;
  place-items: center;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0) 60%),
    linear-gradient(160deg, #1A1A1A 0%, #0C0D11 100%);
}

.tkm-pr-foto-ikon {
  color: #D4AF37;
}

/* the medal ribbon rides the top-left corner of the photo */
.tkm-pr-medali {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 14px;
  background: #D4AF37;
  color: #1A1A1A;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tkm-pr-isi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.tkm-pr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tkm-pr-tingkat {
  padding: 3px 10px;
  border: 1px solid #D4AF37;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #996515;
}

.tkm-pr-tahun {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #5A5A5A;
}

.tkm-pr-judul {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-pr-peraih {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #996515;
}

.tkm-pr-ringkas {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3F3F46;
}

.tkm-pr-kosong {
  margin: 0;
  font-size: 15px;
  color: #5A5A5A;
}

@media (max-width: 767px) {
  .tkm-pr-body {
    padding: 64px 20px;
  }

  .tkm-pr-tally {
    margin-left: 0;
    width: 100%;
  }

  .tkm-pr-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 16px;
  }
}

/* ==========================================================================
   Ekstrakurikuler (page-ekstrakurikuler.php)

   Activities grouped under category headings, each a grid of compact cards.
   Editable from the Ekstrakurikuler menu.
   ========================================================================== */

.tkm-ek-body {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-ek-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.tkm-ek-count {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #996515;
}

.tkm-ek-grup {
  margin: 44px 0 0;
}

.tkm-ek-grup-judul {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E0E0E0;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-ek-grup-ikon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: #1A1A1A;
  color: #D4AF37;
}

.tkm-ek-grup-jml {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #996515;
}

.tkm-ek-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}

.tkm-ek-card {
  padding: 20px;
  border: 1px solid #E0E0E0;
  border-left: 3px solid #D4AF37;
  background: #FFFFFF;
}

.tkm-ek-nm {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-ek-desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #3F3F46;
}

.tkm-ek-kosong {
  margin: 0;
  font-size: 15px;
  color: #5A5A5A;
}

@media (max-width: 767px) {
  .tkm-ek-body {
    padding: 64px 20px;
  }

  .tkm-ek-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px;
  }
}

/* ==========================================================================
   Beasiswa (page-beasiswa.php)
   ========================================================================== */

.tkm-bea-body {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-bea-inner {
  max-width: 900px;
  margin: 0 auto;
}

.tkm-bea-grid {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tkm-bea-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 20px;
  padding: 24px;
  border: 1px solid #E0E0E0;
  border-left: 3px solid #D4AF37;
  background: #FFFFFF;
}

.tkm-bea-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #996515;
}

.tkm-bea-nm {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-bea-ket {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3F3F46;
}

.tkm-bea-catatan {
  margin-top: 40px;
}

.tkm-bea-kosong {
  margin: 0;
  font-size: 15px;
  color: #5A5A5A;
}

/* ==========================================================================
   PKL (page-pkl.php)
   ========================================================================== */

.tkm-pkl-body {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-pkl-inner {
  max-width: 900px;
  margin: 0 auto;
}

.tkm-pkl-langkah {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0 40px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.tkm-pkl-langkah li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid #E0E0E0;
}

.tkm-pkl-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: #996515;
}

.tkm-pkl-langkah h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #1A1A1A;
}

.tkm-pkl-langkah p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3F3F46;
}

.tkm-pkl-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.tkm-pkl-unduh {
  padding: 32px;
  background: #1A1A1A;
  color: #FFFFFF;
}

.tkm-pkl-unduh h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.tkm-pkl-unduh p {
  margin: 10px 0 24px;
  font-size: 15px;
  line-height: 1.65;
  color: #E8E8E8;
}

.tkm-pkl-unduh .tkm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tkm-pkl-kontak {
  padding: 32px;
  border: 1px solid #E0E0E0;
  border-top: 3px solid #D4AF37;
  background: #FFFFFF;
}

.tkm-pkl-kontak h2 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #996515;
}

.tkm-pkl-kontak-nama {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-pkl-kontak-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #996515;
}

.tkm-pkl-kontak-tel:hover {
  color: #1A1A1A;
}

.tkm-pkl-catatan {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .tkm-bea-body,
  .tkm-pkl-body {
    padding: 64px 20px;
  }

  .tkm-pkl-panel {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PPDB (page-ppdb.php)
   ========================================================================== */

.tkm-ppdb-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 30px;
  background: linear-gradient(90deg, #D4AF37, #F5D77F, #CCA43B);
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.tkm-ppdb-hero-cta:hover { filter: brightness(1.1); }

.tkm-ppdb-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.tkm-ppdb-heading {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1A1A1A;
}

.tkm-ppdb-heading--dark {
  color: #FFFFFF;
}

/* Jalur pendaftaran ------------------------------------------------------- */
.tkm-ppdb-jalur {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-ppdb-jalur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
  margin-top: 32px;
}

.tkm-ppdb-jalur-card {
  padding: 26px 24px;
  border: 1px solid #E0E0E0;
  border-top: 3px solid #D4AF37;
  background: #FFFFFF;
}

.tkm-ppdb-jalur-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #996515;
}

.tkm-ppdb-jalur-card h3 {
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-ppdb-jalur-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3F3F46;
}

/* Program studi ----------------------------------------------------------- */
.tkm-ppdb-prodi {
  background: #FFFFFF;
  padding: 88px 24px;
  border-top: 1px solid #E0E0E0;
}

.tkm-ppdb-prodi-lead {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5A5A5A;
}

.tkm-ppdb-prodi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  margin-top: 32px;
}

.tkm-ppdb-prodi-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tkm-ppdb-prodi-card:hover {
  border-color: #D4AF37;
  background: #FAFAFA;
}

.tkm-ppdb-prodi-card svg {
  flex: none;
  color: #996515;
}

/* Syarat pendaftaran (dark band) ------------------------------------------ */
.tkm-ppdb-syarat {
  background: #1A1A1A;
  padding: 88px 24px;
}

.tkm-ppdb-syarat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.tkm-ppdb-syarat-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #2E2E2E;
  font-size: 15px;
  line-height: 1.55;
  color: #E8E8E8;
}

.tkm-ppdb-syarat-list svg {
  flex: none;
  margin-top: 2px;
  color: #D4AF37;
}

/* Kontak panitia ---------------------------------------------------------- */
.tkm-ppdb-kontak {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-ppdb-kontak-lead {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5A5A5A;
}

.tkm-ppdb-kontak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 16px;
  margin-top: 32px;
}

.tkm-ppdb-kontak-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid #E0E0E0;
  border-left: 3px solid #D4AF37;
  background: #FFFFFF;
}

.tkm-ppdb-kontak-ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: #1A1A1A;
  color: #F5D77F;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tkm-ppdb-kontak-nama {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-ppdb-kontak-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #996515;
  text-decoration: none;
}

.tkm-ppdb-kontak-wa:hover {
  color: #1A1A1A;
}

.tkm-ppdb-kontak-wa svg {
  flex: none;
}

@media (max-width: 767px) {
  .tkm-ppdb-jalur,
  .tkm-ppdb-prodi,
  .tkm-ppdb-syarat,
  .tkm-ppdb-kontak {
    padding: 60px 20px;
  }
}

/* ==========================================================================
   Alumni & BKK (page-alumni.php)
   ========================================================================== */

.tkm-alu-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.tkm-alu-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #996515;
}

.tkm-alu-heading {
  margin: 12px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1A1A1A;
}

.tkm-alu-heading--dark {
  color: #FFFFFF;
}

/* BKK (light band) -------------------------------------------------------- */
.tkm-bkk {
  background: #FAFAFA;
  padding: 88px 24px;
}

.tkm-bkk-desc {
  margin: 20px 0 0;
  max-width: 680px;
  font-size: 16px;
  line-height: 1.7;
  color: #3F3F46;
}

.tkm-bkk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: 36px;
}

.tkm-bkk-card {
  padding: 28px 24px;
  border: 1px solid #E0E0E0;
  border-top: 3px solid #D4AF37;
  background: #FFFFFF;
}

.tkm-bkk-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  background: #1A1A1A;
  color: #F5D77F;
}

.tkm-bkk-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-bkk-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3F3F46;
}

.tkm-bkk-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 14px 30px;
  background: linear-gradient(90deg, #D4AF37, #F5D77F, #CCA43B);
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.tkm-bkk-cta:hover { filter: brightness(1.1); }

/* Alumni testimonials (dark band) ----------------------------------------- */
.tkm-alu-testi {
  background: #1A1A1A;
  padding: 88px 24px;
}

.tkm-alu-testi .tkm-alu-eyebrow {
  color: #F5D77F;
}

.tkm-alu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin-top: 36px;
}

.tkm-alu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 26px;
  background: #121212;
  border: 1px solid #2E2E2E;
}

.tkm-alu-card::before {
  content: "\201C";
  display: block;
  height: 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 0.7;
  color: #D4AF37;
}

.tkm-alu-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #E8E8E8;
}

.tkm-alu-cap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.tkm-alu-ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: #D4AF37;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tkm-alu-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tkm-alu-nama {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.tkm-alu-sub {
  font-size: 12.5px;
  color: #B8B8B8;
}

.tkm-alu-kerja {
  font-size: 12.5px;
  font-weight: 600;
  color: #F5D77F;
}

.tkm-alu-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 3px 10px;
  border: 1px solid #D4AF37;
  color: #F5D77F;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tkm-alu-note {
  margin: 28px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #B8B8B8;
}

.tkm-alu-kosong {
  margin-top: 24px;
  font-size: 15px;
  color: #C8C8C8;
}

@media (max-width: 767px) {
  .tkm-bkk,
  .tkm-alu-testi {
    padding: 60px 20px;
  }
}

/* ==========================================================================
   Berita listing (home.php)
   ========================================================================== */

.tkm-berita-body {
  background: #FAFAFA;
  padding: 80px 24px;
}

.tkm-berita-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.tkm-berita-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}

.tkm-berita-card {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
}

.tkm-berita-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.tkm-berita-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1A1A1A;
}

.tkm-berita-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tkm-berita-card:hover .tkm-berita-thumb img {
  transform: scale(1.04);
}

.tkm-berita-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #F5D77F;
}

.tkm-berita-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
  border-top: 3px solid #D4AF37;
}

.tkm-berita-date {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #996515;
}

.tkm-berita-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-berita-card:hover .tkm-berita-title {
  color: #996515;
}

.tkm-berita-excerpt {
  font-size: 13.5px;
  line-height: 1.6;
  color: #3F3F46;
}

.tkm-berita-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A1A1A;
}

.tkm-berita-kosong {
  font-size: 15px;
  color: #5A5A5A;
}

.tkm-berita-pagination {
  margin-top: 44px;
}

.tkm-berita-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tkm-berita-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  color: #1A1A1A;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tkm-berita-pagination .page-numbers.current {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #FFFFFF;
}

.tkm-berita-pagination a.page-numbers:hover {
  border-color: #D4AF37;
  background: #FAFAFA;
}

.tkm-berita-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .tkm-berita-body {
    padding: 56px 20px;
  }
}

/* ==========================================================================
   Single post (single.php)
   ========================================================================== */

.tkm-single-meta {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F5D77F;
}

.tkm-single-body {
  background: #FFFFFF;
  padding: 64px 24px;
}

.tkm-single-inner {
  max-width: 780px;
  margin: 0 auto;
}

.tkm-single-figure {
  margin: 0 0 32px;
}

.tkm-single-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.tkm-single-pagelinks {
  margin-top: 28px;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
}

.tkm-single-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.tkm-single-tags a {
  padding: 5px 12px;
  border: 1px solid #E0E0E0;
  background: #FAFAFA;
  color: #3F3F46;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.tkm-single-tags a:hover {
  border-color: #D4AF37;
  color: #1A1A1A;
}

.tkm-single-back {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #E0E0E0;
}

.tkm-single-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #996515;
  text-decoration: none;
}

.tkm-single-back a:hover {
  color: #1A1A1A;
}

.tkm-single-related {
  background: #FAFAFA;
  padding: 72px 24px;
  border-top: 1px solid #E0E0E0;
}

.tkm-single-related-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-single-related .tkm-page-rule {
  margin-bottom: 32px;
}

/* ==========================================================================
   404 (404.php)
   ========================================================================== */

.tkm-404-code {
  display: block;
  margin-bottom: 6px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #D4AF37;
}

.tkm-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 30px;
  background: linear-gradient(90deg, #D4AF37, #F5D77F, #CCA43B);
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.tkm-404-btn:hover {
  filter: brightness(1.1);
}

.tkm-404-links {
  background: #FAFAFA;
  padding: 72px 24px;
}

.tkm-404-links-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.tkm-404-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  margin-top: 32px;
}

.tkm-404-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tkm-404-link:hover {
  border-color: #D4AF37;
  background: #FAFAFA;
}

.tkm-404-link svg {
  flex: none;
  color: #996515;
}

@media (max-width: 767px) {
  .tkm-single-body,
  .tkm-single-related,
  .tkm-404-links {
    padding: 52px 20px;
  }
  .tkm-404-code {
    font-size: 52px;
  }
}

/* ==========================================================================
   Instagram embeds in imported berita (TKM Instagram Sync)
   ========================================================================== */

.instagram-media {
  max-width: 540px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 28px auto !important;
}

.tkm-ig-source {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #E0E0E0;
}

.tkm-ig-source a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #996515;
  text-decoration: none;
}

.tkm-ig-source a:hover {
  color: #1A1A1A;
}

/* ==========================================================================
   Instagram Reel poster card (Opsi B) in imported berita
   ========================================================================== */

.tkm-ig-reel {
  position: relative;
  display: block;
  max-width: 420px;
  margin: 28px auto;
  background: #1A1A1A;
  overflow: hidden;
  text-decoration: none;
}

.tkm-ig-reel-img {
  display: block;
  width: 100%;
  height: auto;
}

.tkm-ig-reel-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  color: #F5D77F;
}

.tkm-ig-reel-fallback svg {
  width: 56px;
  height: 56px;
}

.tkm-ig-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.65));
}

.tkm-ig-reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.tkm-ig-reel:hover .tkm-ig-reel-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #FFFFFF;
}

.tkm-ig-reel-play svg {
  width: 30px;
  height: 30px;
  margin-left: 3px;
  color: #1A1A1A;
}

.tkm-ig-reel-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   Header: Program Unggulan mega menu + nav breakpoints
   ========================================================================== */

/* With Program Unggulan in it the desktop nav needs the full 1280px container,
   so between 1024 and 1279px the hamburger menu takes over. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .tkm-desknav { display: none !important; }
  .tkm-mobtoggle { display: flex !important; }
  #tkm-mobile-menu:not(.hidden) { display: block !important; }
}

@media (min-width: 1280px) {
  header nav.tkm-desknav { column-gap: 16px; }
}

.tkm-desknav > a,
.tkm-desknav > div > a,
.tkm-desknav > div > button { white-space: nowrap; }

@media (max-width: 1535.98px) {
  .tkm-cta-year { display: none; }
}

/* A long menu must scroll inside the sticky header on short phones. */
#tkm-mobile-menu {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@supports (height: 100dvh) {
  #tkm-mobile-menu { max-height: calc(100dvh - 80px); }
}

.tkm-mega {
  left: 50%;
  width: 600px;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
}

.tkm-mega-wrap:focus-within .tkm-mega { display: block; }

.tkm-mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tkm-mega-col { padding: 20px 22px 18px; }

.tkm-mega-col + .tkm-mega-col { border-left: 1px solid rgba(212, 175, 55, 0.2); }

.tkm-mega-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  color: #F5D77F;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.tkm-mega-head:hover { text-decoration: underline; text-underline-offset: 4px; }

.tkm-mega-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(212, 175, 55, 0.25);
}

.tkm-mega-list a {
  display: block;
  padding: 8px 12px 8px 14px;
  color: #D1D5DB;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.tkm-mega-list a:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #FFFFFF;
}

.tkm-mega-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 22px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  color: #D4AF37;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.tkm-mega-all:hover { background: rgba(212, 175, 55, 0.1); }

/* Mobile menu: Program Unggulan block under the link grid */
.tkm-mnav-pu {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.tkm-mnav-pu-title {
  display: block;
  padding: 4px 0 10px;
  color: #F5D77F;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.tkm-mnav-pu-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 28px;
}

.tkm-mnav-pu-head {
  display: block;
  padding: 6px 0;
  color: #D4AF37;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.tkm-mnav-pu-item {
  display: block;
  padding: 8px 0 8px 12px;
  border-left: 1px solid rgba(212, 175, 55, 0.3);
  color: #D1D5DB;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.tkm-mnav-pu-item:hover { color: #FFFFFF; }

/* ==========================================================================
   Program Unggulan (page-program-unggulan.php, single-program_unggulan.php)
   ========================================================================== */

.tkm-pu-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.tkm-pu-band { padding: 88px 24px; }

.tkm-pu-band--light { background: #FAFAFA; }

.tkm-pu-band--white {
  background: #FFFFFF;
  border-top: 1px solid #E0E0E0;
}

.tkm-pu-eyebrow {
  display: block;
  color: #996515;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.tkm-pu-h2 {
  margin: 12px 0 0;
  color: #1A1A1A;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tkm-pu-h2 a {
  color: inherit;
  text-decoration: none;
}

.tkm-pu-h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }

.tkm-pu-h3 {
  margin: 10px 0 0;
  color: #1A1A1A;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Hero ------------------------------------------------------------------- */
.tkm-pu-hero-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.12);
  color: #F5D77F;
}

.tkm-pu-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 30px;
  background: linear-gradient(90deg, #D4AF37, #F5D77F, #CCA43B);
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.tkm-pu-hero-cta:hover { filter: brightness(1.1); }

.tkm-pu-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.tkm-pu-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #F5D77F;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background 0.18s ease;
}

.tkm-pu-jump a:hover { background: rgba(212, 175, 55, 0.16); }

/* Landing: one band per program group --------------------------------------- */
.tkm-pu-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: start;
}

.tkm-pu-group-num {
  color: #996515;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tkm-pu-group-text .tkm-pu-h2 { margin-top: 0; }

.tkm-pu-group-lead {
  max-width: 680px;
  margin: 18px 0 0;
  color: #5A5A5A;
  font-size: 15px;
  line-height: 1.7;
}

.tkm-pu-group-link {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #996515;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}

.tkm-pu-group-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Program cards ------------------------------------------------------------ */
.tkm-pu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin-top: 36px;
}

.tkm-pu-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 24px;
  border: 1px solid #E0E0E0;
  border-top: 3px solid #D4AF37;
  background: #FFFFFF;
  color: #1A1A1A;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tkm-pu-card:hover {
  border-color: #D4AF37;
  box-shadow: 0 18px 40px -24px rgba(12, 13, 17, 0.45);
  transform: translateY(-2px);
}

.tkm-pu-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: #1A1A1A;
  color: #F5D77F;
}

.tkm-pu-card-title {
  margin: 0;
  color: #1A1A1A;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tkm-pu-card-text {
  flex: 1;
  margin: 0;
  color: #5A5A5A;
  font-size: 14px;
  line-height: 1.65;
}

.tkm-pu-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: #996515;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Program page: content column + side column ------------------------------- */
.tkm-pu-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}

.tkm-pu-split.is-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

.tkm-pu-section + .tkm-pu-section { margin-top: 56px; }

.tkm-pu-prose.tkm-prose {
  max-width: none;
  margin: 18px 0 0;
}

.tkm-pu-keu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-top: 24px;
}

.tkm-pu-keu-item {
  padding: 22px 22px 20px;
  border: 1px solid #E0E0E0;
  border-left: 3px solid #D4AF37;
  background: #FFFFFF;
}

.tkm-pu-keu-item h3 {
  margin: 0;
  color: #1A1A1A;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.tkm-pu-keu-item p {
  margin: 8px 0 0;
  color: #3F3F46;
  font-size: 14px;
  line-height: 1.6;
}

.tkm-pu-steps {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tkm-pu-step;
}

.tkm-pu-steps li {
  position: relative;
  padding: 0 0 26px 58px;
  counter-increment: tkm-pu-step;
}

.tkm-pu-steps li::before {
  content: counter(tkm-pu-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #1A1A1A;
  color: #F5D77F;
  font-size: 13px;
  font-weight: 800;
}

.tkm-pu-steps li::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 4px;
  left: 19px;
  width: 2px;
  background: #E0E0E0;
}

.tkm-pu-steps li:last-child { padding-bottom: 0; }
.tkm-pu-steps li:last-child::after { display: none; }

.tkm-pu-steps h3 {
  margin: 0;
  padding-top: 9px;
  color: #1A1A1A;
  font-size: 16px;
  font-weight: 800;
}

.tkm-pu-steps p {
  margin: 6px 0 0;
  color: #3F3F46;
  font-size: 14px;
  line-height: 1.6;
}

.tkm-pu-check {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.tkm-pu-check li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #E0E0E0;
  color: #3F3F46;
  font-size: 15px;
  line-height: 1.55;
}

.tkm-pu-check li:first-child { border-top: 0; }

.tkm-pu-check svg {
  margin-top: 3px;
  color: #996515;
}

.tkm-pu-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid #E0E0E0;
  border-left: 3px solid #996515;
  background: #FFFFFF;
}

.tkm-pu-note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #FFF2B2;
  color: #996515;
}

.tkm-pu-note-title {
  margin: 0;
  color: #1A1A1A;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.tkm-pu-note p {
  margin: 6px 0 0;
  color: #3F3F46;
  font-size: 14px;
  line-height: 1.65;
}

.tkm-pu-note-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #996515;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.tkm-pu-note-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.tkm-pu-wins {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.tkm-pu-wins li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
}

.tkm-pu-wins-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #FFF2B2;
  color: #996515;
}

.tkm-pu-wins-text strong {
  display: block;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.tkm-pu-wins-text span {
  display: block;
  margin-top: 4px;
  color: #5A5A5A;
  font-size: 13px;
  line-height: 1.5;
}

.tkm-pu-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 8px;
  margin-top: 20px;
}

.tkm-pu-gallery a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #E8E8E8;
}

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

.tkm-pu-gallery a:hover img { transform: scale(1.04); }

.tkm-pu-faq {
  margin-top: 20px;
  border-top: 1px solid #E0E0E0;
}

.tkm-pu-faq details { border-bottom: 1px solid #E0E0E0; }

.tkm-pu-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.tkm-pu-faq summary::-webkit-details-marker { display: none; }

.tkm-pu-faq summary::after {
  content: "+";
  flex: none;
  color: #996515;
  font-size: 20px;
  line-height: 1;
}

.tkm-pu-faq details[open] summary::after { content: "\2212"; }

.tkm-pu-faq details p {
  margin: 0 0 18px;
  color: #3F3F46;
  font-size: 14px;
  line-height: 1.7;
}

/* Side column -------------------------------------------------------------- */
.tkm-pu-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tkm-pu-box {
  padding: 24px;
  border: 1px solid #E0E0E0;
  background: #FFFFFF;
}

.tkm-pu-box-title {
  margin: 0 0 14px;
  color: #996515;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.tkm-pu-facts { margin: 0; }

.tkm-pu-facts div {
  padding: 12px 0;
  border-top: 1px solid #E0E0E0;
}

.tkm-pu-facts div:first-child {
  padding-top: 0;
  border-top: 0;
}

.tkm-pu-facts dt {
  color: #5A5A5A;
  font-size: 12px;
  font-weight: 700;
}

.tkm-pu-facts dd {
  margin: 3px 0 0;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.tkm-pu-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tkm-pu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #E0E0E0;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.tkm-pu-nav li:first-child a {
  padding-top: 0;
  border-top: 0;
}

.tkm-pu-nav a:hover span { text-decoration: underline; text-underline-offset: 4px; }

.tkm-pu-nav svg { color: #996515; }

.tkm-pu-nav a.is-current { box-shadow: inset 3px 0 0 #D4AF37; padding-left: 12px; }

.tkm-pu-ctabox {
  padding: 26px 24px;
  background: #1A1A1A;
}

.tkm-pu-ctabox-title {
  margin: 0;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tkm-pu-ctabox-text {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.6;
}

.tkm-pu-ctabox-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 18px;
  background: linear-gradient(90deg, #D4AF37, #F5D77F, #CCA43B);
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.tkm-pu-ctabox-btn:hover { filter: brightness(1.1); }

.tkm-pu-news { margin-top: 32px; }

@media (max-width: 1023px) {
  .tkm-pu-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .tkm-pu-band { padding: 60px 20px; }
  .tkm-pu-group-head { grid-template-columns: minmax(0, 1fr); }
  .tkm-pu-group-num { font-size: 32px; }
  .tkm-pu-group-link { justify-self: start; }
  .tkm-pu-section + .tkm-pu-section { margin-top: 44px; }
  .tkm-pu-card { padding: 24px 22px 22px; }
  .tkm-pu-note { flex-direction: column; }
}