@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* =============================================================================
   MONEYCREATIVE NETWORK — GLOBAL.CSS
   =============================================================================

   CARA MEMUAT FILE INI  — diperbaiki 26 Agt 2026

     File ini TIDAK ditempel ke mana pun. Ia diunggah sebagai file, lalu
     dimuat oleh snippet 04.

       1. cPanel > File Manager > public_html/wp-content/uploads/
       2. Buat folder "mcn", unggah file ini apa adanya ke dalamnya
          -> wp-content/uploads/mcn/global.css
       3. Pasang snippets/04-assets.php lewat Code Snippets

     Petunjuk sebelumnya berbunyi "Elementor > Site Settings > Custom CSS".
     ITU SALAH: menu tersebut hanya ada di Elementor PRO. Di Elementor Free
     tidak ada sama sekali.

     Jalur yang sekarang justru lebih baik, bukan sekadar penambal — CSS-nya
     jadi file sungguhan yang bisa di-cache browser antar halaman, tidak
     terikat tema (Appearance > Additional CSS disimpan PER TEMA dan hilang
     saat tema diganti), dan tidak terikat Elementor.

     JANGAN mengulang file ini di tiap widget HTML. Kalau diulang, ukuran
     halaman membengkak dan cache jadi tidak efektif — ARSITEKTUR.md bagian 8.

     MEMPERBARUI: unggah ulang, timpa yang lama. Versi cache mengikuti waktu
     ubah file, jadi pengunjung langsung dapat yang baru tanpa hard-refresh.

   SUMBER NILAI
     Semua warna, ukuran, radius, dan bayangan diambil langsung dari
     prototipe Diah (source/JSX MCN VERSI CLAUDE.jsx) lewat UI-SPEC.md.
     Tidak ada nilai yang dikarang. Kalau butuh nilai baru, ambil dari JSX —
     jangan menebak.

   ATURAN PENAMAAN
     Semua class diawali "mc-". Ini WAJIB. File ini berlaku di seluruh situs,
     termasuk halaman yang dibangun Elementor dan tema twentytwentyfive.
     Tanpa awalan, style kita akan bertabrakan dengan milik mereka.

     Karena alasan yang sama, tidak ada aturan yang menyasar tag polos
     (button, input, h2) di tingkat global. Semuanya berada di dalam .mc-app.

   SOAL @import DI BARIS PALING ATAS
     Baris itu memuat font dan HARUS jadi aturan pertama — CSS mengabaikan
     @import yang didahului aturan lain.

     Cara ini paling sederhana dan langsung jalan, tapi bukan yang tercepat:
     browser baru tahu harus mengunduh font setelah CSS ini selesai diunduh,
     jadi ada satu perjalanan bolak-balik tambahan.

     Kalau nanti terasa lambat, hapus baris @import di atas lalu pasang
     snippet kecil ini (Code Snippets, "Run snippet everywhere"):

       add_action( 'wp_head', function () {
           echo '<link rel="preconnect" href="https://fonts.googleapis.com">';
           echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
           echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css2'
              . '?family=Playfair+Display:wght@600;700;800'
              . '&family=Poppins:wght@300;400;500;600;700&display=swap">';
       }, 1 );

   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKEN
   Satu-satunya tempat warna dan ukuran didefinisikan. Kalau sebuah nilai
   muncul dua kali di file ini, salah satunya harus jadi token.
   ============================================================================= */

:root {
	/* --- Palet inti (JSX baris 33-42) --- */
	--mc-navy-dark:   #0D1B2A;
	--mc-navy:        #1E3A5F;
	--mc-gold:        #D4AF37;
	--mc-gold-soft:   #E6C86A;
	--mc-gold-deep:   #B8912C;   /* ujung gradasi tombol utama */
	--mc-cream-light: #F5F1E6;
	--mc-cream:       #E7DFC9;
	--mc-white:       #FFFFFF;
	--mc-ink:         #22314A;

	/* --- Warna pendukung (UI-SPEC bagian 1) --- */
	--mc-success:        #3E7C3E;
	--mc-success-strong: #2E6B2E;
	--mc-success-border: #9CC59C;
	--mc-success-bg:     #E8F3E8;

	--mc-warn:    #9C6B1E;
	--mc-warn-bg: #FDF6E8;

	--mc-danger:      #B23B3B;
	--mc-danger-mid:  #C0392B;
	--mc-danger-deep: #8A2D2D;
	--mc-danger-bg:   #FFF0F0;

	--mc-info:    #3D6DA8;
	--mc-info-bg: #EEF3FA;

	--mc-muted:       #8A8467;
	--mc-muted-soft:  #9A9478;
	--mc-gold-tint:   #FDF8E9;
	--mc-gold-tint-2: #FFF8E8;

	/* --- Huruf --- */
	--mc-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--mc-font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* --- Bentuk (UI-SPEC bagian 3) --- */
	--mc-radius-card:  18px;
	--mc-radius-panel: 14px;
	--mc-radius-input: 10px;
	--mc-radius-pill:  999px;

	/* --- Bayangan --- */
	--mc-shadow-card:   0 10px 40px rgba(13, 27, 42, 0.08);
	--mc-shadow-soft:   0 6px 24px rgba(13, 27, 42, 0.06);
	--mc-shadow-back:   0 3px 12px rgba(13, 27, 42, 0.06);
	--mc-shadow-header: 0 4px 20px rgba(13, 27, 42, 0.3);
	--mc-shadow-gold:   0 6px 18px rgba(212, 175, 55, 0.35);
	--mc-shadow-mic:    0 3px 10px rgba(212, 175, 55, 0.35);
	--mc-shadow-logo:   0 10px 34px rgba(13, 27, 42, 0.18);
	--mc-shadow-modal:  0 24px 80px rgba(0, 0, 0, 0.4);

	/* --- Fokus --- */
	--mc-focus-ring: 0 0 0 3px rgba(212, 175, 55, 0.18);

	/* --- Ukuran --- */
	--mc-content-max: 860px;
}


/* =============================================================================
   2. KERANGKA HALAMAN
   .mc-app adalah pembungkus wajib. Semua aturan di bawah bergantung padanya,
   sehingga tidak ada satu pun style yang bocor ke halaman lain.
   ============================================================================= */

.mc-app {
	background: var(--mc-cream-light);
	color: var(--mc-ink);
	font-family: var(--mc-font-body);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.8;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mc-app *,
.mc-app *::before,
.mc-app *::after {
	box-sizing: border-box;
}

.mc-app img {
	max-width: 100%;
	height: auto;
}

/* Lebar konten — UI-SPEC bagian 3. */
.mc-container {
	max-width: var(--mc-content-max);
	margin: 0 auto;
	padding: 0 20px 80px;
}

.mc-container--wide {
	max-width: 1180px;
}


/* =============================================================================
   3. HEADER
   Sticky, gradasi navy. JSX baris 1982.
   ============================================================================= */

.mc-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 18px 24px;
	background: linear-gradient(160deg, var(--mc-navy-dark) 0%, var(--mc-navy) 100%);
	box-shadow: var(--mc-shadow-header);
}

.mc-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Logo adalah approved asset. DILARANG diubah warnanya, diregangkan, atau
   digambar ulang dengan CSS — UI-SPEC bagian 9. Yang diatur di sini hanya
   ukuran tampil dan sudut, persis seperti prototipe.

   PERHATIAN — kenapa height-nya "auto", bukan 44px:
   File mcn-logo-mark.webp berukuran 260 x 234 piksel, jadi TIDAK persegi.
   Memaksanya jadi 44x44 akan memipihkan logo, dan itu persis yang dilarang
   UI-SPEC bagian 9. Prototipe sendiri memakai height "auto" (JSX baris 342),
   jadi tampil 44 x 39,6 piksel. Radius 50% tetap dipakai — hasilnya lonjong,
   dan memang begitu di desain aslinya. */
.mc-header__mark {
	width: 44px;
	height: auto;          /* JANGAN diganti 44px - lihat catatan di bawah */
	border-radius: 50%;
	flex-shrink: 0;
}

/* Nama brand: "Money" krem + "creative" emas. JSX baris 1986-1987. */
.mc-header__name {
	display: block;
	font-family: var(--mc-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	color: var(--mc-cream-light);
	margin: 0;
}

.mc-header__name em {
	font-style: normal;
	color: var(--mc-gold);
}

/* Taglinenya KREM, bukan emas. JSX baris 1989. */
.mc-header__tagline {
	display: block;
	font-size: 8.5px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--mc-cream);
	margin-top: 2px;
}

