/* ═══════════════════════════════════════════════════════════ THEME LIGHT — aktif saat Mode gelap = tampilan asli (tidak diubah sama sekali). File ini hanya menimpa variabel warna + beberapa warna yang ditulis langsung (hardcoded) di tiap halaman. ═══════════════════════════════════════════════════════════ */ html[data-theme="light"]{ color-scheme:light; /* Latar netral kebiruan (bukan wash cyan), kartu putih solid, teks slate. Cyan #22D3EE dipakai untuk isian/tombol/garis; teks cyan memakai teal tua. */ --bg:#EEF3F8; --bg2:#E5ECF4; --surface:#FFFFFF; --surface2:#F3F6FA; --surface3:#E9EEF5; --border:#DDE5EE; --border2:#C8D4E2; --text:#0F172A; --muted:#516275; --muted2:#6B7C93; --accent:#22D3EE; --accent2:#DC3D43; --accent3:#B7791F; --accent4:#6D5BD0; --accent5:#2563EB; --acc2:#DC3D43; --acc3:#B7791F; --acc4:#6D5BD0; --acc5:#2563EB; --gold:#B7791F; --g:#22D3EE; --g2:#06B6D4; --gg:rgba(6,182,212,.10); --gb:rgba(6,182,212,.30); --ga1:#22D3EE; --ga2:#06B6D4; --gb1:#B7791F; --gb2:#8F5E12; --gc1:#2563EB; --gc2:#1D4ED8; --shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05); --shadow-md:0 2px 4px rgba(15,23,42,.04), 0 14px 34px rgba(15,23,42,.09); --shadow-lg:0 4px 8px rgba(15,23,42,.05), 0 30px 70px rgba(15,23,42,.14); /* token admin/dashboard */ --bg-raised:#FFFFFF; --bg-surface:#F3F6FA; --bg-hover:#E9EEF5; --border-md:#C8D4E2; --border-hi:#A9BACD; --cyan:#22D3EE; --violet:#6D5BD0; --amber:#B7791F; } html[data-theme="light"] body{ background:var(--bg); color:var(--text); } html[data-theme="light"] body::before{ opacity:.18; } /* hero index: overlay gelap → overlay terang supaya teks tetap terbaca */ html[data-theme="light"] .bg-photo{ filter:saturate(1.12) contrast(1.05) brightness(1.02); } html[data-theme="light"] .bg-photo-overlay{ background-image: linear-gradient(120deg, rgba(238,243,248,.74) 0%, rgba(238,243,248,.5) 38%, rgba(238,243,248,.2) 66%, rgba(238,243,248,.04) 100%), linear-gradient(0deg, rgba(238,243,248,.82) 0%, rgba(238,243,248,0) 26%, rgba(238,243,248,0) 74%, rgba(238,243,248,.4) 100%), radial-gradient(ellipse 60% 50% at 78% 55%, rgba(34,211,238,.12), transparent 70%); } html[data-theme="light"] .bg-photo-vignette{ box-shadow:inset 0 0 130px 24px rgba(238,243,248,.5); } /* teks hero diberi lingkar cahaya tipis supaya tetap jelas di atas foto */ html[data-theme="light"] .hero-title, html[data-theme="light"] .hero-sub{ text-shadow:0 1px 16px rgba(240,245,250,.85), 0 0 3px rgba(240,245,250,.6); } html[data-theme="light"] .hero-badge{ border-color:rgba(8,145,178,.4); background:rgba(34,211,238,.16); } html[data-theme="light"] .cta-secondary{ background:rgba(255,255,255,.55); border-color:rgba(15,23,42,.22); } html[data-theme="light"] .cta-secondary:hover{ background:rgba(34,211,238,.18); border-color:#22D3EE; } /* navbar / kartu / panel yang memakai kaca gelap */ html[data-theme="light"] nav, html[data-theme="light"] .navbar, html[data-theme="light"] .topbar{ background:rgba(255,255,255,.84); border-color:var(--border); backdrop-filter:blur(16px); } html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{ color:var(--text); background:#fff; border-color:var(--border2); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder{ color:var(--muted2); } html[data-theme="light"] ::selection{ background:rgba(34,211,238,.25); } html[data-theme="light"] ::-webkit-scrollbar-track{ background:#E5ECF4; } html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#B4C3D4; } /* ── TOMBOL TOGGLE (dibuat otomatis oleh theme.js) ── */ #theme-toggle{ position:fixed; right:18px; bottom:18px; z-index:100000; width:44px; height:44px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(20,28,48,.92); color:#FFD93D; border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .2s, background .25s, color .25s; -webkit-tap-highlight-color:transparent; } #theme-toggle:hover{ transform:scale(1.08) rotate(12deg); } #theme-toggle svg{ width:20px; height:20px; display:block; } #theme-toggle .ic-moon{ display:none; } html[data-theme="light"] #theme-toggle{ background:#fff; color:#334155; border-color:rgba(15,23,42,.14); box-shadow:0 8px 24px rgba(15,23,42,.15); } html[data-theme="light"] #theme-toggle .ic-sun{ display:none; } html[data-theme="light"] #theme-toggle .ic-moon{ display:block; } body, .navbar, nav{ transition:background-color .25s, color .25s; } @media print{ #theme-toggle{ display:none; } } /* ── teks gradien yang berakhir di putih → ganti ujungnya ke warna gelap ── */ html[data-theme="light"] .logo-text{ background-image:linear-gradient(90deg,#0891B2,#0F172A); } html[data-theme="light"] .hero-title .line2{ background-image:linear-gradient(90deg,#0891B2 0%,#0E7490 40%,#6D5BD0 80%,#0F172A 100%); } html[data-theme="light"] .madura-seal-title{ background-image:linear-gradient(90deg,#B7860B,#8A6200); } /* ── halaman auth (login / register / lupa & reset password) ── */ html[data-theme="light"] .login-wrap{ box-shadow:0 30px 80px rgba(15,23,42,.14), 0 0 0 1px rgba(34,211,238,.08); } html[data-theme="light"] .panel-left{ background:rgba(255,255,255,.62); } html[data-theme="light"] .panel-right{ background:rgba(255,255,255,.94); } html[data-theme="light"] .panel-title .grad{ background-image:linear-gradient(90deg,#0891B2 0%,#0E7490 50%,#0F172A 100%); } html[data-theme="light"] .form-logo-text{ background-image:linear-gradient(90deg,#0891B2,#0F172A); } html[data-theme="light"] .field input, html[data-theme="light"] .field select, html[data-theme="light"] .field textarea{ background:#fff; color:var(--text); border-color:var(--border2); } html[data-theme="light"] .field input:focus{ background:#fff; box-shadow:0 0 0 3px rgba(34,211,238,.15); } html[data-theme="light"] .field input::placeholder{ color:var(--muted2); } /* ═══════════════════════════════════════════════════════════ v2 — KEJELASAN CYAN DI LATAR TERANG (dibuat otomatis) Cyan #22D3EE tetap dipakai untuk tombol/isian/garis/glow, tapi TEKS ber-cyan di atas latar terang dipakai versi lebih tua (#0891B2 / #0E7490) supaya tetap terbaca. Panel gelap (dropdown, modal, sertifikat) tidak disentuh. ═══════════════════════════════════════════════════════════ */ html[data-theme="light"] .acc-high{ color:#0E7490; } html[data-theme="light"] .act-edit{ color:#0E7490; } html[data-theme="light"] .act-edit-sm{ color:#0E7490; } html[data-theme="light"] .agenda-time.kelas{ color:#0E7490; } html[data-theme="light"] .alert-ok{ color:#0E7490; } html[data-theme="light"] .alert-success{ color:#0E7490; } html[data-theme="light"] .alert.ok{ color:#0E7490; } html[data-theme="light"] .alert.ok .alert-txt{ color:#0E7490; } html[data-theme="light"] .alert.success{ color:#0E7490; } html[data-theme="light"] .alert.success .alert-title{ color:#0E7490; } html[data-theme="light"] .av-btn:hover{ color:#0E7490; } html[data-theme="light"] .back-btn:hover{ color:#0E7490; } html[data-theme="light"] .back-link:hover{ color:#0E7490; } html[data-theme="light"] .badge-mudah{ color:#0E7490; } html[data-theme="light"] .breadcrumb a:hover{ color:#0E7490; } html[data-theme="light"] .btn-add{ color:#0E7490; } html[data-theme="light"] .btn-cancel:hover{ color:#0E7490; } html[data-theme="light"] .btn-course{ color:#0E7490; } html[data-theme="light"] .btn-cta-sec:hover{ color:#0E7490; } html[data-theme="light"] .btn-dok.view:hover{ color:#0E7490; } html[data-theme="light"] .btn-ghost:hover{ color:#0E7490; } html[data-theme="light"] .btn-jawab{ color:#0E7490; } html[data-theme="light"] .btn-lanjut{ color:#0E7490; } html[data-theme="light"] .btn-login:hover{ color:#0E7490; } html[data-theme="light"] .btn-mod-materi{ color:#0E7490; } html[data-theme="light"] .btn-new-quiz{ color:#0E7490; } html[data-theme="light"] .btn-nilai{ color:#0E7490; } html[data-theme="light"] .btn-play{ color:#0E7490; } html[data-theme="light"] .btn-register{ color:#0E7490; } html[data-theme="light"] .btn-result.lb{ color:#0E7490; } html[data-theme="light"] .btn-row-icon:hover{ color:#0E7490; } html[data-theme="light"] .btn-submit{ color:#0E7490; } html[data-theme="light"] .btn-toggle-pw:hover{ color:#0E7490; } html[data-theme="light"] .btn-view{ color:#0E7490; } html[data-theme="light"] .card-eyebrow{ color:#0E7490; } html[data-theme="light"] .card-foot a{ color:#0E7490; } html[data-theme="light"] .card-number{ color:#0E7490; } html[data-theme="light"] .card-seq{ color:#0E7490; } html[data-theme="light"] .chat-hstatus{ color:#0E7490; } html[data-theme="light"] .chip-num{ color:#0E7490; } html[data-theme="light"] .course-progress-meta strong{ color:#0E7490; } html[data-theme="light"] .course-row-idx{ color:#0E7490; } html[data-theme="light"] .course-row-num{ color:#0E7490; } html[data-theme="light"] .crumb-bar a:hover{ color:#0E7490; } html[data-theme="light"] .current-file-link{ color:#0E7490; } html[data-theme="light"] .dash-welcome-eyebrow{ color:#0E7490; } html[data-theme="light"] .dist-btn.cyan{ color:#0E7490; } html[data-theme="light"] .dok-count-badge{ color:#0E7490; } html[data-theme="light"] .dok-tag.dok-pertemuan{ color:#0E7490; } html[data-theme="light"] .enroll-badge{ color:#0E7490; } html[data-theme="light"] .eyebrow{ color:#0E7490; } html[data-theme="light"] .faq-cat-label{ color:#0E7490; } html[data-theme="light"] .faq-item.open .faq-arrow{ color:#0E7490; } html[data-theme="light"] .feedback-box.correct{ color:#0E7490; } html[data-theme="light"] .file-chip{ color:#0E7490; } html[data-theme="light"] .filter-tab.active{ color:#0E7490; } html[data-theme="light"] .filter-tab:hover{ color:#0E7490; } html[data-theme="light"] .footer-brand{ color:#0E7490; } html[data-theme="light"] .footer-hint strong{ color:#0E7490; } html[data-theme="light"] .footer-links a:hover{ color:#0E7490; } html[data-theme="light"] .forgot-link:hover{ color:#0E7490; } html[data-theme="light"] .form-eyebrow{ color:#0E7490; } html[data-theme="light"] .form-footer a{ color:#0E7490; } html[data-theme="light"] .form-sub a{ color:#0E7490; } html[data-theme="light"] .foto-upload-btn{ color:#0E7490; } html[data-theme="light"] .grade-A{ color:#0E7490; } html[data-theme="light"] .grade-tab[data-tab="A"].active{ color:#0E7490; } html[data-theme="light"] .grade-tab[data-tab="all"].active{ color:#0E7490; } html[data-theme="light"] .hero-back:hover{ color:#0E7490; } html[data-theme="light"] .hero-badge{ color:#0E7490; } html[data-theme="light"] .hero-chip-val{ color:#0E7490; } html[data-theme="light"] .hero-eyebrow{ color:#0E7490; } html[data-theme="light"] .icon-btn:hover{ color:#0E7490; } html[data-theme="light"] .info-box-green .info-box-label{ color:#0E7490; } html[data-theme="light"] .info-row-val.accent{ color:#0E7490; } html[data-theme="light"] .input-wrap:focus-within .input-icon{ color:#0E7490; } html[data-theme="light"] .insight-note.ok strong{ color:#0E7490; } html[data-theme="light"] .jwb-badge{ color:#0E7490; } html[data-theme="light"] .jwb-radio input:checked + label{ color:#0E7490; } html[data-theme="light"] .kas-val{ color:#0E7490; } html[data-theme="light"] .kat-count{ color:#0E7490; } html[data-theme="light"] .kc-badge{ color:#0E7490; } html[data-theme="light"] .kmc-count{ color:#0E7490; } html[data-theme="light"] .ksc-a{ color:#0E7490; } html[data-theme="light"] .lb-sum-val{ color:#0E7490; } html[data-theme="light"] .lc-value-tag{ color:#0E7490; } html[data-theme="light"] .list-count-badge{ color:#0E7490; } html[data-theme="light"] .live-badge{ color:#0E7490; } html[data-theme="light"] .log-pts{ color:#0E7490; } html[data-theme="light"] .lvl-pemula{ color:#0E7490; } html[data-theme="light"] .materi-pill{ color:#0E7490; } html[data-theme="light"] .mc-konten a{ color:#0E7490; } html[data-theme="light"] .mc-konten code{ color:#0E7490; } html[data-theme="light"] .mc-status-badge.done{ color:#0E7490; } html[data-theme="light"] .mh-eyebrow{ color:#0E7490; } html[data-theme="light"] .mh-progress-txt strong{ color:#0E7490; } html[data-theme="light"] .mock-btn{ color:#0E7490; } html[data-theme="light"] .mock-num{ color:#0E7490; } html[data-theme="light"] .modul-pill{ color:#0E7490; } html[data-theme="light"] .module-num{ color:#0E7490; } html[data-theme="light"] .mrb-rank{ color:#0E7490; } html[data-theme="light"] .mrb-score{ color:#0E7490; } html[data-theme="light"] .ms-count{ color:#0E7490; } html[data-theme="light"] .ms-item.is-active .ms-check{ color:#0E7490; } html[data-theme="light"] .ms-item.is-active .ms-title{ color:#0E7490; } html[data-theme="light"] .nav-back{ color:#0E7490; } html[data-theme="light"] .nav-badge{ color:#0E7490; } html[data-theme="light"] .nav-dot.correct{ color:#0E7490; } html[data-theme="light"] .nav-dot.current{ color:#0E7490; } html[data-theme="light"] .nav-item.active{ color:#0E7490; } html[data-theme="light"] .nilai-badge{ color:#0E7490; } html[data-theme="light"] .nilai-pill{ color:#0E7490; } html[data-theme="light"] .opsi-btn:hover:not(:disabled) .opsi-key{ color:#0E7490; } html[data-theme="light"] .p2 .podium-base{ color:#0E7490; } html[data-theme="light"] .p2 .podium-score{ color:#0E7490; } html[data-theme="light"] .page-badge{ color:#0E7490; } html[data-theme="light"] .page-eyebrow{ color:#0E7490; } html[data-theme="light"] .page-label{ color:#0E7490; } html[data-theme="light"] .panel-badge{ color:#0E7490; } html[data-theme="light"] .pc-arrow{ color:#0E7490; } html[data-theme="light"] .ph-eye{ color:#0E7490; } html[data-theme="light"] .photo-badge{ color:#0E7490; } html[data-theme="light"] .pod-2 .pod-block{ color:#0E7490; } html[data-theme="light"] .pod-2 .pod-score{ color:#0E7490; } html[data-theme="light"] .prev-vid-indicator{ color:#0E7490; } html[data-theme="light"] .preview-badge{ color:#0E7490; } html[data-theme="light"] .progress-pct{ color:#0E7490; } html[data-theme="light"] .pstat-num{ color:#0E7490; } html[data-theme="light"] .pw-eye:hover{ color:#0E7490; } html[data-theme="light"] .pw-rule.ok{ color:#0E7490; } html[data-theme="light"] .pw-toggle:hover{ color:#0E7490; } html[data-theme="light"] .qcard-badge{ color:#0E7490; } html[data-theme="light"] .qcard-course{ color:#0E7490; } html[data-theme="light"] .ql-icon--green{ color:#0E7490; } html[data-theme="light"] .qlink:hover{ color:#0E7490; } html[data-theme="light"] .quick-btn{ color:#0E7490; } html[data-theme="light"] .rank-filter.active{ color:#0E7490; } html[data-theme="light"] .result-skor.A{ color:#0E7490; } html[data-theme="light"] .ri-score.a{ color:#0E7490; } html[data-theme="light"] .role-option input:checked + .role-card .role-name{ color:#0E7490; } html[data-theme="light"] .role-user{ color:#0E7490; } html[data-theme="light"] .sc-num{ color:#0E7490; } html[data-theme="light"] .score-a{ color:#0E7490; } html[data-theme="light"] .sec-lbl{ color:#0E7490; } html[data-theme="light"] .section-eye{ color:#0E7490; } html[data-theme="light"] .section-eyebrow{ color:#0E7490; } html[data-theme="light"] .section-label{ color:#0E7490; } html[data-theme="light"] .select-display{ color:#0E7490; } html[data-theme="light"] .settings-hero-eye{ color:#0E7490; } html[data-theme="light"] .side-progress-meta strong{ color:#0E7490; } html[data-theme="light"] .sidebar-link.active{ color:#0E7490; } html[data-theme="light"] .skor-a{ color:#0E7490; } html[data-theme="light"] .sn-item.active{ color:#0E7490; } html[data-theme="light"] .soal-num{ color:#0E7490; } html[data-theme="light"] .st-selesai{ color:#0E7490; } html[data-theme="light"] .stat-num{ color:#0E7490; } html[data-theme="light"] .stat-val.green{ color:#0E7490; } html[data-theme="light"] .status-upcoming{ color:#0E7490; } html[data-theme="light"] .step-label.done{ color:#0E7490; } html[data-theme="light"] .step-num{ color:#0E7490; } html[data-theme="light"] .step-num.done{ color:#0E7490; } html[data-theme="light"] .sub-filter.active{ color:#0E7490; } html[data-theme="light"] .sub-filter:hover{ color:#0E7490; } html[data-theme="light"] .submit-badge{ color:#0E7490; } html[data-theme="light"] .tab-btn.active{ color:#0E7490; } html[data-theme="light"] .tab-btn.active.t-course{ color:#0E7490; } html[data-theme="light"] .thread-status-tag.answered{ color:#0E7490; } html[data-theme="light"] .ticker-item .sep{ color:#0E7490; } html[data-theme="light"] .timer-pill{ color:#0E7490; } html[data-theme="light"] .tipe-btn.selected{ color:#0E7490; } html[data-theme="light"] .tipe-pertemuan{ color:#0E7490; } html[data-theme="light"] .tips-head{ color:#0E7490; } html[data-theme="light"] .tips-ic{ color:#0E7490; } html[data-theme="light"] .title-preview .preview-label-small{ color:#0E7490; } html[data-theme="light"] .tk-count-badge{ color:#0E7490; } html[data-theme="light"] .ucapan-eyebrow{ color:#0E7490; } html[data-theme="light"] .user-role{ color:#0E7490; } html[data-theme="light"] .video-status.valid{ color:#0E7490; } html[data-theme="light"] .wd.match{ color:#0E7490; } html[data-theme="light"] .xplog-badge{ color:#0E7490; } html[data-theme="light"] footer a:hover{ color:#0E7490; } html[data-theme="light"] .brand-logo{ background:linear-gradient(90deg, #0891B2, #0F172A); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .dash-title .grad{ background:linear-gradient(110deg,#0891B2 0%,#0E7490 35%,#6D5BD0 70%,#0F172A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .form-logo-text{ background:linear-gradient(90deg,#0891B2,#0F172A); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .hero h1 .grad{ background:linear-gradient(110deg,#0891B2,#6D5BD0 70%,#0F172A); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .hero-num{ background:linear-gradient(110deg,#0891B2 0%,#0F172A 55%,var(--accent4) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .hero-title .line2{ background:linear-gradient(90deg,#0891B2 0%,#0E8FB5 40%,#6D5BD0 80%,#0F172A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .logo-text{ background:linear-gradient(90deg,#0891B2,#0F172A); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .page-title .grad{ background:linear-gradient(110deg,#0891B2 0%,#0E7490 35%,#6D5BD0 70%,#0F172A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .page-title .t2{ background:linear-gradient(90deg,#0891B2 0%,#0E8FB5 50%,#0F172A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .page-title .word-grad{ background:linear-gradient(90deg,#0891B2,#0E7490,var(--gb1),var(--gc1),#0891B2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .page-title span{ background:linear-gradient(90deg,#0891B2,#0E8FB5,#7b6fff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .panel-title .grad{ background:linear-gradient(90deg,#0891B2 0%,#0E8FB5 50%,#0F172A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme="light"] .stat-mini-val{ background:linear-gradient(120deg,#0891B2,#6D5BD0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* ── perbaikan lanjutan: teks gradien jangan diberi text-shadow (bikin pucat), dan beri "halo" terang tipis di belakang blok teks hero ── */ html[data-theme="light"] .hero-title .line2, html[data-theme="light"] .logo-text, html[data-theme="light"] .form-logo-text, html[data-theme="light"] .panel-title .grad{ text-shadow:none; } html[data-theme="light"] .hero-title .line2{ filter:drop-shadow(0 1px 8px rgba(240,245,250,.9)); } html[data-theme="light"] .hero-inner::before{ content:""; position:absolute; inset:-30px -60px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 62% 60% at 50% 50%, rgba(240,245,250,.62), rgba(240,245,250,0) 72%); } /* ═══════════════════════════════════════════════════════════ v3 — MODE TERANG DIRAPIKAN Masalah sebelumnya: sidebar, dropdown, modal & beberapa kartu punya warna gelap yang ditulis langsung di tiap halaman, jadi di mode terang jadi abu-biru keruh dan teksnya (yang gelap) tidak terbaca. Palet: latar #EEF3F8 · kartu putih · teks #0F172A · teal #0E7490 untuk teks aksen · cyan #22D3EE untuk isian/garis · violet #6D5BD0 sekunder. ═══════════════════════════════════════════════════════════ */ /* latar: bersih, hanya semburat cyan tipis di pojok kiri atas */ html[data-theme="light"] body{ background-color:var(--bg); background-image:radial-gradient(900px 420px at 8% -8%, rgba(34,211,238,.10), transparent 62%), radial-gradient(700px 400px at 100% 100%, rgba(109,91,208,.05), transparent 60%); background-attachment:fixed; } html[data-theme="light"] .mesh-orb{ opacity:.35; } /* ── SIDEBAR admin ── */ html[data-theme="light"] .sidebar{ background:#FFFFFF; backdrop-filter:none; border-right:1px solid var(--border); box-shadow:8px 0 30px -14px rgba(15,23,42,.10); } html[data-theme="light"] .sidebar::after{ background:linear-gradient(90deg,transparent,rgba(6,182,212,.55),transparent); } html[data-theme="light"] .sidebar-brand{ background:linear-gradient(180deg,#F1FAFC,#FFFFFF); border-bottom-color:var(--border); } html[data-theme="light"] .brand-sub{ color:var(--muted2); } html[data-theme="light"] .admin-pill{ background:rgba(220,61,67,.08); border-color:rgba(220,61,67,.28); color:#C53030; } html[data-theme="light"] .admin-pill::before{ background:#DC3D43; } html[data-theme="light"] .nav-section-label{ color:var(--muted2); } html[data-theme="light"] .nav-item{ color:#465A71; } html[data-theme="light"] .nav-item:hover{ background:#F1F6FA; color:var(--text); border-color:transparent; } html[data-theme="light"] .nav-item.active{ background:#E2F6FA; border-color:#B9E6F0; color:#0E7490; } html[data-theme="light"] .nav-item.active::before{ background:#06B6D4; } html[data-theme="light"] .nav-icon{ background:#F1F5F9; } html[data-theme="light"] .nav-item.active .nav-icon{ background:#FFFFFF; box-shadow:0 1px 4px rgba(8,145,178,.22); } html[data-theme="light"] .nav-item.danger{ color:#C53030; } html[data-theme="light"] .nav-item.danger:hover{ background:rgba(220,61,67,.08); color:#B42323; } html[data-theme="light"] .sidebar-user{ background:#F7FAFC; border-top-color:var(--border); } html[data-theme="light"] .user-name{ color:var(--text); } html[data-theme="light"] .user-role{ color:#0E7490; } /* ── TOPBAR / NAVBAR ── */ html[data-theme="light"] .topbar::after{ background:linear-gradient(90deg,transparent,rgba(6,182,212,.35),transparent); } html[data-theme="light"] nav, html[data-theme="light"] .navbar{ background:rgba(255,255,255,.86); backdrop-filter:blur(16px); border-color:var(--border); } html[data-theme="light"] .tb-stat, html[data-theme="light"] .back-btn{ background:#fff; border-color:var(--border); } /* ── KARTU: yang backgroundnya putih-transparan (hilang di latar terang) ── */ html[data-theme="light"] :is(.form-card,.dok-card,.madura-card,.soal-card,.tugas-item, .uc-target-card,.kas-item,.stat-mini,.rs-item,.hero-stats,.preview-card-inner){ background:#FFFFFF; border-color:var(--border); box-shadow:var(--shadow-sm); } /* ── PANEL MELAYANG yang tadinya gelap: dropdown, modal, toast ── */ html[data-theme="light"] :is(.ud-menu,.nav-dropdown,.notif-dropdown,.modal-box,.dmodal-box, .toast,.toast-done,.uc-box,.preview-box,.quiz-modal-box){ background:#FFFFFF; color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-lg); } html[data-theme="light"] .ud-header{ background:linear-gradient(135deg,#EAF8FB,#F4F1FD); border-bottom-color:var(--border); } html[data-theme="light"] .ud-sep{ background:var(--border); } html[data-theme="light"] .ud-item:hover{ background:#F1F6FA; } html[data-theme="light"] .preview-overlay, html[data-theme="light"] .quiz-modal-overlay{ background:rgba(15,23,42,.45); } html[data-theme="light"] select option{ background:#FFFFFF; color:#0F172A; } /* ── isian: fokus jelas ── */ html[data-theme="light"] :is(input,select,textarea){ border-color:var(--border2); } html[data-theme="light"] :is(input,select,textarea):focus{ background:#fff; border-color:#06B6D4; box-shadow:0 0 0 3px rgba(6,182,212,.16); outline:none; } /* ── tombol toggle tema: lebih serasi ── */ html[data-theme="light"] #theme-toggle{ background:#FFFFFF; color:#0E7490; border-color:var(--border2); box-shadow:var(--shadow-md); } /* ═══════════════════════════════════════════════════════════ v4 — KONTRAS & KEJELASAN Akar masalah "nabrak / kurang jelas": • variabel --txt, --faint, --cyan-lo, --rose, dst. hanya ada di halaman admin/dashboard dan TIDAK diganti di mode terang → teks jadi hantu (abu-putih di atas putih), judul "Belum Ada Course", label kecil, dll. • kursor kustom memakai mix-blend-mode:difference → di latar terang berubah jadi titik merah. • teks redup & garis tepi terlalu tipis. ═══════════════════════════════════════════════════════════ */ html[data-theme="light"]{ --bg:#E9EFF6; --bg2:#DFE8F1; --border:#D3DDE9; --border2:#B9C7D8; --text:#0F172A; --muted:#455568; --muted2:#5F7188; --border-md:#B9C7D8; --border-hi:#94A7BD; /* token khusus halaman dashboard admin */ --txt:#0F172A; --faint:#64748B; --cyan-lo:rgba(6,182,212,.10); --cyan-md:rgba(6,182,212,.20); --violet-lo:rgba(109,91,208,.10); --amber-lo:rgba(183,121,31,.11); --amber-md:rgba(183,121,31,.20); --rose:#D6363C; --rose-lo:rgba(214,54,60,.09); --sky:#2563EB; --sky-lo:rgba(37,99,235,.09); --accent6:#C2570C; --border-focus:rgba(6,182,212,.55); --border-soft:#E4EAF2; --input-bg:#FFFFFF; --shadow-soft:0 14px 34px rgba(15,23,42,.10); --madura-gold:#B7791F; } /* kartu lebih "naik" dari latar: garis tepi + bayangan berlapis */ html[data-theme="light"] :is(.form-card,.dok-card,.madura-card,.soal-card,.tugas-item, .uc-target-card,.kas-item,.stat-mini,.rs-item,.hero-stats,.preview-card-inner){ border-color:var(--border); box-shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 22px -8px rgba(15,23,42,.10); } html[data-theme="light"] .sidebar{ border-right-color:var(--border2); } html[data-theme="light"] .topbar{ border-bottom-color:var(--border2); background:rgba(255,255,255,.92); } html[data-theme="light"] .nav-item{ color:#33465C; } html[data-theme="light"] .nav-section-label{ color:#5F7188; } /* kursor kustom: jangan pakai "difference" di latar terang */ html[data-theme="light"] #cursor{ background:#0E7490; mix-blend-mode:normal; } html[data-theme="light"] :is(#cursor-ring,#cursor2,#cursor-follower){ border-color:rgba(14,116,144,.55); } html[data-theme="light"] #cursor3{ border-color:rgba(14,116,144,.18); } /* scrollbar sidebar: tipis & rapi */ html[data-theme="light"] .sidebar-nav::-webkit-scrollbar{ width:4px; } html[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb{ background:#B9C7D8; border-radius:10px; } /* latar dekoratif jangan menodai kartu */ html[data-theme="light"] .atmo-blob{ opacity:.10; } html[data-theme="light"] body::after{ opacity:.12; } /* ══ v4-auto: warna putih-transparan / teks terang yang ditulis langsung di halaman (dibuat otomatis dari semua halaman) ══ */ html[data-theme="light"] .agenda-head-badge{background:#FFFFFF;} html[data-theme="light"] .agenda-item{background:#FFFFFF;} html[data-theme="light"] .bantuan-search-bar{background:rgba(15,23,42,.045);} html[data-theme="light"] .btn-detail{background:#FFFFFF;} html[data-theme="light"] .btn-detail:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .btn-dok.view{background:rgba(15,23,42,.045);} html[data-theme="light"] .btn-quiz.disabled{background:rgba(15,23,42,.045);} html[data-theme="light"] .btn-selesai.is-done{background:rgba(15,23,42,.045);} html[data-theme="light"] .btn-tts{background:#FFFFFF;} html[data-theme="light"] .btn-tts:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .btn-ucapan.disabled{background:rgba(15,23,42,.045);} html[data-theme="light"] .card{background:#FFFFFF;} html[data-theme="light"] .chat-input{background:rgba(15,23,42,.045);} html[data-theme="light"] .controls-bar{background:rgba(15,23,42,.045);} html[data-theme="light"] .course-mini-stat{background:rgba(15,23,42,.045);} html[data-theme="light"] .desc-box{background:#FFFFFF;} html[data-theme="light"] .dl-modal-btn.cancel{background:rgba(15,23,42,.045);} html[data-theme="light"] .dl-modal-btn.cancel:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .dl-normal{background:rgba(15,23,42,.045);} html[data-theme="light"] .dok-card{background:#FFFFFF;} html[data-theme="light"] .dropdown-content a:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .field input{background:rgba(15,23,42,.045);} html[data-theme="light"] .field select{background:rgba(15,23,42,.045);} html[data-theme="light"] .field textarea{background:rgba(15,23,42,.045);} html[data-theme="light"] .field-label .opt-tag{background:#FFFFFF;} html[data-theme="light"] .filter-row input[type=text]{background:rgba(15,23,42,.045);} html[data-theme="light"] .filter-row select{background:rgba(15,23,42,.045);} html[data-theme="light"] .finput{background:rgba(15,23,42,.045);} html[data-theme="light"] .form-card{background:#FFFFFF;} html[data-theme="light"] .form-card-header{background:rgba(15,23,42,.045);} html[data-theme="light"] .form-control{background:rgba(15,23,42,.045);} html[data-theme="light"] .form-input{background:rgba(15,23,42,.045);} html[data-theme="light"] .form-select{background:rgba(15,23,42,.045);} html[data-theme="light"] .form-textarea{background:rgba(15,23,42,.045);} html[data-theme="light"] .forum-compose textarea{background:#FFFFFF;} html[data-theme="light"] .hero-chip{background:#FFFFFF;} html[data-theme="light"] .hero-chip:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .hist-item:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .jawab-form-wrap textarea{background:rgba(15,23,42,.045);} html[data-theme="light"] .kas-item{background:#FFFFFF;} html[data-theme="light"] .kat-arrow{background:rgba(15,23,42,.045);} html[data-theme="light"] .lb-thead{background:rgba(15,23,42,.045);} html[data-theme="light"] .list-card{background:rgba(15,23,42,.045);} html[data-theme="light"] .list-search input{background:rgba(15,23,42,.045);} html[data-theme="light"] .lv-bar-wrap{background:rgba(15,23,42,.045);} html[data-theme="light"] .madura-card{background:#FFFFFF;} html[data-theme="light"] .materi-row{background:rgba(15,23,42,.045);} html[data-theme="light"] .materi-row .mi{background:rgba(15,23,42,.045);} html[data-theme="light"] .mc-meta-chip{background:rgba(15,23,42,.045);} html[data-theme="light"] .mc-status-badge.todo{background:rgba(15,23,42,.045);} html[data-theme="light"] .meta-pill{background:#FFFFFF;} html[data-theme="light"] .mini-stat-box{background:rgba(15,23,42,.045);} html[data-theme="light"] .mini-table tbody tr:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .modal-close{background:rgba(15,23,42,.045);} html[data-theme="light"] .modal-deadline-note{background:rgba(15,23,42,.045);} html[data-theme="light"] .modal-del-btn.cancel{background:rgba(15,23,42,.045);} html[data-theme="light"] .modal-del-btn.cancel:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .modal-textarea{background:#FFFFFF;} html[data-theme="light"] .ms-item:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .msg.bot .msg-bubble{background:rgba(15,23,42,.045);} html[data-theme="light"] .nav-btn{background:rgba(15,23,42,.045);} html[data-theme="light"] .nav-dropdown-sep{background:rgba(15,23,42,.07);} html[data-theme="light"] .navbar{background:rgba(15,23,42,.045);} html[data-theme="light"] .nilai-input{background:rgba(15,23,42,.045);} html[data-theme="light"] .opsi-btn{background:#FFFFFF;} html[data-theme="light"] .opsi-input{background:rgba(15,23,42,.045);} html[data-theme="light"] .opsi-key{background:rgba(15,23,42,.045);} html[data-theme="light"] .opt-tag{background:#FFFFFF;} html[data-theme="light"] .panel{background:rgba(15,23,42,.045);} html[data-theme="light"] .panel-header{background:rgba(15,23,42,.045);} html[data-theme="light"] .penjelasan-input{background:rgba(15,23,42,.045);} html[data-theme="light"] .prequiz-input{background:#FFFFFF;} html[data-theme="light"] .preview-card-inner{background:rgba(15,23,42,.045);} html[data-theme="light"] .qchip{background:rgba(15,23,42,.045);} html[data-theme="light"] .ql-item:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .quiz-icon-badge.locked{background:rgba(15,23,42,.045);} html[data-theme="light"] .quiz-list-item{background:rgba(15,23,42,.045);} html[data-theme="light"] .quiz-meta-chip{background:rgba(15,23,42,.045);} html[data-theme="light"] .rc-bar-wrap{background:rgba(15,23,42,.045);} html[data-theme="light"] .rcard{background:rgba(15,23,42,.045);} html[data-theme="light"] .reply-form-wrap textarea{background:rgba(15,23,42,.045);} html[data-theme="light"] .riwayat-table th{background:rgba(15,23,42,.045);} html[data-theme="light"] .rs-item{background:#FFFFFF;} html[data-theme="light"] .rtable th{background:rgba(15,23,42,.045);} html[data-theme="light"] .sc{background:#FFFFFF;} html[data-theme="light"] .score-bar-wrap{background:rgba(15,23,42,.045);} html[data-theme="light"] .side-mini-stat{background:rgba(15,23,42,.045);} html[data-theme="light"] .sn-wrap{background:rgba(15,23,42,.045);} html[data-theme="light"] .soal-card{background:#FFFFFF;} html[data-theme="light"] .soal-field input{background:rgba(15,23,42,.045);} html[data-theme="light"] .soal-field textarea{background:rgba(15,23,42,.045);} html[data-theme="light"] .st-belum{background:rgba(15,23,42,.045);} html[data-theme="light"] .stat-icon{background:rgba(15,23,42,.045);} html[data-theme="light"] .stat-mini{background:#FFFFFF;} html[data-theme="light"] .status-past{background:rgba(15,23,42,.045);} html[data-theme="light"] .str-bars span{background:rgba(15,23,42,.045);} html[data-theme="light"] .strength-bars span{background:rgba(15,23,42,.045);} html[data-theme="light"] .ticker-wrap{background:rgba(15,23,42,.045);} html[data-theme="light"] .tog-row{background:#FFFFFF;} html[data-theme="light"] .tog-row:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .tog-sl{background:#FFFFFF;} html[data-theme="light"] .toggle-slider{background:#FFFFFF;} html[data-theme="light"] .topbar{background:rgba(15,23,42,.045);} html[data-theme="light"] .tugas-item{background:#FFFFFF;} html[data-theme="light"] .typing{background:#FFFFFF;} html[data-theme="light"] .uc-btn.ghost{background:rgba(15,23,42,.045);} html[data-theme="light"] .uc-btn.ghost:hover{background:rgba(15,23,42,.075);} html[data-theme="light"] .uc-close{background:rgba(15,23,42,.045);} html[data-theme="light"] .uc-hasil-text{background:rgba(15,23,42,.045);} html[data-theme="light"] .uc-level-badge{background:#FFFFFF;} html[data-theme="light"] .ucapan-icon-badge.locked{background:rgba(15,23,42,.045);} html[data-theme="light"] .ud-sep{background:rgba(15,23,42,.045);} html[data-theme="light"] textarea{background:rgba(15,23,42,.045);} html[data-theme="light"] .agenda-head-badge{border-color:var(--border);} html[data-theme="light"] .agenda-item{border-color:var(--border);} html[data-theme="light"] .btn-clear:hover{border-color:var(--border2);} html[data-theme="light"] .btn-detail{border-color:var(--border);} html[data-theme="light"] .btn-detail:hover{border-color:var(--border2);} html[data-theme="light"] .btn-dok.view{border-color:var(--border2);} html[data-theme="light"] .btn-nav.secondary:hover{border-color:var(--border2);} html[data-theme="light"] .btn-result.secondary:hover{border-color:var(--border2);} html[data-theme="light"] .btn-tts{border-color:var(--border2);} html[data-theme="light"] .btn-tts:hover{border-color:var(--border2);} html[data-theme="light"] .chat-header{border-bottom-color:var(--border);} html[data-theme="light"] .chat-input{border-color:var(--border);} html[data-theme="light"] .chat-input-wrap{border-top-color:var(--border);} html[data-theme="light"] .chat-quick{border-top-color:var(--border);} html[data-theme="light"] .course-mini-stat{border-color:var(--border);} html[data-theme="light"] .dl-modal-btn.cancel{border-color:var(--border2);} html[data-theme="light"] .dl-normal{border-color:var(--border2);} html[data-theme="light"] .dok-card{border-color:var(--border);} html[data-theme="light"] .dok-foot{border-top-color:var(--border);} html[data-theme="light"] .finput:hover{border-color:var(--border2);} html[data-theme="light"] .hist-item{border-bottom-color:var(--border);} html[data-theme="light"] .kas-item{border-color:var(--border);} html[data-theme="light"] .kuis-item{border-bottom-color:var(--border);} html[data-theme="light"] .lb-row{border-bottom-color:var(--border);} html[data-theme="light"] .materi-row{border-bottom-color:var(--border);} html[data-theme="light"] .mc-meta-chip{border-color:var(--border);} html[data-theme="light"] .mc-status-badge.todo{border-color:var(--border2);} html[data-theme="light"] .mic-btn{border-color:var(--border2);} html[data-theme="light"] .mini-item{border-bottom-color:var(--border);} html[data-theme="light"] .modal-close{border-color:var(--border);} html[data-theme="light"] .modal-del-btn.cancel{border-color:var(--border2);} html[data-theme="light"] .modal-head{border-bottom-color:var(--border);} html[data-theme="light"] .modal-textarea{border-color:var(--border);} html[data-theme="light"] .modal-upload-zone{border-color:var(--border2);} html[data-theme="light"] .ms-check{border-color:var(--border2);} html[data-theme="light"] .msg.bot .msg-bubble{border-color:var(--border);} html[data-theme="light"] .nav-btn{border-color:var(--border);} html[data-theme="light"] .notif-head{border-bottom-color:var(--border);} html[data-theme="light"] .opsi-btn{border-color:var(--border);} html[data-theme="light"] .opsi-key{border-color:var(--border);} html[data-theme="light"] .prequiz-input{border-color:var(--border);} html[data-theme="light"] .qchip{border-color:var(--border);} html[data-theme="light"] .quiz-icon-badge.locked{border-color:var(--border);} html[data-theme="light"] .quiz-list-item{border-color:var(--border);} html[data-theme="light"] .quiz-meta-chip{border-color:var(--border);} html[data-theme="light"] .reply-badge{border-top-color:var(--border);} html[data-theme="light"] .riwayat-table td{border-bottom-color:var(--border);} html[data-theme="light"] .rs-item{border-color:var(--border);} html[data-theme="light"] .sc:hover{border-color:var(--border2);} html[data-theme="light"] .side-mini-stat{border-color:var(--border);} html[data-theme="light"] .soal-card:hover{border-color:var(--border2);} html[data-theme="light"] .spinner{border-color:var(--border2);} html[data-theme="light"] .st-belum{border-color:var(--border2);} html[data-theme="light"] .tipe-btn:hover{border-color:var(--border2);} html[data-theme="light"] .tog-row{border-color:var(--border);} html[data-theme="light"] .tog-row:hover{border-color:var(--border);} html[data-theme="light"] .tugas-item{border-color:var(--border);} html[data-theme="light"] .typing{border-color:var(--border);} html[data-theme="light"] .uc-btn.ghost{border-color:var(--border2);} html[data-theme="light"] .uc-close{border-color:var(--border);} html[data-theme="light"] .uc-hasil-text{border-color:var(--border);} html[data-theme="light"] .uc-head{border-bottom-color:var(--border);} html[data-theme="light"] .ucapan-check-item .dot{border-color:var(--border2);} html[data-theme="light"] .ucapan-icon-badge.locked{border-color:var(--border);} html[data-theme="light"] .xplog-row{border-bottom-color:var(--border);} html[data-theme="light"] .f-text{color:var(--text);} html[data-theme="light"] .field label{color:var(--muted);} html[data-theme="light"] .mc-konten{color:var(--text);} html[data-theme="light"] .quiz-card:hover .qchip{color:var(--muted);} html[data-theme="light"] .stat-extra{color:var(--muted2);} html[data-theme="light"] .stat-sub{color:var(--muted2);} html[data-theme="light"] .vbar-label small{color:var(--muted2);} /* ── v4-final: elemen struktur harus menang atas aturan otomatis di atas ── */ html[data-theme="light"] .topbar{ background:rgba(255,255,255,.94); } html[data-theme="light"] .navbar, html[data-theme="light"] nav{ background:rgba(255,255,255,.90); } html[data-theme="light"] .sidebar{ background:#FFFFFF; } html[data-theme="light"] :is(.rcard,.list-card,.info-card,.tips-card,.preview-card,.side-card,.kat-card, .module-card,.level-card,.rank-card,.kontak-card,.panduan-card,.action-card,.stat-card){ background:#FFFFFF; border-color:var(--border); box-shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 22px -8px rgba(15,23,42,.10); } html[data-theme="light"] .kat-mini-card{ background:#F3F6FA; } /* ═══════════════════════════════════════════════════════════════ v6 — WHITE PRO (gaya portal akademik: putih bersih, tegas, mewah) Hanya mode terang. Mode gelap tidak disentuh. Ditaruh PALING BAWAH theme.css agar menang atas v1–v4. ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"]{ --ink:#0B1220; --ink2:#334155; --ink3:#64748B; --line:#E8EDF5; --line2:#D9E1EC; --pri1:#22D3EE; --pri2:#0891B2; --pri3:#0E7490; --vio:#6D5BD0; --sh-card:0 1px 2px rgba(16,24,40,.04), 0 24px 48px -26px rgba(16,24,40,.18); --sh-hover:0 2px 4px rgba(16,24,40,.04), 0 30px 60px -24px rgba(8,145,178,.42); --sh-btn:0 16px 30px -12px rgba(8,145,178,.65), 0 1px 0 rgba(255,255,255,.4) inset; --ring:0 0 0 4px rgba(34,211,238,.22); --bg:#F7F9FD; --surface:#FFFFFF; --text:var(--ink); --muted:var(--ink3); /* ── Font tegas seperti portal modern ── */ & :is(h1,h2,h3,h4,.hero-title,.section-title,.topbar-title,.card-title,.table-card-title,.stat-num,.brand-logo,.logo-text,.panel-title){ color:var(--ink); } /* ── Latar putih bersih + garis warna di paling atas ── */ & body{ background: radial-gradient(900px 520px at 100% -10%, rgba(109,91,208,.09), transparent 62%), radial-gradient(760px 480px at -6% 0%, rgba(34,211,238,.10), transparent 62%), linear-gradient(180deg,#FFFFFF 0,#F7F9FD 480px,#F5F8FC 100%) fixed; color:var(--ink); -webkit-font-smoothing:antialiased; } & body::after{ display:none; } & :is(.atmo,.bg-mesh){ opacity:.25; } &::before{ content:""; position:fixed; top:0; left:0; right:0; height:4px; z-index:100001; pointer-events:none; background:linear-gradient(90deg,#22D3EE,#0891B2 40%,#6D5BD0 75%,#F97316); } & body{ cursor:auto !important; } & :is(#cursor,#cursor-ring,#cursor2,#cursor3,#cursor-follower){ display:none !important; } & :is(a,button,label,select,summary,[onclick],[role="button"]){ cursor:pointer !important; } & :is(a,button,input,select,textarea):focus-visible{ outline:2px solid #06B6D4; outline-offset:3px; } & ::selection{ background:rgba(34,211,238,.28); } /* ═════════ SIDEBAR ═════════ */ & .sidebar{ background:#fff; border-right:1px solid var(--line); box-shadow:12px 0 40px -28px rgba(16,24,40,.22); } & .sidebar-brand{ background:linear-gradient(180deg,#F1FBFE,#fff); border-bottom:1px solid var(--line); padding-top:32px; } & .brand-logo{ background-image:linear-gradient(90deg,#0891B2,#6D5BD0); } & .brand-sub{ color:var(--ink3); } & .admin-pill{ background:#FEECEE; border-color:#F9C9CE; color:#B42332; } & .nav-section-label{ color:#8A99AE; } & .nav-item{ position:relative; color:var(--ink2); border-radius:14px; padding:11px 13px; } & .nav-item:hover{ background:#F3F7FB; color:var(--ink); } & .nav-icon{ background:#F3F6FA; border:1px solid #E8EDF5; border-radius:11px; } & .nav-item.active{ background:linear-gradient(90deg,#DDF5FB,#F1FBFE); border-color:#BDE8F2; color:#0B6E85; box-shadow:0 10px 20px -14px rgba(8,145,178,.7); } & .nav-item.active::before{ content:""; position:absolute; left:-14px; top:20%; bottom:20%; width:4px; border-radius:0 6px 6px 0; background:linear-gradient(#22D3EE,#0891B2); } & .nav-item.active .nav-icon{ background:#fff; border-color:#BDE8F2; box-shadow:0 6px 12px -6px rgba(8,145,178,.55); } & .nav-item.danger{ color:#B42332; } & .sidebar-user{ background:#fff; border-top:1px solid var(--line); } & .user-name{ color:var(--ink); } & .user-role{ color:#0B6E85; } /* ═════════ TOPBAR ═════════ */ & .topbar{ background:rgba(255,255,255,.9); backdrop-filter:blur(20px) saturate(1.5); border-bottom:1px solid var(--line); box-shadow:0 14px 34px -26px rgba(16,24,40,.35); } & .topbar-breadcrumb{ color:var(--ink3); } & .search-input{ background:#F5F8FC; border:1px solid var(--line2); border-radius:14px; color:var(--ink); } & .search-input:focus{ background:#fff; border-color:#22D3EE; box-shadow:var(--ring); } & .icon-btn{ background:#fff; border:1px solid var(--line2); border-radius:12px; color:var(--ink2); box-shadow:0 1px 2px rgba(16,24,40,.06); } & .icon-btn:hover{ border-color:#22D3EE; color:#0B6E85; background:#F0FBFE; } /* ═════════ TOMBOL UTAMA (solid + glow) ═════════ */ & :is(.btn-primary,.cta-primary,.btn-cta,.btn-submit,.btn-save,.btn-add,.btn-new-quiz,.btn-play,.btn-lanjut){ background:linear-gradient(135deg,#22D3EE 0%,#0891B2 100%) !important; color:#fff !important; border:0 !important; border-radius:15px; box-shadow:var(--sh-btn); text-shadow:0 1px 0 rgba(0,0,0,.12); } & :is(.btn-primary,.cta-primary,.btn-cta,.btn-submit,.btn-save,.btn-add,.btn-new-quiz,.btn-play,.btn-lanjut):hover{ transform:translateY(-3px); filter:brightness(1.05); box-shadow:0 22px 38px -14px rgba(8,145,178,.75); } & :is(.cta-secondary,.btn-ghost,.btn-cancel,.btn-cta-sec){ background:#fff; border:1px solid var(--line2); color:var(--ink); border-radius:15px; box-shadow:0 1px 2px rgba(16,24,40,.05); } & :is(.cta-secondary,.btn-ghost,.btn-cancel,.btn-cta-sec):hover{ border-color:#22D3EE; background:#F0FBFE; color:#0B6E85; transform:translateY(-2px); } & .btn-register{ background:linear-gradient(135deg,#22D3EE,#0891B2) !important; color:#fff !important; border:0 !important; border-radius:14px; box-shadow:var(--sh-btn); } & .btn-login{ background:#fff; border:1px solid var(--line2); border-radius:14px; color:var(--ink); } /* ═════════ KARTU STATISTIK DASHBOARD ═════════ */ & .stat-card{ --sc-d:#0891B2; --sc-l:#22D3EE; --sc-t:rgba(34,211,238,.18); background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px 22px 20px; box-shadow:var(--sh-card); } & .stat-card:nth-child(2){ --sc-d:#5B4BC0; --sc-l:#8B7CF0; --sc-t:rgba(109,91,208,.16); } & .stat-card:nth-child(3){ --sc-d:#1D4ED8; --sc-l:#60A5FA; --sc-t:rgba(37,99,235,.15); } & .stat-card:nth-child(4){ --sc-d:#B45309; --sc-l:#FBBF24; --sc-t:rgba(217,119,6,.16); } & .stat-card:nth-child(5){ --sc-d:#B42332; --sc-l:#FB7185; --sc-t:rgba(220,61,67,.15); } & .stat-card::before{ height:5px; opacity:1; background:linear-gradient(90deg,var(--sc-d),var(--sc-l)); } & .stat-card::after{ background:radial-gradient(ellipse 75% 85% at 100% 0%,var(--sc-t),transparent 70%); } & .stat-card:hover{ transform:translateY(-5px); border-color:#CFE9F1; box-shadow:var(--sh-hover); } & .stat-icon-wrap{ background:var(--sc-t); border:1px solid transparent; border-radius:14px; width:42px; height:42px; } & .stat-card .stat-num{ background:linear-gradient(135deg,var(--ink) 20%,var(--sc-d) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } & .stat-lbl{ color:var(--ink3); } /* ═════════ TAB ═════════ */ & .tabs-bar{ background:#EDF2F8; border:1px solid #DFE7F1; border-radius:16px; padding:5px; } & .tab-btn{ color:var(--ink3); border-radius:12px; padding:9px 20px; } & .tab-btn:hover{ color:var(--ink); background:rgba(255,255,255,.7); } & .tab-btn.active{ background:#fff; border-color:var(--line); color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.08), 0 10px 20px -10px rgba(16,24,40,.3); } & .tab-btn.active.t-course{ color:#0B6E85; } & .tab-btn.active.t-quiz{ color:#A16207; } & .section-eyebrow{ color:#0B6E85; } & .section-eyebrow.amber{ color:#A16207; } & .section-title{ } & .results-count{ color:var(--ink3); } /* ═════════ KARTU COURSE ═════════ */ & .course-card{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:var(--sh-card); } & .course-card::before{ height:4px; background:linear-gradient(90deg,#22D3EE,#6D5BD0); } & .course-card:hover{ border-color:#BDE8F2; transform:translateY(-6px); box-shadow:var(--sh-hover); } & .card-seq{ display:inline-block; width:fit-content; opacity:1; color:#0B6E85; background:#E6F7FB; border:1px solid #BDE8F2; padding:4px 11px; border-radius:100px; } & .card-title{ color:var(--ink); } & .card-desc{ color:#526278; } & .card-footer{ border-top:1px solid #EEF2F7; } & .act-btn{ border-radius:11px; padding:7px 13px; } & .act-edit{ background:#E6F7FB; border-color:#BDE8F2; color:#0B6E85; } & .act-module{ background:#F0EDFD; border-color:#D9D2F7; color:#5343B5; } & .act-delete{ background:#FEECEE; border-color:#F9C9CE; color:#B42332; } /* ═════════ PANEL, KARTU, TABEL, FORM ═════════ */ & :is(.table-card,.rcard,.list-card,.info-card,.tips-card,.preview-card,.side-card,.kat-card,.module-card,.level-card, .rank-card,.kontak-card,.panduan-card,.action-card,.quiz-card,.dok-card,.lb-table,.xplog-wrap){ background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--sh-card); } & :is(.module-card,.level-card,.quiz-card,.kat-card,.action-card):hover{ border-color:#BDE8F2; box-shadow:var(--sh-hover); transform:translateY(-4px); } & :is(.rtable,.riwayat-table) th{ background:#F5F8FC; color:#6B7C93; border-bottom:1px solid var(--line); } & :is(.rtable,.riwayat-table) td{ color:#1B2A3E; border-bottom:1px solid #EEF2F7; } & :is(.rtable,.riwayat-table) tbody tr:hover td{ background:#F5FBFD; } & :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){ background:#fff; border:1px solid var(--line2); border-radius:14px; color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.04) inset; } & :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus{ border-color:#22D3EE; box-shadow:var(--ring); outline:none; } /* ═════════ HALAMAN PUBLIK (index) ═════════ */ & :is(.navbar,nav){ background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); box-shadow:0 14px 34px -26px rgba(16,24,40,.35); } & .tagline{ color:var(--ink3); } & .bg-photo-overlay{ background-image: linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 42%,rgba(255,255,255,.62) 100%), radial-gradient(ellipse 60% 50% at 80% 55%,rgba(109,91,208,.10),transparent 70%); } & .bg-photo{ filter:saturate(1.15) contrast(1.02); } & .bg-photo-vignette{ box-shadow:inset 0 0 120px 20px rgba(255,255,255,.7); } & :is(.hero-title,.hero-sub){ text-shadow:none; } & .hero-title{ color:var(--ink); } & .hero-sub{ color:#475569; } & .hero-badge{ background:#E6F7FB; border:1px solid #BDE8F2; color:#0B6E85; } & .hero-stats{ background:#fff; border:1px solid var(--line); border-radius:28px; padding:30px 24px; gap:0; box-shadow:0 30px 60px -30px rgba(16,24,40,.3); max-width:880px; margin-left:auto; margin-right:auto; justify-content:space-around; } & .hero-stats .stat{ flex:1; min-width:120px; padding:0 18px; } & .hero-stats .stat + .stat{ border-left:1px solid #EEF2F7; } & .hero-stats .stat-num{ background:linear-gradient(135deg,#0891B2,#6D5BD0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } & .hero-stats .stat-label{ color:var(--ink3); } & .ticker-wrap{ background:#fff; border-color:var(--line); } & .ticker-item{ color:#526278; } /* ═════════ SCROLLBAR & TOGGLE ═════════ */ & ::-webkit-scrollbar{ width:10px; height:10px; } & ::-webkit-scrollbar-track{ background:#F1F5FA; } & ::-webkit-scrollbar-thumb{ background:linear-gradient(#C3D2E3,#A5B8CE); border-radius:10px; border:2px solid #F1F5FA; } & #theme-toggle{ background:#fff; border:1px solid var(--line2); box-shadow:0 14px 30px -10px rgba(16,24,40,.4); } } @media (prefers-reduced-motion:reduce){ html[data-theme="light"] *{ animation:none !important; transition:none !important; } } /* ═══════════════════════════════════════════════════════════════ v7 — PENYEMPURNAAN MODE TERANG (tipografi TIDAK diubah: font, ukuran, dan ketebalan tetap sama persis dengan mode gelap) Ditaruh paling bawah agar menang atas v1–v6. Mode gelap tidak disentuh. ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"]{ /* foto hero kembali terlihat; putih hanya di sisi teks agar tetap terbaca */ & .bg-photo{ filter:saturate(1.12) contrast(1.04) brightness(1.02); } & .bg-photo-overlay{ background-image: linear-gradient(115deg, rgba(255,255,255,.88) 0%, rgba(247,251,254,.62) 38%, rgba(247,251,254,.2) 68%, rgba(247,251,254,.03) 100%), linear-gradient(0deg, rgba(247,251,254,.92) 0%, rgba(247,251,254,0) 26%, rgba(247,251,254,0) 76%, rgba(247,251,254,.45) 100%), radial-gradient(ellipse 60% 50% at 80% 55%, rgba(34,211,238,.14), transparent 70%); } & .bg-photo-vignette{ box-shadow:inset 0 0 110px 16px rgba(247,251,254,.5); } & :is(.hero-title,.hero-sub){ text-shadow:0 1px 14px rgba(255,255,255,.92), 0 0 2px rgba(255,255,255,.7); } & .hero-title .line2{ text-shadow:none; filter:drop-shadow(0 1px 8px rgba(255,255,255,.9)); } & .hero-stats{ background:rgba(255,255,255,.84); backdrop-filter:blur(14px) saturate(1.4); } & .hero-stats .stat-num{ opacity:1; } & .cta-secondary{ background:rgba(255,255,255,.78); backdrop-filter:blur(8px); } /* kartu: garis atas berwarna + sorot cyan halus saat disentuh */ & :is(.card,.course-card,.stat-card,.module-card,.level-card,.quiz-card){ transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; } & :is(.card,.course-card):hover{ border-color:#9EE3F1; box-shadow:0 2px 4px rgba(16,24,40,.04), 0 30px 60px -24px rgba(8,145,178,.45); } /* dropdown / menu melayang: putih bersih + bayangan dalam */ & :is(.ud-menu,.nav-dropdown,.notif-dropdown){ background:rgba(255,255,255,.98); border:1px solid var(--line2); box-shadow:0 2px 4px rgba(16,24,40,.05), 0 28px 60px -16px rgba(16,24,40,.28); } & :is(.nav-dropdown a,.ud-item){ color:var(--ink2); } & :is(.nav-dropdown a:hover,.ud-item:hover,.notif-item:hover){ background:#EEF9FC; color:var(--ink); } & .ud-item--danger{ color:#B42332; } & .ud-header{ background:linear-gradient(135deg,#E9F9FD,#F3F0FE); border-bottom:1px solid var(--line); } & .ud-info-role{ color:#0B6E85; } /* tombol toggle tema: cincin cyan supaya jelas di latar putih */ & #theme-toggle{ color:#0E7490; border:1px solid #BDE8F2; box-shadow:0 14px 30px -10px rgba(16,24,40,.4), 0 0 0 4px rgba(34,211,238,.14); } & #theme-toggle:hover{ box-shadow:0 14px 30px -10px rgba(16,24,40,.4), 0 0 0 6px rgba(34,211,238,.22); } /* scrollbar & teks terpilih */ & ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#22D3EE,#0891B2); } } /* ═══════════════════════════════════════════════════════════════ v8 — PALET "BIRU BAJA" (mode terang, kontras lebih tegas) Latar utama : #A9C2D5 (gradasi halus #B8CCDF → #D4E1EF) Kartu : #FFFFFF / #F8FAFC, sudut membulat, border #B8D2E6 Judul & angka : #101A2C (navy gelap) Teks sekunder : #405675 Aksen : #0796B8 (cyan) dan #3B82F6 (biru) Ditaruh PALING BAWAH agar menang atas v1–v7. Mode gelap tidak disentuh. ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"]{ --bg:#A9C2D5; --bg2:#B8CCDF; --surface:#FFFFFF; --surface2:#F8FAFC; --surface3:#E6EEF6; --bg-raised:#FFFFFF; --bg-surface:#F8FAFC; --bg-hover:#E6EEF6; --text:#101A2C; --txt:#101A2C; --ink:#101A2C; --ink2:#405675; --ink3:#405675; --muted:#405675; --muted2:#4F6482; --faint:#4F6482; --border:#B8D2E6; --border2:#9FBFD8; --border-md:#9FBFD8; --border-hi:#7FA8C8; --border-soft:#CFE0EE; --line:#B8D2E6; --line2:#9FBFD8; --accent:#0796B8; --cyan:#0796B8; --pri2:#0796B8; --pri3:#0796B8; --sh-card:0 1px 2px rgba(31,58,92,.10), 0 10px 26px -10px rgba(31,58,92,.28); --sh-hover:0 2px 4px rgba(31,58,92,.10), 0 22px 44px -16px rgba(31,58,92,.38); --shadow-sm:0 1px 2px rgba(31,58,92,.10), 0 6px 16px -6px rgba(31,58,92,.22); --shadow-md:0 2px 4px rgba(31,58,92,.10), 0 14px 32px -12px rgba(31,58,92,.30); --shadow-lg:0 4px 8px rgba(31,58,92,.12), 0 28px 60px -18px rgba(31,58,92,.38); } /* latar utama: biru keabu-abuan dengan gradasi halus, tetap menempel saat scroll */ html[data-theme="light"] body{ background:#A9C2D5 linear-gradient(180deg,#B8CCDF 0%,#A9C2D5 55%,#D4E1EF 100%) fixed !important; background-image:linear-gradient(180deg,#B8CCDF 0%,#A9C2D5 55%,#D4E1EF 100%) !important; background-attachment:fixed !important; color:#101A2C; } html[data-theme="light"] body::before, html[data-theme="light"] body::after, html[data-theme="light"] .mesh-orb, html[data-theme="light"] .atmo-blob{ opacity:.0; } /* kartu: putih, sudut membulat, border tipis biru muda, bayangan abu-biru lembut */ html[data-theme="light"] :is(.stat-card,.stat-mini,.card,.course-card,.table-card,.rcard,.list-card,.info-card, .tips-card,.preview-card,.side-card,.kat-card,.module-card,.level-card,.rank-card,.kontak-card, .panduan-card,.action-card,.quiz-card,.dok-card,.form-card,.madura-card,.soal-card,.kas-item,.rs-item, .tugas-item,.hero-stats,.xplog-wrap,.lb-table){ background:#FFFFFF; border:1px solid #B8D2E6; box-shadow:0 1px 2px rgba(31,58,92,.10), 0 10px 26px -10px rgba(31,58,92,.28); } html[data-theme="light"] :is(.stat-card,.course-card,.card,.module-card,.level-card,.quiz-card):hover{ border-color:#8FB6D4; box-shadow:0 2px 4px rgba(31,58,92,.10), 0 22px 44px -16px rgba(31,58,92,.38); } html[data-theme="light"] .stat-card::after{ opacity:.5; } /* navbar, sidebar, topbar: putih dengan garis pemisah yang jelas di atas latar biru-abu */ html[data-theme="light"] :is(.topbar,.navbar,nav){ background:rgba(255,255,255,.94); border-bottom:1px solid #B8D2E6; box-shadow:0 8px 24px -16px rgba(31,58,92,.35); } html[data-theme="light"] .sidebar{ background:#FFFFFF; border-right:1px solid #B8D2E6; } html[data-theme="light"] :is(.ud-menu,.nav-dropdown,.notif-dropdown,.modal-box,.dmodal-box,.uc-box,.preview-box,.quiz-modal-box){ background:#FFFFFF; border:1px solid #B8D2E6; box-shadow:0 4px 8px rgba(31,58,92,.12), 0 28px 60px -18px rgba(31,58,92,.40); } /* judul & angka: navy gelap solid */ html[data-theme="light"] :is(h1,h2,h3,h4,.section-title,.topbar-title,.card-title,.table-card-title,.page-title){ color:#101A2C; } html[data-theme="light"] :is(.stat-card .stat-num,.stat-num,.stat-mini-val,.hero-stats .stat-num,.hero-num){ background:none !important; -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:#101A2C; color:#101A2C; } /* teks sekunder / deskripsi */ html[data-theme="light"] :is(.stat-lbl,.stat-label,.stat-sub,.stat-extra,.card-desc,.results-count,.tagline,.brand-sub, .nav-section-label,.topbar-breadcrumb){ color:#405675; } html[data-theme="light"] .nav-item{ color:#2E4260; } /* aksen: nama pengguna, label, ikon navigasi */ html[data-theme="light"] :is(.ud-name,.ud-info-name,.user-name){ color:#0796B8; } html[data-theme="light"] :is(.ud-info-role,.section-eyebrow,.card-seq,.card-eyebrow,.hero-badge,.progress-pct, .course-progress-meta strong,.mh-progress-txt strong,.side-progress-meta strong,.act-edit,.btn-view,.btn-course, .chip-num,.card-number,.acc-high){ color:#0796B8; } html[data-theme="light"] .nav-item.active{ color:#0796B8; background:#E3F1F9; border-color:#B8D2E6; } html[data-theme="light"] .nav-item.active .nav-icon, html[data-theme="light"] .nav-icon{ color:#0796B8; } html[data-theme="light"] #theme-toggle{ color:#0796B8; border-color:#B8D2E6; } /* progress bar: gradasi cyan #06B6D4 → biru #3B82F6 */ html[data-theme="light"] :is(.stat-progress-fill,.course-fill,.mh-fill,.side-fill,.bar-fill,.quiz-progress-fill,.uc-progress-fill){ background:linear-gradient(90deg,#06B6D4,#3B82F6) !important; background-size:100% 100% !important; box-shadow:none; } html[data-theme="light"] :is(.stat-progress-track,.course-track,.mh-track,.side-track,.bar-track,.quiz-progress-track, .uc-progress-track,.lv-bar-wrap,.rc-bar-wrap,.score-bar-wrap){ background:#D4E1EF; } /* isian formulir tetap putih agar terbaca di atas kartu */ html[data-theme="light"] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){ background:#FFFFFF; border-color:#9FBFD8; color:#101A2C; } /* mobile & tablet: bayangan dibuat lebih ringan, layout tidak diubah */ @media (max-width:768px){ html[data-theme="light"] :is(.stat-card,.course-card,.card,.table-card,.module-card,.quiz-card){ box-shadow:0 1px 2px rgba(31,58,92,.10), 0 6px 16px -8px rgba(31,58,92,.26); } }