/* Back office Janévalla — memakai sistem token yang sama dengan JANERS
   (explorejanevalla.com): DM Sans, brand hsl(244 84% 67%), radius 10px,
   kartu putih di atas latar 97.3%, dan bayangan dua lapis yang lembut.
   Nilainya diambil langsung dari :root aplikasi itu, bukan dikira-kira,
   supaya kedua panel terasa satu keluarga. */
:root {
  --background: 0 0% 97.3%;
  --foreground: 0 0% 6%;
  --card: 0 0% 100%;
  --border: 0 0% 89%;
  --muted: 0 0% 94.9%;
  --muted-foreground: 0 0% 42%;   /* 5.0:1 on the page, 5.3:1 on cards (WCAG AA) */
  --brand: 244 84% 60%;   /* white on it 6.2:1 */
  --brand-lembut: 244 84% 96%;
  --destructive: 0 72% 51%;
  --sukses: 152 60% 36%;
  --radius: .625rem;
  --sisi-lebar: 250px;
  --bayang: 0 1px 2px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
  --bayang-naik: 0 2px 4px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.05);
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-judul: var(--font);   /* satu keluarga: DM Sans terbaca di 13px formulir padat, judul cukup dibedakan bobot */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.55;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}
a { color: hsl(var(--brand)); text-decoration: none; }
h1, h2, h3 { font-family: var(--font-judul); letter-spacing: -.01em; margin: 0; }
.lirih { color: hsl(var(--muted-foreground)); font-size: 13px; }
.kanan { text-align: right; }

/* ---------------------------------------------------------- kerangka --- */
.app { display: flex; min-height: 100vh; }
.sisi {
  width: var(--sisi-lebar); flex: 0 0 var(--sisi-lebar);
  background: hsl(var(--card)); border-right: 1px solid hsl(var(--border));
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.merek {
  display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px;
  color: hsl(var(--foreground));
}
.merek-tanda {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  background: hsl(var(--brand)); color: #fff; display: grid; place-items: center;
  font-family: var(--font-judul); font-weight: 700; font-size: 16px;
}
.merek-tanda.besar { width: 44px; height: 44px; font-size: 21px; border-radius: 12px; }
.merek-teks { display: flex; flex-direction: column; font-size: 13px; line-height: 1.25; }
.merek-teks b { font-family: var(--font-judul); font-size: 14px; }

.sisi-nav { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.sisi-grup { margin-bottom: 14px; }
.sisi-grup > span {
  display: block; padding: 6px 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.sisi-a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 1px;
  border-radius: calc(var(--radius) - 2px); color: hsl(var(--muted-foreground));
  font-weight: 500; font-size: 13.5px;
}
.sisi-a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.sisi-a.aktif { background: hsl(var(--muted)); color: hsl(var(--foreground)); font-weight: 700; }
.sisi-a.aktif .ikon { color: hsl(var(--brand)); }
.ikon { width: 17px; height: 17px; flex: 0 0 17px; }

.sisi-kaki {
  display: flex; align-items: center; gap: 6px; padding: 10px;
  border-top: 1px solid hsl(var(--border));
}
.sisi-akun {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 6px;
  border-radius: calc(var(--radius) - 2px); color: hsl(var(--foreground)); min-width: 0;
}
.sisi-akun:hover { background: hsl(var(--muted)); }
.avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 999px;
  background: hsl(var(--brand-lembut)); color: hsl(var(--brand));
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.sisi-akun-teks { display: flex; flex-direction: column; min-width: 0; }
.sisi-akun-teks b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sisi-keluar {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  color: hsl(var(--muted-foreground));
}
.sisi-keluar:hover { background: hsl(var(--muted)); color: hsl(var(--destructive)); }

.utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; background: hsl(var(--background) / .88);
  backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border));
}
.bar h1 { font-size: 18px; font-weight: 700; flex: 1; }
.bar-aksi { display: flex; gap: 8px; }
.isi { padding: 22px 24px 72px; max-width: 1180px; width: 100%; }

