/*HALAMAN INDEX*/ /* ========== DARK MODE STYLE ========== */ /* Aktifkan dengan menambahkan class 'dark-mode' pada tag */ body.dark-mode { --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-gradient: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%); --bg-color: #0f0f13; --card-bg: #1a1a1e; --text-primary: #ededee; --text-secondary: #a1a1aa; --border-color: #2a2a2e; --hover-bg: #27272a; --input-bg: #27272a; --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } body.dark-mode { background: var(--bg-color); color: var(--text-primary); } /* Card & Container */ body.dark-mode .create-card, body.dark-mode .post-card, body.dark-mode .sidebar-card, body.dark-mode .empty-state { background: var(--card-bg); border-color: var(--border-color); box-shadow: var(--shadow); } /* Input & Textarea */ body.dark-mode .post-input-wrapper textarea, body.dark-mode .form-row select, body.dark-mode .form-row input { background: var(--input-bg); border-color: var(--border-color); color: var(--text-primary); } body.dark-mode .post-input-wrapper textarea:focus, body.dark-mode .form-row select:focus, body.dark-mode .form-row input:focus { border-color: var(--primary-color); background: #2a2a30; } body.dark-mode .post-input-wrapper textarea::placeholder, body.dark-mode .form-row input::placeholder { color: var(--text-secondary); } /* Buttons */ body.dark-mode .btn-primary { background: var(--primary-gradient); } body.dark-mode .media-label { background: var(--hover-bg); border-color: var(--border-color); color: var(--text-secondary); } body.dark-mode .media-label:hover { background: #3a3a40; } /* Author & Text */ body.dark-mode .author-name strong { color: var(--text-primary); } body.dark-mode .author-name:hover strong { color: var(--primary-light); } body.dark-mode .author-meta, body.dark-mode .post-content p, body.dark-mode .post-content div:not(.post-tags) { color: var(--text-secondary); } body.dark-mode .post-content p { color: #d4d4d8; } /* Category Badges */ body.dark-mode .category-badge.experience { background: #1e3a5f; color: #93c5fd; } body.dark-mode .category-badge.passion { background: #4c1d3d; color: #f9a8d4; } body.dark-mode .category-badge.insight { background: #064e3b; color: #6ee7b7; } body.dark-mode .category-badge.learning { background: #5b2c14; color: #fdba74; } body.dark-mode .category-badge.achievement { background: #4a1c1c; color: #fca5a5; } /* Tags */ body.dark-mode .tag { background: var(--hover-bg); border-color: var(--border-color); color: var(--primary-light); } body.dark-mode .tag:hover { background: var(--border-color); color: var(--primary-color); } /* Action Buttons */ body.dark-mode .action-btn { color: var(--text-secondary); } body.dark-mode .action-btn:hover { background: var(--hover-bg); } body.dark-mode .action-btn.liked { color: #f87171; } body.dark-mode .action-btn.liked .icon-heart { fill: #f87171; stroke: #f87171; } /* Follow Button */ body.dark-mode .follow-btn.following { background: #3a3a40; color: var(--text-secondary); } body.dark-mode .follow-btn.following:hover { background: #5c1e1e; color: #f87171; } /* Sidebar */ body.dark-mode .profile-card { background: linear-gradient(135deg, #1a1a1e 0%, #222226 100%); } body.dark-mode .quote-card { background: linear-gradient(135deg, #1e2a3a 0%, #1a2a3a 100%); border-left-color: var(--primary-color); } body.dark-mode .quote-text { color: var(--text-primary); } body.dark-mode .quote-author { color: var(--text-secondary); } body.dark-mode .trending-tag { background: var(--hover-bg); border-color: var(--border-color); color: var(--primary-light); } body.dark-mode .trending-tag:hover { background: var(--border-color); color: var(--primary-color); } body.dark-mode .stats-row { border-bottom-color: var(--border-color); } body.dark-mode .stats-row span { color: var(--text-secondary); } body.dark-mode .stats-row strong { color: var(--text-primary); } /* Pagination */ body.dark-mode .page-link { background: var(--card-bg); border-color: var(--border-color); color: var(--primary-light); } body.dark-mode .page-link:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; } body.dark-mode .page-info { color: var(--text-secondary); } /* Modal */ body.dark-mode .modal-content { background: var(--card-bg); border: 1px solid var(--border-color); } body.dark-mode .modal-header { border-bottom-color: var(--border-color); } body.dark-mode .modal-header h3 { color: var(--text-primary); } body.dark-mode .close-modal { color: var(--text-secondary); } body.dark-mode .close-modal:hover { color: var(--text-primary); } body.dark-mode .modal-body p { color: var(--text-secondary); } /* Report Modal Options */ body.dark-mode .report-option { color: var(--text-primary); } body.dark-mode .report-option:hover { background: var(--hover-bg); } body.dark-mode .report-description textarea { background: var(--input-bg); border-color: var(--border-color); color: var(--text-primary); } body.dark-mode .report-description textarea:focus { border-color: var(--primary-color); } /* Follow Modal */ body.dark-mode .follow-item { border-bottom-color: var(--border-color); } body.dark-mode .follow-item a { color: var(--text-primary); } body.dark-mode .follow-info span { color: var(--text-secondary); } body.dark-mode .empty-follow { color: var(--text-secondary); } /* Avatar Initials (dark mode tetap premium) */ body.dark-mode .avatar-initials, body.dark-mode .create-avatar { background: var(--primary-gradient); } /* F.B Title Badge - Premium Dark */ body.dark-mode .fb-title-badge { background: linear-gradient(145deg, #1a1a2e 0%, #2a2a3e 50%, #1f1f2e 100%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px #fbbf24; color: #fcd34d; } body.dark-mode .fb-title-badge:hover::after { background: linear-gradient(135deg, #2a2a3e, #1a1a2e); color: #fcd34d; } /* Toast */ body.dark-mode .toast-content { background: #1e293b; } body.dark-mode .toast-success .toast-content { background: #059669; } body.dark-mode .toast-error .toast-content { background: #dc2626; } /* Scrollbar */ body.dark-mode::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-mode::-webkit-scrollbar-track { background: var(--bg-color); } body.dark-mode::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; } body.dark-mode::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* Toggle Dark Mode Button (opsional, tambahkan di HTML) */ .dark-mode-toggle { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-gradient); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 1000; transition: transform 0.2s ease; } .dark-mode-toggle:hover { transform: scale(1.05); } body.dark-mode .dark-mode-toggle { background: var(--primary-gradient); box-shadow: 0 2px 15px rgba(59,130,246,0.3); } /*HALAMAN EXPLORE*/ /* ========== DARK MODE FOR EXPLORE PAGE ========== */ /* Tambahkan class 'dark-mode' pada tag untuk mengaktifkan */ body.dark-mode .explore-header, body.dark-mode .explore-card, body.dark-mode .filter-chip, body.dark-mode .popular-users, body.dark-mode .empty-state, body.dark-mode .page-link { background: var(--card-bg, #1a1a1e); border-color: var(--border-color, #2a2a2e); } body.dark-mode .explore-container { background: var(--bg-color, #0f0f13); } /* Header & Typography */ body.dark-mode .explore-header h1 { color: var(--text-primary, #ededee); } body.dark-mode .explore-header p { color: var(--text-secondary, #a1a1aa); } /* Search Bar */ body.dark-mode .search-wrapper { background: var(--input-bg, #27272a); } body.dark-mode .search-wrapper i { color: var(--text-secondary, #a1a1aa); } body.dark-mode .search-wrapper input { color: var(--text-primary, #ededee); } body.dark-mode .search-wrapper input::placeholder { color: var(--text-secondary, #a1a1aa); } body.dark-mode .search-wrapper button { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } body.dark-mode .clear-search { color: var(--text-secondary, #a1a1aa); } body.dark-mode .clear-search:hover { color: var(--text-primary, #ededee); } /* Category Filter */ body.dark-mode .filter-chip { color: var(--text-secondary, #a1a1aa); background: var(--card-bg, #1a1a1e); box-shadow: none; } body.dark-mode .filter-chip:hover { background: var(--hover-bg, #27272a); color: var(--text-primary, #ededee); } body.dark-mode .filter-chip.active { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); color: white; } /* Search Info */ body.dark-mode .search-info { background: var(--hover-bg, #27272a); color: var(--text-secondary, #a1a1aa); } body.dark-mode .search-info strong { color: var(--text-primary, #ededee); } /* Explore Card */ body.dark-mode .explore-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.dark-mode .explore-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); } /* Image Container */ body.dark-mode .explore-image { background: var(--hover-bg, #27272a); } /* Author Section */ body.dark-mode .explore-author strong { color: var(--text-primary, #ededee); } body.dark-mode .explore-author span { color: var(--text-secondary, #a1a1aa); } /* Post Text */ body.dark-mode .explore-text { color: var(--text-secondary, #a1a1aa); } /* Stats */ body.dark-mode .explore-stats { color: var(--text-secondary, #a1a1aa); } /* Category Tag */ body.dark-mode .category-tag { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; } /* Text Card Aesthetic */ body.dark-mode .text-card { background: linear-gradient(135deg, #1a1a1e 0%, #222226 100%); } body.dark-mode .text-card-quote { color: var(--primary-color, #3b82f6); opacity: 0.2; } body.dark-mode .text-card-content p { color: var(--text-primary, #ededee); } body.dark-mode .text-card-author { border-top-color: var(--border-color, #2a2a2e); border-bottom-color: var(--border-color, #2a2a2e); background: rgba(255, 255, 255, 0.03); } body.dark-mode .author-info strong { color: var(--text-primary, #ededee); } body.dark-mode .author-info span { color: var(--text-secondary, #a1a1aa); } body.dark-mode .text-card-readmore { color: var(--primary-light, #60a5fa); } /* Video Card */ body.dark-mode .video-container { background: #0a0a0e; } body.dark-mode .video-placeholder { background: linear-gradient(135deg, #1e3a5f 0%, #0a1a2a 100%); } body.dark-mode .video-duration-badge { background: rgba(0, 0, 0, 0.8); } /* Popular Users Sidebar */ body.dark-mode .popular-users { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.dark-mode .popular-users h3 { color: var(--text-primary, #ededee); } body.dark-mode .popular-user { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .popular-user-link { color: var(--text-primary, #ededee); } body.dark-mode .popular-user-link span { color: var(--text-secondary, #a1a1aa); } body.dark-mode .btn-follow-small { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } body.dark-mode .btn-follow-small.following { background: #10b981; } body.dark-mode .btn-follow-small.following:hover { background: #059669; } /* Pagination */ body.dark-mode .page-link { color: var(--text-secondary, #a1a1aa); background: var(--card-bg, #1a1a1e); } body.dark-mode .page-link:hover { background: var(--primary-color, #3b82f6); color: white; } body.dark-mode .page-info { color: var(--text-secondary, #a1a1aa); } /* Empty State */ body.dark-mode .empty-state { background: var(--card-bg, #1a1a1e); } body.dark-mode .empty-state h3 { color: var(--text-primary, #ededee); } body.dark-mode .empty-state p { color: var(--text-secondary, #a1a1aa); } /* Avatar & Initials */ body.dark-mode .avatar-small-initial, body.dark-mode .popular-avatar-initial { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } /* Responsive Dark Mode */ @media (max-width: 768px) { body.dark-mode .category-filter { background: var(--card-bg, #1a1a1e); border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .explore-header { background: var(--card-bg, #1a1a1e); } } /* Smooth Transition */ body.dark-mode .explore-card, body.dark-mode .filter-chip, body.dark-mode .page-link, body.dark-mode .btn-follow-small { transition: all 0.2s ease; } /*HALAMAN NOTIFIKASI*/ /* ========== DARK MODE FOR NOTIFICATIONS PAGE ========== */ /* Tambahkan class 'dark-mode' pada tag untuk mengaktifkan */ /* Container utama */ body.dark-mode .notifications-container { background: var(--bg-color, #0f0f13); } /* Header Notifikasi */ body.dark-mode .notifications-header { background: var(--card-bg, #1a1a1e); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } body.dark-mode .notifications-header h1 { color: var(--text-primary, #ededee); } body.dark-mode .unread-badge { background: #ed4956; } /* Mark All Read Button */ body.dark-mode .mark-all-read { color: var(--primary-light, #60a5fa); } body.dark-mode .mark-all-read:hover { background: var(--hover-bg, #27272a); } /* List Notifikasi */ body.dark-mode .notifications-list { gap: 8px; } /* Item Notifikasi */ body.dark-mode .notification-item { background: var(--card-bg, #1a1a1e); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } body.dark-mode .notification-item.unread { background: rgba(59, 130, 246, 0.1); border-left-color: var(--primary-color, #3b82f6); } body.dark-mode .notification-item:hover { background: var(--hover-bg, #27272a); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* Icon Notifikasi */ body.dark-mode .notification-icon { background: var(--hover-bg, #27272a); } /* Konten Notifikasi */ body.dark-mode .notification-content p { color: var(--text-primary, #ededee); } body.dark-mode .notification-time { color: var(--text-secondary, #a1a1aa); } /* Delete Button */ body.dark-mode .delete-notif { color: var(--text-secondary, #a1a1aa); } body.dark-mode .delete-notif:hover { background: rgba(239, 68, 68, 0.15); color: #f87171; } /* Empty State */ body.dark-mode .empty-notifications { background: var(--card-bg, #1a1a1e); } body.dark-mode .empty-notifications i { color: var(--border-color, #2a2a2e); } body.dark-mode .empty-notifications h3 { color: var(--text-primary, #ededee); } body.dark-mode .empty-notifications p { color: var(--text-secondary, #a1a1aa); } /* Modal */ body.dark-mode .modal-content { background: var(--card-bg, #1a1a1e); border: 1px solid var(--border-color, #2a2a2e); } body.dark-mode .modal-header { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .modal-header h3 { color: var(--text-primary, #ededee); } body.dark-mode .close-modal { color: var(--text-secondary, #a1a1aa); } body.dark-mode .close-modal:hover { color: var(--text-primary, #ededee); } /* Modal Body */ body.dark-mode .modal-body { background: var(--card-bg, #1a1a1e); } body.dark-mode #modalContent { color: var(--text-primary, #ededee); } body.dark-mode .notif-detail-time { color: var(--text-secondary, #a1a1aa); } /* Modal Footer */ body.dark-mode .modal-footer { border-top-color: var(--border-color, #2a2a2e); } body.dark-mode .btn-secondary { background: var(--hover-bg, #27272a); color: var(--text-primary, #ededee); } body.dark-mode .btn-secondary:hover { background: var(--border-color, #2a2a2e); } /* Ikon Warna dalam Dark Mode (tetap menarik) */ body.dark-mode .notification-icon i.fa-heart { color: #f87171 !important; } body.dark-mode .notification-icon i.fa-comment { color: #34d399 !important; } body.dark-mode .notification-icon i.fa-user-plus { color: #818cf8 !important; } body.dark-mode .notification-icon i.fa-retweet { color: #34d399 !important; } body.dark-mode .notification-icon i.fa-info-circle { color: #60a5fa !important; } body.dark-mode .notification-icon i.fa-check-circle { color: #34d399 !important; } body.dark-mode .notification-icon i.fa-exclamation-triangle { color: #fbbf24 !important; } body.dark-mode .notification-icon i.fa-bell { color: var(--text-secondary, #a1a1aa) !important; } /* Toast Notification Dark Mode */ body.dark-mode .toast-content { background: #1e1e2f; } body.dark-mode .toast-success .toast-content { background: #059669; } body.dark-mode .toast-error .toast-content { background: #dc2626; } /* Responsive Dark Mode */ @media (max-width: 768px) { body.dark-mode .notifications-header { background: var(--card-bg, #1a1a1e); border-bottom: 1px solid var(--border-color, #2a2a2e); } body.dark-mode .notification-item { border-bottom: 1px solid var(--border-color, #2a2a2e); } body.dark-mode .notification-item.unread { border-left: 4px solid var(--primary-color, #3b82f6); } } /* Animasi Smooth */ body.dark-mode .notification-item, body.dark-mode .mark-all-read, body.dark-mode .delete-notif, body.dark-mode .btn-secondary { transition: all 0.2s ease; } /* Scrollbar untuk Modal */ body.dark-mode .modal-content::-webkit-scrollbar { width: 6px; } body.dark-mode .modal-content::-webkit-scrollbar-track { background: var(--bg-color, #0f0f13); border-radius: 10px; } body.dark-mode .modal-content::-webkit-scrollbar-thumb { background: var(--border-color, #2a2a2e); border-radius: 10px; } body.dark-mode .modal-content::-webkit-scrollbar-thumb:hover { background: var(--text-secondary, #a1a1aa); } /*HALAMAN PROFILE*/ /* ========== DARK MODE FOR PROFILE PAGE ========== */ /* Tambahkan class 'dark-mode' pada tag untuk mengaktifkan */ /* Body & Container */ body.dark-mode { background: var(--bg-color, #0f0f13); } body.dark-mode .profile-container { background: transparent; } /* Profile Header */ body.dark-mode .profile-avatar-large { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } body.dark-mode .profile-name { color: var(--text-primary, #ededee); } body.dark-mode .profile-username { color: var(--text-secondary, #a1a1aa); } /* Stats */ body.dark-mode .stat-number { color: var(--text-primary, #ededee); } body.dark-mode .stat-label { color: var(--text-secondary, #a1a1aa); } /* Bio & Meta */ body.dark-mode .profile-bio p { color: var(--text-primary, #ededee); } body.dark-mode .profile-meta { color: var(--text-secondary, #a1a1aa); } /* Interests Tags */ body.dark-mode .interest-tag { background: var(--hover-bg, #27272a); color: var(--primary-light, #60a5fa); } body.dark-mode .interest-tag:hover { background: var(--border-color, #2a2a2e); } /* Buttons */ body.dark-mode .btn-follow { background: var(--primary-color, #3b82f6); } body.dark-mode .btn-follow:hover { background: #2563eb; } body.dark-mode .btn-follow.following { background: var(--hover-bg, #27272a); color: var(--text-primary, #ededee); } body.dark-mode .btn-follow.following:hover { background: rgba(239, 68, 68, 0.2); color: #f87171; } body.dark-mode .btn-edit-profile { background: var(--hover-bg, #27272a); color: var(--text-primary, #ededee); } body.dark-mode .btn-edit-profile:hover { background: var(--border-color, #2a2a2e); } body.dark-mode .btn-logout { background: var(--hover-bg, #27272a); color: #f87171; } body.dark-mode .btn-logout:hover { background: #dc2626; color: white; } /* Profile Posts Section */ body.dark-mode .profile-posts { border-top-color: var(--border-color, #2a2a2e); } /* Posts Grid */ body.dark-mode .grid-post { background: var(--hover-bg, #27272a); } /* Text Post Card */ body.dark-mode .text-post-card { background: linear-gradient(135deg, #1a1a1e 0%, #222226 100%); } body.dark-mode .text-post-content p { color: var(--text-primary, #ededee); } body.dark-mode .text-post-footer { border-top-color: var(--border-color, #2a2a2e); color: var(--text-secondary, #a1a1aa); } body.dark-mode .category-badge { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; } /* Video Placeholder */ body.dark-mode .video-placeholder { background: linear-gradient(135deg, #1e3a5f 0%, #0a1a2a 100%); } /* Grid Post Overlay */ body.dark-mode .grid-post-overlay { background: rgba(0, 0, 0, 0.7); } body.dark-mode .grid-stats { color: white; } /* Empty Posts */ body.dark-mode .empty-posts { color: var(--text-secondary, #a1a1aa); } body.dark-mode .empty-posts i { color: var(--border-color, #2a2a2e); } body.dark-mode .empty-posts p { color: var(--text-secondary, #a1a1aa); } body.dark-mode .btn-primary { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } body.dark-mode .btn-primary:hover { background: var(--primary-color, #3b82f6); } /* Pagination */ body.dark-mode .page-link { background: var(--hover-bg, #27272a); color: var(--text-primary, #ededee); } body.dark-mode .page-link:hover { background: var(--border-color, #2a2a2e); } body.dark-mode .page-info { color: var(--text-secondary, #a1a1aa); } /* Modal */ body.dark-mode .modal-content { background: var(--card-bg, #1a1a1e); border: 1px solid var(--border-color, #2a2a2e); } body.dark-mode .modal-header { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .modal-header h3 { color: var(--text-primary, #ededee); } body.dark-mode .close-modal { color: var(--text-secondary, #a1a1aa); } body.dark-mode .close-modal:hover { color: var(--text-primary, #ededee); } /* Form Group */ body.dark-mode .form-group label { color: var(--text-primary, #ededee); } body.dark-mode .form-group input, body.dark-mode .form-group textarea { background: var(--input-bg, #27272a); border-color: var(--border-color, #2a2a2e); color: var(--text-primary, #ededee); } body.dark-mode .form-group input:focus, body.dark-mode .form-group textarea:focus { border-color: var(--primary-color, #3b82f6); outline: none; } body.dark-mode .form-group input::placeholder, body.dark-mode .form-group textarea::placeholder { color: var(--text-secondary, #a1a1aa); } body.dark-mode .form-group small { color: var(--text-secondary, #a1a1aa) !important; } /* Avatar Upload */ body.dark-mode .avatar-preview { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } body.dark-mode .btn-secondary { background: var(--hover-bg, #27272a); color: var(--text-primary, #ededee); } body.dark-mode .btn-secondary:hover { background: var(--border-color, #2a2a2e); } body.dark-mode #removeAvatarBtn { background: rgba(220, 38, 38, 0.15); color: #f87171; } body.dark-mode #removeAvatarBtn:hover { background: rgba(220, 38, 38, 0.3); color: #ef4444; } /* Follow Modal */ body.dark-mode .follow-item { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .follow-item a { color: var(--text-primary, #ededee); } body.dark-mode .follow-info span { color: var(--text-secondary, #a1a1aa); } body.dark-mode .empty-follow { color: var(--text-secondary, #a1a1aa); } /* Toast Notification */ body.dark-mode .toast-content { background: #1e1e2f; } body.dark-mode .toast-success .toast-content { background: #059669; } body.dark-mode .toast-error .toast-content { background: #dc2626; } /* F.B Title Badge - Dark Mode Premium */ body.dark-mode .fb-title { background: linear-gradient(145deg, #1a1a2e 0%, #2a2a3e 50%, #1f1f2e 100%); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 0 2px #fbbf24, 0 0 0 5px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.1); color: #fcd34d; } body.dark-mode .fb-title:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 0 2px #fcd34d, 0 0 0 5px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2); color: #fde047; } /* Tooltip Premium Dark Mode */ body.dark-mode .fb-tooltip-overlay { background: rgba(0, 0, 0, 0.85); } body.dark-mode .fb-tooltip-premium { background: linear-gradient(145deg, #1a1a2e, #0a0a1a); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 3px #fbbf24, 0 0 30px rgba(255, 215, 0, 0.3); color: #fcd34d; } /* Responsive Dark Mode */ @media (max-width: 735px) { body.dark-mode .profile-container { background: var(--bg-color, #0f0f13); } body.dark-mode .profile-posts { border-top-color: var(--border-color, #2a2a2e); } } /* Scrollbar */ body.dark-mode::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-mode::-webkit-scrollbar-track { background: var(--bg-color, #0f0f13); } body.dark-mode::-webkit-scrollbar-thumb { background: var(--border-color, #2a2a2e); border-radius: 10px; } body.dark-mode::-webkit-scrollbar-thumb:hover { background: var(--text-secondary, #a1a1aa); } /* Modal Scrollbar */ body.dark-mode .modal-content::-webkit-scrollbar { width: 6px; } body.dark-mode .modal-content::-webkit-scrollbar-track { background: var(--bg-color, #0f0f13); border-radius: 10px; } body.dark-mode .modal-content::-webkit-scrollbar-thumb { background: var(--border-color, #2a2a2e); border-radius: 10px; } /* Smooth Transitions */ body.dark-mode .profile-avatar-large, body.dark-mode .fb-title, body.dark-mode .btn-follow, body.dark-mode .btn-edit-profile, body.dark-mode .btn-logout, body.dark-mode .grid-post, body.dark-mode .text-post-card, body.dark-mode .interest-tag, body.dark-mode .page-link, body.dark-mode .modal-content { transition: all 0.2s ease; } /*HALAMAN POST*/ /* ========== DARK MODE FOR POST DETAIL PAGE ========== */ /* Tambahkan class 'dark-mode' pada tag untuk mengaktifkan */ /* Body & Background */ body.dark-mode { background: var(--bg-color, #0f0f13); } /* Native Navbar */ body.dark-mode .native-navbar { background: rgba(26, 26, 30, 0.96); backdrop-filter: blur(10px); border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .nav-back { color: var(--primary-light, #60a5fa); } body.dark-mode .nav-title { color: var(--text-primary, #ededee); } body.dark-mode .nav-action-btn { color: var(--primary-light, #60a5fa); } /* Post Detail Card */ body.dark-mode .post-detail-card { background: var(--card-bg, #1a1a1e); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* Post Header */ body.dark-mode .post-author-info strong { color: var(--text-primary, #ededee); } body.dark-mode .post-author-info span { color: var(--text-secondary, #a1a1aa); } /* Category Badges */ body.dark-mode .category-badge.experience { background: rgba(25, 103, 210, 0.15); color: #60a5fa; } body.dark-mode .category-badge.passion { background: rgba(194, 24, 91, 0.15); color: #f472b6; } body.dark-mode .category-badge.insight { background: rgba(0, 105, 92, 0.15); color: #34d399; } body.dark-mode .category-badge.learning { background: rgba(230, 81, 0, 0.15); color: #fb923c; } body.dark-mode .category-badge.achievement { background: rgba(191, 54, 12, 0.15); color: #f87171; } /* Post Content */ body.dark-mode .post-content p { color: var(--text-primary, #ededee); } /* Tags */ body.dark-mode .tag { background: var(--hover-bg, #27272a); color: var(--primary-light, #60a5fa); } /* Post Media */ body.dark-mode .post-media { background: var(--hover-bg, #27272a); } /* Post Stats */ body.dark-mode .post-stats { border-top-color: var(--border-color, #2a2a2e); border-bottom-color: var(--border-color, #2a2a2e); color: var(--text-secondary, #a1a1aa); } /* Post Actions */ body.dark-mode .action-btn { color: var(--text-secondary, #a1a1aa); } body.dark-mode .action-btn:active { opacity: 0.7; } body.dark-mode .action-btn.liked { color: #f87171; } /* Comments Section */ body.dark-mode .comments-section { background: var(--card-bg, #1a1a1e); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } body.dark-mode .comments-section h3 { color: var(--text-primary, #ededee); border-bottom-color: var(--border-color, #2a2a2e); } /* Comment Input */ body.dark-mode .comment-input-area { background: var(--hover-bg, #27272a); } body.dark-mode .comment-input-area textarea { color: var(--text-primary, #ededee); } body.dark-mode .comment-input-area textarea::placeholder { color: var(--text-secondary, #a1a1aa); } body.dark-mode .submit-comment-btn { color: var(--primary-light, #60a5fa); } body.dark-mode .submit-comment-btn:active { background: rgba(96, 165, 250, 0.1); } /* Comment Item */ body.dark-mode .comment-item { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .comment-author { color: var(--text-primary, #ededee); } body.dark-mode .comment-text { color: var(--text-primary, #ededee); } body.dark-mode .comment-time { color: var(--text-secondary, #a1a1aa); } /* Comment Action Buttons */ body.dark-mode .report-comment-btn { color: #fb923c; } body.dark-mode .delete-comment-btn { color: #f87171; } body.dark-mode .report-comment-btn:active, body.dark-mode .delete-comment-btn:active { background: var(--hover-bg, #27272a); } /* Login to Comment */ body.dark-mode .login-to-comment { background: var(--hover-bg, #27272a); color: var(--text-secondary, #a1a1aa); } body.dark-mode .login-to-comment a { color: var(--primary-light, #60a5fa); } /* Empty Comments */ body.dark-mode .empty-comments { color: var(--text-secondary, #a1a1aa); } /* Avatar Initials */ body.dark-mode .post-avatar, body.dark-mode .comment-avatar-initial { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } /* Modal (Native Modal) */ body.dark-mode .native-modal-content { background: var(--card-bg, #1a1a1e); border: 1px solid var(--border-color, #2a2a2e); } body.dark-mode .native-modal-title { color: var(--text-primary, #ededee); } body.dark-mode .native-modal-message { color: var(--text-secondary, #a1a1aa); } body.dark-mode .native-modal-buttons { border-top-color: var(--border-color, #2a2a2e); } body.dark-mode .native-modal-btn { color: var(--primary-light, #60a5fa); } body.dark-mode .native-modal-btn:active { background: var(--hover-bg, #27272a); } body.dark-mode .native-modal-btn:first-child { border-right-color: var(--border-color, #2a2a2e); } body.dark-mode .native-modal-btn.destructive { color: #f87171; } /* Report Modal Radio Options */ body.dark-mode #reportModal label { background: var(--hover-bg, #27272a) !important; color: var(--text-primary, #ededee) !important; } body.dark-mode #reportModal textarea { background: var(--input-bg, #27272a); border-color: var(--border-color, #2a2a2e); color: var(--text-primary, #ededee); } body.dark-mode #reportModal textarea:focus { border-color: var(--primary-color, #3b82f6); outline: none; } body.dark-mode #reportModal textarea::placeholder { color: var(--text-secondary, #a1a1aa); } /* Toast Notification */ body.dark-mode .toast { background: rgba(30, 30, 47, 0.95); backdrop-filter: blur(10px); color: var(--text-primary, #ededee); } /* Spinner */ body.dark-mode .spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: var(--primary-light, #60a5fa); } /* Responsive Dark Mode */ @media (max-width: 768px) { body.dark-mode .post-detail-container { background: var(--bg-color, #0f0f13); } body.dark-mode .native-navbar { background: rgba(26, 26, 30, 0.98); } } /* Scrollbar for Comments List */ body.dark-mode .comments-list::-webkit-scrollbar { width: 4px; } body.dark-mode .comments-list::-webkit-scrollbar-track { background: var(--bg-color, #0f0f13); border-radius: 10px; } body.dark-mode .comments-list::-webkit-scrollbar-thumb { background: var(--border-color, #2a2a2e); border-radius: 10px; } /* Smooth Transitions */ body.dark-mode .post-detail-card, body.dark-mode .comments-section, body.dark-mode .comment-item, body.dark-mode .action-btn, body.dark-mode .native-modal-content { transition: all 0.2s ease; } /* Video Player Dark Mode */ body.dark-mode .post-media video { background: #0a0a0e; } /* Image Loading State */ body.dark-mode .post-media img { background: var(--hover-bg, #27272a); } /*HEADER*/ /* ========== DARK MODE FOR HEADER & FOOTER ========== */ /* Tambahkan class 'dark-mode' pada tag untuk mengaktifkan */ /* ======================================== */ /* HEADER DARK MODE STYLES */ /* ======================================== */ body.dark-mode .header { background: var(--card-bg, #1a1a1e); border-bottom-color: var(--border-color, #2a2a2e); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } body.dark-mode .logo { color: var(--text-primary, #ededee); } body.dark-mode .logo span { color: var(--primary-light, #60a5fa); } /* Navigation Menu */ body.dark-mode .nav-menu a { color: var(--text-secondary, #a1a1aa); } body.dark-mode .nav-menu a:hover { color: var(--primary-light, #60a5fa); background: var(--hover-bg, #27272a); } body.dark-mode .nav-menu a.active { color: var(--primary-light, #60a5fa); border-bottom-color: var(--primary-color, #3b82f6); } /* Navigation Icons */ body.dark-mode .nav-menu a i { color: var(--text-secondary, #a1a1aa); } body.dark-mode .nav-menu a:hover i { color: var(--primary-light, #60a5fa); } body.dark-mode .nav-menu a.active i { color: var(--primary-light, #60a5fa); } /* Desktop Button Primary */ body.dark-mode .nav-menu .btn-primary { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); color: white; } body.dark-mode .nav-menu .btn-primary:hover { background: var(--primary-color, #3b82f6); transform: translateY(-1px); } /* Notification Badge */ body.dark-mode .notification-badge, body.dark-mode .mobile-notif-badge { background: #f87171; color: white; } /* Mobile Header */ body.dark-mode .header.mobile-only { background: var(--card-bg, #1a1a1e); border-bottom: 1px solid var(--border-color, #2a2a2e); } /* ======================================== */ /* FOOTER DARK MODE STYLES */ /* ======================================== */ body.dark-mode .footer { background: var(--card-bg, #1a1a1e); border-top: 1px solid var(--border-color, #2a2a2e); color: var(--text-secondary, #a1a1aa); } body.dark-mode .footer h5 { color: var(--text-primary, #ededee); } body.dark-mode .footer a { color: var(--text-secondary, #a1a1aa); } body.dark-mode .footer a:hover { color: var(--primary-light, #60a5fa); } body.dark-mode .footer .copyright { color: var(--text-secondary, #a1a1aa); border-top-color: var(--border-color, #2a2a2e); } /* Footer Social Icons */ body.dark-mode .footer .social-icons a { background: var(--hover-bg, #27272a); color: var(--text-secondary, #a1a1aa); } body.dark-mode .footer .social-icons a:hover { background: var(--primary-color, #3b82f6); color: white; } /* Footer Links */ body.dark-mode .footer-links li a { color: var(--text-secondary, #a1a1aa); } body.dark-mode .footer-links li a:hover { color: var(--primary-light, #60a5fa); } /* ======================================== */ /* ADMIN BADGE DARK MODE */ /* ======================================== */ body.dark-mode .admin-badge { background: #f87171; color: #1a1a1e; } /* ======================================== */ /* RESPONSIVE DARK MODE */ /* ======================================== */ @media (max-width: 768px) { body.dark-mode .header.mobile-only { background: var(--card-bg, #1a1a1e); } body.dark-mode .mobile-nav { background: var(--card-bg, #1a1a1e); border-top-color: var(--border-color, #2a2a2e); } body.dark-mode .mobile-nav a { color: var(--text-secondary, #a1a1aa); } body.dark-mode .mobile-nav a.active { color: var(--primary-light, #60a5fa); } body.dark-mode .mobile-nav a i { color: var(--text-secondary, #a1a1aa); } body.dark-mode .mobile-nav a.active i { color: var(--primary-light, #60a5fa); } } /* ======================================== */ /* SMOOTH TRANSITIONS */ /* ======================================== */ body.dark-mode .header, body.dark-mode .nav-menu a, body.dark-mode .footer, body.dark-mode .footer a, body.dark-mode .social-icons a, body.dark-mode .notification-badge { transition: all 0.2s ease; } /*FOOTER*/ /* ========== DARK MODE FOR FOOTER & MODALS ========== */ /* Tambahkan class 'dark-mode' pada tag untuk mengaktifkan */ /* ======================================== */ /* FOOTER DARK MODE */ /* ======================================== */ body.dark-mode footer.desktop-nav { background: var(--card-bg, #1a1a1e) !important; border-top: 1px solid var(--border-color, #2a2a2e); } body.dark-mode footer h3, body.dark-mode footer h4 { color: var(--text-primary, #ededee) !important; } body.dark-mode footer p { color: var(--text-secondary, #a1a1aa) !important; } body.dark-mode footer ul li a { color: var(--text-secondary, #a1a1aa) !important; } body.dark-mode footer ul li a:hover { color: var(--primary-light, #60a5fa) !important; } body.dark-mode footer .footer-bottom, body.dark-mode footer div[style*="border-top"] { border-top-color: var(--border-color, #2a2a2e) !important; } body.dark-mode footer .social-icons a, body.dark-mode footer div[style*="gap: 16px"] a { color: var(--text-secondary, #a1a1aa) !important; } body.dark-mode footer .social-icons a:hover, body.dark-mode footer div[style*="gap: 16px"] a:hover { color: var(--primary-light, #60a5fa) !important; } /* ======================================== */ /* FLOATING CREATE BUTTON - MOBILE */ /* ======================================== */ body.dark-mode .floating-create-btn { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } body.dark-mode .floating-create-btn:active { background: var(--primary-color, #3b82f6); } /* ======================================== */ /* MODAL OVERLAY */ /* ======================================== */ body.dark-mode .modal-overlay { background: rgba(0, 0, 0, 0.7); } /* ======================================== */ /* CREATE POST MODAL */ /* ======================================== */ body.dark-mode .create-modal { background: var(--card-bg, #1a1a1e); border: 1px solid var(--border-color, #2a2a2e); } body.dark-mode .create-modal-header { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .create-modal-header h3 { color: var(--text-primary, #ededee); } body.dark-mode .create-modal-header button { color: var(--text-secondary, #a1a1aa); } body.dark-mode .create-modal-header button:hover { color: var(--text-primary, #ededee); } body.dark-mode #mobilePostForm textarea, body.dark-mode #mobilePostForm select, body.dark-mode #mobilePostForm input { background: var(--input-bg, #27272a); border-color: var(--border-color, #2a2a2e); color: var(--text-primary, #ededee); } body.dark-mode #mobilePostForm textarea:focus, body.dark-mode #mobilePostForm select:focus, body.dark-mode #mobilePostForm input:focus { border-color: var(--primary-color, #3b82f6); outline: none; } body.dark-mode #mobilePostForm textarea::placeholder, body.dark-mode #mobilePostForm input::placeholder { color: var(--text-secondary, #a1a1aa); } body.dark-mode #mobilePostForm label { background: var(--hover-bg, #27272a); color: var(--text-secondary, #a1a1aa); border: 1px solid var(--border-color, #2a2a2e); } body.dark-mode #mobilePostForm label:hover { background: var(--border-color, #2a2a2e); } /* ======================================== */ /* MOBILE BOTTOM NAVIGATION */ /* ======================================== */ body.dark-mode .mobile-bottom-nav { background: var(--card-bg, #1a1a1e); border-top-color: var(--border-color, #2a2a2e); } body.dark-mode .bottom-nav-item { color: var(--text-secondary, #a1a1aa); } body.dark-mode .bottom-nav-item.active { color: var(--primary-light, #60a5fa); } body.dark-mode .bottom-nav-item i { color: inherit; } body.dark-mode .bottom-nav-item .notification-badge, body.dark-mode .bottom-nav-item span[style*="background: #ef4444"] { background: #f87171 !important; } /* ======================================== */ /* COMMENT MODAL */ /* ======================================== */ body.dark-mode .modal-content { background: var(--card-bg, #1a1a1e); border: 1px solid var(--border-color, #2a2a2e); } body.dark-mode .modal-header { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .modal-header h3 { color: var(--text-primary, #ededee); } body.dark-mode .close-modal { color: var(--text-secondary, #a1a1aa); } body.dark-mode .close-modal:hover { color: var(--text-primary, #ededee); } /* Comments List */ body.dark-mode .comments-list { background: var(--card-bg, #1a1a1e); } body.dark-mode .comment-item { border-bottom-color: var(--border-color, #2a2a2e); } body.dark-mode .comment-author { color: var(--text-primary, #ededee); } body.dark-mode .comment-text { color: var(--text-primary, #ededee); } body.dark-mode .comment-time { color: var(--text-secondary, #a1a1aa); } /* Comment Avatar */ body.dark-mode .comment-avatar-initial { background: var(--primary-gradient, linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%)); } /* Comment Actions */ body.dark-mode .report-comment-btn { color: #fb923c; } body.dark-mode .report-comment-btn:hover { background: rgba(251, 146, 60, 0.15); } body.dark-mode .delete-comment-btn { color: #f87171; } body.dark-mode .delete-comment-btn:hover { background: rgba(248, 113, 113, 0.15); } /* Comment Input */ body.dark-mode .comment-input-wrapper { border-top-color: var(--border-color, #2a2a2e); } body.dark-mode .comment-input-area { background: var(--hover-bg, #27272a); } body.dark-mode .comment-input-area textarea { color: var(--text-primary, #ededee); } body.dark-mode .comment-input-area textarea::placeholder { color: var(--text-secondary, #a1a1aa); } body.dark-mode .submit-comment-btn { color: var(--primary-light, #60a5fa); } body.dark-mode .submit-comment-btn:disabled { opacity: 0.5; } /* Loading & Empty States */ body.dark-mode .loading-comments, body.dark-mode .empty-comments { color: var(--text-secondary, #a1a1aa); } /* ======================================== */ /* REPORT COMMENT MODAL */ /* ======================================== */ body.dark-mode .report-reasons { background: transparent; } body.dark-mode .report-option { background: var(--hover-bg, #27272a); } body.dark-mode .report-option:hover { background: var(--border-color, #2a2a2e); } body.dark-mode .report-option span { color: var(--text-primary, #ededee); } body.dark-mode .report-option i { color: var(--text-secondary, #a1a1aa); } body.dark-mode .report-description textarea { background: var(--input-bg, #27272a); border-color: var(--border-color, #2a2a2e); color: var(--text-primary, #ededee); } body.dark-mode .report-description textarea:focus { border-color: var(--primary-color, #3b82f6); outline: none; } body.dark-mode .report-description textarea::placeholder { color: var(--text-secondary, #a1a1aa); } body.dark-mode .btn-secondary { background: var(--hover-bg, #27272a); color: var(--text-primary, #ededee); } body.dark-mode .btn-secondary:hover { background: var(--border-color, #2a2a2e); } /* ======================================== */ /* SHARE MODAL */ /* ======================================== */ body.dark-mode .share-post-info { background: var(--hover-bg, #27272a); } body.dark-mode .share-post-text strong { color: var(--text-primary, #ededee); } body.dark-mode .share-post-text p { color: var(--text-secondary, #a1a1aa); } body.dark-mode .share-option { background: transparent; } body.dark-mode .share-option:hover { background: var(--hover-bg, #27272a); } body.dark-mode .share-label strong { color: var(--text-primary, #ededee); } body.dark-mode .share-label span { color: var(--text-secondary, #a1a1aa); } /* Share Icons in Dark Mode (tetap berwarna) */ body.dark-mode .copy-icon { background: #6b7280; } body.dark-mode .wa-icon { background: #25D366; } body.dark-mode .ig-icon { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); } body.dark-mode .fb-icon { background: #1877F2; } body.dark-mode .twitter-icon { background: #1DA1F2; } body.dark-mode .telegram-icon { background: #0088cc; } body.dark-mode .repost-icon { background: #10b981; } /* ======================================== */ /* TOAST NOTIFICATION */ /* ======================================== */ body.dark-mode .toast { background: rgba(30, 30, 47, 0.95); backdrop-filter: blur(10px); } body.dark-mode .toast[style*="background: #10b981"] { background: #059669 !important; } body.dark-mode .toast[style*="background: #ef4444"] { background: #dc2626 !important; } /* ======================================== */ /* RESPONSIVE DARK MODE */ /* ======================================== */ @media (max-width: 768px) { body.dark-mode .mobile-bottom-nav { background: var(--card-bg, #1a1a1e); } body.dark-mode .create-modal { background: var(--card-bg, #1a1a1e); } } /* ======================================== */ /* ANIMATIONS */ /* ======================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ======================================== */ /* SMOOTH TRANSITIONS */ /* ======================================== */ body.dark-mode .modal-content, body.dark-mode .comment-item, body.dark-mode .share-option, body.dark-mode .report-option, body.dark-mode .mobile-bottom-nav, body.dark-mode .floating-create-btn { transition: all 0.2s ease; } /* ======================================== */ /* SCROLLBAR DARK MODE */ /* ======================================== */ body.dark-mode .comments-list::-webkit-scrollbar { width: 4px; } body.dark-mode .comments-list::-webkit-scrollbar-track { background: var(--bg-color, #0f0f13); border-radius: 10px; } body.dark-mode .comments-list::-webkit-scrollbar-thumb { background: var(--border-color, #2a2a2e); border-radius: 10px; } body.dark-mode .modal-content::-webkit-scrollbar { width: 6px; } body.dark-mode .modal-content::-webkit-scrollbar-track { background: var(--bg-color, #0f0f13); border-radius: 10px; } body.dark-mode .modal-content::-webkit-scrollbar-thumb { background: var(--border-color, #2a2a2e); border-radius: 10px; } /* Dark Mode Toggle Button */ .dark-mode-toggle { position: fixed; top: 20px; right: 20px; width: 45px; height: 45px; border-radius: 50%; background: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 9999; transition: all 0.3s ease; } .dark-mode-toggle:hover { transform: scale(1.1); } body.dark-mode .dark-mode-toggle { background: #1e293b; color: #fbbf24; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { .dark-mode-toggle { top: 15px; right: 15px; width: 40px; height: 40px; font-size: 18px; } } /* ======================================== */ /* HEADER DARK MODE - DESKTOP & MOBILE */ /* ======================================== */ /* Desktop Header */ body.dark-mode .header.desktop-nav { background: #1a1a1e !important; border-bottom: 1px solid #2a2a2e !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } body.dark-mode .header.desktop-nav .logo { color: #ededee !important; } body.dark-mode .header.desktop-nav .logo span { color: #60a5fa !important; } /* Desktop Navigation Menu */ body.dark-mode .nav-menu a { color: #a1a1aa !important; } body.dark-mode .nav-menu a:hover { color: #60a5fa !important; background: #27272a !important; } body.dark-mode .nav-menu a.active { color: #60a5fa !important; border-bottom-color: #3b82f6 !important; } body.dark-mode .nav-menu a i { color: #a1a1aa !important; } body.dark-mode .nav-menu a:hover i { color: #60a5fa !important; } body.dark-mode .nav-menu a.active i { color: #60a5fa !important; } /* Desktop Button Primary */ body.dark-mode .nav-menu .btn-primary { background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%) !important; color: white !important; } body.dark-mode .nav-menu .btn-primary:hover { background: #3b82f6 !important; } /* ======================================== */ /* MOBILE HEADER DARK MODE */ /* ======================================== */ body.dark-mode .header.mobile-only { background: #1a1a1e !important; border-bottom: 1px solid #2a2a2e !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } body.dark-mode .header.mobile-only .logo { color: #ededee !important; } body.dark-mode .header.mobile-only .logo span { color: #60a5fa !important; } /* Mobile Nav Container */ body.dark-mode .header.mobile-only .nav-container { background: transparent !important; } /* Semua icon di mobile header */ body.dark-mode .header.mobile-only i, body.dark-mode .header.mobile-only .fas, body.dark-mode .header.mobile-only .far { color: #ededee !important; } /* ======================================== */ /* NOTIFICATION BADGE DARK MODE */ /* ======================================== */ body.dark-mode .notification-badge, body.dark-mode .mobile-notif-badge { background: #f87171 !important; color: white !important; } /* ======================================== */ /* ADMIN BADGE DARK MODE */ /* ======================================== */ body.dark-mode .admin-badge { background: #f87171 !important; color: #1a1a1e !important; } body.dark-mode .header.mobile-only { background: #1a1a1e !important; border-bottom: 1px solid #2a2a2e !important; }