/* Modul Diferensiasi MBS (/diferensiasi, /diferensiasi/{slug}) di atas templat Course + saham-course.css.
   Radius memakai token tema (--r-sm untuk kartu/panel, --r-pill untuk label/tombol/status); tanpa sudut tajam.
   Semua warna lewat token (variables.css + blok :root di bawah); tidak ada hex lepas di aturan komponen.
   Mobile-first: nilai dasar untuk HP, min-width menaikkan ukuran. */
:root{
  --dfr-r: var(--r-sm);
  --dfr-r-pil: var(--r-pill);
  --dfr-garis: var(--c-line);
  --dfr-garis-tegas: #C9D6CF;
  --dfr-putih-tipis: rgba(255, 255, 255, .14);
  --dfr-putih-teks: rgba(255, 255, 255, .92);
  --dfr-pratinjau-bg: #FFF4D6;
  --dfr-pratinjau-fg: #6B4E00;
  --dfr-jeda: #8A5A00;
  --dfr-hero-box-r: 3px; /* kotak statistik hero (permintaan pengelola; /saham-syariah tetap bersudut) */
  --dfr-hero-box-garis: rgba(255, 255, 255, .08); /* pemisah kotak statistik yang menempel di mobile */
  --dfr-hero-foto: .07;  /* transparansi foto gedung kampus: samar, gradasi hero tetap dominan (besar = foto lebih jelas) */
  --dfr-hero-foto-blur: 2px;
  --dfr-hero-vinyet: rgba(12, 46, 59, .38); /* bayangan lembut di belakang judul slide */
  --dfr-pita-w: 44px;    /* pita ikon kartu rumpun kepakaran */
  --dfr-pita-h: 60px;
  --dfr-pita-r: 4px;
  /* Posisi bawah header fixed = top + tinggi. Tinggi navbar ramping ada di saham-course.css (--c-header-h, dipakai
     bersama /saham-syariah); semua jarak di bawah header (hero, gulir anchor, sidebar sticky) dihitung dari token ini. */
  --dfr-header-top: 45px;
  --dfr-header-h: var(--c-header-h);
  --dfr-hero-jarak: 56px; /* ruang napas antara bawah header dan remah roti hero */
}
@media only screen and (max-width: 575px){ :root{ --dfr-hero-jarak: 30px; } }
@media only screen and (max-width: 479px){ :root{ --dfr-header-top: 15px; } }

/* ---------- Gulir mulus + offset header tetap ----------
   scroll-padding-top menjaga target anchor (#pilar, #matriks, ...) tidak tertutup header fixed.
   overflow-x: clip (bukan hidden) mencegah geser horizontal di HP tanpa mematikan position: sticky. */
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--dfr-header-top) + var(--dfr-header-h) + 12px); overflow-x: clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ---------- Hero ----------
   Padding atas hero = bawah header fixed (token di :root) + ruang napas, supaya hero tidak tertutup header.
   Isi rata tengah seperti hero /saham-syariah. */
.dfr-hero{ position: relative; overflow: hidden; display: flex; align-items: center; min-height: 460px;
  padding: calc(var(--dfr-header-top) + var(--dfr-header-h) + var(--dfr-hero-jarak)) 0 64px;
  background: var(--mbs-grad-main); color: var(--mbs-white); text-align: center; }
/* Foto gedung kampus transparan di atas gradasi MBS: luminosity = foto hanya memberi tekstur terang-gelap,
   warnanya tetap dari gradasi tema (hijau - teal - biru). */
.dfr-hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: var(--dfr-hero-foto); mix-blend-mode: luminosity; filter: blur(var(--dfr-hero-foto-blur)); }
.dfr-hero-inner{ position: relative; display: flex; flex-direction: column; align-items: center; }

/* Varian slider (halaman indeks): .home memberi tinggi 100vh, jadi padding header pindah ke .dfr-hero-chrome.
   Slide hanya memuat judul berputar (teks pendek); remah roti + label di atas, ajakan di bawah. */
.dfr-hero--slider{ display: block; min-height: 560px; padding: 0; }
.dfr-hero--slider .hero_slide_container{ min-height: 560px; }
/* Foto slide = elemen <img> (bukan background-image inline) di dalam lapisan latar templat. Lapisan latar memakai
   gradasi MBS; aturan saham-course (lapisan diredupkan .55 + tirai gelap) diganti supaya gradasi tetap cerah. */
