/* ============================================================================
   SALINAN — disalin dari ../../../asset/css/mci-tokens.css (root proyek,
   E:\xampp\htdocs\mci-onemore\asset\css\mci-tokens.css) supaya servable dari
   docroot mci_v2/public/. SUMBER TUNGGAL tetap file di root — kalau berubah,
   salin ulang ke sini. TODO (dicatat di docs/wip/_assumptions.md): ganti ke
   symlink atau build-step sebelum Gelombang 5 cutover, supaya dua salinan
   tidak diam-diam divergen.
   ============================================================================ */

/* ============================================================================
   MCI OneMore — DESIGN TOKENS
   SUMBER TUNGGAL. Semua nilai warna/tipografi/bentuk/spasi ada di sini, sekali.

   Diturunkan dari logo-mci-onemore.png lewat ekstraksi palet
   (System.Drawing, 133x156 Format8bppIndexed, 116 entri, diurutkan
   per frekuensi piksel) — ekstraksi ASLI, dipertahankan sebagai riwayat:

       #FFFFFF  53,9%  ground
       #1C63AD  11,1%  biru pita     -> --mci-brand-600 (nilai asli, lihat UPDATE di bawah)
       #00356D  10,7%  navy wordmark -> --mci-brand-900 (nilai asli, lihat UPDATE di bawah)
       #D9A151   9,1%  emas          -> --mci-gold-500 (masih berlaku, TIDAK diubah)

   UPDATE 2026-09-11 — brand ramp diganti ke hue referensi desain baru
   (screenshot Transfer / "Mula dari sini" / Performance Index yang dibahas
   dengan user, dicatat di docs/wip/_assumptions.md), BUKAN lagi ekstraksi
   pixel logo persis. brand-600 sekarang #1546C4 (dulu #1C63AD), brand-900
   #0F2A6B (dulu #00356D) — hue bergeser dari 211° (logo) ke arah indigo.
   Referensi desain cuma memberi 6 stop (50/100/400/600/800/900); stop lain
   (200/300/500/700/950) diinterpolasi linear RGB antar anchor terdekat —
   ditandai per baris di bawah, bukan hasil ekstraksi/desain langsung, jadi
   minta review designer kalau butuh presisi lebih. Gold TIDAK terdampak:
   --mci-gold-500 tetap ekstraksi logo asli, tidak diubah oleh update ini.

   Biru pita dan navy hue-nya identik (211 derajat) di ekstraksi ASLI — itu
   dua stop di SATU ramp, bukan dua warna (sejarah desain; hue brand sudah
   bergeser sejak UPDATE di atas). Netral anti-alias logo (#7894B2,
   #E0E6ED) tidak berubah, tetap jatuh di 211 derajat, praktis sama dengan
   Tailwind slate (215 derajat), jadi slate diadopsi apa adanya alih-alih
   diciptakan ulang.

   File ini sengaja TIDAK memuat sintaks Tailwind apa pun, supaya bisa
   di-link dari mana saja — termasuk views/layout_member.php (AdminLTE 2)
   saat porting nanti, cukup satu <link> setelah baris 29.

   PENTING — kenapa semua diprefiks --mci-:
   Tailwind v4 meng-emit token @theme-nya ke :root juga, memakai namespace
   --color-*, --text-*, --radius-*, --shadow-*, --font-*. Tanpa prefix,
   --text-base di sini akan bertabrakan dengan --text-base milik Tailwind
   dan menghasilkan var() sirkuler. Prefix juga menyelaraskan file ini
   dengan konvensi --bs-* Bootstrap di target porting.

   Dipakai oleh: mockup-member-rebuild-v2.html, mockup-styleguide.html,
   mci_v2/views/layouts/app.php (AppShell, sejak Gelombang 0.4).

   UPDATE 2026-09-12 — blok `.dark { }` ditambahkan di bawah (menutup TODO
   "dark mode nanti cukup satu blok .dark{}" di komentar Tier 2), dipicu
   toggle terang/gelap di topbar mci_v2 (ikon sun/moon, menggantikan ikon
   keranjang — docs/wip/_assumptions.md). Nilai bg-app juga disamakan ke
   #f5f7fb (sebelumnya var(--mci-slate-50) di sini vs #f5f7fb di salinan
   mci_v2 — drift kecil yang sempat tidak sinkron, ditutup di update ini).

   UPDATE 2026-09-12 (lanjutan) — `--mci-overlay-backdrop` ditambahkan
   (Tier 2, rgba literal ber-alpha) untuk menutup item "belum diperbaiki"
   di docs/wip/_assumptions.md poin #40b: backdrop modal/drawer perlu
   translucent sungguhan, tapi `bg-slate-900/50` SELALU no-op di Tailwind
   v3 untuk warna yang ditulis var() tanpa `<alpha-value>` (testing.md §2).
   ============================================================================ */

