/* ==========================================================================
   ABEL CMS — panel admin
   Sidebar navy dengan aksen emas, area kerja terang. Warna diambil dari
   identitas situs publik abelgrup.com agar klien mengenali panel ini sebagai
   miliknya.
   ========================================================================== */

:root {
  --navy-950: #060F1D;
  --navy-900: #0A1221;
  --navy-800: #0E2238;
  --navy-700: #16304F;

  --gold-700: #B8730F;
  --gold-600: #D98E1F;
  --gold-500: #F0A830;
  --gold-400: #F5BB4F;

  --ink:      #16202E;
  --gray-700: #5B6675;
  --gray-500: #8A96A6;
  --gray-300: #CFD6DF;
  --gray-200: #E2E7EC;
  --gray-100: #F1F4F7;
  --gray-50:  #F7F9FB;
  --white:    #FFFFFF;

  --danger:   #B3261E;
  --danger-bg:#FDECEA;
  --ok:       #1F7A4D;
  --ok-bg:    #E8F5EE;
  --warn:     #A85B00;
  --warn-bg:  #FDF1E3;

  --sidebar-w: 252px;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(14,34,56,.06), 0 1px 3px rgba(14,34,56,.05);
  --shadow-md: 0 4px 16px -6px rgba(14,34,56,.18);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ==========================================================================
   Shell
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-w);
  color: rgba(255,255,255,.82);
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-800) 100%);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand img { height: 26px; width: auto; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 18px 12px 24px;
  /* Sembunyikan tampilan scrollbar (tapi tetap bisa scroll) supaya
     sisi kiri sidebar bersih meski nav item banyak / viewport pendek. */
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

.nav-group {
  margin: 22px 0 8px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
}
.nav-group:first-child { margin-top: 4px; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 2px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: rgba(255,255,255,.78);
  transition: background-color .18s ease, color .18s ease;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }

.nav-item.is-active {
  background: rgba(240,168,48,.14);
  color: #fff;
  font-weight: 600;
}
/* Penanda aktif: batang emas di tepi kiri, bukan sekadar warna teks —
   tetap terbaca oleh mata yang sulit membedakan warna. */
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold-500);
}

.nav-item .ico {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.nav-item.is-active .ico { opacity: 1; color: var(--gold-400); }

.nav-item .label { flex: 1; min-width: 0; }

/* ---------- Sub-menu (induk expandable + anak) ---------- */

.nav-parent {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 11px;
  margin-bottom: 2px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.nav-parent:hover { background: rgba(255,255,255,.07); color: #fff; }

.nav-parent .ico {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.nav-parent .label { flex: 1; min-width: 0; text-align: left; }

.nav-parent .chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  transition: transform .18s ease;
}
.nav-parent.is-expanded .chevron { transform: rotate(90deg); }

.nav-children {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0 2px;
}
.nav-children[hidden] { display: none; }

.nav-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 2px;
  padding: 8px 12px 8px 34px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
  transition: background-color .18s ease, color .18s ease;
}
.nav-child:hover { background: rgba(255,255,255,.07); color: #fff; }

.nav-child.is-active {
  background: rgba(240,168,48,.14);
  color: #fff;
  font-weight: 600;
}
.nav-child.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold-500);
}

.badge-soon {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* Kartu akun pindah ke topbar; yang tersisa di sini hanya lencana avatarnya,
   yang dipakai tombol profil. */
.avatar {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-950);
  font-weight: 800;
  font-size: 14px;
}
/* ---------- Area kerja ---------- */

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
  /* Padding fixed (bukan clamp+vw) supaya topbar tidak membesar di viewport lebar. */
  padding: 0 32px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
@media (max-width: 900px) {
  .topbar { padding: 0 20px; }
}
.topbar h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* margin-left:auto sekarang milik .topbar-user; kalau .sub juga memakainya,
   subjudul terdorong ke kanan dan menempel ke tombol profil. */
.topbar .sub {
  padding-left: 12px;
  border-left: 1px solid var(--gray-200);
  font-size: 13px;
  color: var(--gray-500);
}

.content {
  /* max-width supaya di layar sangat lebar konten tidak spread berlebihan
     (bikin elemen terasa "membesar" saat viewport <1400px vs >1400px).
     Padding di-set fixed supaya jarak konsisten di semua ukuran. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 32px 56px;
  width: 100%;
}
.content > :first-child { margin-top: 0; }
@media (max-width: 900px) {
  .content { padding: 20px 20px 44px; }
}

/* Footer panel — tampil di semua halaman (kecuali auth), memberi
   penanda akhir konten + tautan cepat ke situs publik. */
.app-footer {
  margin-top: auto;
  padding: 22px 32px;
  background: var(--white);
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.app-footer-copy {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
}
.app-footer-copy b {
  color: var(--ink);
  font-weight: 700;
}
.app-footer-copy a {
  color: var(--gold-600, #b58217);
  text-decoration: none;
  font-weight: 700;
  transition: color .15s ease;
}
.app-footer-copy a:hover { color: var(--gold-500); text-decoration: underline; }
.app-footer-copy .dot { color: var(--gray-400, #9ca3af); margin: 0 8px; }
@media (max-width: 900px) {
  .app-footer { padding: 18px 20px; }
}

/* Tombol drawer, hanya tampak di layar sempit */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 17px; height: 2px;
  margin: 3px auto;
  border-radius: 2px;
  background: var(--ink);
}

/* ==========================================================================
   Komponen
   ========================================================================== */

.card {
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 18px; }
.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.card .hint { margin: 0 0 18px; font-size: 13px; color: var(--gray-500); }

.stats { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0 0 24px; padding: 0; }
.stats li {
  flex: 1 1 150px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stats strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stats span { font-size: 13px; color: var(--gray-500); }

/* ---------- Kartu statistik ---------- */

.page-lead {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-200);
}
.lead-text { min-width: 0; }
.lead-text h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.018em; }
.lead-text p { margin: 3px 0 0; font-size: 13.5px; color: var(--gray-500); }

.lead-meta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.lead-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}
.lead-chip svg {
  width: 14px; height: 14px;
  stroke: var(--gold-700);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-row {
  display: grid;
  /* 4 kartu fluid mengisi lebar container (masing-masing 1fr sama besar). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 700px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat {
  position: relative;
  padding: 18px 20px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat-ico {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  background: rgba(184,115,15,.10);
  color: var(--gold-700);
}
.stat-ico svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.stat-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gray-700);
}
/* Angka besar memakai figur proporsional bawaan — tabular-nums memberi tiap
   digit lebar angka nol, dan pada ukuran sebesar ini "121" jadi terlihat renggang. */
.stat-value {
  margin: 2px 0 3px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.stat-meta { margin: 0; font-size: 12.5px; color: var(--gray-500); }

/* ---------- Kartu panel ---------- */

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.panel-head h2 { margin: 0; font-size: 15.5px; font-weight: 700; }
.panel-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--gray-500); }
.panel-action {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-700);
  white-space: nowrap;
}
.panel-action:hover { text-decoration: underline; }
.panel-body { padding: 20px 22px; }
.panel-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 12.5px;
  color: var(--gray-500);
}

/* ---------- Keadaan kosong ---------- */

.empty { padding: 28px 8px 24px; text-align: center; }
.empty-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-500);
}
.empty-ico svg {
  width: 21px; height: 21px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.empty-title { margin: 0 0 5px; font-size: 14.5px; font-weight: 700; }
.empty-desc { margin: 0 auto; max-width: 34ch; font-size: 13px; color: var(--gray-500); }

label { display: block; margin-bottom: 15px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
/* Atribut `hidden` harus tetap menang atas display:block di bawah.
   Tanpa ini, <input hidden>/<select hidden> tetap kelihatan karena
   author stylesheet lebih kuat daripada UA `[hidden] { display: none }`. */
[hidden] { display: none !important; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(240,168,48,.18);
}
input[type="file"] { padding: 8px 10px; background: var(--gray-50); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gold-500);
  color: var(--navy-950);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--gold-400); }
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--ink);
  font-weight: 600;
}
.btn-ghost:hover { background: var(--gray-100); }
.btn-danger { background: transparent; border: 1px solid var(--gray-300); color: var(--danger); font-weight: 600; }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.notice {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.notice-error { background: var(--danger-bg); color: var(--danger); }
.notice-ok    { background: var(--ok-bg);     color: var(--ok); }
.notice > span { min-width: 0; }

/* Ikon peringatan dipakai bersama oleh .notice dan .field-error. */
.ico-alert {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  margin-top: 2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Field dengan validasi
   ========================================================================== */

.field { margin-bottom: 16px; }
/* label global punya margin-bottom 15px — di sini jaraknya diatur .input-wrap. */
.field > label { margin-bottom: 0; }

.input-wrap { position: relative; margin-top: 6px; }
.input-wrap input, .input-wrap select, .input-wrap textarea { margin-top: 0; }

.field-error {
  display: none;
  align-items: flex-start;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--danger);
}
.field.is-invalid .field-error { display: flex; }

/* Keadaan salah dibawa tiga penanda sekaligus — batas merah, ikon, dan teks —
   bukan warna saja, supaya tetap terbaca oleh mata yang sulit membedakan warna. */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); background: #FFFBFA; }
