/* ========================================================================== Kamar Kajian Market — Dashboard Member Identity Redesign v2 VISUAL ONLY. Tidak ada perubahan struktur DOM, ID, class, data-attribute, atau logic JS apa pun. File ini murni override tampilan CSS. Nilai warna/radius/shadow diambil PERSIS dari theme homepage yang sedang live (kamar-neo-minimal-palace-v47.css, bagian 4/11 dari kamar-bundle.css), supaya Dashboard Member terlihat 1:1 dengan identitas Homepage saat ini (bukan cuma "senada"). Dashboard.html saat ini masih memuat theme LAMA (kamar-luxury-atelier-v46.css / gold-on-black), sedangkan Homepage sudah pindah ke theme BARU (krem terang + kartu putih + aksen gelap-emas). Sudah diuji langsung di halaman live (preview injeksi, belum di-commit) dan seluruh kontras teks diperbaiki iteratif (heading, label, value, detail-grid, tombol, footer, header). Muat file ini SETELAH kamar-luxury-atelier-v46.css di dashboard.html. ========================================================================== */ :root{ --km-bg:#f5f1e8; --km-ink:#111417; --km-panel:#ffffff; --km-panel-2:#fbf7ee; --km-line:rgba(17,20,23,.12); --km-muted:#606973; --km-gold:#b88a3d; --km-gold-2:#d7b46d; --km-emerald:#0e5f54; --km-deep:#111820; --km-deep-2:#17252d; --km-shadow:0 20px 70px rgba(17,20,23,.10); --km-radius-xl:34px; --km-radius-lg:26px; --km-radius-md:18px; } html body{ background: radial-gradient(circle at 10% 0%, rgba(184,138,61,.18), transparent 34rem), radial-gradient(circle at 90% 14%, rgba(14,95,84,.12), transparent 30rem), linear-gradient(180deg,#f9f5ed 0%,#eee6d7 48%,#f6f1e8 100%) !important; color: var(--km-ink) !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } .page-glow{ display:none !important; } h1,h2,h3{ color: var(--km-ink) !important; } .split-card.kamar-title-card h1, .split-card.kamar-title-card h2, .split-card.kamar-title-card h3{ color:#fffaf0 !important; } #memberStatusBox h1,#memberStatusBox h2,#memberStatusBox h3{ color:#fff !important; } .site-footer h1,.site-footer h2,.site-footer h3{ color:#fffaf0 !important; } .split-card:not(.kamar-title-card) p, .split-card:not(.kamar-title-card) small, .split-sidebar p, .split-sidebar small, .split-sidebar summary, .admin-sidebar p, .admin-sidebar small, .admin-sidebar summary, #memberWelcomeText, #memberReferralLine{ color:var(--km-muted) !important; } .split-sidebar summary:hover,.admin-sidebar summary:hover{ color:#101418 !important; } .split-main h1{ letter-spacing:-.055em !important; } .page-note{ color: var(--km-muted) !important; } .split-card.kamar-title-card .page-note{ color:#d9d1c2 !important; } .site-header{ position:sticky !important; top:16px !important; width:min(calc(100% - 32px),1180px) !important; margin:16px auto 0 !important; padding:12px 14px !important; border:1px solid rgba(17,20,23,.13) !important; border-radius:28px !important; background:rgba(255,255,255,.86) !important; backdrop-filter:blur(18px) !important; box-shadow:0 18px 50px rgba(17,20,23,.10) !important; } .brand{ color: var(--km-ink) !important; font-weight:900 !important; letter-spacing:-.03em !important; } .brand img{ border:1px solid rgba(184,138,61,.35) !important; box-shadow:0 10px 24px rgba(17,20,23,.12) !important; } .site-header a{ color:#37414a !important; } .site-header a:hover{ color:#101418 !important; } .nav-links a{ background:transparent !important; border:1px solid transparent !important; border-radius:999px !important; } .nav-links a:hover{ background:#f2eadc !important; border-color:rgba(184,138,61,.25) !important; } .header-cta,.header-member-cta{ background:linear-gradient(135deg,#0e5f54,#17483f 58%,#b88a3d) !important; color:#fffaf0 !important; border:1px solid rgba(255,255,255,.45) !important; border-radius:999px !important; box-shadow:0 14px 32px rgba(14,95,84,.22) !important; font-weight:950 !important; } .kamar-global-btn.kamar-global-logout{ color:#37414a !important; background:transparent !important; border-color:transparent !important; } .kamar-global-btn.kamar-global-logout:hover{ color:#101418 !important; } .split-sidebar,.admin-sidebar{ border-radius: var(--km-radius-lg) !important; background: rgba(255,255,255,.72) !important; border:1px solid var(--km-line) !important; box-shadow: var(--km-shadow) !important; } .split-sidebar .brand-small,.admin-sidebar .brand-small{ color: var(--km-gold) !important; font-weight:950 !important; letter-spacing:.13em !important; } .split-sidebar a,.admin-sidebar a{ color: var(--km-muted) !important; border-radius:14px !important; } .split-sidebar a.active,.split-sidebar a:hover,.admin-sidebar a.active,.admin-sidebar a:hover{ background:#f2eadc !important; border-color:rgba(184,138,61,.25) !important; color:#101418 !important; } .split-card{ border-radius: var(--km-radius-xl) !important; background: rgba(255,255,255,.72) !important; border:1px solid var(--km-line) !important; box-shadow: var(--km-shadow) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .split-card.kamar-title-card{ background: linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025)), radial-gradient(circle at 0% 10%,rgba(184,138,61,.22),transparent 34rem), linear-gradient(135deg,#111820 0%,#17252d 58%,#23333a 100%) !important; border:1px solid rgba(255,255,255,.10) !important; color:#fff !important; } #memberStatusBox{ border-radius:30px !important; background: linear-gradient(135deg,#111820,#1d2a31) !important; color:#fff !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 18px 50px rgba(17,20,23,.14) !important; } #memberStatusBox strong{ color:#f4d694 !important; } .mini-label{ background:#efe3ca !important; color:#7a561e !important; border:1px solid rgba(184,138,61,.22) !important; border-radius:999px !important; font-weight:950 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .btn{ border-radius:999px !important; font-weight:950 !important; transition:transform .2s ease, box-shadow .2s ease; } .btn:hover{ transform: translateY(-2px); } .btn.primary{ background:linear-gradient(135deg,#c99d51,#f1d893) !important; color:#15120b !important; border:1px solid rgba(17,20,23,.12) !important; box-shadow:0 16px 40px rgba(184,138,61,.24) !important; } .btn.secondary{ background:#fff !important; color:#192027 !important; border:1px solid rgba(17,20,23,.12) !important; } .split-card.kamar-title-card .btn.secondary{ background:rgba(255,255,255,.08) !important; color:#fff6e8 !important; border-color:rgba(255,255,255,.18) !important; } .setting-card{ background:#fff !important; border:1px solid var(--km-line) !important; box-shadow:0 10px 30px rgba(17,20,23,.06) !important; border-radius:18px !important; } .setting-card span{ color:var(--km-gold) !important; font-weight:900 !important; letter-spacing:.08em !important; } .setting-card strong{ color:var(--km-ink) !important; } .kamar-content-grid > *{ background:#fff !important; border:1px solid var(--km-line) !important; border-radius:28px !important; box-shadow:0 14px 42px rgba(17,20,23,.07) !important; transition: transform .2s ease, border-color .2s ease, background .2s ease; } .kamar-content-grid > *:hover{ transform: translateY(-4px); border-color: rgba(184,138,61,.42) !important; background: linear-gradient(180deg,#fff,#fbf4e7) !important; } .site-footer{ border-radius:28px !important; background:#111820 !important; color:#dcd3c2 !important; border:1px solid rgba(255,255,255,.10) !important; } /* ========================================================================== PERLUASAN v2.1 — komponen tambahan yang dipakai di halaman member lain (member-activate*.html, member-renewal.html, member-profile.html, member-materials/study/private/indicator/robot.html). Prinsip sama: CSS-only, tidak menyentuh HTML/JS. Nilai warna diselaraskan dengan token di atas supaya tetap 1:1 dengan identitas Homepage. ========================================================================== */ label.field,.field{ color:var(--km-ink) !important; } input:not([type="checkbox"]):not([type="radio"]), select, textarea{ background:#fff !important; border:1px solid var(--km-line) !important; color:var(--km-ink) !important; border-radius:16px !important; } input::placeholder,textarea::placeholder{ color:#9aa0a6 !important; } .status-pill,.status-pill-soft{ background:#efe3ca !important; color:#7a561e !important; border:1px solid rgba(184,138,61,.22) !important; } .status-pill.on,.status-pill.ok{ color:#0e5f54 !important; background:rgba(14,95,84,.10) !important; border-color:rgba(14,95,84,.25) !important; } .status-pill.warn{ color:#8a5a12 !important; background:rgba(217,164,54,.16) !important; border-color:rgba(184,138,61,.3) !important; } .status-pill.off,.status-pill.bad{ color:var(--km-muted) !important; background:#f1ede2 !important; } .page-note{ border-color:rgba(14,95,84,.22) !important; background:rgba(14,95,84,.06) !important; color:#0e5f54 !important; } .expired-note{ border:1px solid rgba(196,60,60,.28) !important; background:rgba(196,60,60,.07) !important; color:#8a2b2b !important; } .payment-note-box,.activation-note-box{ border:1px solid var(--km-line) !important; background:#fbf7ee !important; color:var(--km-muted) !important; } .payment-note-box strong{ color:var(--km-ink) !important; } .facility-guide-box{ border:1px solid rgba(14,95,84,.22) !important; background:rgba(14,95,84,.06) !important; color:#0e5f54 !important; } .facility-locked-box{ border:1px solid rgba(196,60,60,.24) !important; background:rgba(196,60,60,.06) !important; color:#8a2b2b !important; } .activate-coming-soon{ border:1px solid rgba(184,138,61,.28) !important; background:#efe3ca !important; color:#7a561e !important; } .btn.disabled-payment,.btn.disabled-soft{ opacity:.45 !important; } .member-payment-card, .facility-content-card, .action-card,.stat-card,.member-card,.todo-item,.video-card{ background:#fff !important; border:1px solid var(--km-line) !important; box-shadow:0 14px 42px rgba(17,20,23,.07) !important; } .member-payment-card h3,.facility-content-card h3, .action-card h3,.member-card h3{ color:var(--km-ink) !important; } .member-payment-card p,.facility-content-card p, .action-card p,.study-note{ color:var(--km-muted) !important; } .member-payment-card:hover,.action-card:hover,.member-card:hover,.todo-item:hover{ border-color:rgba(184,138,61,.42) !important; background:linear-gradient(180deg,#fff,#fbf4e7) !important; } .stat-card strong{ color:var(--km-ink) !important; } .stat-card span,.member-card span,.todo-item span{ color:var(--km-gold) !important; } .stat-card small,.member-card small,.todo-item small{ color:var(--km-muted) !important; } .profile-detail-row{ border-bottom:1px solid var(--km-line) !important; } .profile-detail-row>span{ color:var(--km-muted) !important; } .profile-detail-row>strong{ color:var(--km-ink) !important; } .member-mini-row strong{ color:var(--km-ink) !important; } .eyebrow{ background:#efe3ca !important; color:#7a561e !important; border:1px solid rgba(184,138,61,.22) !important; border-radius:999px !important; padding:4px 12px !important; } .split-card.kamar-title-card .eyebrow{ background:rgba(255,255,255,.10) !important; color:#f4d694 !important; border-color:rgba(255,255,255,.18) !important; } .referral-current-code{ background:#fbf7ee !important; border:1px solid var(--km-line) !important; color:var(--km-ink) !important; border-radius:14px !important; padding:12px 14px !important; font-weight:900 !important; } .referral-status-note{ color:var(--km-muted) !important; } .referral-status-note.success{ color:#0e5f54 !important; } .referral-status-note.error{ color:#8a2b2b !important; } .kamar-empty,.admin-empty-state{ color:var(--km-muted) !important; } @media (max-width:980px){ .site-header{ border-radius:24px !important; } } @media (max-width:640px){ .split-card{ border-radius:22px !important; padding:20px !important; } } /* ========================================================================== PERLUASAN v2.2 (2026-08-03) — komponen KHUSUS ADMIN. Ditemukan lewat audit langsung di admin.html, admin-members.html, admin-activation.html, admin-settings.html, admin-payment.html: banyak komponen admin-only (sidebar dinamis dari kamar-admin-online-29f.js, tabel data member/affiliate, chip status, hero card ringkasan, action center "To Do Admin") masih memakai warna tema lama (gold-on-black) yang jadi nyaris tak terbaca begitu ditumpuk di atas kartu terang v2. Prinsip tetap sama: CSS-only override, tidak menyentuh HTML/JS/struktur apa pun. ========================================================================== */ /* Label section sidebar dinamis ("Utama", "Akun") dari rebuildSidebar() */ .admin-menu-section{ color: var(--km-gold) !important; opacity:1 !important; text-transform:uppercase !important; font-weight:1000 !important; letter-spacing:0.16em !important; font-size:11px !important; } .split-sidebar summary::after,.admin-sidebar summary::after{ color: var(--km-muted) !important; } /* Hero/ringkasan card varian (.split-card.hero, .activation-hero, dst) — disamakan dengan .kamar-title-card supaya konsisten dengan title card member: gradient gelap + teks putih, bukan nempel di atas kartu terang. */ .split-card[class*="hero"]{ background: linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025)), radial-gradient(circle at 0% 10%,rgba(184,138,61,.22),transparent 34rem), linear-gradient(135deg,#111820 0%,#17252d 58%,#23333a 100%) !important; border:1px solid rgba(255,255,255,.10) !important; color:#fff !important; } .split-card[class*="hero"] h1,.split-card[class*="hero"] h2,.split-card[class*="hero"] h3{ color:#fffaf0 !important; } .split-card[class*="hero"] p{ color:#d9d1c2 !important; } /* Chip ringkasan admin (mis. "Member: 6", "Supabase: Terhubung", label todo/action-center) — dipakai di kartu terang MAUPUN kartu hero gelap, jadi dibuat pill solid supaya kontras aman di kedua konteks. */ .chip{ background:#efe3ca !important; color:#7a561e !important; border:1px solid rgba(184,138,61,.3) !important; border-radius:999px !important; } .chip.ok{ background:#0e5f54 !important; color:#eafff5 !important; border-color:#0e5f54 !important; } .chip.warn{ background:#b8862c !important; color:#fff8e8 !important; border-color:#b8862c !important; } .chip.off,.chip.error{ background:#8a2b2b !important; color:#ffeaea !important; border-color:#8a2b2b !important; } /* Chip kode member (mis. "KM-00004") di tabel data member */ .kamar-chip{ background:#fbf7ee !important; color:var(--km-ink) !important; border:1px solid rgba(184,138,61,.28) !important; border-radius:999px !important; } .kamar-chip.on{ background:rgba(14,95,84,.10) !important; color:#0e5f54 !important; border-color:rgba(14,95,84,.25) !important; } .kamar-chip.warn{ background:rgba(217,164,54,.16) !important; color:#8a5a12 !important; border-color:rgba(184,138,61,.3) !important; } .kamar-chip.off{ background:#f1ede2 !important; color:var(--km-muted) !important; border-color:var(--km-line) !important; } /* Baris tabel data admin — dua konvensi nama class dipakai di halaman berbeda: .admin-row (admin-members.html dkk, dari kamar-admin-online-29f.js) dan .member-list .row (admin-activation.html). */ .admin-row,.member-list .row{ border-color: var(--km-line) !important; } .admin-row.header,.member-list .row.header{ color: var(--km-gold) !important; } .admin-row strong,.member-list strong{ color: var(--km-ink) !important; } .admin-row small,.admin-row-hide,.member-list small{ color: var(--km-muted) !important; } /* Action Center / "To Do Admin" (renderActionCenter() di admin.html) */ .todo-row strong{ color: var(--km-ink) !important; } .todo-row small{ color: var(--km-muted) !important; } /* TO DO review modal (Tinjau popup) */ .todo-review-overlay{ position:fixed; inset:0; z-index:9999; background:rgba(17,20,15,.55); display:flex; align-items:center; justify-content:center; padding:20px; } .todo-review-modal{ background:#fff; border:1px solid var(--km-line); border-radius:20px; box-shadow:0 30px 80px rgba(20,16,8,.35); width:100%; max-width:520px; max-height:86vh; overflow:auto; display:flex; flex-direction:column; } .todo-review-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--km-line); } .todo-review-head strong{ font-size:15px; color:var(--km-ink); } .todo-review-x{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--km-muted); padding:2px 6px; border-radius:8px; } .todo-review-x:hover{ background:rgba(17,20,15,.06); color:var(--km-ink); } .todo-review-body{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; } .todo-review-title{ font-weight:800; font-size:14px; color:var(--km-ink); } .todo-review-desc{ font-size:13px; color:var(--km-muted); line-height:1.6; background:rgba(17,20,15,.03); border:1px solid var(--km-line); border-radius:12px; padding:10px 12px; } .todo-review-member{ font-size:12.5px; color:var(--km-muted); } .todo-review-linkrow{ display:flex; flex-wrap:wrap; gap:8px; } .todo-review-notelabel{ font-size:11.5px; font-weight:800; color:var(--km-muted); letter-spacing:.02em; margin-top:4px; } .todo-review-note{ width:100%; min-height:90px; resize:vertical; font-family:inherit; font-size:13px; border:1px solid var(--km-line); border-radius:12px; padding:10px 12px; color:var(--km-ink); background:#fff; } .todo-review-note:focus{ outline:2px solid rgba(184,138,61,.4); outline-offset:1px; } .todo-review-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--km-line); } .todo-review-foot .btn.secondary{ color:#a9660f !important; border-color:rgba(201,157,81,.5) !important; background:rgba(240,183,77,.08) !important; } /* Detail-box (grid label/value di panel detail member, mis. admin-activation.html) */ .admin-detail-box{ background:#fff !important; border:1px solid var(--km-line) !important; border-radius:18px !important; } .admin-detail-box span{ color:var(--km-gold) !important; font-weight:900 !important; } .admin-detail-box strong{ color:var(--km-ink) !important; } .admin-empty,.admin-note-soft{ color:var(--km-muted) !important; } .admin-empty{ border-color:var(--km-line) !important; background:#fbf7ee !important; } .admin-toolbar-grid label{ color:var(--km-ink) !important; } /* ========================================================================== PERLUASAN v2.3 (2026-08-03) — ditemukan saat verifikasi end-to-end toggle fasilitas di admin-activation.html: panel "DETAIL MEMBER" (.info-box) dan "Toggle Fasilitas" (.toggle-grid) memakai class BERBEDA dari yang ditebak di v2.2 (.admin-detail-box), jadi belum ter-cover — teks masih pakai warna tema lama (krem/mint pucat) yang nyaris tak terbaca di atas kartu terang. ========================================================================== */ .info-box{ background:#fff !important; border:1px solid var(--km-line) !important; border-radius:18px !important; } .info-box span{ color:var(--km-gold) !important; font-weight:900 !important; letter-spacing:.08em !important; } .info-box strong{ color:var(--km-ink) !important; } .toggle-grid strong{ color:var(--km-ink) !important; } .toggle-grid small{ color:var(--km-muted) !important; } .btn.danger{ color:#8a2b2b !important; background:rgba(196,60,60,.10) !important; border:1px solid rgba(196,60,60,.28) !important; } .note{ color:#0e5f54 !important; background:rgba(14,95,84,.06) !important; border:1px solid rgba(14,95,84,.22) !important; } /* ========================================================================== PERLUASAN v2.4 (2026-08-04) — memperbaiki "specificity war" dengan kamar-luxury-atelier-v46.css pada halaman admin yang masih memuat v46 (body class="kamar-v46-atelier"). Selector v46 (mis. `body.kamar-v46-atelier`, `.kamar-v46-atelier h1/h2/h3`, `.kamar-v46-atelier .hero`) di-scope ke class `.kamar-v46-atelier`, sehingga secara CSS-specificity MENGALAHKAN override tag polos v2 (`html body`, `h1,h2,h3`) meski v2 dimuat belakangan di . Ditemukan di admin-tools.html: heading section non-hero (mis. "Upload File Baru") tampil raksasa (clamp 34–58px, v46) dan berwarna krem pucat di atas kartu terang v2 — nyaris tak terbaca. Body juga tetap gelap alih-alih tema terang. Section ini menambah selector yang sama-sama/lebih tinggi specificity-nya dari `.kamar-v46-atelier` supaya v2 menang secara pasti, tanpa menyentuh HTML/JS di halaman manapun. ========================================================================== */ body.kamar-v46-atelier{ background: radial-gradient(circle at 10% 0%, rgba(184,138,61,.18), transparent 34rem), radial-gradient(circle at 90% 14%, rgba(14,95,84,.12), transparent 30rem), linear-gradient(180deg,#f9f5ed 0%,#eee6d7 48%,#f6f1e8 100%) !important; } /* Heading non-hero/non-title-card (yang masih dipakai bare tanpa wrapper khusus) — dipaksa kembali ke ukuran & warna proporsional kartu terang. */ .split-card:not([class*="hero"]):not(.kamar-title-card) h1, .split-card:not([class*="hero"]):not(.kamar-title-card) h2, .split-card:not([class*="hero"]):not(.kamar-title-card) h3{ color: var(--km-ink) !important; font-weight: 900 !important; letter-spacing: -.02em !important; max-width: none !important; text-wrap: initial !important; } .split-card:not([class*="hero"]):not(.kamar-title-card) h2{ font-size: clamp(20px,2.4vw,28px) !important; line-height: 1.2 !important; } .split-card:not([class*="hero"]):not(.kamar-title-card) h3{ font-size: clamp(17px,2vw,22px) !important; line-height: 1.25 !important; } /* Paragraf non-hero/non-title-card — v46 memaksa font-weight:650 dan font-size:16px lewat `.kamar-v46-atelier p`; tetap pertahankan warna muted tapi jangan biarkan ukuran/leading dari v46 membuat card jadi tidak proporsional pada layout sempit (mis. label form, catatan kecil). */ .split-card:not([class*="hero"]):not(.kamar-title-card) p{ color: var(--km-muted) !important; } /* PERLUASAN v2.5 (auto-fix): pastikan warna teks bare (email, daftar fasilitas, dll) di semua halaman admin ber-body.kamar-v46-atelier ikut jadi gelap, bukan cuma background-nya. */ body.kamar-v46-atelier{ color: var(--km-ink) !important; } /* PERLUASAN v2.6 (auto-fix): kamar-luxury-atelier-v46.css punya rule catch-all ".kamar-v46-atelier .btn, .kamar-v46-atelier button, .kamar-v46-atelier input[type=submit]" yang memaksa background nyaris transparan + teks krem nyaris putih pada SEMUA tombol yang bukan .secondary/.danger (mis. Aktifkan Gratis, Refresh, Cari Member, Kelola) - teks jadi nyaris tak terlihat di atas kartu terang v2. Fix ini mengembalikan gold-gradient + teks hitam (desain asli) dengan specificity yang pasti menang atas v46. */ .kamar-v46-atelier .btn:not(.secondary):not(.danger), .kamar-v46-atelier button:not(.secondary):not(.danger){ background: linear-gradient(135deg,#f4df90,#c69a39) !important; color: #111 !important; } /* PERLUASAN v2.7 (auto-fix): kartu hero "Aktivasi Akun & Fasilitas" (.activation-hero) terlihat tidak simetris - kolom kiri (judul besar+paragraf+badge+tombol) jauh lebih tinggi dari kolom kanan (.hero-panel, cuma 3 baris label/value), dan align-items:center pada grid bikin panel kanan mengambang di tengah dengan banyak spasi kosong di atas/bawahnya. Fix ini murni CSS: bikin kedua kolom stretch penuh & isi panel kanan tersebar rata, tanpa mengubah HTML/struktur. */ .activation-hero{ align-items: stretch !important; } .activation-hero .hero-panel{ height: 100% !important; box-sizing: border-box !important; justify-content: space-between !important; } .activation-hero .hero-copy{ display: flex !important; flex-direction: column !important; justify-content: center !important; height: 100% !important; } /* ========================================================================== PERLUASAN v2.8 (2026-08-04) - halaman admin-affiliate-overview/list/payment/ commission-rate/reward.html TIDAK memakai vocabulary class yang sama dengan halaman admin lain (.split-card/.split-sidebar/.admin-row/.status-pill), melainkan markup bespoke sendiri (.admin-shell/.admin-sidebar/.card/.pill/ .aff-row/.pay-row/.reward-row/.rate-card/.stat-card/.submenu-card) yang didesain untuk background gelap (#060606) dan TIDAK dikenali rule v2 mana pun di atas. Karena `html body{background:...!important}` di v2 tetap memaksa background halaman jadi terang (rule itu tidak di-scope ke body class apa pun), sidebar & card ini jadi nyaris tanpa batas (border/bg transparan didesain utk kontras di atas gelap, sekarang di atas terang) dan teks jadi nyaris tak terbaca (warna krem pucat didesain utk background gelap). Section ini menyamakan seluruh komponen tsb dengan tema kartu terang yang sudah dipakai di semua halaman admin lain. CSS-only, semua diberi scope .admin-shell supaya tidak menyentuh halaman lain yang mungkin kebetulan memakai nama class generik seperti .card atau .pill. ========================================================================== */ .admin-shell .admin-sidebar{ background: rgba(255,255,255,.72) !important; border:1px solid var(--km-line) !important; box-shadow: var(--km-shadow) !important; } .admin-shell .admin-sidebar .brand-small{ color: var(--km-gold) !important; } .admin-shell .admin-sidebar .admin-menu-section{ color: var(--km-gold) !important; } .admin-shell .admin-sidebar a{ color: var(--km-muted) !important; } .admin-shell .admin-sidebar a:hover, .admin-shell .admin-sidebar a.active{ background:#f2eadc !important; color:#101418 !important; } .admin-shell .card{ background: rgba(255,255,255,.72) !important; border:1px solid var(--km-line) !important; box-shadow: var(--km-shadow) !important; } .admin-shell .card.hero{ background: linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025)), radial-gradient(circle at 0% 10%,rgba(184,138,61,.22),transparent 34rem), linear-gradient(135deg,#111820 0%,#17252d 58%,#23333a 100%) !important; border:1px solid rgba(255,255,255,.10) !important; color:#fff !important; } .admin-shell .card.hero h1{ color:#fffaf0 !important; } .admin-shell .card.hero p{ color:#d9d1c2 !important; } .admin-shell .module-chip{ background:#efe3ca !important; color:#7a561e !important; border:1px solid rgba(184,138,61,.3) !important; } .admin-shell .card.hero .module-chip{ background:rgba(255,255,255,.10) !important; color:#f4d694 !important; border-color:rgba(255,255,255,.18) !important; } .admin-shell .muted,.admin-shell p.muted{ color: var(--km-muted) !important; } .admin-shell .submenu-card{ background:#fff !important; border:1px solid var(--km-line) !important; } .admin-shell .submenu-card:hover{ background:linear-gradient(180deg,#fff,#fbf4e7) !important; border-color:rgba(184,138,61,.42) !important; } .admin-shell .submenu-card.active{ background:rgba(184,138,61,.08) !important; } .admin-shell .submenu-card h3{ color: var(--km-gold) !important; } .admin-shell .submenu-card strong{ color: var(--km-ink) !important; } .admin-shell .submenu-card p{ color: var(--km-muted) !important; } .admin-shell .stat-card{ background:#fff !important; border:1px solid var(--km-line) !important; border-left:4px solid var(--km-gold) !important; } .admin-shell .stat-card span{ color: var(--km-gold) !important; } .admin-shell .stat-card strong{ color: var(--km-ink) !important; } .admin-shell .stat-card small{ color: var(--km-muted) !important; } .admin-shell .aff-row:not(.head), .admin-shell .pay-row:not(.head), .admin-shell .reward-row:not(.head), .admin-shell .ref-row:not(.head){ background:#fff !important; border:1px solid var(--km-line) !important; } .admin-shell .aff-row.head, .admin-shell .pay-row.head, .admin-shell .reward-row.head, .admin-shell .ref-row.head{ color: var(--km-gold) !important; } .admin-shell strong{ color: var(--km-ink) !important; } .admin-shell small,.admin-shell .cell-label{ color: var(--km-muted) !important; } .admin-shell .rate-card{ background:#fff !important; border:1px solid var(--km-line) !important; } .admin-shell .rate-card .mini-label{ color: var(--km-gold) !important; } .admin-shell .rate-card h3{ color: var(--km-ink) !important; } .admin-shell .toggle-row-mini{ background:#fbf7ee !important; border:1px solid var(--km-line) !important; } .admin-shell .toggle-row-mini span{ color: var(--km-muted) !important; } .admin-shell .panel{ background:#fff !important; border:1px solid var(--km-line) !important; } .admin-shell .panel h3{ color: var(--km-gold) !important; } .admin-shell .info-item{ background:#fbf7ee !important; border:1px solid var(--km-line) !important; } .admin-shell .info-item span{ color: var(--km-gold) !important; } .admin-shell .info-item strong{ color: var(--km-ink) !important; } .admin-shell .pill{ background:#efe3ca !important; color:#7a561e !important; border:1px solid rgba(184,138,61,.22) !important; } .admin-shell .pill.ok{ color:#0e5f54 !important; background:rgba(14,95,84,.10) !important; border-color:rgba(14,95,84,.25) !important; } .admin-shell .pill.warn{ color:#8a5a12 !important; background:rgba(217,164,54,.16) !important; border-color:rgba(184,138,61,.3) !important; } .admin-shell .pill.bad{ color:#8a2b2b !important; background:rgba(196,60,60,.10) !important; border-color:rgba(196,60,60,.28) !important; } .admin-shell .pill.info{ color:#1f5fa8 !important; background:rgba(31,95,168,.08) !important; border-color:rgba(31,95,168,.25) !important; } .admin-shell .pill.off{ color: var(--km-muted) !important; background:#f1ede2 !important; } .admin-shell input,.admin-shell select,.admin-shell textarea{ background:#fff !important; color: var(--km-ink) !important; border:1px solid var(--km-line) !important; } .admin-shell input::placeholder,.admin-shell textarea::placeholder{ color:#9aa0a6 !important; } .admin-shell .btn{ background: linear-gradient(135deg,#f4df90,#c69a39) !important; color:#111 !important; } .admin-shell .btn.secondary{ background:#fff !important; color: var(--km-ink) !important; border:1px solid var(--km-line) !important; } .admin-shell .btn.danger{ color:#8a2b2b !important; background:rgba(196,60,60,.10) !important; border:1px solid rgba(196,60,60,.28) !important; } .admin-shell .btn.good{ color:#0e5f54 !important; background:rgba(14,95,84,.10) !important; border:1px solid rgba(14,95,84,.25) !important; } .admin-shell .empty{ background:#fbf7ee !important; border:1px solid var(--km-line) !important; color: var(--km-muted) !important; } /* ========================================================================== PERLUASAN v2.9 (2026-08-04) - audit lanjutan ke seluruh halaman admin-*.html (bukan cuma affiliate) menemukan pola bug YANG SAMA pada beberapa komponen lain yang dipakai luas tapi belum dikenali rule v2 manapun di atas: 1) .toggle-row - dipakai di admin-maintenance/page-control/dashboard-control/ payment/payment-products/links/settings/members untuk switch ON/OFF. Didesain untuk background gelap (background transparan tipis, teks span krem #f5f0e6), jadi nyaris tak terbaca begitu body dipaksa terang oleh v2. Halaman admin-maintenance.html PALING TERDAMPAK karena seluruh isi utamanya adalah daftar 12 .toggle-row. 2) .row / .row-list .row / .matrix-row - dipakai sbg baris list di admin-banner/video/materials/tools/license-requests/connection-check (dan .member-list .row di admin-activation/admin-license-requests). Background transparan tipis (rgba(255,255,255,.025), didesain utk background gelap) belum ter-cover background-nya (v2.2 cuma set border-color utk .member-list .row), jadi baris nyaris tanpa batas. 3) .online-card / .manager-help - komponen kartu produk khusus admin-payment-products.html, sama sekali belum dikenali v2. 4) .pill - dipakai admin.html/admin-connection-check.html/admin-data-check .html sbg status badge, terpisah dari .chip/.status-pill yang sudah di-cover. 5) admin-data-check.html pakai vocabulary class SENDIRI (.layout/.sidebar/ .card/.stat/.table .row), bukan .split-shell/.split-sidebar/.split-card standar, jadi tidak ke-cover rule manapun. Di-scope ke .layout (unik di halaman ini) supaya tidak menyentuh halaman lain yang mungkin kebetulan pakai nama class generik seperti .card atau .sidebar. Semua fix di bawah CSS-only, tidak menyentuh HTML/JS/struktur apa pun. ========================================================================== */ .toggle-row{ background:#fff !important; border:1px solid var(--km-line) !important; } .toggle-row > span:first-child, .toggle-row span{ color: var(--km-ink) !important; } .toggle-row small{ color: var(--km-muted) !important; } .toggle-row:has(input[type="checkbox"]:checked){ background:rgba(14,95,84,.06) !important; border-color:rgba(14,95,84,.28) !important; } .row-list .row:not(.header), .member-list .row:not(.header), .matrix-row:not(.header){ background:#fff !important; border:1px solid var(--km-line) !important; } .row-list .row.header, .matrix-row.header{ color: var(--km-gold) !important; } .row-list .row strong, .matrix-row strong{ color: var(--km-ink) !important; } .row-list .row small, .matrix-row small{ color: var(--km-muted) !important; } .online-card{ background:#fff !important; border:1px solid var(--km-line) !important; } .online-card.new-product{ background:#fbf7ee !important; border-color:rgba(184,138,61,.35) !important; } .online-card .card-toggle-header strong{ color: var(--km-ink) !important; } .online-card .card-toggle-price{ color: var(--km-gold) !important; } .manager-help{ background:rgba(14,95,84,.06) !important; color:#0e5f54 !important; border:1px solid rgba(14,95,84,.22) !important; } .manager-help strong{ color:#0e5f54 !important; } .manager-help ol,.manager-help li{ color:#0e5f54 !important; } .pill{ background:#efe3ca !important; color:#7a561e !important; border:1px solid rgba(184,138,61,.3) !important; } .pill.ok,.status.ok{ color:#0e5f54 !important; background:rgba(14,95,84,.10) !important; border-color:rgba(14,95,84,.25) !important; } .pill.warn,.status.warn{ color:#8a5a12 !important; background:rgba(217,164,54,.16) !important; border-color:rgba(184,138,61,.3) !important; } .pill.bad,.status.bad{ color:#8a2b2b !important; background:rgba(196,60,60,.10) !important; border-color:rgba(196,60,60,.28) !important; } .pill.info{ color:#1f5fa8 !important; background:rgba(31,95,168,.08) !important; border-color:rgba(31,95,168,.25) !important; } .pill.off,.status.off{ color: var(--km-muted) !important; background:#f1ede2 !important; } .priority-row{ background:#fff !important; border:1px solid var(--km-line) !important; } .priority-block{ background:#fbf7ee !important; border:1px solid var(--km-line) !important; } .priority-head strong{ color: var(--km-ink) !important; } .priority-body span{ color: var(--km-gold) !important; } .priority-body small,.priority-head small{ color: var(--km-muted) !important; } .table-box{ background:#fff !important; border:1px solid var(--km-line) !important; } .table-box table th{ color: var(--km-gold) !important; } .table-box table td{ color: var(--km-ink) !important; } .layout .card{ background: rgba(255,255,255,.72) !important; border:1px solid var(--km-line) !important; box-shadow: var(--km-shadow) !important; } .layout .card h1,.layout .card h2,.layout .card h3{ color: var(--km-ink) !important; } .layout .card p{ color: var(--km-muted) !important; } .layout .sidebar{ background: rgba(255,255,255,.72) !important; border:1px solid var(--km-line) !important; box-shadow: var(--km-shadow) !important; } .layout .sidebar .label{ color: var(--km-gold) !important; } .layout .sidebar a{ color: var(--km-muted) !important; } .layout .sidebar a:hover,.layout .sidebar a.active{ background:#f2eadc !important; color:#101418 !important; } .layout .stat{ background:#fff !important; border:1px solid var(--km-line) !important; } .layout .stat strong{ color: var(--km-ink) !important; } .layout .stat span{ color: var(--km-gold) !important; } .layout .stat small{ color: var(--km-muted) !important; } .layout .table .row:not(.header){ background:#fff !important; border:1px solid var(--km-line) !important; } .layout .table .row.header{ color: var(--km-gold) !important; } .layout .table .row strong{ color: var(--km-ink) !important; } .layout .table .row small{ color: var(--km-muted) !important; } .layout .result-box{ background:#fbf7ee !important; color: var(--km-ink) !important; border:1px dashed var(--km-line) !important; } .layout .note{ border:1px solid rgba(184,138,61,.3) !important; background:#efe3ca !important; color:#7a561e !important; } .layout .oknote{ border:1px solid rgba(14,95,84,.22) !important; background:rgba(14,95,84,.06) !important; color:#0e5f54 !important; } /* ========================================================================== PERLUASAN v2.10 (2026-08-04) - admin-activation.html TIDAK memuat file ini sama sekali (link kamar-dashboard-identity-v2.css belum ada di head-nya), jadi label 'Status Akun' / 'Fasilitas' di toolbar Cari Member tampil nyaris tak terlihat (warna krem pucat #e8ddc7 dari style lama, di atas card yang seharusnya terang). Link sudah ditambahkan langsung di admin-activation.html, dan .field di atas (v2.1) sudah menutup kontrasnya. Bagian ini KHUSUS untuk merapikan .activation-hero yang tampil terlalu tinggi/panjang ke bawah - judul 'Aktivasi Akun & Fasilitas' pecah jadi 4 baris karena font terlalu besar untuk lebar kolomnya, bikin card jadi sangat panjang & terlihat kasar. ========================================================================== */ .split-card.hero.activation-hero{ padding:26px 30px !important; min-height:0 !important; } .activation-hero h1{ font-size:clamp(24px,2.4vw,36px) !important; line-height:1.08 !important; letter-spacing:-.03em !important; } .activation-hero .mini-label{ margin-bottom:8px !important; } .activation-hero .hero-copy p{ font-size:14px !important; margin:8px 0 0 !important; line-height:1.55 !important; } .activation-hero .hero-badges{ margin-top:12px !important; gap:8px !important; } .activation-hero .hero-actions{ margin-top:14px !important; gap:8px !important; } .activation-hero .hero-panel{ padding:14px !important; gap:8px !important; } .activation-hero .hero-panel-row{ padding-bottom:8px !important; } .activation-hero .hero-panel-row span{ font-size:12px !important; } .activation-hero .hero-panel-row strong{ font-size:14px !important; } @media(min-width:981px){ .split-card.hero.activation-hero{ grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr) !important; align-items:center !important; } } /* ========================================================================== PERLUASAN v2.11 (2026-08-04) - opsi default dropdown (mis. 'Semua Member', 'Semua Fasilitas' di admin-activation.html) tetap tampil pudar walau label field & warna select box sendiri sudah diperbaiki (v2.1). Banyak halaman admin punya style bawaan 'select option{color:#fff4db}' (krem, didesain utk tema gelap v46) yang TIDAK ketutup oleh rule v2.1 'select{color:...}' karena itu cuma menyasar elemen