/* ============================================================
   SIP Daarul Jannah — Shared Design System
   Themed via [data-theme] on body
   ============================================================ */

:root {
  --dj-bg: #ffffff;
  --dj-bg-warm: #f4f3ef;
  --dj-surface: #ffffff;
  --dj-ink: #16192a;
  --dj-ink-soft: #5b5e6c;
  --dj-rule: rgba(22, 25, 42, 0.08);
  --dj-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 20px 50px -30px rgba(0,0,0,0.08);
  --dj-r-lg: 24px;
  --dj-r-md: 20px;
  --dj-r-sm: 14px;
  --dj-r-pill: 999px;

  /* Shared gold accent (in all logos).
     Pakai varian sesuai peran — kontras minimum WCAG AA:
       --dj-accent        isian dekoratif (badge, titik, tombol) & teks di atas navy
       --dj-accent-soft   teks di atas latar gelap (deep) — ≥3:1 di semua tema
       --dj-accent-strong teks display besar di atas latar terang — ≥3:1
       --dj-accent-ink    teks kecil/uppercase di atas latar terang — ≥4.5:1 */
  --dj-accent: #b8924a;
  --dj-accent-soft: #d9b974;
  --dj-accent-strong: #a8813c;
  --dj-accent-ink: #8a6a2f;

  /* Status "penuh/habis" */
  --dj-danger: #b04545;
  --dj-danger-soft: #c75555;

  /* --- Skala teks ---
     Batas bawah teks isi adalah 15px; 16px untuk paragraf/deskripsi. Jangan
     menulis font-size mentah di template — pakai token ini, supaya tidak ada
     lagi teks 11–14px yang sulit dibaca orang tua di layar ponsel. */
  --dj-fs-lead: 19px;    /* paragraf pembuka */
  --dj-fs-body: 16px;    /* deskripsi kartu, jawaban FAQ, isi paragraf */
  --dj-fs-sm: 15px;      /* teks pendukung/detail yang rapat */
  --dj-fs-meta: 13.5px;  /* keterangan angka, sub-brand */
  --dj-fs-label: 13px;   /* label uppercase (pill, tag) — selalu bold */
}

/* Yayasan theme — Beranda, Tentang */
[data-theme="yayasan"] {
  --dj-primary: #2d7a3e;
  --dj-primary-deep: #1f5a2c;
  --dj-primary-soft: #e6f0e8;
  --dj-tint: #5fb3e6;
}

/* TKIP — Purple */
[data-theme="tkip"] {
  --dj-primary: #7a3fa8;
  --dj-primary-deep: #582a7d;
  --dj-primary-soft: #f1e6f8;
  --dj-tint: #c8a4e0;
}

/* SDIP — Green */
[data-theme="sdip"] {
  --dj-primary: #2d8a3e;
  --dj-primary-deep: #1f6630;
  --dj-primary-soft: #e6f3e9;
  --dj-tint: #88c995;
}

/* SMPIP — Navy */
[data-theme="smpip"] {
  --dj-primary: #1c2e6b;
  --dj-primary-deep: #13204e;
  --dj-primary-soft: #e8ebf3;
  --dj-tint: #6577b5;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--dj-bg);
  color: var(--dj-ink);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; padding: 0; }
button { font-family: inherit; }
svg { display: block; }

.dj-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }

.dj-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.dj-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dj-rule);
}
.dj-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: 1320px; margin: 0 auto;
  padding: 14px 32px;
}
.dj-header-brand {
  display: flex; align-items: center; gap: 12px;
}
.dj-header-brand img { width: 44px; height: 44px; }
.dj-header-brand-text {
  display: flex; flex-direction: column; line-height: 1;
}
.dj-header-brand-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 19px; color: var(--dj-primary);
}
.dj-header-brand-sub {
  font-size: var(--dj-fs-label); color: var(--dj-ink-soft);
  margin-top: 5px; letter-spacing: 0.02em;
}

.dj-nav {
  display: flex; align-items: center; gap: 4px;
}
.dj-nav-link {
  position: relative;
  padding: 10px 16px; border-radius: var(--dj-r-pill);
  font-size: 14px; font-weight: 500; color: var(--dj-ink);
  transition: background .15s ease, color .15s ease;
  cursor: pointer; background: transparent; border: 0;
}
.dj-nav-link:hover { background: var(--dj-bg-warm); }
.dj-nav-link.active {
  background: var(--dj-primary); color: white;
}
.dj-nav-link.has-sub::after {
  content: '▾';
  margin-left: 6px; font-size: 10px; opacity: 0.6;
}
.dj-nav-group { position: relative; }
.dj-nav-submenu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--dj-surface);
  border: 1px solid var(--dj-rule);
  border-radius: var(--dj-r-md);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15);
  padding: 8px;
  min-width: 280px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.dj-nav-group:hover .dj-nav-submenu,
.dj-nav-group.open .dj-nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dj-nav-sub-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--dj-r-sm);
  transition: background .15s;
  cursor: pointer;
}
.dj-nav-sub-item:hover { background: var(--dj-bg-warm); }
.dj-nav-sub-item img { width: 36px; height: 36px; }
.dj-nav-sub-title {
  font-size: var(--dj-fs-sm); font-weight: 600; color: var(--dj-ink); line-height: 1.2;
}
.dj-nav-sub-desc {
  font-size: var(--dj-fs-label); color: var(--dj-ink-soft); margin-top: 4px;
}

.dj-header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--dj-r-pill);
  background: var(--dj-primary); color: white;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dj-header-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
.dj-header-cta.is-closed {
  background: rgba(22,25,42,0.06);
  color: var(--dj-ink-soft);
  cursor: default;
  box-shadow: none;
}
.dj-header-cta.is-closed:hover { transform: none; box-shadow: none; }

/* Pemilih bahasa ID / EN (pil dua-opsi, senada tombol nav). */
.dj-lang {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--dj-bg-warm);
  border-radius: var(--dj-r-pill);
  padding: 3px;
}
.dj-lang-opt {
  padding: 6px 12px; border-radius: var(--dj-r-pill);
  font-size: var(--dj-fs-label); font-weight: 700; letter-spacing: 0.03em;
  color: var(--dj-ink-soft); line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.dj-lang-opt:hover { color: var(--dj-ink); }
.dj-lang-opt.active { background: var(--dj-primary); color: #fff; }

.dj-nav-mobile-btn {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--dj-r-pill);
  background: var(--dj-bg-warm); border: 0;
  align-items: center; justify-content: center;
  cursor: pointer;
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.dj-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px;
}

.dj-section { padding: 0 0 32px; }

/* Cards */
.dj-card {
  background: var(--dj-surface);
  border-radius: var(--dj-r-lg);
  border: 1px solid var(--dj-rule);
  box-shadow: var(--dj-shadow);
  padding: 56px;
}
.dj-card-dark {
  background: var(--dj-primary);
  color: var(--dj-bg);
  border-radius: var(--dj-r-lg);
  padding: 72px 56px;
}

/* Buttons */
.dj-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: var(--dj-r-pill);
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dj-btn-primary { background: var(--dj-primary); color: var(--dj-bg); }
.dj-btn-secondary { background: var(--dj-bg-warm); color: var(--dj-primary); }
.dj-btn-accent { background: var(--dj-accent); color: var(--dj-primary-deep); font-weight: 700; }
.dj-btn-ghost { background: rgba(255,255,255,.10); color: var(--dj-bg); border: 1px solid rgba(255,255,255,.18); }
.dj-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }

/* Section pill */
.dj-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: var(--dj-r-pill);
  background: var(--dj-bg-warm); color: var(--dj-primary);
  font-size: var(--dj-fs-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.dj-pill.dark { background: rgba(255,255,255,.10); color: var(--dj-accent-soft); }
.dj-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dj-accent);
}

