/* Cloven AI v9 — tema terang/gelap + kontrol bahasa/tema + sentuhan akhir UI.
   Dimuat PALING AKHIR di setiap halaman. Atribut data-theme di <html> dipasang oleh theme-init.js sebelum render.
   Aturan gelap yang dibuat otomatis berada di akhir tiap file CSS (tools/gen_dark_css.py); file ini berisi
   token desain bersama dan penyesuaian manual yang tidak bisa ditebak oleh generator. */

/* ------------------------------------------------------------------ token bersama */
:root {
  --rx-bg: #f5f6f8; --rx-surface: #ffffff; --rx-surface-2: #f8f9fb; --rx-raised: #ffffff;
  --rx-line: #e5e7eb; --rx-line-2: #f0f1f4; --rx-text: #1f2328; --rx-muted: #667085; --rx-faint: #8a94a6;
  --rx-primary: #2f6bff; --rx-primary-50: #eef3ff; --rx-focus: rgba(47, 107, 255, .35);
  --rx-overlay: rgba(15, 23, 42, .45); --rx-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
  --rx-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --rx-bg: #0f1217; --rx-surface: #171b22; --rx-surface-2: #1b2028; --rx-raised: #1e232c;
  --rx-line: #2a303b; --rx-line-2: #232934; --rx-text: #e6e9ef; --rx-muted: #a3acbb; --rx-faint: #8a93a3;
  --rx-primary: #6b97ff; --rx-primary-50: #1a2440; --rx-focus: rgba(107, 151, 255, .45);
  --rx-overlay: rgba(0, 0, 0, .62); --rx-shadow-pop: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);

  /* style.css / ui-polish.css / workspace.css (dashboard) */
  --bg: var(--rx-bg); --surface: var(--rx-surface); --line: var(--rx-line); --line-2: var(--rx-line-2);
  --text: var(--rx-text); --muted: var(--rx-muted); --faint: var(--rx-faint);
  --primary: #5b8cff; --primary-600: #7aa2ff; --primary-50: #1a2440; --primary-100: #22305a;
  --green: #3ccf7a; --green-600: #4fd88a; --green-50: #12291d; --orange: #fb8a3c; --orange-50: #2c1d10;
  --red: #ff6b70; --red-50: #33191b; --yellow: #f2b23a; --yellow-50: #2c2210; --violet: #a585ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: var(--rx-shadow-pop);
  /* mkt.css */
  --mk-blue: #5b8cff; --mk-blue-600: #7aa2ff; --mk-blue-50: #1a2440; --mk-line: var(--rx-line); --mk-line-2: var(--rx-line-2);
  --mk-ink: #eef1f6; --mk-text: #d3d9e3; --mk-muted: var(--rx-muted); --mk-faint: var(--rx-faint); --mk-navy: #0b0e13;
}
/* landing.css + auth.css memakai nama token yang sama */
:root[data-theme="dark"] {
  --brand: #5b8cff; --brand-600: #7aa2ff; --brand-700: #a9c1ff; --brand-50: #1a2440; --brand-100: #22305a;
  --ink: #f1f4f9; --soft: #141820; --mint: #34d399; --hl: rgba(255, 214, 102, .28);
}
:root[data-theme="dark"] body.cp {
  --cp-ink: #eef1f6; --cp-ink-2: #c9d0db; --cp-muted: var(--rx-muted); --cp-faint: var(--rx-faint);
  --cp-line: var(--rx-line); --cp-line-2: var(--rx-line-2); --cp-bg: var(--rx-bg);
  --cp-accent: #8b85ff; --cp-accent-50: #23214a; --cp-green: #3ccf7a; --cp-amber: #f5a524; --cp-red: #ff6b6b;
}

/* Hindari transisi berantai saat tema berganti; hormati preferensi gerak minimal. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ kontrol bahasa + tema */
.ui-prefs { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--rx-muted); }
.ui-prefs .language-switch { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 3px 3px 3px 8px; margin: 0;
  border: 1px solid var(--rx-line); border-radius: 999px; background: var(--rx-surface); color: inherit; min-height: 0; box-sizing: border-box; }
.ui-prefs .language-switch:hover { background: var(--rx-surface); }
.ui-prefs .language-switch:focus-within { outline: none; }
.ui-prefs .language-switch > svg { margin-right: 3px; opacity: .8; }
.ui-prefs .lang-opt { appearance: none; border: 0; margin: 0; height: 24px; min-width: 30px; padding: 0 8px; border-radius: 999px; background: transparent;
  color: inherit; font: inherit; letter-spacing: .02em; cursor: pointer; transition: background-color .15s var(--rx-ease), color .15s var(--rx-ease); }
.ui-prefs .lang-opt:hover { color: var(--rx-text); }
.ui-prefs .lang-opt[aria-pressed="true"] { background: var(--rx-text); color: var(--rx-surface); }
.ui-prefs .lang-opt:focus-visible, .ui-prefs .theme-toggle:focus-visible { outline: 2px solid var(--rx-primary); outline-offset: 2px; }
.ui-prefs .theme-toggle { appearance: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; margin: 0; border-radius: 999px;
  border: 1px solid var(--rx-line); background: var(--rx-surface); color: inherit; cursor: pointer; transition: background-color .15s var(--rx-ease), color .15s var(--rx-ease); }
