* { font-family: 'Inter', sans-serif; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body { overflow-x: hidden; }
body {
  background-color: #f4f7f6;
  background-image:
    radial-gradient(1200px 520px at 0% -10%, rgb(38 151 124 / 0.07), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgb(217 160 46 / 0.05), transparent 55%);
  background-attachment: fixed;
}

/* ---------- Sidebar ---------- */
.sidebar-item { transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
.sidebar-item:hover { background: #f1f5f4; }
.sidebar-item.active {
  background: linear-gradient(90deg, #d7f2e7 0%, #effaf6 100%);
  box-shadow: inset 3px 0 0 #187a65;
}

/* ---------- Kartu ----------
   Kartu putih ber-border di seluruh view mendapat bayangan lembut berlapis
   & border lebih tipis -- tanpa mengubah markup tiap view. */
.bg-white.border:is(.rounded-xl, .rounded-2xl, .rounded-lg) {
  border-color: rgb(226 232 240 / 0.85);
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 6px 18px -8px rgb(15 23 42 / 0.08);
}
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 2px 4px -1px rgb(15 23 42 / 0.05), 0 14px 28px -10px rgb(15 23 42 / 0.16); }

/* ---------- Tombol ---------- */
button, a, [role="button"], input, select, textarea {
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease, filter 0.16s ease;
}
/* Tombol utama: gradien zamrud + bayangan berwarna. */
:is(button, a).bg-green-700 {
  background-image: linear-gradient(135deg, #187a65 0%, #136354 60%, #124f44 100%);
  box-shadow: 0 1px 2px rgb(18 79 68 / 0.25), 0 6px 14px -6px rgb(19 99 84 / 0.55);
}
:is(button, a).bg-green-700:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 1px 2px rgb(18 79 68 / 0.25), 0 10px 20px -8px rgb(19 99 84 / 0.6); }
:is(button, a).bg-red-600 { box-shadow: 0 6px 14px -8px rgb(220 38 38 / 0.6); }
:is(button, [role="button"]):active:not(:disabled) { transform: scale(0.98); }
button:disabled { cursor: not-allowed; }

/* ---------- Form ---------- */
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea) {
  background-color: #ffffff;
}
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea):hover:not(:focus, :disabled) {
  border-color: #b4c2d0;
}
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea):focus {
  outline: none;
  border-color: #26977c;
  box-shadow: 0 0 0 4px rgb(38 151 124 / 0.16);
}
input[type="checkbox"], input[type="radio"] { accent-color: #187a65; }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem; padding: 0.45rem 0.9rem; border: 1px solid #e2e8f0; border-radius: 0.6rem;
  background: #f8fafc; color: #334155; font-weight: 500; cursor: pointer; transition: background-color 0.16s ease;
}
input[type="file"]::file-selector-button:hover { background: #effaf6; border-color: #b1e4d2; }

/* ---------- Tabel ---------- */
table thead th {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b;
}
thead.bg-gray-50 { background: #f6f9f8; }
thead.bg-gray-50 tr > th:first-child { border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; }
thead.bg-gray-50 tr > th:last-child { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
table tbody tr { transition: background-color 0.14s ease; }
table tbody tr:hover { background-color: #f6faf9; }

/* ---------- Beranda ---------- */
.landing-hero {
  background-color: #0b3d35;
  background-image:
    radial-gradient(700px 380px at 85% 15%, rgb(217 160 46 / 0.20), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgb(72 179 150 / 0.28), transparent 60%),
    linear-gradient(135deg, #082622 0%, #124f44 48%, #187a65 100%);
}

/* ---------- Modal & toast ---------- */
.modal-overlay { background: rgb(8 38 34 / 0.45); backdrop-filter: blur(6px); }
#modalContent { animation: modalMasuk 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes modalMasuk { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.toast-msg { animation: fadeIn 0.2s ease-out; border-radius: 0.875rem; box-shadow: 0 12px 28px -10px rgb(15 23 42 / 0.35); }

.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }

/* ---------- Lain-lain ---------- */
.chat-bubble-sent { background: linear-gradient(135deg, #187a65, #136354); color: white; border-bottom-right-radius: 4px; }
.chat-bubble-received { background: #e9eef3; color: #1e293b; border-bottom-left-radius: 4px; }
.att-hadir { background: #d7f2e7; border-color: #26977c; color: #11413a; }
.att-sakit { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.att-izin { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.att-alpha { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.att-terlambat { background: #ffedd5; border-color: #f97316; color: #9a3412; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 16px; }
.video-container iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }
.pdf-frame { width: 100%; height: 75vh; border: 1px solid #e2e8f0; border-radius: 16px; background: white; }
::selection { background: #b1e4d2; color: #082622; }

/* Fokus keyboard yg selalu terlihat. Input/select/textarea punya cincin
   fokus sendiri (di atas), jadi cuma kontrol lain yg diberi outline di sini. */
:where(button, a, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid #187a65;
  outline-offset: 2px;
}
.landing-hero :where(button, a):focus-visible { outline-color: #ffffff; }
#modalContent:focus { outline: none; }
button:not(:disabled), [role="button"] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card-hover:hover { transform: none; }
  :is(button, [role="button"]):active:not(:disabled) { transform: none; }
}

/* ── Pilihan yang bisa dicari (js/pilihCari.js) ───────────────────────── */
select.pc-asli {
  position: absolute !important; opacity: 0 !important; pointer-events: none !important;
  width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden;
}
.pc-tombol {
  display: flex !important; align-items: center; justify-content: space-between; gap: .5rem;
  text-align: left; background-color: #fff; cursor: pointer; min-height: 2.25rem;
}
.pc-tombol[hidden] { display: none !important; }
.pc-tombol:disabled { background-color: #f9fafb; color: #9ca3af; cursor: not-allowed; }
.pc-tombol .pc-teks { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tombol .pc-panah { font-size: .7rem; color: #6b7280; }
.pc-tombol.pc-placeholder .pc-teks { color: #9ca3af; }
.pc-tombol.pc-invalid, .is-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, .15); background-color: #fef2f2; }
.pc-panel {
  position: fixed; z-index: 9999; background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14); overflow: hidden; display: flex; flex-direction: column; max-height: 320px;
}
.pc-cari { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid #f3f4f6; color: #9ca3af; }
.pc-cari input { flex: 1; border: 0; outline: none; font-size: .875rem; color: #111827; background: transparent; }
.pc-daftar { list-style: none; margin: 0; padding: .25rem; overflow-y: auto; }
.pc-opsi { padding: .45rem .65rem; border-radius: .5rem; font-size: .875rem; color: #1f2937; cursor: pointer; }
.pc-opsi.pc-sorot { background: #f0fdf4; color: #14532d; }
.pc-opsi.pc-pilih { font-weight: 600; color: #15803d; }
.pc-opsi.pc-kosongan { color: #6b7280; }
.pc-opsi.pc-mati { color: #d1d5db; cursor: not-allowed; }
.pc-grup { padding: .4rem .65rem .2rem; font-size: .7rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.pc-kosong { padding: .75rem; font-size: .8rem; color: #9ca3af; text-align: center; }
.galat-kolom { color: #dc2626; font-size: .75rem; margin-top: .25rem; }

/* ── Gambar artikel utuh (poin 18) ───────────────────────────────────── */
.thumb-utuh { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f3f4f6; }
.thumb-utuh .thumb-latar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.85); transform: scale(1.15); }
.thumb-utuh .thumb-isi { position: relative; width: 100%; height: 100%; object-fit: contain; }
.gambar-utuh { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; background: #f3f4f6; border-radius: .75rem; }

/* ── Konten artikel (poin 17) ───────────────────────────────────────── */
.konten-artikel { font-size: .95rem; line-height: 1.75; color: #374151; overflow-wrap: anywhere; }
.konten-artikel h1 { font-size: 1.6rem; font-weight: 700; color: #111827; margin: 1.2em 0 .5em; line-height: 1.3; }
.konten-artikel h2 { font-size: 1.3rem; font-weight: 700; color: #111827; margin: 1.1em 0 .45em; line-height: 1.35; }
.konten-artikel h3 { font-size: 1.1rem; font-weight: 600; color: #111827; margin: 1em 0 .4em; }
.konten-artikel p, .konten-artikel div { margin: 0 0 .75em; }
.konten-artikel ul { list-style: disc; padding-left: 1.5em; margin: 0 0 .75em; }
.konten-artikel ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 .75em; }
.konten-artikel blockquote { border-left: 4px solid #15803d; background: #f0fdf4; padding: .6em 1em; margin: 0 0 .75em; border-radius: 0 .5rem .5rem 0; color: #14532d; }
.konten-artikel a { color: #1d4ed8; text-decoration: underline; }
.konten-artikel img { max-width: 100%; height: auto; border-radius: .5rem; }
.konten-artikel i.fas { color: #15803d; }

/* ── Editor artikel ─────────────────────────────────────────────────── */
.editor-artikel { border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; background: #fff; }
.editor-artikel.is-invalid { border-color: #dc2626; }
.editor-alat { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .4rem; border-bottom: 1px solid #e5e7eb; background: #f9fafb; position: sticky; top: 0; z-index: 1; }
.editor-alat select { padding: .25rem .4rem; border: 1px solid #e5e7eb; border-radius: .375rem; font-size: .8rem; background: #fff; }
.editor-alat button { min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: .375rem; font-size: .8rem; color: #374151; }
.editor-alat button:hover, .editor-alat button[aria-pressed="true"] { background: #e5e7eb; }
.editor-alat .pemisah { width: 1px; height: 1.4rem; background: #e5e7eb; margin: 0 .2rem; }
.editor-alat input[type="color"] { width: 2rem; height: 2rem; border: 0; background: transparent; padding: 0; cursor: pointer; }
.editor-isi { min-height: 260px; max-height: 60vh; overflow-y: auto; padding: 1rem; outline: none; }
.editor-isi:empty::before { content: attr(data-placeholder); color: #9ca3af; }
.editor-ikon { position: absolute; z-index: 50; background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: .5rem; display: grid; grid-template-columns: repeat(8, 2.1rem); gap: .2rem; }
.editor-ikon button { height: 2.1rem; border-radius: .4rem; color: #15803d; font-size: 1rem; }
.editor-ikon button:hover { background: #f0fdf4; }