/* =========================================================
   PANEL CMS MUHAMMADIYAH DEMAK — gaya panel.
   Memakai token dari style.css (dimuat lebih dulu); warna merek tetap:
   navy #1a2a75/#233e97 · hijau #149047/#079c4e · aksen oranye #dd9933.
   Nama kelas lama dipertahankan agar semua halaman panel ikut tampil baru.
   ========================================================= */

.panel-app{
  --p-sisi:#141f5c; --p-sisi-2:#1a2a75; --p-sisi-teks:#c9d2f3; --p-sisi-redup:#8a97c7;
  --p-aksen:#dd9933; --p-kanvas:#f3f5fa; --p-kartu:#fff; --p-garis:#e6e9f2; --p-garis-2:#d7dcea;
  --p-bayang:0 1px 2px rgba(16,26,51,.04),0 4px 14px rgba(16,26,51,.05);
  --p-bayang-2:0 10px 30px rgba(16,26,51,.10);
  --gr-1:#3355c4; --gr-2:#149047; --gr-grid:#e8ebf3; --gr-teks:#6b7592;
  --r-p:12px;
  display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;background:var(--p-kanvas);color:var(--text)
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .panel-app{
    --p-sisi:#0d1330; --p-sisi-2:#141b3f; --p-kanvas:#0b1020; --p-kartu:#141b33; --p-garis:#26304f; --p-garis-2:#36426a;
    --p-bayang:0 1px 2px rgba(0,0,0,.3); --p-bayang-2:0 10px 30px rgba(0,0,0,.45);
    --gr-1:#5b7ee6; --gr-2:#22a05a; --gr-grid:#26304f; --gr-teks:#98a3c7;
  }
}

/* ---------- sidebar ---------- */
.sisi-panel{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--p-sisi-2),var(--p-sisi));
  color:var(--p-sisi-teks);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;z-index:50}