.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(179,38,30,.15);
}

/* Tombol lihat/sembunyikan password */
.pw-toggle {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--gray-700); background: var(--gray-100); }
.pw-toggle:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; }
.pw-toggle svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pw-toggle .eye-off { display: none; }
.pw-toggle.is-on .eye-on { display: none; }
.pw-toggle.is-on .eye-off { display: block; }
/* Input password menyisakan ruang untuk tombolnya. */
.input-wrap:has(.pw-toggle) input { padding-right: 44px; }

/* Spinner pada tombol kirim */
.btn .spinner {
  display: none;
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(6,15,29,.28);
  border-top-color: var(--navy-950);
  animation: spin .7s linear infinite;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading { cursor: progress; }
.btn:disabled { opacity: .92; }
@keyframes spin { to { transform: rotate(360deg); } }

.table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* .table-card = kontainer terpadu: toolbar (filter + action) di atas,
   tabel di tengah, footer (info + pager) di bawah — semua dibungkus
   satu card putih dengan border+shadow. Menggantikan pola lama
   'toolbar terpisah + table-wrap + pager-row terpisah'. */
.table-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-card > .table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
  flex-wrap: wrap;
}
.table-toolbar > .spacer { flex: 1 1 auto; }
.table-toolbar .filter-row { margin: 0; }
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  flex-wrap: wrap;
}
.table-footer-info {
  font-size: 12.5px;
  color: var(--gray-500);
}
.table-footer .pager { margin: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; vertical-align: middle; }
th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
td { border-bottom: 1px solid var(--gray-100); font-size: 14px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--gray-50); }
td img { border-radius: 6px; border: 1px solid var(--gray-200); }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.tag-on  { background: var(--ok-bg);     color: var(--ok); }
.tag-off { background: var(--gray-100);  color: var(--gray-500); }
.tag-role{ background: var(--gray-100);  color: var(--gray-700); text-transform: capitalize; }

.tag-you { background: rgba(184,115,15,.13); color: var(--gold-700); margin-left: 7px; }

.muted { color: var(--gray-500); }
.row-actions { display: flex; gap: 8px; }
.row-actions form { margin: 0; }

/* Hanya untuk pembaca layar — kolom tindakan tidak punya judul yang terlihat,
   tapi tetap butuh nama supaya tabelnya bisa dinavigasi. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.cell-user { display: flex; align-items: center; gap: 11px; }
.cell-user b { font-weight: 600; }
.avatar-sm { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; }
.cell-mail { color: var(--gray-700); word-break: break-all; }
.cell-time { color: var(--gray-500); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-act { width: 1%; text-align: right; }
.col-act { width: 1%; }

/* ---------- Catatan dan daftar detail di dalam modal ---------- */

.field-note { margin: 5px 0 0; font-size: 12px; color: var(--gray-500); }
/* Catatan versi peringatan — dipakai saat sesuatu di sisi server sedang
   tidak seperti biasanya (mis. katalog produk tak terjangkau). Bukan galat
   validasi (itu punya .field-error), jadi gaya tetap tenang. */
.field-note-warn {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn);
}

/* Subjudul kelompok di dalam modal artikel. Memecah form panjang jadi
   empat pengelompokan agar orang tahu di mana ia berada dalam alur.
   Bukan tab (menyembunyikan field justru memperberat), hanya penanda
   visual yang tidak menghalangi. */
.modal-group {
  margin: 22px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
}
/* Subjudul pertama tidak butuh garis di atasnya. */
.modal-body > .modal-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.modal-group-note { margin: 0 0 12px; font-size: 12.5px; color: var(--gray-500); }

/* Baris kepala grup yang punya diagram (.section-diagram): catatan grup di
   kiri, diagram mini di kanan-atas, sejajar -- lihat form Solusi grup 2-6. */
.modal-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.modal-group-head .modal-group-note { flex: 1 1 320px; margin-bottom: 0; }

/* ---------- Diagram mini section: halaman Solusi (Rencana UX polish) ----------
   Kotak vertikal 5 slot yang meniru urutan section di halaman detail
   /produk-solusi/{slug}/: Hero, Applications, Partner, Product, CTA bawah.
   Slot aktif (grup form yang sedang dibuka) ditandai emas; sisanya abu
   supaya pengguna melihat KONTEKS urutan halaman, bukan hanya satu bagian.
   Pola sama dengan .promo-diagram (articles.php) / .repeater-diagram
   (products.php), hanya orientasinya lebih panjang (5 slot bertumpuk). */
.section-diagram {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 8px);
}
.section-diagram-frame {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 80px;
}
.section-diagram-slot {
  height: 20px;
  background: var(--gray-200);
  border-radius: 3px;
}
.section-diagram-slot.is-on {
  background: var(--gold-600, #b8730f);
  box-shadow: 0 0 0 1px var(--gold-700, #a06612);
}
@media (max-width: 640px) {
  .modal-group-head { flex-direction: column; }
}

/* ---------- Field promosi dengan diagram lokasi ---------- */

/* Susunan grid: kolom teks + diagram + kolom penuh untuk dropdown di bawah.
   Diagram dan teks berbagi baris atas; dropdown mengambil lebar penuh
   supaya nama produk yang panjang tidak terpotong. */
.promo-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: start;
}
.promo-field-copy { grid-column: 1; }
.promo-field-copy label { margin-bottom: 2px; }
.promo-field-input {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* Diagram mini: dua kolom, kiri lebar (isi artikel) dan kanan sempit
   (sidebar), meniru layout halaman detail. Petak "aktif" ditandai emas
   penuh; petak tidak-aktif tetap tampak tapi meredup, supaya pembaca
   melihat SELURUH tata letak, bukan hanya bagian yang sedang diatur. */
.promo-diagram {
  grid-column: 2;
  display: flex;
  gap: 4px;
  width: 96px;
  height: 68px;
  padding: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}
.promo-diagram-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 60%;
  min-width: 0;
}
.promo-diagram-side {
  flex: 0 0 22px;
  border-radius: 3px;
  background: var(--gray-200);
}
.promo-diagram-side.is-on { background: var(--gold-500); }

.promo-line {
  height: 3px;
  border-radius: 2px;
  background: var(--gray-200);
}
.promo-slot {
  height: 10px;
  border-radius: 3px;
  background: var(--gray-200);
  transition: background-color .18s ease;
}
.promo-slot.is-on { background: var(--gold-500); }

@media (max-width: 640px) {
  /* Layar sempit: diagram pindah ke bawah teks alih-alih menghimpit. */
  .promo-field { grid-template-columns: 1fr; }
  .promo-diagram { grid-column: 1; margin-top: 4px; }
}
/* Catatan yang hanya berlaku saat menyunting; disembunyikan di mode tambah. */
.modal:not(.is-edit) [data-when="edit"] { display: none; }
/* Kebalikannya: catatan yang hanya berlaku di mode tambah (mis. status
   Draft statis untuk peran tanpa articles.publish — M6). */
.modal.is-edit [data-when="add"] { display: none; }

.status-readonly {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  display: inline-block;
}

.detail-list {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 2px 18px;
  margin: 0;
}
.detail-list dt {
  padding: 9px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-100);
}
.detail-list dd {
  margin: 0;
  padding: 9px 0;
  font-size: 13.5px;
  word-break: break-word;
  border-bottom: 1px solid var(--gray-100);
}
.detail-list dt:last-of-type, .detail-list dd:last-of-type { border-bottom: 0; }