:root {

  /* ==========================================================================
     TIER 1 — PRIMITIF
     Jangan pernah dirujuk langsung dari markup. Pakai alias Tier 2 di bawah.
     ========================================================================== */

  /* --- Brand. Hue indigo sejak UPDATE 2026-09-11 (lihat header file).
         50/100/400/600/800/900 = anchor persis dari referensi desain;
         200/300/500/700/950 = interpolasi linear RGB antar anchor terdekat
         (belum diverifikasi designer). ----------------------------------- */
  --mci-brand-50:  #F0F5FF;  /* anchor referensi */
  --mci-brand-100: #E3ECFD;  /* anchor referensi */
  --mci-brand-200: #A6C1F3;  /* interpolasi 100→400 */
  --mci-brand-300: #6A95EA;  /* interpolasi 100→400 */
  --mci-brand-400: #2D6AE0;  /* anchor referensi */
  --mci-brand-500: #2158D2;  /* interpolasi 400→600 */
  --mci-brand-600: #1546C4;  /* anchor referensi — dulu #1C63AD (logo persis) — 7,76:1 di atas putih (AAA) */
  --mci-brand-700: #1440A7;  /* interpolasi 600→800           — 9,04:1 di atas putih (AAA) */
  --mci-brand-800: #123A8A;  /* anchor referensi */
  --mci-brand-900: #0F2A6B;  /* anchor referensi — dulu #00356D (logo persis) — 13,43:1 di atas putih (AAA) */
  --mci-brand-950: #0E225C;  /* interpolasi, ekstrapolasi gelap dari 900 */

  /* --- Gold. Diperbarui 2026-09-15 mengikuti referensi banner modern MCI (Button #E8A628, Pill #F2B544).
         KHUSUS PRESTASI/REWARD — lihat allowlist di bagian bawah file. ----- */
  --mci-gold-50:  #FEF9EF;
  --mci-gold-100: #FDF1DA;
  --mci-gold-200: #FADFA5;
  --mci-gold-300: #F6C970;
  --mci-gold-400: #F2B544;  /* Pill/badge emas di atas latar biru brand */
  --mci-gold-500: #E8A628;  /* Tombol emas referensi — 3,8:1 di atas navy brand-800, kontras tinggi & hangat */
  --mci-gold-600: #C78816;  /* Ikon/border/angka >=24px */
  --mci-gold-700: #97640D;  /* Teks isi emas pada ground terang */

  /* --- Netral. Tailwind slate, diadopsi verbatim (= hue anti-alias logo). - */
  --mci-slate-50:  #F8FAFC;
  --mci-slate-100: #F1F5F9;
  --mci-slate-200: #E2E8F0;
  --mci-slate-300: #CBD5E1;
  --mci-slate-400: #94A3B8;  /* 2,56:1 — BUKAN UNTUK TEKS. Border & ikon disabled. */
  --mci-slate-500: #64748B;  /* 4,76:1 — lantai teks muted. */
  --mci-slate-600: #475569;
  --mci-slate-700: #334155;
  --mci-slate-800: #1E293B;
  --mci-slate-900: #0F172A;

  /* --- Semantik. Dua hue saja.
         Sengaja TIDAK ADA warna warning: amber-peringatan akan bertabrakan
         makna dengan emas-prestasi ("emas itu hebat atau hati-hati?").
         Yang butuh perhatian memakai negative. ----------------------------- */
  --mci-positive-50:  #ECFDF5;
  --mci-positive-600: #059669;  /* 3,77:1 — fill & ikon */
  --mci-positive-700: #047857;  /* 5,48:1 — teks */
  --mci-negative-50:  #FEF2F2;
  --mci-negative-600: #DC2626;  /* 4,83:1 — teks aman */
  --mci-negative-700: #B91C1C;

  /* ==========================================================================
     TIER 2 — ALIAS SEMANTIK
     INI yang dipakai markup. Pemisahan dua tier inilah yang membuat dark mode
     nanti cukup satu blok .dark { } tanpa menyentuh satu baris markup pun.
     ========================================================================== */

  --mci-bg-app:        #f5f7fb;
  --mci-surface:       #FFFFFF;
  --mci-surface-sunk:  var(--mci-slate-100);
  --mci-border:        var(--mci-slate-200);
  --mci-border-strong: var(--mci-slate-300);

  /* Scrim backdrop modal/drawer — SATU-SATUNYA token warna di file ini yang
     ditulis rgba() literal (ber-alpha), bukan var(--mci-slate-*) seperti
     token lain. Ini disengaja, bukan inkonsisten: Tailwind v3 mengabaikan
     modifier opacity (`/50`) pada warna yang ditulis var() tanpa placeholder
     `<alpha-value>` (lihat "ATURAN PEMAKAIAN" di bawah & testing.md §2) —
     bg-slate-900/50 karena itu SELALU render 100% opaque, no-op, sempat jadi
     bug nyata di tiga komponen (confirm-dialog.php, passcode-verify-modal.php,
     mobile-nav.php, ditemukan lalu "diperbaiki" jadi solid 2026-09-11 karena
     saat itu belum ada token ber-alpha — lihat docs/wip/_assumptions.md
     poin #40b — dan BENAR-BENAR diperbaiki translucent di sini 2026-09-12).
     Dipakai lewat kelas arbitrer Tailwind `bg-[var(--mci-overlay-backdrop)]`
     (BUKAN pelanggaran TokenLintTest — merujuk token terdaftar, beda dari
     nilai arbitrer lepas; lihat allowlist testing.md §2). TIDAK diubah di
     blok `.dark {}` di bawah — scrim modal sengaja sama di kedua tema
     (konvensi umum: Material Design scrim juga theme-agnostic). */
  --mci-overlay-backdrop: rgba(15, 23, 42, 0.5);  /* slate-900 @ 50% — setara Bootstrap .modal-backdrop */

  --mci-ink:           var(--mci-slate-800);
  --mci-ink-muted:     var(--mci-slate-500);
  --mci-ink-invert:    #FFFFFF;

  --mci-accent:        var(--mci-brand-600);
  --mci-accent-hover:  var(--mci-brand-700);
  --mci-accent-soft:   var(--mci-brand-100);  /* naik dari brand-50 (2026-09-11) — brand-50 baru nyaris tak kelihatan buat background nav aktif/badge soft; brand-100 match referensi desain */
  --mci-accent-text:   var(--mci-brand-700);
  --mci-accent-fill-soft: rgba(28, 99, 173, 0.08);  /* brand-600 @ 8% — fill area chart, satu-satunya tempat alpha dipakai */

  --mci-reward:        var(--mci-gold-500);
  --mci-reward-icon:   var(--mci-gold-600);
  --mci-reward-text:   var(--mci-gold-700);
  --mci-reward-soft:   var(--mci-gold-50);

  --mci-focus:         var(--mci-brand-600);

  /* ==========================================================================
     TIPOGRAFI — 6 ukuran, digeser ke standar industri mobile UI 2026-09-12
     (keputusan eksplisit user, lihat docs/wip/_assumptions.md
     "Tipografi — skala dinaikkan ke standar industri"). MENGGANTIKAN skala
     lama (base=14px demi kesamaan persis dengan default Bootstrap 3.3.5) —
     itu keputusan porting yang menyamar jadi keputusan tipografi, bukan lagi
     berlaku. base=16px sekarang jadi acuan permanen: konsensus universal
     (Material Design 3 Body Large, Bootstrap 5, Apple HIG Body/Callout,
     WCAG) dan menghindari auto-zoom iOS Safari pada input <16px.
     12px tetap LANTAI. Tidak ada 9/10/11px di mana pun.
     ========================================================================== */
  --mci-fs-xs:   0.75rem;     --mci-lh-xs:   1.125rem;  /* 12 — caption, label */
  --mci-fs-sm:   0.875rem;    --mci-lh-sm:   1.25rem;   /* 14 — sekunder, nav sidebar (Material Body/Title Medium) */
  --mci-fs-base: 1rem;        --mci-lh-base: 1.5rem;    /* 16 — isi/paragraf (Material Body Large, Bootstrap 5, Apple Body) */
  --mci-fs-lg:   1.125rem;    --mci-lh-lg:   1.75rem;   /* 18 — judul kartu (Material Title Medium/Large) */
  --mci-fs-xl:   1.25rem;     --mci-lh-xl:   1.75rem;   /* 20 — judul halaman */
  --mci-fs-2xl:  1.75rem;     --mci-lh-2xl:  2.125rem;  /* 28 — angka menonjol non-KPI (nama member di hero, dsb.) */

  /* --- Dua ukuran angka KPI, ditambah 2026-09-13 (Milestone 1.2c).
         product-spec.md §7.2 mewajibkan StatCard/HeroKpi 32–40px; skala lama
         berhenti di 28px, jadi angka saldo/bonus — info paling penting di
         layar — selalu under-sized (temuan audit UI/UX 2026-09-12 poin 8).
         HANYA untuk angka KPI. Bukan untuk judul: hierarki judul tetap
         berhenti di --mci-fs-xl. ------------------------------------------- */
  --mci-fs-3xl:  2rem;        --mci-lh-3xl:  2.375rem;  /* 32 — angka StatCard */
  --mci-fs-4xl:  2.5rem;      --mci-lh-4xl:  2.875rem;  /* 40 — angka HeroKpi, satu per halaman */

  /* --- Bobot: 3 saja. 700 SENGAJA TIDAK ADA.
         v1 memakai font-bold 108x vs font-medium 36x — begitu semuanya bold,
         bold berhenti menandakan "penting". -------------------------------- */
  --mci-fw-normal:   400;
  --mci-fw-medium:   500;
  --mci-fw-semibold: 600;

  /* ==========================================================================
     BENTUK & KEDALAMAN
     ========================================================================== */

  --mci-rad-sm:   6px;     /* badge, input, chip */
  --mci-rad-md:   10px;    /* semua kartu & panel */
  --mci-rad-full: 9999px;  /* avatar, pill, progress */

  /* Kartu memakai BORDER, bukan shadow. v1 memakai keduanya sekaligus, dan
     itulah yang membuatnya terasa berat. Shadow hanya untuk yang benar-benar
     melayang: dropdown, modal, drawer. */
  --mci-elev-pop: 0 8px 24px -6px rgb(15 23 42 / 0.14),
                  0 2px  6px -2px rgb(15 23 42 / 0.08);

  /* ==========================================================================
     RITME LAYOUT — basis 4px
     ========================================================================== */

  --mci-gap-block:    1.5rem;   /* antar 6 blok dashboard */
  --mci-gap-card:     1rem;     /* antar kartu dalam satu blok */
  --mci-pad-card:     1.25rem;  /* padding kartu desktop */
  --mci-pad-card-sm:  1rem;     /* padding kartu mobile */
  --mci-sidebar-w:    15rem;    /* 240px — v1 pakai 288px karena label kepanjangan */
  --mci-topbar-h:     3.5rem;   /* 56px — menggantikan h-15 v1 yang tidak valid */

  /* ==========================================================================
     Z-INDEX — 3 tier. Sebelum ini ditulis literal (z-30/40/50) langsung di
     tiap komponen tanpa skala bersama; topbar sticky sempat "kebetulan benar"
     cuma karena urutan DOM menang tie-break terhadap backdrop drawer, bukan
     karena ditata sengaja. Dipetakan lewat tailwind.config.theme.extend.zIndex
     (mci_v2/views/layouts/app.php) jadi utility z-chrome/z-overlay-backdrop/
     z-overlay-panel — TIDAK menggantikan skala numerik default Tailwind.
     ========================================================================== */
  --mci-z-chrome:            30;  /* chrome persisten non-overlay: topbar, bottom-nav */
  --mci-z-overlay-backdrop:  40;  /* backdrop gelap di belakang drawer/modal */
  --mci-z-overlay-panel:     50;  /* panel/dialog/dropdown mengambang di atas backdrop */
}