/* Latar diam penuh tepi ke tepi; latar per slide dikosongkan (dulu tiap slide membawa gradasinya sendiri, sehingga
   saat autoplay bergeser terlihat sambungan vertikal di kiri/kanan seperti backdrop tidak penuh). */
.dfr-hero-latar{ position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--mbs-grad-main); }
.dfr-hero-latar::after{ content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 52%, var(--dfr-hero-vinyet) 0%, transparent 100%); }
.dfr-hero--slider .hero_slider_container{ position: relative; z-index: 1; }
.dfr-hero--slider .hero_slide_background{ background: none; opacity: 1; filter: none; transform: none; }
.dfr-hero--slider .hero_slide_background::after{ content: none; }
.dfr-slide-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: var(--dfr-hero-foto); mix-blend-mode: luminosity; filter: blur(var(--dfr-hero-foto-blur)); transform: scale(1.04); }
.dfr-hero-chrome{ position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  padding: calc(var(--dfr-header-top) + var(--dfr-header-h) + var(--dfr-hero-jarak)) 0 64px; pointer-events: none; }
.dfr-hero-chrome a, .dfr-hero-chrome button{ pointer-events: auto; }
.dfr-hero-chrome-inner{ display: flex; flex: 1 1 auto; flex-direction: column; align-items: center;
  justify-content: space-between; width: 100%; text-align: center; }