/* Placeholder tiles */
.dj-ph {
  border-radius: var(--dj-r-md);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  min-height: 160px;
}
.dj-ph > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  z-index: 0;
}
.dj-ph-lbl {
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: var(--dj-fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255,255,255,.65); padding: 6px 12px; border-radius: 6px;
  position: relative; z-index: 1;
}
/* Hide the label when a real image is loaded (placeholder.svg shows label) */
.dj-ph > img:not([src*="placeholder"]) ~ .dj-ph-lbl { display: none; }
/* Caption/label pada tile foto (slot `foto()`, ditandai data-lightbox) tidak
   ditampilkan di halaman publik — baik saat placeholder maupun setelah foto
   diunggah. Kartu berita tetap memakai .dj-ph-lbl sebagai judul fallback. */
.dj-ph[data-lightbox] .dj-ph-lbl { display: none; }
/* Ditandai app.js saat tile masih placeholder: tidak ada yang bisa dibuka, jadi
   jangan tawarkan afordansi klik. */
.dj-ph.dj-ph-static { cursor: default; }
.dj-ph.dj-ph-static:hover { transform: none; }
.dj-ph.warm { background: repeating-linear-gradient(135deg, #e8dec8 0 14px, rgba(60,40,20,.06) 14px 15px); color: #5b4a2a; }
.dj-ph.cool { background: repeating-linear-gradient(135deg, #dde2eb 0 14px, rgba(30,40,80,.07) 14px 15px); color: #3a4360; }
.dj-ph.sage { background: repeating-linear-gradient(135deg, #d8dfd4 0 14px, rgba(30,60,40,.07) 14px 15px); color: #3b4a3b; }
.dj-ph.lilac { background: repeating-linear-gradient(135deg, #e6dbef 0 14px, rgba(80,40,120,.07) 14px 15px); color: #5b3b6a; }
.dj-ph.rose { background: repeating-linear-gradient(135deg, #efd9dc 0 14px, rgba(120,40,60,.07) 14px 15px); color: #6a3b48; }

/* Hero */
.dj-hero {
  padding: 64px; border-radius: 32px;
  border: 1px solid var(--dj-rule); background: var(--dj-surface);
  box-shadow: var(--dj-shadow); position: relative; overflow: hidden;
}
.dj-hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; flex-wrap: wrap; gap: 16px; }
.dj-brand { display: flex; align-items: center; gap: 14px; }
.dj-brand img { width: 64px; height: 64px; }
.dj-brand-name { font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; color: var(--dj-primary); line-height: 1; }
.dj-brand-sub { font-size: var(--dj-fs-sm); color: var(--dj-ink-soft); margin-top: 5px; }

.dj-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.dj-h1 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 76px; line-height: 1; letter-spacing: -0.02em; color: var(--dj-primary); }
.dj-h1 em { font-style: italic; color: var(--dj-accent-strong); }
.dj-lead { font-size: var(--dj-fs-lead); line-height: 1.7; color: var(--dj-ink-soft); margin-top: 28px; max-width: 520px; }
.dj-cta-row { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

.dj-hero-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 160px); gap: 12px; }
.dj-hero-collage > :nth-child(1) { grid-column: span 2; }
.dj-hero-collage > :nth-child(4) { grid-column: span 2; }
/* Dot pager kolase hanya tampil di mode carousel (ponsel, ≤640px) */
.dj-collage-dots { display: none; }

.dj-facts {
  margin-top: 56px; padding: 24px 32px; border-radius: var(--dj-r-sm);
  background: var(--dj-bg-warm);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.dj-fact-num { font-family: 'Instrument Serif', Georgia, serif; font-size: 30px; color: var(--dj-primary); line-height: 1; }
.dj-fact-lbl { font-size: var(--dj-fs-meta); color: var(--dj-ink-soft); margin-top: 8px; letter-spacing: 0.02em; }

/* Section heading */
.dj-h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 48px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--dj-primary); margin-top: 20px;
}
.dj-h2.on-dark { color: var(--dj-bg); }
.dj-h2 em { font-style: italic; color: var(--dj-accent-strong); }
.dj-h2.on-dark em { color: var(--dj-accent-soft); }

/* Linimasa sejarah (tentang) — tahun di kiri, isi di kanan; kolaps di mobile */
.dj-tl { margin-top: 48px; display: grid; grid-template-columns: 160px 1fr; gap: 32px; position: relative; }
.dj-tl-year { text-align: right; padding-top: 8px; }
.dj-tl-num { font-family: 'Instrument Serif', Georgia, serif; font-size: 48px; color: var(--dj-primary); line-height: 1; }
.dj-tl-body { border-left: 2px solid var(--dj-rule); padding: 0 0 32px 32px; position: relative; }

/* Visi & Misi */
.dj-visi-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.dj-visi-quote {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 22px; line-height: 1.4; color: var(--dj-accent-soft); margin-top: 24px;
}
.dj-misi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dj-misi-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--dj-r-sm); padding: 24px;
}
.dj-misi-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dj-accent); color: var(--dj-primary-deep);
  font-family: 'Instrument Serif', Georgia, serif; font-size: 16px; margin-bottom: 12px;
}
.dj-misi-text { font-size: 15px; line-height: 1.55; color: var(--dj-bg); }

/* Visi — panel gelap besar di halaman unit (TKIP/SDIP/SMPIP).
   Dulu di-copy-paste sebagai <style> di tiap template dan mulai berbeda-beda;
   sekarang satu komponen. Kata bertanda <em> memakai --dj-accent-soft agar
   tetap ≥3:1 di atas --dj-primary-deep untuk semua tema (accent biasa gagal di SDIP). */
.dj-visi-verse {
  background: var(--dj-primary-deep);
  color: var(--dj-bg);
  border-radius: var(--dj-r-lg);
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
}
.dj-visi-verse::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(184, 146, 74, 0.18), transparent 52%),
    radial-gradient(circle at 78% 72%, rgba(184, 146, 74, 0.10), transparent 55%);
  pointer-events: none;
}
.dj-visi-verse-pill {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: var(--dj-r-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--dj-accent-soft);
  font-size: var(--dj-fs-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.dj-visi-verse-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dj-accent);
}
.dj-visi-verse-body {
  position: relative; z-index: 1;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 52px; line-height: 1.3; letter-spacing: -0.005em;
  margin-top: 32px;
  max-width: 980px;
  text-wrap: balance;
}
.dj-visi-verse-body .line { display: block; }
.dj-visi-verse-body em { font-style: italic; color: var(--dj-accent-soft); }
.dj-visi-verse-body .dot { color: var(--dj-accent-soft); margin: 0 8px; font-style: normal; }
.dj-visi-verse-foot {
  position: relative; z-index: 1;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 520px;
  font-size: var(--dj-fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Programs */
.dj-prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.dj-prog-card { background: var(--dj-bg-warm); border-radius: var(--dj-r-md); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.dj-prog-num {
  width: 48px; height: 48px; border-radius: var(--dj-r-sm);
  background: var(--dj-accent); color: var(--dj-primary-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 20px;
}
/* Ikon kartu — pengganti badge angka + label kecil uppercase.
   Konteks kartu dibawa oleh ikonnya (lihat icons.py); teks tag tetap ada sebagai
   <title> SVG untuk screen reader & tooltip. */
.dj-prog-icon {
  flex: none;
  width: 52px; height: 52px; border-radius: var(--dj-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dj-primary-soft);
  color: var(--dj-primary);
  border: 1px solid var(--dj-rule);
}
.dj-prog-icon svg { width: 26px; height: 26px; }
/* Kartu tanpa ikon (mis. timeline bernomor) tetap memakai badge angka lama. */
.dj-prog-tag { font-size: var(--dj-fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dj-accent-ink); font-weight: 700; }
.dj-prog-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 25px; line-height: 1.2; color: var(--dj-primary); margin: 0 0 12px; }
.dj-prog-desc { font-size: var(--dj-fs-body); line-height: 1.65; color: var(--dj-ink-soft); }

/* ============================================================
   BAGIAN BERNOMOR "v2" — misi / program unggulan / karakter.
   Baris horizontal bernomor menggantikan grid kartu: angka
   serif besar memudar di belakang, label kecil + judul serif
   di kiri, isi (bullet / tag / prosa) di kanan. Dipakai di
   halaman unit (tkip/sdip/smpip). Aksen mengikuti tema unit
   (--dj-primary); titik/garis emas memakai --dj-accent. Header
   tetap memakai .dj-pill / .dj-h2 / .dj-lead yang sudah ada.
   ============================================================ */
/* Kartu pembungkus dengan dekorasi cincin di pojok kanan atas.
   z-index:0 membuat stacking context sendiri sehingga cincin
   (z-index:-1) berada di atas latar kartu tapi di bawah isi. */
.dj-cardx { position: relative; z-index: 0; overflow: hidden; }
.dj-rings {
  position: absolute; top: 44px; right: 40px;
  width: 240px; height: 240px; pointer-events: none; z-index: -1;
}
.dj-rings::before, .dj-rings::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid var(--dj-primary);
}
.dj-rings::before { inset: 0; opacity: 0.16; }
.dj-rings::after { inset: 42px; opacity: 0.12; }

.dj-misix { margin-top: 8px; }
.dj-misix-row {
  display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 56px;
  padding: 48px 0; border-top: 1px solid var(--dj-rule);
}
.dj-misix-head { position: relative; }
.dj-misix-num {
  position: absolute; top: -30px; left: -6px;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 140px; line-height: 1;
  color: var(--dj-primary); opacity: 0.09; z-index: 0; pointer-events: none;
}
.dj-misix-head-in { position: relative; z-index: 1; padding-top: 18px; }
.dj-misix-tag {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-size: var(--dj-fs-label); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dj-accent-ink);
}
.dj-misix-tag::before { content: ''; flex: none; width: 26px; height: 2px; background: var(--dj-accent); }
.dj-misix-title {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 30px; line-height: 1.14; color: var(--dj-primary); margin: 0;
}
/* Isi bullet (kalimat) — auto-fit multi kolom */
.dj-misix-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 18px 40px; align-content: start;
}
.dj-misix-list li {
  position: relative; padding-left: 22px;
  font-size: var(--dj-fs-body); line-height: 1.65; color: var(--dj-ink-soft);
}
.dj-misix-list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--dj-accent);
}
.dj-misix-list em, .dj-misix-desc em { font-style: italic; color: var(--dj-primary); }
/* Isi prosa (deskripsi tunggal) */
.dj-misix-desc {
  font-size: var(--dj-fs-lead); line-height: 1.7; color: var(--dj-ink-soft);
  max-width: 640px; margin: 0; align-self: center;
}
/* Isi tag (nama mapel/kegiatan) — pakai .dj-taglist yang sudah ada, tanpa margin atas */
.dj-misix-row .dj-taglist { margin-top: 0; align-self: start; }