/* ============================================================================
   MODE GELAP — override Tier 2 (dan, khusus positive/negative, Tier 1 juga —
   lihat catatan di bawah) untuk toggle terang/gelap (mci_v2 topbar, ikon
   sun/moon, 2026-09-12, docs/wip/_assumptions.md). Diaktifkan lewat class
   `dark` di <html> (document.documentElement) — `.dark` menang atas `:root`
   karena keduanya menarget elemen yang sama dengan spesifisitas sama (0,1,0)
   dan blok ini ditulis SETELAH `:root`, bukan karena `:root` "ditimpa
   beneran". Properti yang TIDAK disebut di sini tetap ikut nilai `:root`.

   NILAI DI BAWAH FIRST-PASS, BELUM DIVERIFIKASI DESIGNER — status sama
   seperti brand-200/300/500/700/950 (lihat header file paling atas).
   Kontras dihitung kasar, bukan diaudit alat (axe/Lighthouse) satu per satu.

   Beberapa peran SENGAJA DIBALIK arahnya dari mode terang (bukan salah
   ketik): `surface-sunk` dan `accent-hover` LEBIH TERANG dari `surface`/
   `accent` dasarnya di sini (bukan lebih gelap seperti mode terang), karena
   hover state yang menggelapkan lebih jauh nyaris tak kelihatan di atas
   latar yang sudah gelap — standar dark-UI menambah highlight tipis,
   bukan menggelapkan lagi.

   Khusus positive/negative: TIDAK ADA alias Tier 2 terpisah untuk warna ini
   (tailwind.config di mci_v2/views/layouts/app.php merujuk langsung
   --mci-positive-700 dst., sebuah Tier 1), jadi override di sini menimpa
   Tier 1-nya langsung — pengecualian sadar dari aturan "Tier 1 jangan
   pernah ditimpa", cuma untuk dua warna ini, karena tidak ada lapisan
   alias lain untuk ditimpa.
   ========================================================================== */