/* ------------------------------------------------------------ elemen --- */
.panel {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--bayang);
}
.panel.sempit { max-width: 460px; }
.panel-judul { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.panel-alat { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-alat .panel-judul { margin-bottom: 0; }
.petunjuk {
  background: hsl(var(--brand-lembut)); border: 1px solid hsl(var(--brand) / .25);
  border-radius: var(--radius); padding: 11px 14px; margin: 0 0 16px; font-size: 13px;
}

.stat-baris { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stat {
  flex: 1 1 130px; background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--bayang);
}
.stat b { display: block; font-family: var(--font-judul); font-size: 22px; line-height: 1.15; }
.stat span { font-size: 12px; color: hsl(var(--muted-foreground)); }

.petak-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.petak {
  display: block; border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  padding: 14px; color: hsl(var(--foreground)); background: hsl(var(--card));
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.petak:hover {
  border-color: hsl(var(--brand) / .55); box-shadow: var(--bayang-naik); transform: translateY(-1px);
}
.petak-ikon {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px;
  border-radius: 9px; background: hsl(var(--brand-lembut)); color: hsl(var(--brand));
}
.petak b { display: block; font-size: 13.5px; }
.petak-ket { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }

/* Kartu status: satu-satunya hal di dashboard yang tidak bisa dijawab menu --
   apakah ada yang belum tayang. */
.status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 18px; margin-bottom: 16px;
  border-radius: var(--radius); border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); box-shadow: var(--bayang);
}
.status-teks b { display: block; font-family: var(--font-judul); font-size: 15px; }
.status-teks span { font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.status.perlu { border-left: 3px solid hsl(38 92% 50%); }
.status.aman { border-left: 3px solid hsl(var(--sukses)); }

.pintas-baris { display: flex; flex-wrap: wrap; gap: 9px; }
.pintas {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--foreground)); font-size: 13px; font-weight: 500; background: hsl(var(--card));
}
.pintas:hover { border-color: hsl(var(--brand) / .55); background: hsl(var(--brand-lembut)); }
.pintas .ikon { color: hsl(var(--brand)); }

.daftar-periksa {
  list-style: none; margin: 0 0 10px; padding: 0; font-size: 12.5px;
  max-height: 220px; overflow: auto;
}
.daftar-periksa li {
  padding: 5px 0 5px 16px; position: relative; color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border));
}
.daftar-periksa li::before {
  content: "•"; position: absolute; left: 2px; color: hsl(38 92% 50%); font-weight: 700;
}

.jejak { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.jejak li { padding: 7px 0; border-bottom: 1px solid hsl(var(--border)); }
.jejak li:last-child { border: 0; }
.waktu { display: inline-block; width: 96px; color: hsl(var(--muted-foreground)); font-size: 12px; }

/* -------------------------------------------------------- formulir ----- */
label { display: block; margin-bottom: 13px; font-size: 12.5px; font-weight: 500; }
input:not([type=checkbox]):not([type=file]):not([type=radio]),
textarea, select {
  display: block; width: 100%; margin-top: 5px; padding: 8px 11px; font: inherit;
  font-weight: 400; color: hsl(var(--foreground)); background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid hsl(var(--brand) / .45); outline-offset: 1px;
  border-color: hsl(var(--brand));
}

.tbl, .utama-tbl {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--card)); color: hsl(var(--foreground));
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.tbl:hover { background: hsl(var(--muted)); }
.utama-tbl {
  background: hsl(var(--brand)); border-color: hsl(var(--brand)); color: #fff; font-weight: 700;
}
.utama-tbl:hover { background: hsl(244 84% 54%); }
.utama-tbl.lebar { width: 100%; justify-content: center; padding: 10px; }
.kecil { padding: 5px 10px; font-size: 12px; }
.bahaya { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .4); }
.bahaya:hover { background: hsl(var(--destructive) / .08); }
button[disabled] { opacity: .5; cursor: default; }

