/* ============================================================================
   Kulit CAA untuk demo — diturunkan dari kulit-caa.css, 29 Agt 2026.
   ============================================================================

   Diberikan kepada H02 setelah rilis 1.1.0 tayang. Aturannya sama seperti CAL:
   demo memuat `bootstrap.min.css` dan `caa.css` yang ASLI, disalin apa adanya
   dari `CAA-LAB/public/assets/css/`. Tampilan demo karena itu tidak dapat
   menyimpang dari aplikasi tanpa ada yang menyadarinya.

   Yang berbeda dari CAL hanyalah awalan kelasnya — `caa-` menggantikan `cal-`.
   Bila kelak keduanya menyimpang lebih jauh, pisahkan berkasnya; jangan
   menambal dengan aturan yang menebak.
   ========================================================================= */


/* Bilah demo dikembalikan ke ukuran portal.
 *
 * Bootstrap dimuat SETELAH publik.css, dan ia menyetel ulang `body` ke 16px
 * beserta tumpukan fontnya sendiri. Untuk kerangka aplikasi itu justru benar —
 * aplikasi aslinya memang 16px. Yang tidak benar adalah bilah demo di atasnya:
 * ia milik portal, dan portal memakai 15px. Tanpa aturan ini seluruh bilah
 * ikut membesar, dan halaman terasa "ter-zoom" tanpa ada yang mengubah zoom.
 */
.demo-bar {
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
}

.demo-bar .btn,
.demo-bar select,
.demo-bar label { font-family: inherit; }

/* Kerangka. Aplikasi memakai `min-height:100vh`; di demo tingginya dibatasi
   bilah demo di atasnya, jadi tingginya dihitung dari sisa layar. */
.shell.kulit-caa { display: block; }
.kulit-caa .caa-side { position: fixed; top: 52px; bottom: 0; }

/* Sidebar TIDAK boleh menggunting isinya.
 *
 * Panel menu aplikasi adalah anak yang diposisikan absolut di SEBELAH KANAN
 * sidebar (`left: calc(100% - .4rem)` di cal.css). Kelas `.side` milik portal
 * menyetel `overflow-y: auto` — masuk akal untuk daftar rata yang panjang,
 * fatal di sini: panelnya terpotong menjadi sepotong tipis selebar sisa
 * sidebar, dan menu terlihat "tidak keluar".
 *
 * Gejalanya menyesatkan karena panelnya SEBENARNYA terbuka; yang hilang hanya
 * bagian yang menyembul keluar. Aplikasi sendiri menyelesaikannya dengan cara
 * yang sama — `.caa-side__nav{overflow:visible}` di ≥992px — dan bisa begitu
 * karena daftar utamanya cuma sembilan baris, muat tanpa perlu digulir.
 */
@media (min-width: 992px) {
  .kulit-caa .caa-side,
  .kulit-caa .caa-side__nav { overflow: visible; }
}
.kulit-caa .kanan { margin-left: var(--caa-side-w, 252px); min-height: calc(100vh - 52px); }
.kulit-caa .main { padding: 1.4rem; }

/* Bilah atas demo memakai kelas `.appbar` milik portal; disamakan dengan
   `.caa-top` aplikasi. */
.kulit-caa .appbar {
  height: 62px;
  background: var(--caa-card);
  border-bottom: 1px solid var(--caa-line);
  gap: .4rem;
  padding: 0 1.1rem;
  position: sticky;
  top: 52px;
  z-index: 1030;
}

.kulit-caa .appbar .cari { flex: 1; max-width: 560px; position: relative; }

.kulit-caa .appbar .cari input {
  border-radius: 10px;
  padding-left: 2.2rem;
  background: var(--caa-bg);
  border: 1px solid transparent;
  height: 38px;
  width: 100%;
}

.kulit-caa .appbar .cari input:focus { background: var(--caa-card); border-color: var(--caa-primary); outline: 0; }
.kulit-caa .appbar .cari .ic { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); opacity: .5; }
.kulit-caa .appbar .cari kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .65rem; opacity: .45; }

.kulit-caa .appbar .ikonbtn {
  width: 38px; height: 38px; border-radius: 10px; border: 0;
  background: transparent; font-size: 1.1rem;
}