.mc-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Tautan menu di header — teks polos tanpa border. JSX baris 1995. */
.mc-navlink {
	display: inline-block;
	padding: 8px 12px;
	background: transparent;
	border: none;
	color: var(--mc-cream-light);
	font-family: var(--mc-font-body);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.mc-navlink:hover {
	color: var(--mc-gold);
}


/* =============================================================================
   4. TIPOGRAFI
   ============================================================================= */

.mc-hero-title {
	font-family: var(--mc-font-display);
	font-size: clamp(30px, 5vw, 46px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--mc-navy-dark);
	margin: 0;
}

.mc-title {
	font-family: var(--mc-font-display);
	font-size: 30px;
	line-height: 1.2;
	color: var(--mc-navy-dark);
	margin: 0;
}

.mc-title--light {
	color: var(--mc-cream-light);
}

.mc-card-title {
	font-family: var(--mc-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mc-navy-dark);
	margin: 0;
}

.mc-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mc-gold);
	margin-bottom: 8px;
}

.mc-text {
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--mc-ink);
}

.mc-hint {
	display: block;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--mc-muted);
	margin-top: 4px;
}

.mc-muted {
	color: var(--mc-muted);
}

/* SectionTitle — eyebrow + judul + garis emas 64x3. JSX baris 527. */
.mc-section-title {
	margin-bottom: 22px;
}

.mc-section-title__accent {
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--mc-gold);
	margin-top: 12px;
}


/* =============================================================================
   5. KARTU & PANEL
   ============================================================================= */

.mc-card {
	background: var(--mc-white);
	border: 1px solid var(--mc-cream);
	border-radius: var(--mc-radius-card);
	padding: 34px;
	box-shadow: var(--mc-shadow-card);
}

.mc-panel {
	background: var(--mc-white);
	border: 1px solid var(--mc-cream);
	border-radius: var(--mc-radius-panel);
	padding: 20px 22px;
}

.mc-panel--flat {
	box-shadow: none;
}

.mc-panel--soft {
	box-shadow: var(--mc-shadow-soft);
}

.mc-divider {
	height: 1px;
	border: 0;
	background: var(--mc-cream);
	margin: 24px 0;
}


/* Halaman dokumen — kebijakan privasi, dan nanti syarat & ketentuan.

   Satu-satunya class baru di sini adalah .mc-doc. Sisanya sengaja memakai
   pemilih turunan (.mc-doc ul, .mc-doc h2, ...) supaya halaman dokumen bisa
   ditulis dengan HTML biasa: daftar dan sub-judul. Menuntut satu class untuk
   setiap <li> di halaman sepanjang ini hanya menambah kemungkinan salah
   ketik, tanpa menambah apa pun yang bisa dilihat pengunjung.

   TIDAK ada gaya tabel di sini, dan itu disengaja. Versi pertama halaman
   kebijakan privasi memakai dua tabel; keduanya diganti daftar butir 2 Sep
   atas permintaan Rizka. Aturan tabelnya ikut dicabut daripada ditinggalkan
   menganggur — CSS yang tidak dipakai siapa pun akan tetap disalin,
   dipelihara, dan dipercaya orang berikutnya sebagai sesuatu yang berfungsi. */

   Lebarnya sengaja lebih sempit daripada .mc-container. Baris teks panjang
   melelahkan dibaca, dan halaman ini memang untuk dibaca — bukan dipindai. */

.mc-doc {
	max-width: 720px;
	margin: 0 auto;
}

.mc-doc h2 {
	font-family: var(--mc-font-display);
	font-size: 21px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 34px 0 12px;
}

.mc-doc h3 {
	font-family: var(--mc-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--mc-navy);
	margin: 20px 0 8px;
}

.mc-doc h2:first-child,
.mc-doc h3:first-child {
	margin-top: 0;
}

.mc-doc ul,
.mc-doc ol {
	margin: 10px 0 14px;
	padding-left: 22px;
	color: var(--mc-ink);
	font-size: 14px;
	line-height: 1.85;
}

.mc-doc li {
	margin-bottom: 6px;
}

.mc-doc li::marker {
	color: var(--mc-gold-deep);
}

@media (max-width: 480px) {
	.mc-doc h2 { font-size: 18px; }
}


/* =============================================================================
   6. FIELD & INPUT
   Field: label uppercase di atas, input, hint opsional. JSX baris 442.
   ============================================================================= */

.mc-field {
	display: block;
	margin-bottom: 18px;
}

.mc-field__label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-navy);
	margin-bottom: 6px;
}

/* Tanda wajib. Bukan dari prototipe — ini tambahan aksesibilitas supaya
   pengguna tahu field mana yang harus diisi sebelum menekan kirim. */
.mc-field__label--wajib::after {
	content: " *";
	color: var(--mc-danger);
}

.mc-input,
.mc-textarea,
.mc-select {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--mc-cream);
	border-radius: var(--mc-radius-input);
	background: var(--mc-white);
	font-family: var(--mc-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--mc-ink);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mc-textarea {
	min-height: 120px;
	resize: vertical;
}

.mc-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	/* Panah dibuat dari SVG inline supaya tidak ada permintaan file tambahan. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231E3A5F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

.mc-input::placeholder,
.mc-textarea::placeholder {
	color: var(--mc-muted-soft);
}

/* Fokus — UI-SPEC bagian 3 menandai ini WAJIB DIPERTAHANKAN.
   Jangan dihapus dengan alasan estetika: tanpa penanda fokus, pengguna
   keyboard tidak tahu sedang berada di field yang mana. */
.mc-app .mc-input:focus,
.mc-app .mc-textarea:focus,
.mc-app .mc-select:focus {
	border-color: var(--mc-gold);
	box-shadow: var(--mc-focus-ring);
}

.mc-app button:focus-visible,
.mc-app a:focus-visible,
.mc-app [tabindex]:focus-visible {
	outline: 3px solid var(--mc-gold);
	outline-offset: 2px;
}

/* Field bermasalah. */
.mc-input--error,
.mc-textarea--error,
.mc-select--error {
	border-color: var(--mc-danger);
}

.mc-field__error {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--mc-danger);
	margin-top: 4px;
}

.mc-input:disabled,
.mc-textarea:disabled,
.mc-select:disabled {
	background: var(--mc-cream-light);
	color: var(--mc-muted);
	cursor: not-allowed;
}

/* Kolom yang diisi Google dan dikunci. readOnly, bukan disabled — kolom
   disabled tidak ikut terkirim lewat form.elements, dan nilainya akan hilang
   tanpa gejala apa pun. Warnanya sengaja dibedakan dari :disabled supaya
   terbaca "sudah terisi & terkunci", bukan "tidak bisa dipakai". */
.mc-input--terkunci {
	background: var(--mc-gold-tint);
	border-color: var(--mc-gold);
	color: var(--mc-navy-dark);
	cursor: default;
}

/* ---- Login Google (opsional) ----

   Blok ini digambar tersembunyi dan baru ditampilkan app.js setelah skrip
   Google benar-benar berhasil dimuat. Tidak ada gaya untuk tombolnya
   sendiri: tombol itu milik Google, digambar di dalam iframe, dan CSS kita
   tidak menjangkaunya. Yang diatur di sini hanya ruang di sekelilingnya. */

.mc-gauth {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 4px 0 16px;
	border-bottom: 1px dashed var(--mc-cream);
	margin-bottom: 4px;
}

.mc-gauth__tombol {
	min-height: 44px;
	display: flex;
	justify-content: center;
}

.mc-gauth__hint {
	text-align: center;
	max-width: 420px;
	margin: 0;
}

.mc-gauth__ok,
.mc-gauth__lepas {
	display: block;
}

/* Perintah di atas tombol, muncul hanya selama form terkunci.

   Sengaja BUKAN merah. Ini bukan galat — pengunjung belum melakukan apa
   pun yang salah, dia baru sampai. Warna galat di layar pertama membuat
   orang mengira ada yang rusak. */
.mc-gauth__wajib {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	text-align: center;
}

/* Form yang sedang menunggu login.

   Yang menanggung sebagian besar pekerjaan visual adalah gaya :disabled
   bawaan field — sudah krem, redup, dan bertanda not-allowed. Aturan di
   bawah menambah satu hal yang tidak bisa dilakukan :disabled: meredupkan
   JUDUL langkah, yang bukan elemen form sehingga tidak punya keadaan
   disabled sama sekali.

   Blok .mc-gauth sengaja TIDAK ikut diredupkan — ia satu-satunya bagian
   yang masih bisa dipakai, dan meredupkannya bersama yang lain berarti
   menyembunyikan jalan keluarnya. */
.mc-form--terkunci .mc-section-title,
.mc-form--terkunci .mc-field__label {
	opacity: 0.5;
}

/* Tombol yang tampil sebagai tautan. Dipakai untuk "Bukan Anda?" — sebuah
   jalan keluar, bukan ajakan, jadi ia tidak boleh sebesar tombol lain. */
.mc-gauth__ganti {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 6px;
	font: inherit;
	font-weight: 600;
	color: var(--mc-success-strong);
	text-decoration: underline;
	cursor: pointer;
}

.mc-gauth__ganti:hover {
	color: var(--mc-navy-dark);
}

