/* Import Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* Terapkan font ke seluruh halaman */ html, body, h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; } /* Kustomisasi untuk meniru tampilan modern */ .w3-card-4 { border-radius: 8px; } .w3-button { transition: background-color 0.3s, color 0.3s; } /* == DARK MODE STYLES (DENGAN !important) == */ /* Style ini akan aktif ketika memiliki class 'dark-mode' */ /* Latar belakang utama */ body.dark-mode { background-color: #111827 !important; /* dark-primary */ color: #E5E7EB !important; /* brand-text */ } /* Mengganti warna komponen terang menjadi gelap */ body.dark-mode .w3-white, body.dark-mode .w3-light-grey, body.dark-mode .w3-sand { background-color: #1F2937 !important; /* dark-secondary */ color: #E5E7EB !important; } /* Mengganti warna teks utama */ body.dark-mode .w3-text-grey, body.dark-mode .w3-text-dark-grey { color: #9CA3AF !important; /* brand-subtext */ } body.dark-mode .w3-text-black { color: #E5E7EB !important; } /* Mengganti warna border */ body.dark-mode .w3-border-light-grey, body.dark-mode .w3-border-grey, body.dark-mode .w3-border { border-color: #4b5563 !important; } /* Mengganti input form */ body.dark-mode .w3-input::placeholder { color: #9CA3AF !important; } body.dark-mode .w3-input { background: #4b5563 !important; color: #E5E7EB !important; } /* Mengganti warna tema utama menjadi aksen biru */ body.dark-mode .w3-theme, body.dark-mode .w3-theme-d1, body.dark-mode .w3-theme-action { background-color: #38bdf8 !important; /* brand-accent */ color: #111827 !important; /* dark-primary */ border-color: #38bdf8 !important; } body.dark-mode .w3-text-theme { color: #38bdf8 !important; } body.dark-mode .w3-hover-theme:hover { background-color: #38bdf8 !important; color: #111827 !important; } body.dark-mode .w3-theme-d2 { background-color: #171a38 !important; } body.dark-mode .w3-theme-l1 { background-color: #2a316c !important; } /* Ripple Effect (masih bisa dipakai) */ .ripple-btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple-effect 0.6s linear; pointer-events: none; } @keyframes ripple-effect { to { transform: scale(4); opacity: 0; } } .font-responsive-jumbo { font-size: 64px; } .font-responsive-large { font-size: 24px; } /* Ukuran untuk layar lebih kecil (tablet & mobile) */ @media (max-width: 768px) { .font-responsive-jumbo { font-size: 48px; } .font-responsive-large { font-size: 20px; } } /* Ukuran untuk layar sangat kecil (mobile) */ @media (max-width: 600px) { .font-responsive-jumbo { font-size: 40px; } .font-responsive-large { font-size: 18px; } }