.dark {

  /* --- Latar & garis. Urutan gelap→terang: bg-app (paling gelap) < surface
         < surface-sunk (LEBIH TERANG dari surface — lihat catatan di atas
         soal hover dibalik arahnya). ------------------------------------- */
  --mci-bg-app:        var(--mci-slate-900);
  --mci-surface:       var(--mci-slate-800);
  --mci-surface-sunk:  var(--mci-slate-700);
  --mci-border:        var(--mci-slate-700);
  --mci-border-strong: var(--mci-slate-600);

  /* --- Teks. ink naik ke slate-50 (~15:1 di atas slate-900). ink-muted
         pakai slate-400 — DIIZINKAN di sini walau dilarang untuk teks di
         atas putih (aturan pemakaian di bawah file ini): konteksnya beda,
         abu terang di atas nyaris-hitam kontrasnya jauh lebih tinggi
         dibanding abu di atas putih yang dilarang itu. -------------------- */
  --mci-ink:       var(--mci-slate-50);
  --mci-ink-muted: var(--mci-slate-400);

  /* --- Accent (brand). accent & accent-hover naik satu-dua stop dari mode
         terang supaya cukup terang di atas latar gelap; accent-hover LEBIH
         TERANG (bukan lebih gelap) dari accent — arah dibalik, lihat
         catatan di atas. accent-text pakai brand-300 (jauh lebih terang
         dari brand-700 mode terang) supaya terbaca di atas accent-soft/
         surface gelap. accent-soft & accent-fill-soft jadi overlay alpha
         rendah (bukan swatch pucat solid) — swatch pucat solid mode terang
         akan jadi blok terang mencolok kalau dipakai apa adanya di atas
         gelap. ------------------------------------------------------------ */
  --mci-accent:           var(--mci-brand-500);
  --mci-accent-hover:     var(--mci-brand-400);
  --mci-accent-soft:      rgba(45, 106, 224, 0.18);  /* brand-400 @ 18% */
  --mci-accent-text:      var(--mci-brand-300);
  --mci-accent-fill-soft: rgba(45, 106, 224, 0.14);  /* brand-400 @ 14% */

  --mci-focus: var(--mci-brand-400);  /* brand-600 mode terang terlalu gelap jadi cincin fokus di atas latar gelap */

  /* --- Reward (emas). reward-icon & reward-text naik ke stop lebih terang
         (gold-700 mode terang nyaris tak kelihatan di atas latar gelap);
         reward-soft jadi overlay alpha, alasannya sama dengan accent-soft.
         reward (gold-500, fill) TIDAK diubah — sudah cukup kontras di atas
         gelap sebagai fill. ------------------------------------------------ */
  --mci-reward-icon: var(--mci-gold-400);
  --mci-reward-text: var(--mci-gold-300);
  --mci-reward-soft: rgba(217, 161, 81, 0.16);  /* gold-500 @ 16% */

  /* --- Positive/negative. Lihat catatan header blok ini soal kenapa Tier 1
         ditimpa langsung di sini. -600 (fill/ikon) dipertahankan — sudah
         cukup kontras di atas gelap. -700 (teks) & -50 (soft bg) diganti:
         ramp positive/negative cuma 3 stop (50/600/700), tidak ada stop
         terang-sedang buat teks di atas gelap seperti brand/gold, jadi
         dipakai hex literal baru (first-pass, belum diverifikasi — sama
         seperti stop interpolasi brand di Tier 1). ------------------------ */
  --mci-positive-50:  rgba(5, 150, 105, 0.16);  /* positive-600 @ 16% */
  --mci-positive-700: #34D399;                   /* emerald terang, literal baru — lihat catatan */
  --mci-negative-50:  rgba(220, 38, 38, 0.16);  /* negative-600 @ 16% */
  --mci-negative-700: #F87171;                   /* merah terang, literal baru — lihat catatan */
}