.detail-preview {
  margin-bottom: 18px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--gray-100);
  text-align: center;
}
.detail-preview img { display: inline-block; max-height: 220px; width: auto; border-radius: var(--radius-sm); }

.cell-thumb { width: 1%; }
.cell-thumb img {
  width: 56px; height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: start;
}
/* ---------- Halaman profil ---------- */

.profile-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 22px 24px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800) 78%);
  box-shadow: var(--shadow-sm);
  color: #fff;
}
.profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 62px;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-950);
  font-size: 25px;
  font-weight: 800;
}
.profile-id { min-width: 0; }
.profile-id h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.profile-id p { margin: 2px 0 9px; font-size: 13.5px; color: rgba(255,255,255,.66); word-break: break-all; }
.profile-id .tag-role { background: rgba(255,255,255,.14); color: #fff; }

.dd-note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gray-500); }

.sec-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-100);
}
.sec-ico {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(184,115,15,.10);
  color: var(--gold-700);
}
.sec-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sec-copy { flex: 1; min-width: 0; }
.sec-copy b { display: block; font-size: 14px; }
.sec-copy p { margin: 2px 0 0; font-size: 12.5px; color: var(--gray-500); }
.sec-row .btn { flex: 0 0 auto; }

.sec-note { margin-top: 18px; }
.sec-note b { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.sec-note ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--gray-700); }
.sec-note li { margin-bottom: 5px; }
.sec-note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--gray-100);
  font-size: 12px;
}

/* ==========================================================================
   Grafik

   Warna batang: --gold-700. Emas tombol (--gold-500) hanya 2.03:1 di atas
   putih dan gagal gate kontras 3:1, jadi ia tidak boleh membawa data.
   ========================================================================== */

/* Grafik lebar menggulir mendatar di dalam wadahnya sendiri; tinggi frame
   sudah termasuk pita label sumbu, supaya kartunya tidak melahirkan
   scrollbar tegak kecil yang memotong label bulan. */
.chart-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 2px; }
.chart-frame { position: relative; min-width: 460px; }
.chart-svg { display: block; width: 100%; height: auto; font-family: inherit; }

.c-grid { stroke: var(--gray-200); stroke-width: 1; }
.c-bar  { fill: var(--gold-700); }
.c-tick { fill: var(--gray-500); font-size: 10.5px; text-anchor: end; font-variant-numeric: tabular-nums; }
.c-axis { fill: var(--gray-500); font-size: 11px; text-anchor: middle; }
/* Teks tidak pernah memakai warna data — angkanya tinta biasa, batang di
   bawahnya yang membawa identitas. */
.c-val  { fill: var(--ink); font-size: 11.5px; font-weight: 700; text-anchor: middle; }

.chart-hits { position: absolute; }

/* Area sorot selebar satu pita bulan (jauh di atas 24px), bukan selebar
   batangnya — tidak ada yang bisa membidik batang 24px dengan andal. */
.hit { position: absolute; top: 0; bottom: 0; }
.hit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(184,115,15,.09);
  opacity: 0;
  transition: opacity .12s ease;
}
.hit:hover::before,
.hit:focus-visible::before { opacity: 1; }
.hit:focus { outline: none; }
.hit:focus-visible { outline: 2px solid var(--gold-600); outline-offset: -2px; }

.hit .tip {
  position: absolute;
  left: 50%;
  top: var(--y);
  z-index: 2;
  transform: translate(-50%, -100%) translateY(-9px);
  min-width: max-content;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--navy-900);
  color: #fff;
  text-align: left;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
/* Nilai memimpin, keterangan mengikuti: pembacanya sudah tahu bulan apa yang
   ia tunjuk, yang ia cari angkanya. */
.hit .tip b { display: block; font-size: 13px; font-weight: 700; }
.hit .tip span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.hit:hover .tip,
.hit:focus-visible .tip { opacity: 1; visibility: visible; }
/* Kolom di kedua ujung menjajarkan tooltipnya ke dalam, kalau tidak ia
   menggantung di luar kartu. */
.hit.at-start .tip { left: 0;    transform: translate(0, -100%) translateY(-9px); }
.hit.at-end   .tip { left: 100%; transform: translate(-100%, -100%) translateY(-9px); }

/* ---------- Batang horizontal ---------- */

.hbars { list-style: none; margin: 0; padding: 0; }
.hbars li {
  display: grid;
  grid-template-columns: minmax(80px, 32%) 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0 -8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
}
.hbars li:hover { background: var(--gray-50); }
.hbar-label { font-size: 13px; color: var(--gray-700); overflow-wrap: anywhere; }
.hbar-track { height: 14px; }
.hbar-fill {
  display: block;
  height: 100%;
  background: var(--gold-700);
  /* Ujung data membulat 4px, kaki siku di garis dasar. */
  border-radius: 0 4px 4px 0;
}
.hbar-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hbar-unit { margin: 14px 0 0; font-size: 12px; color: var(--gray-500); }

/* ---------- Tabel pendamping ---------- */

.chart-data { margin-top: 16px; }
.chart-data summary {
  display: inline-block;
  padding: 4px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
}
.chart-data summary:hover { color: var(--gold-700); }
.chart-data .table-wrap { margin-top: 10px; box-shadow: none; }
.chart-data th.num, .chart-data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Bilah alat halaman
   ========================================================================== */

.page-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-toolbar > div:first-child { align-self: center; }
.page-toolbar h2 { margin: 0; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Experience link di samping judul halaman — pill kecil dengan ikon
   mata + label 'Lihat di situs'. Menuju halaman FE yang dikelola
   menu ini supaya user paham kaitan CMS -> tampilan publik. */
.experience-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: #fff;
  color: var(--gold-600, #b58217);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.experience-link:hover {
  color: var(--gold-500);
  border-color: var(--gold-500);
  background: #fffbf3;
  transform: translateY(-1px);
}
.experience-link svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Header halaman list — kartu ringkas yang menjelaskan scope menu.
   Kartu putih dengan garis gold aksen kiri, judul + lead + chip
   'Muncul di' + hint dalam satu blok kompak. Padding & font sengaja
   dijaga kecil supaya tidak memakan viewport. */
.page-toolbar > div:first-child {
  position: relative;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 3px solid var(--gold-500);
  border-radius: 8px;
  flex: 1 1 100%;
  min-width: 0;
}
.page-toolbar h2 {
  margin: 0 0 3px;
  font-size: 15px;
  color: var(--ink);
}
.list-lead {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--gray-600, #4b5563);
  line-height: 1.45;
  max-width: 88ch;
}
.list-lead b { color: var(--ink); font-weight: 700; }
.page-lead-appears {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.page-lead-appears-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.page-lead-appears-label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
}
.lead-chip-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: #fff;
  color: var(--gray-700);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lead-chip-inline:hover {
  color: var(--gold-600, #b58217);
  border-color: var(--gold-500);
  background: #fffbf3;
}
.lead-chip-inline svg {
  width: 11px; height: 11px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.page-hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--gray-500);
  line-height: 1.45;
  font-style: italic;
}
.page-toolbar .hint { margin: 3px 0 0; font-size: 13px; color: var(--gray-500); }
.page-toolbar .spacer { flex: 1 1 auto; }

/* Normalisasi tinggi semua kontrol di toolbar supaya konsisten & elegant.
   Semua elemen di dalam .page-toolbar dan .filter-row punya tinggi 36px
   dengan padding vertikal yang sama; ini menghilangkan variasi acak
   (input 32px, select 34px, btn 34px, btn-sm 30px) yang bikin bar
   terlihat ramai. */
.page-toolbar .btn,
.page-toolbar .btn-refresh,
.page-toolbar .filter-row input,
.page-toolbar .filter-row select,
.page-toolbar .filter-row .ss-trigger,
.filter-row .btn,
.filter-row .btn-refresh,
.filter-row input,
.filter-row select,
.filter-row .ss-trigger {
  height: 36px;
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13.5px;
  line-height: 1;
}
.page-toolbar .btn { padding: 0 16px; }
.page-toolbar .btn.btn-ghost.btn-sm,
.filter-row .btn.btn-ghost.btn-sm { padding: 0 14px; font-size: 13px; }
.page-toolbar .btn-refresh,
.filter-row .btn-refresh { width: 36px; padding: 0; }
.page-toolbar .filter-row input,
.page-toolbar .filter-row select,
.filter-row input,
.filter-row select { padding: 0 12px; }
.page-toolbar .filter-row .ss-trigger,
.filter-row .ss-trigger { padding: 0 12px; }

.btn .ui-ico, .btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #8E1E17; }

/* ==========================================================================
   Modal

   Scrim tidak punya penangan klik — klik di luar panel sengaja tidak menutup
   modal. Jalan keluarnya tombol Batal, silang, dan Escape.
   ========================================================================== */

body.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.modal.is-open { display: flex; }

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6,15,29,.58);
  backdrop-filter: blur(3px);
  animation: modal-fade .18s ease;
}

.modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  /* dvh mengikuti bilah alamat peramban ponsel yang muncul-hilang; vh tidak,
     dan kaki modal berakhir di bawah lipatan. Baris di atas tetap ada sebagai
     cadangan untuk peramban yang belum mengenal dvh. */
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(6,15,29,.45), 0 2px 8px rgba(6,15,29,.12);
  animation: modal-rise .2s cubic-bezier(.2,.8,.3,1);
}
.modal-wide .modal-panel { max-width: 820px; }

/* Form di dalam panel HARUS ikut jadi kolom flex yang boleh menyusut.
   Sebagai flex item biasa ia punya min-height:auto, artinya menolak menyusut
   di bawah tinggi isinya — overflow-y pada .modal-body tidak pernah aktif dan
   kaki modal terdorong keluar layar. min-height:0 yang mencabut penolakan itu. */
.modal-panel > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gray-100);
  background: linear-gradient(180deg, var(--gray-50), var(--white));
}
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.modal-head .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--gray-500); }
/* Tombol pratinjau di header modal -- membawa klien non-teknis langsung ke
   section publik yang sedang mereka sunting, tanpa perlu tahu struktur URL
   situs. Chip kecil, warna aksen supaya kelihatan aktif tapi tidak bersaing
   dengan judul modal. */
.modal-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-700);
  text-decoration: none;
}
.modal-preview-link:hover { text-decoration: underline; }
.modal-preview-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal-x {
  margin-left: auto;
  flex: 0 0 32px;
  width: 32px; height: 32px;
  padding: 0;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-500);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover { background: var(--gray-100); color: var(--ink); }

/* Satu-satunya bagian yang menggulir. flex:1 memberinya sisa ruang,
   min-height:0 mengizinkannya lebih pendek dari isinya. */
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 24px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-body > :last-child { margin-bottom: 4px; }

/* Kaki modal tidak pernah ikut menggulir — tombol Simpan harus selalu
   terlihat, berapa pun panjang formnya. */
.modal-foot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
/* Bayangan tipis tepat di atas kaki: penanda bahwa isi di atasnya masih
   berlanjut, bukan sekadar garis pemisah. */
.modal-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6,15,29,.06), transparent);
}

@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- Dialog konfirmasi & galat ---------- */

.dlg-panel { max-width: 420px; }
/* Aturan menyusut yang sama seperti .modal-body: teks konfirmasi yang panjang
   menggulir sendiri, tombolnya tidak ikut terdorong keluar. */
.dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 28px 26px 6px; text-align: center; }
.dlg-ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
}
.dlg-ico svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dlg-ico-ask    { background: rgba(184,115,15,.12); color: var(--gold-700); }
.dlg-ico-warn   { background: var(--warn-bg);       color: var(--warn); }
.dlg-ico-danger,
.dlg-ico-error  { background: var(--danger-bg);     color: var(--danger); }
.dlg-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.dlg-text { margin: 0 auto; max-width: 34ch; font-size: 13.5px; color: var(--gray-700); }
.dlg-foot { flex: 0 0 auto; display: flex; justify-content: center; gap: 10px; padding: 22px 26px 24px; }
.dlg-foot .btn { min-width: 118px; }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast-host {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border-left: 3px solid var(--ok);
  background: var(--white);
  box-shadow: 0 12px 32px -10px rgba(6,15,29,.35), 0 1px 3px rgba(6,15,29,.1);
  font-size: 13.5px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-in { opacity: 1; transform: none; }
.toast-ico { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast-text { flex: 1; min-width: 0; }
.toast-x {
  flex: 0 0 auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--gray-500);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.toast-x:hover { color: var(--ink); }

.toast-ok    { border-left-color: var(--ok); }
.toast-ok    .toast-ico { color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-ico { color: var(--danger); }
.toast-warn  { border-left-color: var(--warn); }
.toast-warn  .toast-ico { color: var(--warn); }

/* ==========================================================================
   Kekuatan password
   ========================================================================== */

.pw-strength {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  opacity: 0;
  transition: opacity .18s ease;
}
.pw-strength.is-on { opacity: 1; }

.pws-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--gray-200);
  overflow: hidden;
}
.pws-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--gray-300);
  transition: width .32s cubic-bezier(.2,.8,.3,1), background-color .32s ease;
}
/* Tingkatnya selalu tertulis di sebelah bilahnya, tidak hanya diwarnai. */
.pws-label { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }

.pws-lemah  .pws-bar span { background: var(--danger); }
.pws-lemah  .pws-label    { color: var(--danger); }
.pws-sedang .pws-bar span { background: var(--warn); }
.pws-sedang .pws-label    { color: var(--warn); }
.pws-kuat   .pws-bar span { background: var(--ok); }
.pws-kuat   .pws-label    { color: var(--ok); }

/* ---------- Daftar aturan password ---------- */

.pw-rules {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}
.pw-rules li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--gray-700);
  transition: color .2s ease;
}
.pw-rules .req {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gray-200);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-700);
}

/* Lingkaran kosong sampai syaratnya terpenuhi, lalu berganti centang.
   Bentuknya yang berubah, bukan hanya warnanya. */
.pw-rules .r-mark {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gray-300);
  transition: color .2s ease;
}
.pw-rules .r-mark .tick {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset .28s cubic-bezier(.2,.8,.3,1);
}

.pw-rules .is-ok { color: var(--ok); font-weight: 600; }
.pw-rules .is-ok .r-mark { color: var(--ok); }
.pw-rules .is-ok .r-mark .tick { stroke-dashoffset: 0; }
.pw-rules .is-ok .req { background: var(--ok-bg); color: var(--ok); }

.pw-rules .is-no .r-mark { color: var(--gray-300); }

.match-hint { min-height: 16px; margin: 7px 0 0; font-size: 12.5px; font-weight: 600; }
.match-hint.is-ok { color: var(--ok); }
.match-hint.is-no { color: var(--gray-500); }
.match-hint.is-ok::before { content: "✓ "; }

/* ==========================================================================
   Menu tindakan (titik tiga)
   ========================================================================== */

.kebab { display: inline-block; }
.kebab-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
}
.kebab-btn:hover { background: var(--gray-100); color: var(--ink); border-color: var(--gray-200); }
.kebab-btn:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; }
.kebab-btn svg { width: 17px; height: 17px; fill: currentColor; }

/* position: fixed, bukan absolute — .table-wrap punya overflow-x:auto dan
   akan memotong menu di baris paling bawah. */