.bar-simpan {
  position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center;
  padding: 14px 0 2px; margin-top: 16px; border-top: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
.galat { color: hsl(var(--destructive)); font-size: 13px; margin: 0 0 10px; }
.lapor {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--brand)); border-radius: var(--radius);
  padding: 12px 14px; font-size: 12.5px; white-space: pre-wrap; margin-bottom: 16px;
}

.lencana {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.lencana-admin { background: hsl(var(--brand-lembut)); color: hsl(var(--brand)); }
.lencana-editor { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lencana-mati { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.lencana-2fa { background: hsl(var(--sukses) / .14); color: hsl(var(--sukses)); }

/* --------------------------------------------------------- dua faktor --- */
.pemisah { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.pemisah::before, .pemisah::after {
  content: ""; flex: 1; height: 1px; background: hsl(var(--border));
}
.pemisah span { font-size: 11px; color: hsl(var(--muted-foreground)); }
.tbl.lebar { width: 100%; justify-content: center; padding: 10px; }

.totp-daftar { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.totp-qr {
  flex: 0 0 auto; padding: 10px; background: #fff; border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}
/* Cukup besar untuk dipindai dari layar: modul QR kira-kira 5px, bukan 3px. */
.totp-qr svg { display: block; width: 240px; height: 240px; }
.totp-langkah { flex: 1 1 260px; font-size: 13px; }
.totp-langkah p { margin: 0 0 10px; }
.kunci {
  display: inline-block; margin-top: 4px; padding: 5px 9px; font-size: 13px;
  letter-spacing: .08em; background: hsl(var(--muted)); border-radius: 6px;
  word-break: break-all;
}
.kode-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.kode-grid code {
  display: block; padding: 8px 10px; background: hsl(var(--muted));
  border-radius: 6px; font-size: 13px; letter-spacing: .05em; text-align: center;
}
#kode-pulih { border-left: 3px solid hsl(38 92% 50%); }
.pulih-buka { text-align: left; margin-top: 14px; }
.pulih-buka summary {
  cursor: pointer; font-size: 12.5px; color: hsl(var(--muted-foreground));
}
.pulih-buka label { margin-top: 10px; }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 8px; }

.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); font-weight: 500;
  padding: 0 10px 8px; border-bottom: 1px solid hsl(var(--border));
}
.tabel td { padding: 10px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.daftar-peran { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.daftar-peran li { padding: 6px 0; }

/* ---------------------------------------------------------- editor ----- */
.baris {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  padding: 15px 15px 3px; margin-bottom: 10px; background: hsl(var(--card));
}
.baris-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -3px 0 12px; font-size: 12px; color: hsl(var(--muted-foreground));
}
.baris-alat { display: flex; gap: 5px; }
.medan-gambar { display: flex; gap: 12px; align-items: flex-start; }
.medan-gambar > img {
  width: 92px; height: 68px; object-fit: cover; border-radius: 8px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted));
}
.medan-gambar .isi-medan { flex: 1; min-width: 0; }
.daftar-gambar { display: flex; flex-wrap: wrap; gap: 9px; }
.ubin {
  width: 106px; border: 1px solid hsl(var(--border)); border-radius: 9px;
  padding: 5px; background: hsl(var(--card));
}
.ubin img, .ubin video { width: 100%; height: 74px; object-fit: cover; border-radius: 6px; display: block; background: #000; }
.ubin code { display: block; font-size: 10px; word-break: break-all;
  color: hsl(var(--muted-foreground)); margin: 4px 0 3px; }
.ubin .alat { display: flex; gap: 3px; }
.ubin .alat button { padding: 2px 6px; font-size: 11px; }

/* ----------------------------------------------------- pustaka media --- */
.media-alat { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; align-items: center; }
.media-alat input[type=search] { flex: 1 1 220px; margin: 0; }
.media-alat select { width: auto; margin: 0; }
.unggah-tbl { margin: 0; }
/* Baris kedua: tujuan unggahan. Dipisah dari baris saring supaya "cari" dan
   "unggah ke" tidak terbaca sebagai pasangan -- keduanya kotak teks. */
.media-alat-2 { margin: -4px 0 14px; padding-top: 10px; border-top: 1px solid hsl(var(--border)); }
.media-alat-2 input { flex: 0 1 320px; margin: 0; }
.media-alat-2 label { margin: 0; font-weight: 600; }
.media-alat-2 code { font-size: 12px; }
/* Penjelajah folder */
.remah { margin: 0 0 12px; font-size: 14px; color: hsl(var(--muted-foreground)); }
.remah b { color: hsl(var(--foreground)); }
.remah-a {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: hsl(var(--brand)); text-decoration: underline; text-underline-offset: 2px;
}
/* display:flex mengalahkan display:none bawaan [hidden], jadi bar ini tetap
   terlihat walau tidak ada yang dipilih. Harus disebut ulang. */
.bar-pilih[hidden] { display: none; }
.bar-pilih {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius);
  background: hsl(var(--brand) / .08); border: 1px solid hsl(var(--brand) / .28);
  font-size: 14px; font-weight: 600;
}
.pilih-sela { flex: 1; }
.mfolder { cursor: pointer; }
.mfolder:hover { border-color: hsl(var(--brand) / .5); }
.mfolder-gbr { display: flex; align-items: center; justify-content: center; }
.mfolder-gbr svg { width: 46px; height: 46px; color: hsl(var(--muted-foreground)); }
/* Kotak centang duduk DI ATAS gambar: baris aksinya sudah penuh, dan menaruh
   pilihan di sana membuat "pilih" gampang tertukar dengan "hapus". */
.mcek { position: absolute; top: 6px; left: 6px; margin: 0; z-index: 2; }
.mcek input { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: hsl(var(--brand)); }
.mkartu.terpilih { border-color: hsl(var(--brand)); box-shadow: 0 0 0 2px hsl(var(--brand) / .25); }
/* Pemilih warna: kotak warna + kolom teksnya berdampingan.
   Ditulis lebih spesifik daripada aturan input umum di atas, yang memaksa
   width:100% dan membuat kotak warnanya memenuhi baris. */
.medan-warna { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.medan-warna input[type="color"]:not([type=checkbox]) {
  width: 46px; min-width: 46px; height: 38px; flex: 0 0 46px;
  padding: 3px; margin: 0; cursor: pointer;
}
.medan-warna input[type="text"]:not([type=checkbox]) { flex: 1 1 auto; margin: 0; }

.media-grid { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.mkartu {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  overflow: hidden; background: hsl(var(--card));
}
.mkartu-gbr {
  position: relative; height: 116px; background: hsl(var(--muted));
  display: grid; place-items: center;
}
.mkartu-gbr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkartu-vid { font-size: 12px; color: hsl(var(--muted-foreground)); }
.mkartu-badge {
  position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: hsl(var(--sukses) / .15); color: hsl(var(--sukses));
}
.mkartu-badge.nganggur { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.mkartu-isi { padding: 9px 10px 10px; }
.mkartu-isi code { font-size: 11px; word-break: break-all; }
.mkartu-meta { font-size: 11px; color: hsl(var(--muted-foreground)); margin: 3px 0 7px; }
.mkartu-aksi { display: flex; gap: 5px; }
.mkartu-aksi button { padding: 3px 8px; font-size: 11px; }

/* ---------------------------------------------------------- dialog ----- */
dialog {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0;
  width: min(680px, 93vw); max-height: 86vh; box-shadow: var(--bayang-naik);
  background: hsl(var(--card)); color: hsl(var(--foreground));
}
dialog::backdrop { background: rgba(15,15,15,.45); backdrop-filter: blur(2px); }
.dlg-isi { padding: 18px; overflow: auto; max-height: 76vh; }
.dlg-judul { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.dlg-kaki { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.pilih-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.pilih-grid button { padding: 4px; display: block; text-align: left; }
.pilih-grid img { width: 100%; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.pilih-grid span { display: block; font-size: 10px; word-break: break-all;
  color: hsl(var(--muted-foreground)); margin-top: 3px; }

/* ------------------------------------------------------------ masuk ---- */
.masuk-latar { min-height: 100vh; display: grid; place-items: center; padding: 20px;
               background-size: cover; background-position: center; }
.masuk-latar[style] .masuk-kartu { background: hsl(var(--background) / .94); backdrop-filter: blur(6px); }
.jam-bar { font-size: 12.5px; color: hsl(var(--muted-foreground)); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 880px) { .jam-bar { display: none; } }
.masuk-kartu {
  width: min(370px, 100%); background: hsl(var(--card)); padding: 30px 26px 22px;
  border: 1px solid hsl(var(--border)); border-radius: 14px;
  box-shadow: var(--bayang-naik); text-align: center;
}
.masuk-logo { display: block; margin: 0 auto 16px; height: 46px; width: auto; }
.merek-logo { height: 26px; width: auto; flex: 0 0 auto; }
.masuk-kartu h1 { font-size: 20px; }
.masuk-kartu .sub { color: hsl(var(--muted-foreground)); font-size: 13px; margin: 4px 0 20px; }
.masuk-kartu label { text-align: left; }
.kaki-masuk { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 16px 0 0; }

/* ----------------------------------------------------------- sempit ---- */
.hanya-sempit { display: none; }
@media (max-width: 880px) {
  .sisi {
    position: fixed; z-index: 60; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--bayang-naik);
  }
  .sisi.buka { transform: none; }
  .hanya-sempit { display: inline-flex; }
  .isi { padding: 16px 14px 60px; }
  .bar { padding: 12px 14px; }
  .bar h1 { font-size: 16px; }
}

/* ---------- Penyunting link hub: dua kolom + pratinjau telepon ---------- */
.dua-kolom { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 372px; align-items: start; }
@media (max-width: 1100px) { .dua-kolom { grid-template-columns: minmax(0, 1fr); } }

.pratinjau { position: sticky; top: 18px; }
.pratinjau-kepala {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-weight: 600; font-size: 14px;
}
/* Bingkai telepon: pratinjau link hub hampir selalu dibuka dari bio Instagram,
   jadi menilainya di lebar desktop menyesatkan. */
.telepon {
  width: 100%; aspect-ratio: 372 / 720; border-radius: 26px; overflow: hidden;
  border: 8px solid hsl(0 0% 12%); background: #fff;
  box-shadow: 0 14px 40px rgb(0 0 0 / .18);
}
.telepon iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Bingkai situs utama: deck 16:9, jadi pratinjaunya lebar. */
.dua-kolom-lebar { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.isi:has(.dua-kolom-lebar) { max-width: none; }
@media (max-width: 1100px) { .dua-kolom-lebar { grid-template-columns: minmax(0, 1fr); } }
.layar {
  width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  border: 6px solid hsl(0 0% 12%); background: #fff; box-shadow: 0 14px 40px rgb(0 0 0 / .18);
}
.layar iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Tampilan ponsel: bingkai 375px supaya iframe memicu tata letak tumpuk situs. */
.layar.ponsel { width: 375px; max-width: 100%; aspect-ratio: 375 / 780; margin: 0 auto; border-radius: 26px; border-width: 8px; }
.pratinjau-alat { display: flex; gap: 6px; align-items: center; }
.pratinjau-alat [aria-pressed="true"] { background: hsl(var(--brand)); border-color: hsl(var(--brand)); color: #fff; }

/* Panel desain: baris yang bisa dibuka */
.gaya-grup { border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin-bottom: 9px; }
.gaya-grup > summary {
  cursor: pointer; padding: 13px 15px; font-weight: 600; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.gaya-grup > summary::-webkit-details-marker { display: none; }
.gaya-grup > summary::after { content: "▸"; opacity: .5; transition: transform .18s ease; }
.gaya-grup[open] > summary::after { transform: rotate(90deg); }
.gaya-grup[open] > summary { border-bottom: 1px solid hsl(var(--border)); }
.gaya-isi { padding: 4px 15px 14px; }

/* Daftar tombol link hub */
.butir-blok { margin-top: 20px; }
.butir-daftar { display: grid; gap: 9px; margin-bottom: 12px; }
.butir {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card));
}
/* Judul bagian dibedakan supaya tidak terbaca sebagai tombol yang lupa diisi. */
.butir-bagian { background: hsl(var(--muted)); border-style: dashed; }
.butir-bagian .butir-isi input { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.butir-isi { flex: 1; min-width: 0; display: grid; gap: 7px; }
.butir-isi input { margin: 0; }
.butir-baris2 { display: flex; gap: 7px; }
.butir-ikon { flex: 0 0 62px; text-align: center; }
.butir-alat { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 108px; }

/* Sakelar on/off ala Linktree */
.sakelar { position: relative; flex: none; margin: 6px 0 0; width: 38px; height: 22px; cursor: pointer; }
.sakelar input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.sakelar-alur {
  position: absolute; inset: 0; border-radius: 999px; background: hsl(var(--border));
  transition: background .18s ease;
}
.sakelar-alur::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .18s ease;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
.sakelar input:checked + .sakelar-alur { background: hsl(142 71% 40%); }
.sakelar input:checked + .sakelar-alur::after { transform: translateX(16px); }
.sakelar input:focus-visible + .sakelar-alur { outline: 2px solid hsl(var(--brand) / .5); outline-offset: 2px; }

/* Pemilih berkas: penjelajah folder yang sama dengan pustaka media */
.pilih-alat { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pilih-alat input[type=search] { margin: 0; flex: 1; }
.pilih-alat > label { flex: none; margin: 0; cursor: pointer; }
.pilih-png input { margin: 0 4px 0 0; }
.pilih-folder { flex-direction: column; gap: 6px; justify-content: center; }
.pilih-folder-ikon { font-size: 26px; line-height: 1; }


/* Tombol Terbitkan saat ada perubahan yang belum tayang. Titik, bukan warna
   lain: tombolnya sudah tombol utama, mengubah warnanya justru membuat
   keadaan "sudah tayang" terlihat seperti tombol nonaktif. */
.utama-tbl.perlu-terbit { position: relative; }
.utama-tbl.perlu-terbit::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: hsl(38 92% 50%); box-shadow: 0 0 0 2px hsl(var(--background));
}

/* Urutan section: satu baris per section, cuma bisa digeser. */
.urutan { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 420px; }
.urutan-baris { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.urutan-baris span { flex: 1; font-weight: 600; }

/* E-menus: satu kartu per menu, QR di kiri. */
.emenu-kartu { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0;
  border-top: 1px solid hsl(var(--border)); }
.emenu-qr { flex: 0 0 auto; padding: 6px; background: #fff; border: 1px solid hsl(var(--border));
  border-radius: var(--radius); }
.emenu-qr svg { display: block; width: 132px; height: 132px; }
.emenu-isi { flex: 1 1 auto; min-width: 0; }
.emenu-isi h3 { margin: 0 0 4px; font-size: 16px; }
.emenu-isi h3 code { font-weight: 400; font-size: 12px; opacity: .7; margin-left: 6px; }
.emenu-isi p { margin: 6px 0; word-break: break-all; }
.baris-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.baris-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; flex: 1 1 200px; }

.modul-ket { line-height: 1.6; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid hsl(var(--border)); }
.modul-ket code { font-size: 12px; }