:root{ /* === DESIGN TOKENS "MJDS — Old Money" — DARK (default) === Palet: hitam pekat & cokelat espresso, aksen maroon terang (terracotta), emas redup. Sumber: design_handoff_mjds/tokens/colors.css */ --bg:#151009;--surface:#231B14;--surface-2:#2F251C;--surface-3:#3B2E23; --label:#F6F1E7;--label-2:#C7BCAC;--label-3:#988C7D; --separator:rgba(230,225,210,.15);--separator-strong:rgba(230,225,210,.26);--track:#41332A; --accent:#D97C60;--accent-2:#EF9F80;--accent-soft:rgba(217,124,96,.18); --gold:#D4B26E;--gold-soft:rgba(212,178,110,.16); --ok:#82BE9B;--ok-soft:rgba(130,190,155,.16); --warn:var(--gold);--warn-soft:var(--gold-soft); --info:#A3BAD4;--info-soft:rgba(163,186,212,.16); --st-green:var(--ok);--st-yellow:var(--gold);--st-orange:var(--accent);--green:var(--ok);--green-soft:var(--ok-soft);--red:#E8836A;--red-soft:rgba(232,131,106,.16); --nav-material:rgba(26,19,13,.88); /* alias kosakata mockup (supaya komponen mockup drop-in) */ --ink:var(--label);--ink-2:var(--label-2);--ink-3:var(--label-3);--line-2:var(--separator-strong);--navbg:var(--nav-material);--hero-sh:0 16px 36px -12px rgba(0,0,0,.6);--ease:var(--ease-out);--ease2:var(--ease-std); /* #159 (handoff Claude Design): desainnya dibuat TANPA bisa membaca dash2.html, jadi ia menebak palet kita dari screenshot lalu mendeklarasikan token sendiri. Menyalin blok [data-theme]-nya akan memberi CC DUA palet paralel yang pelan-pelan menyimpang tiap token MJDS diubah. Jadi kosakata desain dipetakan ke token yang SUDAH ADA — mode terang ikut otomatis. */ --paper:var(--bg);--card:var(--surface);--card2:var(--surface-2);--card3:var(--surface-3); --ink2:var(--label-2);--ink3:var(--label-3);--line2:var(--separator-strong); --brand:var(--accent);--brandSoft:var(--accent-soft);--brandInk:var(--accbtn-fg); /* legacy aliases → token semantik (supaya UI lama ikut) */ --panel:var(--surface);--panel2:var(--surface-2);--line:var(--separator);--txt:var(--label);--mut:var(--label-2);--acc:var(--accent);--acc2:var(--accent-2); --blue:var(--info);--purple:#B3A0C7;--yellow:var(--gold); --sh-sm:0 1px 2px rgba(0,0,0,.45),0 8px 28px rgba(0,0,0,.38);--sh-lg:0 18px 48px -16px rgba(0,0,0,.65);--shadow:var(--sh-sm); --scrim:rgba(5,5,5,.6); --rangebg:rgba(26,19,13,.88);--logingrad:linear-gradient(135deg,#151009,#2B1A10); --accbtn-fg:var(--on-accent); /* radius */ --r-card:16px;--r-btn:12px;--r-input:10px;--r-pill:999px;--r-icon:9px; /* motion */ --ease-out:cubic-bezier(.16,1,.3,1);--ease-std:cubic-bezier(.4,0,.2,1); --dur-press:120ms;--dur-state:240ms;--dur-enter:480ms; /* status */ --danger:#E8836A;--danger-soft:var(--red-soft);--ok2:var(--ok);--lh-tight:1.2;--lh-body:1.45;--on-accent:#1C0B07;--on-soft:var(--accent-2); /* ── TOKEN YATIM YANG DIRESMIKAN (Derry 22 Sep 2026: "14 token yatim itu rapihin juga") ── Keempat belasnya selama ini dipakai dalam bentuk ber-cadangan tanpa pernah dideklarasikan: JALAN, tetapi cadangannya yang selalu terpakai — artinya SKIN & TEMA tak bisa menyentuhnya sama sekali. Aturan berdiri melarang mengganti PEMAKAIANNYA (itu justru mengubah warna yang sekarang tampil), jadi yang dibereskan sisi sebaliknya: tokennya dideklarasikan PERSIS senilai cadangannya. Hasilnya nol perubahan tampilan hari ini di semua tema & skin, tetapi mulai sekarang skin bisa menimpanya seperti token lain. Nilai diambil dari cadangan yang sudah dipakai — bukan dipilih ulang. Delapan --sh-* adalah warna shift (sumber: _SZ_WARNA). */ --sh-m:#E8933F;--sh-e:#9B7EDE;--sh-off:#8D97A6;--sh-ph:#34C07C;--sh-duty:#3FB6A8;--sh-mid:#D886C0;--sh-ck:#B98157;--sh-esp:#E0679C; --navy:#1F3A54;--amber:#D98A1F;--orange:#E08A3C;--good:#34C28C;--surface3:#2A3140;--ttfs:27px; /* --acc-soft dipakai 5x: empat dengan alpha .14, satu .10. Diresmikan di .14 sehingga satu sel "Scoring Poin" ikut menjadi .14 — SATU-SATUNYA perubahan tampilan dari sapuan ini, sengaja, supaya keluarga sel yang sama tidak berbeda 4 poin alpha tanpa alasan. */ --acc-soft:rgba(217,124,96,.14); /* --muted TIDAK ikut diresmikan: ia bukan satu warna, melainkan SALAH EJA dari --mut yang terlanjur dipakai 14x dengan 6 cadangan berbeda. Lima di antaranya cadangannya sudah token lain (--mut/--line/--label-3) -> ditunjuk langsung, nol perubahan. Sembilan sisanya abu-abu ditulis mati yang SAMA di tema gelap & terang -> diarahkan ke --mut sesuai aturan "teks redup -> --mut". Itu memang mengubah warna, dan memang itu perbaikannya: di tema terang teks redup tadinya tetap abu-abu tengah (pudar di latar terang), sekarang #6E6055; tiap skin juga dapat warna redupnya sendiri (riso #4A4A4A, hud #7fb8cd, anime #8a6b91, dst). */ } /* ===== TEMA TERANG (Light) — MJDS Old Money: kertas pearl + espresso + maroon ===== */ html[data-theme="light"]{ --bg:#E1DFD2;--surface:#FBFAF4;--surface-2:#F1EFE4;--surface-3:#E8E5D6; --label:#251511;--label-2:#6E6055;--label-3:#94897A; --separator:rgba(48,29,23,.11);--separator-strong:rgba(48,29,23,.20);--track:#D6D3C3; --accent:#640F07;--accent-2:#8A2A1C;--accent-soft:rgba(100,15,7,.075); --gold:#8F6F38;--gold-soft:rgba(143,111,56,.13); --ok:#2F6E4F;--ok-soft:rgba(47,110,79,.11); --warn:var(--gold);--warn-soft:var(--gold-soft); --info:#3E5F80;--info-soft:rgba(62,95,128,.11); --st-green:var(--ok);--st-yellow:var(--gold);--st-orange:var(--accent-2);--green:var(--ok);--green-soft:var(--ok-soft);--red:#A3311F;--red-soft:rgba(163,49,31,.10); --danger:#A3311F;--danger-soft:var(--red-soft);--ok2:var(--ok); --nav-material:rgba(251,250,244,.86); --ink:var(--label);--ink-2:var(--label-2);--ink-3:var(--label-3);--line-2:var(--separator-strong);--navbg:var(--nav-material);--hero-sh:0 18px 44px -18px rgba(48,29,23,.28); --blue:var(--info);--purple:#6A5387;--yellow:var(--gold);--on-soft:#640F07;--on-accent:#F2EFE4; --sh-sm:0 1px 2px rgba(48,29,23,.06),0 6px 20px rgba(48,29,23,.07);--sh-lg:0 18px 44px -18px rgba(48,29,23,.28);--shadow:var(--sh-sm); --scrim:rgba(37,21,17,.42); --rangebg:rgba(251,250,244,.94);--logingrad:linear-gradient(135deg,#E1DFD2,#F2EFE4);} html[data-theme="light"] #login .box,html[data-theme="light"] .panel{box-shadow:var(--shadow)} html[data-theme="light"] .pill.cafe{color:var(--info)}html[data-theme="light"] .pill.deliv{color:var(--gold)}html[data-theme="light"] .pill.ecom{color:var(--purple)} html[data-theme="light"] .pill.crit{color:var(--danger)}html[data-theme="light"] .pill.warn{color:var(--warn)}html[data-theme="light"] .pill.ok{color:var(--ok)} html[data-theme="light"] tbody tr.click:hover{background:var(--surface-2)} .accbtn{background:var(--acc)!important;color:var(--accbtn-fg,#fff)!important} html[data-theme="light"]{--accbtn-fg:var(--on-accent)} html[data-theme="light"] #mtog{box-shadow:var(--shadow)} html[data-theme="light"] .navitem.active{background:var(--accent-soft);color:var(--on-soft)} /* AUDIT KONTRAS #4 */ html[data-theme="light"] .chk.on{color:var(--on-soft)} /* #4a chip filter aktif terbaca di terang */ html[data-theme="light"] .navitem:hover{background:var(--surface-2)} html[data-theme="light"] #side{border-right-color:var(--separator-strong)} html[data-theme="light"] .secthead{background:none} html[data-theme="light"] .bar-cell .b{background:rgba(100,15,7,.14)} html[data-theme="light"] tbody tr.sel{background:rgba(100,15,7,.10)} html[data-theme="light"] #gsres{box-shadow:0 10px 30px rgba(48,29,23,.15)} /* ===== SKIN "GELAP KLASIK" — tema gelap netral pra-MJDS (Derry 15 Jul 2026): data-skin="klasik" DI ATAS dark. Nilai warna = token dark lama (hitam kebiruan + aksen oranye); tipografi/radius tetap MJDS. */ html[data-theme="dark"][data-skin="klasik"]{ --bg:#0B0D11;--surface:#1B1F27;--surface-2:#262B34;--surface-3:#323845; --label:#F2F4F6;--label-2:#9AA1AC;--label-3:#7E8794; --separator:rgba(255,255,255,.10);--separator-strong:rgba(255,255,255,.14);--track:#2F353F; --accent:#F2914F;--accent-2:#FFB070;--accent-soft:rgba(242,145,79,.15); --gold:#dcbb63;--gold-soft:rgba(220,187,99,.16); --ok:#34C28C;--ok-soft:rgba(52,194,140,.15); --warn:var(--gold);--warn-soft:var(--gold-soft); --info:#5fa3df;--info-soft:rgba(95,163,223,.16); --st-green:#34C28C;--st-yellow:#F2C94C;--st-orange:#F2914F;--green:#34C28C;--green-soft:rgba(52,194,140,.15);--red:#E5705F;--red-soft:rgba(229,112,95,.15); --nav-material:rgba(23,26,32,.82);--line-2:rgba(255,255,255,.14); --blue:#5fa3df;--purple:#a98ae0;--yellow:#dcbb63; --sh-sm:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.5);--sh-lg:0 18px 48px -16px rgba(0,0,0,.65);--shadow:var(--sh-sm); --scrim:rgba(5,7,10,.6); --rangebg:rgba(12,14,18,.9);--logingrad:linear-gradient(135deg,#0C0E12,#1d1308); --danger:#E5705F;--danger-soft:var(--red-soft);--ok2:var(--ok);--on-accent:#1a1206;--on-soft:var(--accent); } /* Ikut preferensi sistem bila belum dipaksa data-theme (anti-flash sebelum JS applyTheme jalan). Setelah JS jalan, data-theme selalu di-set eksplisit; default tanpa pilihan tersimpan = ikut sistem (lihat init THEME_KEY). */ @media (prefers-color-scheme: light){ html:not([data-theme="dark"]):not([data-theme="light"]){ --bg:#E1DFD2;--surface:#FBFAF4;--surface-2:#F1EFE4;--surface-3:#E8E5D6; --label:#251511;--label-2:#6E6055;--label-3:#94897A; --separator:rgba(48,29,23,.11);--separator-strong:rgba(48,29,23,.20);--track:#D6D3C3; --accent:#640F07;--accent-2:#8A2A1C;--accent-soft:rgba(100,15,7,.075); --gold:#8F6F38;--gold-soft:rgba(143,111,56,.13); --ok:#2F6E4F;--ok-soft:rgba(47,110,79,.11); --warn:var(--gold);--warn-soft:var(--gold-soft); --info:#3E5F80;--info-soft:rgba(62,95,128,.11); --st-green:var(--ok);--st-yellow:var(--gold);--st-orange:var(--accent-2);--green:var(--ok);--green-soft:var(--ok-soft);--red:#A3311F;--red-soft:rgba(163,49,31,.10); --danger:#A3311F;--danger-soft:var(--red-soft);--ok2:var(--ok); --nav-material:rgba(251,250,244,.86); --line-2:var(--separator-strong);--hero-sh:0 18px 44px -18px rgba(48,29,23,.28); --blue:var(--info);--purple:#6A5387;--yellow:var(--gold);--on-soft:#640F07;--on-accent:#F2EFE4;--accbtn-fg:var(--on-accent); --sh-sm:0 1px 2px rgba(48,29,23,.06),0 6px 20px rgba(48,29,23,.07);--sh-lg:0 18px 44px -18px rgba(48,29,23,.28);--shadow:var(--sh-sm); --scrim:rgba(37,21,17,.42); --rangebg:rgba(251,250,244,.94);--logingrad:linear-gradient(135deg,#E1DFD2,#F2EFE4); } } /* ===== SKIN "VISUAL PLAYBOOK" — dari brand book MKMR (Figma "eksplore mkmr", 21 Agu 2026). Dipasang DI ATAS tema Terang: data-theme=light + data-skin=playbook. Palet dibaca dari RENDER prototipe, BUKAN dari color styles di berkasnya — halaman "Colors" di playbook tak bisa dicapai dari tautan prototipe yang ada (menu tujuh bagian belum dikawat di frame kover). Jadi angka di bawah setara-mata, bukan setara-berkas; kalau halaman Colors sudah bisa dibuka, tukar hex-nya di satu tempat ini saja. Watak playbook: kertas krem, tinta cokelat tua, merah bata untuk judul, kuning emas & biru kobalt sebagai warna bab, ungu sebagai aksen jarang. Sudut lembut, nyaris tanpa bayangan. */ html[data-skin="playbook"]{ --bg:#FAF2DF;--surface:#FFFBF0;--surface-2:#F4E9CF;--surface-3:#ECDCB8; --label:#2B1A12;--label-2:#6B5343;--label-3:#7A6553; /* 4,56 di petak — label kapital 12px butuh >=4,5 */ --separator:#E4D3B0;--separator-strong:#D3BE95;--track:#EFE2C6;--line-2:#D3BE95; --accent:#C0392B;--accent-2:#D9503F;--accent-soft:rgba(192,57,43,.10); --on-soft:#96271B;--on-accent:#FFFBF0;--accbtn-fg:#FFFBF0; --st-green:#3F6644;--green:#3F6644;--green-soft:rgba(63,102,68,.14);--ok:#3F6644;--ok-soft:rgba(63,102,68,.14); /* 5,51 */ --red:#C0392B;--red-soft:rgba(192,57,43,.12);--danger-soft:rgba(192,57,43,.12); --st-yellow:#8A6410;--yellow:#E8B21F;--gold:#E8B21F;--gold-soft:rgba(232,178,31,.16); /* isian tetap terang; sbg teks 4,81 */ --warn:#8A6410;--warn-soft:rgba(232,178,31,.18); --blue:#2F53C8;--purple:#5B2BC9;--info:#2F53C8; --nav-material:rgba(250,242,223,.92); --sh-sm:0 1px 0 rgba(43,26,18,.05);--shadow:var(--sh-sm); --sh-lg:0 14px 34px -18px rgba(43,26,18,.35);--hero-sh:0 10px 24px -14px rgba(43,26,18,.30); --rangebg:rgba(250,242,223,.95);--logingrad:linear-gradient(135deg,#FAF2DF,#F4E9CF 55%,#ECDCB8); --r-card:14px;--r-btn:11px;--r-icon:9px;--r-pill:999px; } /* Tipografi: playbook memakai display gambar-tangan + nav kapital ber-tracking lebar. Font tulisannya tidak dibundel (aturan kuota: nol webfont), jadi yang dipinjam PERLAKUANNYA — judul tebal rapat, label kecil kapital ber-tracking — memakai tumpukan font sistem. */ html[data-skin="playbook"]{--pb-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace} html[data-skin="playbook"] h2.title{letter-spacing:-.01em;font-weight:var(--fw-display,600);font-family:var(--font-display)} /* Nav & label playbook berwatak MONOSPACE ber-tracking lebar. Font aslinya tidak dibundel (aturan kuota: nol webfont), jadi yang dipakai tumpukan mono bawaan sistem — jauh lebih dekat ke playbook daripada sans, dan nol byte tambahan. */ html[data-skin="playbook"] .sec-label,html[data-skin="playbook"] .sub{ font-family:var(--pb-mono);text-transform:uppercase;letter-spacing:.16em;font-weight:700} html[data-skin="playbook"] label,html[data-skin="playbook"] .lbl,html[data-skin="playbook"] th, html[data-skin="playbook"] .abpdk,html[data-skin="playbook"] .abpdst,html[data-skin="playbook"] .espgrp{ font-family:var(--pb-mono);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700} /* Angka: tabular + mono supaya kolom waktu/nilai berbaris rapi seperti tabel di playbook. */ html[data-skin="playbook"] .abpdv,html[data-skin="playbook"] .num,html[data-skin="playbook"] td.num, html[data-skin="playbook"] .jam,html[data-skin="playbook"] .espbig{ font-family:var(--pb-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} html[data-skin="playbook"] .panel{box-shadow:none;border:1px solid var(--separator)} html[data-skin="playbook"] #side{border-right-color:var(--separator)} html[data-skin="playbook"] tbody tr.click:hover{background:#F4E9CF} html[data-skin="playbook"] tbody tr.sel{background:rgba(192,57,43,.10)} /* ===== SKIN "LA CABRA" — dipasang DI ATAS tema Terang (data-theme=light + data-skin=lacabra). Token dari situs asli lacabra.com: kertas #F8F1EC · tinta olive #34352A · teal #108474 · hairline #CCC4BF · sudut kotak (radius 0) · label uppercase ber-tracking · flat tanpa bayangan. */ html[data-skin="lacabra"]{ --bg:#F8F1EC;--surface:#FDFAF8;--surface-2:#F3ECE5; --label:#34352A;--label-2:#5B5C53;--label-3:#81827B; --separator:#E3D9D0;--track:#EBE3DE;--line-2:#CCC4BF; --accent:#108474;--accent-2:#1FA38F;--accent-soft:rgba(16,132,116,.10);--on-soft:#0C6B5E;--on-accent:#F8F1EC;--accbtn-fg:#F8F1EC; --st-green:#108474;--green:#0E8A76;--green-soft:rgba(16,132,116,.12); --st-orange:#B06E3B;--st-yellow:#A8894A;--red:#C05B4D;--red-soft:rgba(192,91,77,.12); --blue:#4A7A96;--purple:#7D6A9E;--yellow:#A8894A; --nav-material:rgba(248,241,236,.9); --sh-sm:0 1px 0 rgba(52,53,42,.04);--shadow:var(--sh-sm);--hero-sh:0 10px 24px -14px rgba(52,53,42,.35); --rangebg:rgba(248,241,236,.95);--logingrad:linear-gradient(135deg,#F8F1EC,#EBE3DE); --r-card:2px;--r-btn:2px;--r-icon:2px;--r-pill:3px; } /* ══ TEMA PASTEL (Derry 14 Sep 2026, permintaan tim) — tiga colorway terpilih dari lima usulan. Semuanya skin di atas tema TERANG (data-theme=light + data-skin), persis pola La Cabra — tema gelap bawaan tidak tersentuh. --gold SENGAJA ditimpa di tiap skin: emas bawaan tema terang (#8F6F38) hanya mencapai ~4,2-4,5:1 di latar pastel, sedangkan eyebrow halaman berukuran 10,5px = teks biasa (ambang 4,5:1). Nada di bawah ini terukur 5,1:1. JANGAN dicerahkan tanpa menghitung ulang. Warna status (red/green/blue) sengaja TIDAK ikut dipastelkan sampai pudar — peringatan yang semanis sekelilingnya berhenti berfungsi sebagai peringatan. ══════════════════ */ html[data-skin="stroberi"]{ --bg:#FBF3F4;--surface:#FFFCFC;--surface-2:#F4E6E8;--surface-3:#EEDCDF; --label:#2D2126;--label-2:#6A5A60;--label-3:#9C8A90; --separator:#E7D6D9;--track:#F0E2E4;--line-2:#DCC8CC; --accent:#B04E64;--accent-2:#C86078;--accent-soft:rgba(176,78,100,.12);--on-soft:#8E3B4E;--on-accent:#FFFCFC;--accbtn-fg:#FFFCFC; --st-green:#3F7A5E;--green:#3F7A5E;--green-soft:rgba(63,122,94,.13); --st-orange:#B0653A;--st-yellow:#8A6A2E;--red:#B23B33;--red-soft:rgba(178,59,51,.12); --blue:#4A6E97;--purple:#7D6A9E;--yellow:#8A6A2E; --gold:#83622A;--gold-soft:rgba(131,98,42,.15); --nav-material:rgba(251,243,244,.9); --sh-sm:0 1px 2px rgba(45,33,38,.05);--shadow:var(--sh-sm);--hero-sh:0 10px 24px -14px rgba(45,33,38,.30); --rangebg:rgba(251,243,244,.95);--logingrad:linear-gradient(135deg,#FBF3F4,#F4E6E8); --r-card:16px;--r-btn:11px;--r-icon:10px;--r-pill:999px; } html[data-skin="taro"]{ --bg:#F4F2F9;--surface:#FCFBFE;--surface-2:#E9E5F2;--surface-3:#E1DCEE; --label:#262233;--label-2:#5C566E;--label-3:#8E88A0; --separator:#DCD6EA;--track:#E6E1F0;--line-2:#CFC7E0; --accent:#66549B;--accent-2:#7B68B4;--accent-soft:rgba(102,84,155,.12);--on-soft:#53447F;--on-accent:#FCFBFE;--accbtn-fg:#FCFBFE; --st-green:#3D7458;--green:#3D7458;--green-soft:rgba(61,116,88,.13); --st-orange:#A9673A;--st-yellow:#8A6A2E;--red:#B23A3A;--red-soft:rgba(178,58,58,.12); --blue:#42679B;--purple:#66549B;--yellow:#8A6A2E; --gold:#7F622A;--gold-soft:rgba(127,98,42,.15); --nav-material:rgba(244,242,249,.9); --sh-sm:0 1px 2px rgba(38,34,51,.05);--shadow:var(--sh-sm);--hero-sh:0 10px 24px -14px rgba(38,34,51,.30); --rangebg:rgba(244,242,249,.95);--logingrad:linear-gradient(135deg,#F4F2F9,#E9E5F2); --r-card:16px;--r-btn:11px;--r-icon:10px;--r-pill:999px; } html[data-skin="telang"]{ --bg:#EFF3F8;--surface:#FAFCFE;--surface-2:#E1E9F2;--surface-3:#D8E2EE; --label:#1E2833;--label-2:#54606D;--label-3:#84909D; --separator:#D2DDE9;--track:#DFE7F0;--line-2:#C3D0DE; --accent:#3A6B93;--accent-2:#4A80AD;--accent-soft:rgba(58,107,147,.12);--on-soft:#2F587A;--on-accent:#FAFCFE;--accbtn-fg:#FAFCFE; --st-green:#356F52;--green:#356F52;--green-soft:rgba(53,111,82,.13); --st-orange:#A4652F;--st-yellow:#85672A;--red:#AE3A31;--red-soft:rgba(174,58,49,.12); --blue:#2F6289;--purple:#6A5C96;--yellow:#85672A; --gold:#7E6226;--gold-soft:rgba(126,98,38,.15); --nav-material:rgba(239,243,248,.9); --sh-sm:0 1px 2px rgba(30,40,51,.05);--shadow:var(--sh-sm);--hero-sh:0 10px 24px -14px rgba(30,40,51,.30); --rangebg:rgba(239,243,248,.95);--logingrad:linear-gradient(135deg,#EFF3F8,#E1E9F2); --r-card:16px;--r-btn:11px;--r-icon:10px;--r-pill:999px; } /* ══ JAYA (Derry 14 Sep 2026) — colorway RX-78-2. Bukan pastel: ini keluarga sendiri. Putih baju zirah jadi latar, BIRU jadi aksen, merah dada & kuning V-fin jadi ISIAN. Kenapa merah & kuning tidak dipakai sebagai teks: diukur di latar ini, merah RX asli (#F92D37) cuma 3,85:1 dan kuning V-fin (#FCF272) 1,01:1 — jauh di bawah 4,5. Jadi keduanya hidup sebagai --*-soft (tint isian) sementara --red/--yellow/--gold memakai kembaran gelapnya (5,1-5,7:1). Birunya justru lolos apa adanya: 6,25:1, dan putih di atasnya 7,19:1 — jadi aksen RX dipakai TANPA diubah. Sudut sengaja TAJAM (4px), kebalikan dari keluarga pastel — ini mesin, bukan permen. */ html[data-skin="jaya"]{ --bg:#EDEFF3;--surface:#FFFFFF;--surface-2:#E2E6EC;--surface-3:#D7DCE4; --label:#16192A;--label-2:#545A6B;--label-3:#7C8394; --separator:#D3D8E1;--track:#E4E8EE;--line-2:#C2C9D4; --accent:#2E51B0;--accent-2:#3E66CC;--accent-soft:rgba(46,81,176,.12);--on-soft:#24408C;--on-accent:#FFFFFF;--accbtn-fg:#FFFFFF; --st-green:#2F7A55;--green:#2F7A55;--green-soft:rgba(47,122,85,.13); --st-orange:#B0561C;--st-yellow:#7E6100;--red:#C81E28;--red-soft:rgba(249,45,55,.15); --blue:#2E51B0;--purple:#5B4FA8;--yellow:#7E6100; --gold:#7E6100;--gold-soft:rgba(252,242,114,.40); --nav-material:rgba(237,239,243,.92); --sh-sm:0 1px 0 rgba(22,25,42,.06);--shadow:var(--sh-sm);--hero-sh:0 10px 24px -14px rgba(22,25,42,.35); --rangebg:rgba(237,239,243,.95);--logingrad:linear-gradient(120deg,#FFFFFF 0%,#EDEFF3 42%,#2E51B0 100%); --r-card:4px;--r-btn:3px;--r-icon:3px;--r-pill:4px; } /* Tipografi v2 — metrik dari CSS asli lacabra.com: body Gotham 15px ls .06rem leading ~1.8 · h1-h3 SERIF "Anth" w400 sentence-case ls -.02em lh1.2-1.3 · uppercase+tracking HANYA label kecil/nav/tombol · weight dominan 400/500 (nyaris tanpa bold). */ html[data-skin="lacabra"]{--lc-serif:Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif} html[data-skin="lacabra"] body{font-family:"Avenir Next",Futura,"Century Gothic","Plus Jakarta Sans",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;letter-spacing:.04em;line-height:1.5} /* judul besar = serif tenang (persis h1-h3 mereka: serif 400, tracking negatif, TIDAK uppercase) */ html[data-skin="lacabra"] h2.title{font-family:var(--lc-serif);font-weight:400;letter-spacing:-.02em;text-transform:none;font-size:26px;line-height:1.2} html[data-skin="lacabra"] .panel h3,html[data-skin="lacabra"] h3{font-family:var(--lc-serif);font-weight:500;letter-spacing:-.01em;font-size:16px;line-height:1.35} html[data-skin="lacabra"] .modalbox h3,html[data-skin="lacabra"] #modalov h3{font-family:var(--lc-serif);font-weight:500} /* label kecil & section head = uppercase Gotham ber-tracking (satu-satunya tempat uppercase) */ html[data-skin="lacabra"] .sub,html[data-skin="lacabra"] .sec-label{text-transform:uppercase;letter-spacing:.14em;font-weight:500} html[data-skin="lacabra"] label,html[data-skin="lacabra"] .lbl{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:500} html[data-skin="lacabra"] th{letter-spacing:.08em;font-weight:500} /* bold diredam: mereka hampir tak pernah >500 */ html[data-skin="lacabra"] b,html[data-skin="lacabra"] strong{font-weight:600} html[data-skin="lacabra"] .sub-t,html[data-skin="lacabra"] .note,html[data-skin="lacabra"] .muted{line-height:1.6} /* input tenang: hairline, kotak, kertas */ html[data-skin="lacabra"] input.f,html[data-skin="lacabra"] select.f,html[data-skin="lacabra"] textarea{background:var(--surface);border:1px solid #CCC4BF;border-radius:2px} html[data-skin="lacabra"] .pill{font-weight:600;letter-spacing:.05em} /* panel & tabel: flat + hairline hangat, tanpa bayangan */ html[data-skin="lacabra"] .panel,html[data-skin="lacabra"] #login .box{box-shadow:none;border:1px solid #E3D9D0} html[data-skin="lacabra"] #side{border-right-color:#E3D9D0} html[data-skin="lacabra"] tbody tr.click:hover{background:#F3ECE5} html[data-skin="lacabra"] tbody tr.sel{background:rgba(16,132,116,.10)} html[data-skin="lacabra"] .bar-cell .b{background:rgba(16,132,116,.18)} /* tombol ala La Cabra: primary = blok tinta olive (persis .button--primary--green mereka), sekunder = outline hairline; tipografi tombol mereka: uppercase, tracking, w500, tinggi lega */ html[data-skin="lacabra"] .preset{text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:12px;padding:8px 16px} html[data-skin="lacabra"] .preset:not(.inkbg):not([style*="background"]){background:transparent;border:1px solid #CCC4BF;box-shadow:none} html[data-skin="lacabra"] .preset:not(.inkbg):not([style*="background"]):hover{background:#F3ECE5} html[data-skin="lacabra"] .preset.pri,html[data-skin="lacabra"] .preset.active{background:#34352A!important;color:#F8F1EC!important;border:1px solid #34352A!important} html[data-skin="lacabra"] .preset.pri:hover,html[data-skin="lacabra"] .preset.active:hover{background:#414234!important} html[data-skin="lacabra"] .navitem.active{background:rgba(16,132,116,.10);color:#0C6B5E} html[data-skin="lacabra"] .navitem:hover{background:#F3ECE5} html[data-skin="lacabra"] .pill{border-radius:3px} html[data-skin="lacabra"] .tag{border-radius:3px} html[data-skin="lacabra"] #gsres{box-shadow:0 10px 30px rgba(52,53,42,.14)} /* =================== TEMA GLASS (Liquid Glass ala iOS/Apple) — switch ortogonal data-glass=on, jalan di atas dark & light =================== */ html[data-glass="on"]{--r-card:22px;--r-btn:15px;--separator:rgba(255,255,255,.20);--line:rgba(255,255,255,.20);--glass-edge:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.05);} /* latar dekoratif (smoked / dark) — supaya blur ada yang dibiaskan */ html[data-glass="on"] body{background: radial-gradient(1200px 760px at 8% -10%, rgba(217,124,96,.30), transparent 58%), radial-gradient(1000px 680px at 112% 8%, rgba(95,163,223,.26), transparent 55%), radial-gradient(900px 900px at 50% 122%, rgba(169,138,224,.24), transparent 60%), linear-gradient(160deg,#0a0c10,#10131a 60%,#0a0c10); background-attachment:fixed;} /* latar terang (frosted) */ html[data-glass="on"][data-theme="light"] body{background: radial-gradient(1200px 760px at 8% -10%, rgba(255,176,112,.55), transparent 58%), radial-gradient(1000px 680px at 112% 8%, rgba(150,196,240,.55), transparent 55%), radial-gradient(900px 900px at 50% 122%, rgba(196,176,240,.5), transparent 60%), linear-gradient(160deg,#eef1f6,#f7f9fc 55%,#eaeef5); background-attachment:fixed;} /* permukaan kaca (dark/smoked default) */ html[data-glass="on"] #side, html[data-glass="on"] .panel, html[data-glass="on"] #modalov .modalbox, html[data-glass="on"] #gsres{ background:rgba(22,25,32,.97)!important; -webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%); border:1px solid rgba(255,255,255,.16); box-shadow:0 12px 38px rgba(0,0,0,.46),var(--glass-edge)!important;} html[data-glass="on"] #rangebar{background:rgba(20,23,30,.5)!important;-webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);border-bottom:1px solid rgba(255,255,255,.14);} html[data-glass="on"] .preset:not(.inkbg):not([style*="background"]){background:rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.18);box-shadow:var(--glass-edge);} html[data-glass="on"] .preset:not(.inkbg):not([style*="background"]):hover{background:rgba(255,255,255,.14)!important;} html[data-glass="on"] .preset.pri,html[data-glass="on"] .preset.active,html[data-glass="on"] .preset.accbtn,html[data-glass="on"] .accbtn{background:linear-gradient(180deg,rgba(217,124,96,.92),rgba(217,124,96,.7))!important;color:#1C0B07!important;border-color:rgba(255,255,255,.35)!important;} html[data-glass="on"] .pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);} html[data-glass="on"] .navitem.active{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:0 12px 12px 0;box-shadow:var(--glass-edge);} html[data-glass="on"] .navitem:hover{background:rgba(255,255,255,.07)!important;} html[data-glass="on"] #login .box{background:rgba(28,32,40,.55)!important;-webkit-backdrop-filter:blur(28px) saturate(185%);backdrop-filter:blur(28px) saturate(185%);border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 60px rgba(0,0,0,.5),var(--glass-edge);} html[data-glass="on"] #mtog{background:rgba(28,32,40,.6)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);} /* tabel/baris transparan supaya kaca tembus */ html[data-glass="on"] .litem{border-bottom-color:rgba(255,255,255,.10);} /* ===== varian TERANG (frosted putih ala Control Center) ===== */ html[data-glass="on"][data-theme="light"]{--separator:rgba(20,24,30,.14);--line:rgba(20,24,30,.14);--glass-edge:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(20,24,30,.04);} html[data-glass="on"][data-theme="light"] #side, html[data-glass="on"][data-theme="light"] .panel, html[data-glass="on"][data-theme="light"] #modalov .modalbox, html[data-glass="on"][data-theme="light"] #gsres{background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 38px rgba(60,80,120,.18),var(--glass-edge)!important;} html[data-glass="on"][data-theme="light"] #gsres{background:rgba(252,253,255,.98)!important;} /* dropdown cari: opaque biar tak tembus teks halaman (overlap) */ html[data-glass="on"][data-theme="light"] #rangebar{background:rgba(255,255,255,.55)!important;border-bottom:1px solid rgba(255,255,255,.7);} html[data-glass="on"][data-theme="light"] .preset:not(.inkbg):not([style*="background"]){background:rgba(255,255,255,.5)!important;border:1px solid rgba(255,255,255,.7);} html[data-glass="on"][data-theme="light"] .preset:not(.inkbg):not([style*="background"]):hover{background:rgba(255,255,255,.72)!important;} /* FIX kontras (Theola): tombol pri/active di TERANG+GLASS tadinya teks putih di atas latar putih transparan (rgba(255,255,255,.5) dari .preset) → tak terbaca. Kembalikan gradien aksen + teks gelap (konvensi tema terang: gelap-di-atas-aksen). Spesifisitas lebih tinggi + urutan setelah .preset → menang. */ html[data-glass="on"][data-theme="light"] .preset.pri,html[data-glass="on"][data-theme="light"] .preset.active,html[data-glass="on"][data-theme="light"] .preset.accbtn,html[data-glass="on"][data-theme="light"] .accbtn{background:linear-gradient(180deg,rgba(100,15,7,.95),rgba(100,15,7,.78))!important;color:#F2EFE4!important;border:1px solid rgba(100,15,7,.55)!important;} html[data-glass="on"][data-theme="light"] .preset.pri:hover,html[data-glass="on"][data-theme="light"] .preset.active:hover{background:linear-gradient(180deg,rgba(100,15,7,1),rgba(100,15,7,.86))!important;} html[data-glass="on"][data-theme="light"] .navitem.active{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.45))!important;} html[data-glass="on"][data-theme="light"] .navitem:hover{background:rgba(255,255,255,.5)!important;} html[data-glass="on"][data-theme="light"] #login .box{background:rgba(255,255,255,.6)!important;border:1px solid rgba(255,255,255,.75);} html[data-glass="on"][data-theme="light"] #mtog{background:rgba(255,255,255,.65)!important;border:1px solid rgba(255,255,255,.7);} /* tombol Glass di sidebar */ #glassBtn{cursor:pointer;margin-left:10px} @media (prefers-reduced-motion:no-preference){html[data-glass="on"] .panel{transition:background-color .3s var(--ease-std),box-shadow .3s var(--ease-std)}} *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--txt);font-family:var(--font-sans);font-size:14px;line-height:var(--lh-body,1.45);letter-spacing:.1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--dur-enter) var(--ease-std),color var(--dur-enter) var(--ease-std)} :root{--font-sans:'Hanken Grotesk','Plus Jakarta Sans',-apple-system,"SF Pro Text",system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-display:'Fraunces',Georgia,"Times New Roman",serif;--fw-display:600;--fw-display:800;--ls-display-tight:-.02em;--ls-caps:.14em;--font-num:var(--font-sans)} .tabular,.kpi .val,.stat-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em} @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.08s!important;scroll-behavior:auto!important}} /* === PRIMITIVES (Fase 2 — Apple-grade) === */ svg.luc{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} /* Logo merek = siluet penuh (Derry 9 Sep 2026: "pake logo shiluet tiktok"). Ikon lain tetap garis. */ .luc.sol{fill:currentColor;stroke:none} .emoluc-w{display:inline-flex;align-items:center;gap:6px;min-width:0;margin-right:6px} .pill .emoluc-w,.tag .emoluc-w{gap:4px;margin-right:3px;vertical-align:-2px} .emoluc-w svg{flex:0 0 auto} #side .navitem .ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:var(--label);flex:0 0 auto} #side .navitem .ic svg{width:15px;height:15px;stroke-width:2.2} #side .navitem.active .ic{box-shadow:0 0 0 1.5px rgba(255,255,255,.18) inset} #side .sub{display:flex;align-items:center;gap:7px} #themeBtn svg,#hdrActions .hdrbtn svg{vertical-align:-3px} .btn2{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:14px;border-radius:var(--r-btn);padding:10px 16px;border:1px solid transparent;cursor:pointer;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-state) var(--ease-std),border-color var(--dur-state)} .btn2:active{transform:scale(.96)} .btn2-primary{background:var(--accent);color:var(--on-accent)} .btn2-ghost{background:var(--surface);color:var(--label);border-color:var(--separator)} .btn2-plain{background:transparent;color:var(--accent)} .btn2-danger{background:var(--danger);color:#fff} .btn2{line-height:1}.btn2 svg{width:15px;height:15px;flex:0 0 auto} .pill2{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--separator);color:var(--label-2);transition:transform .15s,background-color var(--dur-state),color var(--dur-state)} .pill2:active{transform:scale(.94)} .pill2.on{background:var(--label);color:var(--bg);border-color:var(--label)} .badge2{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:700} .badge2.green{background:var(--green-soft);color:var(--green)}.badge2.red{background:var(--red-soft);color:var(--red)}.badge2.amber{background:var(--accent-soft);color:var(--accent)} .card2{background:var(--surface);border:1px solid var(--separator);border-radius:var(--r-card);box-shadow:var(--sh-sm);transition:background-color var(--dur-state) var(--ease-std),border-color var(--dur-state)} .icon-box{width:32px;height:32px;border-radius:var(--r-icon);display:inline-flex;align-items:center;justify-content:center} .icon-box.amber{background:var(--accent-soft);color:var(--accent)}.icon-box.green{background:var(--green-soft);color:var(--green)}.icon-box.red{background:var(--red-soft);color:var(--red)} .icon-box svg{width:18px;height:18px} .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--separator);border-radius:12px;padding:3px;gap:2px} .seg button{font:inherit;font-weight:600;font-size:13px;border:0;background:transparent;color:var(--label-2);padding:7px 14px;border-radius:9px;cursor:pointer;transition:.2s var(--ease-std)} .seg button.on,.seg button.active{background:var(--surface);color:var(--label);box-shadow:var(--sh-sm)} .seg button.active{color:var(--label);font-weight:700} /* micro-interaction tekan utk tombol/aksi lama */ .preset:active,.hdrbtn:active,.tab:active{transform:scale(.96)} /* === MOTION: scroll-reveal (Fase 5) === */ .reveal{opacity:0;transform:translateY(9px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}} /* === skeleton loader & empty-state (Fase 6) === */ .skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--separator) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skelsh 1.3s ease infinite;border-radius:8px} @keyframes skelsh{0%{background-position:100% 0}100%{background-position:0 0}} @media(prefers-reduced-motion:reduce){.skel{animation:none}} .skel-row{height:14px;margin:10px 0;border-radius:7px} .empty{text-align:center;padding:30px 18px;color:var(--label-2)} .empty-soft{text-align:center;padding:16px 14px;border:1.5px dashed var(--separator);border-radius:12px;color:var(--label-2);font-size:13px} .ovgreet{} .ovgreet-hero{margin:2px 0 14px;background:linear-gradient(135deg,var(--accent-soft),transparent 70%);} .ovbrand{letter-spacing:var(--ls-caps,.14em);text-transform:uppercase;font-weight:700;color:var(--accent);font-size:12px;display:flex;align-items:center;gap:6px} .ovhi{margin:4px 0 0;font-size:26px;font-weight:800;letter-spacing:-.02em} .menucard{cursor:pointer;display:flex;gap:12px;align-items:center;min-height:54px} .menucard .mi{display:inline-flex;color:var(--accent);flex:0 0 auto} /* Tombol aksi utama (Absen Masuk/Pulang). DITULIS `.preset.bigact` (0,2,0) dengan sengaja: `button.preset{min-height:34px}` di :878 lebih spesifik (0,1,1) DAN lebih bawah, jadi `.bigact` polos selalu kalah — kelas ini tak pernah benar-benar membesarkan tombol, di desktop maupun HP (temuan 7 Agu). Semua pemakaiannya memang `class="preset … bigact"`, jadi penajaman ini aman. */ .preset.bigact{font-size:16px;padding:13px 26px;min-height:52px;border-radius:14px;font-weight:800} /* komposit standar (Fase 4 wajib pakai ini, bukan inline style) */ .stat-tile{background:var(--surface-2);border:1px solid var(--separator);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px} .stat-tile .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .stat-tile .l{font-size:12px;color:var(--label-2)} .kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px}.kv>b{color:var(--label-2);font-weight:600} .chip-f{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;border:1px solid var(--separator);background:var(--surface-2);font-size:12px;cursor:pointer;min-height:30px} .chip-f.on{background:var(--accent-soft);border-color:var(--accent);color:var(--on-soft)} .rowact{display:flex;gap:6px;justify-content:flex-end;align-items:center} .tkcard{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;background:var(--panel)} .tkcard .tkt{font-weight:600;font-size:13px} .tkcol{min-width:215px;width:215px} .tkcol-h{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-caps,.14em);padding:4px 2px;border-bottom:2px solid currentColor;margin-bottom:8px} .micard{border-left:3px solid var(--line);padding:14px 16px} .micard .mt{flex:1;min-width:240px;font-size:14px;font-weight:700;line-height:1.35} .miev{margin-top:7px;padding:6px 9px;background:var(--panel2);border-radius:7px} .mifoot{margin-top:7px;border-top:1px solid var(--line);padding-top:6px} .mibtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .kvc{padding:6px 0;border-bottom:1px solid var(--separator)} .kvr{padding:3px 0;border-bottom:1px solid var(--separator)} .statbig{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* segmented control ala iOS utk sub-menu halaman */ #pgTabs{display:flex;gap:4px;margin:8px 0 14px;background:var(--surface-2);border:1px solid var(--separator);border-radius:13px;padding:4px;overflow-x:auto;-webkit-overflow-scrolling:touch} #pgTabs/* #90: scrollbar kini ditampilkan */ #pgTabs button{flex:0 0 auto;border:none;background:none;color:var(--label-2);font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;min-height:38px;white-space:nowrap;transition:background .18s,color .18s;display:inline-flex;align-items:center;gap:6px} #pgTabs button.active{background:var(--surface);color:var(--label);box-shadow:0 1px 6px rgba(0,0,0,.25)} #pgTabs button .cnt2{font-size:12px;background:var(--separator);border-radius:999px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;color:var(--label-2)} #pgTabs button.active .cnt2{background:var(--accent-soft);color:var(--accent)} /* rasa iOS (7 Jun): large-title collapse · sheet · transisi · switch */ @media(max-width:1024px){ #pagewrap .page>h2.title{position:sticky;top:var(--rbh,0px);z-index:45;margin:0 calc(-1 * var(--gutter,14px)) 12px;padding:10px 14px 9px;font-size:var(--ttfs,27px);letter-spacing:-.02em;background:var(--nav-material,rgba(23,26,32,.82));backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);transform:translateZ(0)} #pagewrap .page>h2.title .ttl-ic{width:1.18em;height:1.18em;border-radius:.32em;vertical-align:-.24em;margin-right:.36em} #pagewrap .page>h2.title .ttl-ic svg{width:.6em;height:.6em} } /* ═══ Beranda HP "Papan Angka" (pilihan Derry 20 Sep 2026: "kamu atur aja" -> alternatif B) ═══ Diukur 30 hari: 14 pemakai dominan HP hampir semuanya tim GRO; halaman mereka = antrian 297x, tamu 162x, Beranda 82x (semua 14 orang). Petak ini hanya dirender di HP dan hanya untuk peran lapangan - di desktop & peran lain tak ada satu pun permintaan jaringan tambahan. */ .ovtiles{display:none} @media(max-width:640px){ .ovtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px} .ovtile{border-radius:16px;padding:13px 14px 11px;border:1px solid var(--separator);background:var(--surface);min-height:96px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;color:var(--txt)} .ovtile .oti{color:var(--label-3)} .ovtile .otv{font-size:30px;font-weight:800;letter-spacing:-1.1px;line-height:1;font-variant-numeric:tabular-nums} .ovtile .otk{font-size:12.5px;color:var(--label-2);margin-top:5px;line-height:1.3} .ovtile.warn{background:color-mix(in srgb,var(--yellow) 12%,var(--surface))} .ovtile.crit{background:color-mix(in srgb,var(--red) 10%,var(--surface))} .ovtile.ok{background:color-mix(in srgb,var(--ok) 10%,var(--surface))} #modalov{align-items:flex-end;padding:0} #modalov .modalbox{width:100%;max-width:none;border-radius:22px 22px 0 0;max-height:90vh;overflow:auto;animation:sheetup .3s var(--ease-out);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))} #modalov .modalbox::before{content:'';display:block;width:38px;height:5px;border-radius:3px;background:var(--separator);margin:-6px auto 12px} } @keyframes sheetup{from{transform:translateY(48px);opacity:.55}to{transform:none;opacity:1}} /* #main adalah flex item (flex:1 1 0%) dengan min-width:auto bawaan -> tabel lebar di dalam .scrollx mendorong min-content-nya sampai MENEROBOS rail Hari Ini (terukur 8 Sep 2026: Laporan Social Media 1069px vs Overview 687px, teks terpotong di layar Derry). min-width:0 = perbaikan flexbox baku; .scrollx tetap yang menggulir tabelnya. */ #main{min-width:0} .pgin{animation:pgin .22s var(--ease-out)} @keyframes pgin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#modalov .modalbox{animation:none}.pgin{animation:none}} /* PERF HP (≤820px): matikan blur/glass yg dihitung-ulang saat scroll + animasi pindah halaman → scroll mulus, hemat GPU/baterai. Desktop tetap glass. (Derry 25 Jun 2026) */ @media(max-width:820px){ .pgin{animation:none!important}.page{animation:none!important} .page>h2.title{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel,#171a20)!important} #rangebar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel,#171a20)!important} html[data-glass="on"] #side,html[data-glass="on"] .panel,html[data-glass="on"] #modalov .modalbox,html[data-glass="on"] #gsres,html[data-glass="on"] #rangebar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel,#171a20)!important} /* #139 A1: #botnav satu-satunya bar position:fixed selebar layar yg ADA DI TIAP HALAMAN HP → backdrop-nya di-sample ulang tiap frame scroll. Ia terlewat waktu daftar ini dibuat. */ #botnav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel,#171a20)!important;will-change:auto!important} } /* ===== PUTUSAN AUDITOR atas kasus Outage (req Derry 22 Agu 2026) ===== Sistem tombol: popover pakai DUA LANGKAH (kategori -> sebab) karena ruangnya sempit; kartu antrean pakai GRID SERAGAM karena ruangnya lega & kecepatan yang penting. (pilihan Derry: "1 utk kartu antrean, 3 utk popover"). Semua tombol tinggi 40px, lebar dibuat identik lewat grid — penyebab "tidak rapih" sebelumnya adalah chip berbeda lebar yang membungkus acak 3/3/2/1. */ .ohvchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill,999px);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid transparent} .ohvchip.belum{background:var(--surface-3);color:var(--label-3);border:1px dashed var(--separator-strong)} .ohvchip.outage{background:var(--red-soft);color:var(--red)} .ohvchip.bukan{background:var(--ok-soft);color:var(--ok)} .ohvchip.pensiun{background:var(--gold-soft);color:var(--gold)} .ohvchip.tunda{background:var(--info-soft);color:var(--info)} .ohvchip:hover{filter:brightness(1.14)} #ohvPop{position:fixed;z-index:100050;width:394px;max-width:calc(100vw - 24px);background:var(--surface-2);border:1px solid var(--separator-strong); border-radius:var(--r-card,16px);padding:15px;box-shadow:0 24px 64px rgba(0,0,0,.6);max-height:88vh;overflow:auto} #ohvPop h5{margin:0 0 3px;font-size:14.5px;font-weight:700;letter-spacing:-.25px} #ohvPop .ohvev{font-size:12.5px;color:var(--label-3);line-height:1.5;margin-bottom:11px} .ohvlb{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--label-3);margin:13px 0 7px} .ohvlb:first-child{margin-top:0} .ohvg2{display:grid;grid-template-columns:repeat(2,1fr);gap:7px} .ohvg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .ohvb{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px;border-radius:var(--r-btn,12px); border:1px solid var(--separator);background:var(--surface);color:var(--label-2);font-size:12.5px;font-weight:600;line-height:1.25;text-align:center;cursor:pointer} .ohvb:hover{border-color:var(--separator-strong)} .ohvb.on{background:var(--acc);border-color:transparent;color:var(--on-accent,#1C0B07);font-weight:700} .ohvb.on.vr{background:var(--red);color:var(--bg)} .ohvb.on.vk{background:var(--gold);color:var(--bg)} .ohvb.on.vo{background:var(--ok);color:var(--bg)} .ohvb.on.vi{background:var(--info);color:var(--bg)} .ohvkat{border:1px solid var(--separator);border-radius:var(--r-input,10px);background:var(--surface);padding:10px 11px;cursor:pointer;text-align:left} .ohvkat.on{border-color:var(--acc);background:var(--accent-soft)} .ohvkat b{display:block;font-size:13px;font-weight:700;letter-spacing:-.15px} .ohvkat span{display:block;font-size:12px;color:var(--label-3);margin-top:2px} .ohvstep{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label-3)} .ohvstep i{width:19px;height:19px;border-radius:50%;background:var(--surface-3);color:var(--label-2);font-size:12px;font-style:normal;display:flex;align-items:center;justify-content:center;font-weight:800} .ohvstep.on i{background:var(--acc);color:var(--on-accent,#1C0B07)} #ohvPop textarea{width:100%;background:var(--surface);border:1px solid var(--separator);border-radius:var(--r-input,10px);color:var(--label-2); font:400 12.5px/1.5 inherit;padding:9px 10px;height:52px;resize:vertical} .ohvft{display:flex;gap:8px;margin-top:13px;align-items:center;flex-wrap:wrap} .ohvq{background:var(--surface);border:1px solid var(--separator);border-left:3px solid var(--red);border-radius:var(--r-input,10px);padding:13px 15px;margin-bottom:9px} .ohvq.kr{border-left-color:var(--gold)} .ohvq.ok{border-left-color:var(--ok)} .ohvqt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px} .ohvqn{font-size:15px;font-weight:700;letter-spacing:-.25px} .ohvev2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:12px} .ohvev2>div{background:var(--surface-2);border-radius:var(--r-icon,9px);padding:8px 10px} .ohvev2 .k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label-3)} .ohvev2 .v{font-size:13.5px;font-weight:700;margin-top:2px} .ohvgrp{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--label-3);margin:11px 0 6px;display:flex;align-items:center;gap:8px} .ohvgrp:after{content:'';flex:1;height:1px;background:var(--separator)} @media(max-width:640px){.ohvev2{grid-template-columns:repeat(2,1fr)}.ohvg3{grid-template-columns:repeat(2,1fr)}} /* ===== LAPIS RINGKASAN Outage (alternatif A, pilihan Derry 21 Agu 2026) ===== "Halaman ini harus menjawab APA YANG SAYA BERESKAN HARI INI dalam 5 detik." Matriks 118x21 (~2.478 sel) itu bahan mentah, bukan jawaban. Jadi di ATAS matriks: tiga kartu jawaban + peringkat berdasar KERUGIAN. Permintaan Derry: "fitur2 yang sudah ada jangan hilang" -> tak ada yang dicabut; matriks tetap terbuka apa adanya, cuma sekarang bisa dilipat kalau mau. */ #outSumPanel .oscards{display:grid;grid-template-columns:1.05fr 1.5fr 1.25fr;gap:11px;margin-bottom:12px} #outSumPanel .osc{background:var(--surface);border:1px solid var(--separator);border-radius:var(--r-card,16px);padding:14px 15px} #outSumPanel .osc.bad{border-color:color-mix(in srgb,var(--red) 45%,transparent)} #outSumPanel .osc.warn{border-color:color-mix(in srgb,var(--gold) 42%,transparent)} #outSumPanel .osk{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--label-3,var(--mut));margin-bottom:7px;display:flex;align-items:center;gap:6px} #outSumPanel .osv{font-size:29px;font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums} #outSumPanel .osv small{font-size:14px;font-weight:600;letter-spacing:-.2px;color:var(--label-3,var(--mut));margin-left:5px} #outSumPanel .osv.nm{font-size:20px;letter-spacing:-.5px} #outSumPanel .oss{font-size:12.5px;color:var(--label-3,var(--mut));margin-top:7px;line-height:1.5} #outSumPanel .oss b{color:var(--label-2,var(--txt))} #outSumPanel table.osr{border-collapse:separate;border-spacing:0 5px;width:100%} #outSumPanel table.osr th{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label-3,var(--mut));text-align:left;padding:0 11px 3px} #outSumPanel table.osr td{background:var(--surface-2);padding:9px 11px;font-size:13px;vertical-align:middle} #outSumPanel table.osr tr.rw{cursor:pointer} #outSumPanel table.osr tr.rw:hover td{background:var(--surface-3)} #outSumPanel table.osr tr td:first-child{border-radius:var(--r-input,10px) 0 0 var(--r-input,10px)} #outSumPanel table.osr tr td:last-child{border-radius:0 var(--r-input,10px) var(--r-input,10px) 0} #outSumPanel .osnm{font-weight:700;letter-spacing:-.2px} #outSumPanel .osmeta{font-size:12px;color:var(--label-3,var(--mut));margin-top:2px} #outSumPanel .osnum{font-variant-numeric:tabular-nums;text-align:right;font-weight:700} #outSumPanel .osstrip{display:flex;gap:2px} #outSumPanel .osstrip i{width:10px;height:17px;border-radius:3px;background:color-mix(in srgb,var(--ok) 38%,transparent);display:inline-block} #outSumPanel .osstrip i.r{background:var(--red)} #outSumPanel .osbar{position:relative;height:20px;border-radius:6px;background:var(--surface-3);overflow:hidden;margin-top:8px} #outSumPanel .osbar i{position:absolute;top:0;bottom:0;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--bg);font-style:normal} @media(max-width:900px){#outSumPanel .oscards{grid-template-columns:1fr}} /* ===== Tabel JAM Outage — warna dari TOKEN, sel jadi chip terpisah (Derry 21 Agu 2026) ===== Keluhan: "warnanya masih gini ga match". Dua sebabnya, dua-duanya nyata: (1) mockup digambar di palet biru-gelap, sedangkan app ini berpalet ESPRESSO (--bg #151009) — merah/hijau yang dipaku sebagai rgba() tak akan pernah senada dengan tema, dan makin jauh lagi di tema Terang/La Cabra/HUD/Sakura/Riso. Sekarang semua sel memakai var(--red)/var(--ok) lewat color-mix, jadi ia ikut tema apa pun. (2) tabelnya border-collapse dengan garis 1px nyaris tak terlihat -> sel merah yang berdampingan MENYATU jadi lempengan besar. Padahal di mockup selnya chip terpisah. Sekarang border-spacing 2px + sudut membulat: jendela panjang tetap terbaca sebagai deretan jam, bukan satu blok merah. Latar baris yang mengembang juga dilepas dari --accent-soft (terracotta) ke --surface, karena wash terracotta membuat hijau tampak keruh. */ #outHeatPanel table.ohjam{border-collapse:separate;border-spacing:2px} #outHeatPanel table.ohjam th{border:0;padding:2px 3px;font-size:12px;font-weight:750;color:var(--label-3,var(--mut))} #outHeatPanel table.ohjam td{border:0;border-radius:5px;padding:4px 3px;font-size:12px} #outHeatPanel table.ohjam td.jc{min-width:27px;text-align:center;font-variant-numeric:tabular-nums;background:var(--surface-2,rgba(255,255,255,.04));color:var(--label-3,var(--mut))} #outHeatPanel table.ohjam td.jc.bd{background:color-mix(in srgb,var(--red) 58%,transparent);color:#fff;font-weight:750} #outHeatPanel table.ohjam td.jc.iso{background:color-mix(in srgb,var(--red) 14%,transparent)} #outHeatPanel table.ohjam td.jc.off{background:transparent;opacity:.4} #outHeatPanel table.ohjam td.nmc{text-align:left;white-space:nowrap;padding:4px 9px;color:var(--label-2,var(--txt))} #outHeatPanel table.ohjam td.sig{text-align:right;padding:4px 7px;color:var(--label-2,var(--txt))} #outHeatPanel table.ohjam tr.tot td{font-weight:750;color:var(--txt)} /* ===== Outage Produk — HP: kartu per produk (Arah C, Derry 5 Jul 2026) + filter ramping + aman FAB ===== */ #outHeatPanel .oh-adv{display:flex} #ohAdvToggle{display:none} #outHeatPanel .oh-cards{display:none} .ohcards-note{font-size:12.5px;color:var(--mut);margin:0 0 11px;line-height:1.45} .ohpc{background:var(--panel2,#1c2029);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin:0 0 10px} .ohpc .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px} .ohpc .h b{font-size:14px;text-transform:capitalize;line-height:1.25} .ohpc .h .tot{font-size:12px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums} .ohstrip{display:flex;gap:3px;flex-wrap:wrap} .ohd{width:15px;height:15px;border-radius:4px} @media (hover:none){.ohd{width:22px;height:22px;border-radius:5px}.ohstrip{gap:4px}} .ohd[data-iso]{cursor:pointer} .ohd.off{background:var(--surface3,#2a3140);opacity:.4} .ohd.z{background:#e0524d} .ohpc .ft{margin-top:8px;font-size:12.5px;color:var(--mut);display:flex;gap:6px;align-items:center;flex-wrap:wrap} .ohpc .ft .r{color:#e0524d;font-weight:600} .ohpc .ft .ok{color:#3da56a;font-weight:600} @media(max-width:1024px){#outHeatPanel{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}} @media(max-width:640px){ #ohAdvToggle{display:inline-flex} #outHeatPanel .oh-adv{display:none} #outHeatPanel .oh-adv.on{display:flex} #outHeatPanel .oh-wide{display:none} #outHeatPanel .oh-cards{display:block} } /* ================= TEMA "KOMIK RISO" (pilihan Derry 21 Agu 2026) ========================= Cetak risograph: kertas krem, garis tebal hitam, bayangan keras, dan TIGA tinta — pink #FF48B0, biru #0078BF, kuning #FFC800. Tema ke-7, duduk di ATAS tema terang (data-theme="light" + data-skin="riso"), pola yang sama dengan La Cabra & Sakura. PELAJARAN YANG SUDAH MEMAKAN WAKTU: banyak komponen menulis warnanya lewat aturan ber-ID (mis. `#outStorePanel .osbar i{background:var(--red)}`). Aturan ber-ID MENGALAHKAN `html[data-skin="riso"] .osbar i`. Jadi setiap komponen ber-id yang mau diwarnai ulang WAJIB ditulis `html[data-skin="riso"] #idnya …`. Kalau ada warna yang "tidak mau berubah" di skin ini, itu sebabnya — bukan tokennya salah. Kontras terukur: teks di kertas 16,7:1 (AAA) · teks redup 8,0:1 (AAA) · teks di tombol pink 6,0:1 (AA) · biru riso di kertas 6,0:1 (AA). */ html[data-skin="riso"][data-theme]{ --bg:#FAF3E7;--surface:#FFFDF7;--surface-2:#FFFFFF;--surface-3:#F3EADA; --panel:#FFFDF7;--panel2:#FFFFFF; --label:#141414;--label-2:#4A4A4A;--label-3:#6E6E6E;--txt:#141414;--mut:#4A4A4A; --separator:#141414;--separator-strong:#141414;--line:#141414;--track:#F0E6D4; --accent:#FF48B0;--acc:#FF48B0;--accent-2:#0078BF;--acc2:#0078BF; --accent-soft:rgba(255,72,176,.14); --gold:#B98600;--yellow:#FFC800;--gold-soft:rgba(255,200,0,.22); --ok:#0E8A55;--green:#0E8A55;--ok-soft:rgba(14,138,85,.14); --red:#E23B2E;--info:#0060A0;--info-soft:rgba(0,96,160,.13); --on-accent:#141414;--accbtn-fg:#141414; --shadow:4px 4px 0 #141414; --r-card:14px;--r-btn:10px; } /* --- bentuk: garis tebal + bayangan keras, bukan bayangan lembut --- */ html[data-skin="riso"] .panel,html[data-skin="riso"] .statcard,html[data-skin="riso"] .card{ border:2.5px solid #141414;box-shadow:5px 5px 0 #141414} html[data-skin="riso"] .preset,html[data-skin="riso"] .btn2,html[data-skin="riso"] button.f, html[data-skin="riso"] select.f,html[data-skin="riso"] input.f,html[data-skin="riso"] textarea.f{ border:2px solid #141414;box-shadow:2px 2px 0 #141414;font-weight:700} html[data-skin="riso"] .preset.pri,html[data-skin="riso"] .btn2-primary{background:#FF48B0;background-image:none;color:#141414} /* background-image:none WAJIB — tombol primer memakai linear-gradient di aturan lain, dan shorthand `background` saja ternyata tidak selalu menumpasnya (terlihat sebagai tombol ungu-biru saat diuji 21 Agu). */ html[data-skin="riso"] .preset:active,html[data-skin="riso"] .btn2:active{transform:translate(2px,2px);box-shadow:none} html[data-skin="riso"] .pill,html[data-skin="riso"] .tag,html[data-skin="riso"] .badge2{ border:2px solid #141414;font-weight:800} html[data-skin="riso"] .pill.ok{background:rgba(14,138,85,.18)} html[data-skin="riso"] .pill.crit{background:rgba(226,59,46,.18)} html[data-skin="riso"] h1,html[data-skin="riso"] h2,html[data-skin="riso"] h3,html[data-skin="riso"] h4{ font-family:inherit;font-weight:800;letter-spacing:-.01em} html[data-skin="riso"] .secthead{font-weight:800} /* --- komponen ber-ID: WAJIB ditulis dengan id-nya, kalau tidak kalah spesifisitas --- */ html[data-skin="riso"] #outStorePanel .osrow{border-bottom:2px solid #141414} html[data-skin="riso"] #outStorePanel .osrow:last-child{border-bottom:none} html[data-skin="riso"] #outStorePanel .osno{border:2px solid #141414;border-radius:8px;background:#FFC800;color:#141414;font-weight:900} html[data-skin="riso"] #outStorePanel .osno.satu{background:#FF48B0;color:#141414} html[data-skin="riso"] #outStorePanel .osbar{border:2px solid #141414;background:#FFFDF7;height:12px} html[data-skin="riso"] #outStorePanel .osbar i{background:#0078BF} html[data-skin="riso"] #outStorePanel .ostrn{border:2px solid #141414;border-radius:8px;font-weight:900} html[data-skin="riso"] #outStorePanel .ostrn.up{background:#FF48B0;color:#141414} html[data-skin="riso"] #outStorePanel .ostrn.dn{background:#0E8A55;color:#FFFDF7} html[data-skin="riso"] #outStorePanel .ostrn.fl{background:#FFC800;color:#141414} html[data-skin="riso"] #outStorePanel .oskpi>div{border:2px solid #141414;border-radius:11px;box-shadow:3px 3px 0 #141414;background:#FFF} html[data-skin="riso"] #lbList .lbk .bar{border:2px solid #141414;background:#FFFDF7} html[data-skin="riso"] #lbList .lbk .bar i{background:#0078BF} html[data-skin="riso"] #lbList .lbrow.lbsel{background:rgba(255,72,176,.14);box-shadow:inset 3px 0 0 #FF48B0} /* Tema ini TANPA animasi — tak ada yang berputar, jadi tak menambah beban baterai. */ /* ===== Outage per store — papan peringkat (A, Derry 21 Agu 2026) ===== */ #outStorePanel .osrow{display:flex;align-items:center;gap:11px;padding:11px 12px;border-bottom:1px solid var(--line); cursor:pointer;min-height:56px;border-radius:10px} #outStorePanel .osrow:last-child{border-bottom:none} #outStorePanel .osrow:hover,#outStorePanel .osrow:focus-visible{background:var(--panel2);outline:none} #outStorePanel .osrow[aria-selected="true"]{background:rgba(217,124,96,.12);box-shadow:inset 3px 0 0 var(--acc)} #outStorePanel .osno{width:26px;height:26px;border-radius:8px;background:var(--panel2);display:grid;place-items:center; font-size:12px;font-weight:800;color:var(--mut);flex:0 0 auto} #outStorePanel .osno.satu{background:var(--red);color:var(--accbtn-fg,#fff)} #outStorePanel .osnm{flex:1 1 auto;min-width:0} #outStorePanel .osnm b{font-size:14px;display:block} #outStorePanel .osnm i{font-style:normal;font-size:12px;color:var(--mut);display:block;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #outStorePanel .osbar{width:110px;height:8px;border-radius:9px;background:var(--panel2);overflow:hidden;flex:0 0 auto} #outStorePanel .osbar i{display:block;height:100%;background:var(--red)} #outStorePanel .osv{width:82px;text-align:right;flex:0 0 auto} #outStorePanel .osv b{font-size:15px;font-variant-numeric:tabular-nums} #outStorePanel .osv i{font-style:normal;display:block;font-size:12px;color:var(--mut);margin-top:2px} #outStorePanel .ostrn{font-size:12px;font-weight:800;padding:4px 8px;border-radius:7px;flex:0 0 auto;min-width:52px;text-align:center} #outStorePanel .ostrn.up{background:rgba(232,131,106,.2);color:var(--red)} #outStorePanel .ostrn.dn{background:rgba(130,190,155,.2);color:var(--green)} #outStorePanel .ostrn.fl{background:var(--panel2);color:var(--mut)} #outStorePanel .oskpi{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 4px} #outStorePanel .oskpi>div{flex:1 1 150px;background:var(--panel2);border-radius:11px;padding:10px 13px} #outStorePanel .oskpi .v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums} #outStorePanel .oskpi .k{font-size:12px;color:var(--mut);margin-top:4px;line-height:1.35} @media(max-width:640px){ #outStorePanel .osbar{display:none} #outStorePanel .osnm i{white-space:normal} #outStorePanel .osrow{gap:9px;padding:12px 10px} } /* ===== BPDM Probation — tata letak 2 kolom (Arah B, pilihan Derry 5 Jul 2026): probation utama + event di rail samping ===== */ .bp2col{display:grid;grid-template-columns:1fr minmax(240px,290px);gap:16px;align-items:start} .bp2col>.bp-main{min-width:0} .bp2col>.bp-rail{min-width:0} .bp2col>.bp-rail>.panel{margin:0} .bp-rail:empty{display:none} .bp2col:has(>.bp-rail:empty){grid-template-columns:1fr} @media(max-width:900px){.bp2col{grid-template-columns:1fr}} /* ===== Karyawan 360 — dossier 2 kolom + ring KPI (B+C, pilihan Derry 5 Jul 2026) ===== */ .e360doss{display:grid;grid-template-columns:196px 1fr;gap:18px;align-items:start;margin-top:6px} .e360toc{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px} .e360toc a{font-size:12.5px;color:var(--mut);padding:7px 11px;border-radius:8px;border-left:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .e360toc a:hover{background:var(--accent-soft,rgba(232,145,46,.1));color:var(--txt)} .e360toc a.on{background:var(--accent-soft,rgba(232,145,46,.14));color:var(--acc);border-left-color:var(--acc);font-weight:700} .e360doc{min-width:0} .e360grp{margin-bottom:12px} .e360grp .secthead.e360grp-h{cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px} .e360grp .e360chev{margin-left:auto;transition:transform .18s var(--ease-out);color:var(--mut);font-size:12px} .e360grp.col .e360chev{transform:rotate(-90deg)} .e360grp.col .e360grp-b{display:none} .e360hero{display:flex;gap:16px;align-items:center;background:var(--panel,#171a20);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;flex-wrap:wrap} .e360ring{width:88px;height:88px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center} .e360ring .in{width:66px;height:66px;border-radius:50%;background:var(--panel,#171a20);display:flex;flex-direction:column;align-items:center;justify-content:center} .e360ring .in b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1} .e360ring .in span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:2px} .e360chips{display:flex;gap:9px;flex-wrap:wrap;flex:1;min-width:200px} .e360chip{background:var(--panel2,var(--surface,#20262f));border:1px solid var(--line);border-radius:11px;padding:8px 12px;min-width:76px} .e360chip .l{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)} .e360chip .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px} @media(max-width:820px){.e360doss{grid-template-columns:1fr}.e360toc{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}.e360toc a{border-left:0;border-bottom:2px solid transparent;flex:0 0 auto}.e360toc a.on{border-left:0;border-bottom-color:var(--acc)}} /* ===== Timeline Graphic Design — view Garis Waktu (Arah B tambahan, Derry 5 Jul 2026) ===== */ .gdtl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .gdtl-axis,.gdtl-row{display:grid;grid-template-columns:134px 1fr;gap:8px;align-items:center;min-width:540px} .gdtl-row{margin-top:5px;cursor:pointer;border-radius:7px;padding:1px 2px} .gdtl-row:hover{background:var(--panel2,#20262f)} .gdtl-row.dim{opacity:.5} .gdtl-lbl{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600} .gdtl-axhdr{font-family:'JetBrains Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:500} .gdtl-track{position:relative;height:24px} .gdtl-ticks{height:30px} .gdtl-tick{position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--mut);text-align:center;line-height:1.15} .gdtl-tick span{font-size:11px;opacity:.75} .gdtl-bar{position:absolute;top:3px;height:18px;border-radius:5px;display:flex;align-items:center;padding:0 7px;font-size:12px;font-weight:800;color:#0c0c0c;white-space:nowrap;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.3)} .gdtl-dl{position:absolute;top:4px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut);white-space:nowrap;transform:translateX(6px)} .gdtl-nowline{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--acc);z-index:2} /* label sumbu "hari ini": saat garis hari ini dekat tepi kanan, penanda tengah (-50%) membuat teksnya terpotong. Ditarik penuh ke kiri garis + sedikit jarak, jadi ia selalu utuh. */ .gdtl-todaylbl{position:absolute;top:20px;transform:translateX(calc(-100% - 4px));font-size:11px;color:var(--acc);font-family:'JetBrains Mono',monospace;white-space:nowrap} /* ===== Timeline Graphic Design — kartu tugas dirapikan (Derry 5 Jul 2026) ===== */ .gdc-card{cursor:pointer;border-radius:9px;padding:9px 10px;margin-top:6px;background:var(--panel2,#20262f);border:1px solid var(--line);} .gdc-card.dim{opacity:.5;filter:grayscale(.5)} .gdc-card.mine{box-shadow:0 0 0 1.5px var(--acc)} .gdc-h{display:flex;align-items:flex-start;gap:8px;justify-content:space-between} .gdc-t{font-weight:700;font-size:13px;line-height:1.3;flex:1;min-width:0} .gdc-hr{flex:none;display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .gdc-dl{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;padding:1px 7px;border-radius:5px;background:var(--card2,#2a3140);color:var(--mut)} .gdc-dl.hot{background:rgba(216,180,90,.2);color:var(--yellow,#d8b45a)} .gdc-dl.late{background:rgba(229,103,92,.2);color:var(--danger,#e5675c)} .gdc-late{font-size:12px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--danger,#e5675c);color:var(--accbtn-fg,#fff);display:inline-flex;align-items:center;gap:2px} .gdc-m{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap} .gdc-av{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#e8912e,#b5641f);color:#1c0b02;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-right:-5px;border:1.5px solid var(--panel2,#20262f)} .gdc-more{font-size:12px;color:var(--mut);font-weight:600;margin-left:6px} .gdc-cov{font-size:12px;font-weight:700;color:var(--danger,#e5675c);display:inline-flex;align-items:center;gap:2px} .gdc-not{font-size:12px;color:var(--mut)} .gdc-f{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:12px} .gdc-ck{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:var(--mut)} .gdc-sel{padding:2px 6px!important;font-size:12px;height:auto;width:auto;min-width:0} .gdc-b{padding:2px 8px;font-size:12px} /* ===== Komplain — Inbox + SLA (Arah A, pilihan Derry 5 Jul 2026) ===== */ .ctri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:2px 0 12px} @media(max-width:640px){.ctri{grid-template-columns:1fr}} .ctri .tt{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 13px} .ctri .tt.hot{border-color:rgba(229,103,92,.5);background:linear-gradient(160deg,rgba(229,103,92,.12),transparent 75%)} .ctri .tt .l{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em} .ctri .tt .v{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:3px} .ctri .tt.hot .v{color:var(--red)}.ctri .tt .v.y{color:var(--yellow)} .ctri .tt .s{font-size:12px;color:var(--mut);margin-top:2px} .cinbchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} .cinbchip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--mut);cursor:pointer} .cinbchip.on{background:var(--accent-soft,rgba(232,145,46,.14));border-color:rgba(232,145,46,.5);color:var(--acc)} .cinb{display:flex;align-items:center;gap:11px;padding:9px 10px;border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:10px;margin-bottom:7px;background:var(--panel2);cursor:pointer} .cinb:hover{border-color:var(--acc)} .cinb.new{border-left-color:var(--red)}.cinb.done{border-left-color:var(--ok2,#4bbf87);opacity:.72;cursor:default} .cinb-age{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;width:48px;text-align:center;flex:0 0 auto;color:var(--mut)} .cinb-age small{display:block;font-size:12px;font-weight:500;letter-spacing:.05em;opacity:.7} .cinb-age.r{color:var(--red)}.cinb-age.y{color:var(--yellow)}.cinb-age.g{color:var(--ok2,#4bbf87)} .cinb-info{flex:1;min-width:0} .cinb-t{font-weight:700;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cinb-m{font-size:12px;color:var(--mut);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .cinb-chip{font-size:12px;font-weight:700;padding:1px 7px;border-radius:999px} .cinb-act{flex:0 0 auto;font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;background:var(--accent-soft,rgba(232,145,46,.14));color:var(--acc);border:1px solid rgba(232,145,46,.4)} .compFold{margin-top:8px} .compFoldSum{cursor:pointer;list-style:none;padding:11px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px;color:var(--mut)} .compFoldSum::-webkit-details-marker{display:none} .compFold[open] .compFoldSum{border-radius:12px 12px 0 0;color:var(--txt)} /* #148: kalender Content Planner & Creative Production dibungkus .scrollx → terbaca & bisa digeser di HP (min-width) */ @media(max-width:640px){.scrollx>table.cctab{min-width:560px} /* #159 1d: di HP tombol "Buat Item" selebar baris — target sentuh utama tak boleh berbagi baris dengan empat tombol tampilan. */ .cprtop>.preset.pri{flex:1 1 100%;justify-content:center;min-height:44px}} /* Kepala halaman 3 tingkat (mockup Theola #163). Dibuat helper bersama sejak awal — permintaan eksplisit di issue: "kalau pola ini mau dipakai halaman lain, jadikan helper sekarang, jangan disalin per halaman". Warna dari token (--gold/--label/--label-2/--acc), bukan hex mockup. */ .pghead{margin:0 0 14px} .txnhl{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px} /* ===== CONTENT PLANNER — design system Theo (#171), dikerjakan 22 Sep 2026 ===== TOKEN TAHAP. Sisanya (bg/surface/label/separator/accent/font) sudah nilai MJDS dan TIDAK dideklarasikan ulang — tokens.json Theo diuji token per token dan cocok persis. Dua penyimpangan DISENGAJA, jangan diseragamkan balik ke token app: --st-produksi terang #7C5A22 (bukan --gold #8F6F38): gold hanya 3,49:1 di atas surface — lolos sebagai ikon, GAGAL sebagai teks 12px. --st-belum gelap #A79A8A (bukan --label-3 gelap #988C7D): --label-3 jatuh ke 3,99:1 di atas surface-3. Sisanya menunjuk token yang sudah ada supaya ikut berubah saat skin mengubahnya. */ :root{--st-belum:#A79A8A;--st-produksi:var(--gold);--st-review:var(--purple);--st-terjadwal:var(--info);--st-tayang:var(--ok)} [data-theme="light"]{--st-belum:var(--label-2);--st-produksi:#7C5A22} /* StatusPill: label + ikon, latar lembut dari warna tahap itu sendiri (color-mix, jadi satu nilai cukup untuk teks & latar). TIDAK PERNAH titik warna polos — termasuk di legenda. */ .cplpill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;font-weight:700;line-height:1.5; color:var(--pw,var(--st-belum));background:color-mix(in srgb,var(--pw,var(--st-belum)) 14%,transparent); border:1px solid color-mix(in srgb,var(--pw,var(--st-belum)) 34%,transparent);white-space:nowrap;vertical-align:middle} .cplpill svg{width:1em;height:1em;flex:0 0 auto} /* ReadinessMeter: 3 segmen, NETRAL (label-2 di atas track) — kesiapan dihitung sistem, bukan status. */ .cplmeter{display:inline-flex;gap:2px;align-items:center;vertical-align:middle;margin-right:5px} .cplseg{width:7px;height:4px;border-radius:2px;background:var(--track);display:inline-block} .cplseg.on{background:var(--label-2)} .cplsiap{display:inline-flex;align-items:center;gap:4px;color:var(--label-2);white-space:nowrap} /* chip netral: tipe/platform/PIC/brand dibedakan lewat TEKS, bukan warna (aturan pokok #1). */ /* ModeToggle / ChannelMark / tarik-lepas (#171 butir 5-6) */ .cpltitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;font-size:11px;line-height:1.25;word-break:break-word} /* Judul kartu kalender WAJIB terpotong 2 baris. Terukur sebelum ditambal: kartu selebar 76px, judul 'Release Beans "Aceh Avatara Carbonic Maceration"' tumbuh jadi 528px (≈25 baris) dan satu kartu mendorong seluruh baris minggu. Judul lengkap tetap ada di atribut title (tooltip). */ .cplmono{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:1px 4px;margin-right:3px;border-radius:4px;background:var(--surface-2,var(--panel2));color:var(--label-2);border:1px solid var(--separator);white-space:nowrap} .cplpic{font-size:9.5px;color:var(--label-3);white-space:nowrap} .cplrow2{display:flex;gap:3px;align-items:center;flex-wrap:wrap;margin-top:3px} /* DropIndicator: sel tujuan diberi garis & latar lembut — pakai warna AKSEN, bukan warna tahap, supaya tak terbaca sebagai "tahapnya berubah". */ .cpldrop{outline:2px dashed var(--acc);outline-offset:-3px;background:var(--accent-soft)!important} .cplchipcal{transition:transform .24s var(--ease-out,ease),opacity .24s ease} .cplchipcal.cpldragging{opacity:.4} .cplchipcal[draggable="true"]{cursor:grab} .cplchipcal[draggable="true"]:active{cursor:grabbing} @media(prefers-reduced-motion:reduce){.cplchipcal{transition:opacity .24s ease}} /* ---- pegangan geser kartu kalender Content Planner (#173) ---- Kartu diberi position:relative supaya pegangan bisa menempel di tepi kanannya. Hanya kartu ber-.cplhasgrip yang dilebarkan padding-nya — kalender Gabungan read-only tidak punya pegangan dan harus tetap serapat sekarang. */ .cplchipcal{position:relative} /* top/bottom -1px MENUTUPI garis tepi kartu: kotak mutlak diukur dari padding-box, jadi tanpa ini pegangan di kartu 44px hanya jadi 42px — dua piksel yang membuatnya gagal ambang 44px Theola. */ .cplhasgrip{padding-right:20px!important} .cplgrip{position:absolute;top:-1px;right:0;bottom:-1px;width:17px;min-height:0;padding:0;border:0;background:transparent;color:var(--txt);opacity:.42;cursor:grab;display:flex;align-items:center;justify-content:center;touch-action:none;border-radius:0 6px 6px 0} .cplgrip:hover{opacity:.95;background:color-mix(in srgb,var(--txt) 9%,transparent)} .cplgrip:focus-visible{opacity:1;outline:2px solid var(--acc);outline-offset:-2px} .cplgrip.on{opacity:1;background:var(--accent-soft)} .cplgrip:active{cursor:grabbing} .cplnet{border-left:0!important;background:var(--surface-2,var(--panel2));color:var(--label-2);border:1px solid var(--separator)} @media(max-width:640px){.cplpill{font-size:11px}.cplseg{width:6px}} /* Transaksi di layar sempit (Derry 20 Sep 2026 "mobile butuh rekonstruksi") — terukur di harness 390px: kotak cari utama menyusut jadi 157px karena berbagi baris dengan tombol Cari+Reset, dan 10 pintasan pecah menjadi 6 baris (±300px tinggi sebelum saringan pertama). Di HP: kotak cari mendapat barisnya sendiri, tombolnya mengisi sisa baris berikutnya, dan tiap deret pintasan jadi satu strip yang digeser (pola iOS) — bukan dinding tombol. Strip tetap bisa diakses papan ketik karena isinya tombol biasa. */ @media(max-width:640px){ /* kotak cari & deret pintasan digaya INLINE oleh perendernya (flex:1, flex-wrap:wrap), jadi aturan di sini WAJIB !important — melawan atribut style, bukan melawan spesifisitas. */ #txnPanel #txnQKw{flex:1 1 100%!important;min-width:100%!important} #txnPanel>div:first-of-type>button.preset{flex:1 1 calc(50% - 5px)} #txnPanel .txnbar{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px} #txnPanel .txnbar::-webkit-scrollbar{display:none} #txnPanel .txnbar>*{flex:0 0 auto} #txnPanel #txnRecent{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none} #txnPanel #txnRecent::-webkit-scrollbar{display:none} #txnPanel #txnRecent>*{flex:0 0 auto;max-width:78vw} /* Papan sinyal audit (fitur sesi lain, commit 77243d2): barisnya `.preset` selebar 377px di dalam kotak 312px, jadi nilai rupiahnya terpotong di luar layar 390px. Chip panjang boleh melipat; yang di dalam strip geser tetap satu baris. */ #txnPanel .preset{max-width:100%;flex-wrap:wrap;height:auto;white-space:normal;text-align:left} #txnPanel .txnbar .preset,#txnPanel #txnRecent .preset{max-width:none;flex-wrap:nowrap;white-space:nowrap} }.txntab tbody tr.txnrow{cursor:pointer}.txntab tbody tr.txnrow:hover{background:var(--accent-soft)}.txntab tr.txn-void td{opacity:.78} /* Panel hari SELALU di BAWAH kalender (permintaan Derry 15 Sep: "itu selasa 15 sept terlalu lebar, pindahin aja ke atas banget atau ke bawah"). Riwayat singkat supaya tak terulang: panel ini semula duduk di SAMPING selebar 320px, lalu perbaikan sebelumnya menurunkannya lewat @media(max-width:1200px){.cprkalwrap{display:block}}. Aturan itu TIDAK PERNAH BERLAKU: display:flex ditulis INLINE pada elemennya, dan inline selalu mengalahkan lembar gaya tanpa !important. Yang lolos justru pasangannya — #cprPanel{width:auto!important;max-width:none!important} — sehingga panel kehilangan patokan 320px dan MELEBAR mengikuti isinya, meremas 7 kolom kalender jadi ~80px. Jadi tata letak sekarang dipegang CSS; jangan kembalikan display ke atribut style. */ .cprkalwrap{display:block} .cprkalwrap #cprPanel{margin-top:12px} /* Isi panel bawah: daftar item mengalir, 'Tambah cepat' jadi kolom sendiri di layar lebar. */ .cprpanelisi{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start} .cprpanelkartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px} .cprcepat{border-left:1px solid var(--separator);padding-left:14px} @media(max-width:860px){.cprpanelisi{grid-template-columns:1fr} .cprcepat{border-left:0;border-top:1px solid var(--separator);padding:9px 0 0}} /* Lebar minimum grid kalender. Terukur 15 Sep di Chrome (judul 24 karakter, 1 tag + "+N"): kolom 85px -> SEMUA judul & tag terpotong; 105px -> judul masih terpotong; 125px -> bersih. 7 x 125 = 875. Di bawah itu kalender MENGGULIR mendatar di dalam .scrollx, bukan meremas kolomnya. .cctab umum tetap 560px karena dipakai kalender lain yang selnya tanpa kartu. */ .cprkalwrap .cctab{min-width:875px} /* sorot sasaran tarik-lepas (Creative Production) */ .cprdrop{outline:2px dashed var(--acc);outline-offset:-2px;background:var(--accent-soft)} /* === PEGANGAN UJUNG: memanjangkan / memendekkan jadwal produksi (Derry 21 Sep 2026, pilihan A+C) === A = tarik ujung kanan batang. C = ketuk pegangan lalu ketuk tanggal akhirnya (layar sentuh & papan ketik). Pegangan sengaja