/* Portal web kampus (bagian 34db): gaya konten teks kaya, bagan organisasi, dan penyesuaian kecil di luar Tailwind. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ---------- Isi teks kaya (hasil editor Admin Website; sudah disaring di server) ---------- */
.prose-portal { color: #26323f; line-height: 1.75; font-size: 1.0625rem; max-width: 68ch; }
.prose-portal > * + * { margin-top: 1rem; }
.prose-portal h2 { font-family: 'Bricolage Grotesque', Sora, sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin-top: 2rem; color: #112440; }
.prose-portal h3 { font-family: 'Bricolage Grotesque', Sora, sans-serif; font-weight: 700; font-size: 1.25rem; margin-top: 1.5rem; color: #112440; }
.prose-portal h4 { font-weight: 600; margin-top: 1.25rem; color: #112440; }
.prose-portal ul { list-style: disc; padding-left: 1.4rem; }
.prose-portal ol { list-style: decimal; padding-left: 1.4rem; }
.prose-portal li + li { margin-top: .35rem; }
.prose-portal li::marker { color: #F5821F; }
.prose-portal a { color: #2E5384; text-decoration: underline; text-underline-offset: 3px; }
.prose-portal a:hover { color: #D96A0B; }
.prose-portal blockquote { border-left: 4px solid #F5821F; padding: .25rem 0 .25rem 1rem; color: #3d4b5c; font-style: italic; }
.prose-portal hr { border: 0; border-top: 1px solid #dde4ee; margin: 1.75rem 0; }
.prose-portal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose-portal th, .prose-portal td { border: 1px solid #dde4ee; padding: .5rem .7rem; text-align: left; vertical-align: top; }
.prose-portal th { background: #E6ECF3; font-weight: 600; }
.prose-portal-lebar { max-width: none; }

/* ---------- Bagan struktur organisasi (mendatar: atasan di kiri, bawahan di kanan; cabang dapat dilipat) ---------- */
.bagan-papan { border: 1px solid #dbe4ef; border-radius: 1rem; background: radial-gradient(circle at 1px 1px, #cfd9e6 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(180deg, #f6f9fc, #eef3f9); overflow: hidden; }
.bagan-alat { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: rgba(255,255,255,.75); border-bottom: 1px solid #dbe4ef; backdrop-filter: blur(4px); }
.bagan-tombol { padding: .35rem .8rem; font-size: .75rem; font-weight: 600; border: 1px solid #cfd9e6; border-radius: 9999px; background: #fff; color: #112440; cursor: pointer; }
.bagan-tombol:hover { border-color: #F5821F; color: #b85a0a; }
.bagan { --garis: #aebed3; --jarak: 1.25rem; overflow-x: auto; padding: 1.25rem 1.25rem 1.5rem; }
.bagan ul { list-style: none; margin: 0; padding: 0; }
.bagan > ul { width: max-content; margin: 0 auto; }
.bagan li { position: relative; display: flex; align-items: center; padding: .28rem 0 .28rem var(--jarak); }
.bagan > ul > li { padding-left: 0; }
.bagan li::before { content: ''; position: absolute; left: 0; top: 50%; width: var(--jarak); border-top: 2px solid var(--garis); }
.bagan li::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--garis); }
.bagan li:first-child::after { top: 50%; border-top-left-radius: 8px; }
.bagan li:last-child::after { bottom: 50%; }
.bagan li:only-child::after, .bagan li:only-child::before { display: none; }
.bagan li:only-child { padding-left: 0; }
.bagan > ul > li::before, .bagan > ul > li::after { display: none; }
.bagan li > ul { position: relative; margin-left: var(--jarak); }
.bagan li > ul::before { content: ''; position: absolute; left: calc(-1 * var(--jarak)); top: 50%; width: var(--jarak); border-top: 2px solid var(--garis); }
.bagan li.tutup > ul { display: none; }
.bagan .simpul { --acc: #F5821F; position: relative; flex: none; width: 9.2rem; text-align: left; background: #fff; border: 1px solid #d3deeb; border-left: 5px solid var(--acc); border-radius: .65rem; padding: .55rem 1.2rem .55rem .7rem; box-shadow: 0 1px 2px rgba(17,36,64,.06); transition: box-shadow .15s, transform .15s; }
.bagan .simpul:hover { box-shadow: 0 8px 18px -8px rgba(17,36,64,.35); transform: translateY(-1px); }
.bagan .t0 > .simpul { --acc: #F5821F; background: #112440; border-color: #112440; color: #fff; width: 9.2rem; }
.bagan .t1 > .simpul { --acc: #F5821F; }
.bagan .t2 > .simpul { --acc: #0E9F8E; }
.bagan .t3 > .simpul { --acc: #3B82C4; }
.bagan .t4 > .simpul { --acc: #7C5CC4; }
.bagan .t5 > .simpul { --acc: #C2548A; }
.bagan .simpul .jabatan { font-weight: 700; font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; }
.bagan .simpul .nama { font-size: .72rem; line-height: 1.3; color: #5a6b80; margin-top: .2rem; overflow-wrap: anywhere; }
.bagan .t0 > .simpul .nama { color: rgba(255,255,255,.78); }
.bagan .simpul img { width: 2.6rem; height: 2.6rem; border-radius: 9999px; object-fit: cover; margin: 0 0 .4rem; border: 2px solid #E6ECF3; }
.bagan .lipat { position: absolute; right: -.75rem; top: 50%; transform: translateY(-50%); z-index: 2; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 9999px; border: 2px solid var(--garis); background: #fff; color: #112440; font-size: .7rem; font-weight: 700; line-height: 1; cursor: pointer; }
.bagan .lipat:hover, .bagan .lipat:focus-visible { border-color: #F5821F; outline: none; }
@media (max-width: 767px) {
  .bagan-papan { background: #f6f9fc; }
  .bagan { padding: 1rem .75rem 1.25rem; }
  .bagan > ul { width: auto; }
  .bagan li { display: block; padding: .35rem 0 0 0; }
  .bagan li::before, .bagan li::after, .bagan li > ul::before { display: none !important; }
  .bagan li > ul { margin: 0 0 0 .8rem; padding-left: .9rem; border-left: 2px solid var(--garis); }
  .bagan .simpul, .bagan .t0 > .simpul { width: auto; }
  .bagan .lipat { right: .5rem; }
}
@media print { .bagan-alat { display: none; } .bagan { overflow: visible; } .bagan li.tutup > ul { display: block; } }

/* ---------- Tabel sebaran mata kuliah: cetak rapi ---------- */
@media print { header, footer, .tanpa-cetak { display: none !important; } body { background: #fff; } }

/* ---------- Grafik website prodi (34dn): warna kategorikal berurutan tetap, batang tipis, ujung data membulat ---------- */
.viz { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4; --viz-6: #008300; }
.viz-bar-v { background: var(--viz-1); max-width: 24px; border-radius: 4px 4px 0 0; transition: filter .15s; }
.viz-bar-h { height: 16px; max-width: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; transition: filter .15s; }
.viz-seg:first-child { border-radius: 4px 0 0 4px; }
.viz-seg:last-child { border-radius: 0 4px 4px 0; }
.viz-seg:only-child { border-radius: 4px; }
.viz [title]:hover .viz-bar-v, .viz [title]:focus-visible .viz-bar-v, .viz [title]:hover .viz-bar-h, .viz [title]:focus-visible .viz-bar-h { filter: brightness(.88); }
.viz .viz-seg:hover, .viz .viz-seg:focus-visible { filter: brightness(.9); }
.viz [tabindex]:focus-visible { outline: 2px solid #2E5384; outline-offset: 2px; border-radius: 4px; }
@media (forced-colors: active) { .viz-bar-v, .viz-bar-h, .viz-seg { forced-color-adjust: none; border: 1px solid CanvasText; } }