/* ------------------------------------------------------------------ token */

:root {
  /* Panel ini SELALU gelap, tidak mengikuti tema sistem/browser. */
  color-scheme: dark;
  --bg: #0d1014;
  --permukaan: #16191f;
  --permukaan-2: #1d2128;
  --sisi: #161b23;
  --sisi-teks: #ccd5e0;
  --sisi-redup: #7d8794;
  --garis: #252a33;
  --garis-tegas: #363d49;
  --teks: #e8ecf1;
  --redup: #9aa3b1;
  --samar: #6c7682;

  --aksen: #5b92ff;
  --aksen-lembut: #16233c;
  --aksen-teks: #07101f;

  --bahaya: #ff9d93;
  --bahaya-lembut: #2a1614;
  --sukses: #5fe0a0;
  --sukses-lembut: #0d2a1d;
  --hangat: #ffc46b;
  --hangat-lembut: #2a2011;

  --bayang-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --bayang-2: 0 12px 38px rgba(0, 0, 0, 0.62);
  --bayang-3: 0 -1px 14px rgba(0, 0, 0, 0.5);
  --bayang-kartu: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -10px rgba(0, 0, 0, 0.55);
  --bayang-kartu-hover: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 36px -12px rgba(0, 0, 0, 0.65);

  --r-kecil: 8px;
  --r: 12px;
  --r-besar: 16px;

  --w-sisi: 236px;
  --w-isi: 1180px;
  --h-atas: 50px;
  --h-bar: 64px;
}


* { box-sizing: border-box; }

/* Atribut `hidden` WAJIB menyembunyikan. Tanpa !important, aturan
   `.login-tirai{display:grid}` / `.ubah{display:flex}` di bawah menimpanya
   (specificity sama, author menang atas UA), sehingga elemen tetap tampil
   walau JS sudah menyetel .hidden = true. Inilah yang membuat layar login
   tidak mau hilang dan menutupi panel. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--teks);
  font: 15px/1.6 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------- latar beranimasi */

/* Gumpalan warna lembut yang bergerak pelan (efek "aurora"). Diletakkan
   paling belakang; kartu tetap menonjol di atasnya. */
.latar {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.latar span {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2;
  will-change: transform;
}

/* Palet dingin yang cohesive (biru–indigo–sky) biar terasa tenang & profesional. */
.latar .b1 { width: 540px; height: 540px; top: -160px; right: -90px; background: #3f74e0; animation: apung-a 34s ease-in-out infinite; }
.latar .b2 { width: 470px; height: 470px; bottom: -180px; left: 10%; background: #6366f1; animation: apung-b 42s ease-in-out infinite; }
.latar .b3 { width: 420px; height: 420px; top: 36%; right: 14%; background: #38bdf8; animation: apung-c 48s ease-in-out infinite; }

@keyframes apung-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, 90px) scale(1.18); } }
@keyframes apung-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, -55px) scale(1.12); } }
@keyframes apung-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -70px) scale(1.22); } }

/* Konten di atas latar. */
.app { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .latar span { animation: none; }
}

svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--permukaan-2);
  color: var(--redup);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.76em;
  font-weight: 500;
}

a { color: var(--aksen); text-underline-offset: 2px; }

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

/* Tata letak dua kolom: sidebar tetap di kiri, isi memenuhi sisanya. Sidebar
   dipilih karena menunya 5 dan berlencana — daftar vertikal lebih terbaca
   daripada deretan tab, dan bagian atas jadi bebas untuk status halaman. */
.app { display: grid; grid-template-columns: var(--w-sisi) 1fr; min-height: 100vh; }

/* Keadaan awal sebelum status login diketahui. Dipasang di HTML supaya berlaku
   SEBELUM app.js sempat jalan — kalau diatur dari JS, kedipannya tetap lolos.
   Latar beranimasi ada di luar .app, jadi layar tidak jadi putih kosong. */
.app.menunggu { visibility: hidden; }

/* ---------------------------------------------------------------- sidebar */

.sisi-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 18px 12px 14px;
  /* Tanpa warna sendiri: sidebar menyatu dengan latar halaman, jadi tidak ada
     blok gelap terpisah di tepi layar. Batasnya cukup garis tipis. */
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--sisi-teks);
}

