/* admin.css — Dashboard Pengurus Silambawiqri (tema TERANG, hijau + emas) */
:root{
  --hijau:#0b3d2c;--hijau2:#0f7a3d;--hijau3:#12945a;--emas:#c8a94a;--emas2:#e6cf85;
  --navy:#0b3d2c;--teks:#12211b;--redup:#5d6b64;--garis:#e3e9e5;--kertas:#f4f7f5;
  --radius:16px;--bayang:0 10px 26px rgba(11,61,44,.08);--lebar-sisi:252px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;background:var(--kertas);color:var(--teks);font-size:14.5px;line-height:1.5}
img{max-width:100%;display:block}
button{font-family:inherit}
[hidden]{display:none !important}
a{color:var(--hijau2);text-decoration:none}

/* ---------- login ---------- */
.masuk-admin{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#08281d,#0b3d2c 50%,#0f7a3d)}
.kartu-masuk{background:#fff;border-radius:20px;padding:24px;width:100%;max-width:400px;box-shadow:0 24px 54px rgba(0,0,0,.3);text-align:center}
.kartu-masuk .lambang{width:82px;height:82px;margin:0 auto 12px;background:#fff;padding:6px;border-radius:22px;object-fit:contain}
.kartu-masuk h1{font-size:21px;margin:0 0 4px}
.kartu-masuk .f{text-align:left;display:block;margin:14px 0 0;font-size:12.5px;font-weight:700;color:#40514a}
.kaki-masuk{color:#a9c8b8;font-size:12px;margin-top:18px}
.tautan{border:0;background:none;color:var(--hijau2);font-weight:700;font-size:13px;cursor:pointer}

/* ---------- kerangka ---------- */
#dash{display:flex;min-height:100vh;max-width:100%}
.sisi{
  width:var(--lebar-sisi);background:var(--navy);color:#fff;position:fixed;top:0;left:0;bottom:0;z-index:60;
  display:flex;flex-direction:column;height:100vh;overflow:hidden
}
.sisi-kepala{display:flex;gap:11px;align-items:center;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.1);flex:none}
.sisi-kepala img{width:42px;height:42px;border-radius:12px;background:#fff;padding:4px;object-fit:contain}
.sisi-nama{font-weight:800;letter-spacing:2px;font-size:14px}
.sisi-sub{font-size:11px;color:#a8c6b6}
.sisi-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 10px 14px}
.grup{margin-bottom:6px}
.grup-kepala{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;border:0;border-radius:11px;background:none;color:#dbe9e1;
  font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
.grup-kepala:hover{background:rgba(255,255,255,.08)}
.grup-kepala .panah{margin-left:auto;transition:transform .2s}
.grup.buka .grup-kepala{color:#fff}
.grup.buka .panah{transform:rotate(90deg)}
.grup-isi{display:none;padding:2px 0 4px 8px}
.grup.buka .grup-isi{display:block}
.item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;color:#cfe0d7;font-size:13.2px;cursor:pointer;
  border:0;background:none;width:100%;text-align:left}
.item:hover{background:rgba(255,255,255,.08);color:#fff}
.item.aktif{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.item svg,.grup-kepala svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.item .lencana{margin-left:auto;background:#dc2626;color:#fff;font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 7px}
.kaki{flex:none;display:flex;gap:8px;align-items:center;padding:12px;border-top:1px solid rgba(255,255,255,.1)}
.kaki-profil{flex:1;padding:10px 12px;border:0;border-radius:11px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.kaki-keluar{width:42px;height:42px;border-radius:11px;border:1px solid rgba(220,38,38,.5);background:rgba(220,38,38,.9);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none}
.kaki-keluar svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.utama{margin-left:var(--lebar-sisi);flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:11px;padding:11px 16px;background:var(--navy);color:#fff
}
.topbar-judul{font-size:16px;font-weight:700;white-space:nowrap}
.ikon-tombol{position:relative;width:38px;height:38px;border:0;border-radius:11px;background:rgba(255,255,255,.13);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none}
.ikon-tombol svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:#dc2626;color:#fff;font-size:10.5px;
  display:grid;place-items:center;padding:0 4px;font-weight:800}
.cari-topbar{position:relative;margin-left:auto;width:min(420px,42vw)}
.cari-input{width:100%;padding:10px 13px;border-radius:11px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.13);
  color:#fff;font-size:13.5px}
.cari-input::placeholder{color:#bcd3c6}
.cari-input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.2)}
.cari-hasil{position:absolute;top:46px;left:0;right:0;background:#fff;color:var(--teks);border-radius:14px;box-shadow:0 20px 44px rgba(0,0,0,.24);
  max-height:66vh;overflow:auto;padding:8px;z-index:70}
.cari-baris{padding:9px 11px;border-radius:10px;font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:9px}
.cari-baris:hover,.cari-baris.pilih{background:#eef7f1}
.cari-baris .jenis{margin-left:auto;font-size:11px;color:var(--redup)}
.topbar-notif{position:absolute;top:60px;right:16px;width:340px;background:#fff;color:var(--teks);border-radius:14px;
  box-shadow:0 20px 44px rgba(0,0,0,.22);padding:11px;max-height:64vh;overflow:auto;z-index:70}
.notif-item{border:1px solid var(--garis);border-radius:11px;padding:9px 11px;margin-bottom:7px}
.notif-item.baru{border-color:#bfe3cd;background:#f3fbf5}
.notif-item .nj{font-weight:700;font-size:13.2px}
.notif-item .ni{font-size:12.3px;color:var(--redup);margin-top:2px}
.notif-item .nw{font-size:11px;color:#93a09a;margin-top:5px}
.tirai-sisi{position:fixed;inset:0;background:rgba(4,20,14,.5);z-index:55}

/* ---------- konten ---------- */
.konten{flex:1;min-width:0}
.bungkus{width:100%;max-width:1760px;margin:0 auto;padding:16px 18px 40px}
.judul-bagian{font-size:19px;font-weight:800;margin:0 0 4px}
.sub-bagian{color:var(--redup);font-size:13px;margin:0 0 16px}
.kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);box-shadow:var(--bayang);padding:15px;margin-bottom:15px}
.kartu-judul{font-size:15px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.baris-kartu{display:grid;gap:15px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px;margin-bottom:15px}
.kpi-kotak{background:#fff;border:1px solid var(--garis);border-radius:15px;padding:13px 14px;box-shadow:var(--bayang)}
.kpi-kotak .label{font-size:11.5px;color:var(--redup);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.kpi-kotak .nilai{font-size:23px;font-weight:800;color:var(--gelap);margin-top:4px;line-height:1.15}
.kpi-kotak .kaki{font-size:11.5px;color:var(--hijau2);font-weight:600;margin-top:3px}
.dua-kolom{display:grid;grid-template-columns:1.35fr 1fr;gap:15px}
.tiga-kolom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}
@media(max-width:1180px){.dua-kolom,.tiga-kolom{grid-template-columns:1fr}}

/* grafik */
.grafik-bar{display:flex;align-items:flex-end;gap:10px;height:190px;padding:8px 4px 0}
.grafik-bar .kolom{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.grafik-bar .kolom i{width:100%;max-width:44px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,var(--hijau3),var(--hijau2));
  display:block;transition:height .4s ease;min-height:4px}
.grafik-bar .kolom span{font-size:11px;color:var(--redup)}
.grafik-bar .kolom b{font-size:12px;color:var(--gelap)}
.grafik-line svg{width:100%;height:170px;display:block}
.donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-lingkar{width:150px;height:150px;border-radius:50%;position:relative;flex:none}
.donut-lingkar::after{content:'';position:absolute;inset:28px;background:#fff;border-radius:50%}
.donut-lingkar span{position:absolute;inset:0;display:grid;place-items:center;z-index:2;font-weight:800;font-size:19px;color:var(--gelap)}
.legenda{flex:1;min-width:170px}
.legenda div{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
.legenda i{width:11px;height:11px;border-radius:3px;flex:none}

/* ikon dalam tombol (ukuran seragam, ikut warna teks) */
.tombol svg,.pesan svg,.kpi-kotak svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:7px}

/* tabel */
.tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tabel{width:100%;border-collapse:collapse;font-size:13.3px;min-width:640px}
table.tabel th{text-align:left;padding:10px 9px;color:var(--redup);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
  border-bottom:1.5px solid var(--garis);white-space:nowrap;cursor:pointer;user-select:none}
table.tabel th.tanpa-urut{cursor:default}
table.tabel th .arah{color:var(--hijau2)}
table.tabel td{padding:10px 9px;border-bottom:1px solid var(--garis);vertical-align:middle}
table.tabel tr:hover td{background:#fafcfb}
table.tabel img.thumb{width:44px;height:34px;border-radius:8px;object-fit:cover;background:#eef1ef}
table.tabel img.avatar{width:38px;height:38px;border-radius:11px;object-fit:cover;background:#eef1ef}
.aksi-baris{display:flex;gap:6px;flex-wrap:nowrap}
.ikon-aksi{width:31px;height:31px;border-radius:9px;border:1px solid var(--garis);background:#fff;display:grid;place-items:center;cursor:pointer}
.ikon-aksi svg{width:15px;height:15px;stroke:#41504a;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ikon-aksi.merah svg{stroke:#b91c1c}
.ikon-aksi.hijau svg{stroke:var(--hijau2)}
.ikon-aksi:hover{background:#f1f6f3}

/* kontrol daftar */
.kontrol{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:13px}
.kolom-teks{width:100%;padding:10px 12px;border:1.5px solid var(--garis);border-radius:11px;font-size:14px;background:#fbfcfb;font-family:inherit;color:var(--teks)}
.kolom-teks:focus{outline:none;border-color:var(--hijau2);background:#fff}
.kontrol .kolom-teks{max-width:280px}
select.pilih{padding:10px 12px;border:1.5px solid var(--garis);border-radius:11px;background:#fff;font-size:13.5px;color:var(--teks);max-width:220px}
label.f{display:block;margin-bottom:12px;font-size:12.5px;font-weight:700;color:#40514a}
.redup{color:var(--redup);font-size:12.6px}
.paginasi{display:flex;align-items:center;gap:9px;justify-content:flex-end;margin-top:12px;font-size:13px}
.tombol{border:0;border-radius:11px;padding:10px 15px;font-size:13.5px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--hijau2),var(--hijau3));color:#fff}
.tombol.putih{background:#fff;color:var(--hijau2);border:1.5px solid var(--hijau2)}
.tombol.abu{background:#eef1ef;color:#41504a}
.tombol.merah{background:#dc2626}
.tombol.kecil{padding:7px 11px;font-size:12.4px}
.tombol.penuh{width:100%}
.tombol:disabled{opacity:.6;cursor:default}
.tombol-baris{display:flex;gap:9px;flex-wrap:wrap}
.status{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;display:inline-block;text-transform:capitalize}
.status.aktif,.status.terbit,.status.disetujui{background:#e9f7ee;color:#0c5a30}
.status.menunggu{background:#fff7e6;color:#8a5a00}
.status.ditolak,.status.nonaktif,.status.draf{background:#f2f4f3;color:#5d6b64}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:#eef7f1;color:#0c5a30;border:1px solid #cbe8d6}
.tag.emas{background:#fdf6e3;color:#7a5c07;border-color:#f0e0b4}

/* ===== kepala dashboard mengikuti konsep gambar referensi ===== */
.hero-dash{margin:-16px -18px 0;padding:20px 18px 58px;border-radius:0 0 26px 26px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#08281d,#0b3d2c 48%,#0f7a3d);color:#fff}
.hero-dash::after{content:'';position:absolute;right:-50px;bottom:-70px;width:200px;height:200px;border-radius:50%;
  background:rgba(200,169,74,.13);pointer-events:none}
.hero-dash .hero-app{font-size:10.5px;font-weight:800;letter-spacing:2.1px;color:#e6cf85}
.hero-dash .hero-salam{font-size:12.5px;font-weight:600;color:#a9c9b8;margin-top:9px}
.hero-dash h1{margin:2px 0 0;font-size:22px;font-weight:800;color:#fff}
.hero-dash p{margin:5px 0 0;font-size:12px;color:#a9c9b8}
.kpi-tumpuk{margin-top:-40px;position:relative;z-index:3}
@media(max-width:980px){.hero-dash{margin:-14px -13px 0;padding:18px 14px 56px}}

/* modal & panel samping */
.tirai-modal{position:fixed;inset:0;z-index:96;background:rgba(4,20,14,.5);display:flex;align-items:center;justify-content:center;padding:18px}
.panel{background:#fff;border-radius:18px;width:100%;max-width:760px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.panel-isi{padding:18px;overflow:auto;flex:1;min-height:0}
.panel-kaki{flex:none;display:flex;gap:9px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--garis);background:#fbfcfb}
.panel h3{margin:0 0 12px;font-size:17px}
.tirai-panel{position:fixed;inset:0;z-index:97;background:rgba(4,20,14,.5);display:flex;justify-content:flex-end}
.panel-samping{background:#fff;width:min(560px,100%);height:100%;overflow:auto;padding:18px}

/* editor teks kaya */
.alat-editor{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.alat-editor button{width:33px;height:33px;border-radius:9px;border:1px solid var(--garis);background:#fff;cursor:pointer;font-weight:800;font-size:13px}
.editor{min-height:190px;border:1.5px solid var(--garis);border-radius:12px;padding:12px;background:#fbfcfb;font-size:14px;overflow:auto;font-family:inherit}
.editor:focus{outline:none;border-color:var(--hijau2);background:#fff}
.editor h3{margin:10px 0 6px}

/* unggah */
.unggah{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.unggah img{width:104px;height:74px;border-radius:12px;object-fit:cover;border:1px solid var(--garis);background:#eef1ef}
.grid-alat{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* toast */
.toast{position:fixed;right:18px;bottom:20px;z-index:99;background:#0b3d2c;color:#fff;padding:12px 17px;border-radius:12px;
  font-size:13.5px;box-shadow:0 16px 34px rgba(0,0,0,.28);max-width:80vw}
.toast.sukses{background:#0f7a3d}.toast.galat{background:#9b1c1c}
.kosong{text-align:center;padding:28px;color:var(--redup)}
.skeleton{height:14px;border-radius:8px;background:linear-gradient(90deg,#eef1ef 25%,#e3e8e5 37%,#eef1ef 63%);background-size:400% 100%;
  animation:kilau 1.3s ease infinite;margin-bottom:9px}
@keyframes kilau{0%{background-position:100% 0}100%{background-position:0 0}}
.hanya-hp{display:none}
.navbar-hp{display:none}

@media(max-width:980px){
  .sisi{transform:translateX(-102%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .sisi.buka{transform:none}
  .utama{margin-left:0}
  .hanya-hp{display:grid}
  .cari-topbar{width:auto;flex:1}
  .topbar-judul{display:none}
  .bungkus{padding:14px 13px 96px}
  .konten{padding-bottom:0}
  .navbar-hp{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:52;background:#fff;border-top:1px solid var(--garis);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -6px 20px rgba(11,61,44,.07)}
  .navbar-hp button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:#8a978f;font-size:10.5px}
  .navbar-hp button.aktif{color:var(--hijau2);font-weight:700}
  .navbar-hp button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
  .topbar-notif{right:10px;left:10px;width:auto}
  .panel{max-height:94vh}
}