.dfr-hero-top, .dfr-hero-bawah{ display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Judul slide dibatasi: teks pendek, maksimal ±2 baris, ukuran tidak sebesar /saham-syariah. */
.dfr-hero--slider .hero_slide_content{ max-width: min(920px, 84%); }
.dfr-hero--slider .hero_title{ font-size: clamp(30px, 3.6vw, 52px); line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
/* Tinggi viewport dinamis di HP: tidak terpotong bilah alamat browser */
@supports (height: 100svh){
  .dfr-hero--slider.home{ height: 100svh; }
  .dfr-hero--slider .hero_slide_container{ height: 100svh; }
}
.dfr-crumbs ol{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; }
.dfr-crumbs li + li::before{ content: '/'; margin-right: 6px; opacity: .6; }
.dfr-crumbs a{ color: var(--mbs-white); text-decoration: underline; text-underline-offset: 3px; }
.dfr-crumbs a:hover{ color: var(--mbs-mint); }
.dfr-crumbs span{ opacity: .85; }
.dfr-eyebrow{ display: inline-block; margin: 0 0 10px; padding: 6px 16px; border-radius: var(--dfr-r-pil); background: var(--dfr-putih-tipis);
  color: var(--mbs-white); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dfr-hero-title{ margin: 0; color: var(--mbs-white); font-size: 44px; font-weight: 600; line-height: 1.2; max-width: 900px; overflow-wrap: anywhere; }
.dfr-hero-lead{ margin: 16px 0 0; max-width: 760px; color: var(--dfr-putih-teks); font-size: 17px; line-height: 1.65; }
.dfr-hero-cta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.dfr-hero .course_btn, .dfr-cta .course_btn, .course_empty .course_btn, .dfr-back{ border-radius: var(--dfr-r-pil); }
.dfr-btn-terang{ background: var(--mbs-white); color: var(--mbs-green-dark); }
.dfr-btn-terang:hover, .dfr-btn-terang:focus{ color: var(--mbs-green-dark); }

.dfr-pratinjau{ order: -1; margin: 0 0 16px; padding: 8px 16px; border-radius: var(--dfr-r-pil); background: var(--dfr-pratinjau-bg); color: var(--dfr-pratinjau-fg);
  font-size: 14px; font-weight: 600; }

/* ---------- Statistik = .hero_boxes templat (gaya dari main_styles.css + saham-course.css, tidak ditimpa) ----------
   >=992px kotak menumpang 212px di bawah hero (vendor .hero_boxes_inner top:-212px): ajakan hero dinaikkan agar tidak tertutup. */
.hero_box{ border-radius: var(--dfr-hero-box-r); }
@media (min-width: 992px){
  .dfr-hero--slider .dfr-hero-chrome{ padding-bottom: 236px; }
}
/* <=991px: vendor menurunkan kotak ke bawah hero (padding-top 64-117px + margin-bottom 30px per kotak).
   Di sini kotak menempel langsung di bawah hero dan satu sama lain, jadi satu blok; garis tipis sebagai pemisah,
   sudut membulat hanya di tepi luar blok. */
@media only screen and (max-width: 991px){
  .hero_boxes{ padding-top: 0; }
  .hero_box_col, .hero_box_col:last-child{ margin-bottom: 0; }
  .hero_box{ border-radius: 0; }
  .hero_box_col + .hero_box_col .hero_box{ border-top: 1px solid var(--dfr-hero-box-garis); }
  .hero_box_col:first-child .hero_box{ border-radius: var(--dfr-hero-box-r) var(--dfr-hero-box-r) 0 0; }
  .hero_box_col:last-child .hero_box{ border-radius: 0 0 var(--dfr-hero-box-r) var(--dfr-hero-box-r); }
}

/* ---------- Section umum ---------- */
.dfr-section{ padding-top: 64px; padding-bottom: 64px; }
.dfr-section--alt{ background: var(--c-surface); }
.dfr-section .section_title h2{ font-size: 26px; }
.dfr-h2{ margin: 32px 0 14px; font-size: 22px; font-weight: 600; color: var(--mbs-ink); }
.dfr-h3{ margin: 22px 0 10px; font-size: 17px; font-weight: 700; color: var(--mbs-green-dark); }
.dfr-muted{ color: var(--mbs-muted); font-size: 14px; }
.dfr-kosong{ margin: 24px 0 0; padding: 18px; border: 1px dashed var(--dfr-garis-tegas); border-radius: var(--dfr-r); color: var(--mbs-muted); text-align: center; }
.dfr-kosong .bi{ margin-right: 6px; color: var(--mbs-green); }
.dfr-empty{ border-radius: var(--dfr-r); }
.dfr-panel{ margin-top: 32px; padding: 16px; background: var(--mbs-white); border: 1px solid var(--dfr-garis); border-radius: var(--dfr-r); }

/* ---------- Kartu pilar ---------- */
.dfr-cards{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.dfr-card{ position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--mbs-white); border: 1px solid var(--dfr-garis);
  border-top: 3px solid var(--aksen, var(--mbs-teal)); border-radius: var(--dfr-r); transition: box-shadow var(--dur) var(--ease); }
.dfr-card:hover, .dfr-card:focus-within{ box-shadow: var(--shadow-sm); }
.dfr-card-media{ aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface); }
.dfr-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.dfr-card-media--ikon{ display: flex; align-items: center; justify-content: center; aspect-ratio: auto; height: 96px; }
.dfr-card-media--ikon .bi{ font-size: 40px; color: var(--aksen, var(--mbs-teal)); }
.dfr-card-body{ display: flex; flex-direction: column; flex: 1; padding: 18px; }
.dfr-label{ align-self: flex-start; margin-bottom: 8px; padding: 2px 10px; border-radius: var(--dfr-r-pil); background: var(--c-surface);
  color: var(--mbs-green-dark); font-size: 12px; font-weight: 700; }
.dfr-card h3{ margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.dfr-card h3 a{ color: var(--mbs-ink); }
.dfr-card h3 a::after{ content: ''; position: absolute; inset: 0; } /* seluruh kartu bisa diklik */
.dfr-card h3 a:focus-visible{ outline: none; }
.dfr-card:focus-within{ outline: 2px solid var(--mbs-green); outline-offset: 2px; }
.dfr-card p{ margin: 0; color: var(--mbs-muted); font-size: 14px; line-height: 1.6; }
.dfr-card-more{ margin-top: auto; padding-top: 14px; color: var(--mbs-green); font-size: 13px; font-weight: 700; }

/* ---------- Grafik & peta ---------- */
.dfr-chart{ position: relative; height: 320px; }
.dfr-peta{ height: 380px; border-radius: var(--dfr-r); background: var(--c-surface); z-index: 0; }
.dfr-peta--kecil{ height: 300px; margin-bottom: 12px; }
.dfr-peta-filter{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dfr-peta-filter select{ min-height: 44px; padding: 0 14px; border: 1px solid var(--dfr-garis-tegas); border-radius: var(--dfr-r-pil); background: var(--mbs-white); font-size: 14px; }
.dfr-data{ margin-top: 14px; }
.dfr-data summary{ min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--mbs-green-dark); font-weight: 700; font-size: 14px; }
.dfr-lokasi{ margin: 8px 0 0; padding: 0; list-style: none; }
.dfr-lokasi li{ padding: 10px 0; border-top: 1px solid var(--dfr-garis); font-size: 14px; }
.dfr-lokasi small{ display: block; color: var(--mbs-muted); }
.dfr-lokasi p{ margin: 4px 0 0; color: var(--mbs-ink); }
.dfr-chip{ display: inline-block; padding: 1px 9px; border-radius: var(--dfr-r-pil); background: var(--c-surface); color: var(--mbs-green-dark); font-size: 12px; font-weight: 600; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ border-radius: var(--dfr-r); }
.dfr-popup strong{ display: block; }
.dfr-popup small{ color: var(--mbs-muted); }

/* ---------- Tabel (matriks, indikator, data grafik) ---------- */
.dfr-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; border: 1px solid var(--dfr-garis); border-radius: var(--dfr-r); background: var(--mbs-white); }
.dfr-table-wrap:focus-visible{ outline: 2px solid var(--mbs-green); outline-offset: 2px; }
.dfr-table{ width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.dfr-table caption{ caption-side: bottom; padding: 8px 12px; color: var(--mbs-muted); font-size: 12px; }
.dfr-table th, .dfr-table td{ padding: 12px; border-bottom: 1px solid var(--dfr-garis); text-align: left; vertical-align: top; }
.dfr-table thead th{ background: var(--c-surface); color: var(--mbs-ink); font-weight: 700; white-space: nowrap; }
.dfr-table tbody th{ font-weight: 600; color: var(--mbs-ink); }
.dfr-table tbody th a{ color: var(--mbs-green-dark); }
.dfr-table small{ color: var(--mbs-muted); font-weight: 400; }
.dfr-matriks{ min-width: 860px; }
.dfr-matriks tbody th{ width: 22%; }
.dfr-matriks ul{ margin: 0; padding-left: 16px; list-style: disc; }
.dfr-matriks li + li{ margin-top: 6px; }

/* Status aktivitas: teks + bentuk garis, tidak hanya warna */
.dfr-status{ display: inline-block; margin-left: 4px; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--dfr-r-pil);
  font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.dfr-status--rencana{ color: var(--mbs-muted); border-style: dashed; }
.dfr-status--berjalan{ color: var(--mbs-blue); }
.dfr-status--tercapai{ color: var(--mbs-green-dark); background: var(--mbs-soft-start); }
.dfr-status--jeda{ color: var(--dfr-jeda); }

/* ---------- Rumpun kepakaran ---------- */
.dfr-rumpun{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.dfr-rumpun-item{ position: relative; padding: 20px calc(var(--dfr-pita-w) + 36px) 20px 20px; background: var(--mbs-white);
  border: 1px solid var(--dfr-garis); border-radius: var(--dfr-r); }
.dfr-rumpun-item h3{ margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--mbs-ink); }
/* Pita bookmark: menempel di tepi atas kartu, ujung bawah berlekuk V. Lebar/tinggi dari token di :root. */
.dfr-rumpun-pita{ position: absolute; top: -1px; right: 24px; display: flex; align-items: flex-start; justify-content: center;
  width: var(--dfr-pita-w); height: var(--dfr-pita-h); padding-top: 12px; background: var(--mbs-grad-main); color: var(--mbs-white);
  border-radius: var(--dfr-pita-r) var(--dfr-pita-r) 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.dfr-rumpun-pita .bi{ font-size: 22px; line-height: 1; }
.dfr-rumpun-item p{ color: var(--mbs-muted); font-size: 14px; }
.dfr-rumpun-item ul{ margin: 0; padding-left: 18px; list-style: disc; color: var(--mbs-ink); font-size: 14px; line-height: 1.7; }
.dfr-rumpun-dosen{ margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--dfr-garis); }
.dfr-rumpun-dosen span{ font-weight: 700; color: var(--mbs-ink); }
.dfr-rumpun-dosen a{ color: var(--mbs-green-dark); }

/* ---------- Relasi Profil Lulusan / CPL ---------- */
.dfr-col .dfr-h2{ margin-top: 0; }
.dfr-col + .dfr-col{ margin-top: 32px; }
.dfr-relasi{ margin: 0; padding: 0; list-style: none; }
.dfr-relasi li{ display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--dfr-garis); font-size: 14px; color: var(--mbs-ink); }
.dfr-relasi small{ display: block; margin-top: 4px; color: var(--mbs-muted); }
.dfr-relasi--rapat li{ padding: 8px 0; font-size: 13px; }
.dfr-kode{ flex-shrink: 0; align-self: flex-start; min-width: 52px; padding: 2px 8px; border-radius: var(--dfr-r-pil); background: var(--mbs-green-dark);
  color: var(--mbs-white); font-size: 12px; font-weight: 700; text-align: center; }

/* ---------- CTA bawah ---------- */
.dfr-cta{ padding: 48px 0; background: var(--mbs-grad-main); color: var(--mbs-white); text-align: center; }
.dfr-cta h2{ margin: 0 0 20px; color: var(--mbs-white); font-size: 24px; font-weight: 600; }
.dfr-cta ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dfr-btn-putih{ border-color: var(--mbs-white); color: var(--mbs-white); text-transform: none; }
.dfr-btn-putih:hover, .dfr-btn-putih:focus{ background: var(--mbs-white); color: var(--mbs-green-dark); }

/* ---------- Detail ---------- */
.dfr-detail{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.dfr-detail-main > section:first-child .dfr-h2{ margin-top: 0; }
.dfr-prose{ color: var(--mbs-ink); font-size: 16px; line-height: 1.75; }
.dfr-prose ul, .dfr-prose ol{ margin: 0 0 12px; padding-left: 22px; }
.dfr-prose ul{ list-style: disc; } /* templat Course me-reset list-style */
.dfr-prose ol{ list-style: decimal; }
.dfr-prose li{ margin-bottom: 4px; }
.dfr-prose .pg-block-title{ margin: 20px 0 8px; font-size: 18px; font-weight: 600; }
.dfr-cek{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dfr-cek li{ display: flex; gap: 8px; padding: 10px 14px; background: var(--c-surface); border-radius: var(--dfr-r); font-size: 15px; color: var(--mbs-ink); }
.dfr-cek .bi{ color: var(--mbs-green); font-size: 18px; line-height: 1.2; }
.dfr-aktivitas{ display: grid; gap: 12px; }
.dfr-aktivitas-item{ padding: 16px; border: 1px solid var(--dfr-garis); border-left: 3px solid var(--aksen, var(--mbs-teal)); border-radius: var(--dfr-r); background: var(--mbs-white); }
.dfr-aktivitas-head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--mbs-ink); }
.dfr-aktivitas-item p{ margin: 8px 0 0; color: var(--mbs-muted); font-size: 14px; }
.dfr-meta{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0 0; font-size: 13px; }
.dfr-meta dt{ color: var(--mbs-muted); font-weight: 600; }
.dfr-meta dd{ margin: 0; color: var(--mbs-ink); }
.dfr-luaran{ margin: 10px 0 0; font-size: 13px; color: var(--mbs-ink); }
.dfr-luaran span{ font-weight: 700; }
.dfr-luaran a{ color: var(--mbs-green-dark); font-weight: 700; }

.dfr-aside{ display: flex; flex-direction: column; gap: 16px; }
.dfr-aside-box{ padding: 16px; border: 1px solid var(--dfr-garis); border-radius: var(--dfr-r); background: var(--mbs-white); }
.dfr-aside-title{ margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--mbs-ink); text-transform: uppercase; letter-spacing: .03em; }
.dfr-aside-list{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--mbs-ink); }
.dfr-aside-list .bi{ margin-right: 6px; color: var(--mbs-green); }
.dfr-aside-list .dfr-kode{ margin-right: 6px; min-width: 0; }
.dfr-aside-list small{ color: var(--mbs-muted); }
.dfr-dosen{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dfr-dosen a{ display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--mbs-ink); }
.dfr-dosen a:hover strong{ color: var(--mbs-green-dark); }
.dfr-dosen-foto{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden;
  border-radius: var(--dfr-r-pil); background: var(--c-surface); color: var(--mbs-muted); }