@media (max-width: 900px) {
  .dj-misix-row { grid-template-columns: 1fr; gap: 22px; padding: 36px 0; }
  .dj-misix-num { font-size: 100px; top: -20px; }
  .dj-rings { display: none; }
}

/* Kurikulum */
.dj-kur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; position: relative; }
.dj-kur-line {
  position: absolute; top: 8px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--dj-accent) 0 6px, transparent 6px 12px);
}
.dj-kur-card { background: var(--dj-bg-warm); border-radius: var(--dj-r-md); padding: 28px; position: relative; text-align: center; }
.dj-kur-badge {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--dj-primary); color: var(--dj-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 18px;
  border: 3px solid var(--dj-surface);
}
.dj-kur-sem { font-size: var(--dj-fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dj-accent-ink); font-weight: 700; margin-top: 16px; }
.dj-kur-focus { font-family: 'Instrument Serif', Georgia, serif; font-size: 25px; line-height: 1.2; color: var(--dj-primary); margin: 8px 0 12px; }
.dj-kur-detail { font-size: var(--dj-fs-sm); line-height: 1.65; color: var(--dj-ink-soft); }

/* Varian jumlah kolom — dipakai di tempat template dulu menulis grid-template-columns inline */
.dj-kur-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dj-kur-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Kurikulum yang membungkus ke >1 baris (mis. 6 kelas SDIP): beri ruang untuk badge
   baris kedua, dan matikan garis penghubung yang hanya benar untuk satu baris.
   Row-gap ekstra hanya saat benar-benar membungkus — di bawah 980px grid ini jadi
   satu kolom dan tidak perlu tambahan tinggi. */
@media (min-width: 981px) {
  .dj-kur-grid-wrap { row-gap: 56px; }
}
.dj-kur-grid-wrap .dj-kur-line { display: none; }

/* Fasilitas */
.dj-fas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.dj-fas-grid .dj-ph { aspect-ratio: 4/5; min-height: 0; cursor: pointer; transition: transform .2s; }
.dj-fas-grid .dj-ph:hover { transform: scale(1.02); }
.dj-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dj-chip {
  font-size: var(--dj-fs-sm); padding: 12px 18px; border-radius: var(--dj-r-pill);
  background: var(--dj-bg-warm); color: var(--dj-primary); font-weight: 500;
}

/* Daftar-sebagai-tag — dipakai untuk butir yang berupa NAMA (mata pelajaran,
   kebiasaan, kegiatan), bukan kalimat. Jauh lebih mudah dipindai daripada
   bullet rapat, dan tiap butir jadi objek visual tersendiri.
   Butir yang berupa kalimat utuh tetap memakai .dj-progx-list (prosa). */
.dj-taglist {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.dj-taglist li {
  display: inline-flex; align-items: flex-start; gap: 10px;
  background: var(--dj-surface);
  border: 1px solid var(--dj-rule);
  border-radius: var(--dj-r-md);
  padding: 12px 18px;
  font-size: var(--dj-fs-sm); line-height: 1.45;
  color: var(--dj-ink);
}
/* Titik disejajarkan ke baris PERTAMA — butir yang membungkus ke dua baris
   tidak boleh membuat titiknya melayang di tengah. */
.dj-taglist li::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: 0.5em;
  background: var(--dj-accent);
}
.dj-taglist em { font-style: italic; color: var(--dj-primary); }

/* Prestasi */
.dj-prestasi-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
.dj-prestasi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dj-stat { background: var(--dj-surface); border-radius: var(--dj-r-md); padding: 28px; }
.dj-stat-num { font-family: 'Instrument Serif', Georgia, serif; font-size: 64px; color: var(--dj-primary); line-height: 0.9; letter-spacing: -0.03em; }
.dj-stat-lbl { font-size: var(--dj-fs-sm); color: var(--dj-ink-soft); margin-top: 10px; line-height: 1.5; }

/* Galeri */
.dj-gal-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 180px 180px; gap: 12px; margin-top: 32px;
}
.dj-gal-grid .dj-ph { min-height: 0; height: 100%; cursor: pointer; transition: transform .2s; }
.dj-gal-grid .dj-ph:hover { transform: scale(1.02); }
.dj-gal-grid > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.dj-gal-grid > :nth-child(2) { grid-column: span 2; }
.dj-gal-grid > :nth-child(3) { grid-column: span 2; }
.dj-gal-grid > :nth-child(4) { grid-column: span 1; }
.dj-gal-grid > :nth-child(5) { grid-column: span 1; }
.dj-gal-grid > :nth-child(6) { grid-column: span 2; }