.kulit-caa .appbar .ikonbtn:hover { background: rgba(0, 0, 0, .05); }
.kulit-caa .appbar .aku .badge { background: var(--caa-primary); color: #fff; }

/* ------------------------------------------------------- khusus demo (1) --
   Lencana paket. Satu-satunya elemen yang sengaja BERBEDA dari aplikasi:
   tanpa ini calon pembeli tidak dapat melihat batas paket sama sekali, dan
   itulah pertanyaan yang membawanya ke halaman demo.                       */
.kulit-caa .caa-side__link .kls {
  margin-left: auto;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .38rem;
  border-radius: 5px;
  color: #fff;
  opacity: .9;
  flex: none;
}

.kulit-caa .caa-side__link .kls + .caa-side__n { margin-left: .4rem; }

/* ------------------------------------------------------- khusus demo (2) --
   Fitur di luar paket. Diredupkan, BUKAN disembunyikan: yang tidak terlihat
   tidak dapat menjadi alasan naik paket.                                    */
.kulit-caa .caa-side__link.terkunci { opacity: .45; }
.kulit-caa .caa-side__link.terkunci:hover { opacity: .7; background: var(--caa-sidebar-2); }
.kulit-caa .caa-stat.terkunci { opacity: .5; }

/* ------------------------------------------------------- khusus demo (3) --
   Baris "perlu dibereskan". Aplikasi menyusunnya di Blade-nya sendiri; di
   demo ia digambar JavaScript, jadi kelasnya perlu didefinisikan di sini.  */
.caa-todo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--caa-line);
  font-size: .88rem;
}

.caa-todo:last-child { border-bottom: 0; }
.caa-todo .badge { flex: none; font-size: .68rem; }
.caa-todo__teks { flex: 1; min-width: 0; }
.caa-todo__aksi { color: var(--caa-primary); font-size: .84rem; }
.caa-todo__aksi:hover { text-decoration: underline; }

/* Kelompok sidebar TIDAK disetel di sini.
 *
 * Percobaan pertama menggantinya menjadi akordeon, dengan alasan yang terdengar
 * masuk akal: pengunjung demo sedang membandingkan paket, jadi biarkan seluruh
 * isinya terbuka sekaligus. Hasilnya justru dua aturan yang saling melawan —
 * `caa.css` memposisikan panelnya absolut di sebelah kanan, aturan tambahan
 * memaksanya tampil di bawah — dan panelnya menyembul di tepi sidebar sambil
 * memunculkan gulir mendatar.
 *
 * Yang benar adalah membiarkannya: aplikasi memakai panel melayang di layar
 * ≥992px dan akordeon di bawah itu, keduanya sudah tertulis di `caa.css`.
 * Lencana paket tetap terbaca di dalam panel melayang, jadi tidak ada yang
 * hilang — dan demo mewarisi perilaku aplikasi secara cuma-cuma, termasuk
 * perubahan yang belum dibuat hari ini.
 */

@media (max-width: 1023px) {
  .kulit-caa .caa-side { transform: translateX(-100%); transition: transform .2s; }
  .kulit-caa.side-buka .caa-side { transform: none; }
  .kulit-caa .kanan { margin-left: 0; }
}

/* ---------------------------------------------- empat layar khusus demo --
   Kelas berikut ada di aplikasi (Blade-nya sendiri) tetapi tidak ada di
   `caa.css`, karena di sana ia ditulis langsung di halamannya. Di demo semua
   digambar JavaScript, jadi definisinya perlu berdiri di sini.             */

/* Jejak audit — satu peristiwa per baris. */
.caa-log {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--caa-line);
  font-size: .86rem;
}

.caa-log:last-child { border-bottom: 0; }
.caa-log--bahaya .caa-log__ik { color: var(--caa-bad); }
.caa-log__jam { flex: none; width: 9.5rem; color: var(--caa-primary); font-size: .8rem; font-variant-numeric: tabular-nums; }
.caa-log__ik { flex: none; opacity: .6; }
.caa-log__teks { flex: 1; min-width: 0; }
.caa-log__teks--tautan { color: var(--caa-primary); }
.caa-log__aktor { flex: none; font-weight: 400; font-size: .7rem; opacity: .85; }
.caa-log__aksi {
  flex: none; width: 8.5rem; text-align: right;
  font-size: .7rem; letter-spacing: .04em; opacity: .55; font-family: ui-monospace, Consolas, monospace;
}

/* Password generator — hasilnya harus terbaca huruf per huruf. */
.caa-gen__hasil {
  font-size: 1.35rem;
  letter-spacing: .04em;
  color: var(--caa-primary);
  word-break: break-all;
}

@media (max-width: 767.98px) {
  .caa-log { flex-wrap: wrap; }
  .caa-log__jam { width: 100%; }
  .caa-log__aksi { width: auto; }
}

/* Identitas & Logo — pratinjau kepala menu.
   Warnanya mengambil warna sidebar aplikasi supaya yang dilihat pembeli benar-
   benar rupa akhirnya, bukan kotak abu-abu yang "kira-kira begitu". */
.caa-merek__pv {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  background: var(--caa-sidebar);
  border-radius: 10px;
  margin-bottom: .5rem;
}

.caa-merek__logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  background: var(--caa-primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .78rem;
}

.caa-merek__b1 { color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.15; }
.caa-merek__b2 {
  color: var(--caa-sidebar-ink-mut);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .15rem;
}

.caa-merek__berkas {
  width: 46px; height: 46px; flex: none;
  border-radius: 10px;
  background: var(--caa-bg);
  border: 1px solid var(--caa-line);
  display: grid; place-items: center;
  font-size: 1.3rem; opacity: .55;
}