.kebab-menu {
  position: fixed;
  z-index: 150;
  display: none;
  min-width: 186px;
  padding: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 16px 40px -12px rgba(6,15,29,.34), 0 1px 3px rgba(6,15,29,.1);
}
.kebab-menu.is-open { display: block; }
.kebab-menu button, .kebab-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.kebab-menu button:hover, .kebab-menu a:hover { background: var(--gray-100); }
.kebab-menu svg { flex: 0 0 16px; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--gray-500); }
.kebab-menu .is-danger { color: var(--danger); }
.kebab-menu .is-danger:hover { background: var(--danger-bg); }
.kebab-menu .is-danger svg { color: var(--danger); }
.kebab-sep { height: 1px; margin: 5px 6px; background: var(--gray-200); }

/* ==========================================================================
   Kerangka pemuatan tabel
   ========================================================================== */

.skel {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: skel-slide 1.3s ease-in-out infinite;
}
@keyframes skel-slide { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.skel-row td { padding-top: 16px; padding-bottom: 16px; }
.table-oops { padding: 22px 16px; text-align: center; color: var(--gray-500); }

/* ==========================================================================
   Profil di topbar
   ========================================================================== */

.topbar-user { position: relative; margin-left: auto; }

.profile-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.profile-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.profile-btn:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; }
.profile-btn .avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 12.5px; }
.profile-btn .who { text-align: left; line-height: 1.2; }
.profile-btn .who b { display: block; font-size: 13px; font-weight: 600; }
.profile-btn .who span { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); }
.profile-btn .caret { width: 14px; height: 14px; stroke: var(--gray-500); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: none;
  min-width: 214px;
  padding: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 16px 40px -12px rgba(6,15,29,.32), 0 1px 3px rgba(6,15,29,.1);
}
.profile-menu.is-open { display: block; }
.profile-menu .who-full {
  padding: 9px 10px 11px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--gray-100);
}
.profile-menu .who-full b { display: block; font-size: 13.5px; }
.profile-menu .who-full span { font-size: 12px; color: var(--gray-500); word-break: break-all; }
.profile-menu a, .profile-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.profile-menu a:hover, .profile-menu button:hover { background: var(--gray-100); }
.profile-menu svg { flex: 0 0 16px; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--gray-500); }
.profile-menu form { margin: 0; }
.profile-menu .is-danger { color: var(--danger); }
.profile-menu .is-danger svg { color: var(--danger); }

/* ==========================================================================
   Halaman "segera hadir"
   ========================================================================== */

.soon {
  max-width: 560px;
  margin: 6vh auto 0;
  padding: 40px 36px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.soon-ico {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(240,168,48,.13);
  color: var(--gold-700);
}
.soon-ico svg { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.soon h2 { margin: 0 0 10px; font-size: 21px; font-weight: 700; }
.soon > p { margin: 0 0 22px; color: var(--gray-700); }
.soon-phase {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--gray-100);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-700);
}
.soon-list { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--gray-200); text-align: left; }
.soon-list h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.soon-list ul { margin: 0; padding-left: 20px; color: var(--gray-700); font-size: 14px; }
.soon-list li { margin-bottom: 5px; }

/* ==========================================================================
   Halaman login — layar terbagi
   ========================================================================== */

.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 48px;
  overflow: hidden;
  color: #fff;
  background: var(--navy-950);
}
.auth-visual img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center right;
}
/* Scrim berbobot kiri: logo dan teks duduk di sisi tergelap foto. */
.auth-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,15,29,.95) 0%, rgba(6,15,29,.8) 45%, rgba(6,15,29,.5) 100%);
}
.auth-visual > * { position: relative; z-index: 1; }
/* align-self wajib: .auth-visual adalah flex kolom, dan flex item ber-width
   auto diregangkan selebar kontainer — logo 688x177 jadi gepeng selebar
   panel. Tanpa baris ini, height saja tidak menyelamatkan rasionya. */
.auth-visual .logo { align-self: flex-start; height: 38px; width: auto; }
.auth-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  max-width: 15ch;
}
.auth-copy p { margin: 0; max-width: 40ch; color: rgba(255,255,255,.66); font-size: 14.5px; }
.auth-foot { font-size: 12px; color: rgba(255,255,255,.4); }

.auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--white);
}
.auth-box { width: 100%; max-width: 372px; }
.auth-box .logo-sm { display: none; height: 30px; width: auto; margin: 0 auto 28px; }
.auth-box h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.auth-box .lead { margin: 0 0 26px; color: var(--gray-500); font-size: 14px; }
.auth-box .btn { width: 100%; margin-top: 6px; padding: 12px 20px; }
.auth-help { margin: 22px 0 0; font-size: 12.5px; color: var(--gray-500); text-align: center; }

/* ==========================================================================
   Responsif
   ========================================================================== */

@media (max-width: 980px) {
  /* Panel foto disembunyikan, bukan dikecilkan: di layar sempit ia hanya
     mendorong form ke bawah lipatan. Logo pindah ke atas form. */
  .auth { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-box .logo-sm { display: block; }
}

@media (max-width: 1100px) {
  .panel-grid, .profile-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .24s ease;
    box-shadow: 0 0 40px rgba(6,15,29,.3);
  }
  .sidebar.is-open { transform: none; }
  .main { margin-left: 0; }
  .nav-toggle { display: block; }

  .scrim {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(6,15,29,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .scrim.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 640px) {
  .topbar { height: 60px; padding: 0 16px; }
  .topbar h1 { font-size: 17px; }
  .topbar .sub { display: none; }
  /* Nama dan peran disembunyikan, avatarnya tetap — tombolnya masih terbaca
     sebagai "akun saya" dan tidak memakan lebar judul. */
  .profile-btn .who, .profile-btn .caret { display: none; }
  .profile-btn { padding: 4px; }
  .modal-head, .modal-body, .modal-foot { padding-left: 18px; padding-right: 18px; }
  .toast-host { top: 12px; right: 12px; left: 12px; max-width: none; }
  .content { padding: 18px 16px 44px; }
  .card { padding: 18px 16px; }
  .stats li { flex-basis: 100%; }
  /* Chip pindah ke bawah sapaan, bukan didorong ke kanan sampai teksnya
     terjepit jadi satu kata per baris. */
  .lead-meta { margin-left: 0; width: 100%; }
  .lead-text h2 { font-size: 18px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 14px 14px 12px; }
  .stat-value { font-size: 26px; }
  .panel-head, .panel-body, .panel-foot { padding-left: 16px; padding-right: 16px; }
  .hbars li { grid-template-columns: minmax(70px, 40%) 1fr auto; gap: 9px; }
  th, td { padding: 10px 12px; }
  .soon { margin-top: 2vh; padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  /* Cincin yang tidak berputar tidak berarti apa-apa; label "Memproses…"
     yang menanggung pesannya. */
  .btn.is-loading .spinner { display: none; }
}

/* ---------- Editor teks ---------- */

.ed-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--gray-50);
}
.ed-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
}
.ed-btn:hover { background: var(--white); border-color: var(--gray-300); color: var(--ink); }
.ed-btn:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; }

.ed-area {
  min-height: 260px;
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--gray-300);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--white);
  font-size: 14.5px;
  line-height: 1.7;
}
.ed-area:focus { outline: 0; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(240,168,48,.18); }
.ed-area h2 { font-size: 18px; margin: 20px 0 8px; }
.ed-area h3 { font-size: 15.5px; margin: 16px 0 6px; }
.ed-area p { margin: 0 0 12px; }
.ed-area blockquote {
  margin: 12px 0;
  padding-left: 14px;
  border-left: 3px solid var(--gold-500);
  color: var(--gray-700);
}

.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-row input, .filter-row select { width: auto; min-width: 150px; margin-top: 0; }

/* Filter inline: satu grup bordered berisi label prefix + select.
   Pola sama dengan input group (label kiri, kontrol kanan, dibingkai
   satu border) supaya jelas mereka sepasang, bukan dua elemen liar. */