/* Honeypot anti-bot. Dipasangkan dengan field "website" di snippet 02.
   Disembunyikan tanpa display:none — sebagian bot melewati field yang
   display-nya none, tapi tetap mengisi yang hanya digeser keluar layar. */
.mc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}


/* =============================================================================
   7. TOMBOL
   GoldButton — JSX baris 467.
   ============================================================================= */

.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 30px;
	border: none;
	border-radius: var(--mc-radius-pill);
	background: linear-gradient(135deg, var(--mc-gold-soft), var(--mc-gold) 55%, var(--mc-gold-deep));
	color: var(--mc-navy-dark);
	font-family: var(--mc-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--mc-shadow-gold);
	transition: transform .15s ease;
}

.mc-btn:hover {
	transform: translateY(-1px);
}

.mc-btn:active {
	transform: translateY(0);
}

.mc-btn--secondary {
	background: transparent;
	border: 1.5px solid var(--mc-navy);
	color: var(--mc-navy);
	box-shadow: none;
}

.mc-btn--ghost-gold {
	background: rgba(212, 175, 55, 0.08);
	border: 1.5px solid var(--mc-gold);
	color: var(--mc-gold);
	box-shadow: none;
}

.mc-btn--small {
	padding: 8px 18px;
	font-size: 12.5px;
	/* Varian kecil di prototipe memakai gradasi dua titik, bukan tiga. */
	background: linear-gradient(135deg, var(--mc-gold-soft), var(--mc-gold));
	box-shadow: none;
}

.mc-btn--block {
	display: flex;
	width: 100%;
}

.mc-btn:disabled,
.mc-btn[aria-disabled="true"] {
	background: #CBBF9A;
	color: var(--mc-navy-dark);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

.mc-btn--secondary:disabled {
	background: transparent;
	border-color: var(--mc-cream);
	color: var(--mc-muted);
}

/* Tombol di header — outline emas di atas latar navy. JSX baris 2020. */
.mc-btn--header {
	padding: 8px 18px;
	background: transparent;
	border: 1px solid rgba(212, 175, 55, 0.5);
	color: var(--mc-gold);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	box-shadow: none;
}

/* BackButton — JSX baris 511. */
.mc-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	margin-bottom: 20px;
	background: var(--mc-white);
	border: 1.5px solid var(--mc-cream);
	border-radius: var(--mc-radius-pill);
	color: var(--mc-navy);
	font-family: var(--mc-font-body);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--mc-shadow-back);
}

/* CopyBtn — pill outline, berubah jadi "Tersalin" 1,6 detik. */
.mc-copy {
	padding: 7px 16px;
	border: 1.5px solid var(--mc-gold);
	border-radius: var(--mc-radius-pill);
	background: transparent;
	color: var(--mc-navy-dark);
	font-family: var(--mc-font-body);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.mc-copy.is-done {
	background: var(--mc-gold);
}


/* =============================================================================
   8. CHIP SELECT
   Pilihan multi berbentuk pill. JSX baris 493.
   ============================================================================= */

.mc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mc-chip {
	position: relative;
	padding: 8px 16px;
	border: 1.5px solid var(--mc-cream);
	border-radius: var(--mc-radius-pill);
	background: var(--mc-white);
	color: var(--mc-navy);
	font-family: var(--mc-font-body);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.mc-chip.is-active {
	border-color: var(--mc-gold);
	background: var(--mc-gold-tint);
	color: var(--mc-navy-dark);
}

/* Perbesar area sentuh tanpa mengubah ukuran tampil chip. Ini perbaikan
   teknis untuk jari di layar HP, bukan perubahan desain — UI-SPEC bagian 6
   mengizinkannya.

   Tingginya "100% + 8px", bukan angka mati 44px. Alasannya: jaraknya antar
   baris chip memang 8px, jadi lapisan ini melebar tepat 4px ke atas dan 4px
   ke bawah — persis mengisi setengah jarak di kedua sisi. Dengan begitu area
   sentuh dua baris chip bersentuhan tapi tidak pernah bertumpuk. Kalau
   dipatok 44px, di sebagian ukuran font lapisannya saling menimpa dan
   ketukan bisa mendarat di chip baris sebelahnya. */
.mc-chip::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: calc(100% + 8px);
	transform: translateY(-50%);
}


/* =============================================================================
   9. KOTAK STATUS
   ============================================================================= */

.mc-note {
	border-radius: var(--mc-radius-panel);
	padding: 14px 18px;
	font-size: 12.5px;
	line-height: 1.7;
	border: 1px solid transparent;
}

.mc-note--success {
	background: var(--mc-success-bg);
	border-color: var(--mc-success-border);
	color: var(--mc-success);
}

.mc-note--warn {
	background: var(--mc-warn-bg);
	border-color: var(--mc-gold);
	color: var(--mc-warn);
}

.mc-note--error {
	background: var(--mc-danger-bg);
	border-color: var(--mc-danger);
	color: var(--mc-danger-deep);
}

.mc-note--info {
	background: var(--mc-info-bg);
	border-color: #C3D4EA;
	color: var(--mc-info);
}

.mc-note--gold {
	background: var(--mc-gold-tint);
	border-color: var(--mc-gold);
	color: var(--mc-navy-dark);
}

/* Badge pill. */
.mc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border-radius: var(--mc-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	border: 1px solid transparent;
}

.mc-badge--success {
	background: #EAF5EA;
	border-color: #B7DCB7;
	color: var(--mc-success-strong);
}

.mc-badge--gold {
	background: var(--mc-gold-tint);
	border-color: var(--mc-gold);
	color: var(--mc-navy-dark);
}

/* Disclaimer harga — UI-SPEC bagian 10. Teksnya keputusan bisnis dan
   wajib tampil di mana pun fee matching disebut. Jangan disembunyikan
   di layar kecil. */
.mc-disclaimer {
	background: var(--mc-gold-tint-2);
	border: 1px dashed var(--mc-gold);
	border-radius: var(--mc-radius-panel);
	padding: 14px 18px;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--mc-navy);
}


/* =============================================================================
   10. GRID
   Dua pola dari prototipe, keduanya sudah responsif. UI-SPEC bagian 6.
   ============================================================================= */

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

.mc-grid--cards {
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.mc-stack > * + * {
	margin-top: 14px;
}


/* =============================================================================
   11. VOICE TEXTAREA
   Textarea + tombol mic melingkar di kanan atas. UI-SPEC bagian 8.

   Tombol mic HANYA ditampilkan kalau browser mendukung Web Speech API.
   Safari iOS tidak mendukung, dan semua browser di iPhone memakai mesin
   Safari — termasuk Chrome. Keputusan D1: diterima apa adanya, pengguna
   mengetik manual. JS yang menambahkan .mc-voice--ready.
   ============================================================================= */

.mc-voice {
	position: relative;
}

.mc-voice .mc-textarea {
	padding-right: 14px;
}

.mc-voice--ready .mc-textarea {
	padding-right: 60px;
}

.mc-voice__mic {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mc-gold-soft), var(--mc-gold));
	color: var(--mc-navy-dark);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--mc-shadow-mic);
}

.mc-voice--ready .mc-voice__mic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mc-voice.is-recording .mc-voice__mic {
	background: var(--mc-danger-mid);
	color: var(--mc-white);
	box-shadow: 0 0 0 5px rgba(192, 57, 43, 0.18);
	animation: mc-pulse 1.4s ease-in-out infinite;
}

.mc-voice.is-recording .mc-textarea {
	border-color: var(--mc-gold);
}

/* Aturan lama `.mc-voice__timer { display:none }` DIHAPUS 26 Agt.
   Timer sekarang tinggal di dalam .mc-voice__bar, yang dikendalikan atribut
   `hidden` dari JS. Aturan lama menyembunyikannya secara permanen kecuali
   `.mc-voice` punya class is-recording — dan begitu bilah rekam dibuat,
   timer tidak akan pernah muncul kalau kedua mekanisme itu dibiarkan
   berebut. Gayanya kini ada di bagian 20.8. */

/* Pesan saat browser tidak mendukung.
   Tersembunyi secara bawaan dan baru muncul setelah JS memasang class
   .mc-voice--unsupported. Sengaja begitu: kalau bawaannya terlihat, pesan
   "tidak didukung" sempat berkedip di browser yang justru mendukung,
   selama sepersekian detik sebelum JS jalan. */
.mc-voice__unsupported {
	display: none;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--mc-muted);
	margin-top: 6px;
}

.mc-voice--unsupported .mc-voice__unsupported {
	display: block;
}


/* =============================================================================
   12. LOGO HERO
   Varian lengkap. UI-SPEC bagian 9 — ukuran boleh diatur, isi tidak boleh
   disentuh. Kalau file gagal dimuat, JANGAN diganti teks atau bentuk
   tebakan; blokir saja rendernya.
   ============================================================================= */