/* Berita */
.dj-berita-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.dj-berita-card { background: var(--dj-bg-warm); border-radius: var(--dj-r-md); padding: 16px; cursor: pointer; transition: transform .2s; }
.dj-berita-card:hover { transform: translateY(-3px); }
.dj-berita-card .dj-ph { aspect-ratio: 16/10; border-radius: var(--dj-r-sm); min-height: 0; margin-bottom: 18px; }
.dj-berita-meta { display: inline-flex; gap: 8px; align-items: center; font-size: var(--dj-fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dj-accent-ink); font-weight: 700; margin-bottom: 8px; padding: 0 8px; }
.dj-berita-meta .sep { width: 3px; height: 3px; background: var(--dj-ink-soft); border-radius: 50%; }
.dj-berita-meta .dt { color: var(--dj-ink-soft); font-weight: 500; }
.dj-berita-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; line-height: 1.2; color: var(--dj-primary); padding: 0 8px 12px; }

/* News filter tabs */
.dj-news-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--dj-bg-warm); border-radius: var(--dj-r-pill);
  margin-top: 16px;
}
.dj-news-tab {
  padding: 8px 16px; border-radius: var(--dj-r-pill);
  border: 0; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--dj-ink-soft);
  transition: all .15s;
}
.dj-news-tab.active { background: var(--dj-primary); color: white; }

/* FAQ Accordion */
.dj-faq-list { margin-top: 32px; display: flex; flex-direction: column; gap: 8px; }
.dj-faq-item {
  background: var(--dj-bg-warm);
  border-radius: var(--dj-r-md);
  overflow: hidden;
}
.dj-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 18px 28px;
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 20px; color: var(--dj-primary);
  line-height: 1.3;
}
.dj-faq-q::after {
  content: '+'; font-size: 24px; font-family: 'Manrope';
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dj-primary); color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .2s;
}
.dj-faq-item.open .dj-faq-q::after { transform: rotate(45deg); }
.dj-faq-a {
  max-height: 0; overflow: hidden;
  /* Padding tidak ditransisikan: app.js mengukur scrollHeight tepat setelah kelas
     .open ditambahkan, jadi padding harus final saat itu juga — kalau ikut animasi,
     tinggi terukur tanpa padding dan bagian bawah jawaban terpotong saat dibuka ulang. */
  transition: max-height .3s ease;
  font-size: var(--dj-fs-body); line-height: 1.7; color: var(--dj-ink-soft);
  padding: 0 28px;
}
/* Tinggi saat terbuka diukur oleh app.js (max-height inline = scrollHeight), supaya
   jawaban panjang dari admin panel tidak terpotong diam-diam. Nilai di bawah hanya
   cadangan bila JS belum/tidak jalan — jangan dipakai sebagai batas sebenarnya. */
.dj-faq-item.open .dj-faq-a { max-height: 1500px; padding: 4px 28px 28px; }

/* CTA */
.dj-cta {
  background: var(--dj-primary); color: var(--dj-bg); border-radius: 32px;
  padding: 80px 64px; position: relative; overflow: hidden;
}
.dj-cta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.10); padding: 9px 16px; border-radius: var(--dj-r-pill);
  font-size: var(--dj-fs-meta); font-weight: 600; letter-spacing: 0.03em; color: var(--dj-accent-soft); margin-bottom: 24px;
}
.dj-cta-badge::before { content: ''; width: 6px; height: 6px; background: var(--dj-accent); border-radius: 50%; }
.dj-cta h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 72px; line-height: 1; letter-spacing: -0.02em; color: var(--dj-bg);
}
.dj-cta h2 em { font-style: italic; color: var(--dj-accent-soft); }
.dj-cta p { font-size: 18px; line-height: 1.55; color: rgba(245,240,230,.75); margin: 28px 0 36px; max-width: 540px; }
.dj-star { position: absolute; pointer-events: none; }
.dj-star.tr { top: 40px; right: 56px; opacity: 0.4; }
.dj-star.bl { bottom: 40px; left: 56px; opacity: 0.2; }

/* Status badge */
.dj-status {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dj-bg-warm); padding: 9px 16px; border-radius: var(--dj-r-pill);
  font-size: var(--dj-fs-meta); font-weight: 600; color: var(--dj-primary);
}
.dj-status::before { content: ''; width: 8px; height: 8px; background: var(--dj-accent); border-radius: 50%; }
.dj-status.full { color: var(--dj-danger); }
.dj-status.full::before { background: var(--dj-danger-soft); }
.dj-status.open { color: #2d8a3e; }
.dj-status.open::before { background: #2d8a3e; }
.dj-status.closed { color: #6b6e7c; background: rgba(22,25,42,0.05); }
.dj-status.closed::before { background: #9a9ca6; }

/* Kuota inklusi — baris ringkas di dalam kartu unit (beranda & SPMB).
   Warna aksen di-set per unit lewat --ink-accent (default: warna primer tema). */
.dj-inklusi-line { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--dj-rule); }
.dj-inklusi-line-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dj-inklusi-line-lbl {
  font-size: var(--dj-fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-accent, var(--dj-primary));
}
.dj-inklusi-line-val { font-size: var(--dj-fs-meta); color: var(--dj-ink-soft); font-weight: 600; }
.dj-inklusi-line-bar { height: 5px; background: var(--dj-bg-warm); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.dj-inklusi-line-bar > div { height: 100%; background: var(--ink-accent, var(--dj-primary)); }

/* Kartu kuota inklusi per unit — halaman Pendidikan Inklusif. Setiap kartu
   memakai warna unitnya (bg/aksen di-set inline dari template). Layout mengisi
   lebar penuh (flex) agar tak menyisakan kolom kosong saat unit < 3. */
.dj-inklusi-units { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.dj-inklusi-unit {
  flex: 1 1 300px; border-radius: 20px; padding: 22px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.dj-inklusi-unit-head { display: flex; align-items: center; gap: 12px; flex: 1 1 160px; min-width: 150px; }
.dj-inklusi-unit-head img { width: 48px; height: 48px; flex-shrink: 0; }
.dj-inklusi-unit-head h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; line-height: 1.1; margin: 3px 0 0; }
.dj-inklusi-unit-metric { flex: 1 1 210px; min-width: 190px; }
.dj-inklusi-unit-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dj-inklusi-unit-lbl { font-size: var(--dj-fs-label); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.dj-inklusi-unit-num { font-family: 'Instrument Serif', Georgia, serif; font-size: 44px; line-height: 1; margin-top: 6px; }
.dj-inklusi-unit-num span { font-size: 22px; color: var(--dj-ink-soft); }
.dj-inklusi-unit-meta { font-size: var(--dj-fs-meta); color: var(--dj-ink-soft); margin-top: 6px; }
.dj-inklusi-unit-bar { height: 6px; background: rgba(22, 25, 42, 0.10); border-radius: 3px; margin-top: 12px; overflow: hidden; }
.dj-inklusi-unit-bar > div { height: 100%; }

/* ============================================================
   Penerimaan DITUTUP — toggle global (lihat data.py: SPMB_DIBUKA)
   ------------------------------------------------------------
   Saat Penerimaan ditutup, root <html> mendapat kelas .spmb-closed:
   - elemen info Penerimaan ([data-spmb-info]) disembunyikan lalu dihapus
     dari DOM oleh app.js (benar-benar tidak dirender),
   - elemen pengganti ([data-spmb-closed]) yang semula hidden ditampilkan.
   ============================================================ */
html:not(.spmb-closed) [data-spmb-closed] { display: none !important; }
html.spmb-closed [data-spmb-info] { display: none !important; }

/* Kartu pengumuman penutupan (elemen pengganti) */
.spmb-tutup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background: var(--dj-bg-warm);
  border: 1px solid var(--dj-rule);
  border-radius: var(--dj-r-lg);
  padding: 56px;
}
.spmb-tutup h2 { margin: 0; max-width: 640px; }
.spmb-tutup p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--dj-ink-soft);
  max-width: 600px;
  margin: 0;
  text-wrap: pretty;
}
.spmb-tutup .spmb-tutup-contact {
  font-size: 14px;
  line-height: 1.7;
  color: var(--dj-ink);
  background: var(--dj-surface);
  border: 1px solid var(--dj-rule);
  border-radius: var(--dj-r-sm);
  padding: 16px 20px;
}
.spmb-tutup .spmb-tutup-contact strong { color: var(--dj-primary); font-weight: 600; }
.spmb-reopen {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dj-primary);
  background: var(--dj-primary-soft);
  border: 1px solid var(--dj-rule);
  border-radius: var(--dj-r-sm);
  padding: 16px 20px;
  max-width: 640px;
  text-wrap: pretty;
}
.spmb-reopen svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--dj-accent); }
.spmb-reopen strong { font-weight: 600; }
.spmb-tutup.compact { padding: 28px; gap: 12px; }
.spmb-tutup.compact h2 { font-size: 22px; }
.spmb-tutup.compact p { font-size: 14px; }
@media (max-width: 680px) {
  .spmb-tutup { padding: 32px 24px; }
}