.dfr-dosen-foto img{ width: 100%; height: 100%; object-fit: cover; }
.dfr-dosen strong{ display: block; font-size: 14px; }
.dfr-dosen small{ display: block; color: var(--mbs-muted); font-size: 12px; }

/* ---------- Hero: ikut breakpoint header templat (max-width, lihat catatan di atas) ---------- */
@media only screen and (max-width: 991px){
  .dfr-hero:not(.dfr-hero--slider){ min-height: 0; }
  .dfr-hero-title{ font-size: 36px; }
}
@media only screen and (max-width: 767px){
  .dfr-hero:not(.dfr-hero--slider){ padding-bottom: 48px; }
  .dfr-hero-chrome{ padding-bottom: 48px; }
  .dfr-hero-title{ font-size: 30px; }
  .dfr-hero-lead{ font-size: 15px; }
}
@media only screen and (max-width: 575px){
  .dfr-hero-title{ font-size: 26px; }
}
@media only screen and (max-width: 479px){
  .dfr-hero:not(.dfr-hero--slider){ padding-bottom: 40px; }
  .dfr-hero-chrome{ padding-bottom: 40px; }
  .dfr-hero-cta{ flex-direction: column; align-self: stretch; }
  .dfr-hero-cta .course_btn{ width: 100%; }
  .dfr-hero-lead{ font-size: 14px; }
  .dfr-hero--slider .hero_title{ font-size: 26px; }
}
/* Layar pendek (HP landscape): rapatkan agar remah roti, judul, dan ajakan tidak bertumpuk */
@media (max-height: 620px){
  .dfr-hero-chrome{ padding-top: calc(var(--dfr-header-top) + var(--dfr-header-h) + 24px); padding-bottom: 24px; }
  .dfr-hero--slider .hero_title{ font-size: 24px; }
  .dfr-hero-cta{ margin-top: 16px; }
}