/* LEBARNYA 346,5px, BUKAN 210px.
   Angka 210 di UI-SPEC bagian 9 adalah nilai prop "size" di prototipe, bukan
   lebar tampil. Komponen Logo mengalikannya 1,65 untuk varian lengkap
   (JSX baris 341), jadi 210 x 1,65 = 346,5. Kalau dipatok 210px, logo hero
   tampil jauh lebih kecil daripada desain Diah. */
.mc-logo-full {
	display: block;
	width: 346.5px;
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: var(--mc-shadow-logo);
}

/* Header dokumen: 138 x 1,65 = 227,7. */
.mc-logo-full--doc {
	width: 227.7px;
}


/* =============================================================================
   13. STATE MEMUAT
   Dipakai layar "menganalisis" saat menunggu jawaban AI.
   ============================================================================= */

.mc-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--mc-cream);
	border-top-color: var(--mc-gold);
	border-radius: 50%;
	animation: mc-spin .8s linear infinite;
	margin: 0 auto;
}

.mc-loading {
	text-align: center;
	padding: 40px 20px;
}

.mc-loading__text {
	font-size: 12.5px;
	color: var(--mc-muted);
	margin-top: 14px;
}


/* =============================================================================
   14. ANIMASI
   ============================================================================= */

@keyframes mc-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

@keyframes mc-spin {
	to { transform: rotate(360deg); }
}


/* =============================================================================
   15. UTILITAS
   ============================================================================= */

.mc-center     { text-align: center; }
.mc-nowrap     { white-space: nowrap; }
.mc-hidden     { display: none !important; }
.mc-mt-0       { margin-top: 0; }
.mc-mb-0       { margin-bottom: 0; }

/* Terlihat oleh pembaca layar, tidak terlihat di layar. Dipakai untuk
   label yang secara visual sudah jelas tapi tidak punya teks. */
.mc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* =============================================================================
   16. RESPONSIF
   Titik uji wajib: 360 · 390 · 768 · 1440 (UI-SPEC bagian 6).
   Halaman publik wajib lolos keempatnya.
   ============================================================================= */

@media (max-width: 768px) {
	.mc-card {
		padding: 24px 20px;
	}

	.mc-title {
		font-size: 26px;
	}

	.mc-panel {
		padding: 16px 18px;
	}
}

@media (max-width: 480px) {
	.mc-header {
		padding: 14px 16px;
	}

	.mc-header__actions {
		width: 100%;
		justify-content: flex-start;
	}

	.mc-container {
		padding: 0 16px 60px;
	}

	.mc-card {
		padding: 20px 16px;
		border-radius: var(--mc-radius-panel);
	}

	.mc-title {
		font-size: 23px;
	}

	/* Tombol utama jadi selebar layar — lebih mudah ditekan dengan jempol
	   dan tidak menyisakan target sempit di tengah. */
	.mc-btn:not(.mc-btn--small):not(.mc-btn--header) {
		width: 100%;
	}

	.mc-grid {
		grid-template-columns: 1fr;
	}
}


/* =============================================================================
   17. GERAK MINIMAL
   Ada di prototipe (JSX baris 1804) dan WAJIB dipertahankan. Sebagian orang
   merasa pusing atau mual oleh animasi; ini menghormati setelan sistem mereka.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.mc-app *,
	.mc-app *::before,
	.mc-app *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}


/* =============================================================================
   18. CETAK
   Dipakai kalau klien mencetak halaman hasil analisis.
   ============================================================================= */

@media print {
	.mc-header,
	.mc-back,
	.mc-btn,
	.mc-copy,
	.mc-voice__mic {
		display: none !important;
	}

	.mc-app {
		background: var(--mc-white);
	}

	.mc-card {
		box-shadow: none;
		border-color: #CCC;
		break-inside: avoid;
	}
}


/* =============================================================================
   19. HALAMAN LANDING
   Hanya dipakai di "/". Nilai dari JSX baris 2029-2088.

   Halaman ini satu-satunya yang perlu SEO, jadi isinya HTML biasa tanpa
   JavaScript aplikasi — ARSITEKTUR.md bagian 3.
   ============================================================================= */

.mc-hero {
	position: relative;
	overflow: hidden;
	padding: 70px 20px 90px;
	text-align: center;
	background: linear-gradient(165deg, var(--mc-navy-dark) 0%, var(--mc-navy) 70%, #24466E 100%);
}

/* Cahaya emas di kanan atas. Murni hiasan, jadi disembunyikan dari
   pembaca layar lewat aria-hidden di HTML-nya. */
.mc-hero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 15%, rgba(212, 175, 55, 0.14), transparent 45%);
	pointer-events: none;
}

.mc-hero__inner {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}

.mc-hero .mc-logo-full {
	margin: 0 auto;
}