.sisi-panel__merek{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.sisi-panel__merek:hover{text-decoration:none;color:#fff}
.sisi-panel__merek img{width:34px;height:auto}
.sisi-panel__merek b{display:block;font:700 .98rem/1.2 var(--font-head)}
.sisi-panel__merek small{display:block;font-size:.72rem;color:var(--p-sisi-redup)}
.sisi-panel__nav{flex:1;padding:.6rem .7rem}
.sisi-panel__kelompok{padding:.35rem 0}
.sisi-panel__kelompok+.sisi-panel__kelompok{margin-top:.2rem}
.sisi-panel__judul{display:block;padding:.55rem .75rem .35rem;font:600 .66rem var(--font-head);text-transform:uppercase;letter-spacing:.1em;color:var(--p-sisi-redup)}
.sisi-panel__item{position:relative;display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:9px;
  color:var(--p-sisi-teks);font:500 .86rem var(--font-head);transition:background .15s,color .15s}
.sisi-panel__item svg{width:17px;height:17px;opacity:.85}
.sisi-panel__item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sisi-panel__item.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.sisi-panel__item.on::before{content:"";position:absolute;left:-.7rem;top:.45rem;bottom:.45rem;width:3px;border-radius:0 3px 3px 0;background:var(--p-aksen)}
.sisi-panel__item.on svg{opacity:1;color:var(--p-aksen)}
.sisi-panel__kaki{padding:.6rem .7rem .9rem;border-top:1px solid rgba(255,255,255,.08)}

/* ---------- bilah atas ---------- */
.panel-utama{min-width:0;display:flex;flex-direction:column}
.pbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.8rem;min-height:62px;padding:.55rem 1.5rem;
  background:color-mix(in srgb,var(--p-kartu) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--p-garis)}
.pbar__menu{display:none;place-items:center;width:38px;height:38px;border:1px solid var(--p-garis);border-radius:9px;background:var(--p-kartu);color:var(--text);cursor:pointer}
.pbar__remah{display:flex;align-items:center;gap:.45rem;min-width:0;font:500 .85rem var(--font-head);color:var(--muted);white-space:nowrap;overflow:hidden}
.pbar__remah a{color:var(--muted)}
.pbar__remah b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.pbar__kanan{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.pbar__tbl{display:inline-flex;align-items:center;gap:.45rem;height:38px;padding:0 .85rem;border:1px solid var(--p-garis);border-radius:9px;
  background:var(--p-kartu);color:var(--text-2);font:600 .82rem var(--font-head);cursor:pointer}
.pbar__tbl:hover{border-color:var(--brand-600);color:var(--brand-600);text-decoration:none}
.pbar__tbl svg{width:16px;height:16px}
.pbar__akun{position:relative}
.pbar__akun-tombol{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem .25rem .25rem;border:1px solid transparent;border-radius:999px;background:none;color:var(--text);cursor:pointer}
.pbar__akun-tombol:hover,.pbar__akun-tombol[aria-expanded="true"]{background:var(--surface-2);border-color:var(--p-garis)}
.pbar__avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1a2a75,#079c4e);color:#fff;font:700 .8rem var(--font-head)}
.pbar__akun-teks{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left}
.pbar__akun-teks b{font:600 .84rem var(--font-head);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar__akun-teks small{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pbar__panah{width:15px;height:15px;color:var(--muted)}
.pbar__menu-akun{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:.35rem;background:var(--p-kartu);border:1px solid var(--p-garis);
  border-radius:12px;box-shadow:var(--p-bayang-2)}
.pbar__menu-akun a,.pbar__menu-akun button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .7rem;border:0;border-radius:8px;
  background:none;color:var(--text);font:500 .86rem var(--font-head);text-align:left;cursor:pointer}
.pbar__menu-akun a:hover,.pbar__menu-akun button:hover{background:var(--surface-2);text-decoration:none}
.pbar__menu-akun form{margin:0;border-top:1px solid var(--p-garis);padding-top:.3rem;margin-top:.3rem}
.pbar__menu-akun button{color:var(--bad)}
.pbar__menu-akun svg{width:16px;height:16px}

.panel-isi{padding:1.6rem 1.6rem 3rem;min-width:0;width:100%;max-width:1480px}
.panel-tirai{display:none}

@media (max-width:1024px){
  .panel-app{grid-template-columns:1fr}
  .sisi-panel{position:fixed;left:0;top:0;bottom:0;width:272px;transform:translateX(-100%);transition:transform .25s ease}
  .sisi-panel.buka{transform:none;box-shadow:var(--p-bayang-2)}
  .panel-tirai:not([hidden]){display:block;position:fixed;inset:0;z-index:45;background:rgba(8,12,30,.45)}
  .pbar{padding:.5rem 1rem}
  .pbar__menu{display:grid}
  .pbar__tbl span,.pbar__akun-teks,.pbar__panah{display:none}
  .panel-isi{padding:1.1rem 1rem 2.5rem}
}

/* ---------- kepala halaman ---------- */
.panel-kepala{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.panel-kepala h1{font:700 1.65rem/1.2 var(--font-head);margin:0;letter-spacing:-.02em}
.panel-kepala p{margin:.3rem 0 0;color:var(--muted);font-size:.9rem;max-width:80ch}
.panel-kepala__aksi{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- kartu & tombol di dalam panel ---------- */
.panel-app .panel{background:var(--p-kartu);border:1px solid var(--p-garis);border-radius:var(--r-p);box-shadow:var(--p-bayang);padding:1.3rem 1.4rem}
.panel-app .panel+.panel{margin-top:1.25rem}
.panel-app .panel__judul{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;font:700 1rem var(--font-head);color:var(--text)}
.panel-app .panel__judul svg{width:18px;height:18px;color:var(--brand-600)}
.panel-app .tbl{border-radius:9px;background:var(--brand-600);font:600 .86rem var(--font-head);box-shadow:0 1px 2px rgba(26,42,117,.25)}
.panel-app .tbl:hover{background:#1a2a75;filter:none}
.panel-app .tbl--hantu{background:var(--p-kartu);border-color:var(--p-garis-2);color:var(--text);box-shadow:none}
.panel-app .tbl--hantu:hover{background:var(--surface-2);border-color:var(--brand-600);color:var(--brand-600)}
.panel-app .tbl--bahaya{background:#fff;border-color:#f3bcbc;color:var(--bad);box-shadow:none}
.panel-app .tbl--bahaya:hover{background:var(--bad);border-color:var(--bad);color:#fff}
.panel-app .tbl--aksen{background:var(--p-aksen)}
.panel-app .tbl--aksen:hover{background:#c9862a}
.panel-app .pil{border-radius:999px;font-weight:600}
.panel-app .note{width:auto;margin:0 0 1.1rem;border-radius:10px;box-shadow:var(--p-bayang)}
.panel-app .kosong{padding:2.2rem 1rem}
.panel-app .kosong>svg{width:40px;height:40px;padding:.55rem;border-radius:50%;background:var(--surface-3);color:var(--muted)}

/* ---------- panel & tata letak dua kolom ---------- */
.dua-panel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:1100px){.dua-panel{grid-template-columns:1fr}}

/* ---------- saringan & tabel daftar ---------- */
.panel-saring{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:-.2rem 0 1rem;padding-bottom:1rem;border-bottom:1px solid var(--p-garis)}
.panel-saring input[type=search]{max-width:300px;padding-left:2.2rem;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93ad' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat .7rem center/16px}
.panel-saring input[type=number],.panel-saring select{max-width:260px}
.panel-saring label{font:600 .85rem var(--font-head);color:var(--text-2)}
.panel-saring__info{margin-left:auto;padding:.3rem .7rem;border-radius:999px;background:var(--surface-3);color:var(--muted);font:600 .76rem var(--font-head)}
.panel-app input[type=text],.panel-app input[type=search],.panel-app input[type=password],.panel-app input[type=email],.panel-app input[type=url],
.panel-app input[type=number],.panel-app input[type=date],.panel-app input[type=datetime-local],.panel-app select,.panel-app textarea{
  border-radius:9px;border-color:var(--p-garis-2);background-color:var(--p-kartu);transition:border-color .15s,box-shadow .15s}
.panel-app .tabel-bungkus{border:1px solid var(--p-garis);border-radius:10px}
.panel-app table.tabel th{background:var(--surface-2);font-size:.72rem;letter-spacing:.06em;padding:.7rem .85rem;border-bottom:1px solid var(--p-garis)}
.panel-app table.tabel td{padding:.75rem .85rem;border-bottom-color:var(--p-garis);vertical-align:middle}
.panel-app table.tabel tbody tr:last-child td{border-bottom:0}
.panel-app table.tabel tbody tr{transition:background .12s}
.panel-app table.tabel tbody tr:hover{background:color-mix(in srgb,var(--brand-600) 4%,transparent)}
.aksi-baris{display:flex;gap:.35rem;align-items:center;justify-content:flex-end}
.aksi-baris form{margin:0}
.thumb{width:64px;height:42px;object-fit:cover;border-radius:7px;border:1px solid var(--p-garis)}
.kosong-sel{color:var(--muted)}
.submenu-tanda{color:var(--muted);margin-right:.35rem}
table.tabel code{font-size:.78rem;color:var(--muted);word-break:break-all}
.panel-app .pager__no,.panel-app .pager__nav{border-radius:8px}

/* ---------- formulir ---------- */
.form-penuh{grid-column:1/-1}
.form-baris--cek{align-self:end}
.pratinjau{margin-bottom:.4rem}
.pratinjau img{max-width:220px;border-radius:9px;border:1px solid var(--p-garis)}
.panel-app .form-aksi{border-top-color:var(--p-garis)}

/* ---------- tab ---------- */
.tab-baris{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.tab{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid var(--p-garis-2,var(--line));background:var(--p-kartu,var(--surface));color:var(--text-2);font:600 .85rem var(--font-head)}
.tab:hover{text-decoration:none;border-color:var(--brand-600)}
.tab.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.tab.on .pil{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}

/* ============== DASHBOARD ============== */
.dash-sapa{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.3rem;padding:1.4rem 1.6rem;
  border-radius:16px;background:linear-gradient(120deg,#1a2a75 0%,#1f4c86 55%,#079c4e 100%);color:#fff;position:relative;overflow:hidden}
.dash-sapa::after{content:"";position:absolute;right:-40px;top:-60px;width:240px;height:240px;background:url(icons/logo-matahari-putih.png) center/contain no-repeat;opacity:.08;pointer-events:none}
.dash-sapa h1{margin:0;color:#fff;font:700 1.55rem/1.2 var(--font-head);letter-spacing:-.02em}
.dash-sapa p{margin:.3rem 0 0;color:rgba(255,255,255,.82);font-size:.9rem}
.dash-sapa__aksi{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.5rem}
.dash-sapa__aksi a{display:inline-flex;align-items:center;gap:.45rem;height:38px;padding:0 .9rem;border-radius:9px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);color:#fff;font:600 .82rem var(--font-head)}
.dash-sapa__aksi a:hover{background:rgba(255,255,255,.24);text-decoration:none}
.dash-sapa__aksi a.utama{background:var(--p-aksen);border-color:var(--p-aksen)}
.dash-sapa__aksi a.utama:hover{background:#c9862a}
.dash-sapa__aksi svg{width:16px;height:16px}

.dash-stat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}
@media (max-width:1320px){.dash-stat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.dash-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.dash-stat__nilai{font-size:1.5rem}.dash-stat__kartu{padding:.85rem}}
.dash-stat__kartu{display:flex;flex-direction:column;gap:.1rem;padding:1.05rem 1.15rem;background:var(--p-kartu);border:1px solid var(--p-garis);
  border-radius:var(--r-p);box-shadow:var(--p-bayang);color:var(--text);transition:transform .15s,box-shadow .15s,border-color .15s}
a.dash-stat__kartu:hover{transform:translateY(-2px);box-shadow:var(--p-bayang-2);border-color:var(--p-garis-2);text-decoration:none}
.dash-stat__atas{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem}
.dash-stat__label{font:600 .78rem var(--font-head);color:var(--muted)}
.dash-stat__ikon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--brand-50);color:var(--brand-600)}
.dash-stat__ikon svg{width:17px;height:17px}
.dash-stat__nilai{font:700 1.9rem/1.1 var(--font-head);letter-spacing:-.02em}
.dash-stat__sub{font-size:.76rem;color:var(--muted)}

.dash-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem;margin-bottom:1.25rem}
.dash-grid>.panel{margin:0!important}
.dash-3{grid-column:span 3}.dash-8{grid-column:span 8}.dash-7{grid-column:span 7}.dash-6{grid-column:span 6}.dash-5{grid-column:span 5}.dash-4{grid-column:span 4}
@media (max-width:1200px){.dash-8,.dash-7,.dash-5,.dash-4,.dash-6{grid-column:span 12}.dash-3{grid-column:span 12}}
.panel__kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.panel__kepala .panel__judul{margin:0}
.panel__kepala p{margin:.2rem 0 0;font-size:.8rem;color:var(--muted)}
.panel__kepala a{font:600 .8rem var(--font-head);white-space:nowrap}

/* grafik batang mendatar */
.gr-batang{display:flex;flex-direction:column;gap:.55rem}
.gr-batang__baris{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr) 42px;align-items:center;gap:.75rem;padding:.12rem .3rem;border-radius:6px}
.gr-batang__baris:hover{background:var(--surface-2)}
.gr-batang__label{font:500 .83rem var(--font-head);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-batang__label a{color:inherit}
.gr-batang__jalur{height:14px;display:flex;align-items:center}
.gr-batang__jalur i{display:block;height:14px;border-radius:0 4px 4px 0;background:var(--gr-1);transition:width .6s ease}
.gr-seri-2 .gr-batang__jalur i{background:var(--gr-2)}
.gr-batang__nilai{font:600 .83rem var(--font-head);color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

/* grafik kolom */
.gr-kolom svg{display:block;width:100%;height:210px;overflow:visible}
.gr-grid{stroke:var(--gr-grid);stroke-width:1}
.gr-dasar{stroke:var(--p-garis-2);stroke-width:1}
.gr-sumbu{fill:var(--gr-teks);font:500 11px var(--font-head);font-variant-numeric:tabular-nums}
.gr-isi{fill:var(--gr-1)}
.gr-seri-2 .gr-isi{fill:var(--gr-2)}
.gr-kena{fill:transparent}
.gr-kolom__g:hover .gr-kena{fill:color-mix(in srgb,var(--gr-1) 7%,transparent)}
.gr-kolom__g:hover .gr-isi{filter:brightness(1.12)}

.gr-tabel{margin-top:.9rem}
.gr-tabel summary{cursor:pointer;font:600 .76rem var(--font-head);color:var(--muted)}
.gr-tabel summary:hover{color:var(--brand-600)}
.gr-tabel table{margin-top:.6rem}

.gr-tip{position:fixed;z-index:200;padding:.4rem .6rem;border-radius:7px;background:#101a33;color:#fff;font:600 .76rem var(--font-head);
  pointer-events:none;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25);transform:translate(-50%,calc(-100% - 10px))}

/* meter kelengkapan */
.gr-meter+.gr-meter{margin-top:.95rem}
.gr-meter__kepala{display:flex;justify-content:space-between;gap:.6rem;font:500 .84rem var(--font-head);color:var(--text-2)}
.gr-meter__kepala b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.gr-meter__jalur{height:8px;margin:.4rem 0 .3rem;border-radius:99px;background:color-mix(in srgb,var(--gr-2) 16%,transparent);overflow:hidden}
.gr-meter__jalur i{display:block;height:100%;border-radius:99px;background:var(--gr-2);transition:width .6s ease}
.gr-meter--sebagian .gr-meter__jalur{background:color-mix(in srgb,#dd9933 18%,transparent)}
.gr-meter--sebagian .gr-meter__jalur i{background:#dd9933}
.gr-meter--kurang .gr-meter__jalur{background:color-mix(in srgb,#d64545 15%,transparent)}
.gr-meter--kurang .gr-meter__jalur i{background:#d64545}
.gr-meter__kaki{display:flex;justify-content:space-between;gap:.6rem;font-size:.74rem;color:var(--muted)}
.gr-meter__kaki a{font:600 .74rem var(--font-head)}

/* linimasa aktivitas & daftar ringkas */
.dash-lini{list-style:none;margin:0;padding:0}
.dash-lini li{position:relative;display:flex;gap:.8rem;padding:.2rem 0 .95rem}
.dash-lini li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:0;width:2px;background:var(--p-garis)}
.dash-lini__ikon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:var(--surface-3);color:var(--text-2)}
.dash-lini__ikon svg{width:15px;height:15px}
.dash-lini__ikon--tambah{background:#e4f6ea;color:#137a3e}
.dash-lini__ikon--ubah,.dash-lini__ikon--unggah{background:#e6eeff;color:#233e97}
.dash-lini__ikon--hapus{background:#fdeded;color:#b42323}
.dash-lini__teks{min-width:0;font-size:.85rem;color:var(--text-2);line-height:1.45}
.dash-lini__teks b{color:var(--text);font-weight:600}
.dash-lini__teks small{display:block;font-size:.74rem;color:var(--muted)}
.dash-daftar{list-style:none;margin:0;padding:0}
.dash-daftar li+li{border-top:1px solid var(--p-garis)}
.dash-daftar a,.dash-daftar .baris{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;color:var(--text)}
.dash-daftar a:hover{text-decoration:none}
.dash-daftar a:hover b{color:var(--brand-600)}
.dash-daftar b{display:block;font:600 .86rem/1.35 var(--font-head)}
.dash-daftar small{display:block;font-size:.74rem;color:var(--muted)}
.dash-daftar .tgl{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:10px;background:var(--brand-50);color:var(--brand-600);font:600 .66rem/1.1 var(--font-head);text-transform:uppercase;text-align:center}
.dash-daftar .tgl b{font-size:1.05rem;color:inherit}
.dash-daftar img{width:52px;height:38px;flex:0 0 auto;border-radius:7px;object-fit:cover;background:var(--surface-3)}

/* ============== PENYUNTING (gaya WordPress + editor ala Word) ============== */
.penyunting{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.25rem;align-items:start}
@media (max-width:1100px){.penyunting{grid-template-columns:1fr}}
.penyunting__utama{min-width:0;display:flex;flex-direction:column;gap:1rem}
.penyunting__sisi{display:flex;flex-direction:column;gap:1rem;position:sticky;top:78px}
@media (max-width:1100px){.penyunting__sisi{position:static}}
.penyunting__judul input{width:100%;padding:.85rem 1rem!important;border:1px solid var(--p-garis-2);border-radius:12px;background:var(--p-kartu);
  font:700 1.55rem/1.25 var(--font-head)!important;letter-spacing:-.02em;color:var(--text)}
.penyunting__judul input::placeholder{color:#b3bad0}
.penyunting__permalink{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.penyunting__permalink code{padding:.15rem .4rem;border-radius:6px;background:var(--surface-3);color:var(--text-2);font-size:.78rem}
.penyunting__permalink input{width:auto!important;min-width:220px;padding:.25rem .5rem!important;font-size:.8rem!important;border-radius:6px!important}
.penyunting__permalink a{font:600 .78rem var(--font-head)}
.kotak{background:var(--p-kartu);border:1px solid var(--p-garis);border-radius:var(--r-p);box-shadow:var(--p-bayang);overflow:hidden}
.kotak__judul{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0;padding:.8rem 1rem;border-bottom:1px solid var(--p-garis);
  font:700 .88rem var(--font-head);color:var(--text)}
.kotak__judul svg{width:16px;height:16px;color:var(--brand-600)}
.kotak__isi{padding:.95rem 1rem}
.kotak__isi .form-baris{margin-bottom:.85rem}
.kotak__isi .form-baris:last-child{margin-bottom:0}
.kotak__aksi{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.8rem 1rem;background:var(--surface-2);border-top:1px solid var(--p-garis)}
.kotak__aksi a{font:600 .8rem var(--font-head);color:var(--bad)}
.kotak__status{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted)}
.kotak__status i{width:8px;height:8px;border-radius:50%;background:#c3c9da}
.kotak__status.berubah i{background:var(--p-aksen)}
.hitung-huruf{float:right;font-size:.72rem;color:var(--muted)}
.hitung-huruf.lebih{color:var(--bad);font-weight:600}

/* unggah gambar seret-lepas */
.unggah{position:relative;display:block;border:2px dashed var(--p-garis-2);border-radius:10px;background:var(--surface-2);text-align:center;cursor:pointer;overflow:hidden;transition:border-color .15s,background .15s}
.unggah:hover,.unggah.seret{border-color:var(--brand-600);background:var(--brand-50)}
.unggah input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.unggah__kosong{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.4rem .8rem;font-size:.8rem;color:var(--muted)}
.unggah__kosong svg{width:26px;height:26px;color:var(--brand-600)}
.unggah__kosong b{font:600 .84rem var(--font-head);color:var(--text)}
.unggah img{display:block;width:100%;max-height:220px;object-fit:cover}
.unggah__ganti{position:absolute;left:.5rem;bottom:.5rem;padding:.25rem .55rem;border-radius:6px;background:rgba(16,26,51,.75);color:#fff;font:600 .72rem var(--font-head)}

/* editor ala Word */
.editor{border:1px solid var(--p-garis-2);border-radius:12px;background:var(--p-kartu)}
.editor__pita{border-radius:11px 11px 0 0}
.editor__status{border-radius:0 0 11px 11px}
.editor__pita{position:sticky;top:62px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.45rem .55rem;
  background:var(--surface-2);border-bottom:1px solid var(--p-garis)}
.editor__grup{display:flex;align-items:center;gap:.1rem;padding-right:.35rem;margin-right:.1rem;border-right:1px solid var(--p-garis)}
.editor__grup:last-child{border-right:0}
.editor__pita button,.editor__pita select{height:32px;min-width:32px;padding:0 .45rem;border:1px solid transparent;border-radius:7px;background:none;
  color:var(--text-2);font:600 .8rem var(--font-head);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.3rem}
.editor__pita select{border-color:var(--p-garis-2);background:var(--p-kartu);min-width:130px;padding:0 .5rem}
.editor__pita button:hover{background:var(--p-kartu);border-color:var(--p-garis-2);color:var(--text)}
.editor__pita button.on{background:var(--brand-50);border-color:color-mix(in srgb,var(--brand-600) 30%,transparent);color:var(--brand-600)}
.editor__pita svg{width:16px;height:16px}
.editor__kanvas{background:#e9ecf3;padding:1.6rem 1rem;max-height:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .editor__kanvas{background:#0d1328}}
.editor__halaman{max-width:820px;min-height:520px;margin:0 auto;padding:3rem 3.4rem;background:#fff;color:#1f2433;border-radius:4px;
  box-shadow:0 1px 3px rgba(16,26,51,.12),0 8px 24px rgba(16,26,51,.08);outline:none;font:400 1rem/1.8 'Poppins',system-ui,sans-serif}
@media (max-width:760px){.editor__halaman{padding:1.6rem 1.2rem}.editor__kanvas{padding:.8rem .4rem}}
.editor__halaman:empty::before{content:attr(data-placeholder);color:#a0a8bf}
.editor__halaman h2{font:700 1.6rem/1.3 'Poppins',sans-serif;margin:1.4em 0 .5em;color:#111}
.editor__halaman h3{font:600 1.3rem/1.35 'Poppins',sans-serif;margin:1.3em 0 .5em;color:#111}
.editor__halaman h4{font:600 1.08rem/1.4 'Poppins',sans-serif;margin:1.2em 0 .5em;color:#111}
.editor__halaman p{margin:0 0 1em}
.editor__halaman a{color:#233e97;text-decoration:underline}
.editor__halaman img{max-width:100%;height:auto;border-radius:4px}
.editor__halaman img.dipilih{outline:3px solid #3355c4;outline-offset:2px}
.editor__halaman blockquote{margin:1.2em 0;padding:.6em 1.1em;border-left:4px solid #dd9933;background:#faf7f0;font-style:italic}
.editor__halaman table{width:100%;border-collapse:collapse;margin:1em 0}
.editor__halaman th,.editor__halaman td{border:1px solid #cfd5e3;padding:.45em .6em;min-width:60px}
.editor__halaman th{background:#f1f3f9}
.editor__halaman iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:4px;pointer-events:none}
.editor__halaman .rata-tengah{text-align:center}.editor__halaman .rata-kanan{text-align:right}.editor__halaman .rata-penuh{text-align:justify}
.editor__halaman hr{border:0;border-top:1px solid #d7dcea;margin:1.6em 0}
.editor__sumber{display:none;width:100%;min-height:520px;border:0!important;border-radius:0!important;padding:1rem!important;
  font:400 .85rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace!important;background:#0f1530!important;color:#e6e9f5!important}
.editor.mode-sumber .editor__kanvas{display:none}
.editor.mode-sumber .editor__sumber{display:block}
.editor__status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding:.45rem .8rem;border-top:1px solid var(--p-garis);
  background:var(--surface-2);font:500 .74rem var(--font-head);color:var(--muted)}
.editor.layar-penuh{position:fixed;inset:0;z-index:300;border-radius:0;display:flex;flex-direction:column}
.editor.layar-penuh .editor__pita{top:0}
.editor.layar-penuh .editor__kanvas{flex:1;overflow:auto}
.editor__unggah-info{padding:.4rem .8rem;background:#e6eeff;color:#233e97;font:600 .78rem var(--font-head)}

/* ---------- halaman masuk ---------- */
.masuk{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:var(--grad-lembut)}
.masuk__kartu{width:min(100%,420px);background:var(--surface);border-radius:16px;padding:1.9rem;box-shadow:var(--sh-2)}
.masuk__merek{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.masuk__merek img{width:46px;padding:6px;border-radius:12px;background:linear-gradient(135deg,#1a2a75,#079c4e)}
.masuk__merek b{display:block;font:700 1.05rem var(--font-head)}
.masuk__merek small{color:var(--muted);font-size:.8rem}
.masuk__kartu .note{width:100%;margin:0 0 1rem}
.masuk__kaki{margin:1rem 0 0;text-align:center;font-size:.85rem}

/* ---------- gaya WordPress: tombol "+ Baru", tab status, tautan baris, tabel responsif ---------- */
.pbar__baru{position:relative}
.pbar__baru>button{display:inline-flex;align-items:center;gap:.4rem;height:38px;padding:0 .9rem;border:0;border-radius:9px;background:var(--brand-600);
  color:#fff;font:600 .82rem var(--font-head);cursor:pointer}
.pbar__baru>button:hover{background:#1a2a75}
.pbar__baru>button svg{width:16px;height:16px}
.pbar__baru .pbar__menu-akun{left:0;right:auto}
.pbar__baru .pbar__menu-akun a{color:var(--text)}

.status-tab{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:-.3rem 0 .9rem;font:500 .84rem var(--font-head);color:var(--muted)}
.status-tab a{color:var(--brand-600)}
.status-tab a.on{color:var(--text);font-weight:700;pointer-events:none}
.status-tab span{color:var(--muted);font-weight:400}

.baris-judul{display:flex;flex-direction:column;gap:.15rem}
.baris-judul>a{font:600 .9rem var(--font-head);color:var(--text)}
.baris-judul>a:hover{color:var(--brand-600);text-decoration:none}
.baris-aksi{display:flex;gap:.55rem;font-size:.76rem;opacity:0;transition:opacity .12s}
.baris-aksi a{color:var(--brand-600)}
.baris-aksi a.bahaya{color:var(--bad)}
.panel-app table.tabel tbody tr:hover .baris-aksi,.panel-app table.tabel tbody tr:focus-within .baris-aksi{opacity:1}
@media (hover:none){.baris-aksi{opacity:1}}

@media (max-width:760px){
  .panel-kepala{align-items:flex-start}
  .panel-kepala__aksi{width:100%}
  .panel-kepala__aksi .tbl{flex:1;justify-content:center}
  .panel-saring input[type=search],.panel-saring select{max-width:none;flex:1 1 100%}
  .panel-saring__info{margin-left:0}
  .panel-app .tabel-bungkus{border:0;overflow:visible}
  .panel-app table.tabel--responsif thead{display:none}
  .panel-app table.tabel--responsif,.panel-app table.tabel--responsif tbody{display:block}
  .panel-app table.tabel--responsif tr{display:block;margin-bottom:.7rem;padding:.35rem .9rem;border:1px solid var(--p-garis);border-radius:12px;background:var(--p-kartu);box-shadow:var(--p-bayang)}
  .panel-app table.tabel--responsif td{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0!important;border-bottom:1px dashed var(--p-garis)!important;text-align:right}
  .panel-app table.tabel--responsif td:last-child{border-bottom:0!important}
  .panel-app table.tabel--responsif td::before{content:attr(data-label);font:600 .72rem var(--font-head);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left}
  .panel-app table.tabel--responsif td[data-label=""]::before{content:none}
  .panel-app table.tabel--responsif td.sel-utama{display:block;text-align:left;padding-top:.7rem!important}
  .panel-app table.tabel--responsif td.sel-utama::before{content:none}
  .panel-app table.tabel--responsif .aksi-baris{width:100%;justify-content:stretch}
  .panel-app table.tabel--responsif .aksi-baris>a{flex:1;justify-content:center}
  .penyunting__judul input{font-size:1.25rem!important}
  .editor__pita{top:0}
}

/* ---------- SKALA RINGKAS (permintaan user: tulisan & elemen panel jangan terlalu besar) ----------
   Semua ukuran panel memakai rem, jadi cukup kecilkan akar huruf di halaman panel & login. */
html:has(.panel-app),html:has(.masuk){font-size:13.5px}
body:has(.panel-app),body:has(.masuk){font-size:13.5px;line-height:1.55}
.panel-app{grid-template-columns:224px minmax(0,1fr)}
.sisi-panel__merek{padding:.9rem 1rem}
.sisi-panel__merek img{width:28px}
.sisi-panel__item{padding:.48rem .7rem;gap:.6rem}
.sisi-panel__item svg{width:16px;height:16px}
.pbar{min-height:54px;padding:.4rem 1.3rem}
.pbar__tbl,.pbar__baru>button{height:34px}
.pbar__avatar{width:32px;height:32px}
.panel-isi{padding:1.3rem 1.4rem 2.5rem}
.panel-kepala h1{font-size:1.45rem}
.panel-app .panel{padding:1.1rem 1.2rem}
.panel-app table.tabel td{padding:.6rem .75rem}
.panel-app table.tabel th{padding:.6rem .75rem}
.panel-app .tbl{padding:.55rem .95rem}
.panel-app .tbl--kecil{padding:.35rem .65rem}
.panel-app .tbl svg,.panel-app .panel__judul svg{width:15px;height:15px}
.dash-stat__nilai{font-size:1.65rem}
.dash-sapa{padding:1.15rem 1.35rem}
.dash-sapa h1{font-size:1.35rem}
.editor__pita{top:54px}
.editor__halaman{font-size:15px}
@media (max-width:1024px){.panel-app{grid-template-columns:1fr}}