/* Helpers */
.dj-row-between { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.dj-bg-warm { background: var(--dj-bg-warm); }

/* ============================================================
   FOOTER
   ============================================================ */
.dj-footer {
  background: var(--dj-primary-deep);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 32px;
  margin-top: 64px;
}
.dj-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
.dj-footer-brand img { width: 56px; height: 56px; margin-bottom: 16px; }
.dj-footer-brand-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px; color: white; line-height: 1.2;
}
.dj-footer-brand-desc {
  font-size: var(--dj-fs-sm); line-height: 1.7;
  margin-top: 12px; max-width: 300px;
}
.dj-footer-social {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.dj-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--dj-r-pill);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  transition: color .15s, background .15s, border-color .15s;
}
.dj-footer-social a:hover {
  color: var(--dj-primary-deep);
  background: white;
  border-color: white;
}
.dj-footer-social svg { width: 20px; height: 20px; display: block; }
.dj-footer-col h4 {
  font-size: var(--dj-fs-label); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dj-accent-soft);
  margin-bottom: 16px;
}
.dj-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dj-footer-col a { display: inline-block; padding: 5px 0; margin: -5px 0; font-size: var(--dj-fs-sm); transition: color .15s; }
.dj-footer-col a:hover { color: white; }
.dj-footer-bottom {
  margin-top: 48px; padding: 24px 32px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 1320px; margin-left: auto; margin-right: auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--dj-fs-meta);
}

/* ============================================================
   MODAL (SPMB form / Lightbox)
   ============================================================ */
.dj-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.dj-modal-backdrop.open { opacity: 1; visibility: visible; }
.dj-modal {
  background: white;
  border-radius: 24px;
  max-width: 640px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: 40px;
  transform: scale(0.96); transition: transform .2s;
}
.dj-modal-backdrop.open .dj-modal { transform: scale(1); }
.dj-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: white; border: 0; cursor: pointer;
  font-size: 20px;
}

.dj-form-header { margin-bottom: 24px; }
.dj-form-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 32px; color: var(--dj-primary); line-height: 1.1;
}
.dj-form-sub { font-size: 14px; color: var(--dj-ink-soft); margin-top: 8px; }

.dj-form-steps {
  display: flex; gap: 8px; margin-bottom: 32px;
}
.dj-form-step {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--dj-bg-warm);
  transition: background .3s;
}
.dj-form-step.active { background: var(--dj-primary); }
.dj-form-step.done { background: var(--dj-accent); }

.dj-field { margin-bottom: 16px; }
.dj-field label {
  display: block; font-size: var(--dj-fs-label); font-weight: 600;
  color: var(--dj-ink); margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.dj-field input, .dj-field select, .dj-field textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--dj-rule);
  border-radius: var(--dj-r-sm);
  font-size: 14px; font-family: inherit;
  background: white; color: var(--dj-ink);
  transition: border .15s, box-shadow .15s;
}
.dj-field input:focus, .dj-field select:focus, .dj-field textarea:focus {
  outline: 0; border-color: var(--dj-primary);
  box-shadow: 0 0 0 3px var(--dj-primary-soft);
}
/* Never ship a bare native <select> — restyle it to match the inputs beside it
   (same size/border/radius) and draw our own chevron instead of the OS arrow. */
.dj-field select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b5e6c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}
.dj-field.error input, .dj-field.error select {
  border-color: #c75555;
  box-shadow: 0 0 0 3px rgba(199,85,85,0.1);
}
.dj-field-error {
  font-size: var(--dj-fs-meta); color: var(--dj-danger); margin-top: 6px;
}

.dj-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dj-radio-card {
  padding: 16px; border: 1px solid var(--dj-rule);
  border-radius: var(--dj-r-sm); cursor: pointer;
  transition: all .15s;
  background: white;
}
.dj-radio-card.selected {
  border-color: var(--dj-primary);
  background: var(--dj-primary-soft);
}
.dj-radio-card-title { font-weight: 600; font-size: 14px; color: var(--dj-ink); }
.dj-radio-card-desc { font-size: var(--dj-fs-sm); color: var(--dj-ink-soft); margin-top: 6px; }

.dj-form-actions {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 32px;
}

.dj-form-success {
  text-align: center; padding: 24px 0;
}
.dj-form-success-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--dj-primary-soft); color: var(--dj-primary);
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}

