/* ========================================================================== Variabel Global (Warna, Tipografi, Spasi) — Light Mode (default) Semua warna PAKAI variabel ini di seluruh CSS lain, supaya Dark Mode otomatis "ikut jadi" tanpa perlu menimpa tiap file satu-satu. ========================================================================== */ :root { --primary-color: #137333; --primary-color-dark: #0f5c28; --primary-light: #e6f4ea; --accent-color: #f29900; --bg-main: #ffffff; --bg-soft-gray: #f7f9f7; --bg-secondary: #f1f3f4; --text-primary: #1b1f1c; --text-secondary: #5f6368; --text-muted: #80868b; --text-white: #ffffff; --border-color: #dde2dc; --border-light: #ecefe9; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 2px 0 rgba(30,40,32,0.06), 0 1px 3px 1px rgba(30,40,32,0.08); --shadow-md: 0 4px 10px -2px rgba(30,40,32,0.12), 0 2px 6px -2px rgba(30,40,32,0.08); --shadow-lg: 0 12px 24px -6px rgba(30,40,32,0.16), 0 4px 8px -2px rgba(30,40,32,0.08); --transition-fast: 0.18s ease-in-out; --transition-normal: 0.3s ease-in-out; --skeleton-base: #e2e8f0; --skeleton-highlight: #f0f4f8; color-scheme: light; } /* Dark Mode — diaktifkan lewat atribut data-theme="dark" di (lihat utils/theme.js) */ [data-theme="dark"] { --primary-color: #3fbf6b; --primary-color-dark: #34a85b; --primary-light: rgba(63, 191, 107, 0.16); --accent-color: #ffb84d; --bg-main: #1a1f1b; --bg-soft-gray: #121614; --bg-secondary: #212722; --text-primary: #eef1ec; --text-secondary: #b7c0b6; --text-muted: #8b968a; --text-white: #ffffff; --border-color: #333c33; --border-light: #2a312a; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4), 0 1px 3px 1px rgba(0,0,0,0.3); --shadow-md: 0 4px 10px -2px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.35); --shadow-lg: 0 12px 24px -6px rgba(0,0,0,0.55), 0 4px 8px -2px rgba(0,0,0,0.4); --skeleton-base: #2a3129; --skeleton-highlight: #363f34; color-scheme: dark; } /* Transisi halus saat pindah tema, tapi tidak dipaksakan ke SEMUA properti (biar tidak lag di elemen yang sering berubah seperti hover/animasi lain) */ body, .card, .navbar, .footer, .form-control, .btn, .admin-sidebar, .admin-topbar { transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal); } /* ========================================================================== Reset & Base Styles ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text-primary); background-color: var(--bg-soft-gray); line-height: 1.65; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: var(--primary-color); } ul { list-style: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6 { line-height: 1.3; color: var(--text-primary); } /* ========================================================================== Layout & Utility Classes ========================================================================== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } .gap-4 { gap: 2rem; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .text-center { text-align: center; } .text-sm { font-size: 0.875rem; } .text-primary { color: var(--primary-color) !important; } .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-danger { color: #e05252 !important; } .text-white { color: var(--text-white) !important; } .bg-dark { background-color: #1b1f1c; } .bg-green-light { background-color: var(--primary-light); } .bg-white { background-color: var(--bg-main); } .rounded { border-radius: var(--radius-md); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .w-100 { width: 100%; } .w-auto { width: auto; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .p-1 { padding: 0.5rem; } .p-2 { padding: 1rem; } .p-3 { padding: 1.5rem; } .p-4 { padding: 2rem; } .p-0 { padding: 0 !important; } .py-4 { padding-top: 2rem; padding-bottom: 2rem; } .section-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; } .empty-state-mini { text-align: center; padding: 2rem 1rem; color: var(--text-muted); } .empty-state-mini i { font-size: 1.75rem; margin-bottom: 0.6rem; opacity: 0.5; display: block; } .empty-state-mini p { margin: 0; font-size: 0.9rem; } /* ========================================================================== Skeleton Loading — sistem terpusat, dipakai di SEMUA halaman (publik & admin) supaya konsisten dan otomatis ikut Dark Mode (pakai var(--skeleton-base) dkk). ========================================================================== */ @keyframes skeleton-pulse { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text, .skeleton-circle, .skeleton-box, .skeleton-banner, .skeleton-badge, .skeleton-card::before, .skeleton-card::after { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.6s infinite linear; } .skeleton-text { height: 1rem; border-radius: 4px; margin-bottom: 0.6rem; } .skeleton-text.lg { height: 1.5rem; } .skeleton-text.sm { height: 0.75rem; } .skeleton-circle { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; } .skeleton-badge { height: 1.4rem; width: 70px; border-radius: 999px; } .skeleton-box { border-radius: var(--radius-md); } .skeleton-banner { width: 100%; border-radius: var(--radius-md); } .skeleton-card { height: 320px; background: var(--bg-main); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; } .skeleton-card::before { content: ''; height: 160px; display: block; } .skeleton-card::after { content: ''; margin: 1.5rem; height: 20px; width: 70%; border-radius: 4px; box-shadow: 0 28px 0 -4px var(--skeleton-base), 0 56px 0 -8px var(--skeleton-base); } /* Baris skeleton untuk tabel admin (dipakai lewat JS, lihat components/skeleton.js) */ .skeleton-row td { padding: 1rem; } .page-header { padding: 2.5rem 0; margin-bottom: 2rem; } @media (max-width: 768px) { .d-md-none { display: none !important; } } /* ========================================================================== Komponen Global: Card, Button, Form ========================================================================== */ .card { background: var(--bg-main); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal); } .card:hover { box-shadow: var(--shadow-md); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; text-align: center; cursor: pointer; border: none; transition: all var(--transition-fast); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background: var(--primary-color); color: var(--text-white); } .btn-primary:hover:not(:disabled) { background: var(--primary-color-dark); transform: translateY(-1px); } .btn-outline { border: 1.5px solid var(--primary-color); color: var(--primary-color); background: transparent; } .btn-outline:hover:not(:disabled) { background: var(--primary-light); } .btn-white { background: var(--bg-main); color: var(--text-primary); border: 1.5px solid var(--border-color); } .btn-white:hover:not(:disabled) { background: var(--bg-secondary); } .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); } .btn-secondary:hover:not(:disabled) { background: var(--border-light); } .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; } /* Form controls terpusat di sini (bukan di CSS per-fitur) supaya konsisten & ikut Dark Mode di semua halaman termasuk panel admin. */ .form-group { margin-bottom: 1.1rem; } .form-group label, label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; } .form-control { width: 100%; padding: 0.65rem 0.9rem; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit; background: var(--bg-main); color: var(--text-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal); } .form-control::placeholder { color: var(--text-muted); } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); } textarea.form-control { resize: vertical; min-height: 100px; } select.form-control { cursor: pointer; } /* Modifier khusus untuk input yang punya ikon di sisi kiri (lihat login/contact) */ .form-control.has-icon { padding-left: 2.5rem; } /* ========================================================================== Navbar ========================================================================== */ .navbar { background: var(--bg-main); border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 1000; padding: 0.85rem 0; } .navbar-brand { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); letter-spacing: 0.2px; } .navbar-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; flex-shrink: 0; } .navbar-nav { align-items: center; } .nav-link { color: var(--text-secondary); font-weight: 500; font-size: 0.92rem; padding: 0.4rem 0; position: relative; transition: color var(--transition-fast); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--primary-color); transition: width var(--transition-fast); } .nav-link:hover, .nav-link.active { color: var(--primary-color); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* Tombol ganti tema (sun/moon) di navbar & topbar admin */ .theme-toggle-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-color); background: var(--bg-main); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--primary-color); color: var(--primary-color); } .app-container { min-height: calc(100vh - 200px); /* Memastikan footer selalu di bawah */ } /* ========================================================================== Responsif: navbar jadi menu hamburger di layar kecil ========================================================================== */ .navbar-hamburger { display: none; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color); background: var(--bg-main); color: var(--text-primary); align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; flex-shrink: 0; } @media (max-width: 768px) { .navbar > .container { flex-wrap: wrap; } .navbar-brand span { display: none; } /* logo ikon saja cukup di HP, hemat ruang */ .navbar-hamburger { display: inline-flex; } .navbar-nav { display: none; flex-direction: column; width: 100%; gap: 0 !important; order: 3; margin-top: 1rem; border-top: 1px solid var(--border-light); padding-top: 0.5rem; } .navbar-nav.is-open { display: flex; } .navbar-nav li { width: 100%; } .navbar-nav .nav-link { display: block; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--border-light); } .navbar-nav .nav-link::after { display: none; } /* underline hover tidak relevan di tampilan list mobile */ .container { padding: 0 1rem; } }