/* ============================================================================
   CULINARA — TEMA PANEL PENGELOLA (selaras dengan website pelanggan)
   Dimuat PALING AKHIR (setelah style.css, redesign.css, admin.css).

   Tujuannya menyatukan identitas visual:
     · warna  : marun #691414 · emas #FACC15 · krem #FFFDF9 / #F6F2EA
     · huruf  : Plus Jakarta Sans, judul tebal & rapat
     · tombol : pil emas (aksi utama), garis marun (aksi kedua)
     · kartu  : putih, sudut 18px, garis tipis hangat
   Hanya tampilan yang diubah — struktur, logika, dan fungsi admin tetap sama.
   ========================================================================== */

/* ── 1. Token warna & huruf ─────────────────────────────────────────────── */
body.adm {
  --merah: #691414;
  --merah-tua: #4f0f0f;
  --merah-gelap: #3d0909;
  --merah-lembut: #f8eaea;
  --merah-garis: #eccfcf;

  --gold: #facc15;
  --gold-tua: #9a6700;
  --gold-lembut: #fdf6dc;
  --gold-garis: #f0d78a;

  --ivory: #fffdf9;
  --ivory-2: #f6f2ea;
  --ivory-3: #ece6da;
  --kertas: #ffffff;

  --teks: #1c1917;
  --teks-2: #57534e;
  --teks-3: #78716c;

  --garis: #e7e2d9;
  --garis-2: #efeadf;

  --ok: #4f7a58;
  --ok-lembut: #eef4e8;

  --r-kartu: 18px;
  --r-sedang: 14px;
  --r-kecil: 10px;

  --bayang-1: 0 1px 2px rgba(28, 25, 23, 0.05);
  --bayang-2: 0 12px 28px -20px rgba(105, 20, 20, 0.35);
  --bayang-3: 0 22px 48px -28px rgba(105, 20, 20, 0.45);

  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--ivory-2);
  color: var(--teks);
  font-size: 15px;
}

body.adm h1,
body.adm h2,
body.adm h3,
body.adm h4,
body.adm .page-head h1,
body.adm .panel-judul,
body.adm .dasbor-sapa h1 {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--teks);
}

body.adm ::selection { background: var(--gold); color: var(--merah-gelap); }
body.adm :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 2. Kepala halaman ─────────────────────────────────────────────────── */
body.adm .page-head { margin-bottom: 18px; }
body.adm .page-head h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(20px, 2vw, 25px);
  color: var(--merah);
}
body.adm .page-head h1 .ikon { color: var(--gold-tua); }
body.adm .page-head .muted { font-size: 12.5px; }

/* ── 3. Sidebar marun ──────────────────────────────────────────────────── */
body.adm .adm-side {
  background:
    radial-gradient(420px 320px at 100% 0%, rgba(250, 204, 21, 0.14), transparent 62%),
    linear-gradient(178deg, #761717 0%, #691414 52%, #4a0e0e 100%);
  border-right: 0;
  color: #fff8ee;
}
body.adm .adm-side::after {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.35), transparent 55%);
}