.sisi-merek {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 2px 8px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bagian bawah sidebar: status bot & tombol keluar, didorong ke dasar. */
.sisi-kaki {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.sisi-kaki .jalur { margin: 0; }

/* Judul kecil di atas tombol kendali — tanpa ini tiga tombol itu muncul
   begitu saja di dasar sidebar tanpa keterangan apa pun. */
.sisi-judul {
  display: block;
  padding: 0 2px 2px;
  text-align: center;
  /* Oranye merek — sama dengan lambang LiveChat dan aksen layar login, supaya
     menonjol dari teks menu yang sengaja redup. */
  color: #ff8a4c;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Keluar dibuat seperti item menu biasa supaya menyambung dengan daftar di
   atasnya — hanya warnanya dibedakan saat disentuh. */
/* Menyambung langsung di bawah daftar menu, tanpa garis pemisah — jarak dan
   warna merah saat disentuh sudah cukup membedakannya dari menu halaman. */
.sisi-keluar {
  display: flex;
  gap: 11px;
  align-items: center;
  width: 100%;
  margin-top: 2px;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sisi-redup);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.sisi-keluar svg { opacity: 0.75; transition: opacity 0.16s; }
.sisi-keluar:hover {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
}
.sisi-keluar:hover svg { opacity: 1; }
.sisi-keluar:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }
.sisi-keluar svg { width: 17px; height: 17px; }

/* Tiga tombol kendali dalam sidebar selebar 236px: dibiarkan membagi baris
   rata dan melipat sendiri kalau tidak muat, jadi tetap rapi. */
.sisi-kaki .kendali { flex-wrap: wrap; }
.sisi-kaki .kendali .tombol {
  flex: 1 1 auto;
  justify-content: center;
  font-weight: 620;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

/* Warna per tindakan: hijau = menyalakan, kuning = memulai ulang, merah =
   menghentikan. Nilainya ditulis terang langsung (bukan token --sukses dll)
   karena sidebar selalu gelap, sementara token itu ikut berubah di mode terang.
   Tombol yang sedang tidak bisa dipakai tetap diredupkan oleh :disabled. */
.sisi-kaki #botJalankan {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.14);
  color: #4ade8b;
}
/* Saat disentuh: warnanya DIPERTAJAM, bukan diganti putih. Teks putih di atas
   latar setengah tembus membuat warnanya jadi pudar dan tepinya terlihat kasar.
   Cincin tipis di luar memberi kesan terangkat tanpa menggeser tata letak. */
.sisi-kaki #botJalankan:hover:not(:disabled) {
  border-color: rgba(52, 211, 153, 0.8);
  background: rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.13);
}

.sisi-kaki #botMulaiUlang {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
}
.sisi-kaki #botMulaiUlang:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.8);
  background: rgba(251, 191, 36, 0.22);
  color: #fcd34d;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.13);
}

.sisi-kaki #botHentikan {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}
.sisi-kaki #botHentikan:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.8);
  background: rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.13);
}

/* Yang mati tetap netral, supaya warna hanya dibaca sebagai "bisa ditekan". */
.sisi-kaki .kendali .tombol:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sisi-redup);
  opacity: 0.6;
}


.logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--aksen);
  color: #fff;
}

.logo svg { width: 19px; height: 19px; stroke-width: 2; }


.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav button {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sisi-redup);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

/* Label mengisi ruang supaya lencana angka selalu rapat di kanan. */
.nav button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav button svg { opacity: 0.75; transition: opacity 0.16s; }

.nav button:hover { background: rgba(255, 255, 255, 0.06); color: var(--sisi-teks); }
.nav button:hover svg { opacity: 1; }

/* Keadaan aktif: gradien tipis yang memudar ke kanan, bukan blok warna rata.
   Blok rata terlihat berat di sidebar sempit dan menenggelamkan ikonnya. */
.nav button.aktif {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--aksen) 30%, transparent) 0%,
    color-mix(in srgb, var(--aksen) 10%, transparent) 100%
  );
  color: #fff;
  font-weight: 620;
}
.nav button.aktif svg { opacity: 1; color: #fff; }

/* Penanda tegas di tepi kiri menu aktif — di sidebar, latar saja kurang jelas
   membedakan mana yang sedang dibuka. */
.nav button.aktif::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--aksen);
  box-shadow: 0 0 10px color-mix(in srgb, var(--aksen) 65%, transparent);
}

.nav button:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }

/* Lencana angka: lebar minimum supaya "1" dan "12" sama-sama bulat rapi,
   bukan satu lonjong satu bundar. */
.lencana {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--sisi-redup);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background 0.16s, color 0.16s;
}

.nav button:hover .lencana { background: rgba(255, 255, 255, 0.14); color: var(--sisi-teks); }
.nav button.aktif .lencana {
  background: var(--aksen);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--aksen) 45%, transparent);
}

.status-bot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--sisi-redup);
}

.titik {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sisi-redup);
}

