/* Opsi tampilan (skin). Aktif hanya kalau diisi; tanpa itu tampilan lama tidak berubah.
Prinsip (taste-skill + Web Interface Guidelines): satu keluarga font sans (tanpa serif di dashboard), satu warna
aksen, label tanpa HURUF BESAR + tracking lebar, angka tabular, fokus keyboard terlihat, animasi hanya
transform/opacity dan hormati prefers-reduced-motion. */
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/onest.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* ------------------------------------------------------------------ dasar bersama semua skin */
:root[data-skin] { --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }
:root[data-skin] body { font-family: var(--sans); font-size: 14px; word-spacing: normal; -webkit-font-smoothing: antialiased; }
:root[data-skin] h1, :root[data-skin] h2, :root[data-skin] h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
:root[data-skin] h1 { font-size: 20px; letter-spacing: -.02em; }
:root[data-skin] h2 { font-size: 15px; }
:root[data-skin] .num, :root[data-skin] td, :root[data-skin] .stat .val, :root[data-skin] .kv dd { font-variant-numeric: tabular-nums; }
:root[data-skin] .stat .val { font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; font-size: 24px; }
:root[data-skin] .stat .lbl svg { display: none; } /* ikon di tiap label angka = hiasan, bukan informasi */
:root[data-skin] .nav-h { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; padding: 16px 10px 4px; }
:root[data-skin] th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
:root[data-skin] .brand .logo { background: var(--logo-bg); color: var(--logo-fg); font-family: var(--sans); font-weight: 600; font-size: 16px; }
:root[data-skin] .brand b { font-family: var(--sans); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
:root[data-skin] code, :root[data-skin] pre, :root[data-skin] textarea.mono, :root[data-skin] .chip { font-family: var(--mono); }
:root[data-skin] .card { border-radius: var(--radius); }
:root[data-skin] .badge { border-radius: var(--r-badge); font-weight: 500; }
:root[data-skin] .btn { border-radius: var(--r-ctrl); font-weight: 500;
transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
:root[data-skin] .btn:active { transform: translateY(1px); }
:root[data-skin] input, :root[data-skin] select, :root[data-skin] textarea { border-radius: var(--r-ctrl); background: var(--field); }
:root[data-skin] .nav a { border-radius: var(--r-ctrl); transition: background-color .15s, color .15s; }
:root[data-skin] .tabs a { border-radius: var(--r-ctrl); font-weight: 500; }
:root[data-skin] .sw { transition: background-color .15s, border-color .15s; }
:root[data-skin] .sw::after { transition: transform .15s; }
:root[data-skin] .sw.on::after { left: 2px; transform: translateX(17px); }
:root[data-skin] .tk-vip { background: var(--gold-soft); border: 0; color: var(--gold); letter-spacing: 0; }
:root[data-skin] :focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
:root[data-skin] input:focus, :root[data-skin] select:focus, :root[data-skin] textarea:focus { box-shadow: 0 0 0 3px var(--jade-soft); }
:root[data-skin] .top { backdrop-filter: none; }
:root[data-skin] .side { color: var(--text); }
:root[data-skin] .bub { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
:root[data-skin] *, :root[data-skin] *::after { transition: none !important; animation: none !important; }
}
/* ================================================================== A. TINTA
Netral dingin ala alat kerja (Linear / Vercel). Geist. Sudut 8px. Angka ringkasan jadi satu strip bersekat,
bukan empat kartu terpisah. Aksen tunggal: hijau giok toko. */
:root[data-skin="tinta"] {
--sans: "Geist", system-ui, -apple-system, sans-serif;
--bg: #0c0d0e; --surface: #121314; --surface-2: #18191b; --surface-3: #202124; --border: #232427; --field: #0f1011;
--text: #ededee; --muted: #a0a1a6; --faint: #6e7076;
--jade: #3fb08f; --jade-soft: rgba(63,176,143,.13);
--gold: #d2ad63; --gold-soft: rgba(210,173,99,.12); --rose: #d98ba1; --rose-soft: rgba(217,139,161,.12);
--red: #e0705f; --red-soft: rgba(224,112,95,.12); --blue: #7ea6e0; --blue-soft: rgba(126,166,224,.12);
--top-bg: #0c0d0e; --hover: rgba(255,255,255,.02); --bub-out: #173a31; --bub-out-meta: #8cc3b2;
--logo-bg: #ededee; --logo-fg: #0c0d0e; --shadow: rgba(0,0,0,.4);
--radius: 8px; --r-ctrl: 6px; --r-badge: 4px;
--chart: #3fb08f; --chart-fill: rgba(63,176,143,.10);
}
:root[data-skin="tinta"][data-theme="light"] {
--chart: #1b7a62; --chart-fill: rgba(27,122,98,.08);
--bg: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --surface-3: #e9e9eb; --border: #e4e4e7; --field: #ffffff;
--text: #18181b; --muted: #52525b; --faint: #85858d;
--jade: #1b7a62; --jade-soft: rgba(27,122,98,.1);
--gold: #946a12; --gold-soft: rgba(148,106,18,.1); --rose: #a8466a; --rose-soft: rgba(168,70,106,.09);
--red: #b83e30; --red-soft: rgba(184,62,48,.09); --blue: #2f5fa8; --blue-soft: rgba(47,95,168,.09);
--top-bg: #fafafa; --hover: rgba(0,0,0,.02); --bub-out: #dcefe8; --bub-out-meta: #2f6b5a;
--logo-bg: #18181b; --logo-fg: #fafafa; --shadow: rgba(24,24,27,.12);
}
:root[data-skin="tinta"] .side { background: var(--bg); }
:root[data-skin="tinta"] .nav a.on { background: var(--surface-3); }
:root[data-skin="tinta"] .nav a.on svg { color: var(--text); }
:root[data-skin="tinta"] .btn-p { background: var(--text); border-color: var(--text); color: var(--bg); }
:root[data-skin="tinta"] .btn-p:hover { background: var(--muted); border-color: var(--muted); }
:root[data-skin="tinta"] .grid.g4:has(> .card.stat) { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
:root[data-skin="tinta"] .grid.g4 > .card.stat { border: 0; border-radius: 0; background: transparent; }
:root[data-skin="tinta"] .grid.g4 > .card.stat + .card.stat { border-left: 1px solid var(--border); }
:root[data-skin="tinta"] .stat .val { font-size: 22px; }
:root[data-skin="tinta"] .tabs a.on { background: var(--surface-3); border-color: var(--border); }
:root[data-skin="tinta"] .chat-list a.on { background: var(--surface-3); }
@media (max-width: 1000px) {
:root[data-skin="tinta"] .grid.g4 > .card.stat:nth-child(3) { border-left: 0; }
:root[data-skin="tinta"] .grid.g4 > .card.stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}
/* ================================================================== B. HUTAN
Palet Forest: hijau tua + putih tulang dingin + aksen amber. Onest (hangat, sedikit membulat). Sudut 12px.
Sidebar berwarna hijau tua supaya identitas toko terasa, isi halaman tetap tenang. */
:root[data-skin="hutan"] {
--sans: "Onest", system-ui, -apple-system, sans-serif;
--bg: #0e1411; --surface: #141c18; --surface-2: #1a241f; --surface-3: #22302a; --border: #24322b; --field: #111814;
--text: #e8eee9; --muted: #9eaca3; --faint: #6f7e75;
--jade: #d6a44e; --jade-soft: rgba(214,164,78,.14);
--gold: #d6a44e; --gold-soft: rgba(214,164,78,.13); --rose: #d99a8a; --rose-soft: rgba(217,154,138,.12);
--red: #e27560; --red-soft: rgba(226,117,96,.13); --blue: #8fb3d9; --blue-soft: rgba(143,179,217,.12);
--ok: #6cc59a; --ok-soft: rgba(108,197,154,.13);
--top-bg: #0e1411; --hover: rgba(255,255,255,.02); --bub-out: #2a3a2c; --bub-out-meta: #b5c9b3;
--logo-bg: #d6a44e; --logo-fg: #0e1411; --side: #0b120e; --shadow: rgba(0,0,0,.4);
--radius: 12px; --r-ctrl: 8px; --r-badge: 6px;
--chart: #d6a44e; --chart-fill: rgba(214,164,78,.12);
}
:root[data-skin="hutan"][data-theme="light"] {
--chart: #9a6a14; --chart-fill: rgba(154,106,20,.09);
--bg: #f2f5f2; --surface: #ffffff; --surface-2: #e9efea; --surface-3: #dde6df; --border: #d6dfd8; --field: #ffffff;
--text: #14201a; --muted: #4c5b52; --faint: #7a887f;
--jade: #9a6a14; --jade-soft: rgba(154,106,20,.11);
--gold: #9a6a14; --gold-soft: rgba(154,106,20,.1); --rose: #a2503e; --rose-soft: rgba(162,80,62,.09);
--red: #b3402c; --red-soft: rgba(179,64,44,.09); --blue: #34608f; --blue-soft: rgba(52,96,143,.09);
--ok: #257a52; --ok-soft: rgba(37,122,82,.1);
--top-bg: #f2f5f2; --hover: rgba(0,0,0,.02); --bub-out: #dcebdf; --bub-out-meta: #3a6247;
--logo-bg: #d6a44e; --logo-fg: #14201a; --side: #1d3b2c; --shadow: rgba(20,32,26,.12);
}
:root[data-skin="hutan"] .side { background: var(--side); border-right-color: transparent; }
:root[data-skin="hutan"][data-theme="light"] .side { --text: #eef4ef; --muted: #b9cabe; --faint: #88a291; --surface-2: #26483a; --jade-soft: rgba(214,164,78,.2); --border: #2d5242; }
:root[data-skin="hutan"][data-theme="light"] .side .nav a.on { color: #fff; }
:root[data-skin="hutan"] .nav a.on svg { color: var(--jade); }
:root[data-skin="hutan"] .btn-p { color: #16110a; }
:root[data-skin="hutan"][data-theme="light"] .btn-p { color: #fff; }
:root[data-skin="hutan"] .btn-p:hover { filter: brightness(1.08); }
:root[data-skin="hutan"] .st-selesai, :root[data-skin="hutan"] .st-hasil_terkirim, :root[data-skin="hutan"] .b-jade { background: var(--ok-soft); color: var(--ok); }
:root[data-skin="hutan"] .sw.on { background: var(--ok); border-color: var(--ok); }
:root[data-skin="hutan"] .live { color: var(--ok); }
:root[data-skin="hutan"] .stat .val { font-size: 26px; }
:root[data-skin="hutan"] .card { border-color: transparent; }
:root[data-skin="hutan"][data-theme="light"] .card { border-color: var(--border); }
/* ================================================================== C. KOBALT
Biru kobalt tunggal di atas abu netral (Stripe / Cal.com). Figtree. Sudut 6px, lebih padat untuk tabel.
Header putih/solid, tabel tanpa garis di tiap baris (zebra tipis). */
:root[data-skin="kobalt"] {
--sans: "Figtree", system-ui, -apple-system, sans-serif;
--bg: #0c0f16; --surface: #121620; --surface-2: #181d29; --surface-3: #202636; --border: #222938; --field: #0e121b;
--text: #e7eaf1; --muted: #9ba3b6; --faint: #6b7489;
--jade: #7d97f2; --jade-soft: rgba(125,151,242,.15);
--gold: #d9ad5b; --gold-soft: rgba(217,173,91,.12); --rose: #e094ae; --rose-soft: rgba(224,148,174,.12);
--red: #ec7a68; --red-soft: rgba(236,122,104,.12); --blue: #7d97f2; --blue-soft: rgba(125,151,242,.13);
--ok: #5fc39a; --ok-soft: rgba(95,195,154,.13);
--top-bg: #0c0f16; --hover: rgba(255,255,255,.025); --bub-out: #232f58; --bub-out-meta: #aab8ea;
--logo-bg: #3d5bd9; --logo-fg: #fff; --shadow: rgba(0,0,0,.45);
--radius: 6px; --r-ctrl: 6px; --r-badge: 4px;
--chart: #7d97f2; --chart-fill: rgba(125,151,242,.12);
}
:root[data-skin="kobalt"][data-theme="light"] {
--chart: #3551d1; --chart-fill: rgba(53,81,209,.08);
--bg: #f5f6f8; --surface: #ffffff; --surface-2: #f0f2f5; --surface-3: #e4e7ed; --border: #e0e4ea; --field: #ffffff;
--text: #111726; --muted: #4a5366; --faint: #818a9b;
--jade: #3551d1; --jade-soft: rgba(53,81,209,.09);
--gold: #8f6410; --gold-soft: rgba(143,100,16,.1); --rose: #a3406a; --rose-soft: rgba(163,64,106,.08);
--red: #b83a2a; --red-soft: rgba(184,58,42,.08); --blue: #3551d1; --blue-soft: rgba(53,81,209,.08);
--ok: #1f7a55; --ok-soft: rgba(31,122,85,.09);
--top-bg: #ffffff; --hover: rgba(17,23,38,.025); --bub-out: #e3e8fb; --bub-out-meta: #3a4e9e;
--logo-bg: #3551d1; --logo-fg: #fff; --shadow: rgba(17,23,38,.1);
}
:root[data-skin="kobalt"] body { font-size: 13.5px; }
:root[data-skin="kobalt"] .btn-p { color: #fff; background: #3d5bd9; border-color: #3d5bd9; }
:root[data-skin="kobalt"][data-theme="light"] .btn-p { background: var(--jade); border-color: var(--jade); }
:root[data-skin="kobalt"] .btn-p:hover { background: #3450c4; }
:root[data-skin="kobalt"] .st-selesai, :root[data-skin="kobalt"] .st-hasil_terkirim, :root[data-skin="kobalt"] .b-jade { background: var(--ok-soft); color: var(--ok); }
:root[data-skin="kobalt"] .live { color: var(--ok); }
:root[data-skin="kobalt"] .card { padding: 16px; box-shadow: 0 1px 2px var(--shadow); }
:root[data-skin="kobalt"] .content { padding-top: 20px; }
:root[data-skin="kobalt"] .top { background: var(--surface); padding-top: 12px; padding-bottom: 12px; }
:root[data-skin="kobalt"] .nav a { padding: 7px 10px; }
:root[data-skin="kobalt"] .nav a.on { background: var(--jade-soft); color: var(--jade); }
:root[data-skin="kobalt"] td { padding: 8px 10px; border-bottom: 0; }
:root[data-skin="kobalt"] tbody tr:nth-child(even) td { background: var(--hover); }
:root[data-skin="kobalt"] .stat .lbl { font-size: 12.5px; }
:root[data-skin="kobalt"] .stat .val { font-size: 22px; }
:root[data-skin="kobalt"] .tabs a.on { background: var(--jade-soft); border-color: transparent; color: var(--jade); }
/* ================================================================== D. KORPORAT (layout baru)
Pola aplikasi bisnis (Odoo / SAP Fiori / NetSuite): bilah menu atas berwarna merek dengan menu per modul
(Keuangan / Jual / Atur jadi menu tarik-turun), "control panel" putih di bawahnya (judul + aksi), lalu lembar
kerja berbingkai tipis di atas latar abu. Font IBM Plex Sans, sudut 4px, badge persegi, tabel padat.
Hanya tata letak & gaya: semua tautan, tombol, form, dan fitur tetap sama. Di HP kembali ke laci + menu bawah. */
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/plex.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root[data-skin="korporat"] {
--sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
--bg: #0f1214; --surface: #171b1e; --surface-2: #1d2225; --surface-3: #262c30; --border: #2a3135; --field: #13171a;
--text: #e4e8ea; --muted: #9aa4aa; --faint: #6f7a80;
--jade: #3aa58c; --jade-soft: rgba(58,165,140,.14);
--gold: #d3a54f; --gold-soft: rgba(211,165,79,.13); --rose: #d8889f; --rose-soft: rgba(216,136,159,.12);
--red: #e0705f; --red-soft: rgba(224,112,95,.13); --blue: #71a0de; --blue-soft: rgba(113,160,222,.13);
--top-bg: #171b1e; --hover: rgba(255,255,255,.03); --bub-out: #1c3e36; --bub-out-meta: #92c4b6;
--bar: #0d3b33; --bar-text: #e3f1ed; --bar-muted: #a9c8bf; --bar-hover: rgba(255,255,255,.09); --bar-on: rgba(255,255,255,.14);
--logo-bg: #e3f1ed; --logo-fg: #0d3b33; --shadow: rgba(0,0,0,.45);
--chart: #3aa58c; --chart-fill: rgba(58,165,140,.10);
--radius: 4px; --r-ctrl: 4px; --r-badge: 3px;
}
:root[data-skin="korporat"][data-theme="light"] {
--bg: #eef0f2; --surface: #ffffff; --surface-2: #f5f6f7; --surface-3: #e9ecee; --border: #d8dde1; --field: #ffffff;
--text: #1c2327; --muted: #4f5b62; --faint: #7d888e;
--jade: #0f6e5c; --jade-soft: rgba(15,110,92,.09);
--gold: #8a5d00; --gold-soft: rgba(138,93,0,.1); --rose: #a13a5c; --rose-soft: rgba(161,58,92,.08);
--red: #b3362a; --red-soft: rgba(179,54,42,.08); --blue: #1f5fae; --blue-soft: rgba(31,95,174,.08);
--top-bg: #ffffff; --hover: rgba(15,110,92,.04); --bub-out: #dcefe9; --bub-out-meta: #2b6557;
--bar: #0d4a3f; --shadow: rgba(28,35,39,.14);
--chart: #0f6e5c; --chart-fill: rgba(15,110,92,.08);
}
:root[data-skin="korporat"] body { font-size: 13.5px; line-height: 1.45; }
:root[data-skin="korporat"] h1 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
:root[data-skin="korporat"] h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; }
:root[data-skin="korporat"] .btn { padding: 6px 12px; font-weight: 500; }
:root[data-skin="korporat"] .btn-s { padding: 4px 9px; font-size: 12.5px; }
:root[data-skin="korporat"] .btn-p { background: var(--jade); border-color: var(--jade); color: #fff; }
:root[data-skin="korporat"] .btn-p:hover { filter: brightness(1.1); }
:root[data-skin="korporat"] .btn-g { background: var(--surface); border-color: var(--gold); color: var(--gold); }
:root[data-skin="korporat"] .badge { padding: 1px 7px; font-size: 11.5px; }
:root[data-skin="korporat"] .tabs a { padding: 5px 11px; font-size: 12.5px; }
:root[data-skin="korporat"] .tabs a.on { background: var(--jade); border-color: var(--jade); color: #fff; }
:root[data-skin="korporat"] .chat-list .tabs a { border-bottom: 1px solid var(--border); padding: 5px 11px; display: inline-block; }
:root[data-skin="korporat"] .chat-list .tabs a.on { background: var(--jade); box-shadow: none; }
:root[data-skin="korporat"] .tabs a.on .n { color: rgba(255,255,255,.75); }
:root[data-skin="korporat"] input, :root[data-skin="korporat"] select, :root[data-skin="korporat"] textarea { padding: 7px 10px; }
/* lembar kerja: kartu dengan kepala bergaris bawah */
:root[data-skin="korporat"] .card { padding: 14px 16px; box-shadow: 0 1px 0 var(--shadow); }
:root[data-skin="korporat"] .card > .card-h:first-child { margin: -14px -16px 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-height: 44px; }
:root[data-skin="korporat"] .card.stat { box-shadow: none; }
:root[data-skin="korporat"] .grid { gap: 12px; }
:root[data-skin="korporat"] .stack > * + * { margin-top: 12px; }
/* angka ringkasan: satu strip KPI bersekat */
:root[data-skin="korporat"] .grid.g5:has(> .card.stat), :root[data-skin="korporat"] .grid.g4:has(> .card.stat) { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 var(--shadow); }
:root[data-skin="korporat"] .grid.g5 > .card.stat, :root[data-skin="korporat"] .grid.g4 > .card.stat { border: 0; border-radius: 0; background: transparent; padding: 12px 16px; }
:root[data-skin="korporat"] .grid.g5 > .card.stat + .card.stat, :root[data-skin="korporat"] .grid.g4 > .card.stat + .card.stat { border-left: 1px solid var(--border); }
:root[data-skin="korporat"] .grid:has(> .card.stat) + .grid:has(> .card.stat) { margin-top: 12px !important; }
:root[data-skin="korporat"] .stat .lbl { font-size: 12px; font-weight: 500; }
:root[data-skin="korporat"] .stat .val { font-size: 21px; font-weight: 600; margin-top: 4px; }
/* tabel: kepala abu, baris padat */
:root[data-skin="korporat"] th { background: var(--surface-2); color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
:root[data-skin="korporat"] td { padding: 7px 10px; }
:root[data-skin="korporat"] .card:has(> .tbl-wrap:first-child), :root[data-skin="korporat"] .card:has(> table:first-child) { padding-top: 0; }
:root[data-skin="korporat"] .card > .tbl-wrap:first-child { margin: 0 -16px; padding: 0; }
:root[data-skin="korporat"] .card > .tbl-wrap:first-child th:first-child, :root[data-skin="korporat"] .card > .tbl-wrap:first-child td:first-child { padding-left: 16px; }
:root[data-skin="korporat"] .card > .tbl-wrap:first-child th:last-child, :root[data-skin="korporat"] .card > .tbl-wrap:first-child td:last-child { padding-right: 16px; }
:root[data-skin="korporat"] .card > .tbl-wrap + .hint { margin-top: 10px; }
:root[data-skin="korporat"] .li { padding: 8px 0; }
:root[data-skin="korporat"] .tg { padding: 10px 0; }
:root[data-skin="korporat"] .tg .ico { border-radius: 4px; width: 30px; height: 30px; }
:root[data-skin="korporat"] .alert { border-radius: 4px; padding: 9px 12px; }
:root[data-skin="korporat"] .chat { height: calc(100vh - 150px); }
:root[data-skin="korporat"] .bub { border-radius: 6px; }
:root[data-skin="korporat"] .chat-list a.on { background: var(--jade-soft); box-shadow: inset 3px 0 0 var(--jade); }
@media (min-width: 761px) {
/* bilah menu atas */
:root[data-skin="korporat"] .app { display: block; }
:root[data-skin="korporat"] .side { position: sticky; top: 0; z-index: 20; height: 48px; overflow: visible; display: flex; align-items: center;
gap: 18px; padding: 0 20px; background: var(--bar); border: 0; color: var(--bar-text); }
:root[data-skin="korporat"] .brand { padding: 0; gap: 9px; flex: none; }
:root[data-skin="korporat"] .brand .logo { width: 28px; height: 28px; border-radius: 4px; font-size: 14px; }
:root[data-skin="korporat"] .brand b { color: var(--bar-text); font-size: 14px; }
:root[data-skin="korporat"] .brand span { display: none; }
:root[data-skin="korporat"] .nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; height: 100%; }
:root[data-skin="korporat"] .nav-g { position: relative; display: flex; align-items: center; height: 100%; }
:root[data-skin="korporat"] .nav-g-utama .nav-h { display: none; }
:root[data-skin="korporat"] .nav a { color: var(--bar-muted); padding: 6px 11px; border-radius: 4px; gap: 7px; font-weight: 500; white-space: nowrap; }
:root[data-skin="korporat"] .nav a svg { width: 15px; height: 15px; }
:root[data-skin="korporat"] .nav-g-utama > a:hover { background: var(--bar-hover); color: #fff; }
:root[data-skin="korporat"] .nav-g-utama > a.on { background: var(--bar-on); color: #fff; }
:root[data-skin="korporat"] .nav a.on svg { color: inherit; }
:root[data-skin="korporat"] .nav .badge { margin-left: 2px; background: rgba(255,255,255,.18); color: #fff; }
/* grup lain: menu tarik-turun (buka saat diarahkan / difokus dengan keyboard) */
:root[data-skin="korporat"] .nav-g:not(.nav-g-utama) .nav-h { cursor: default; color: var(--bar-muted); font-size: 13.5px; font-weight: 500;
padding: 6px 11px; border-radius: 4px; display: flex; align-items: center; gap: 5px; }
:root[data-skin="korporat"] .nav-g:not(.nav-g-utama) .nav-h::after { content: ""; width: 6px; height: 6px; border: solid currentColor;
border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .8; }
:root[data-skin="korporat"] .nav-g:hover .nav-h, :root[data-skin="korporat"] .nav-g:focus-within .nav-h { background: var(--bar-hover); color: #fff; }
:root[data-skin="korporat"] .nav-g:has(a.on) .nav-h { background: var(--bar-on); color: #fff; }
:root[data-skin="korporat"] .nav-p { position: absolute; top: calc(100% - 6px); left: 0; min-width: 210px; padding: 5px; background: var(--surface);
border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px var(--shadow); opacity: 0; transform: translateY(-4px);
pointer-events: none; transition: opacity .12s, transform .12s; z-index: 30; }
:root[data-skin="korporat"] .nav-g:hover .nav-p, :root[data-skin="korporat"] .nav-g:focus-within .nav-p { opacity: 1; transform: none; pointer-events: auto; }
:root[data-skin="korporat"] .nav-p a { display: flex; color: var(--text); padding: 7px 10px; }
:root[data-skin="korporat"] .nav-p a svg { color: var(--muted); }
:root[data-skin="korporat"] .nav-p a:hover { background: var(--surface-2); color: var(--text); }
:root[data-skin="korporat"] .nav-p a.on { background: var(--jade-soft); color: var(--jade); }
:root[data-skin="korporat"] .nav-p a.on svg { color: var(--jade); }
/* akun di kanan bilah */
:root[data-skin="korporat"] .nav-user { margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; gap: 8px; flex: none; }
:root[data-skin="korporat"] .nav-user .t { color: var(--bar-text); } :root[data-skin="korporat"] .nav-user .s { color: var(--bar-muted); font-size: 11px; }
:root[data-skin="korporat"] .nav-user .btn-ghost { color: var(--bar-muted); } :root[data-skin="korporat"] .nav-user .btn-ghost:hover { background: var(--bar-hover); color: #fff; }
/* control panel: judul + status + aksi */
:root[data-skin="korporat"] .top { position: sticky; top: 48px; z-index: 10; padding: 10px 20px; background: var(--top-bg); gap: 12px; }
:root[data-skin="korporat"] .top .sub { font-size: 12px; }
:root[data-skin="korporat"] .content { padding: 16px 20px 48px; max-width: 1560px; }
:root[data-skin="korporat"] .chat { height: calc(100vh - 170px); }
}
:root[data-skin] .card-h h2 svg, :root[data-skin] h2 > svg { width: 16px; height: 16px; vertical-align: -2px; margin-right: 2px; color: var(--muted); }
/* ---------- Korporat: palet merek dari logo (merah cinnabar #E44242 + jingga peach #F69048).
--brand = warna merek (menu, tombol utama, pilihan aktif); --jade tetap hijau untuk arti "berhasil / naik". */
:root[data-skin="korporat"] {
--bg: #141011; --surface: #1c1718; --surface-2: #231d1e; --surface-3: #2c2526; --border: #382e2f; --field: #171213;
--text: #efe6e4; --muted: #b3a4a1; --faint: #857673;
--brand: #f06a5c; --brand-soft: rgba(240,106,92,.15); --brand-ink: #1a0d0c;
--jade: #4fb38a; --jade-soft: rgba(79,179,138,.14);
--gold: #f4a261; --gold-soft: rgba(244,162,97,.14);
--red: #ff7b72; --red-soft: rgba(255,123,114,.13);
--top-bg: #1c1718; --hover: rgba(255,255,255,.03); --bub-out: #3a1f1d; --bub-out-meta: #e9b4ab;
--bar: #3b1414; --bar-text: #fbecea; --bar-muted: #dcb3ad; --bar-hover: rgba(255,255,255,.08); --bar-on: rgba(255,255,255,.14);
--chart: #f06a5c; --chart-fill: rgba(240,106,92,.10);
}
:root[data-skin="korporat"][data-theme="light"] {
--bg: #f4f1f0; --surface: #ffffff; --surface-2: #faf7f6; --surface-3: #efe9e7; --border: #e2dad7; --field: #ffffff;
--text: #2b2121; --muted: #665754; --faint: #928380;
--brand: #c0322b; --brand-soft: rgba(192,50,43,.08); --brand-ink: #ffffff;
--jade: #1d7a52; --jade-soft: rgba(29,122,82,.09);
--gold: #b45d14; --gold-soft: rgba(180,93,20,.1);
--red: #b3261e; --red-soft: rgba(179,38,30,.08);
--top-bg: #ffffff; --hover: rgba(192,50,43,.035); --bub-out: #fbe3dd; --bub-out-meta: #8f3b30;
--bar: #8b1e1e; --bar-text: #fff3f0; --bar-muted: #f5c9c1; --bar-hover: rgba(255,255,255,.1); --bar-on: rgba(255,255,255,.17);
--chart: #c0322b; --chart-fill: rgba(192,50,43,.07); --shadow: rgba(43,33,33,.13);
}
:root[data-skin="korporat"] .btn-p { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
:root[data-skin="korporat"] .btn-g { border-color: var(--gold); color: var(--gold); }
:root[data-skin="korporat"] input:focus, :root[data-skin="korporat"] select:focus, :root[data-skin="korporat"] textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
:root[data-skin="korporat"] input[type=checkbox] { accent-color: var(--brand); }
:root[data-skin="korporat"] :focus-visible { outline-color: var(--brand); }
:root[data-skin="korporat"] .sw.on { background: var(--brand); border-color: var(--brand); }
:root[data-skin="korporat"] .tabs a.on, :root[data-skin="korporat"] .chat-list .tabs a.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
:root[data-skin="korporat"] .chat-list a.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
:root[data-skin="korporat"] .chat-list a.belum .nm > .faint, :root[data-skin="korporat"] .titik { color: var(--brand); }
:root[data-skin="korporat"] .titik { background: var(--brand); }
:root[data-skin="korporat"] .pesanan-jalan .pj:hover, :root[data-skin="korporat"] .chip:hover { border-color: var(--brand); }
:root[data-skin="korporat"] .bar > i { background: var(--brand); }
:root[data-skin="korporat"] .bawah a.on, :root[data-skin="korporat"] .nav a.on svg { color: var(--brand); }
:root[data-skin="korporat"] .nav a.on { background: var(--brand-soft); }
:root[data-skin="korporat"] .nav-p a.on, :root[data-skin="korporat"] .nav-p a.on svg { background: var(--brand-soft); color: var(--brand); }
:root[data-skin="korporat"] .brand .logo-img { border-radius: 6px; }
@media (min-width: 761px) {
:root[data-skin="korporat"] .side { height: 54px; }
:root[data-skin="korporat"] .top { top: 54px; }
:root[data-skin="korporat"] .brand .logo-img { width: 40px; height: 40px; }
:root[data-skin="korporat"] .nav-g-utama > a.on, :root[data-skin="korporat"] .nav-g-utama > a.on svg { background: var(--bar-on); color: #fff; }
:root[data-skin="korporat"] .chat { height: calc(100vh - 176px); }
}
@media (min-width: 761px) and (max-width: 1200px) {
:root[data-skin="korporat"] .grid.g5 > .card.stat:nth-child(4) { border-left: 0; }
:root[data-skin="korporat"] .grid.g5 > .card.stat:nth-child(n+4) { border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
:root[data-skin="korporat"] .grid.g5:has(> .card.stat), :root[data-skin="korporat"] .grid.g4:has(> .card.stat) { gap: 0; }
:root[data-skin="korporat"] .grid.g5 > .card.stat, :root[data-skin="korporat"] .grid.g4 > .card.stat { border-left: 0 !important; border-top: 1px solid var(--border); }
:root[data-skin="korporat"] .grid.g5 > .card.stat:first-child, :root[data-skin="korporat"] .grid.g4 > .card.stat:first-child,
:root[data-skin="korporat"] .grid.g4 > .card.stat:nth-child(2) { border-top: 0; }
:root[data-skin="korporat"] .grid.g5 > .card.stat:nth-child(odd):not(:first-child), :root[data-skin="korporat"] .grid.g4 > .card.stat:nth-child(even) { border-left: 1px solid var(--border) !important; }
}
:root[data-skin="korporat"] .login .brand b { font-family: var(--sans); }
:root[data-skin="korporat"] .login .btn-p, :root[data-skin="korporat"] .login button { }
:root[data-skin="korporat"] .login .brand b { color: var(--text); font-size: 16px; }
:root[data-skin="korporat"] .login .brand span { display: block; }
:root[data-skin] .masuk-form h1 { font-size: 22px; }