/* Lightbox specific */
.dj-lightbox {
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  padding: 0;
  overflow: visible;
}
.dj-lightbox img {
  width: auto; max-width: 100%; max-height: 80vh;
  margin: 0 auto;
  border-radius: var(--dj-r-lg);
  object-fit: contain;
}
.dj-lightbox-caption {
  text-align: center; color: var(--dj-bg);
  margin-top: 16px; font-size: 14px;
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.dj-tweaks-panel {
  position: fixed; bottom: 24px; right: 24px;
  width: 320px;
  background: white;
  border: 1px solid var(--dj-rule);
  border-radius: 20px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.2);
  z-index: 150;
  padding: 20px;
  display: none;
}
.dj-tweaks-panel.open { display: block; }
.dj-tweaks-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.dj-tweaks-title {
  font-family: 'Instrument Serif'; font-size: 20px;
  color: var(--dj-primary);
}
.dj-tweaks-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--dj-bg-warm); border: 0; cursor: pointer;
}
.dj-tweaks-section {
  margin-bottom: 16px;
}
.dj-tweaks-label {
  font-size: var(--dj-fs-label); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dj-ink-soft);
  margin-bottom: 8px;
}
.dj-tweaks-swatches { display: flex; gap: 6px; }
.dj-tweaks-swatch {
  width: 36px; height: 36px; border-radius: 12px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s, border .15s;
}
.dj-tweaks-swatch:hover { transform: scale(1.08); }
.dj-tweaks-swatch.active { border-color: var(--dj-accent); }
.dj-tweaks-toggle {
  display: flex; gap: 6px;
}
.dj-tweaks-toggle button {
  flex: 1; padding: 8px; border-radius: 10px;
  border: 1px solid var(--dj-rule);
  background: white; cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.dj-tweaks-toggle button.active {
  background: var(--dj-primary); color: white;
  border-color: var(--dj-primary);
}

/* ============================================================
   RESPONSIVE
   Breakpoints:
     ≤1180px  laptop / large tablet  — gentle down-scale
     ≤980px   tablet portrait        — nav collapses, grids stack
     ≤640px   mobile                 — type & spacing tighten
     ≤400px   small mobile           — minimal chrome
   ============================================================ */

/* Generic 3-up helper grid (used by inline partner / core-value grids) */
.dj-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Never allow stray horizontal scroll on touch devices */
html, body { overflow-x: hidden; }

/* ---------- ≤1180px — laptop & large tablet ---------- */
@media (max-width: 1180px) {
  .dj-hero { padding: 48px; }
  .dj-card { padding: 44px; }
  .dj-card-dark { padding: 56px 44px; }
  .dj-h1 { font-size: 60px; }
  .dj-cta h2 { font-size: 58px; }
  .dj-hero-grid { gap: 40px; }
  .dj-visi-grid, .dj-prestasi-grid { gap: 40px; }
}

/* ---------- ≤980px — tablet portrait: collapse to stacks ---------- */
@media (max-width: 980px) {
  .dj-page { padding: 16px; }
  .dj-card, .dj-card-dark, .dj-hero { padding: 32px 24px; }
  .dj-cta { padding: 48px 24px; }
  .dj-hero { border-radius: 24px; }
  .dj-hero-grid { grid-template-columns: 1fr !important; gap: 32px; }

  /* Saat hero menumpuk (≤980px = tablet & ponsel): sembunyikan status di puncak hero
     agar tidak bersaing dengan judul utama (statusnya tetap tampil di kartu unit). */
  .dj-hero-top .dj-status { display: none; }

  /* Grid foto (kolase hero, fasilitas, galeri) → carousel geser 1-per-layar dengan
     intip foto berikutnya. Full-bleed ke tepi kartu (margin negatif = padding kartu
     24px), scroll-snap agar berhenti rapi di tiap foto. Tile tetap `data-lightbox`
     → tap membuka lightbox; app.js menambahkan titik indikator. */
  .dj-hero-collage,
  .dj-fas-grid,
  .dj-gal-grid {
    position: relative;
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 12px;
    margin: 32px -24px 0;
    padding: 0 24px 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dj-hero-collage { margin-top: 0; }
  .dj-hero-collage::-webkit-scrollbar,
  .dj-fas-grid::-webkit-scrollbar,
  .dj-gal-grid::-webkit-scrollbar { display: none; }
  .dj-hero-collage > .dj-ph,
  .dj-fas-grid > .dj-ph,
  .dj-gal-grid > .dj-ph {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 80%;
    scroll-snap-align: center;
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }
  .dj-collage-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  .dj-collage-dots button {
    width: 7px; height: 7px; padding: 0; border: 0;
    border-radius: 50%;
    background: var(--dj-rule);
    cursor: pointer;
    transition: width .2s ease, background .2s ease, border-radius .2s ease;
  }
  .dj-collage-dots button.active {
    width: 20px; border-radius: 4px;
    background: var(--dj-accent);
  }
  .dj-visi-grid, .dj-prestasi-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .dj-h1 { font-size: 48px; }
  .dj-h2 { font-size: 32px; }
  .dj-cta h2 { font-size: 44px; }
  .dj-cta p { font-size: 16px; }
  .dj-visi-verse { padding: 56px 24px; }
  .dj-visi-verse-body { font-size: 30px; margin-top: 28px; }
  .dj-visi-verse-foot { margin-top: 32px; }
  /* inline styles set repeat(3,1fr) on these — force the stack */
  .dj-prog-grid, .dj-kur-grid, .dj-berita-grid { grid-template-columns: 1fr !important; }
  .dj-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .dj-kur-line { display: none; }
  .dj-facts { grid-template-columns: repeat(2, 1fr); padding: 20px 24px; }
  .dj-misi-grid { grid-template-columns: 1fr; }
  /* Statistik tetap 2 kolom di layar sempit — satu angka per baris terlalu boros scroll */
  .dj-stat { padding: 20px; }
  .dj-stat-num { font-size: 44px; }
  /* .dj-fas-grid & .dj-gal-grid dijadikan carousel di atas (bersama .dj-hero-collage) */
  .dj-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .dj-radio-group { grid-template-columns: 1fr; }

  /* ---- Mobile navigation: hamburger + dropdown panel ---- */
  .dj-nav-mobile-btn { display: flex; }
  .dj-header-cta { /* tetap ringkas, tapi ini CTA utama — jangan di bawah 13px */
    padding: 10px 14px; font-size: var(--dj-fs-label);
  }
  .dj-lang-opt { padding: 9px 12px; }
  .dj-nav {
    display: none;            /* JS toggles inline display:flex */
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--dj-surface);
    border-bottom: 1px solid var(--dj-rule);
    box-shadow: 0 24px 40px -16px rgba(0,0,0,0.18);
    padding: 12px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .dj-nav-link {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border-radius: var(--dj-r-sm);
    font-size: 16px;
  }
  .dj-nav-link.has-sub { display: flex; align-items: center; justify-content: space-between; }
  .dj-nav-link.has-sub::after { margin-left: auto; }
  .dj-nav-group { width: 100%; }
  /* submenu becomes an inline accordion, not a floating popover */
  .dj-nav-submenu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    box-shadow: none; border: 0; border-radius: 0;
    min-width: 0; padding: 4px 0 8px 8px;
  }
  .dj-nav-group.open .dj-nav-submenu { display: block; }
  .dj-nav-sub-item { padding: 12px 10px; }
}

/* ---------- ≤640px — mobile ---------- */
@media (max-width: 640px) {
  .dj-header-inner { padding: 12px 16px; gap: 12px; }
  .dj-header-brand img { width: 38px; height: 38px; }
  .dj-header-brand-name { font-size: 16px; }
  .dj-header-brand-sub { display: none; }

  .dj-hero { padding: 28px 18px; }
  .dj-card, .dj-card-dark { padding: 28px 18px; }
  .dj-cta { padding: 40px 20px; border-radius: 24px; }
  /* fluid: judul hero jadi sorotan utama di ponsel tanpa memecah baris <br/> */
  .dj-h1 { font-size: clamp(36px, 11.5vw, 52px); }
  .dj-h2 { font-size: 28px; }
  .dj-cta h2 { font-size: 34px; }
  .dj-lead { font-size: 16px; margin-top: 22px; }

  .dj-hero-top { margin-bottom: 32px; }
  .dj-brand img { width: 52px; height: 52px; }
  .dj-brand-name { font-size: 22px; }
  /* Padding kartu jadi 18px di ponsel → samakan full-bleed carousel; peek sedikit lebih besar */
  .dj-hero-collage { margin: 0 -18px; padding: 0 18px 2px; }
  .dj-fas-grid,
  .dj-gal-grid { margin: 32px -18px 0; padding: 0 18px 2px; }
  .dj-hero-collage > .dj-ph,
  .dj-fas-grid > .dj-ph,
  .dj-gal-grid > .dj-ph { flex-basis: 84%; }

  .dj-facts { padding: 18px 18px; gap: 16px; }
  .dj-fact-num { font-size: 24px; }
  .dj-grid-3 { grid-template-columns: 1fr !important; }

  .dj-cta-row { width: 100%; }
  .dj-cta-row .dj-btn { flex: 1 1 auto; justify-content: center; }

  .dj-faq-q { font-size: 17px; padding: 20px; }
  .dj-faq-a { padding: 0 20px; }
  .dj-faq-item.open .dj-faq-a { padding: 4px 20px 24px; } /* bottom stays 24 on mobile */

  /* Modal / form */
  .dj-modal-backdrop { padding: 0; align-items: flex-end; }
  .dj-modal {
    padding: 28px 20px;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
  }
  /* Lightbox bukan bottom-sheet — foto yang diperbesar tetap di tengah layar,
     tanpa padding/sudut sheet warisan .dj-modal. Harus setelah blok .dj-modal
     di atas: spesifisitasnya sama, jadi urutan yang menentukan. */
  .dj-lightbox-backdrop { align-items: center; padding: 24px; }
  .dj-lightbox {
    padding: 0;
    border-radius: 0;
    max-height: 100%;
  }
  .dj-lightbox img { max-height: 72vh; }

  .dj-form-title { font-size: 26px; }
  .dj-form-actions { flex-direction: column-reverse; }
  .dj-form-actions .dj-btn { width: 100%; justify-content: center; }

  .dj-footer { padding: 48px 0 28px; }
  .dj-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .dj-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Linimasa: alur vertikal menerus — satu garis + titik simpul berwarna di kiri.
     Tiap item jadi blok (bukan cell grid); ::before menggambar potongan garis yang
     bersambung ke item berikutnya, dan titik warna desktop dipindah ke garis. */
  .dj-tl { display: block; margin-top: 32px; }
  .dj-tl-item {
    display: block !important;   /* batalkan display:contents di mobile */
    position: relative;
    padding: 0 0 28px 30px;
  }
  .dj-tl-item::before {
    content: "";
    position: absolute;
    left: 5px; top: 7px; bottom: -7px;
    width: 2px; background: var(--dj-rule);
  }
  .dj-tl-item:last-child::before { bottom: auto; height: 22px; }
  .dj-tl-year { display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 0 0 8px; }
  .dj-tl-year > div:last-child { margin-top: 0 !important; }
  .dj-tl-num { font-size: 30px; }
  /* lepas containing-block agar titik warna mengacu ke .dj-tl-item, bukan body */
  .dj-tl-body { border-left: 0; padding: 0; position: static; }
  .dj-tl-body > div:first-child { top: 7px !important; left: 0 !important; }
}

/* ---------- ≤400px — small mobile ---------- */
@media (max-width: 400px) {
  .dj-header-brand-text { display: none; }
  .dj-cta h2 { font-size: 30px; }
  .dj-facts { grid-template-columns: 1fr 1fr; }
  .dj-cta-row { flex-direction: column; }
  .dj-cta-row .dj-btn { width: 100%; }
}

/* ============================================================
   BLOG / ARTIKEL  (ditambahkan untuk fitur blog)
   Memakai token & komponen yang sudah ada (dj-berita-card, dj-ph, dll).
   ============================================================ */
.dj-blog-card { display: block; text-decoration: none; }
.dj-blog-date { font-size: 13px; color: var(--dj-ink-soft); padding: 0 8px; margin-top: 4px; }
.dj-blog-summary { font-size: 15px; line-height: 1.6; color: var(--dj-ink-soft); padding: 0 8px 12px; margin: 6px 0 0; }

/* --- Blog: toolbar (cari + filter kategori) --- */
.dj-blog-toolbar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; margin-top: 30px; }
.dj-search { display: flex; align-items: center; gap: 8px; background: var(--dj-surface); border: 1px solid var(--dj-rule); border-radius: var(--dj-r-pill); padding: 5px 5px 5px 16px; min-width: min(360px, 100%); }
.dj-search:focus-within { border-color: var(--dj-primary); }
.dj-search svg { width: 18px; height: 18px; color: var(--dj-ink-soft); flex-shrink: 0; }
.dj-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--dj-ink); width: 100%; }
.dj-search .dj-btn { padding: 9px 18px; flex-shrink: 0; }
/* PERHATIAN: .dj-chip/.dj-chips juga didefinisikan di bagian Fasilitas (atas).
   Blok ini datang belakangan sehingga MENANG di semua halaman — chip fasilitas di
   TKIP/SDIP/SMPIP sebenarnya memakai tampilan di bawah ini, bukan yang di atas.
   Ukuran dijaga sama lewat token supaya keduanya tidak berbeda diam-diam. */
