html, body { margin: 0; padding: 0; }
body { overscroll-behavior: none; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; }
.tnum { font-variant-numeric: tabular-nums; }
select { -webkit-appearance: none; appearance: none; }
textarea { resize: vertical; }
.field { width: 100%; height: 2.5rem; padding: 0 .75rem; background: #eff4ff; color: #0b1c30; border-radius: .25rem; outline: none; font-size: 14px; border: 1px solid transparent; transition: all .15s; }
.field:focus { background: #fff; border-color: #006a61; box-shadow: 0 0 0 3px rgba(13,148,136,.15); }
.field[readonly], .field:disabled { background: #e5eeff; color: #43474d; }
textarea.field { height: auto; padding: .75rem; line-height: 1.6; }
.field-error { border-color: #ba1a1a; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; border-radius: .25rem; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; line-height: 16px; transition: all .15s; cursor: pointer; white-space: nowrap; }
.btn-primary { background: #00162d; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-primary:hover { background: #0f2b48; }
.btn-secondary { background: #006a61; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-secondary:hover { background: #006f66; opacity: .95; }
.btn-outline { background: #e5eeff; color: #0b1c30; }
.btn-outline:hover { background: #dce9ff; }
.btn-ghost { background: transparent; color: #43474d; }
.btn-ghost:hover { background: #e5eeff; }
.btn-danger { background: #ba1a1a; color: #fff; }
.btn-danger:hover { opacity: .9; }
.btn-sm { padding: .25rem .625rem; font-size: 11px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: 2px 8px; border-radius: .25rem; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; line-height: 14px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.card { background: #fff; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.label { font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; line-height: 14px; text-transform: uppercase; letter-spacing: .04em; color: #43474d; }
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,22,45,.4); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal.open { display: flex; }
.modal-box { background: #fff; width: 100%; max-width: 42rem; border-radius: .75rem; box-shadow: 0 20px 25px -5px rgba(15,23,42,.12), 0 8px 10px -6px rgba(15,23,42,.06); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-height: 92vh; overflow-y: auto; }
.table-dense th { padding: .5rem .75rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #0b1c30; background: #dce9ff; text-align: left; }
.table-dense td { padding: .75rem; vertical-align: top; border-bottom: 1px solid #eff4ff; }
.table-dense tr:hover td { background: #f8f9ff; }
.ring-active { box-shadow: 0 0 0 2px #006a61; }
.prose-tl p { margin: 0 0 .5rem; }
@media (max-width: 767px) { .table-cards thead { display: none; } .table-cards tr { display: block; margin-bottom: .75rem; background: #fff; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .table-cards td { display: block; border: 0; padding: .5rem .75rem; } .table-cards td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #74777e; margin-bottom: 2px; } }
/* Sidebar mini (menu diminimalkan, hanya ikon) — berlaku di desktop (>= lg) */
#sidebar { transition: transform .2s ease, width .2s ease; }
#layout-utama { transition: padding-left .2s ease; }
#topbar { transition: left .2s ease; }
.sidebar-mini-btn .ikon-buka { display: none; }
@media (min-width: 1024px) {
  html.sidebar-mini #sidebar { width: 4.5rem; }
  html.sidebar-mini #layout-utama { padding-left: 4.5rem; }
  html.sidebar-mini #topbar { left: 4.5rem; }
  html.sidebar-mini .sidebar-teks, html.sidebar-mini .sidebar-bawah { display: none; }
  html.sidebar-mini .sidebar-brand { flex-direction: column; padding-left: 0; padding-right: 0; gap: .75rem; }
  html.sidebar-mini .sidebar-brand .sidebar-mini-btn { margin-left: 0; }
  html.sidebar-mini .sidebar-seksi { font-size: 0; line-height: 0; height: 1px; padding: 0; margin: .5rem .75rem .75rem; background: #dce9ff; }
  html.sidebar-mini #sidebar nav a { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sidebar-mini #sidebar nav a > .material-symbols-outlined { font-size: 22px; }
  html.sidebar-mini .sidebar-mini-btn .ikon-tutup { display: none; }
  html.sidebar-mini .sidebar-mini-btn .ikon-buka { display: inline-block; }
}
@media print { aside, header, .no-print { display: none !important; } .lg\:pl-72 { padding-left: 0 !important; } main { padding-top: 0 !important; } }

/* Editor teks kaya (CKEditor 5) pada form butir — menyatu dengan gaya .field */
.ck.ck-editor { width: 100%; }
.ck.ck-editor__main > .ck-editor__editable { background: #eff4ff; color: #0b1c30; font-size: 14px; line-height: 1.6; min-height: 7.5rem; border-color: transparent; border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; }
.ck.ck-editor__main > .ck-editor__editable.ck-focused { background: #fff; border-color: #006a61 !important; box-shadow: 0 0 0 3px rgba(13,148,136,.15) !important; }
.ck.ck-editor__main > .ck-editor__editable.ck-read-only { background: #e5eeff; color: #43474d; }
#wrap-isi .ck.ck-editor__main > .ck-editor__editable { min-height: 13rem; }
.ck.ck-toolbar { border-color: #dce9ff; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background: #f8f9ff; }
.ck.ck-content, .teks-kaya { font-size: 14px; line-height: 1.6; }
.ck.ck-content p, .teks-kaya p { margin: 0 0 .5rem; }
.ck.ck-content h2, .teks-kaya h2 { font-size: 1.15em; font-weight: 700; margin: .75rem 0 .35rem; }
.ck.ck-content h3, .teks-kaya h3 { font-size: 1.05em; font-weight: 700; margin: .6rem 0 .3rem; }
.ck.ck-content h4, .teks-kaya h4 { font-size: 1em; font-weight: 700; margin: .5rem 0 .25rem; }
.ck.ck-content ul, .teks-kaya ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 .5rem; }
.ck.ck-content ol, .teks-kaya ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 .5rem; }
.ck.ck-content blockquote, .teks-kaya blockquote { border-left: 3px solid #b8c8e8; padding-left: .75rem; color: #43474d; font-style: italic; margin: .5rem 0; }
.ck.ck-content table, .teks-kaya table { border-collapse: collapse; margin: .5rem 0; width: 100%; }
.ck.ck-content td, .ck.ck-content th, .teks-kaya td, .teks-kaya th { border: 1px solid #b8c8e8; padding: .25rem .5rem; vertical-align: top; }
.ck.ck-content th, .teks-kaya th { background: #dce9ff; font-weight: 600; }
.teks-kaya a { color: #006a61; text-decoration: underline; }
.teks-kaya > :last-child { margin-bottom: 0; }