.mc-hero__eyebrow {
	color: var(--mc-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.35em;
	margin: 34px 0 14px;
}

.mc-hero-title--light {
	color: var(--mc-cream-light);
}

.mc-hero-title em {
	font-style: normal;
	color: var(--mc-gold);
}

.mc-hero__lead {
	max-width: 560px;
	margin: 22px auto 34px;
	color: var(--mc-cream);
	font-size: 15px;
	line-height: 1.8;
}

.mc-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.mc-btn--hero {
	padding: 15px 40px;
	font-size: 15px;
}

.mc-btn--hero.mc-btn--ghost-gold {
	padding: 15px 36px;
}

.mc-hero__note {
	margin-top: 18px;
	font-size: 12px;
	color: var(--mc-cream);
}

.mc-hero__note strong {
	color: var(--mc-gold);
}

/* FIND · MATCH · ENABLE · GROW — warnanya berselang-seling krem/emas. */
.mc-hero__words {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
}

.mc-hero__word {
	color: var(--mc-cream);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3em;
}

.mc-hero__word:nth-child(even) {
	color: var(--mc-gold);
}

/* Empat kartu langkah, naik 44px menimpa hero. */
.mc-steps {
	position: relative;
	max-width: 980px;
	margin: -44px auto 0;
	padding: 0 20px 70px;
}

.mc-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.mc-step {
	padding: 24px 22px;
}

.mc-step__label {
	color: var(--mc-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 8px;
}

.mc-step__desc {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--mc-ink);
}

.mc-footer {
	text-align: center;
	padding: 26px 20px 40px;
	color: var(--mc-navy);
	font-size: 12px;
	line-height: 1.7;
}

/* Tautan di footer dan di halaman dokumen diwarnai EKSPLISIT.

   Halaman ini dipasang lewat Elementor Canvas, yang melewati header dan
   footer tema — tapi TIDAK melewati gaya dasar tema untuk <a>. Tanpa dua
   aturan ini, warnanya ditentukan tema WordPress yang sedang aktif, dan
   ia berubah tanpa ada yang menyentuh berkas ini. Pelajaran yang sama
   dengan atribut fill di ikon kisi: kalau warnanya penting, tulis. */
.mc-footer a,
.mc-doc a {
	color: var(--mc-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mc-footer a:hover,
.mc-doc a:hover {
	color: var(--mc-gold-deep);
}

@media (max-width: 480px) {
	.mc-hero {
		padding: 44px 16px 70px;
	}

	.mc-hero__eyebrow {
		margin-top: 26px;
		letter-spacing: 0.28em;
	}

	.mc-hero__lead {
		font-size: 14px;
		margin-bottom: 28px;
	}

	/* Dua tombol hero jadi bertumpuk penuh, bukan berdampingan sempit. */
	.mc-hero__cta .mc-btn {
		width: 100%;
	}

	.mc-hero__words {
		gap: 8px;
		margin-top: 30px;
	}

	.mc-hero__word {
		letter-spacing: 0.22em;
	}

	.mc-steps {
		margin-top: -30px;
		padding-bottom: 50px;
	}
}


/* =============================================================================
   20. HALAMAN APLIKASI  ("/mulai")
   Dipakai frontend/app.html + app.js. Ditambahkan 26 Agt 2026.

   Semua nilai di sini diambil dari prototipe Diah, sama seperti bagian lain.
   Yang berbeda cuma satu dan itu disengaja: prototipe menulis gaya inline di
   JSX, sedangkan di sini semuanya jadi class supaya HTML yang ditempel ke
   Elementor tetap bisa dibaca manusia.
   ============================================================================= */

.mc-view {
	padding-top: 34px;
}


/* ---- 20.1 Kartu pilih layanan ------------------------------------------- */

.mc-svc {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 30px;
}

.mc-svc__free {
	display: inline-flex;
	margin-top: 16px;
}

.mc-svc__note {
	max-width: 520px;
	margin: 8px auto 0;
}

.mc-svc__card {
	display: flex;
	gap: 18px;
	align-items: center;
	width: 100%;
	text-align: left;
	background: var(--mc-white);
	border: 1.5px solid var(--mc-cream);
	border-radius: 16px;
	padding: 20px 24px;
	cursor: pointer;
	font-family: var(--mc-font-body);
	box-shadow: var(--mc-shadow-soft);
	transition: transform .15s ease, border-color .15s ease;
}

.mc-svc__card:hover:not(:disabled) {
	transform: translateY(-2px);
	border-color: var(--mc-gold);
}

.mc-svc__card:focus-visible {
	outline: none;
	box-shadow: var(--mc-focus-ring);
}

/* Flash satu-satunya yang hidup, dan navy gelap membuatnya menonjol di antara
   kartu krem. Sama seperti prototipe (JSX baris 2133). */
.mc-svc__card--flash {
	background: linear-gradient(140deg, var(--mc-navy-dark), var(--mc-navy));
	border-color: var(--mc-navy);
}

.mc-svc__card--flash .mc-svc__title { color: var(--mc-gold); }
.mc-svc__card--flash .mc-svc__desc  { color: var(--mc-cream-light); }
.mc-svc__card--flash .mc-svc__arrow { color: var(--mc-gold); }

/* Layanan yang belum siap sengaja tetap TERBACA, bukan diburamkan sampai tidak
   jelas. Pengunjung perlu tahu arah platform ini; yang harus jelas cuma bahwa
   tombolnya belum bisa ditekan. */
.mc-svc__card:disabled {
	cursor: not-allowed;
	background: var(--mc-cream-light);
	box-shadow: none;
}

.mc-svc__card:disabled .mc-svc__title,
.mc-svc__card:disabled .mc-svc__desc {
	opacity: .72;
}

.mc-svc__icon {
	font-size: 34px;
	flex-shrink: 0;
	line-height: 1;
}

.mc-svc__body {
	flex: 1;
	min-width: 0;
}

.mc-svc__title {
	display: block;
	font-family: var(--mc-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--mc-navy-dark);
}

.mc-svc__desc {
	display: block;
	font-size: 13px;
	line-height: 1.65;
	color: var(--mc-ink);
	margin-top: 4px;
}

.mc-svc__arrow {
	font-size: 20px;
	color: var(--mc-navy);
	flex-shrink: 0;
}

.mc-svc__soon {
	flex-shrink: 0;
	padding: 5px 14px;
	font-size: 11px;
	background: var(--mc-cream);
	border: 1px solid var(--mc-muted-soft);
	color: var(--mc-navy);
}


/* ---- 20.2 Form ----------------------------------------------------------- */

.mc-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 22px;
}

.mc-form__step2 {
	margin-top: 34px;
}

.mc-warnbox {
	background: linear-gradient(140deg, var(--mc-navy-dark), var(--mc-navy));
	border-radius: var(--mc-radius-panel);
	padding: 18px 22px;
}

.mc-warnbox__title {
	color: var(--mc-gold);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	margin: 0 0 8px;
}

.mc-warnbox__body {
	color: var(--mc-cream-light);
	font-size: 13px;
	line-height: 1.9;
	margin: 0;
}

.mc-warnbox__body b { color: var(--mc-gold); }

.mc-warnbox__voice {
	display: block;
	margin-top: 6px;
}

/* Petunjuk voice disembunyikan kalau browsernya memang tidak mendukung.
   Menyuruh orang menekan tombol mikrofon yang tidak ada bukan sekadar tidak
   berguna — ia membuat pengguna mengira ada yang rusak.

   :has() belum ada di browser lama. Kalau tidak didukung, aturan ini diabaikan
   dan petunjuknya tetap tampil — sama persis dengan keadaan sebelum baris ini
   ditulis, jadi tidak ada yang rusak karenanya. */
.mc-app:not(:has(.mc-voice--ready)) .mc-warnbox__voice {
	display: none;
}


/* ---- 20.3 State menganalisis --------------------------------------------- */

.mc-analyzing__title {
	margin-top: 18px;
}

.mc-analyzing__note {
	max-width: 420px;
	margin: 14px auto 0;
}

/* Gaya mic saat merekam TIDAK didefinisikan lagi di sini.
   Bagian 11 sudah punya `.mc-voice.is-recording .mc-voice__mic`, dan JS
   memasang class itu pada pembungkus `.mc-voice` — bukan pada tombolnya.
   Satu class di satu tempat; dua aturan yang menunggu class berbeda adalah
   cara paling mudah membuat salah satunya diam-diam tidak pernah menyala. */


/* ---- 20.4 Hasil ---------------------------------------------------------- */

.mc-res__box,
.mc-res__tahap {
	margin-bottom: 16px;
}

.mc-res__box {
	padding: 24px 26px;
}

.mc-res__label {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
	color: var(--mc-navy);
	text-transform: uppercase;
	margin: 0 0 10px;
}

.mc-res__tahap {
	border-left: 5px solid var(--mc-gold);
	padding: 20px 26px;
}

.mc-res__tahap-name {
	font-family: var(--mc-font-display);
	font-size: 21px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 6px 0 4px;
}


/* Akar masalah */

.mc-root {
	background: var(--mc-cream-light);
	border: 2px solid var(--mc-cream);
	border-radius: var(--mc-radius-panel);
	padding: 16px 18px;
}

.mc-root--utama {
	background: var(--mc-gold-tint);
	border-color: var(--mc-gold);
}

.mc-root__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mc-root__no {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: var(--mc-radius-pill);
	background: var(--mc-navy);
	color: var(--mc-cream-light);
	font-weight: 800;
	font-size: 12px;
}

.mc-root--utama .mc-root__no {
	background: var(--mc-gold);
	color: var(--mc-navy-dark);
}

.mc-root__title {
	font-family: var(--mc-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--mc-navy-dark);
}

.mc-root__desc {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--mc-ink);
	margin: 8px 0 0;
}


/* Kartu rekomendasi */

.mc-rek {
	position: relative;
	border: 2px solid var(--mc-cream);
	background: var(--mc-cream-light);
	border-radius: var(--mc-radius-panel);
	padding: 18px 20px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}

.mc-rek--utama {
	border-color: var(--mc-navy);
	background: var(--mc-info-bg);
	margin-top: 14px;
}

.mc-rek.is-active {
	border-color: var(--mc-gold);
	background: var(--mc-gold-tint);
}

.mc-rek.is-disabled {
	cursor: not-allowed;
	opacity: .55;
}

.mc-rek:focus-visible {
	outline: none;
	box-shadow: var(--mc-focus-ring);
}

.mc-rek__pita {
	position: absolute;
	top: -11px;
	left: 16px;
	background: var(--mc-navy-dark);
	color: var(--mc-gold);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 4px 12px;
	border-radius: var(--mc-radius-pill);
}

.mc-rek__head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.mc-rek__no {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--mc-navy-dark);
	color: var(--mc-gold);
	font-family: var(--mc-font-display);
	font-weight: 800;
	font-size: 16px;
}

.mc-rek__title {
	display: block;
	font-family: var(--mc-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	letter-spacing: 0.04em;
}

.mc-rek__opsi {
	display: block;
	font-size: 12.5px;
	color: var(--mc-navy);
	margin-top: 2px;
}

.mc-rek__prio {
	margin-left: auto;
	flex-shrink: 0;
	padding: 4px 12px;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	background: var(--mc-white);
	border: 1px solid var(--mc-cream);
	color: var(--mc-muted);
}

.mc-rek__prio--tinggi {
	background: var(--mc-gold-tint);
	border-color: var(--mc-gold);
	color: var(--mc-navy-dark);
}

.mc-rek__alasan {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--mc-ink);
	margin: 10px 0 0;
}


/* Estimasi biaya */

.mc-res__biaya {
	border-left: 5px solid var(--mc-gold);
}

.mc-res__rentang {
	font-family: var(--mc-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 0;
}

.mc-res__rincian {
	margin: 12px 0 0;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--mc-ink);
}

.mc-res__catatan {
	font-size: 12.5px;
	color: var(--mc-muted);
	font-style: italic;
	margin: 12px 0 0;
}


/* ---- 20.5 Responsif ------------------------------------------------------ */

@media (max-width: 560px) {
	.mc-svc__card {
		padding: 16px 18px;
		gap: 14px;
	}

	.mc-svc__icon  { font-size: 28px; }
	.mc-svc__title { font-size: 17px; }
	.mc-svc__desc  { font-size: 12.5px; }

	.mc-res__box   { padding: 20px 18px; }
	.mc-res__tahap { padding: 18px 18px; }

	/* Pita "sangat direkomendasikan" tidak muat satu baris di layar sempit.
	   Dijadikan blok di atas kartu, bukan dikecilkan sampai tidak terbaca. */
	.mc-rek__pita {
		position: static;
		display: inline-block;
		margin-bottom: 10px;
	}

	.mc-rek--utama { margin-top: 0; }
	.mc-rek__head  { flex-wrap: wrap; }
	.mc-rek__prio  { margin-left: 42px; }
}