.dj-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.dj-chip { padding: 12px 18px; border-radius: var(--dj-r-pill); border: 1px solid var(--dj-rule); background: var(--dj-surface); color: var(--dj-ink); font-size: var(--dj-fs-sm); font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.dj-chip:hover { border-color: var(--dj-primary); color: var(--dj-primary); }
.dj-chip.active { background: var(--dj-primary); border-color: var(--dj-primary); color: #fff; }
.dj-blog-result { margin-top: 20px; color: var(--dj-ink-soft); font-size: 15px; }
.dj-blog-result a { color: var(--dj-accent); font-weight: 600; }

/* Filter jenis/unit (tab) + badge unit pada kartu */
.dj-jenis-tabs { margin-top: 22px; margin-bottom: 2px; }
.dj-jenis-badge { background: var(--dj-primary); color: #fff; padding: 2px 9px; border-radius: var(--dj-r-pill); font-size: var(--dj-fs-label); letter-spacing: 0.04em; line-height: 1.6; }

/* --- Blog: artikel unggulan --- */
.dj-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; margin-top: 32px; padding: 18px; background: var(--dj-bg-warm); border-radius: var(--dj-r-lg); text-decoration: none; transition: transform .2s; }
.dj-feature:hover { transform: translateY(-3px); }
.dj-feature-img { aspect-ratio: 16/11; border-radius: var(--dj-r-md); min-height: 0; margin: 0; }
.dj-feature-body { padding: 8px 14px; }
.dj-feature-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 34px; line-height: 1.12; color: var(--dj-primary); margin: 10px 0 0; }
.dj-feature-summary { font-size: 16px; line-height: 1.6; color: var(--dj-ink-soft); margin: 12px 0 0; }
.dj-feature-more { display: inline-block; margin-top: 16px; color: var(--dj-accent); font-weight: 700; }

/* --- Blog: paginasi --- */
.dj-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 44px; }
.dj-page-btn { padding: 10px 18px; border-radius: var(--dj-r-pill); border: 1px solid var(--dj-rule); background: var(--dj-surface); color: var(--dj-ink); font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.dj-page-btn:hover { border-color: var(--dj-primary); color: var(--dj-primary); }
.dj-page-btn.is-disabled { opacity: .4; pointer-events: none; }
.dj-page-info { color: var(--dj-ink-soft); font-size: 14px; }

/* --- Detail: badge kategori, berbagi, terkait --- */
.dj-cat-badge { color: var(--dj-accent); font-weight: 700; text-decoration: none; }
.dj-cat-badge:hover { text-decoration: underline; }
.dj-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--dj-rule); }
.dj-share .lbl { font-weight: 700; color: var(--dj-ink); }
.dj-share a, .dj-share button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--dj-r-pill); border: 1px solid var(--dj-rule); background: var(--dj-surface); color: var(--dj-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s; }
.dj-share a:hover, .dj-share button:hover { border-color: var(--dj-primary); color: var(--dj-primary); }
.dj-share svg { width: 16px; height: 16px; }
.dj-related { margin-top: 56px; }
.dj-related h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 28px; color: var(--dj-primary); margin: 0 0 4px; }

/* --- Reaksi pembaca artikel --- */
.dj-reaksi { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--dj-rule); }
.dj-reaksi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dj-reaksi-title { font-weight: 700; color: var(--dj-ink); font-size: var(--dj-fs-body); }
.dj-reaksi-count { font-size: var(--dj-fs-sm); color: var(--dj-ink-soft); }
.dj-reaksi-count b { color: var(--dj-ink); font-variant-numeric: tabular-nums; }
.dj-reaksi-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.dj-reaksi-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--dj-r-pill); border: 1px solid var(--dj-rule); background: var(--dj-surface); color: var(--dj-ink); font: inherit; font-size: var(--dj-fs-body); font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.dj-reaksi-btn .emo { font-size: 26px; line-height: 1; }
.dj-reaksi-btn .cnt { min-width: 1ch; font-size: var(--dj-fs-sm); color: var(--dj-ink-soft); font-variant-numeric: tabular-nums; }
.dj-reaksi-btn:hover { border-color: var(--dj-primary); }
.dj-reaksi-btn:active { transform: scale(.94); }
.dj-reaksi-btn.is-active { border-color: var(--dj-primary); background: var(--dj-primary-soft); color: var(--dj-primary-deep); }
.dj-reaksi-btn.is-active .cnt { color: var(--dj-primary-deep); }
.dj-reaksi-btn[disabled] { opacity: .55; cursor: default; }