.ui-prefs .theme-toggle:hover, .ui-prefs .language-switch:hover { border-color: color-mix(in srgb, var(--rx-line) 50%, var(--rx-muted)); color: var(--rx-text); }
.ui-prefs .theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .ui-prefs .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .ui-prefs .theme-toggle .ic-moon { display: none; }
/* penempatan */
.nav-actions > .ui-prefs { margin-right: 4px; }
.header-inner > .ui-prefs { margin-left: auto; }
.header-inner > .ui-prefs + .menu-button { margin-left: 0; }
.topbar > .ui-prefs { margin-left: auto; margin-right: 10px; }
.topbar > .ui-prefs ~ .tb-right { margin-left: 0; }
.auth-top > .ui-prefs { margin-left: 4px; }
.terms-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.terms-top > .terms-nav { display: inline-flex; align-items: center; gap: 14px; margin-right: auto; flex-wrap: wrap; }
.terms-top .back { color: var(--muted); font-size: 14px; font-weight: 550; padding: 6px 10px; border-radius: 9px; }
.terms-top .back:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.wc-head > .ui-prefs { margin-left: 4px; }
.language-page-bar { display: flex; justify-content: flex-end; padding: 12px 20px; }
/* di atas bilah gelap/berwarna (topbar Control Panel, header chat) */
body.cp .topbar > .ui-prefs, .wc-head > .ui-prefs { color: rgba(255, 255, 255, .82); }
body.cp .topbar > .ui-prefs .language-switch, body.cp .topbar > .ui-prefs .theme-toggle,
.wc-head > .ui-prefs .language-switch, .wc-head > .ui-prefs .theme-toggle { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
body.cp .topbar > .ui-prefs .lang-opt[aria-pressed="true"], .wc-head > .ui-prefs .lang-opt[aria-pressed="true"] { background: #fff; color: #172036; }
body.cp .topbar > .ui-prefs .lang-opt:hover, .wc-head > .ui-prefs .lang-opt:hover,
body.cp .topbar > .ui-prefs .theme-toggle:hover, .wc-head > .ui-prefs .theme-toggle:hover { color: #fff; }
body.cp .topbar > .ui-prefs .lang-opt[aria-pressed="true"]:hover, .wc-head > .ui-prefs .lang-opt[aria-pressed="true"]:hover { color: #172036; }
@media (max-width: 960px) {
  .header-inner { gap: 10px; }
  .topbar > .ui-prefs { margin-right: 6px; }
}
@media (max-width: 640px) {
  .ui-prefs { gap: 4px; }
  .ui-prefs .language-switch { height: 30px; padding: 2px 2px 2px 2px; }
  .ui-prefs .language-switch > svg { display: none; }
  .ui-prefs .lang-opt { min-width: 26px; padding: 0 6px; height: 24px; }
  .ui-prefs .theme-toggle { width: 30px; height: 30px; }
  .topbar > .ui-prefs { margin-right: 4px; }
}

/* ------------------------------------------------------------------ pemilih di Pengaturan → Akun */
.pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.theme-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-choice button { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 9px; border: 1px solid var(--rx-line);
  border-radius: 10px; background: var(--rx-surface); color: var(--rx-text); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.theme-choice button:hover { border-color: color-mix(in srgb, var(--rx-line) 40%, var(--rx-primary)); }
.theme-choice button[aria-pressed="true"] { border-color: var(--rx-primary); box-shadow: 0 0 0 3px var(--rx-focus); }
.theme-choice .swatch { width: 100%; height: 34px; border-radius: 6px; border: 1px solid var(--rx-line); background: linear-gradient(#fff 0 32%, #eef1f5 32%); }
.theme-choice .swatch.dark { background: linear-gradient(#1e232c 0 32%, #0f1217 32%); }
.theme-choice .swatch.system { background: linear-gradient(90deg, #eef1f5 0 50%, #0f1217 50%); }

/* ------------------------------------------------------------------ halaman privasi (pakai gaya syarat) */
.privacy-body p:first-child { font-size: clamp(26px, 4.4vw, 34px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); margin-bottom: 18px; }
.privacy-body p { color: var(--text); }

/* ------------------------------------------------------------------ penyesuaian manual tema gelap */
/* Tombol/elemen "tinta" (latar gelap + teks putih) di tema terang: dibalik menjadi terang di tema gelap. */
:root[data-theme="dark"] .button:not(.ghost):not(.light):not(.outline-light):not(.wa-button) { background: #eef2f8; border-color: #eef2f8; color: #0b1530; }
:root[data-theme="dark"] .button:not(.ghost):not(.light):not(.outline-light):not(.wa-button):hover { background: #ffffff; border-color: #ffffff; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .price:not(.featured) .button:hover, :root[data-theme="dark"] .uc-play:hover { background: #eef2f8; border-color: #eef2f8; color: #0b1530; }
:root[data-theme="dark"] .uc-play:hover svg { color: #0b1530; }
:root[data-theme="dark"] .ch-ic.api, :root[data-theme="dark"] .uc-wide .uc-ic { background: #2a3350; color: #fff; }
:root[data-theme="dark"] .site-footer { background: #0a0d12; border-top: 1px solid var(--rx-line); }
:root[data-theme="dark"] .skip-link { background: #eef2f8; color: #0b1530; }
:root[data-theme="dark"] .cw-row.me .cw-bubble, :root[data-theme="dark"] .sb.me { background: #3b6dff; color: #fff; }
:root[data-theme="dark"] .cw-cta, :root[data-theme="dark"] .cw-send, :root[data-theme="dark"] .mkw-steps li.cur .c { background: #3b6dff; border-color: #3b6dff; color: #fff; }
:root[data-theme="dark"] .cw-send:hover { background: #5583ff; }
/* Gambar ilustrasi/produk tetap di atas latar terang agar tidak tampak "bolong". */
:root[data-theme="dark"] img[src*="/img/demo/"] { background-color: #f4f6fa; }
/* Kolom isian native mengikuti skema gelap. */
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color-scheme: dark; }
:root[data-theme="dark"] ::placeholder { color: #7f8899; opacity: 1; }
:root[data-theme="dark"] ::selection { background: rgba(91, 140, 255, .38); }
/* Kontrol bahasa/tema di atas sisi panel brand halaman akun tetap terbaca. */
:root[data-theme="dark"] .ui-prefs .lang-opt[aria-pressed="true"] { background: #e6e9ef; color: #10141b; }

/* ------------------------------------------------------------------ polesan halus (kedua tema) */
:focus-visible { outline-offset: 2px; }
.card, .modal, .dropdown, .menu { transition: background-color .2s var(--rx-ease), border-color .2s var(--rx-ease); }
.btn { transition: background-color .15s var(--rx-ease), border-color .15s var(--rx-ease), color .15s var(--rx-ease), box-shadow .15s var(--rx-ease); }

/* Saklar (toggle) di tema gelap: jalur & kenop harus kontras (dipakai banyak di Tim & Akses). */
:root[data-theme="dark"] .toggle .sw { background: #3a4250; }
:root[data-theme="dark"] .toggle .sw::after { background: #e6e9ef; }
:root[data-theme="dark"] .toggle input:checked + .sw { background: var(--primary); }
:root[data-theme="dark"] .toggle input:disabled + .sw { opacity: .5; }

/* v11: label HEMAT tetap kontras di mode gelap */
:root[data-theme="dark"] .rp-save { background: #f59e0b; color: #1f1300; }
:root[data-theme="dark"] .rp-product[aria-selected="true"] { color: #ffffff; }
:root[data-theme="dark"] .rp-popular, :root[data-theme="dark"] .wa-float, :root[data-theme="dark"] .rp-card.is-featured .rp-btn, :root[data-theme="dark"] .rp-btn.primary { color: #ffffff; }
:root[data-theme="dark"] .crm-code { background: #0b0f15; color: #e2e8f0; }

/* v25: sembunyikan tombol lihat/hapus bawaan browser (Edge/IE); aplikasi memakai satu tombol mata sendiri */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear, input::-ms-clear { display: none; }
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.pw-eye-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted, #6b7280); cursor: pointer; padding: 0; }
.pw-eye-btn:hover { color: var(--text, #111827); background: rgba(127,127,127,.12); }
.pw-eye-btn:focus-visible { outline: 2px solid #2A4BF2; outline-offset: 1px; }
.pw-eye-btn .i { width: 18px; height: 18px; }

/* v26: menu kiri disematkan — isi halaman bergeser (tidak tertutup menu) */
@media (min-width: 601px) {
  body.sidebar-pinned:not(.cp) .body { grid-template-columns: 218px minmax(0, 1fr); }
  body.sidebar-pinned:not(.cp) .rail { box-shadow: none !important; }
  body.sidebar-pinned:not(.cp) .rail-toggle { color: #2A4BF2; }
}

/* v27: lampiran di chat */
.msg .att { display: block; margin: 2px 0 6px; }
.msg .att-img img { display: block; max-width: min(280px, 100%); max-height: 320px; border-radius: 10px; object-fit: cover; background: rgba(127,127,127,.12); }
.msg .att-audio audio { width: min(280px, 100%); height: 36px; }
.msg .att-tr { font-size: 12.5px; margin-top: 4px; line-height: 1.45; white-space: pre-wrap; }
.msg .att-file, .msg .att-wait, .msg .att-fail { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(127,127,127,.12); }
.msg .att-fail { color: #b42318; }
.msg .att .i { width: 16px; height: 16px; }

/* v27: web chat pelanggan — tombol foto & foto di balon */
.composer .attach-btn { width: 42px; padding: 0; display: grid; place-items: center; flex: none; background: transparent; border: 1px solid var(--line, #e3e7ee); color: var(--muted, #667085); }
.msg .att-img { display: block; max-width: min(240px, 100%); max-height: 280px; border-radius: 10px; margin: 2px 0 6px; object-fit: cover; }
.msg .att-note { font-size: 12.5px; opacity: .8; margin-bottom: 4px; }