/* ---- 20.6 Jaring pengaman atribut hidden ---------------------------------

   Atribut `hidden` bawaan HTML diatur browser lewat `[hidden] { display: none }`
   di stylesheet UA. Aturan UA SELALU kalah dari stylesheet kita, berapa pun
   specificity-nya — jadi setiap elemen yang kita beri `display` eksplisit
   diam-diam kebal terhadap `hidden`.

   Terjadi nyata di `.mc-field__error` (display: block): pesan galat tidak
   pernah benar-benar hilang, hanya jadi kotak kosong yang tetap memakan
   margin. Gejalanya halus dan mudah dikira masalah jarak.

   Satu baris ini menutupnya untuk seluruh aplikasi, bukan cuma untuk kasus
   yang kebetulan ketahuan.
   ------------------------------------------------------------------------- */

.mc-app [hidden] {
	display: none !important;
}


/* ---- 20.7 Estimasi biaya & CTA — koreksi audit 26 Agt --------------------

   Blok estimasi sebelumnya kartu putih dengan garis emas. Di desain Diah ia
   navy gradasi dan jadi blok paling menonjol di seluruh halaman hasil
   (JSX baris 2733). Perbedaannya bukan selera: angka adalah hal terakhir yang
   dicari orang sebelum memutuskan, dan desainnya sengaja membuatnya mudah
   ditemukan tanpa harus dicari.
   ------------------------------------------------------------------------- */

.mc-res__biaya {
	background: linear-gradient(150deg, var(--mc-navy-dark), var(--mc-navy));
	border: none;
	border-radius: var(--mc-radius-card);
	padding: 24px 26px;
	margin-bottom: 26px;
	box-shadow: var(--mc-shadow-card);
}

.mc-res__label--emas {
	color: var(--mc-gold);
}

.mc-res__biaya .mc-res__rentang {
	font-family: var(--mc-font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--mc-cream-light);
	margin: 0 0 10px;
}

.mc-res__biaya .mc-res__rincian {
	margin: 0;
	padding-left: 18px;
	color: var(--mc-cream);
	font-size: 13.5px;
	line-height: 1.9;
}

.mc-res__biaya .mc-res__catatan {
	color: var(--mc-gold-soft);
	font-size: 12.5px;
	font-style: italic;
	margin-top: 12px;
}


/* CTA dua pilihan di akhir halaman hasil */

.mc-cta {
	padding: 34px 26px;
	margin-bottom: 16px;
}

.mc-cta__title {
	font-family: var(--mc-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mc-navy-dark);
	margin: 0 0 8px;
}

.mc-cta__lead {
	font-size: 13.5px;
	color: var(--mc-navy);
	margin: 0 0 8px;
}

.mc-cta__note {
	margin-bottom: 20px;
}

.mc-cta__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Di layar sempit dua tombol berdampingan jadi terlalu sempit untuk dibaca,
   apalagi ditekan. Ditumpuk, dan yang utama tetap di atas. */
@media (max-width: 480px) {
	.mc-cta__actions {
		flex-direction: column;
	}

	.mc-cta__actions .mc-btn {
		width: 100%;
	}

	.mc-cta__title {
		font-size: 20px;
	}

	.mc-res__biaya {
		padding: 20px 18px;
	}

	.mc-res__biaya .mc-res__rentang {
		font-size: 21px;
	}
}


/* =============================================================================
   21. PANEL TIM  ("/panel")
   Dipakai frontend/panel.html + panel.js. Ditambahkan 26 Agt 2026.

   Halaman ini TIDAK dilihat pengunjung — hanya tim. Tapi tetap memakai token
   yang sama, karena Diah akan membukanya tiap hari dan halaman yang terasa
   seperti bagian lain dari mereknya sendiri lebih enak dipakai daripada
   dasbor generik.
   ============================================================================= */

.mc-panel-app {
	min-height: 100vh;
}


/* ---- 21.1 Layar tengah: memuat, login, ditolak ---------------------------- */

.mc-pn__center {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 32px 20px;
	background: linear-gradient(160deg, var(--mc-navy-dark) 0%, var(--mc-navy) 100%);
}

.mc-pn__loginbox {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	background: var(--mc-cream-light);
	border: 1px solid var(--mc-cream);
	border-radius: var(--mc-radius-card);
	box-shadow: var(--mc-shadow-modal);
	padding: 30px 28px;
	text-align: center;
}

/*
 * Logo dipatok 96px dan `!important`, dan keduanya disengaja.
 *
 * Berkas aslinya 520 x 520, dan atribut width/height di HTML memang diisi
 * ukuran asli itu supaya browser bisa menghitung rasio sebelum gambarnya
 * selesai dimuat. Konsekuensinya: kalau aturan ini tidak sampai — misalnya
 * global.css belum diunggah ulang — logonya tampil 520px dan memenuhi layar.
 *
 * Terjadi nyata 26 Agt. `!important` di sini bukan menambal spesifisitas
 * yang kalah, tapi menahan tema atau plugin yang menyasar `img` secara luas.
 */
.mc-pn__logo {
	width: 96px !important;
	height: auto !important;
	max-width: 96px !important;
	border-radius: 50%;
	box-shadow: var(--mc-shadow-logo);
	margin: 0 auto 12px;
	display: block;
}

.mc-pn__title {
	font-family: var(--mc-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 0 0 6px;
}

.mc-pn__sub {
	font-size: 13px;
	color: var(--mc-navy);
	margin: 0 0 22px;
}

.mc-pn__loginbox .mc-field {
	text-align: left;
}

/* Kotak password + tombol lihat */
.mc-pn__pass {
	position: relative;
	display: block;
}

.mc-pn__pass .mc-input {
	padding-right: 96px;
}

.mc-pn__lihat {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: var(--mc-navy);
	font-family: var(--mc-font-body);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: var(--mc-radius-pill);
}

.mc-pn__lihat:hover {
	background: var(--mc-cream);
}

.mc-pn__ingat {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--mc-navy);
	margin: 4px 0 18px;
	text-align: left;
	cursor: pointer;
}

.mc-pn__lupa {
	font-size: 12px;
	color: var(--mc-muted);
	margin: 18px 0 0;
}

.mc-pn__lupa a {
	color: var(--mc-navy);
	text-decoration: underline;
}


/* ---- 21.2 Header panel --------------------------------------------------- */

.mc-pn__siapa {
	font-size: 12.5px;
	color: var(--mc-cream);
	margin-right: 4px;
}

.mc-header__actions .mc-navlink {
	border: none;
	background: transparent;
	font-family: var(--mc-font-body);
	cursor: pointer;
}


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

.mc-pn__stat {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 28px 0 20px;
}

.mc-pn__kartu {
	display: block;
	text-align: left;
	background: var(--mc-white);
	border: 2px solid var(--mc-cream);
	border-radius: var(--mc-radius-panel);
	padding: 16px 18px;
	cursor: pointer;
	font-family: var(--mc-font-body);
	transition: border-color .15s ease, background .15s ease;
}

.mc-pn__kartu:hover { border-color: var(--mc-gold); }

.mc-pn__kartu.is-active {
	border-color: var(--mc-gold);
	background: var(--mc-gold-tint);
}

.mc-pn__angka {
	display: block;
	font-family: var(--mc-font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	line-height: 1.2;
}

.mc-pn__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--mc-navy);
	text-transform: uppercase;
	margin-top: 2px;
}


/* ---- 21.4 Pencarian ------------------------------------------------------ */

.mc-pn__alat {
	margin-bottom: 18px;
}