body.adm .adm-brand-nama {
  color: #fff8ee;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
body.adm .adm-brand-nama b { color: var(--gold); }
body.adm .adm-brand-sub {
  color: rgba(255, 248, 238, 0.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}
body.adm .adm-brand-ikon {
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.45);
}
body.adm .adm-brand:hover { background: rgba(250, 204, 21, 0.12); }

/* kartu "perlu ditangani" → nuansa emas */
body.adm .adm-side-kartu {
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: var(--r-sedang);
}
body.adm .adm-side-kartu-label {
  color: rgba(255, 248, 238, 0.66);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  font-weight: 800;
}
body.adm .adm-side-kartu-nilai { color: var(--gold); }
body.adm .adm-side-kartu-sub { color: rgba(255, 248, 238, 0.62); }

/* judul kelompok menu */
body.adm .adm-nav-label {
  color: rgba(250, 204, 21, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  font-weight: 800;
}
/* item menu */
body.adm .adm-nav a {
  color: rgba(255, 248, 238, 0.82);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
}
body.adm .adm-nav a .ikon { color: rgba(250, 204, 21, 0.85); }
body.adm .adm-nav a:hover {
  background: rgba(255, 248, 238, 0.1);
  color: #fff8ee;
}
body.adm .adm-nav a:hover .ikon { color: var(--gold); }
body.adm .adm-nav a.active {
  background: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.8);
}
body.adm .adm-nav a.active .ikon { color: #4f0f0f; }
body.adm .adm-nav a.active::before { background: #fff8ee; }
body.adm .adm-nav .badge {
  background: rgba(255, 248, 238, 0.16);
  color: #fff8ee;
  font-weight: 800;
}
body.adm .adm-nav a.active .badge { background: #4f0f0f; color: var(--gold); }

body.adm .adm-side-foot { border-top: 1px solid rgba(255, 248, 238, 0.14); }
body.adm .adm-avatar {
  background: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
}
body.adm .adm-side-foot-nama { color: #fff8ee; }
body.adm .adm-side-foot-peran {
  color: rgba(255, 248, 238, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 700;
}
body.adm .adm-side-keluar {
  background: rgba(255, 248, 238, 0.1);
  border-color: rgba(255, 248, 238, 0.22);
  color: #fff8ee;
}
body.adm .adm-side-keluar:hover { background: var(--gold); color: #4f0f0f; border-color: var(--gold); }

/* ── 4. Topbar ─────────────────────────────────────────────────────────── */
body.adm .adm-top {
  background: rgba(255, 253, 249, 0.92);
  border-bottom: 1px solid var(--garis);
  min-height: 66px;
}
body.adm .adm-top::after {
  background: linear-gradient(90deg, rgba(105, 20, 20, 0.3), rgba(250, 204, 21, 0.5), transparent 72%);
}
body.adm .adm-remah { color: var(--teks-3); }
body.adm .adm-remah .ikon { color: var(--gold-tua); }
body.adm .adm-remah-kini { color: var(--maroon); font-weight: 800; }
body.adm .adm-burger,
body.adm .adm-ikon-btn {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 12px;
  color: var(--merah);
}
body.adm .adm-burger:hover,
body.adm .adm-ikon-btn:hover {
  background: var(--gold-lembut);
  border-color: var(--gold);
  color: var(--merah);
}
body.adm .adm-titik { background: var(--gold); color: #4f0f0f; }
body.adm .adm-user-chip {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
}
body.adm .adm-user-chip:hover { border-color: var(--gold); background: var(--gold-lembut); }
body.adm .adm-user-nama { color: var(--teks); font-weight: 800; }
body.adm .adm-user-peran {
  color: var(--gold-tua);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
  font-weight: 800;
}

/* ── 5. Tombol: pil emas + garis marun ─────────────────────────────────── */
body.adm .btn,
body.adm .btn-primary,
body.adm .btn-ok,
body.adm .btn-search,
body.adm .btn-bayar {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #4f0f0f;
  font-weight: 800;
  border-radius: 999px;
  min-height: 42px;
  padding: 9px 20px;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 20px -16px rgba(105, 20, 20, 0.6);
}
body.adm .btn:hover,
body.adm .btn-primary:hover,
body.adm .btn-ok:hover,
body.adm .btn-search:hover,
body.adm .btn-bayar:hover {
  background: #fde047;
  border-color: #fde047;
  color: #4f0f0f;
}
body.adm .btn-ghost {
  background: #fff;
  border: 1px solid var(--garis);
  color: var(--merah);
  font-weight: 700;
  box-shadow: none;
}
body.adm .btn-ghost:hover {
  background: var(--ivory-2);
  border-color: var(--gold);
  color: var(--merah);
}
body.adm .btn-danger {
  background: #fff;
  border: 1px solid var(--merah-garis);
  color: #8f1d1d;
  font-weight: 700;
  box-shadow: none;
}
body.adm .btn-danger:hover { background: var(--merah-lembut); border-color: #dcaeae; color: #8f1d1d; }
body.adm .btn-mini {
  border-radius: 999px;
  font-weight: 700;
  padding: 6px 12px;
  min-height: 32px;
  font-size: 12px;
}
body.adm .btn-mini.btn-danger { background: #fff; border-color: var(--merah-garis); color: #8f1d1d; }
body.adm .btn-mini.btn-danger:hover { background: var(--merah-lembut); }
body.adm .btn-mini.btn-ok { background: var(--gold); border-color: var(--gold); color: #4f0f0f; }
body.adm .btn-mini.btn-ok:hover { background: #fde047; border-color: #fde047; }
body.adm .btn-icon { border-radius: 999px; }
body.adm .btn-kecil { border-radius: 999px; }

/* ── 6. Kartu & panel ──────────────────────────────────────────────────── */
body.adm .card,
body.adm .panel,
body.adm .table-wrap,
body.adm .login-card {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-1);
}
body.adm .card { padding: 20px; }
body.adm .panel { padding: 18px 20px 20px; }
body.adm .panel-kepala { border-bottom: 1px solid var(--garis-2); padding-bottom: 12px; }
body.adm .panel-judul { font-size: 15.5px; color: var(--merah); }
body.adm .panel-sub { color: var(--teks-3); font-size: 12px; }
body.adm .panel-tautan {
  color: var(--merah);
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--ivory-2);
  text-decoration: none;
}
body.adm .panel-tautan:hover { background: var(--gold); color: #4f0f0f; }

/* ── 7. Sapaan dasbor ──────────────────────────────────────────────────── */
body.adm .dasbor-sapa {
  background:
    radial-gradient(520px 260px at 96% 0%, rgba(250, 204, 21, 0.22), transparent 62%),
    linear-gradient(120deg, #741717 0%, #691414 55%, #4f0f0f 100%);
  border: 0;
  border-radius: var(--r-kartu);
  color: #fff8ee;
  padding: 20px 22px;
  box-shadow: var(--bayang-2);
}
body.adm .dasbor-sapa h1 { color: #fff8ee; font-size: clamp(18px, 2vw, 22px); }
body.adm .dasbor-sapa p { color: rgba(255, 248, 238, 0.76); }
body.adm .dasbor-sapa .btn-ghost {
  background: transparent;
  border-color: rgba(255, 248, 238, 0.45);
  color: #fff8ee;
}
body.adm .dasbor-sapa .btn-ghost:hover {
  background: rgba(255, 248, 238, 0.12);
  border-color: var(--gold);
  color: var(--gold);
}

/* ── 8. Kartu statistik (KPI) ──────────────────────────────────────────── */
body.adm .kpi {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-1);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
body.adm .kpi:hover {
  transform: translateY(-2px);
  border-color: var(--gold-garis);
  box-shadow: var(--bayang-2);
}
body.adm .kpi::after { background: var(--gold); height: 3px; }
body.adm .kpi-ikon {
  background: var(--gold-lembut);
  color: var(--gold-tua);
  border-radius: 11px;
  border: 1px solid var(--gold-garis);
}
body.adm .kpi-label {
  color: var(--gold-tua);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  font-weight: 800;
}
body.adm .kpi-nilai { color: var(--merah); font-weight: 800; letter-spacing: -0.03em; }
body.adm .kpi-nilai small { color: var(--teks-3); font-weight: 700; }
body.adm .kpi-sub { color: var(--teks-3); }
body.adm .kpi-arah { background: var(--ivory-2); color: var(--teks-2); border-radius: 999px; }
body.adm .kpi-arah.waspada { background: var(--gold-lembut); color: var(--gold-tua); }
body.adm .kpi-arah.bahaya { background: var(--merah-lembut); color: #8f1d1d; }

/* ── 9. Tabel ──────────────────────────────────────────────────────────── */
body.adm table { font-size: 13px; }
body.adm table thead th {
  background: var(--ivory-2);
  color: var(--gold-tua);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  font-weight: 800;
  border-bottom: 1px solid var(--garis);
}
body.adm table tbody td { border-bottom: 1px solid var(--garis-2); color: var(--teks-2); }
body.adm table tbody tr:hover td { background: #fdf8ef; }
body.adm table tbody tr:last-child td { border-bottom: 0; }
body.adm .table-wrap { overflow: hidden; }

/* ── 10. Label, status, dan lencana ────────────────────────────────────── */
body.adm .badge {
  background: var(--ivory-2);
  border: 1px solid var(--garis);
  color: var(--teks-2);
  border-radius: 999px;
  font-weight: 700;
}
body.adm .badge-primary,
body.adm .badge-ok {
  background: var(--gold-lembut);
  border-color: var(--gold-garis);
  color: var(--gold-tua);
}
body.adm .badge-danger { background: var(--merah-lembut); border-color: var(--merah-garis); color: #8f1d1d; }
body.adm .status-pill { border-radius: 999px; font-weight: 700; }
body.adm .status-pill.status-baru,
body.adm .status-pill.status-konfirmasi {
  background: var(--gold-lembut);
  color: var(--gold-tua);
  border-color: var(--gold-garis);
}
body.adm .status-pill.status-selesai,
body.adm .status-pill.status-lunas {
  background: var(--ok-lembut);
  color: var(--ok);
  border-color: #cfe3c6;
}
body.adm .status-pill.status-batal { background: var(--merah-lembut); color: #8f1d1d; border-color: var(--merah-garis); }

/* ── 11. Formulir ──────────────────────────────────────────────────────── */
body.adm label { color: var(--teks-2); font-weight: 700; font-size: 12.5px; }
body.adm input[type="text"],
body.adm input[type="number"],
body.adm input[type="email"],
body.adm input[type="tel"],
body.adm input[type="password"],
body.adm input[type="search"],
body.adm input[type="date"],
body.adm select,
body.adm textarea {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 12px;
  padding: 10px 13px;
  color: var(--teks);
  font-family: inherit;
}
body.adm input:focus,
body.adm select:focus,
body.adm textarea:focus {
  outline: none;
  border-color: var(--merah);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.35);
}
body.adm .search-bar,
body.adm .group-add {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  padding: 12px;
}
body.adm .check-row { color: var(--teks-2); }
body.adm .check-row input { accent-color: var(--merah); }

/* ── 12. Pesan & catatan ───────────────────────────────────────────────── */
body.adm .note-box,
body.adm .notice {
  background: var(--ivory-2);
  border: 1px solid var(--garis);
  border-radius: var(--r-sedang);
  color: var(--teks-2);
}
body.adm .notice-success { background: var(--ok-lembut); border-color: #cfe3c6; color: #3f5b2f; }
body.adm .notice-warning { background: var(--gold-lembut); border-color: var(--gold-garis); color: #6b4a00; }
body.adm .notice-danger { background: var(--merah-lembut); border-color: var(--merah-garis); color: #8f1d1d; }
body.adm .flash { border-radius: 999px; font-weight: 600; }
body.adm .flash-success { background: var(--ok-lembut); color: #3f5b2f; border-color: #cfe3c6; }
body.adm .flash-danger { background: var(--merah-lembut); color: #8f1d1d; border-color: var(--merah-garis); }
body.adm .flash-warning { background: var(--gold-lembut); color: #6b4a00; border-color: var(--gold-garis); }
body.adm .flash-info { background: var(--ivory-2); color: var(--teks-2); }

/* ── 13. Kartu menu cepat ──────────────────────────────────────────────── */
body.adm .menu-kartu {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--r-sedang);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
body.adm .menu-kartu:hover {
  border-color: var(--gold-garis);
  transform: translateY(-2px);
  box-shadow: var(--bayang-2);
}
body.adm .menu-kartu-ikon {
  background: var(--gold-lembut);
  color: var(--gold-tua);
  border-radius: 10px;
  border: 1px solid var(--gold-garis);
}
body.adm .menu-kartu-judul { color: var(--merah); font-weight: 800; }
body.adm .menu-kartu-ket { color: var(--teks-3); }
body.adm .menu-kartu-stat { color: var(--gold-tua); font-weight: 700; }

/* ── 14. Ikon & grafik kecil ───────────────────────────────────────────── */
body.adm .baris-ikon {
  background: var(--ivory-2);
  color: var(--merah);
  border-radius: 11px;
}
body.adm .baris-ikon.emas { background: var(--gold-lembut); color: var(--gold-tua); }
body.adm .grafik-batang { background: linear-gradient(180deg, var(--gold), #e8b90e); border-radius: 6px 6px 3px 3px; }
body.adm .grafik-angka { color: var(--merah); font-weight: 800; }
body.adm .status-isi { background: var(--merah); border-radius: 999px; }
body.adm .status-isi.status-baru,
body.adm .status-isi.status-konfirmasi { background: var(--gold); }
body.adm .status-isi.status-selesai,
body.adm .status-isi.status-lunas { background: var(--ok); }
body.adm .status-isi.status-batal { background: #c86a6a; }

/* ── 15. Halaman masuk panel ───────────────────────────────────────────── */
body.adm .adm-guest {
  background:
    radial-gradient(720px 520px at 88% -6%, rgba(250, 204, 21, 0.16), transparent 62%),
    linear-gradient(150deg, #761717 0%, #691414 48%, #400c0c 100%);
}
body.adm .adm-guest-brand { color: #fff8ee; font-weight: 800; letter-spacing: -0.02em; }
body.adm .adm-guest-brand .adm-brand-ikon {
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.45);
}
body.adm .login-card {
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-3);
  border: 0;
  padding: 26px 24px;
}
body.adm .login-card::before {
  content: "";
  display: block;
  height: 5px;
  margin: -26px -24px 18px;
  background: linear-gradient(90deg, var(--gold), #e8b90e);
  border-radius: var(--r-kartu) var(--r-kartu) 0 0;
}
body.adm .login-merek { color: var(--merah); font-weight: 800; }
body.adm .login-kembali { color: var(--teks-3); }

/* ── 16. Footer panel ──────────────────────────────────────────────────── */
body.adm .adm-foot {
  border-top: 1px solid var(--garis);
  color: var(--teks-3);
  font-size: 12px;
}
body.adm .adm-foot b { color: var(--merah); }

/* ── 17. Penyesuaian layar kecil ───────────────────────────────────────── */
@media (max-width: 1023px) {
  body.adm .adm-side { border-right: 0; box-shadow: var(--bayang-3); }
  body.adm .adm-top { min-height: 62px; padding: 8px 16px; }
  body.adm .adm-content { padding: 16px 14px 40px; }
  body.adm .dasbor-sapa { padding: 16px 16px; }
  body.adm .dasbor-sapa-aksi .btn { min-height: 40px; }
}
@media (max-width: 720px) {
  body.adm .page-head { gap: 8px; }
  body.adm .page-head h1 { font-size: 19px; }
  body.adm .card, body.adm .panel { padding: 14px; border-radius: 16px; }
  body.adm .kpi { border-radius: 16px; }
  body.adm input[type="text"],
  body.adm input[type="number"],
  body.adm input[type="email"],
  body.adm input[type="tel"],
  body.adm input[type="password"],
  body.adm select,
  body.adm textarea { font-size: 16px; }
  body.adm .btn, body.adm .btn-primary { min-height: 44px; }
}

/* ── 18. Halaman Pengaturan Konten: bilah aksi tidak menabrak topbar ───── */
body.adm .konten-bar {
  top: 78px;
  z-index: 18;
  background: rgba(255, 253, 249, 0.95);
  border-color: var(--garis);
  border-radius: var(--r-sedang);
}
body.adm .konten-nav-item {
  background: #fff;
  border-color: var(--garis);
  color: var(--teks-2);
  font-weight: 700;
}
body.adm .konten-nav-item:hover { border-color: var(--gold); color: var(--merah); }
body.adm .konten-nav-item.ada-perubahan {
  background: var(--gold-lembut);
  border-color: var(--gold-garis);
  color: var(--gold-tua);
}
body.adm .konten-bagian-kepala h2 { color: var(--merah); }
body.adm .konten-ikon-pratinjau {
  background: var(--gold-lembut);
  border-color: var(--gold-garis);
  color: var(--gold-tua);
}
body.adm .konten-akhir { border-radius: var(--r-sedang); }
@media (max-width: 1023px) {
  body.adm .konten-bar { top: 0; position: static; }
}

/* ============================================================================
   HALAMAN DETAIL PESANAN (od-*) — dua kolom: informasi kiri, tindakan kanan
   Ditulis setelah semua tema lain supaya tampil konsisten marun-emas-krem.
   ========================================================================== */

body.adm .od-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fffdf9 0%, #f9f3e6 100%);
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-1);
}
body.adm .od-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--merah);
  text-decoration: none;
  margin-bottom: 8px;
}
body.adm .od-back:hover { color: var(--merah-gelap); text-decoration: underline; }
body.adm .od-judul-baris { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.adm .od-judul {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--teks);
}
body.adm .od-kode {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--gold-lembut);
  border: 1px solid var(--gold-garis);
  color: var(--merah);
  font-size: 0.82em;
}
body.adm .od-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.adm .od-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--garis-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teks-2);
}
body.adm .od-chip .ikon { color: var(--merah); }
body.adm .od-head-aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

body.adm .od-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}
body.adm .od-main,
body.adm .od-side { display: grid; gap: 18px; min-width: 0; }
body.adm .od-side { position: sticky; top: 18px; }

body.adm .od-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  min-width: 0;
}
body.adm .od-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--garis-2);
}
body.adm .od-card-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teks);
}
body.adm .od-card-head h2 .ikon { color: var(--merah); }
body.adm .od-sub { font-size: 12px; color: var(--teks-3); font-weight: 600; }

/* Daftar menu */
body.adm .od-items { display: grid; gap: 10px; }
body.adm .od-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--garis-2);
  border-radius: var(--r-sedang);
  background: #fffdfa;
}
body.adm .od-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ivory-3);
  display: grid;
  place-items: center;
  flex: none;
}
body.adm .od-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.adm .od-thumb-kosong { color: var(--teks-3); display: grid; place-items: center; }
body.adm .od-item-nama { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--teks); }
body.adm .od-varian {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gold-lembut);
  border: 1px solid var(--gold-garis);
  color: var(--gold-tua);
  font-size: 11px;
  font-weight: 700;
}
body.adm .od-item-meta { margin: 3px 0 0; font-size: 12px; color: var(--teks-3); }
body.adm .od-item-harga { text-align: right; display: grid; gap: 2px; }
body.adm .od-harga { font-size: 13px; font-weight: 700; color: var(--teks-2); }
body.adm .od-kali { font-size: 12px; color: var(--teks-3); }
body.adm .od-item-sub { min-width: 96px; text-align: right; font-size: 14px; font-weight: 800; color: var(--teks); }

/* Ringkasan angka */
body.adm .od-ringkas { display: grid; gap: 7px; }
body.adm .od-ringkas-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--teks-2);
}
body.adm .od-ringkas-baris strong { color: var(--teks); }
body.adm .od-ringkas-diskon span:last-child { color: var(--ok); font-weight: 700; }
body.adm .od-ringkas-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--garis);
  font-size: 16px;
  font-weight: 800;
  color: var(--merah);
}
body.adm .od-ringkas-total span:last-child { color: var(--merah); }
body.adm .od-ringkas-kartu {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--garis);
}

/* Data alamat */
body.adm .od-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
body.adm .od-field { display: grid; gap: 3px; min-width: 0; }
body.adm .od-field-lebar { grid-column: 1 / -1; }
body.adm .od-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teks-3);
}
body.adm .od-nilai { font-size: 14px; color: var(--teks); word-break: break-word; }
body.adm .od-wa-kecil {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ok);
  text-decoration: none;
}
body.adm .od-card-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--garis-2);
}
body.adm .od-tombol-kecil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--kertas);
  color: var(--merah);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
body.adm .od-tombol-kecil:hover { background: var(--merah-lembut); border-color: var(--merah-garis); }

/* Pembayaran */
body.adm .od-teks { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--teks-2); }
body.adm .od-langkah { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
body.adm .od-langkah li { font-size: 13px; line-height: 1.55; color: var(--teks-2); }
body.adm .od-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  border: 1px solid transparent;
}
body.adm .od-badge-ok { background: var(--ok-lembut); border-color: #d8e4cf; color: var(--ok); }
body.adm .od-badge-tunggu { background: var(--gold-lembut); border-color: var(--gold-garis); color: var(--gold-tua); }
body.adm .od-badge-belum { background: var(--ivory-2); border-color: var(--garis); color: var(--teks-3); }
body.adm .od-badge-batal { background: var(--merah-lembut); border-color: var(--merah-garis); color: #8f1d1d; }
body.adm .od-rinci summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--merah);
}
body.adm .od-kutip {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sedang);
  background: var(--ivory-2);
  border: 1px solid var(--garis-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--teks-2);
}

/* Panel tindakan */
body.adm .od-input-rp {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--garis);
  border-radius: var(--r-sedang);
  background: var(--kertas);
  overflow: hidden;
}
body.adm .od-input-rp:focus-within { border-color: var(--gold-garis); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18); }
body.adm .od-input-rp span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  background: var(--ivory-2);
  border-right: 1px solid var(--garis-2);
  color: var(--teks-3);
  font-size: 13px;
  font-weight: 700;
}
body.adm .od-input-rp input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 11px 12px;
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  color: var(--teks);
  background: transparent;
}
body.adm .od-input-rp input:focus { outline: none; }
body.adm .od-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--teks-3); }
body.adm .od-hint-galat { color: #a01b1b; font-weight: 700; }
body.adm .od-select {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r-sedang);
  border: 1px solid var(--garis);
  background: var(--kertas);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--teks);
}
body.adm .od-cepat { display: flex; flex-wrap: wrap; gap: 6px; }
body.adm .od-cepat-form { display: inline-flex; }
body.adm .od-cepat-btn {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--kertas);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--teks-2);
  cursor: pointer;
  white-space: nowrap;
}
body.adm .od-cepat-btn:hover { background: var(--ivory-2); }
body.adm .od-cepat-konfirmasi,
body.adm .od-cepat-baru { border-color: var(--gold-garis); background: var(--gold-lembut); color: var(--gold-tua); }
body.adm .od-cepat-bayar { border-color: #d8e4cf; background: var(--ok-lembut); color: var(--ok); }
body.adm .od-cepat-proses { border-color: #f2d3ac; background: #fdf1e4; color: #a3590d; }
body.adm .od-cepat-kirim { border-color: var(--merah-garis); background: var(--merah-lembut); color: var(--merah); }
body.adm .od-cepat-selesai { border-color: #d8e4cf; background: #eef4e8; color: #3f6647; }
body.adm .od-cepat-batal { border-color: var(--merah-garis); background: #fbeaea; color: #a01b1b; }
body.adm .od-note-kecil { margin: 0; font-size: 12px; line-height: 1.55; color: var(--teks-3); }
body.adm .od-jarak-atas { margin-top: 10px; }
body.adm .od-form-bawah-jarak { margin-top: 10px; }
body.adm .od-form-catatan { display: grid; gap: 8px; }
body.adm .od-form-catatan textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r-sedang);
  border: 1px solid var(--garis);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--teks);
  resize: vertical;
}
body.adm .od-form-catatan textarea:focus { outline: none; border-color: var(--gold-garis); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18); }
body.adm .od-form-bawah { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.adm .od-garis { border: 0; border-top: 1px solid var(--garis-2); margin: 14px 0 12px; }
body.adm .od-note { display: flex; gap: 8px; align-items: flex-start; }
body.adm .od-note-ingat {
  padding: 10px 12px;
  border-radius: var(--r-sedang);
  background: var(--gold-lembut);
  border: 1px solid var(--gold-garis);
  font-size: 12.5px;
  line-height: 1.55;
  color: #7a5300;
}
body.adm .od-note-ingat .ikon { flex: none; margin-top: 1px; }

/* Tombol: keadaan menyimpan dan nonaktif */
body.adm .btn.od-proses { opacity: 0.72; pointer-events: none; cursor: progress; }
body.adm .btn.od-proses::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: od-putar 0.7s linear infinite;
  display: inline-block;
}
@keyframes od-putar { to { transform: rotate(360deg); } }
body.adm .btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Dialog konfirmasi */
body.adm .od-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--r-kartu);
  max-width: 430px;
  width: calc(100% - 32px);
  box-shadow: var(--bayang-3);
  background: var(--kertas);
  color: var(--teks);
}
body.adm .od-dialog::backdrop { background: rgba(28, 25, 23, 0.45); backdrop-filter: blur(2px); }
body.adm .od-dialog-isi { padding: 22px; display: grid; gap: 10px; }
body.adm .od-dialog-isi h3 { margin: 0; font-size: 17px; font-weight: 800; }
body.adm .od-dialog-isi p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--teks-2); }
body.adm .od-dialog-aksi { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Notifikasi kecil */
body.adm .od-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 14px);
  z-index: 90;
  max-width: min(420px, calc(100% - 32px));
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--teks);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--bayang-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
body.adm .od-toast-tampil { opacity: 1; transform: translate(-50%, 0); }
body.adm .od-toast-ok { background: #2f6b3d; }
body.adm .od-toast-gagal { background: #a01b1b; }

/* Layar kecil */
@media (max-width: 1100px) {
  body.adm .od-grid { grid-template-columns: minmax(0, 1fr); }
  body.adm .od-side { position: static; }
}
@media (max-width: 720px) {
  body.adm .od-head { padding: 16px; }
  body.adm .od-head-aksi { width: 100%; }
  body.adm .od-head-aksi .btn { flex: 1 1 auto; justify-content: center; }
  body.adm .od-fields { grid-template-columns: minmax(0, 1fr); }
  body.adm .od-item { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; }
  body.adm .od-thumb { width: 44px; height: 44px; }
  body.adm .od-item-harga,
  body.adm .od-item-sub {
    grid-column: 2;
    text-align: left;
    min-width: 0;
  }
  body.adm .od-item-harga { display: flex; gap: 6px; align-items: baseline; }
  body.adm .od-item-sub { font-size: 13.5px; }
  body.adm .od-card { padding: 16px; }
}

/* ============================================================================
   PENGATURAN KONTEN WEBSITE (kp-*) — navigasi kelompok + panel isian +
   pratinjau langsung. Selaras dengan identitas marun-emas-krem Culinara.
   ========================================================================== */

body.adm .kp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 22px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fffdf9 0%, #f9f3e6 100%);
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-1);
}
body.adm .kp-head-kiri { min-width: 0; }
body.adm .kp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--merah);
}
body.adm .kp-judul {
  position: relative;
  margin: 0;
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
body.adm .kp-head.kp-ada-perubahan .kp-judul::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: super;
}
body.adm .kp-sub {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--teks-2);
}
body.adm .kp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.adm .kp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--garis-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--teks-2);
}
body.adm .kp-chip .ikon { color: var(--merah); }
body.adm .kp-chip-ok { background: var(--ok-lembut); border-color: #d8e4cf; color: var(--ok); }
body.adm .kp-chip-draf { background: var(--gold-lembut); border-color: var(--gold-garis); color: var(--gold-tua); }
body.adm .kp-head-aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

body.adm .kp-layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* ── Navigasi kelompok ───────────────────────────────────────────────── */
body.adm .kp-nav {
  display: grid;
  gap: 4px;
  padding: 10px;
  position: sticky;
  top: 16px;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-1);
}
body.adm .kp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sedang);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--teks-2);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.adm .kp-nav-item:hover { background: var(--ivory-2); color: var(--teks); }
body.adm .kp-nav-item.aktif {
  background: var(--merah);
  border-color: var(--merah);
  color: #fff;
}
body.adm .kp-nav-ikon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--gold-lembut);
  border: 1px solid var(--gold-garis);
  color: var(--merah);
}
body.adm .kp-nav-item.aktif .kp-nav-ikon {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--gold);
}
body.adm .kp-nav-teks { display: grid; gap: 1px; min-width: 0; flex: 1; }
body.adm .kp-nav-teks strong { font-size: 13.5px; font-weight: 700; }
body.adm .kp-nav-teks small { font-size: 11px; opacity: 0.75; }
body.adm .kp-nav-tanda {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #4a3200;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
body.adm .kp-nav-bantuan {
  display: flex;
  gap: 7px;
  margin-top: 6px;
  padding: 10px;
  border-radius: var(--r-sedang);
  background: var(--ivory-2);
  color: var(--teks-3);
}
body.adm .kp-nav-bantuan .ikon { flex: none; margin-top: 1px; color: var(--merah); }
body.adm .kp-nav-bantuan p { margin: 0; font-size: 11.5px; line-height: 1.5; }

/* ── Kelompok isian ──────────────────────────────────────────────────── */
body.adm .kp-form { display: grid; gap: 18px; min-width: 0; }
body.adm .kp-grup { display: grid; gap: 16px; }
body.adm .kp-grup-head { display: flex; align-items: flex-start; gap: 12px; }
body.adm .kp-grup-ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--merah);
  color: var(--gold);
  box-shadow: var(--bayang-2);
}
body.adm .kp-grup-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
body.adm .kp-grup-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--teks-3); max-width: 70ch; }

body.adm .kp-kartu { padding: 18px 20px; display: grid; gap: 14px; }
body.adm .kp-kartu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--garis-2);
}
body.adm .kp-kartu-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
body.adm .kp-kartu-head h3 .ikon { color: var(--merah); }
body.adm .kp-kartu-kanan { display: flex; align-items: center; gap: 8px; }
body.adm .kp-kartu-jumlah { font-size: 11.5px; font-weight: 600; color: var(--teks-3); }
body.adm .kp-lencana {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gold-lembut);
  border: 1px solid var(--gold-garis);
  color: var(--gold-tua);
  font-size: 11px;
  font-weight: 700;
}

body.adm .kp-isian {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
body.adm .kp-isian-baris { display: grid; gap: 5px; min-width: 0; }
body.adm .kp-isian-baris.lebar { grid-column: 1 / -1; }
body.adm .kp-isian-baris label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teks-3);
}
body.adm .kp-titik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-lembut);
}
body.adm .kp-isian-baris input[type="text"],
body.adm .kp-isian-baris textarea,
body.adm .kp-isian-baris select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--r-sedang);
  background: var(--kertas);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--teks);
}
body.adm .kp-isian-baris textarea { resize: vertical; min-height: 88px; }
body.adm .kp-isian-baris input[type="text"]:hover,
body.adm .kp-isian-baris textarea:hover { border-color: var(--garis-3, #d8d2c6); }
body.adm .kp-isian-baris input[type="text"]:focus,
body.adm .kp-isian-baris textarea:focus,
body.adm .kp-isian-baris select:focus {
  outline: none;
  border-color: var(--gold-garis);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2);
}
body.adm .kp-bantuan { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--teks-3); }