/* ============================================================================
   ATURAN PEMAKAIAN — dieja di sini supaya ikut ke mana pun file ini dibawa.

   EMAS hanya boleh muncul di LIMA tempat (diperluas dari tiga, 2026-09-11
   — konflik & alasan dicatat di docs/wip/_assumptions.md):
     1. blok Pencapaian & Reward
     2. badge peringkat member
     3. fill progress milestone
     4. badge penanda menu/fitur eksklusif level tertentu (pola "KHUSUS
        STOKIS") — BUKAN badge status generik, itu tetap positive/negative
     5. indikator favorit/bookmark (bintang solid vs outline) — BUKAN
        tombol aksi biasa
   Di luar itu, tidak pernah. Rasio 60/30/10 tidak bisa diperiksa saat
   membangun; allowlist lima tempat ini bisa.

   BATAS KONTRAS EMAS:
     --mci-gold-500  2,29:1  fill saja, tidak pernah teks
     --mci-gold-600  3,25:1  ikon, border, angka besar (>=24px)
     --mci-gold-700  5,25:1  satu-satunya emas yang boleh seukuran teks isi

   --mci-slate-400 DILARANG untuk teks (2,56:1, di bawah AA di ukuran apa pun).
   Border dan ikon disabled saja. Lantai teks muted adalah --mci-slate-500.

   TANPA GRADIENT. Logo flat dua warna; UI ikut flat.

   KOTAK/BADGE "WARNA LEMBUT" WAJIB TRIO TIER 2 SEHUE, TIDAK PERNAH DICAMPUR
   TIER 1 (bug nyata 2026-09-12, docs/wip/_assumptions.md poin #58): pakai
   `{hue}-soft` (bg) + `{hue}` (border, full-strength) + `{hue}-text` (teks)
   dari HUE YANG SAMA — mis. accent-soft/accent/accent-text, reward-soft/
   reward/reward-text — bukan `bg-brand-50 border-brand-200` dkk. langsung.
   Alasannya bukan cuma estetika: trio Tier 2 bergerak BERSAMA saat mode
   gelap (`.dark {}` di atas), sedangkan Tier 1 mentah beku — kalau
   dicampur (kontainer Tier 1 + teks Tier 2), keduanya berpisah arah dan
   teks bisa jadi senada dengan kontainernya sendiri (nyaris tak terlihat).
   Pola rujukan yang sudah benar sejak awal: tone `danger` di
   `confirm-dialog.php` (`bg-negative-soft ... border-negative`).

   ASET GAMBAR (logo, ikon raster) DI ATAS KONTAINER BER-TOKEN JUGA KENA:
   kalau isinya berwarna tetap (bukan SVG inline `currentColor` seperti
   `nav_icon()`), sediakan varian per-tema + `:src` Alpine ke `darkMode` —
   lihat header-logo.png/header-logo-text-white.png di topbar.php/login.php/
   passcode.php/mobile-nav.php. Warna CSS bukan satu-satunya yang perlu
   diaudit saat menambah kondisi tema baru.
   ============================================================================ */