@media (max-width: 760px) {
  .dj-feature { grid-template-columns: 1fr; }
  .dj-blog-toolbar { flex-direction: column; align-items: stretch; }
}
.dj-blog-byline { font-size: 15px; color: var(--dj-ink-soft); margin-top: 8px; }

.dj-article { max-width: 760px; }
.dj-article-cover { aspect-ratio: 16/9; border-radius: var(--dj-r-md); margin: 28px 0; }
.dj-article-body { font-size: 18px; line-height: 1.75; color: var(--dj-ink); margin-top: 28px; }
.dj-article-body > :first-child { margin-top: 0; }
.dj-article-body p { margin: 0 0 1.1em; }
.dj-article-body h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 32px; color: var(--dj-primary); margin: 1.6em 0 .5em; }
.dj-article-body h3 { font-size: 24px; color: var(--dj-primary); margin: 1.4em 0 .4em; }
.dj-article-body a { color: var(--dj-accent); text-decoration: underline; }
.dj-article-body img { max-width: 100%; height: auto; border-radius: var(--dj-r-sm); margin: 1em 0; }
.dj-article-body ul, .dj-article-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.dj-article-body li { margin: .3em 0; }
.dj-article-body blockquote { border-left: 3px solid var(--dj-accent); margin: 1.2em 0; padding: .2em 0 .2em 1em; color: var(--dj-ink-soft); font-style: italic; }
.dj-article-body pre { background: var(--dj-bg-warm); padding: 16px; border-radius: var(--dj-r-sm); overflow-x: auto; }
.dj-article-body table { border-collapse: collapse; width: 100%; margin: 1.2em 0; }
.dj-article-body th, .dj-article-body td { border: 1px solid var(--dj-rule); padding: 8px 12px; text-align: left; }
/* Perataan (rata kiri/tengah/kanan dari editor) — termasuk gambar di antara paragraf. */
.dj-article-body .ql-align-center { text-align: center; }
.dj-article-body .ql-align-right { text-align: right; }
.dj-article-body .ql-align-justify { text-align: justify; }
/* Keterangan gambar. */
.dj-article-body p.dj-caption { font-size: 14px; color: var(--dj-ink-soft); font-style: italic; text-align: center; margin: -0.4em 0 1.6em; }

/* Sitasi sebaris [n] — tautan superskrip ke daftar referensi */
.dj-article-body sup.dj-cite { font-size: .72em; line-height: 0; font-weight: 700; }
.dj-article-body sup.dj-cite a { color: var(--dj-accent); text-decoration: none; padding: 0 1px; }
.dj-article-body sup.dj-cite a:hover { text-decoration: underline; }

/* Daftar referensi / bibliografi di bawah artikel */
.dj-references { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--dj-rule); scroll-margin-top: 96px; }
.dj-references-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 28px; color: var(--dj-primary); margin: 0 0 16px; }
.dj-references-list { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--dj-ink-soft); }
.dj-references-list li { padding-left: 4px; scroll-margin-top: 96px; transition: background-color .3s; }
.dj-references-list li:target { background: var(--dj-primary-soft); border-radius: var(--dj-r-sm); box-shadow: 0 0 0 8px var(--dj-primary-soft); }
.dj-references-list a { color: var(--dj-accent); text-decoration: none; word-break: break-word; }
.dj-references-list a:hover { text-decoration: underline; }
.dj-ref-back { margin-left: 6px; font-weight: 700; text-decoration: none; }

/* ============================================================
   BLOG DETAIL — layout dua kolom (artikel + sidebar metadata)
   ============================================================ */
.dj-back-link { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 28px; color: var(--dj-ink-soft); font-weight: 600; font-size: 15px; text-decoration: none; transition: color .15s; }
.dj-back-link:hover { color: var(--dj-primary); }
.dj-back-link svg { width: 18px; height: 18px; }

.dj-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; padding-bottom: 72px; }
.dj-article-main { max-width: 760px; min-width: 0; }

/* Kepala artikel */
.dj-article-head { margin-bottom: 4px; }
.dj-article-tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.dj-cat-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--dj-r-pill); background: var(--dj-primary-soft); color: var(--dj-primary); font-size: var(--dj-fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .15s, color .15s; }
.dj-cat-pill:hover { background: var(--dj-primary); color: #fff; }
.dj-article-date { font-size: 14px; color: var(--dj-ink-soft); font-weight: 500; }
.dj-article-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 52px; line-height: 1.08; letter-spacing: -0.015em; color: var(--dj-primary); margin: 0; }
.dj-article-lead { font-size: 20px; line-height: 1.6; color: var(--dj-ink-soft); margin: 18px 0 0; }

/* Byline penulis (di bawah judul, tampil di semua layar) */
.dj-article-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--dj-rule); }
.dj-byline-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--dj-primary); color: #fff; font-weight: 700; font-size: 15px; overflow: hidden; }
.dj-byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dj-byline-text { display: flex; flex-direction: column; line-height: 1.35; }
.dj-byline-name { font-size: 15px; font-weight: 700; color: var(--dj-ink); }
.dj-byline-sub { font-size: 13px; color: var(--dj-ink-soft); }

/* Sidebar metadata (sticky) */
.dj-article-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.dj-aside-card { background: var(--dj-surface); border: 1px solid var(--dj-rule); border-radius: var(--dj-r-md); padding: 20px; box-shadow: var(--dj-shadow); }
.dj-aside-title { font-size: var(--dj-fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dj-ink-soft); margin: 0 0 14px; }

.dj-author-card { display: flex; align-items: center; gap: 14px; }
.dj-author-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--dj-primary); color: #fff; font-weight: 700; font-size: 18px; overflow: hidden; }
.dj-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dj-author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dj-author-eyebrow { font-size: var(--dj-fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dj-ink-soft); }
.dj-author-name { font-size: 16px; font-weight: 700; color: var(--dj-ink); }
.dj-author-role { font-size: 13px; color: var(--dj-accent); font-weight: 600; }

.dj-meta-list { margin: 0; }
.dj-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--dj-rule); }
.dj-meta-row:first-child { border-top: 0; padding-top: 0; }
.dj-meta-row:last-child { padding-bottom: 0; }
.dj-meta-row dt { font-size: 14px; color: var(--dj-ink-soft); }
.dj-meta-row dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--dj-ink); text-align: right; }
.dj-meta-row dd a { color: var(--dj-accent); text-decoration: none; }
.dj-meta-row dd a:hover { text-decoration: underline; }

.dj-aside-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dj-aside-share a, .dj-aside-share button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: var(--dj-r-sm); border: 1px solid var(--dj-rule); background: var(--dj-surface); color: var(--dj-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s; }
.dj-aside-share a:hover, .dj-aside-share button:hover { border-color: var(--dj-primary); color: var(--dj-primary); }
.dj-aside-share svg { width: 15px; height: 15px; }
.dj-aside-share button { grid-column: 1 / -1; }

/* Di desktop, share dalam artikel redundan dengan sidebar — sembunyikan. */
@media (min-width: 981px) {
  .dj-article-main .dj-share { display: none; }
}

/* Responsif: sidebar turun ke bawah artikel */
@media (max-width: 980px) {
  .dj-article-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dj-article-aside { position: static; top: auto; min-width: 0; }
  .dj-article-main { max-width: none; }
  .dj-article-title { font-size: 40px; }
  /* Share sidebar redundan dengan share dalam artikel di mobile. */
  .dj-article-aside .dj-aside-card:last-child { display: none; }
}
@media (max-width: 560px) {
  .dj-article-title { font-size: 31px; }
  .dj-article-lead { font-size: 17px; }
}

/* ---------- Halaman 404 ---------- */
.dj-404 { text-align: center; }
.dj-404 .dj-lead { margin-left: auto; margin-right: auto; }
.dj-404-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }