/* Tampilan panel admin — palet gelap Business OS, Plus Jakarta Sans.
   Gelap dipakai di "rangka"-nya saja. Isi halaman yang sedang dibangun tetap
   digambar dengan warna aslinya di dalam pratinjau, karena yang dinilai orang
   di situ adalah bagaimana rupanya nanti bagi pengunjung — bukan bagaimana
   rupanya di dalam admin. */

:root {
  --ad-bg:      #0F1115;
  --ad-panel:   #171A21;
  --ad-panel2:  #1E222B;
  --ad-garis:   #262B36;
  --ad-teks:    #E6E9EF;
  --ad-redup:   #9AA4B2;
  --ad-aksen:   #3B82F6;
  --ad-hijau:   #22C55E;
  --ad-merah:   #EF4444;
  --ad-kuning:  #F59E0B;
  --ad-radius:  10px;
}

*, *::before, *::after { box-sizing: border-box; }

body.ad, body.ad-masuk {
  margin: 0;
  background: var(--ad-bg);
  color: var(--ad-teks);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--ad-aksen); }

/* --------------------------------------------------------------- masuk --- */

body.ad-masuk { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.ad-kotak-masuk {
  width: 100%; max-width: 380px; background: var(--ad-panel);
  border: 1px solid var(--ad-garis); border-radius: 14px; padding: 32px 28px; text-align: center;
}
.ad-kotak-masuk h1 { margin: 0 0 6px; font-size: 21px; }
.ad-kotak-masuk .ad-sub { margin: 0 0 22px; font-size: 13px; }

/* Tombol Google dibuat putih dengan lambang aslinya, bukan disamakan dengan
   warna panel. Orang mengenali tombol ini dari rupanya, dan tombol masuk yang
   tidak langsung dikenali adalah tombol yang bikin orang ragu menekannya. */
.ad-tbl-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px; border-radius: 8px; background: #fff; color: #1f1f1f;
  font-weight: 700; font-size: 14.5px; text-decoration: none; border: 1px solid #dadce0;
}
.ad-tbl-google:hover { background: #f5f5f5; }
.ad-catatan-masuk { margin: 18px 0 0; font-size: 11.5px; color: var(--ad-redup); line-height: 1.5; }
.ad-galat { background: rgba(239, 68, 68, .12); color: #FCA5A5; padding: 9px 12px; border-radius: 8px; font-size: 13px; }

/* --------------------------------------------------------------- rangka -- */

body.ad { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.ad-sisi {
  background: var(--ad-panel); border-right: 1px solid var(--ad-garis);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.ad-merek { padding: 18px 18px 14px; border-bottom: 1px solid var(--ad-garis); }
.ad-merek b { display: block; font-size: 15px; }
.ad-merek span { display: block; font-size: 11px; color: var(--ad-redup); overflow-wrap: anywhere; }
.ad-sisi nav { padding: 10px 0; flex: 1; }
.ad-sisi nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  color: var(--ad-redup); text-decoration: none; font-weight: 600; font-size: 13.5px;
}
.ad-sisi nav a span { width: 18px; text-align: center; opacity: .9; }
.ad-sisi nav a:hover { background: var(--ad-panel2); color: var(--ad-teks); }
.ad-sisi nav a.aktif { background: var(--ad-panel2); color: #fff; box-shadow: inset 3px 0 0 var(--ad-aksen); }
.ad-sisi-kaki { padding: 12px 18px; border-top: 1px solid var(--ad-garis); display: grid; gap: 8px; }
.ad-sisi-kaki a { color: var(--ad-redup); text-decoration: none; font-size: 12.5px; }
.ad-sisi-kaki a:hover { color: var(--ad-teks); }

.ad-utama { padding: 28px 32px 60px; max-width: 980px; }
.ad-utama.lebar { max-width: none; }
.ad-utama h1 { font-size: 24px; margin: 0 0 6px; }
.ad-utama h2 { font-size: 16px; margin: 30px 0 10px; color: var(--ad-redup); text-transform: uppercase; letter-spacing: .6px; }
.ad-sub { color: var(--ad-redup); margin: 0 0 22px; }

.ad-kepala { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ad-kepala-aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --------------------------------------------------------------- kartu --- */

.ad-kartu-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ad-kartu {
  background: var(--ad-panel); border: 1px solid var(--ad-garis); border-radius: var(--ad-radius);
  padding: 18px; text-decoration: none; color: inherit; display: block;
}
.ad-kartu:hover { border-color: var(--ad-aksen); }
.ad-kartu b { display: block; font-size: 28px; line-height: 1.1; }
.ad-kartu span { color: var(--ad-redup); font-size: 13px; }
.ad-kartu.tekan { background: var(--ad-aksen); border-color: var(--ad-aksen); }
.ad-kartu.tekan span { color: rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------- tabel --- */

.ad-tabel { width: 100%; border-collapse: collapse; background: var(--ad-panel); border: 1px solid var(--ad-garis); border-radius: var(--ad-radius); overflow: hidden; }
.ad-tabel th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ad-redup); padding: 10px 14px; border-bottom: 1px solid var(--ad-garis); }
.ad-tabel td { padding: 12px 14px; border-bottom: 1px solid var(--ad-garis); vertical-align: middle; }
.ad-tabel tr:last-child td { border-bottom: 0; }
.ad-tabel tr:hover td { background: var(--ad-panel2); }
.ad-tabel a { text-decoration: none; }
.ad-tabel small { display: block; color: var(--ad-redup); font-size: 12px; }
.ad-tabel .kanan { text-align: right; white-space: nowrap; }
.ad-seret { cursor: grab; color: var(--ad-redup); width: 28px; user-select: none; font-size: 16px; }
.ad-tabel tr.seret-aktif { opacity: .45; }

.ad-aksi { white-space: nowrap; }
.ad-aksi a, .ad-aksi button {
  display: inline-block; margin-right: 10px; background: none; border: 0; padding: 0;
  color: var(--ad-aksen); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none;
}
.ad-aksi a:hover, .ad-aksi button:hover { text-decoration: underline; }
.ad-aksi .bahaya { color: var(--ad-merah); }

.ad-tanda { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.ad-tanda.biru { background: rgba(59, 130, 246, .18); color: #93C5FD; }
.ad-tanda.abu  { background: rgba(154, 164, 178, .18); color: var(--ad-redup); }

.ad-foto-sel { width: 46px; }
.ad-foto { width: 30px; height: 30px; border-radius: 50%; display: block; object-fit: cover; }
.ad-foto-kosong { display: grid; place-items: center; background: var(--ad-panel2); color: var(--ad-redup); font-size: 13px; }

/* -------------------------------------------------------------- tombol --- */

button, .ad-utama-tbl {
  font-family: inherit;
}
.ad-utama-tbl {
  background: var(--ad-panel2); color: var(--ad-teks); border: 1px solid var(--ad-garis);
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ad-utama-tbl:hover { border-color: var(--ad-aksen); }
.ad-utama-tbl.tekan { background: var(--ad-aksen); border-color: var(--ad-aksen); color: #fff; }

.ad-cari { display: flex; gap: 6px; }
.ad-cari input, #ad-urut, .ad-form input, .ad-form select, .ad-form textarea {
  background: var(--ad-panel2); border: 1px solid var(--ad-garis); color: var(--ad-teks);
  padding: 8px 11px; border-radius: 8px; font: inherit; font-size: 13px;
}
.ad-cari button { background: var(--ad-panel2); border: 1px solid var(--ad-garis); color: var(--ad-teks); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }

/* ------------------------------------------------------------- formulir -- */

.ad-form { max-width: 460px; display: grid; gap: 14px; background: var(--ad-panel); border: 1px solid var(--ad-garis); border-radius: var(--ad-radius); padding: 22px; }
.ad-form label { display: grid; gap: 5px; font-size: 13px; color: var(--ad-redup); font-weight: 600; }
.ad-form button[type=submit] { justify-self: start; background: var(--ad-aksen); color: #fff; border: 0; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.ad-petunjuk { font-weight: 400; opacity: .75; }
.ad-favicon { display: flex; gap: 6px; }
.ad-favicon input { flex: 1; }
.ad-favicon button { background: var(--ad-panel2); border: 1px solid var(--ad-garis); color: var(--ad-teks); border-radius: 8px; padding: 0 10px; cursor: pointer; font-size: 12px; }
.ad-kabar { margin: 0; font-size: 13px; min-height: 18px; }

/* ---------------------------------------------------------------- media -- */

.ad-media-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ad-media-butir {
  margin: 0; background: var(--ad-panel); border: 1px solid var(--ad-garis);
  border-radius: var(--ad-radius); overflow: hidden; position: relative;
}
.ad-media-butir img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--ad-panel2); }
.ad-media-ikon { display: grid; place-items: center; aspect-ratio: 4/3; font-size: 34px; background: var(--ad-panel2); }
.ad-media-butir figcaption { padding: 8px 10px; font-size: 12px; overflow-wrap: anywhere; }
.ad-media-butir figcaption small { display: block; color: var(--ad-redup); font-size: 11px; }
.ad-media-hapus {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff; border: 0; cursor: pointer; line-height: 1;
}

/* --------------------------------------------------------------- dialog -- */

.ad-tirai { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 90; padding: 20px; }
.ad-dialog {
  background: var(--ad-panel); border: 1px solid var(--ad-garis); border-radius: 14px;
  padding: 22px; width: 100%; max-width: 420px; max-height: 88vh; overflow: auto;
}
.ad-dialog h2 { margin: 0 0 14px; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--ad-teks); }
.ad-dialog label { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--ad-redup); font-weight: 600; }
.ad-dialog input, .ad-dialog select, .ad-dialog textarea {
  background: var(--ad-bg); border: 1px solid var(--ad-garis); color: var(--ad-teks);
  padding: 9px 11px; border-radius: 8px; font: inherit; font-size: 14px; width: 100%;
}
.ad-dialog-kaki { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.ad-dialog-kaki button { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--ad-garis); background: var(--ad-panel2); color: var(--ad-teks); cursor: pointer; font-weight: 600; font-size: 13px; }
.ad-dialog-kaki button.tekan { background: var(--ad-aksen); border-color: var(--ad-aksen); color: #fff; }
.ad-dialog-kaki button.bahaya { background: var(--ad-merah); border-color: var(--ad-merah); color: #fff; }
.ad-dialog-galat { color: #FCA5A5; font-size: 13px; min-height: 18px; margin: 0; }

.ad-roti {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #111; border: 1px solid var(--ad-garis); color: #fff; padding: 10px 18px;
  border-radius: 999px; font-size: 13px; z-index: 200; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ad-roti.salah { background: var(--ad-merah); border-color: var(--ad-merah); }

@media (max-width: 760px) {
  body.ad { grid-template-columns: 1fr; }
  .ad-sisi { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ad-sisi nav { display: flex; overflow-x: auto; padding: 6px; }
  .ad-sisi nav a { padding: 8px 12px; white-space: nowrap; }
  .ad-sisi-kaki { border-top: 0; display: flex; }
  .ad-utama { padding: 18px 16px 50px; }
}