.status-bot.hidup .titik { background: #30d98b; box-shadow: 0 0 0 3px rgba(48, 217, 139, 0.18); }
.status-bot.hidup .status-teks { color: #30d98b; font-weight: 600; }
.status-bot.mati .titik { background: #6b7682; }

/* Di bilah status atas, penanda bot ikut berbentuk chip seperti tetangganya.
   Ditargetkan lewat ".atas" karena JS menulis ulang className elemen ini —
   kelas tambahan apa pun di HTML akan terhapus. */
.atas .status-bot {
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 550;
  color: var(--redup);
}
.atas .status-bot.hidup {
  border-color: color-mix(in srgb, var(--sukses) 32%, transparent);
  background: var(--sukses-lembut);
}
.atas .status-bot.hidup .titik { background: var(--sukses); box-shadow: none; }
.atas .status-bot.hidup .status-teks { color: var(--sukses); }
.atas .status-bot.mati {
  border-color: color-mix(in srgb, var(--bahaya) 32%, transparent);
  background: var(--bahaya-lembut);
}
.atas .status-bot.mati .titik { background: var(--bahaya); }
.atas .status-bot.mati .status-teks { color: var(--bahaya); font-weight: 600; }

.kendali { display: flex; gap: 5px; }

.tombol.mungil {
  padding: 5px 10px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--sisi-teks);
  font-size: 0.78rem;
}

.tombol.mungil:hover { border-color: var(--aksen); background: rgba(91, 146, 255, 0.16); color: #fff; }
.tombol.mungil:disabled { opacity: 0.35; }
.tombol.mungil:disabled:hover { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: var(--sisi-teks); }

/* ------------------------------------------------------------------- log */

.baris-log { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.baris-log .catatan { margin-right: auto; font-family: ui-monospace, Consolas, monospace; }
.sakelar.kecil { padding: 0; gap: 8px; align-items: center; }
.sakelar.kecil input[type="checkbox"] { width: 32px; height: 19px; margin: 0; }
.sakelar.kecil input[type="checkbox"]::after { width: 13px; height: 13px; }
.sakelar.kecil input[type="checkbox"]:checked::after { transform: translateX(13px); }

.kotak-log {
  max-height: 62vh;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  /* Sengaja TIDAK memakai --sisi: sidebar kini lebih terang, sementara kotak
     log justru enak dibaca kalau latarnya gelap seperti terminal. */
  background: #0b0e13;
  color: #c7d2de;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kotak-log:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

/* Path file config: info teknis yang tidak perlu dilihat pemilik usaha. */
.jalur { display: none; }

.tombol.keluar {
  justify-content: center;
  gap: 7px;
}

/* ------------------------------------------------------------------ login */

/* Layar login sengaja selalu gelap — merek BOLACUAN (emas/perak di atas
   transparan) butuh latar gelap supaya kontrasnya benar, dan layar ini memang
   dipakai sebentar saja sebelum masuk ke panel. */
.login-tirai {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 18% -10%, #16233f 0%, transparent 62%),
    radial-gradient(900px 560px at 88% 112%, #2a1840 0%, transparent 60%),
    linear-gradient(168deg, #070a10 0%, #0b1018 52%, #080b12 100%);
  color: #e8ecf1;
}

/* Dua gumpalan cahaya yang bergerak pelan. */
.login-tirai::before,
.login-tirai::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.3;
  pointer-events: none;
}
.login-tirai::before { width: 470px; height: 470px; top: -120px; right: 6%; background: #ff5a1f; animation: apung-a 26s ease-in-out infinite; }
.login-tirai::after { width: 430px; height: 430px; bottom: -150px; left: 4%; background: #4f8bff; animation: apung-b 33s ease-in-out infinite; }

/* ---- kisi yang bergeser pelan, memudar ke tepi ---- */
.login-kisi {
  position: absolute;
  inset: -48px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  animation: geser-kisi 14s linear infinite;
  pointer-events: none;
}
@keyframes geser-kisi { to { transform: translate(48px, 48px); } }

/* ---- sapuan cahaya yang turun berkala ---- */
.login-sapuan {
  position: absolute;
  left: 0;
  right: 0;
  top: -200px;
  height: 200px;
  background: linear-gradient(180deg, transparent, rgba(255, 90, 46, 0.08), transparent);
  animation: sapu 10s linear infinite;
  pointer-events: none;
}
@keyframes sapu { to { transform: translateY(calc(100vh + 200px)); } }

/* ---- vinyet: tepi digelapkan supaya kartu jadi pusat perhatian ---- */
.login-vinyet {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

/* ---- gelembung chat yang mengambang naik ---- */
.login-gelembung { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-gelembung span {
  position: absolute;
  bottom: -80px;
  width: 42px;
  height: 42px;
  background: url("img/lambang.png") center/contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 6px 18px rgba(255, 90, 31, 0.45));
  animation: naik-gelembung 19s linear infinite;
}
.login-gelembung span:nth-child(1) { left: 8%;  width: 30px; height: 30px; animation-duration: 21s; animation-delay: 0s; }
.login-gelembung span:nth-child(2) { left: 24%; width: 46px; height: 46px; animation-duration: 26s; animation-delay: 4s; }
.login-gelembung span:nth-child(3) { left: 46%; width: 24px; height: 24px; animation-duration: 17s; animation-delay: 9s; }
.login-gelembung span:nth-child(4) { left: 66%; width: 38px; height: 38px; animation-duration: 23s; animation-delay: 2s; }
.login-gelembung span:nth-child(5) { left: 82%; width: 28px; height: 28px; animation-duration: 29s; animation-delay: 12s; }
.login-gelembung span:nth-child(6) { left: 93%; width: 20px; height: 20px; animation-duration: 20s; animation-delay: 6s; }

@keyframes naik-gelembung {
  0%   { transform: translateY(0) rotate(0deg) scale(0.85); opacity: 0; }
  12%  { opacity: 0.5; }
  80%  { opacity: 0.32; }
  100% { transform: translateY(-112vh) rotate(26deg) scale(1.05); opacity: 0; }
}

.login-kotak {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 394px;
  padding: 34px 30px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(27, 32, 43, 0.9) 0%, rgba(17, 21, 29, 0.94) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: masuk-kartu 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Nama sengaja dibedakan dari "masuk" milik .panel — nama @keyframes bersifat
   global, dan yang terdefinisi belakangan menimpa yang lebih dulu. */
@keyframes masuk-kartu {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Garis cahaya tipis di tepi atas kartu. */
.login-kotak::before {
  content: "";
  position: absolute;
  top: -1px; left: 16%; right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 76, 0.85), transparent);
}

/* ---- merek ---- */
.login-merek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  text-align: center;
}

.login-lambang {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  animation: lambang-apung 4.5s ease-in-out infinite;
}
.login-lambang img { width: 46px; height: 46px; object-fit: contain; }

/* Dua cincin yang berdenyut keluar dari lambang. */
.login-lambang::before,
.login-lambang::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 90, 31, 0.55);
  animation: denyut-cincin 2.8s ease-out infinite;
}
.login-lambang::after { animation-delay: 1.4s; }

@keyframes denyut-cincin {
  0%   { transform: scale(0.72); opacity: 0.75; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes lambang-apung {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.login-wordmark {
  width: 190px;
  max-width: 76%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}

.login-subjudul {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8e99a8;
}

.login-pisah {
  height: 1px;
  margin: 0 0 20px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
}


/* ---- kolom isian ----
   Label di ATAS kolom (huruf kapital kecil & tebal), ikon dan tombol mata
   diposisikan absolut di dalam kolom. Kolomnya sendiri BUKAN flex: teks input
   mengisi penuh dan diberi padding kiri/kanan agar tidak menabrak ikon. */
.login-bidang { margin-bottom: 16px; }

.login-lbl {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #c3c7d0;
}

.login-input { position: relative; border-radius: 12px; }

/* Halo fokus dipasang di PEMBUNGKUS, bukan di input. Sebabnya: animasi CSS
   menimpa deklarasi biasa, jadi kalau `fokus` (yang menganimasikan box-shadow)
   dipasang di input, ia menghapus `-webkit-box-shadow` inset yang menutupi
   latar putih autofill Chrome — kolom yang terisi otomatis lalu menyala terang
   begitu diklik. Di pembungkus, keduanya tidak saling rebut. */
.login-input:focus-within { animation: fokus 2.2s ease-in-out infinite; }

.login-ikon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #8a8f9c;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 0.2s, transform 0.2s;
}
.login-input:focus-within .login-ikon {
  stroke: #ff5a2e;
  transform: translateY(-50%) scale(1.12);
}

/* Awalan .login-tirai WAJIB ada. Tanpa itu, `.login-input input` (0-1-1) punya
   spesifisitas SAMA dengan aturan global `input[type="text"]` (0-1-1) yang
   berada jauh lebih bawah di berkas ini — dan yang belakangan menang. Akibatnya
   padding global 9px 12px dipakai, padding kiri 44px untuk ruang ikon hilang,
   lalu ikonnya menimpa teks placeholder. */
.login-tirai .login-input input {
  width: 100%;
  padding: 14px 46px 14px 44px;
  border: 1px solid #33363f;
  border-radius: 12px;
  background: rgba(11, 12, 16, 0.85);
  color: #fff;
  font: inherit;
  font-size: 14px;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.login-tirai .login-input input::placeholder { color: #6b7180; }
.login-tirai .login-input input:hover { border-color: #4a4d57; }
.login-tirai .login-input input:focus {
  outline: none;
  border-color: #ff5a2e;
  background: rgba(11, 12, 16, 0.95);
}

/* Halo di sekeliling kolom aktif berdenyut pelan — penanda fokus yang hidup
   tanpa harus berkedip mengganggu. */
@keyframes fokus {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 90, 46, 0.16); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 90, 46, 0.28), 0 0 18px rgba(255, 90, 46, 0.18); }
}

/* Autofill Chrome memaksa latar putih — ditimpa supaya tetap gelap. */
/* Chrome memaksa latar kuning/putih pada kolom yang terisi otomatis. Satu-satunya
   cara menutupinya adalah box-shadow inset setebal kolom. `transition` sangat
   panjang menahan Chrome yang kadang menganimasikan latarnya kembali. */
.login-tirai .login-input input:-webkit-autofill,
.login-tirai .login-input input:-webkit-autofill:hover,
.login-tirai .login-input input:-webkit-autofill:focus,
.login-tirai .login-input input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #0b0c10 inset;
  box-shadow: 0 0 0 40px #0b0c10 inset;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}

.login-intip {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8a8f9c;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.login-intip:hover,
.login-intip.aktif { color: #eef0f4; background: rgba(255, 255, 255, 0.06); }
.login-intip:focus-visible { outline: 2px solid rgba(255, 90, 46, 0.8); outline-offset: 1px; }
.login-intip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Ikon mata berganti bentuk (dicoret) saat password sedang terlihat. */
.login-intip .mata-tutup { display: none; }
.login-intip.aktif .mata-buka { display: none; }
.login-intip.aktif .mata-tutup { display: block; }

/* Peringatan Caps Lock — penyebab paling sering "password salah" padahal
   ketikannya benar. */
.login-capslock {
  display: none;
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffd452;
}
.login-capslock.aktif { display: block; animation: muncul 0.25s ease; }

/* ---- kemunculan bertahap ---- */
@keyframes muncul {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.muncul { animation: muncul 0.5s ease both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.16s; }
.d3 { animation-delay: 0.24s; }

/* ---- merek di sidebar ----
   Tanpa subjudul, lambang dan wordmark berdiri sejajar — tingginya disamakan
   secara optis (wordmark lebih pendek dari kotak lambang) supaya tidak terlihat
   melayang. */
.logo-gambar { background: transparent; box-shadow: none; }
.logo-gambar img { width: 22px; height: 22px; object-fit: contain; display: block; }
.merek-wordmark {
  width: 112px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Hormati pengguna yang mematikan animasi di sistemnya. */
@media (prefers-reduced-motion: reduce) {
  .login-gelembung span,
  .login-lambang,
  .login-lambang::before,
  .login-lambang::after,
  .login-tirai::before,
  .login-tirai::after,
  .login-kisi,
  .login-sapuan,
  .login-kotak,
  .login-tombol::before,
  .muncul { animation: none; }
  .login-gelembung span { opacity: 0.22; }
  .login-sapuan { display: none; }
  .login-input:focus-within { animation: none; box-shadow: 0 0 0 3px rgba(255, 90, 46, 0.22); }
}

.login-galat {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: var(--r-kecil);
  border: 1px solid color-mix(in srgb, var(--bahaya) 30%, transparent);
  background: var(--bahaya-lembut);
  color: var(--bahaya);
  font-size: 0.82rem;
}

/* `.tombol.login-tombol` (0-3-0 bersama awalannya) sengaja dipakai supaya
   menang atas `.tombol.utama` (0-2-0) yang terdefinisi lebih bawah — kalau
   tidak, tombolnya kembali biru memakai warna aksen bawaan panel. */
.login-tirai .tombol.login-tombol {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff5a2e, #d1350c);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(209, 53, 12, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}

/* Kilau yang menyapu tombol sesekali — mengundang klik tanpa berisik. */
.login-tombol::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  animation: kilau-tombol 3.6s ease-in-out infinite;
}
@keyframes kilau-tombol {
  0%, 55% { left: -60%; }
  100%    { left: 135%; }
}

.login-tirai .tombol.login-tombol:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ff5a2e, #d1350c);
  box-shadow: 0 16px 34px rgba(209, 53, 12, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.login-tirai .tombol.login-tombol:active:not(:disabled) { transform: translateY(1px); }
.login-tirai .tombol.login-tombol:disabled { cursor: wait; filter: saturate(0.8); }

/* ------------------------------------------------------------------ utama */

/* Isi memakai seluruh lebar yang tersisa di sebelah sidebar — tanpa batas
   lebar, supaya layar lebar tidak menyisakan kolom kosong di kanan. */
.utama {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.atas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: var(--h-atas);
  padding: 16px 24px 0;
}

.kerat {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  color: var(--redup);
  font-size: 0.79rem;
  font-weight: 550;
  white-space: nowrap;
}

.kerat svg { width: 14px; height: 14px; }
.kerat.baik { border-color: color-mix(in srgb, var(--sukses) 32%, transparent); background: var(--sukses-lembut); color: var(--sukses); }
.kerat.awas { border-color: color-mix(in srgb, var(--hangat) 36%, transparent); background: var(--hangat-lembut); color: var(--hangat); }
.kerat.buruk { border-color: color-mix(in srgb, var(--bahaya) 32%, transparent); background: var(--bahaya-lembut); color: var(--bahaya); }

.ubah {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-left: auto;
  color: var(--hangat);
  font-size: 0.79rem;
  font-weight: 600;
}

.ubah .titik { background: var(--hangat); animation: denyut 1.8s ease-in-out infinite; }

@keyframes denyut {
  50% { opacity: 0.35; }
}

/* Lebar penuh — memakai seluruh sisa layar di sebelah sidebar. */
main {
  flex: 1;
  width: 100%;
  padding: 22px 28px calc(var(--h-bar) + 36px);
}

.panel { display: none; animation: masuk 0.18s ease; }
.panel.tampil { display: block; }


@keyframes masuk {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .ubah .titik { animation: none; }
}

.kop-bagian { margin-bottom: 24px; }
.kop-bagian h2 { margin: 0; font-size: 1.42rem; font-weight: 680; letter-spacing: -0.021em; }
/* Tanpa batas lebar: keterangan pendek seperti "Token dibuat di … →
   Authorization → Personal Access Tokens." jadi muat dalam satu baris,
   tidak terpotong turun ke bawah padahal ruang di sampingnya masih lega. */
.kop-bagian p { margin: 6px 0 0; color: var(--redup); font-size: 0.9rem; line-height: 1.55; }

.petunjuk {
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: var(--r-kecil);
  background: var(--permukaan);
  color: var(--redup);
  font-size: 0.85rem;
}

.petunjuk strong { color: var(--teks); font-weight: 600; }

/* ----------------------------------------------------- kartu "cara kerja" */

.alur {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--permukaan);
  box-shadow: var(--bayang-kartu);
}

.alur-kepala h3 { margin: 0; font-size: 0.97rem; font-weight: 650; letter-spacing: -0.005em; }
.alur-kepala p { margin: 3px 0 15px; color: var(--redup); font-size: 0.82rem; }

.langkah {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.langkah li { display: flex; gap: 10px; align-items: flex-start; }

.langkah .no {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--aksen-lembut);
  color: var(--aksen);
  font-size: 0.8rem;
  font-weight: 700;
}

.langkah li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.langkah strong { font-size: 0.855rem; font-weight: 620; }
.langkah span { color: var(--redup); font-size: 0.8rem; line-height: 1.45; }
.langkah b { color: var(--teks); font-weight: 600; }

/* Anak panah antar langkah di layar lebar. */
.langkah li { position: relative; }
.langkah li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 2px;
  right: -11px;
  color: var(--samar);
  font-size: 0.9rem;
}

@media (max-width: 680px) {
  .langkah { grid-template-columns: 1fr; gap: 15px; }
  .langkah li:not(:last-child)::after { content: none; }
}

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

.kartu {
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--permukaan);
  box-shadow: var(--bayang-kartu);
  transition: box-shadow 0.18s, border-color 0.18s;
}

/* Kartu yang terlipat (akun/aturan) = baris yang bisa dibuka: beri isyarat halus saat disentuh. */
.kartu.tutup:hover { border-color: var(--garis-tegas); box-shadow: var(--bayang-kartu-hover); }

/* Kartu terlipat dibuat serapat mungkin: daftar aturan jadi bisa dipindai
   sekali lihat, bukan digulir jauh ke bawah. */
.kartu.tutup { margin-bottom: 8px; padding: 10px 16px; cursor: pointer; }
.kartu.tutup .kepala { gap: 8px; }
/* Kolom nama dirampingkan saat terlipat — ia hanya dibaca, bukan diketik,
   jadi tinggi kotak isian penuh cuma menambah tinggi baris. */
.kartu.tutup .nama-besar { padding: 3px 8px; }
.kartu.tutup .ringkas { padding-left: 33px; }

/* ---- baris alat di atas daftar aturan ---- */
.alat-aturan {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.alat-aturan input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
  color: var(--teks);
  font: inherit;
  font-size: 0.875rem;
}
.alat-aturan input[type="search"]:focus {
  outline: 0;
  border-color: var(--aksen);
  background: var(--permukaan);
  box-shadow: 0 0 0 3px var(--aksen-lembut);
}
.alat-hitung {
  flex: none;
  padding: 0 4px;
  color: var(--samar);
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
}

.kartu.mati { opacity: 0.5; }

.kepala { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.kartu-isi { margin-top: 16px; }
.kartu.tutup .kartu-isi { display: none; }

.no {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--permukaan-2);
  color: var(--redup);
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.kepala .isi { flex: 1 1 170px; min-width: 0; }
.kepala .tombol { display: flex; gap: 3px; margin-left: auto; }

.nama-besar {
  border-color: transparent !important;
  background: none !important;
  font-size: 0.96rem !important;
  font-weight: 620 !important;
}

.nama-besar:hover { border-color: var(--garis) !important; }
.nama-besar:focus { background: var(--permukaan) !important; border-color: var(--aksen) !important; }

.ringkas {
  display: none;
  flex: 1 1 100%;
  padding-left: 34px;
  color: var(--samar);
  font-size: 0.79rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kartu.tutup .ringkas { display: block; }

.pil {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pil.uji { background: var(--hangat-lembut); color: var(--hangat); }
.pil.live { background: var(--sukses-lembut); color: var(--sukses); }
.pil.mati { background: var(--permukaan-2); color: var(--samar); border: 1px solid var(--garis); }

/* ----------------------------------------------------------------- penguji */

.penguji { background: var(--permukaan-2); }
.penguji .judul { font-size: 0.9rem; font-weight: 620; }
.baris-uji { display: flex; gap: 8px; margin-top: 10px; }
.baris-uji input { flex: 1; min-width: 0; }

.uji-hasil {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--permukaan);
  font-size: 0.85rem;
}

.uji-hasil .cocok { font-weight: 620; }
.uji-hasil .cocok.ada { color: var(--sukses); }
.uji-hasil .cocok.tiada { color: var(--hangat); }

.uji-hasil .bubble {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 12px 12px 12px 3px;
  background: var(--aksen-lembut);
  color: var(--teks);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Kotak uji di dalam tiap kartu aturan. */
.uji-aturan { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--garis); }
.uji-aturan > .judul { display: block; font-size: 0.9rem; font-weight: 620; }
.uji-aturan > .bantu { display: block; margin-top: 3px; color: var(--redup); font-size: 0.8rem; line-height: 1.5; }

/* ------------------------------------------------------------------ input */

.bidang { display: block; margin-bottom: 17px; }
.bidang.rapat { margin-bottom: 0; }

.judul { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 0.88rem; font-weight: 620; }
.bantu { display: block; margin: 3px 0 7px; color: var(--redup); font-size: 0.805rem; }
.judul + textarea, .judul + input { margin-top: 7px; }

textarea,
input[type="text"],
input[type="number"],
input[type="time"],
input[type="password"] {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
  color: var(--teks);
  font: inherit;
  font-size: 0.895rem;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

textarea {
  display: block;
  resize: vertical;
  min-height: 62px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.845rem;
  line-height: 1.55;
}

textarea::placeholder, input::placeholder { color: var(--samar); }
textarea:hover, input:hover { border-color: var(--redup); }

textarea:focus, input:focus {
  outline: 0;
  background: var(--permukaan);
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px var(--aksen-lembut);
}

/* Kolom kata kunci dibungkus "sumur" jelas dengan aksen warna: pemicu (biru) &
   pengecualian (merah), supaya kotak inputnya langsung kelihatan & mudah dibeda. */
.kunci {
  padding: 13px 14px;
  border: 1px solid var(--garis);
  border-left: 3px solid var(--garis-tegas);
  border-radius: var(--r);
  background: var(--permukaan-2);
}
.kunci .judul { font-weight: 640; }
.kunci textarea, .kunci input { background: var(--permukaan); }

/* Penghitung kata kunci, didorong ke ujung kanan judul. Memberi gambaran isi
   kotak tanpa harus menggulirnya. */
.kunci-hitung {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  color: var(--samar);
  font-size: 0.71rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kunci-hitung.nol { color: var(--samar); opacity: 0.65; }
.kunci textarea:focus, .kunci input:focus { background: var(--permukaan); }
.kunci.kunci-picu { border-left-color: var(--aksen); }
.kunci.kunci-saring { border-left-color: var(--bahaya); }
.kunci .judul::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: baseline;
  background: var(--garis-tegas);
}
.kunci.kunci-picu .judul::before { background: var(--aksen); }
.kunci.kunci-saring .judul::before { background: var(--bahaya); }

.kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* Opsi lanjutan pada editor aturan — disembunyikan biar tidak ramai. */

/* ------------------------------------------------------------ grup setelan */

.grup-kepala { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--garis); }
.grup-kepala h3 { margin: 0; font-size: 0.97rem; font-weight: 650; letter-spacing: -0.005em; }
.grup-kepala p { margin: 3px 0 0; color: var(--redup); font-size: 0.82rem; }

.satuan {
  display: block;
  margin-top: 5px;
  color: var(--aksen);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------- pratinjau percakapan */

.pratinjau { background: var(--permukaan-2); }

.jendela-chat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--permukaan);
}

.chat-baris { display: flex; gap: 9px; align-items: flex-end; }

.chat-baris::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--aksen);
  opacity: 0.85;
}

.gelembung {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  background: var(--aksen);
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jendela-chat .bantu { margin: 4px 0 0; }

/* ------------------------------------------------------------ keadaan kosong */

.kosong.besar { padding: 30px 26px; text-align: left; }
.kosong.besar h3 { margin: 0 0 7px; color: var(--teks); font-size: 1rem; font-weight: 650; }
.kosong.besar p { margin: 0 0 10px; max-width: 58ch; color: var(--redup); font-size: 0.86rem; }
.kosong.besar .bantu { margin-bottom: 12px; }

.templat { display: flex; flex-wrap: wrap; gap: 7px; }
.templat .tombol { padding: 7px 13px; font-size: 0.83rem; }

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

.rangka {
  height: 92px;
  margin-bottom: 14px;
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--permukaan) 25%, var(--permukaan-2) 50%, var(--permukaan) 75%);
  background-size: 400% 100%;
  animation: kilau 1.3s ease-in-out infinite;
}

@keyframes kilau {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rangka { animation: none; background: var(--permukaan-2); }
}

/* ----------------------------------------------------------- editor pesan */

.bubble-set { display: flex; flex-direction: column; gap: 8px; margin-top: 7px; }

.bubble-baris {
  padding: 8px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
}

.bubble-kiri {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bubble-no {
  color: var(--samar);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bubble-alat { display: flex; gap: 3px; }
.bubble-alat .tombol.ikon { width: 26px; height: 26px; }
.bubble-alat .tombol.ikon svg { width: 15px; height: 15px; }

.tombol.tambah-pesan {
  align-self: flex-start;
  width: auto;
  padding: 6px 12px;
  border-style: dashed;
  color: var(--redup);
  font-size: 0.82rem;
}

.tombol.tambah-pesan::before { content: "+"; font-weight: 500; line-height: 1; }

/* --------------------------------------------------------------- sakelar */

.sakelar { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; cursor: pointer; }
.sakelar + .sakelar { border-top: 1px solid var(--garis); }

.sakelar input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 36px;
  height: 21px;
  margin: 1px 0 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--garis-tegas);
  cursor: pointer;
  transition: background 0.18s;
}

.sakelar input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s;
}

.sakelar input[type="checkbox"]:checked { background: var(--aksen); }
.sakelar input[type="checkbox"]:checked::after { transform: translateX(15px); }
.sakelar input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--aksen-lembut); }

.sakelar .ket { font-size: 0.815rem; color: var(--redup); }
.sakelar .ket strong { display: block; margin-bottom: 1px; color: var(--teks); font-size: 0.88rem; font-weight: 620; }

/* Sakelar yang kalau dinyalakan menarik chat customer dari agent manusia. */
.sakelar.awas {
  margin: 11px 0;
  padding: 12px 14px;
  border: 1px solid var(--bahaya);
  border-color: color-mix(in srgb, var(--bahaya) 28%, transparent);
  border-radius: var(--r-kecil);
  background: var(--bahaya-lembut);
}

.sakelar.awas + .sakelar { border-top: 0; }
.sakelar.awas .ket, .sakelar.awas .ket strong { color: var(--bahaya); }
.sakelar.awas input[type="checkbox"]:checked { background: var(--bahaya); }

.hari { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.hari label {
  padding: 6px 13px;
  border: 1px solid var(--garis-tegas);
  border-radius: 999px;
  background: var(--permukaan);
  color: var(--redup);
  font-size: 0.815rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.14s;
}

.hari label:hover { border-color: var(--aksen); color: var(--aksen); }
.hari input { position: absolute; opacity: 0; width: 0; height: 0; }
.hari label:has(input:checked) { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }
.hari label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--aksen-lembut); }

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

.tombol {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan);
  color: var(--teks);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s;
}

.tombol:hover { border-color: var(--aksen); color: var(--aksen); background: var(--aksen-lembut); }
.tombol:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--aksen-lembut); }
.tombol:disabled { opacity: 0.4; cursor: not-allowed; }
.tombol:disabled:hover { border-color: var(--garis-tegas); color: var(--teks); background: var(--permukaan); }

.tombol.utama {
  min-width: 112px;
  background: var(--aksen);
  border-color: var(--aksen);
  color: var(--aksen-teks);
  font-weight: 620;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--aksen) 32%, transparent);
}

