/* Panel admin Prodi Teologi — STAK Arastamar Grimenawa */
:root {
  --biru: #9b1b3a; --biru-2: #7b3cc2; --navy: #2a0c38; --merah: #d7263d; --emas: #f4b400;
  --bg: #faf3f7; --kartu: #fff; --teks: #2a1330; --abu: #6e5a72; --garis: #f0e0ea;
  --bayang: 0 8px 24px -14px rgba(74, 23, 102, .35);
  --grad: linear-gradient(120deg, #8e1535, #b0213f 45%, #7b3cc2);
  --grad-hangat: linear-gradient(120deg, #6d2bb5, #b8237a 58%, #f08a2c);
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.6 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--teks); background: var(--bg); }
a { color: var(--biru-2); }
h1, h2 { margin: 0; line-height: 1.25; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.redup { color: var(--abu); }
.kecil { font-size: .84rem; }
.inline { display: inline; }

/* Kerangka */
.sisi { position: fixed; inset: 0 auto 0 0; width: 260px; background: var(--navy); color: #e6cde0; display: flex; flex-direction: column; z-index: 30; transition: transform .3s; }
.sisi-brand { display: flex; gap: 12px; align-items: center; padding: 20px; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sisi-brand img { background: #fff; border-radius: 50%; padding: 2px; }
.sisi-brand strong { display: block; font-size: 1rem; }
.sisi-brand small { color: var(--emas); font-weight: 700; font-size: .74rem; }
.sisi nav { padding: 14px 12px; display: grid; gap: 2px; overflow-y: auto; flex: 1; align-content: start; }
.sisi nav a { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; color: #e6cde0; text-decoration: none; font-weight: 600; font-size: .92rem; transition: .2s; }
.sisi nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sisi nav a.aktif { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(123, 60, 194, .9); }
.lencana { margin-left: auto; background: var(--merah); color: #fff; font-size: .72rem; border-radius: 99px; padding: 1px 8px; }
.sisi-bawah { padding: 14px 20px 20px; display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.sisi-bawah a { color: #e6cde0; text-decoration: none; font-size: .88rem; }
.sisi-bawah a:hover { color: var(--emas); }
.utama { margin-left: 260px; min-height: 100vh; display: flex; flex-direction: column; }
.atas { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis); display: flex; align-items: center; gap: 14px; padding: 14px 28px; }
.atas h1 { font-size: 1.25rem; }
.atas-kanan { margin-left: auto; }
.salam { color: var(--abu); font-size: .9rem; }
.menu-btn { display: none; border: 1px solid var(--garis); background: #fff; border-radius: 10px; width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; }
.isi { padding: 26px 28px 40px; flex: 1; width: 100%; max-width: 1200px; }
.kaki { padding: 16px 28px; color: var(--abu); font-size: .82rem; }
.sisi-latar { display: none; }
@media (max-width: 960px) {
  .sisi { transform: translateX(-100%); }
  body.sisi-buka .sisi { transform: none; }
  body.sisi-buka .sisi-latar { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
  .utama { margin-left: 0; }
  .menu-btn { display: block; }
  .isi, .atas { padding-left: 16px; padding-right: 16px; }
  .salam { display: none; }
}

/* Komponen */
.panel { background: var(--kartu); border: 1px solid var(--garis); border-radius: 16px; padding: 22px; box-shadow: var(--bayang); margin-bottom: 20px; }
.panel-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-kepala h2 { font-size: 1.05rem; }
.panel-kepala a { font-size: .88rem; font-weight: 600; text-decoration: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 11px; border: 1.5px solid var(--garis); background: #fff; color: var(--teks); font-weight: 700; font-size: .9rem; font-family: inherit; text-decoration: none; cursor: pointer; transition: .2s; }
.btn:hover { border-color: var(--biru-2); color: var(--biru-2); }
.btn-utama { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(123, 60, 194, .9); }
.btn-utama:hover { color: #fff; filter: brightness(1.07); }
.btn-bahaya { color: var(--merah); border-color: #f6c4cb; background: #fff; }
.btn-bahaya:hover { background: var(--merah); color: #fff; border-color: var(--merah); }
.btn-kecil { padding: 6px 12px; font-size: .8rem; border-radius: 9px; }
.btn-penuh { width: 100%; padding: 13px; }
.notif { padding: 13px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 600; font-size: .92rem; }
.notif-ok { background: #e3f7ec; color: #11683b; border: 1px solid #b5e6c9; }
.notif-gagal { background: #fde7ea; color: #9b1728; border: 1px solid #f6bcc5; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; background: #eef2fb; color: var(--abu); }
.tag-ok { background: #e3f7ec; color: #11683b; }
.kosong { text-align: center; color: var(--abu); padding: 30px; }
.bar-atas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sebaris { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.kartu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1000px) { .kartu-grid { grid-template-columns: repeat(2, 1fr); } }
.angka { border-radius: 16px; padding: 20px; color: #fff; text-decoration: none; background: var(--grad); box-shadow: var(--bayang); transition: transform .2s; }
.angka:hover { transform: translateY(-3px); }
.angka b { display: block; font-size: 2rem; line-height: 1.1; }
.angka span { opacity: .9; font-size: .88rem; }
.angka-merah { background: var(--grad-hangat); }
.angka-emas { background: linear-gradient(135deg, #f4b400, #ef7d00); }
.angka-navy { background: linear-gradient(135deg, #2a0c38, #9b1b3a); }
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .dua-kolom { grid-template-columns: 1fr; } }
.daftar-ringkas { list-style: none; margin: 0; padding: 0; }
.daftar-ringkas li { padding: 10px 0; border-bottom: 1px solid var(--garis); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.daftar-ringkas li:last-child { border: 0; }
.daftar-ringkas small { margin-left: auto; color: var(--abu); }
.daftar-ringkas li.baru { font-weight: 600; }
.daftar-ringkas li.baru::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--merah); }
.daftar-ringkas form { margin-left: auto; }
.aksi-cepat { display: flex; gap: 10px; flex-wrap: wrap; }

/* Formulir */
.formulir .baris { margin-bottom: 16px; }
.formulir label { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 6px; }
.formulir input:not([type=checkbox]):not([type=file]), .formulir textarea, .formulir select, .bar-atas select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--garis); border-radius: 11px; font-weight: 500; font-size: .93rem; font-family: inherit; color: var(--teks); background: #fff;
}
.bar-atas select { width: auto; }
.formulir input:focus, .formulir textarea:focus, .formulir select:focus { outline: none; border-color: var(--biru-2); box-shadow: 0 0 0 4px rgba(123, 60, 194, .14); }
.formulir textarea { resize: vertical; }
.formulir input[type=file] { font-size: .88rem; }
.bantu { display: block; color: var(--abu); font-size: .8rem; margin-top: 5px; }
.cek { display: inline-flex !important; gap: 8px; align-items: center; font-weight: 600 !important; cursor: pointer; margin-top: 6px; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid-form .penuh { grid-column: 1 / -1; }
@media (max-width: 700px) { .grid-form { grid-template-columns: 1fr; } }
.aksi-form { padding-top: 8px; border-top: 1px solid var(--garis); margin-top: 8px; }
.tab { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab a { padding: 9px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--garis); text-decoration: none; color: var(--teks); font-weight: 600; font-size: .88rem; }
.tab a.on { background: var(--grad); color: #fff; border-color: transparent; }
.unggah { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pratinjau { width: 110px; height: 136px; object-fit: cover; border-radius: 12px; border: 1px solid var(--garis); margin-top: 8px; }
.pratinjau.lebar { width: 220px; height: 124px; }
.pratinjau.bulat { width: 96px; height: 96px; border-radius: 50%; }
.editor-box { min-height: 280px; background: #fff; font-size: 15px; }
.ql-toolbar.ql-snow { border-radius: 11px 11px 0 0; border-color: var(--garis) !important; }
.ql-container.ql-snow { border-radius: 0 0 11px 11px; border-color: var(--garis) !important; font-family: inherit !important; font-size: 15px !important; }

/* Tabel */
.tabel-bungkus { padding: 0; overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th { text-align: left; padding: 13px 16px; background: #fcf6f9; color: var(--abu); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--garis); }
.tabel td { padding: 13px 16px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tr:hover td { background: #fdf7fa; }
.tabel .aksi { white-space: nowrap; text-align: right; }
.tabel .aksi > * { margin-left: 4px; }
.dengan-gbr { display: flex; gap: 12px; align-items: center; }
.dengan-gbr img { width: 56px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.dengan-gbr img.bulat { width: 40px; border-radius: 50%; }

.slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.slide-item { padding: 0; overflow: hidden; }
.slide-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.slide-item form { padding: 14px 16px 0; display: grid; gap: 8px; }
.slide-item > form.inline { display: block; padding: 0 16px 16px; }

.pesan-daftar .pesan { padding: 0; overflow: hidden; margin-bottom: 10px; }
.pesan-kepala { display: grid; grid-template-columns: 180px 1fr auto; gap: 14px; padding: 15px 20px; text-decoration: none; color: var(--teks); align-items: center; }
.pesan-kepala span { color: var(--abu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pesan-kepala small { color: var(--abu); }
.pesan.baru { border-left: 4px solid var(--merah); }
.pesan.baru .pesan-kepala strong, .pesan.baru .pesan-kepala span { color: var(--teks); font-weight: 700; }
.pesan-isi { padding: 0 20px 18px; border-top: 1px solid var(--garis); padding-top: 14px; }
@media (max-width: 640px) { .pesan-kepala { grid-template-columns: 1fr; gap: 2px; } }

/* Login */
.hal-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(700px 400px at 90% 0%, rgba(244,180,0,.25), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(215,38,61,.3), transparent 60%), linear-gradient(120deg, #2a0c38, #9b1b3a); }
.login-kotak { width: min(900px, 100%); display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.login-sisi { background: var(--grad); color: #fff; padding: 44px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-sisi img { background: #fff; border-radius: 50%; padding: 5px; margin-bottom: 18px; }
.login-sisi h2 { font-size: 1.35rem; }
.login-sisi p { color: #f3dbe8; margin: 6px 0 22px; font-size: .92rem; }
.login-sisi q { font-style: italic; color: #fff; font-size: .95rem; }
.login-sisi small { color: var(--emas); font-weight: 700; margin-top: 6px; }
.login-form { padding: 44px 38px; display: grid; gap: 14px; align-content: center; }
.login-form h1 { font-size: 1.6rem; }
.login-form label { display: grid; gap: 6px; font-weight: 700; font-size: .86rem; }
.login-form input { padding: 12px 14px; border: 1.5px solid var(--garis); border-radius: 11px; font-weight: 500; font-size: .95rem; font-family: inherit; }
.login-form input:focus { outline: none; border-color: var(--biru-2); box-shadow: 0 0 0 4px rgba(123, 60, 194, .14); }
.login-form .notif { margin: 0; }
@media (max-width: 720px) { .login-kotak { grid-template-columns: 1fr; } .login-sisi { padding: 28px; } .login-sisi p, .login-sisi q, .login-sisi small { display: none; } }

/* Tautan dokumen */
.salin-baris { display: flex; gap: 8px; }
.salin-baris input { flex: 1; }
.input-tautan { width: 100%; padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: 9px; font: 500 .82rem/1.3 ui-monospace, Consolas, monospace; color: var(--biru); background: #fcf6f9; }
.tag-sembunyi { background: #fff4d6; color: #8a5a00; }
.btn.tersalin { background: #e3f7ec; color: #11683b; border-color: #b5e6c9; }