/* =================================================================
   FILE: ASSETS/CSS/theme.css
   FUNGSI: SATU-SATUNYA tempat warna X-DOC-LOCK didefinisikan.

   Diambil dari acuan tema https://x-doc-site.vercel.app (keputusan
   pemilik 9 Okt 2026): hitam pekat, panel abu gelap, aksen merah-bata
   & crimson.

   Format nilainya adalah KANAL RGB "R G B", bukan hex. Itu disengaja:
   Tailwind menyusun warnanya sebagai rgb(var(--c-x) / <alpha-value>),
   sehingga pengubah kepekatan tetap hidup (bg-accent/10, border-glow/50).
   Kalau token diisi hex, setiap kelas berkepekatan diam-diam tidak
   berlaku - tidak ada galat, hanya warna yang salah.

   BERKAS INI DIMUAT SESUDAH tailwind.css di setiap halaman (lihat
   ENGINE/INUX-HEAD.asp) supaya nilainya menang.

   Berbeda dari acuan, di sini TIDAK ada saklar tema APi/CUBEX. Acuan
   memakainya untuk membandingkan dua merek; X-DOC-LOCK punya satu
   merek, dan saklar yang tidak dipakai hanya menambah keadaan yang
   harus diuji. Menambahkannya kembali kelak cukup menyalin blok
   html[data-tema="..."] dari acuan.
   ================================================================= */
:root {
  --c-page:          0   0   0;  /* latar halaman (hitam)              */
  --c-surface:      32  35  37;  /* panel / kartu  (#202325)           */
  --c-surface-2:    22  24  26;  /* panel sekunder                     */
  --c-field:        42  45  48;  /* latar input                        */
  --c-nav:          31  34  36;  /* bilah navigasi (#1F2224)           */
  --c-ink:         240 240 241;  /* teks utama                         */
  --c-muted:       178 180 184;  /* teks sekunder                      */
  --c-subtle:      122 125 130;  /* teks tersier                       */
  --c-line:         52  55  58;  /* garis tepi                         */
  --c-line-strong:  84  88  92;  /* garis input                        */

  --c-accent:      160  74  60;  /* tombol utama, merah-bata (#A04A3C) */
  --c-accent-hover:184  88  70;
  --c-accent-text: 232 131 107;  /* tautan aktif / ikon, salem         */
  --c-accent-ink:  255 255 255;
  --c-glow:        184  40  74;  /* crimson, untuk dekorasi            */

  --c-foot:         74  74  77;  /* bilah hak cipta (#4A4A4D)          */

  --c-success:      74 196 128;
  --c-warning:     232 168  76;
  --c-danger:      240 100 100;

  --radius-card: 0.875rem;
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; color-scheme: dark; }
body { background: rgb(var(--c-page)); color: rgb(var(--c-ink)); }

/* Kartu bergaya acuan: gradasi merah gelap + bingkai crimson tipis. */
.kartu-merah {
  background: radial-gradient(120% 90% at 50% 0%, rgb(var(--c-glow) / .10), transparent 60%),
              linear-gradient(180deg, rgb(28 18 19), rgb(12 10 11));
  border: 1px solid rgb(var(--c-glow) / .22);
}

/* Ikon "kaca" merah seperti ikon produk di acuan. */
.ikon-merah {
  background: radial-gradient(circle at 35% 30%, rgb(230 90 110), rgb(140 20 45) 55%, rgb(60 10 20));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 18px -4px rgb(var(--c-glow) / .55);
  color: #fff;
}

/* ---------------------------------------------------------------
   Isian formulir. Dikumpulkan di sini, bukan ditempel sebagai deretan
   kelas Tailwind di setiap <input>: formulir pendaftaran punya belasan
   isian, dan satu saja yang kelasnya tertinggal akan tampak berbeda
   warna di tengah formulir yang sama.
   --------------------------------------------------------------- */
.isian {
  width: 100%;
  border-radius: .5rem;
  border: 1px solid rgb(var(--c-line-strong));
  background: rgb(var(--c-field));
  padding: .625rem .875rem;
  font-size: .875rem;
  color: rgb(var(--c-ink));
}
.isian::placeholder { color: rgb(var(--c-subtle)); }
.isian:focus {
  outline: none;
  border-color: rgb(var(--c-accent-text));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / .25);
}
.isian:disabled { opacity: .55; }
.label-isian {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgb(var(--c-muted));
}
.bantuan-isian { margin-top: .375rem; font-size: .6875rem; color: rgb(var(--c-subtle)); }

/* Pita status: satu bentuk, warna mengikuti arti. */
.pita { display: inline-block; border-radius: 999px; padding: .125rem .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .04em; }
.pita-tunggu  { background: rgb(var(--c-warning) / .12); color: rgb(var(--c-warning)); }
.pita-aktif   { background: rgb(var(--c-success) / .12); color: rgb(var(--c-success)); }
.pita-tolak   { background: rgb(var(--c-danger) / .12);  color: rgb(var(--c-danger)); }
.pita-netral  { background: rgb(255 255 255 / .05);      color: rgb(var(--c-muted)); }