.mc-pn__cari {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mc-pn__cari .mc-input {
	flex: 1;
	min-width: 220px;
	margin: 0;
}


/* ---- 21.5 Daftar lead ---------------------------------------------------- */

.mc-pn__daftar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.mc-pn__kosong {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 20px;
	color: var(--mc-navy);
	font-size: 13.5px;
	background: var(--mc-white);
	border: 1px dashed var(--mc-cream);
	border-radius: var(--mc-radius-panel);
}

.mc-pn__lead {
	background: var(--mc-white);
	border: 1.5px solid var(--mc-cream);
	border-radius: var(--mc-radius-panel);
	padding: 18px 20px;
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease;
}

.mc-pn__lead:hover {
	transform: translateY(-2px);
	border-color: var(--mc-gold);
}

.mc-pn__lead:focus-visible {
	outline: none;
	box-shadow: var(--mc-focus-ring);
}

.mc-pn__leadatas {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 4px;
}

.mc-pn__leadnama {
	font-family: var(--mc-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 0;
}

.mc-pn__badge {
	flex-shrink: 0;
	font-size: 10.5px;
	background: var(--mc-cream-light);
	border: 1px solid var(--mc-cream);
	color: var(--mc-navy);
	padding: 3px 9px;
	border-radius: var(--mc-radius-pill);
	white-space: nowrap;
}

.mc-pn__leadbisnis {
	font-size: 13px;
	color: var(--mc-ink);
	margin: 0 0 6px;
}

.mc-pn__leadmeta {
	font-size: 11.5px;
	color: var(--mc-muted);
	margin: 0;
}

.mc-pn__leadtahap {
	font-size: 12px;
	color: var(--mc-navy);
	background: var(--mc-gold-tint);
	border-left: 3px solid var(--mc-gold);
	padding: 6px 10px;
	border-radius: 0 8px 8px 0;
	margin: 10px 0 0;
}

.mc-pn__hal {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 22px;
}


/* ---- 21.6 Detail lead (panel geser) -------------------------------------- */

.mc-pn__tirai {
	position: fixed;
	inset: 0;
	background: rgba(13, 27, 42, .55);
	z-index: 40;
}

.mc-pn__detail {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(560px, 100%);
	background: var(--mc-cream-light);
	border-left: 1px solid var(--mc-cream);
	box-shadow: var(--mc-shadow-modal);
	z-index: 41;
	display: flex;
	flex-direction: column;
}

.mc-pn__detailhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	background: linear-gradient(160deg, var(--mc-navy-dark), var(--mc-navy));
	flex-shrink: 0;
}

.mc-pn__detailhead .mc-card-title {
	color: var(--mc-cream-light);
	font-size: 18px;
}

.mc-pn__tutup {
	border: none;
	background: transparent;
	color: var(--mc-gold);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
	flex-shrink: 0;
}

.mc-pn__detailisi {
	overflow-y: auto;
	padding: 20px 22px 40px;
}

.mc-pn__blok {
	background: var(--mc-white);
	border: 1px solid var(--mc-cream);
	border-radius: var(--mc-radius-panel);
	padding: 16px 18px;
	margin-bottom: 14px;
}

.mc-pn__bloktitle {
	font-family: var(--mc-font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 0 0 10px;
}

.mc-pn__baris {
	display: flex;
	gap: 10px;
	font-size: 12.5px;
	padding: 4px 0;
	border-bottom: 1px solid var(--mc-cream-light);
}

.mc-pn__bariskey {
	flex-shrink: 0;
	width: 110px;
	color: var(--mc-navy);
	font-weight: 600;
	text-transform: capitalize;
}

.mc-pn__barisval {
	color: var(--mc-ink);
	word-break: break-word;
}

.mc-pn__subkey {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-navy);
	margin: 14px 0 4px;
}

.mc-pn__isi {
	font-size: 13px;
	line-height: 1.75;
	color: var(--mc-ink);
	margin: 0;
	white-space: pre-wrap;
}

.mc-pn__list {
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--mc-ink);
	margin: 4px 0 0;
	padding-left: 20px;
}

.mc-pn__est {
	background: var(--mc-gold-tint);
	border-left: 4px solid var(--mc-gold);
	border-radius: 0 10px 10px 0;
	padding: 12px 16px;
	margin-top: 16px;
}

.mc-pn__rentang {
	font-family: var(--mc-font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 0;
}


/* ---- 21.7 Tab akun ------------------------------------------------------- */

.mc-pn__akun {
	max-width: 520px;
	margin-bottom: 18px;
}

.mc-pn__akunnote {
	margin-bottom: 18px;
}


/* ---- 21.8 Responsif ------------------------------------------------------ */

@media (max-width: 600px) {
	.mc-pn__loginbox {
		padding: 24px 18px;
	}

	.mc-pn__logo {
		width: 80px !important;
		max-width: 80px !important;
	}

	.mc-pn__title { font-size: 20px; }

	.mc-pn__stat {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 8px;
	}

	.mc-pn__kartu { padding: 12px 14px; }
	.mc-pn__angka { font-size: 22px; }
	.mc-pn__label { font-size: 10px; }

	/* Detail jadi lembar penuh — panel geser selebar 560px tidak masuk akal
	   di layar 360px, dan menyisakan celah sempit yang tidak berguna. */
	.mc-pn__detail {
		width: 100%;
		border-left: none;
	}

	.mc-pn__baris {
		flex-direction: column;
		gap: 2px;
	}

	.mc-pn__bariskey { width: auto; }
}


/* ---- 20.8 Voice: bilah rekam, teks sementara, pesan galat -----------------

   Ditambahkan 26 Agt setelah tes nyata. Sebelumnya satu-satunya tanda bahwa
   perekaman berjalan adalah angka waktu kecil di pojok — dan galat ditelan
   diam-diam, jadi dari sisi pengguna "tidak terjadi apa-apa".

   Tiga hal yang ditambahkan, semuanya soal memberi tanda:
     bilah rekam    titik berdenyut + waktu + ajakan berhenti
     teks sementara kata-kata muncul sambil diucapkan
     pesan galat    kalimat yang bisa ditindaklanjuti, bukan diam
   ------------------------------------------------------------------------- */

.mc-voice__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 8px 14px;
	background: var(--mc-danger-bg);
	border: 1px solid #E4B9B9;
	border-radius: var(--mc-radius-pill);
	font-size: 12px;
	color: var(--mc-danger-deep);
}

.mc-voice__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mc-danger-mid);
	flex-shrink: 0;
	animation: mc-pulse 1.2s ease-in-out infinite;
}

.mc-voice__timer {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	flex-shrink: 0;
}

.mc-voice__stop {
	color: var(--mc-danger-deep);
	opacity: .85;
}

/* Teks sementara sengaja dibedakan tegas dari isi textarea: miring, warna
   lebih pudar, berlatar sendiri. Kalau ia terlihat sama seperti teks yang
   sudah tersimpan, orang akan mengira ucapannya sudah masuk padahal mesin
   masih bisa berubah pikiran. */
.mc-voice__sementara {
	margin: 8px 0 0;
	padding: 8px 14px;
	background: var(--mc-cream-light);
	border-left: 3px solid var(--mc-muted-soft);
	border-radius: 0 8px 8px 0;
	font-size: 12.5px;
	font-style: italic;
	line-height: 1.6;
	color: var(--mc-muted);
}

.mc-voice__pesan {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--mc-danger);
}

@media (max-width: 480px) {
	/* Ajakan "tekan mikrofon lagi" tidak muat berdampingan dengan waktu di
	   layar sempit. Yang dibuang ajakannya, bukan waktunya — titik merah
	   berdenyut sudah cukup menyatakan bahwa ini sedang berjalan. */
	.mc-voice__stop {
		display: none;
	}
}


/* ---- 20.9 Ikon kisi menuju panel tim -------------------------------------

   Menggantikan tombol bertuliskan "ADMIN" di header, 26 Agt.

   Alasannya bukan estetika. Tautan bertuliskan ADMIN mengundang orang
   mencoba membukanya — dan sejak /panel punya penahan brute-force, tiap
   percobaan gagal mendekatkan sebuah IP ke kuncian 15 menit. Ikon kisi
   tidak menarik perhatian siapa pun yang tidak sedang mencarinya, sementara
   yang mencarinya tetap menemukannya di tempat yang sama.

   Ini BUKAN keamanan lewat penyamaran: alamat /panel toh mudah ditebak, dan
   yang benar-benar menahan tetap autentikasi WordPress. Yang dikurangi cuma
   ajakannya.
   ------------------------------------------------------------------------- */

.mc-header__panel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(231, 223, 201, 0.22);
	background: transparent;
	flex-shrink: 0;
	transition: border-color .15s ease, background .15s ease;
}

/* Warna ikon ditulis DUA KALI: sebagai atribut `fill` di HTML dan di sini.
   Yang di HTML menahan kasus CSS belum sampai — tanpa fill sama sekali, SVG
   jatuh ke hitam bawaan dan ikonnya jadi kotak gelap di header navy.
   Yang di sini yang mengatur keadaan hover dan fokus. */
.mc-header__panel svg {
	display: block;
	fill: var(--mc-cream-light);
	opacity: .78;
	transition: fill .15s ease, opacity .15s ease;
}

.mc-header__panel:hover {
	border-color: var(--mc-gold);
	background: rgba(212, 175, 55, 0.10);
}

.mc-header__panel:hover svg {
	fill: var(--mc-gold);
	opacity: 1;
}

.mc-header__panel:focus-visible {
	outline: none;
	border-color: var(--mc-gold);
	box-shadow: var(--mc-focus-ring);
}


/* ---- 20.10 Kalender booking & layar konfirmasi ---------------------------

   Master Knowledge v6.0, Modul 8. Tata letaknya mengikuti prototipe:
   satu kolom sempit, kolom tanggal bawaan browser, lalu slot jam sebagai
   tombol. Kolom tanggal bawaan dipakai apa adanya, bukan diganti kalender
   buatan sendiri — di HP ia memanggil pemilih tanggal asli sistem, yang
   selalu lebih enak dipakai daripada apa pun yang bisa kita tiru.
   ------------------------------------------------------------------------- */

.mc-bk {
	max-width: 620px;
	margin: 0 auto;
}