.filter-inline {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  height: 36px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-inline:focus-within {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(240,168,48,.18);
}
.filter-inline-label {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--gray-50, #f8fafc);
  border-right: 1px solid var(--gray-200, #e5e7eb);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  white-space: nowrap;
  user-select: none;
}
.filter-inline select {
  min-width: 60px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 26px 0 10px;
  box-shadow: none;
}
.filter-inline select:focus { outline: none; box-shadow: none; }
@media (max-width: 640px) {
  .filter-row { width: 100%; }
  .filter-row input, .filter-row select { flex: 1 1 130px; min-width: 0; }
}

/* ---------- Pager artikel ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 0;
}
.pager-info { font-size: 13px; color: var(--gray-600); }
.pager .is-disabled { opacity: .45; pointer-events: none; cursor: default; }

/* Baris pager di bawah tabel — center karena selektor per-halaman
   pindah ke toolbar atas (sebelah tombol Refresh). */
.pager-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100, #f3f4f6);
}
.pager-per-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
}
.pager-per-page select {
  width: auto;
  height: 32px;
  padding: 0 28px 0 10px;
  font-size: 13px;
  margin: 0;
  border-radius: 6px;
}

/* Tombol Prev/Next + angka halaman */
.pager-btn,
.pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pager-btn:hover,
.pager-num:hover:not(.is-current) {
  border-color: var(--gold-500);
  color: var(--gold-600, #b58217);
  background: #fffbf3;
}
.pager-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pager-num.is-current {
  background: var(--navy-950, #04101f);
  border-color: var(--navy-950, #04101f);
  color: #fff;
  cursor: default;
}
.pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 34px;
  color: var(--gray-400, #9ca3af);
  font-weight: 700;
  user-select: none;
}

/* ---------- Products: modal lebar, tab bahasa, repeater (Rencana 4) ---------- */

.modal-2xl .modal-panel { max-width: 1140px; }

.tab-langs { display: flex; gap: 4px; margin: 12px 0 0; }
.tab-langs button {
  padding: 10px 18px;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--gray-300);
  border-bottom: 3px solid var(--gray-300);
  background: var(--gray-100);
  font: inherit;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* UAT polish batch 2, poin 2: tab aktif ditandai border-bawah tebal navy +
   latar putih -- pola sebelumnya (cuma beda latar tipis) bikin pengguna
   ragu tab mana yang sedang dibuka. */
.tab-langs button.is-active {
  background: var(--white);
  color: var(--ink);
  border-color: var(--gray-300);
  border-bottom: 3px solid var(--navy-700, #1e3a5f);
}
.tab-langs .chip {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
}
.tab-langs .chip.done    { background: var(--ok-bg, #d1fae5); color: var(--ok, #065f46); }
.tab-langs .chip.partial { background: #fef3c7; color: #92400e; }
.tab-langs .chip.empty   { background: var(--gray-200, #e5e7eb); color: var(--gray-600); }
/* Chip "wajib" di tab ID -- merah tua pekat, sengaja lebih berat daripada
   chip status EN supaya jelas ini BUKAN tombol, melainkan penanda backend
   menuntut tab ini terisi. */
.tab-langs .chip-required { background: #7f1d1d; color: #fff; }

.tab-langs-hint {
  margin: 8px 0 0;
}

.lang-pane {
  padding: 16px;
  border: 1px solid var(--gray-300);
  border-radius: 0 8px 8px 8px;
  background: var(--white);
  margin-bottom: 16px;
}

.product-repeater { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.repeater-item {
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 14px;
  background: var(--gray-50, #fafafa);
}
.repeater-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.repeater-item-head b { font-size: 13.5px; }
.repeater-item-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.repeater-item-body .field { margin-bottom: 10px; }
@media (max-width: 640px) {
  .repeater-item-body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   UAT polish Rencana 4 (Products CMS) -- grid identitas, penanda wajib,
   dan uploader inline. Lihat .superpowers/sdd/uat-rencana4-polish-report.md.
   ========================================================================== */

/* Poin 1 -- "1. Identitas produk" jadi grid 2 kolom x 3 baris di layar
   lebar. Brand+Judul, Slug+Hero, Official URL+Datasheet -- field pendek
   berdampingan, catatan bantuan tiap field tetap penuh di bawahnya sendiri
   karena .field adalah satu sel grid utuh, bukan dipecah lagi. */
.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  align-items: start;
}
.identity-grid .field { margin-bottom: 0; display: flex; flex-direction: column; }
/* input mengalir sejajar antar-kolom karena label + input berada di posisi awal
   tiap sel; hint di bawah tidak mendorong input ke bawah. */
.identity-grid .field > label { margin-bottom: 6px; }
.identity-grid .field > .field-note { margin-top: 4px; }
@media (max-width: 640px) {
  .identity-grid { grid-template-columns: 1fr; }
}

/* Data Dasar (Grup 1 modal Solusi): satu baris info Kode URL di atas, lalu
   pasangan bilingual/gambar berdampingan supaya sejajar visual — tidak lagi
   bercampur di grid 2-kolom auto-place yang membuat pair Nama ID/EN dan pair
   Banner Atas/Partner tersebar antar-baris. */
.data-dasar-code { margin-bottom: 14px; }
.data-dasar-code .field { margin-bottom: 0; }
.data-dasar-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  align-items: start;
  margin-bottom: 14px;
}
.data-dasar-pair .field { margin-bottom: 0; display: flex; flex-direction: column; }
.data-dasar-pair .field > label { margin-bottom: 6px; }
.data-dasar-pair .field > .field-note { margin-top: 4px; }
@media (max-width: 640px) {
  .data-dasar-pair { grid-template-columns: 1fr; gap: 12px; }
}

/* Tombol "+ Unggah baru" di sisi dropdown media (hero image, datasheet PDF). */
.input-wrap-with-btn { display: flex; gap: 8px; align-items: center; }
.input-wrap-with-btn select { flex: 1 1 auto; min-width: 0; }
.input-wrap-with-btn .btn { flex: 0 0 auto; white-space: nowrap; }

/* Poin 6 -- penanda field wajib. */
.required { color: #dc2626; margin-left: 2px; font-weight: 700; }

/* Poin 2 -- slug terkunci (readonly) saat produk sudah published. */
#pSlug.is-locked { background: var(--gray-100); color: var(--gray-700); cursor: not-allowed; }

/* ---------- Poin 5: modal uploader inline (drag & drop) ---------- */

.upload-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 150px;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  background: var(--gray-50, #fafafa);
  color: var(--gray-500);
  text-align: center;
  cursor: pointer;
  padding: 16px;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-drop:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }
.upload-drop.is-dragging {
  border-width: 3px;
  border-color: var(--gold-600);
  background: rgba(184, 115, 15, .08);
}
.upload-drop-empty svg {
  width: 30px; height: 30px;
  margin: 0 auto 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.upload-drop-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.upload-drop-empty b { color: var(--ink); }

/* :not([hidden]) sengaja dipakai -- aturan display author (di sini)
   mengalahkan display:none bawaan UA untuk [hidden] terlepas dari
   spesifisitas, jadi tanpa penjaga ini pratinjau akan tetap tampak flex
   walau atribut hidden-nya sudah disetel balik oleh uploader.js. */
.upload-preview:not([hidden]) { display: flex; align-items: center; justify-content: center; width: 100%; }
.upload-preview img {
  width: 200px; height: 150px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--gray-200);
}
.upload-preview-file {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
}
.upload-preview-file svg {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  stroke: var(--gold-700);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Modal uploader meminjam .field-error tapi di luar .field -- jadi
   terlihat/tersembunyi lewat atribut [hidden] (mengikuti class JS-nya),
   bukan lewat .field.is-invalid seperti field form lain. :not([hidden])
   WAJIB ada di sini -- tanpanya, spesifisitas dua kelas ini (.uploader-modal
   .field-error) mengalahkan aturan bawaan browser [hidden]{display:none}
   dan galat akan tetap terlihat walau atribut hidden sudah disetel balik. */
.uploader-modal .field-error:not([hidden]) { display: flex; margin-top: 10px; }

.progress-bar {
  width: 100%;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--gray-200);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold-600);
  transition: width .2s ease;
}

/* ==========================================================================
   UAT polish batch 2, poin 3 -- sketsa layout mini di puncak tiap grup
   repeater (Features/Specs/Applications), pola sama dengan .promo-diagram
   di form artikel (Rencana 3): kartu info abu sangat terang + sketsa halaman
   detail yang menandai lokasi kartu ini muncul di situs publik.
   ========================================================================== */

.repeater-info {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.repeater-info-copy { flex: 1 1 auto; min-width: 0; }
.repeater-info-copy b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.repeater-info-copy p { margin: 0; font-size: 12.5px; color: var(--gray-600); }
.repeater-info-copy p + p { margin-top: 4px; }

/* Sketsa mini halaman detail produk: hero + overview + specs + applications
   ditumpuk vertikal, satu blok ditandai "aktif" (emas penuh) sesuai grup
   repeater yang sedang dijelaskan -- meniru .promo-diagram di articles.php. */
.repeater-diagram {
  flex: 0 0 84px;
  width: 84px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 6px);
  background: var(--white);
}
.repeater-diagram-block {
  border-radius: 3px;
  background: var(--gray-200);
  height: 10px;
}
.repeater-diagram-block.is-on { background: var(--gold-500); }
.repeater-diagram-hero { height: 16px; }
.repeater-diagram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.repeater-diagram-grid .repeater-diagram-block { height: 8px; }

@media (max-width: 640px) {
  .repeater-info { flex-direction: column; }
  .repeater-diagram { width: 100%; flex-direction: row; }
  .repeater-diagram-hero { flex: 1 1 auto; height: 12px; }
}

/* Tombol "+ Unggah baru" di setiap item Applications: sejajar dengan
   dropdown gambar, pola sama dengan .input-wrap-with-btn di Identitas
   Produk tapi dipasang di dalam kartu repeater. */
.repeater-item-field-with-btn { display: flex; gap: 8px; align-items: center; }
.repeater-item-field-with-btn select { flex: 1 1 auto; min-width: 0; }
.repeater-item-field-with-btn .btn { flex: 0 0 auto; white-space: nowrap; }

/* Solutions (Rencana 5) -- indeks 3 kartu berdampingan, bukan tabel:
   slug tertutup (pump/mechanical/construction), tidak ada tambah/hapus. */
/* ============================================================
   Row utilities untuk table Home Hero / Brand / Solusi.
   Semua tampil sebagai baris tabel biasa, bukan card grid.
   ============================================================ */
.row-thumb {
  display: block;
  width: 112px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200, #e5e7eb);
}
.row-thumb-logo {
  object-fit: contain;
  padding: 8px;
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.row-thumb-empty {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200, #e5e7eb) 100%);
}
.slide-num {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--gray-900, #04101f);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}
.cell-title { display: flex; flex-direction: column; gap: 2px; }
.cell-title b { font-weight: 700; color: var(--ink); }
.cell-title em { font-style: normal; color: var(--gold-600, #b58217); }
.cell-title .cell-sub { font-size: 12px; color: var(--gray-500); font-family: "Inter", monospace; }
.cell-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-600, #b58217);
}
.cell-desc {
  max-width: 420px;
  color: var(--gray-700, #374151);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.cell-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-600); }
.cell-link code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  font-size: 11.5px;
}
.row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--gray-200, #e5e7eb);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.row-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.row-status-ok .row-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.row-status-muted .row-status-dot {
  background: var(--gray-400, #9ca3af);
  box-shadow: 0 0 0 3px rgba(156, 163, 175, .18);
}
.row-status-muted { color: var(--gray-600, #4b5563); }

.solusi-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .solusi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .solusi-cards { grid-template-columns: 1fr; } }
.solusi-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.solusi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  border-color: var(--gray-300);
}
.solusi-card-hero { display: block; width: 100%; height: 180px; object-fit: cover; background: var(--gray-100); }
.solusi-card-hero-empty {
  height: 180px;
  background:
    linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200, #e5e7eb) 100%);
}
.solusi-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.solusi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.solusi-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.solusi-card-tagline {
  margin: 8px 0 4px;
  color: var(--gray-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.solusi-card-count { margin: 0 0 14px; font-size: 12.5px; color: var(--gray-500); }
.solusi-card-actions { display: flex; gap: 8px; margin-top: auto; }
.solusi-card-actions .btn,
.solusi-card-actions .btn-ghost { padding: 7px 14px; font-size: 13px; }

/* Brand (Rencana 6) -- indeks 5 kartu berdampingan, bukan tabel: slug
   tertutup, tidak ada tambah/hapus. Logo kecil di-overlay sudut kiri atas
   hero (spec §5.1). */
.brand-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .brand-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .brand-cards { grid-template-columns: 1fr; } }
.brand-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  border-color: var(--gray-300);
}
.brand-card-hero {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--gray-100);
}
.brand-card-hero-empty {
  height: 180px;
  background:
    linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200, #e5e7eb) 100%);
  position: relative;
}
.brand-card-hero-empty::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.4), transparent 55%);
}
.brand-card-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: rgba(255, 255, 255, .95);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
  z-index: 1;
}
.brand-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.brand-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.brand-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.brand-card-summary {
  margin: 8px 0 4px;
  color: var(--gray-500);
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brand-card-count { margin: 8px 0 14px; font-size: 12.5px; color: var(--gray-500); }
.brand-card-actions { display: flex; gap: 8px; margin-top: auto; }
.brand-card-actions .btn,
.brand-card-actions .btn-ghost { padding: 7px 14px; font-size: 13px; }

/* Repeater Applications/Partners Solutions -- struktur sama dengan
   .product-repeater, nama kelas dipisah supaya kedua panel tidak
   sengaja saling menimpa gaya kalau salah satunya disunting sendiri. */
.solusi-repeater { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }

.chip.chip-ok { background: var(--ok-bg, #d1fae5); color: var(--ok, #065f46); }
.chip.chip-muted { background: var(--gray-200, #e5e7eb); color: var(--gray-600); }

/* ============================================================
   Status pill — badge Aktif/Tersembunyi di sudut hero card.
   Overlay glass di atas gambar: backdrop-blur + border tipis +
   titik indikator berwarna supaya bisa dibaca cepat tanpa harus
   membaca teksnya.
   ============================================================ */
.status-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1;
  user-select: none;
}
.status-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
}
.status-pill-ok .status-pill-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
  animation: pill-pulse 2.4s ease-in-out infinite;
}
.status-pill-muted .status-pill-dot {
  background: var(--gray-400, #9ca3af);
  box-shadow: 0 0 0 3px rgba(156, 163, 175, .18);
}
.status-pill-muted { color: var(--gray-600, #4b5563); }
@keyframes pill-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, .08); }
}

/* Rencana 8 Task 3 -- form singleton Site Settings + repeater baris alamat
   Lokasi. .settings-form batasi lebar supaya form panjang tidak melebar
   penuh di layar besar; .settings-repeater/.repeater-item-inline dipakai
   untuk repeater string datar (nomor telepon, baris alamat) yang tidak
   butuh kartu ID/EN seperti .product-repeater/.solusi-repeater. */
.settings-form { max-width: 820px; }
.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.settings-form .card { padding: 22px 24px; border-radius: 12px; }
.settings-form .card h3.modal-group {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--gray-200, #e5e7eb);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-600, #b58217);
}
.settings-repeater { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.repeater-item-inline { display: flex; gap: 8px; align-items: center; }
.repeater-item-inline input { flex: 1 1 auto; min-width: 0; }
.repeater-item-inline .btn { flex: 0 0 auto; white-space: nowrap; }

/* Rencana 9 Task 3 -- Home Hero: kartu grid mirip .solusi-cards, tapi bukan
   slug tertutup (ada Tambah/Hapus seperti Location) -- jadi tetap memakai
   <table data-rows-url>/<tbody>/<tr> supaya refreshTable()/data-fill/kebab
   dari ui.js bisa dipakai apa adanya tanpa JS tambahan (pola sama dengan
   LocationController), sementara tampilannya sendiri diubah jadi kartu lewat
   CSS: thead disembunyikan, tbody jadi grid, tiap tr jadi satu kartu, dan
   td-nya disusun ulang jadi gambar / isi / tindakan lewat CSS grid-area,
   bukan lewat kolom tabel biasa. */
.home-hero-cards-table thead { display: none; }
.home-hero-cards-table,
.home-hero-cards-table tbody.home-hero-cards { border-collapse: separate; }
.home-hero-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
}
.home-hero-cards tr {
  display: grid;
  grid-template-areas: "hero act" "body body";
  grid-template-columns: 1fr auto;
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 14px;
  /* Sengaja `visible` (bukan hidden) supaya kebab-menu dropdown yang
     buka ke bawah tidak ke-clip di dalam kartu. Border-radius sudut
     atas gambar dijaga di .home-hero-hero-wrap (overflow:hidden lokal). */
  overflow: visible;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-hero-cards tr:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  border-color: var(--gray-300);
}
.home-hero-cards tr:last-child td { border-bottom: 1px solid var(--gray-100); }
.home-hero-cards td { padding: 0; border-bottom: 0; }
.home-hero-cards td:nth-child(1) { grid-area: hero; position: relative; }
.home-hero-cards td:nth-child(2) { grid-area: body; }
.home-hero-cards td:nth-child(3) { grid-area: act; padding: 8px 8px 0 0; }

.home-hero-hero-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}
.home-hero-card-hero {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center center;
  background: var(--gray-100);
}
.home-hero-card-hero-empty {
  aspect-ratio: 3 / 2;
  height: auto;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200, #e5e7eb) 100%);
}

/* Nomor slide overlay top-left hero image — chip gelap glassy
   supaya selalu terbaca di atas warna gambar apa pun (terang
   maupun gelap). Font monospace + tabular nums biar semua digit
   presisi sama lebar. */
.home-hero-num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(6, 15, 29, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  line-height: 1;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.home-hero-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-hero-card-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-600, #b58217);
}
.home-hero-card-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-hero-card-title em {
  font-style: normal;
  color: var(--gold-600, #b58217);
}
.home-hero-card-desc {
  margin: 4px 0 8px;
  color: var(--gray-600, #4b5563);
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-hero-card-link {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--gray-200, #e5e7eb);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--gray-500);
}
.home-hero-card-link-label {
  font-weight: 600;
  color: var(--gray-600, #4b5563);
}
.home-hero-card-link-arrow { color: var(--gray-400, #9ca3af); }
.home-hero-card-link code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  font-size: 11px;
}

/* ============================================================
   Searchable select — enhancer <select data-searchable>
   Native <select> disembunyikan; tombol .ss-trigger menampilkan
   label terpilih; klik buka .ss-panel di document.body dengan
   input search di atas dan daftar opsi ter-filter di bawah.
   ============================================================ */
.ss-wrap {
  position: relative;
  display: block;
}
.ss-native {
  display: none !important;
}
.ss-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-trigger:hover { border-color: var(--gray-400); }
.ss-trigger:focus-visible {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(240,168,48,.18);
}
.ss-wrap.is-open .ss-trigger {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(240,168,48,.18);
}
.ss-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-caret {
  flex: 0 0 auto;
  color: var(--gray-500);
  font-size: 11px;
  line-height: 1;
}
.ss-panel {
  /* fixed supaya JS bisa reposition dengan koordinat viewport (getBoundingClientRect)
     tanpa perlu tambah window.scrollY dan tanpa terpengaruh scroll parent
     apa pun. Ikuti scroll di JS (ui.js _ssScrollHandler). */
  position: fixed;
  z-index: 3000;
  min-width: 220px;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 8px;
  animation: ss-in .12s ease-out;
}
@keyframes ss-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ss-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.ss-search:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(240,168,48,.18);
}
.ss-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
}
.ss-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--ink);
}
.ss-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-item:hover { background: var(--gray-100); }
.ss-item.is-selected {
  background: var(--gold-100, #fff4de);
  color: var(--navy-950);
  font-weight: 600;
}
/* Thumbnail preview di list: ukuran mini persegi, cover, sudut lembut. */
.ss-thumb {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--gray-100);
  border: 1px solid var(--gray-200, #e5e7eb);
}
/* Thumbnail di tombol trigger — lebih kecil supaya muat di tinggi 36px. */
.ss-trigger-thumb {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--gray-100);
  border: 1px solid var(--gray-200, #e5e7eb);
  margin-right: 2px;
}

/* ============================================================
   Uploader batch (Media page & inline media upload)
   Drop zone + kartu per-berkas dengan progress bar, status,
   retry, cancel. Pola sama dipakai di setiap form data-uploader.
   ============================================================ */
.uploader { display: block; }

.uploader-drop {
  border: 2px dashed var(--gray-300);
  border-radius: 12px;
  background: var(--gray-50, #f8fafc);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.uploader-drop:hover { border-color: var(--gold-500); background: #fffbf3; }
.uploader-drop:focus-visible { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(240,168,48,.18); }
.uploader-drop.is-dragging {
  border-color: var(--gold-500);
  background: #fffbf3;
  transform: scale(1.005);
}
.uploader-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.uploader-drop-inner svg {
  width: 32px; height: 32px;
  stroke: var(--gray-500);
  fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 4px;
}
.uploader-drop-title { margin: 0; font-weight: 700; font-size: 15px; color: var(--ink); }
.uploader-drop-or { margin: 2px 0; font-size: 12.5px; color: var(--gray-500); }
.uploader-drop-inner .btn { margin: 2px 0; }
.uploader-drop-hint { margin: 8px 0 0; font-size: 12px; color: var(--gray-500); }

/* Daftar kartu berkas */
.uploader-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.up-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  animation: up-in .18s ease-out;
  transition: border-color .2s ease, background .2s ease;
}
@keyframes up-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.up-card.is-done { border-color: #b6e2c2; background: #f4fbf6; }
.up-card.is-error { border-color: #f2b8b4; background: #fdf5f4; }

.up-thumb {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--gray-100);
  border: 1px solid var(--gray-200, #e5e7eb);
}
.up-thumb-file {
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em;
}

.up-body { flex: 1 1 auto; min-width: 0; }
.up-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.up-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.up-size {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--gray-500);
}
.up-rename { margin: 4px 0 0; }
.up-alt { margin: 4px 0 6px; }
.up-alt-input {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  background: #fff;
  color: var(--ink);
}
.up-alt-input::placeholder { color: var(--gray-400, #9ca3af); font-style: italic; }
.up-alt-input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(240,168,48,.18);
}
.up-card.is-done .up-alt-input,
.up-card.is-uploading .up-alt-input { background: var(--gray-50, #f8fafc); color: var(--gray-500); }

.up-bar {
  height: 5px;
  background: var(--gray-200, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
}
.up-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400, #fbbf24));
  transition: width .2s ease;
}
.up-card.is-done .up-fill { background: #22c55e; }
.up-card.is-error .up-fill { background: var(--danger, #b52520); }
.up-foot {
  margin-top: 5px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.up-status {
  font-size: 12px;
  color: var(--gray-600);
}
.up-card.is-done .up-status { color: #158b3f; font-weight: 600; }
.up-card.is-error .up-status { color: var(--danger, #b52520); font-weight: 600; }

.up-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  align-self: flex-start;
}
.up-retry, .up-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-500);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.up-retry:hover { color: var(--ink); border-color: var(--gray-400); background: var(--gray-100); }
.up-cancel:hover { color: var(--danger, #b52520); border-color: var(--danger, #b52520); background: #fdf5f4; }
.up-retry svg, .up-cancel svg { width: 14px; height: 14px; }
.ss-empty {
  padding: 12px 10px;
  color: var(--gray-500);
  font-size: 13px;
  text-align: center;
}

/* ============================================================
   Refresh button — ikon berputar saat data-refresh-btn klik
   ============================================================ */
.btn-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.btn-refresh:hover { color: var(--ink); border-color: var(--gray-400); background: var(--gray-100); }
.btn-refresh svg { width: 16px; height: 16px; transition: transform .5s ease; }
.btn-refresh.is-spinning svg {
  animation: refresh-spin .9s linear infinite;
}
@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}