.tombol.utama:hover { background: color-mix(in srgb, var(--aksen) 87%, #000); border-color: transparent; color: var(--aksen-teks); }
.tombol.utama:disabled:hover { background: var(--aksen); }

.tombol.bahaya { background: var(--bahaya); border-color: var(--bahaya); color: #fff; font-weight: 620; }
.tombol.bahaya:hover { background: color-mix(in srgb, var(--bahaya) 85%, #000); border-color: transparent; color: #fff; }

.tombol.ikon { width: 30px; height: 30px; padding: 0; color: var(--samar); }
.tombol.ikon:hover { color: var(--aksen); }
.tombol.ikon.hapus:hover { border-color: var(--bahaya); color: var(--bahaya); background: var(--bahaya-lembut); }

.tombol.tambah { width: 100%; padding: 13px; border-style: dashed; color: var(--redup); }
.tombol.tambah::before { content: "+"; font-size: 1.05rem; font-weight: 500; line-height: 1; }

.tombol.kecil { padding: 6px 12px; font-size: 0.8rem; }

/* Bar simpan lokal untuk tab Pengguna Panel (lepas dari bar simpan global). */
.bar-lokal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--garis);
}
.bar-lokal .catatan { margin-right: auto; color: var(--redup); font-size: 0.82rem; }
/* Daftar pengguna dibentuk seperti tabel: kolomnya sejajar dari baris ke baris,
   jadi mudah dipindai walau penggunanya banyak. Dua field saja per baris —
   tidak perlu kartu bertingkat. */
/* Daftar pengguna: baris baca-saja, semua tindakan lewat pop-up. Dibatasi
   lebarnya walau halaman lebar penuh — baris berisi satu nama tidak perlu
   membentang 1900px. */
.pengguna-baris {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--permukaan);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.pengguna-baris:hover { border-color: var(--garis-tegas); box-shadow: var(--bayang-kartu); }

.pengguna-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pengguna-teks strong { font-size: 0.94rem; font-weight: 620; }
.pengguna-teks span { color: var(--samar); font-size: 0.78rem; }

.pengguna-aksi { display: flex; gap: 6px; align-items: center; flex: none; }

@media (max-width: 620px) {
  .pengguna-baris { flex-wrap: wrap; }
  .pengguna-aksi { margin-left: auto; }
}

/* -------------------------------------------------------------- bar aksi */

/* Bilah melayang di tengah bawah, BUKAN sticky selebar layar. Dengan begitu
   muncul-hilangnya tidak menggeser isi halaman sedikit pun, dan saat tidak ada
   perubahan layar benar-benar bersih. */
.bar-aksi {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 8;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--garis-tegas);
  border-radius: 14px;
  background: color-mix(in srgb, var(--permukaan) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Keadaan tersembunyi: visibility (bukan display) supaya bisa dianimasikan
     dan tetap dikeluarkan dari urutan tab keyboard. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(14px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.18s;
}

.bar-aksi.tampil {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Titik kuning berdenyut: penanda "belum disimpan" yang langsung terbaca. */
.bar-tanda {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hangat, #e0a526);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--hangat, #e0a526) 60%, transparent);
  animation: denyut-tanda 2s ease-out infinite;
}
@keyframes denyut-tanda {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hangat, #e0a526) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.bar-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: 6px; }
.bar-teks strong { font-size: 0.85rem; font-weight: 620; color: var(--teks); }
.bar-teks .catatan { font-size: 0.74rem; }

@supports not (backdrop-filter: blur(1px)) {
  .bar-aksi { background: var(--permukaan); }
}

@media (prefers-reduced-motion: reduce) {
  .bar-aksi { transition: opacity 0.12s; transform: translateX(-50%); }
  .bar-aksi.tampil { transform: translateX(-50%); }
  .bar-tanda { animation: none; }
}

.catatan { margin-right: auto; color: var(--redup); font-size: 0.81rem; }
.catatan strong { color: var(--teks); font-weight: 620; }

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

.kosong {
  padding: 34px 20px;
  border: 1px dashed var(--garis-tegas);
  border-radius: var(--r);
  color: var(--samar);
  font-size: 0.87rem;
  text-align: center;
}

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

.dialog {
  width: min(400px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--permukaan);
  color: var(--teks);
  box-shadow: var(--bayang-2);
}

.dialog::backdrop { background: rgba(8, 11, 16, 0.5); backdrop-filter: blur(2px); }
.dialog h3 { margin: 0 0 7px; font-size: 1.04rem; font-weight: 650; }
.dialog p { margin: 0; color: var(--redup); font-size: 0.88rem; }
.dialog-aksi { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }
.dialog .bidang { margin-top: 16px; }
.dialog .login-galat { margin: 14px 0 0; }


/* Tanpa catatan di kiri, tombol simpan tidak perlu melebar penuh. Lebarnya
   disamakan dengan tabel di atasnya supaya tepi kanannya sejajar. */
.bar-lokal { justify-content: flex-end; max-width: 920px; }
.bar-lokal .tombol { flex: none; }

/* ----------------------------------------------------------------- pesan */

.pesan {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 30;
  max-width: min(540px, calc(100vw - 32px));
  padding: 12px 17px;
  border: 1px solid;
  border-radius: var(--r);
  box-shadow: var(--bayang-2);
  font-size: 0.86rem;
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.pesan.tampil { opacity: 1; transform: translate(-50%, 0); }
.pesan.sukses { background: var(--sukses-lembut); color: var(--sukses); border-color: currentColor; }
.pesan.gagal { background: var(--bahaya-lembut); color: var(--bahaya); border-color: currentColor; }

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .pesan.sukses { border-color: color-mix(in srgb, var(--sukses) 32%, transparent); }
  .pesan.gagal { border-color: color-mix(in srgb, var(--bahaya) 32%, transparent); }
}

/* ------------------------------------------------------------------ kecil */

/* Layar sempit: sidebar tidak muat berdampingan, jadi dilipat jadi bilah atas
   dengan menu yang bisa digeser mendatar. */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }

  .sisi-nav {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sisi-merek { padding: 0; margin: 0; border: 0; }
  .sisi-kaki {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    flex-direction: row;
    align-items: center;
  }
  .nav {
    order: 3;
    flex: 1 1 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
  }
  .nav button { width: auto; padding: 8px 11px; }
  .nav button span { flex: none; }
  .nav button.aktif::before { display: none; }

  .atas { padding: 12px 16px 0; }
  main { padding: 16px 16px calc(var(--h-bar) + 28px); }
  .kisi { grid-template-columns: 1fr; }
  .catatan { flex: 1 1 100%; margin: 0; order: 3; }
}