.mc-bk__info {
	display: block;
	margin-bottom: 22px;
}

.mc-bk__hari {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mc-navy);
	margin: 18px 0 10px;
}

.mc-bk__slot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.mc-bk__jam {
	padding: 10px 18px;
	border-radius: var(--mc-radius-input);
	border: 2px solid var(--mc-cream);
	background: var(--mc-white);
	color: var(--mc-navy-dark);
	font-family: var(--mc-font-body);
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.mc-bk__jam:hover {
	border-color: var(--mc-gold-soft);
}

.mc-bk__jam.is-active {
	border-color: var(--mc-gold);
	background: var(--mc-gold-tint);
}

.mc-bk__jam:focus-visible {
	outline: none;
	box-shadow: var(--mc-focus-ring);
}

/* Kolom tanggal di Safari iOS mengabaikan tinggi bawaan dan menyusut jadi
   lebih pendek dari kolom lain. Dua baris ini menyamakannya tanpa mengubah
   perilaku pemilih tanggalnya. */
.mc-bk input[type="date"] {
	min-height: 46px;
	-webkit-appearance: none;
	appearance: none;
}


/* ---- Layar jadwal terkonfirmasi ---- */

.mc-done {
	max-width: 560px;
	margin: 40px auto 0;
	padding: 44px 36px;
}

.mc-done__ikon {
	font-size: 46px;
	line-height: 1;
	margin: 0;
}

.mc-done__judul {
	font-family: var(--mc-font-display);
	font-size: 27px;
	font-weight: 700;
	color: var(--mc-navy-dark);
	margin: 12px 0 10px;
}

.mc-done__jadwal {
	font-family: var(--mc-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--mc-navy);
	background: var(--mc-gold-tint);
	border: 1px solid var(--mc-gold);
	border-radius: var(--mc-radius-panel);
	padding: 12px 18px;
	margin: 0 0 18px;
}

.mc-done__catat {
	display: block;
	margin: 18px 0 22px;
	text-align: left;
}

/* Dua tombol kalender. Sejajar di layar lebar, menumpuk di ponsel —
   berdampingan di 360px membuat keduanya terlalu sempit untuk jempol. */
.mc-done__aksi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 6px;
}

.mc-done__aksi .mc-btn {
	flex: 1 1 210px;
	max-width: 260px;
}

@media (max-width: 480px) {
	.mc-done {
		padding: 32px 22px;
	}

	.mc-done__judul  { font-size: 22px; }
	.mc-done__jadwal { font-size: 16px; }

	.mc-done__aksi .mc-btn {
		flex: 1 1 100%;
		max-width: none;
	}

	/* Tujuh slot berdampingan jadi terlalu sempit di layar 360px.
	   Dua kolom rata memberi area sentuh yang layak tanpa menyembunyikan
	   satu pun pilihan. */
	.mc-bk__slot {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.mc-bk__jam {
		width: 100%;
		text-align: center;
	}
}


/* ---- 21.9 Jadwal di kartu lead & kartu saringan status -------------------

   Ditambahkan 26 Agt setelah kalender booking jadi.

   Panel ini dipakai untuk menindaklanjuti lead secara manual. Pertanyaan
   pertama saat membukanya selalu sama: siapa yang harus dihubungi, dan
   sesinya kapan. Keduanya harus terjawab sekali pandang, bukan setelah
   membuka sepuluh detail satu per satu.
   ------------------------------------------------------------------------- */

.mc-pn__leadjadwal {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mc-success-strong);
	background: var(--mc-success-bg);
	border: 1px solid var(--mc-success-border);
	border-radius: var(--mc-radius-pill);
	padding: 4px 12px;
	margin: 10px 0 0;
	align-self: flex-start;
	width: fit-content;
}

.mc-pn__jadwalikon {
	flex-shrink: 0;
}

/* Kartu "Perlu Dihubungi" — satu-satunya kartu yang menyaring STATUS, dan
   yang paling sering ditekan. Diberi garis emas supaya terbedakan dari
   deretan kartu layanan di sebelahnya. */
.mc-pn__kartu--aksi {
	border-color: var(--mc-gold-soft);
}

.mc-pn__kartu--aksi .mc-pn__angka {
	color: var(--mc-gold-deep);
}

/* Kartu tanpa saringan — Total Masuk dan Akun Unik. Dimatikan, karena
   tombol yang tidak melakukan apa-apa saat ditekan lebih membingungkan
   daripada tombol yang jelas tidak bisa ditekan. */
.mc-pn__kartu--diam {
	cursor: default;
	background: var(--mc-cream-light);
	border-style: dashed;
}

.mc-pn__kartu--diam:hover {
	border-color: var(--mc-cream);
}

.mc-pn__kartu:disabled .mc-pn__angka,
.mc-pn__kartu:disabled .mc-pn__label {
	opacity: .8;
}


/* =============================================================================
   CHIP BER-CHECKBOX  (form Partner & EO, 28 Agt)

   Prototipe memakai <div> yang di-klik dan menyimpan pilihannya di state
   React. Di sini isinya checkbox sungguhan yang disembunyikan, bukan div.

   Alasannya bukan kerapian: checkbox asli ikut terkirim bersama form, bisa
   dijangkau Tab, dibacakan pembaca layar sebagai "checkbox, tercentang", dan
   tetap berfungsi kalau JavaScript gagal dimuat. Div yang di-klik tidak punya
   satu pun dari itu, dan kehilangannya tidak terlihat sampai ada orang yang
   benar-benar membutuhkannya.
   ========================================================================== */

.mc-chip input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* Keadaan tercentang dipasang app.js sebagai class `is-active` — aturan
   .mc-chip.is-active di atas yang mewarnainya, jadi chip di sini tampil
   persis sama dengan chip di tempat lain. */

/* Fokus keyboard harus terlihat. Tanpa ini, checkbox yang disembunyikan
   membuat cincin fokus ikut hilang, dan orang yang menavigasi dengan Tab
   kehilangan jejak posisinya sama sekali. */
.mc-chip:focus-within {
	outline: none;
	box-shadow: var(--mc-focus-ring);
}

/* Lapisan pembesar area sentuh milik .mc-chip menutupi labelnya sendiri di
   sebagian browser, sehingga ketukan tidak sampai ke checkbox di dalamnya.
   Dikembalikan supaya klik menembus ke label. */
.mc-chip:has(input[type="checkbox"])::after {
	pointer-events: none;
}


/* =============================================================================
   KARTU SOROT — putih, garis emas di kiri  (28 Agt)

   Blok feedback di layar hasil lima layanan baru. Di prototipe bentuknya
   `{...card, borderLeft: 5px solid gold}` — kartu putih biasa yang diberi
   garis emas, bukan blok navy.

   Ada karena kesalahan nyata: blok-blok itu semula memakai .mc-res__biaya,
   yang latarnya gradasi navy. Judulnya terbaca (ia memang emas), tapi isinya
   .mc-text berwarna tinta gelap di atas navy — praktis tidak terlihat sama
   sekali. Yang rusak justru bagian yang paling ingin dibaca orang.

   Pelajarannya: .mc-res__biaya BUKAN "kartu yang ditonjolkan", melainkan
   "blok navy". Isinya harus memakai .mc-res__rentang / .mc-res__rincian /
   .mc-res__catatan, yang memang sudah diwarnai terang untuk latar itu.
   ========================================================================== */

.mc-res__sorot {
	border-left: 5px solid var(--mc-gold);
}


/* =============================================================================
   KOTAK BIAYA JASA — tile di ATAS latar navy  (28 Agt)

   Dipakai grid "biaya jasa matching per mitra" di hasil Cari Partner Jualan,
   dan dibuat dari app.js.

   Tidak memakai .mc-panel: panel itu berlatar putih, dan menaruhnya di dalam
   .mc-res__biaya membuat aturan turunan `.mc-res__biaya .mc-res__rentang`
   mewarnai angkanya cream-light — teks terang di atas kotak putih. Bug yang
   sama persis dengan yang di atas, cuma terbalik arahnya.

   Jadi tile-nya transparan dengan garis tipis, persis prototipe (JSX 3014).
   ========================================================================== */

.mc-fee {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(231, 223, 201, 0.25);
	border-radius: var(--mc-radius-panel);
	padding: 14px 16px;
}

/* Tipe yang direkomendasikan AI. Ditandai garis emas DAN tanda bintang di
   teksnya — warna saja tidak cukup untuk orang yang tidak membedakan warna. */
.mc-fee--pilih {
	background: rgba(212, 175, 55, 0.16);
	border-color: var(--mc-gold);
}

.mc-fee__nama {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mc-gold);
	margin: 0 0 6px;
}

.mc-fee__harga {
	font-family: var(--mc-font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--mc-cream-light);
	margin: 0;
}

.mc-fee__catatan {
	display: block;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--mc-cream);
	margin-top: 6px;
}