/* ---------- Breakpoint konten (Bootstrap 4) ---------- */
@media (min-width: 576px){
  .dfr-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px){
  .dfr-rumpun{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dfr-panel{ padding: 24px; }
  .dfr-chart{ height: 380px; }
  .dfr-peta{ height: 460px; }
  .dfr-section .section_title h2{ font-size: 32px; }
  .dfr-meta{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px){
  .dfr-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dfr-col + .dfr-col{ margin-top: 0; }
  .dfr-detail{ grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .dfr-aside{ position: sticky; top: calc(var(--dfr-header-h) + 40px); align-self: start; } /* header .scrolled: top 15px */
}
/* Kartu pilar di bagian "Pilar lainnya" (maks. 3) */
@media (min-width: 992px){ .dfr-section--alt .dfr-cards:has(> .dfr-card:nth-child(3):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Poles responsif mobile ---------- */
.dfr-hero-lead, .dfr-prose, .dfr-meta dd{ overflow-wrap: anywhere; }
.dfr-relasi li > div, .dfr-aktivitas-head > strong{ min-width: 0; }
@media (max-width: 575px){
  .dfr-section{ padding-top: 44px; padding-bottom: 44px; }
  .dfr-cta{ padding: 40px 0; }
  .dfr-card-body{ padding: 16px; }
  :root{ --dfr-pita-w: 38px; --dfr-pita-h: 52px; }
  .dfr-rumpun-item{ padding: 18px calc(var(--dfr-pita-w) + 26px) 18px 16px; }
  .dfr-rumpun-pita{ right: 16px; padding-top: 10px; }
  .dfr-rumpun-pita .bi{ font-size: 19px; }
}

@media (prefers-reduced-motion: reduce){ .dfr-card{ transition: none; } }
[dir="rtl"] .dfr-crumbs li + li::before{ margin: 0 0 0 6px; }
[dir="rtl"] .dfr-aktivitas-item{ border-left: 1px solid var(--dfr-garis); border-right: 3px solid var(--aksen, var(--mbs-teal)); }