/* ikon */
body.adm .kp-ikon-pilih { display: flex; align-items: center; gap: 10px; }
body.adm .kp-ikon-pratinjau {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--ivory-2);
  border: 1px solid var(--garis);
  color: var(--merah);
}
body.adm .kp-ikon-pilih select { flex: 1; min-width: 0; }

/* gambar */
body.adm .kp-gambar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
body.adm .kp-gambar-kotak {
  width: 132px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-sedang);
  border: 1px dashed var(--garis);
  background: var(--ivory-2);
}
body.adm .kp-gambar-pratinjau { width: 100%; height: 100%; object-fit: contain; background: #fff; }
body.adm .kp-gambar-kosong {
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--teks-3);
  text-align: center;
  padding: 6px;
}
body.adm .kp-gambar-aksi { display: grid; gap: 8px; flex: 1; min-width: 180px; }
body.adm .kp-gambar-aksi input[type="file"] {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--teks-2);
  background: var(--ivory-2);
  border: 1px solid var(--garis-2);
  border-radius: var(--r-kecil);
  padding: 8px;
  width: 100%;
}
body.adm .kp-hapus { font-size: 12px; color: #8f1d1d; }

/* ── Bilah aksi per kelompok ─────────────────────────────────────────── */
body.adm .kp-aksi {
  position: sticky;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-2);
}
body.adm .kp-aksi-info {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--teks-3);
  min-width: 0;
}
body.adm .kp-aksi-info .ikon { color: var(--ok); flex: none; }
body.adm .kp-aksi-tombol { display: flex; gap: 8px; flex-wrap: wrap; }
body.adm .kp-aksi-tombol .btn { white-space: nowrap; }

/* ── Panel pratinjau ─────────────────────────────────────────────────── */
body.adm.kp-pratinjau-aktif { overflow: hidden; }
body.adm .kp-pratinjau { position: fixed; inset: 0; z-index: 120; }
body.adm .kp-pratinjau-latar {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.45);
  backdrop-filter: blur(2px);
}
body.adm .kp-pratinjau-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ivory-2);
  box-shadow: var(--bayang-3);
  animation: kp-masuk 0.22s ease-out;
}
@keyframes kp-masuk {
  from { transform: translateX(24px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}
body.adm .kp-pratinjau-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}
body.adm .kp-pratinjau-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}
body.adm .kp-pratinjau-head h2 .ikon { color: var(--merah); }
body.adm .kp-pratinjau-head p { margin: 4px 0 0; font-size: 12px; color: var(--teks-3); }
body.adm .kp-tutup {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--kertas);
  color: var(--teks-2);
  cursor: pointer;
}
body.adm .kp-tutup:hover { background: var(--merah-lembut); color: var(--merah); }
body.adm .kp-pratinjau-isi { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
body.adm .kp-pratinjau-catatan {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--teks-3);
}
body.adm .kp-pratinjau-catatan a { color: var(--merah); font-weight: 700; }

/* Mini tampilan website */
body.adm .kp-pv-situs {
  border-radius: var(--r-kartu);
  overflow: hidden;
  background: var(--kertas);
  border: 1px solid var(--garis);
  box-shadow: var(--bayang-2);
}
body.adm .kp-pv-bilah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--merah);
  color: #fff;
}
body.adm .kp-pv-merek { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
body.adm .kp-pv-cari {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}
body.adm .kp-pv-hero { padding: 18px 16px 20px; background: linear-gradient(160deg, #fffdf9, #f8efe0); }
body.adm .kp-pv-label {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-tua);
}
body.adm .kp-pv-judul {
  margin: 0;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--merah);
}
body.adm .kp-pv-judul em { color: var(--gold-tua); font-style: italic; }
body.adm .kp-pv-tagline { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--teks-2); }
body.adm .kp-pv-tombol { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
body.adm .kp-pv-btn {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--merah);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
body.adm .kp-pv-btn-2 { background: var(--gold); color: #4a3200; }
body.adm .kp-pv-poin {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: 11.5px;
  color: var(--teks-2);
}
body.adm .kp-pv-poin li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
body.adm .kp-pv-cerita,
body.adm .kp-pv-katalog { padding: 16px; border-top: 1px solid var(--garis-2); }
body.adm .kp-pv-kecil {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-tua);
}
body.adm .kp-pv-sub { margin: 0; font-size: 15px; letter-spacing: -0.02em; color: var(--merah); }
body.adm .kp-pv-sub em { color: var(--gold-tua); font-style: italic; }
body.adm .kp-pv-teks { margin: 6px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--teks-2); }
body.adm .kp-pv-footer { padding: 16px; background: var(--merah); color: #fff; }
body.adm .kp-pv-footer .kp-pv-merek { color: #fff; }
body.adm .kp-pv-footer .kp-pv-teks { color: rgba(255, 255, 255, 0.86); }
body.adm .kp-pv-copy { margin: 10px 0 0; font-size: 10.5px; color: rgba(255, 255, 255, 0.7); }
body.adm .kp-pv-aksen { color: var(--gold); font-style: normal; }
body.adm .kp-pv-kosong { opacity: 0.35; }

/* ── Notifikasi kecil ────────────────────────────────────────────────── */
body.adm .kp-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 14px);
  z-index: 140;
  max-width: min(420px, calc(100% - 32px));
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--teks);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--bayang-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
body.adm .kp-toast-tampil { opacity: 1; transform: translate(-50%, 0); }
body.adm .kp-toast-ok { background: #2f6b3d; }
body.adm .kp-toast-gagal { background: #a01b1b; }

/* ── Layar kecil ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body.adm .kp-layout { grid-template-columns: minmax(0, 1fr); }
  body.adm .kp-nav {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: thin;
  }
  body.adm .kp-nav-item { width: auto; flex: none; }
  body.adm .kp-nav-teks small { display: none; }
  body.adm .kp-nav-bantuan { display: none; }
}
@media (max-width: 720px) {
  body.adm .kp-head { padding: 16px; }
  body.adm .kp-head-aksi { width: 100%; }
  body.adm .kp-head-aksi .btn { flex: 1 1 auto; justify-content: center; }
  body.adm .kp-isian { grid-template-columns: minmax(0, 1fr); }
  body.adm .kp-kartu { padding: 14px; }
  body.adm .kp-aksi { position: static; }
  body.adm .kp-aksi-tombol { width: 100%; }
  body.adm .kp-aksi-tombol .btn { flex: 1 1 auto; justify-content: center; }
  body.adm .kp-pratinjau-panel { width: 100%; }
}

/* Elemen yang disembunyikan (kelompok isian yang tidak aktif) harus benar-benar hilang */
body.adm .kp-grup[hidden],
body.adm .kp-pratinjau[hidden] { display: none !important; }

/* ============================================================================
   KOMPONEN BERSAMA DASHBOARD (chip saringan, toolbar, empty state, dialog,
   notifikasi, keadaan menyimpan) — dipakai di semua halaman panel.
   ========================================================================== */

/* ── Chip saringan cepat ─────────────────────────────────────────────── */
body.adm .adm-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
body.adm .adm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--kertas);
  color: var(--teks-2);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.adm .adm-chip:hover { background: var(--ivory-2); color: var(--teks); }
body.adm .adm-chip b {
  font-weight: 800;
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ivory-2);
  color: var(--teks-3);
}
body.adm .adm-chip.aktif {
  background: var(--merah);
  border-color: var(--merah);
  color: #fff;
}
body.adm .adm-chip.aktif b { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ── Toolbar pencarian & saringan ────────────────────────────────────── */
body.adm .adm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-1);
}
body.adm .adm-cari {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--ivory);
}
body.adm .adm-cari:focus-within { border-color: var(--gold-garis); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18); }
body.adm .adm-cari .ikon { color: var(--teks-3); flex: none; }
body.adm .adm-cari input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--teks);
}
body.adm .adm-cari input:focus { outline: none; }
body.adm .adm-toolbar select {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--kertas);
  font-family: inherit;
  font-size: 13px;
  color: var(--teks);
  max-width: 100%;
}
body.adm .adm-toolbar select:focus { outline: none; border-color: var(--gold-garis); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18); }

body.adm .adm-hasil {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--teks-3);
}

/* ── Empty state ─────────────────────────────────────────────────────── */
body.adm .adm-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 44px 24px;
  text-align: center;
  background: var(--kertas);
  border: 1px dashed var(--garis);
  border-radius: var(--r-kartu);
}
body.adm .adm-empty-ikon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--gold-lembut);
  border: 1px solid var(--gold-garis);
  color: var(--merah);
}
body.adm .adm-empty h3 { margin: 6px 0 0; font-size: 16px; font-weight: 800; }
body.adm .adm-empty p {
  margin: 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--teks-3);
}
body.adm .adm-empty .btn { margin-top: 8px; }

/* ── Baris tabel yang bisa diklik ────────────────────────────────────── */
body.adm tr[data-href] { cursor: pointer; }
body.adm tr[data-href]:hover { background: #fffaf0; }

/* ── Keadaan menyimpan ───────────────────────────────────────────────── */
body.adm .btn.adm-proses,
body.adm .btn-mini.adm-proses,
body.adm .pill-toggle.adm-proses { opacity: 0.7; pointer-events: none; cursor: progress; }
body.adm .btn.adm-proses::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: adm-putar 0.7s linear infinite;
  display: inline-block;
}
@keyframes adm-putar { to { transform: rotate(360deg); } }

/* ── Dialog konfirmasi ───────────────────────────────────────────────── */
body.adm .adm-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--r-kartu);
  max-width: 430px;
  width: calc(100% - 32px);
  background: var(--kertas);
  color: var(--teks);
  box-shadow: var(--bayang-3);
}
body.adm .adm-dialog::backdrop { background: rgba(28, 25, 23, 0.45); backdrop-filter: blur(2px); }
body.adm .adm-dialog-isi { padding: 22px; display: grid; gap: 10px; }
body.adm .adm-dialog-judul { margin: 0; font-size: 17px; font-weight: 800; }
body.adm .adm-dialog-pesan { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--teks-2); }
body.adm .adm-dialog-aksi { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ── Notifikasi kecil ────────────────────────────────────────────────── */
body.adm .adm-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 14px);
  z-index: 150;
  max-width: min(420px, calc(100% - 32px));
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--teks);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--bayang-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
body.adm .adm-toast-tampil { opacity: 1; transform: translate(-50%, 0); }
body.adm .adm-toast-ok { background: #2f6b3d; }
body.adm .adm-toast-gagal { background: #a01b1b; }

/* ── Bilah aksi bawah untuk formulir panjang ─────────────────────────── */
body.adm .adm-aksi-bawah {
  position: sticky;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-2);
}
body.adm .adm-aksi-bawah .btn { white-space: nowrap; }

@media (max-width: 720px) {
  body.adm .adm-toolbar { padding: 10px; }
  body.adm .adm-cari { flex: 1 1 100%; }
  body.adm .adm-toolbar select,
  body.adm .adm-toolbar .btn { flex: 1 1 auto; }
  body.adm .adm-aksi-bawah { position: static; }
  body.adm .adm-aksi-bawah .btn { flex: 1 1 auto; justify-content: center; }
}