/* SIAP DAMKAR - Custom CSS Styling (Vanilla CSS) */ @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"); :root { --primary-color: hsl(12, 100%, 53%); --primary-hover: hsl(12, 100%, 43%); --primary-light: rgba(255, 57, 22, 0.12); --secondary-color: hsl(210, 100%, 50%); --accent-color: hsl(38, 100%, 52%); --accent-light: rgba(255, 157, 10, 0.15); --success-color: hsl(142, 69%, 45%); --success-light: rgba(34, 197, 94, 0.15); --danger-color: hsl(0, 84%, 55%); --bg-dark: hsl(222, 47%, 7%); --bg-card-dark: rgba(13, 19, 33, 0.85); --bg-card-glass: rgba(13, 19, 33, 0.65); --text-light: hsl(210, 40%, 98%); --text-muted: hsl(215, 20%, 65%); --border-color: rgba(255, 255, 255, 0.08); --border-focus: rgba(255, 57, 22, 0.5); /* Gradients */ --primary-gradient: linear-gradient(135deg, hsl(12, 100%, 53%) 0%, hsl(28, 100%, 50%) 100%); --accent-gradient: linear-gradient(135deg, hsl(38, 100%, 52%) 0%, hsl(20, 100%, 48%) 100%); --coal-gradient: linear-gradient(180deg, hsl(222, 47%, 9%) 0%, hsl(222, 47%, 5%) 100%); --fire-glow-glow: 0 0 25px rgba(255, 57, 22, 0.35); --font-title: "Outfit", sans-serif; --font-body: "Plus Jakarta Sans", sans-serif; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); --transition-fast: 0.15s ease; --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ TEMA TERANG (Light Mode) - INNOVATION UPGRADE Diaktifkan dengan class .light-mode pada ============================================================ */ /* ============================================================ TEMA TERANG (Light Mode) - PREMIUM DYNAMIC ANIMATED UPGRADE Diaktifkan dengan class .light-mode pada ============================================================ */ body.light-mode { /* Latar belakang putih bersih mutlak dengan tone warm neutral */ --bg-dark: hsl(0, 0%, 98%); --bg-card-dark: #ffffff; /* Kartu putih bersih mutlak */ --bg-card-glass: rgba(255, 255, 255, 0.88); /* Tipografi Hitam "Ink Black" yang tajam, kontras, dan nyaman di mata */ --text-light: hsl(222, 47%, 11%); /* Hitam navy solid */ --text-muted: hsl(215, 20%, 40%); /* Abu-abu arang untuk teks pendukung */ --border-color: rgba(0, 0, 0, 0.08); --border-focus: rgba(255, 57, 22, 0.5); /* Bayangan hangat beraksen warm red-gold glow khas Damkar */ --glass-shadow: 0 10px 32px 0 rgba(255, 57, 22, 0.06); --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.04); --shadow-md: 0 6px 12px -2px rgba(255, 57, 22, 0.07), 0 3px 6px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 14px 24px -4px rgba(255, 57, 22, 0.09), 0 6px 10px -2px rgba(0, 0, 0, 0.03); --shadow-xl: 0 24px 36px -6px rgba(255, 57, 22, 0.12), 0 12px 14px -5px rgba(0, 0, 0, 0.03); --coal-gradient: linear-gradient(180deg, hsl(0, 0%, 97%) 0%, hsl(0, 0%, 93%) 100%); } /* Background mesh gradient dinamis dengan animasi bernapas di Mode Terang */ body.light-mode { background-color: var(--bg-dark); background-image: radial-gradient(circle at 10% 20%, rgba(255, 57, 22, 0.04) 0px, transparent 40%), radial-gradient(circle at 90% 80%, rgba(49, 130, 206, 0.03) 0px, transparent 45%), radial-gradient(circle at 50% 50%, rgba(255, 157, 10, 0.03) 0px, transparent 50%); background-attachment: fixed; color: var(--text-light); animation: lightBgPulse 15s ease-in-out infinite alternate; } @keyframes lightBgPulse { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } /* Judul dan Teks Utama di Mode Terang */ body.light-mode .hero-title, body.light-mode .logo-text h1, body.light-mode .cert-modal-header h3 { background: none; -webkit-text-fill-color: var(--text-light); color: var(--text-light); } /* Navbar di Mode Terang — Glassmorphism bersih dengan border aksen halus */ body.light-mode .navbar { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } body.light-mode .logo-text p { color: var(--primary-color); font-weight: 700; } /* Hero Section di Mode Terang */ body.light-mode .hero-section { background: none; } body.light-mode .hero-title { color: hsl(222, 47%, 11%); -webkit-text-fill-color: hsl(222, 47%, 11%); text-shadow: 0 2px 10px rgba(255, 57, 22, 0.05); } /* Tombol Secondary di Mode Terang */ body.light-mode .btn-secondary { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); color: hsl(222, 47%, 15%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } body.light-mode .btn-secondary:hover { background: #ffffff; border-color: rgba(255, 57, 22, 0.3); color: var(--primary-color); box-shadow: 0 6px 18px rgba(255, 57, 22, 0.12); transform: translateY(-2px); } /* Tombol Primary & Accent di Mode Terang — Shimmering Hover Effect */ body.light-mode .btn-primary { box-shadow: 0 4px 15px rgba(255, 57, 22, 0.3); } body.light-mode .btn-primary:hover { box-shadow: 0 8px 22px rgba(255, 57, 22, 0.42); transform: translateY(-2px); } body.light-mode .btn-accent { box-shadow: 0 4px 15px rgba(255, 157, 10, 0.3); } body.light-mode .btn-accent:hover { box-shadow: 0 8px 22px rgba(255, 157, 10, 0.42); transform: translateY(-2px); } /* Service Cards di Mode Terang — Interactive Lift & Glow Animation */ body.light-mode .service-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } body.light-mode .service-card:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(255, 57, 22, 0.3); box-shadow: 0 16px 36px rgba(255, 57, 22, 0.12), 0 0 15px rgba(255, 57, 22, 0.06); } body.light-mode .service-card:hover .service-icon { transform: scale(1.1) rotate(3deg); box-shadow: 0 6px 16px rgba(255, 57, 22, 0.2); } body.light-mode .service-desc, body.light-mode .service-sub-item p { color: hsl(215, 16%, 40%); } /* Tracking Wrapper & Form di Mode Terang */ body.light-mode .tracking-wrapper { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06); } body.light-mode .tracking-input { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); color: hsl(222, 47%, 11%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); } body.light-mode .tracking-input::placeholder { color: hsl(215, 16%, 55%); } /* Form Inputs & Selects di Mode Terang */ body.light-mode .form-input, body.light-mode .form-select, body.light-mode .form-textarea { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); color: hsl(222, 47%, 11%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03); } body.light-mode .form-input::placeholder, body.light-mode .form-textarea::placeholder { color: hsl(215, 16%, 55%); } body.light-mode .form-input:focus, body.light-mode .form-select:focus, body.light-mode .form-textarea:focus { background: #ffffff; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 57, 22, 0.18), 0 2px 6px rgba(0, 0, 0, 0.05); } /* Modal Windows di Mode Terang */ body.light-mode .modal-content { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 24px 72px rgba(0, 0, 0, 0.16); } body.light-mode .modal-header { background: #ffffff; border-bottom-color: rgba(0, 0, 0, 0.08); } body.light-mode .modal-backdrop { background: rgba(15, 23, 42, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Sidebar Portal di Mode Terang — Active Pill Indicator */ body.light-mode .portal-sidebar { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.08); box-shadow: 2px 0 15px rgba(0, 0, 0, 0.03); } body.light-mode .menu-item { color: hsl(215, 16%, 35%); transition: all 0.25s ease; } body.light-mode .menu-item:hover { background: rgba(255, 57, 22, 0.06); color: var(--primary-color); transform: translateX(3px); } body.light-mode .menu-item.active { background: linear-gradient(135deg, rgba(255, 57, 22, 0.12) 0%, rgba(255, 157, 10, 0.08) 100%); color: var(--primary-color); font-weight: 700; border-left: 3px solid var(--primary-color); box-shadow: 0 4px 12px rgba(255, 57, 22, 0.08); } /* Data Table di Mode Terang */ body.light-mode .data-table th { background: rgba(241, 245, 249, 0.95); color: hsl(215, 16%, 30%); font-weight: 700; border-bottom: 2px solid rgba(0, 0, 0, 0.08); } body.light-mode .data-table td { border-bottom-color: rgba(0, 0, 0, 0.05); color: hsl(222, 47%, 15%); } body.light-mode .data-table tr:nth-child(even) td { background: rgba(248, 250, 252, 0.5); } body.light-mode .data-table tr:hover td { background: rgba(255, 57, 22, 0.04); } /* Analytic & Metric Cards di Mode Terang — Floating Glow */ body.light-mode .analytic-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body.light-mode .analytic-card:hover { transform: translateY(-4px); border-color: rgba(255, 57, 22, 0.25); box-shadow: 0 12px 28px rgba(255, 57, 22, 0.10); } /* Step Cards di Mode Terang */ body.light-mode .step-card { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; color: hsl(222, 47%, 11%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important; } body.light-mode .step-card:hover { transform: translateY(-4px) !important; border-color: var(--primary-color) !important; box-shadow: 0 12px 24px rgba(255, 57, 22, 0.12) !important; } /* User Menu Badge di Mode Terang */ body.light-mode .user-menu-badge { background: #ffffff; border-color: rgba(0, 0, 0, 0.10); color: hsl(222, 47%, 15%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } /* Section Header di Mode Terang */ body.light-mode .portal-section-header h3, body.light-mode .portal-section-header p { color: hsl(222, 47%, 11%); } /* Risk Chart Card di Mode Terang */ body.light-mode .risk-chart-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); } /* Badges Status di Mode Terang — Kontras Tinggi & Pastel Modern */ body.light-mode .badge-pending { background: rgba(245, 158, 11, 0.14) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; } body.light-mode .badge-scheduled { background: rgba(59, 130, 246, 0.14) !important; color: #1d4ed8 !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; } body.light-mode .badge-progress { background: rgba(139, 92, 246, 0.14) !important; color: #6d28d9 !important; border: 1px solid rgba(139, 92, 246, 0.3) !important; } body.light-mode .badge-completed, body.light-mode .badge-active { background: rgba(16, 185, 129, 0.14) !important; color: #047857 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; } body.light-mode .badge-rejected, body.light-mode .badge-expired { background: rgba(239, 68, 68, 0.14) !important; color: #b91c1c !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } body.light-mode .badge-warning { background: rgba(245, 158, 11, 0.16) !important; color: #c2410c !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; } /* BUG FIX (Performa): Transisi tema TIDAK boleh menggunakan selector universal * karena akan memblokir animasi keyframe dan memperlambat rendering semua elemen. Batasi hanya ke elemen yang benar-benar mengalami perubahan warna saat tema berganti. */ body, .navbar, .portal-sidebar, .modal-content, .modal-header, .data-table th, .data-table td, .analytic-card, .analytic-card *, .service-card, .step-card, .tracking-wrapper, .tracking-input, .form-input, .form-select, .form-textarea, .risk-chart-card, .user-menu-badge, .menu-item, .toast-notification { transition-property: background-color, background, border-color, color, box-shadow; transition-duration: 0.3s; transition-timing-function: ease; } /* Elemen interaktif mendapat transisi tambahan untuk transform dan opacity */ .btn, .service-card, .step-card, .modal-content { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } /* ============================================================ TOMBOL TOGGLE TEMA (Theme Switcher) ============================================================ */ .theme-toggle-btn { position: relative; width: 3.5rem; height: 1.9rem; background: rgba(13, 19, 33, 0.6); border: 1.5px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; cursor: pointer; padding: 0; display: flex; align-items: center; transition: background 0.3s ease, border-color 0.3s ease; flex-shrink: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); outline: none; } .theme-toggle-btn:hover { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 12px rgba(255, 157, 10, 0.2); } body.light-mode .theme-toggle-btn { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.15); } body.light-mode .theme-toggle-btn:hover { border-color: rgba(0, 0, 0, 0.3); box-shadow: 0 0 12px rgba(255, 157, 10, 0.2); } .theme-toggle-knob { position: absolute; left: 3px; width: 1.3rem; height: 1.3rem; background: linear-gradient(135deg, #a0aec0, #e2e8f0); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.3); -webkit-user-select: none; /* Safari, Chrome, Opera, iOS */ -moz-user-select: none; /* Firefox lama */ -ms-user-select: none; /* Internet Explorer 10+ dan Edge lama */ user-select: none; /* Standar (harus selalu diletakkan paling bawah) */ } body.light-mode .theme-toggle-knob { transform: translateX(1.55rem); background: linear-gradient(135deg, hsl(38, 100%, 65%), hsl(38, 100%, 52%)); box-shadow: 0 2px 8px rgba(255, 157, 10, 0.5); } .theme-toggle-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } body.light-mode .theme-toggle-label { color: hsl(215, 16%, 40%); } .theme-toggle-wrapper { display: flex; align-items: center; gap: 0.5rem; } /* Override untuk elemen dengan warna HARDCODED (tidak pakai CSS variable) */ /* Pilar Layanan Cards */ body.light-mode .pilar-box { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; } body.light-mode .pilar-box:hover { box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.08) !important; } /* Sub-service cards di dalam pilar */ body.light-mode .sub-service-card { background: rgba(248, 250, 252, 0.8) !important; border-color: rgba(0, 0, 0, 0.06) !important; } body.light-mode .sub-service-card:hover { background: rgba(241, 245, 249, 0.95) !important; border-color: rgba(0, 0, 0, 0.12) !important; } body.light-mode .sub-service-card h5, body.light-mode .sub-service-card p { color: hsl(222, 47%, 15%) !important; } /* Service features (list di pilar) */ body.light-mode .service-features li { color: hsl(215, 16%, 35%); } /* Tab guide pemandu alur */ body.light-mode .sd-d_flex_background_rgba_30_41_59_0_7_border_de_21 { background: rgba(241, 245, 249, 0.9) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Step number circles */ body.light-mode [style*="background: rgba(15, 23, 42"], body.light-mode [style*="background: rgba(13, 19, 33"], body.light-mode [style*="background:rgba(15,23,42"], body.light-mode [style*="background:rgba(13,19,33"] { background: rgba(241, 245, 249, 0.9) !important; } /* Tombol guide tab yang inactive */ body.light-mode #btn-guide-tab-edu:not(.btn-primary), body.light-mode #btn-guide-tab-inspect:not(.btn-primary) { background: transparent; color: hsl(215, 16%, 40%); border-color: rgba(0, 0, 0, 0.12); } /* Navbar tracking input */ body.light-mode .input-icon { color: hsl(215, 16%, 50%); } /* Toast notification */ body.light-mode .toast-notification { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); color: hsl(222, 47%, 15%); } /* Produk hukum & extra landing card section */ body.light-mode [style*="background: rgba(15, 23, 42, 0.4)"], body.light-mode [style*="background:rgba(15,23,42,0.4)"], body.light-mode .landing-extra-card { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; } /* Dashboard & Portal Utility Classes saat Light Mode */ body.light-mode .sd-background_rgba_15_23_42_0_4_p_0_75rem_border_149, body.light-mode .sd-background_rgba_15_23_42_0_6_border_default_t_213, body.light-mode .sd-background_rgba_15_23_42_0_6_border_default_t_214, body.light-mode .sd-background_rgba_15_23_42_0_6_border_default_t_223, body.light-mode .sd-background_rgba_15_23_42_0_6_border_default_t_321, body.light-mode .sd-background_rgba_30_41_59_0_5_border_default_b_323, body.light-mode .sd-background_rgba_15_23_42_0_6_border_default_t_339 { background: rgba(248, 250, 252, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: hsl(222, 47%, 15%) !important; } body.light-mode .sd-flex_grow_1_p_1rem_0_d_flex_jc_center_align_c_351 { background: #f1f5f9 !important; } /* Auth Tab Switcher (Login / Registrasi) */ .auth-tab-container { display: flex; width: 100%; gap: 0.5rem; background: rgba(15, 23, 42, 0.6); padding: 0.35rem; border-radius: 0.75rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); } .auth-tab-btn { flex: 1 !important; width: 50% !important; border-radius: 0.5rem !important; text-align: center !important; justify-content: center !important; font-weight: 600 !important; padding: 0.65rem 1rem !important; transition: all var(--transition-normal); } body.light-mode .auth-tab-container { background: rgba(241, 245, 249, 0.9); border-color: rgba(0, 0, 0, 0.1); } /* ============================================================ FIREFIGHTER SPLASH PRELOADER ANIMATION (DYNAMIC INTRO) ============================================================ */ .damkar-preloader-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: radial-gradient(circle at 50% 30%, hsl(222, 47%, 9%) 0%, hsl(222, 50%, 4%) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1), transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.7s ease; visibility: visible; opacity: 1; } .damkar-preloader-overlay.hidden { opacity: 0; visibility: hidden; transform: translateY(-100%) scale(0.98); } /* Siren Beacon Lights */ .siren-beacon { position: absolute; width: 50vw; height: 50vw; max-width: 600px; max-height: 600px; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: 0.25; } .siren-red { top: -10%; left: -10%; background: radial-gradient(circle, rgba(255, 30, 0, 0.8) 0%, transparent 70%); animation: sirenPulseRed 1.8s ease-in-out infinite alternate; } .siren-blue { bottom: -10%; right: -10%; background: radial-gradient(circle, rgba(0, 120, 255, 0.8) 0%, transparent 70%); animation: sirenPulseBlue 1.8s ease-in-out infinite alternate; } @keyframes sirenPulseRed { 0% { opacity: 0.15; transform: scale(0.9) translate(0, 0); } 100% { opacity: 0.4; transform: scale(1.15) translate(30px, 20px); } } @keyframes sirenPulseBlue { 0% { opacity: 0.4; transform: scale(1.15) translate(-20px, -30px); } 100% { opacity: 0.15; transform: scale(0.9) translate(0, 0); } } /* Preloader Content Wrapper */ .preloader-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 480px; width: 90%; padding: 2.5rem 1.5rem; } /* Logo Frame with Pulsing Glow */ .preloader-logo-frame { position: relative; width: 7.5rem; height: 7.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; } .preloader-glow-ring { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(from 0deg, #ff3916, #ff9d0a, #3182ce, #ff3916); filter: blur(12px); opacity: 0.7; animation: rotateRing 4s linear infinite; } @keyframes rotateRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .preloader-logo-img { position: relative; z-index: 2; height: 6.5rem; width: auto; object-fit: contain; filter: drop-shadow(0 0 20px rgba(255, 57, 22, 0.6)); animation: logoPulseFloat 2.5s ease-in-out infinite alternate; } @keyframes logoPulseFloat { 0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 15px rgba(255, 57, 22, 0.5)); } 100% { transform: translateY(-8px) scale(1.05); filter: drop-shadow(0 0 30px rgba(255, 157, 10, 0.8)); } } .fire-sparkles { position: absolute; inset: -20px; pointer-events: none; } .sparkle { position: absolute; font-size: 1.2rem; animation: floatSparkle 2s ease-in-out infinite alternate; } .sparkle.s1 { top: 0; left: 10%; animation-delay: 0s; } .sparkle.s2 { top: 20%; right: 5%; animation-delay: 0.6s; } .sparkle.s3 { bottom: 10%; left: 15%; animation-delay: 1.2s; } @keyframes floatSparkle { 0% { transform: translateY(0) scale(0.8) rotate(0deg); opacity: 0.4; } 100% { transform: translateY(-12px) scale(1.2) rotate(15deg); opacity: 1; } } /* Titles */ .preloader-title { font-family: var(--font-title); font-size: 2rem; font-weight: 800; letter-spacing: 0.05em; background: linear-gradient(135deg, #ffffff 0%, #ff9d0a 50%, #ff3916 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.35rem; text-shadow: 0 0 30px rgba(255, 57, 22, 0.3); } .preloader-subtitle { font-size: 0.825rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.03em; margin-bottom: 2rem; } /* Fire Truck Animation Track */ .fire-truck-track { position: relative; width: 100%; height: 2.5rem; margin-bottom: 0.5rem; overflow: hidden; border-bottom: 2px dashed rgba(255, 255, 255, 0.15); } .fire-truck-anim { position: absolute; bottom: 2px; left: 0; display: flex; align-items: center; gap: 0.2rem; transform: translateX(-100%); transition: left 0.15s linear; } .truck-icon { font-size: 1.75rem; filter: drop-shadow(0 2px 8px rgba(255, 57, 22, 0.6)); animation: truckBounce 0.4s ease-in-out infinite alternate; transform: scaleX(-1); display: inline-block; } @keyframes truckBounce { 0% { transform: scaleX(-1) translateY(0); } 100% { transform: scaleX(-1) translateY(-3px); } } .water-stream { width: 2.2rem; height: 4px; background: linear-gradient(90deg, transparent, #3182ce 70%, #63b3ed 100%); border-radius: 9999px; box-shadow: 0 0 10px rgba(49, 130, 206, 0.9); } /* Progress Bar */ .preloader-progress-wrapper { width: 100%; height: 0.5rem; background: rgba(255, 255, 255, 0.08); border-radius: 9999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); margin-bottom: 0.75rem; } .preloader-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ff3916 0%, #ff9d0a 60%, #48bb78 100%); border-radius: 9999px; box-shadow: 0 0 15px rgba(255, 57, 22, 0.8); transition: width 0.15s linear; } /* Status & Percent Text */ .preloader-status { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 0.775rem; color: var(--text-muted); font-weight: 600; margin-bottom: 1.5rem; } #preloader-status-text { color: #a0aec0; } #preloader-percent { color: #ff9d0a; font-family: monospace; font-weight: 700; } /* Skip Button */ .preloader-skip-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: #e2e8f0; padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition-normal); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .preloader-skip-btn:hover { background: rgba(255, 57, 22, 0.2); border-color: rgba(255, 57, 22, 0.5); color: #ffffff; box-shadow: 0 4px 15px rgba(255, 57, 22, 0.3); transform: translateY(-2px); } /* Reset & Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background-color: var(--bg-dark); background-image: radial-gradient(at 0% 0%, rgba(229, 62, 62, 0.08) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(49, 130, 206, 0.05) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(214, 158, 46, 0.05) 0px, transparent 50%); background-attachment: fixed; color: var(--text-light); line-height: 1.6; overflow-x: hidden; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } a { color: inherit; text-decoration: none; } /* Layout Utilities */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } /* Premium Header / Navbar */ .navbar { position: sticky; top: 0; z-index: 50; background: rgba(15, 23, 42, 0.75); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-color); padding: 1rem 0; transition: var(--transition-normal); } .nav-container { display: flex; justify-content: space-between; align-items: center; } .logo-wrapper { display: flex; align-items: center; gap: 0.75rem; } .logo-icon { height: 3.2rem; width: auto; display: flex; align-items: center; justify-content: center; } .logo-icon img { height: 3.2rem; width: auto; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0, 0, 200, 0.35)); transition: transform 0.3s ease; } .logo-icon img:hover { transform: scale(1.08) rotate(2deg); } .logo-text h1 { font-size: 1.25rem; text-transform: uppercase; background: linear-gradient(to right, #fff, #f3f4f6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .logo-text p { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.05em; } .nav-links { display: flex; align-items: center; gap: 1rem; } /* Button Styles */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; padding: 0.625rem 1.25rem; border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: var(--transition-normal); font-size: 0.875rem; } .btn-primary { background: var(--primary-gradient); color: white; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 15px rgba(255, 57, 22, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, hsl(20, 100%, 53%) 0%, hsl(12, 100%, 50%) 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 57, 22, 0.45); } .btn-secondary { background: rgba(13, 19, 33, 0.6); border-color: var(--border-color); color: var(--text-light); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-secondary:hover { background: rgba(13, 19, 33, 0.95); border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); transform: translateY(-1px); } .btn-accent { background: var(--accent-gradient); color: white; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 15px rgba(255, 157, 10, 0.3); } .btn-accent:hover { background: linear-gradient(135deg, hsl(42, 100%, 55%) 0%, hsl(30, 100%, 50%) 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 157, 10, 0.45); } .btn-danger { background: linear-gradient(135deg, hsl(0, 84%, 55%), hsl(0, 84%, 35%)); color: white; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25); } .btn-danger:hover { background: linear-gradient(135deg, hsl(0, 84%, 60%), hsl(0, 84%, 40%)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: 0.375rem; } /* User Profile & Menu Badge */ .user-menu-badge { display: flex; align-items: center; gap: 0.5rem; background: rgba(30, 41, 59, 0.6); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid var(--border-color); font-size: 0.875rem; } .user-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; color: white; } /* Step Card & Guide Hover Animations */ .step-card { transition: all var(--transition-normal); } .step-card:hover { transform: translateY(-5px); border-color: var(--primary-color) !important; box-shadow: 0 10px 25px rgba(229, 62, 62, 0.15) !important; background: rgba(30, 41, 59, 0.9) !important; } #guide-content-edu .step-card:hover { border-color: var(--accent-color) !important; box-shadow: 0 10px 25px rgba(214, 158, 46, 0.15) !important; } /* Landing Page Layout */ .hero-section { padding: 4rem 0 3rem 0; text-align: center; } .hero-tag { display: inline-flex; align-items: center; background: rgba(229, 62, 62, 0.15); color: #ffffff; /* Menggunakan warna putih solid agar lebih menonjol */ padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.3); /* Border semi-putih agar menonjolkan warna putih */ box-shadow: 0 0 15px rgba(229, 62, 62, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Shadow agar lebih terbaca di latar belakang apa pun */ } .hero-title { font-size: 3rem; line-height: 1.1; margin-bottom: 1rem; background: linear-gradient(135deg, #fff 30%, #a0aec0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: 1.125rem; color: var(--text-muted); max-width: 700px; margin: 0 auto 2.5rem auto; } /* Search Box / Tracking */ .tracking-wrapper { max-width: 600px; margin: 0 auto 4rem auto; background: var(--bg-card-glass); padding: 1.25rem; border-radius: 1.25rem; border: 1px solid var(--border-color); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--glass-shadow); } .tracking-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; justify-content: center; } .tracking-form { display: flex; gap: 0.75rem; } .input-group { position: relative; flex: 1; } .input-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .tracking-input { width: 100%; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); padding: 0.75rem 1rem 0.75rem 2.5rem; border-radius: 0.5rem; color: white; font-family: var(--font-body); font-size: 0.875rem; transition: var(--transition-fast); } .tracking-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.25); } /* Dashboard Cards (Service Selection) */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 4rem; } .service-card { background: var(--bg-card-dark); border-radius: 1.25rem; border: 1px solid var(--border-color); padding: 2.25rem; transition: var(--transition-normal); display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); } .service-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); opacity: 0.8; } .service-card:hover { transform: translateY(-5px); border-color: rgba(229, 62, 62, 0.3); box-shadow: 0 12px 24px -5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(229, 62, 62, 0.05); } .service-icon { width: 3.5rem; height: 3.5rem; background: var(--primary-light); border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: var(--primary-color); margin-bottom: 1.5rem; } .service-icon svg { width: 1.75rem; height: 1.75rem; } .service-card-edu .service-icon { background: var(--accent-light); color: var(--accent-color); } .service-title { font-size: 1.375rem; margin-bottom: 0.75rem; } .service-desc { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 2rem; flex-grow: 1; } .service-features { list-style: none; margin-bottom: 2rem; } .service-features li { font-size: 0.875rem; color: var(--text-light); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .service-features li svg { color: var(--success-color); width: 1rem; height: 1rem; } /* Info Section (Damkar Tangerang Selatan) */ .info-section { background: rgba(15, 23, 42, 0.4); border-radius: 1.5rem; border: 1px solid var(--border-color); padding: 3rem; margin-bottom: 5rem; } .info-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; } @media (max-width: 968px) { .info-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .info-content h2 { font-size: 2rem; margin-bottom: 1.25rem; } .info-content p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 0.95rem; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .stat-item { background: rgba(30, 41, 59, 0.4); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: 0.75rem; text-align: center; } .stat-val { font-size: 2rem; font-weight: 800; color: var(--primary-color); font-family: var(--font-title); line-height: 1; margin-bottom: 0.25rem; } .stat-lbl { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; } /* Risk Charts / Visual representation of risk */ .risk-chart-card { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; justify-content: center; } .risk-chart-title { font-size: 1.125rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .risk-level-bar { margin-bottom: 1.25rem; } .risk-label { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.375rem; } .bar-bg { height: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 9999px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 9999px; } .fill-high { background: linear-gradient(90deg, #fc8181, #e53e3e); width: 45%; } .fill-med { background: linear-gradient(90deg, #fbd38d, #dd6b20); width: 35%; } .fill-low { background: linear-gradient(90deg, #68d391, #38a169); width: 20%; } /* Tracking Result Card */ .tracking-result-modal { margin-bottom: 2rem; background: rgba(26, 32, 44, 0.9); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .tracking-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 1.25rem; } .reg-badge { background: var(--primary-light); color: #feb2b2; padding: 0.25rem 0.75rem; border-radius: 0.25rem; font-family: monospace; font-size: 0.875rem; font-weight: 700; } /* Stepper (Workflow UI) */ .stepper-wrapper { display: flex; justify-content: space-between; margin-top: 1.5rem; position: relative; overflow-x: auto; padding: 1rem 0; } .stepper-wrapper::after { content: ""; position: absolute; top: 2.25rem; left: 2rem; right: 2rem; height: 2px; background: rgba(255, 255, 255, 0.05); z-index: 1; } .step-node { display: flex; flex-direction: column; align-items: center; z-index: 2; min-width: 80px; flex: 1; text-align: center; } .step-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #2d3748; border: 2px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: var(--text-muted); transition: var(--transition-normal); margin-bottom: 0.5rem; } .step-node.active .step-circle { background: var(--primary-color); border-color: #fc8181; color: white; box-shadow: 0 0 15px rgba(229, 62, 62, 0.5); } .step-node.completed .step-circle { background: var(--success-color); border-color: #68d391; color: white; } .step-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .step-node.active .step-label { color: white; } .step-node.completed .step-label { color: #68d391; } /* Modals & Forms Layout */ .modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .modal-content { background: #1e293b; border: 1px solid var(--border-color); border-radius: 1.5rem; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl), 0 0 40px rgba(0, 0, 0, 0.4); animation: zoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .modal-content-lg { max-width: 900px; } @keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; /* Sticky header agar tombol X selalu terlihat saat scroll */ position: sticky; top: 0; z-index: 10; background: #1e293b; border-radius: 1.5rem 1.5rem 0 0; } .modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .modal-close:hover { background: rgba(255, 255, 255, 0.05); color: white; } .modal-body { padding: 1.5rem; } /* Form Styles */ .form-group { margin-bottom: 1.25rem; } .form-group-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-light); } .form-input, .form-select, .form-textarea { width: 100%; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); padding: 0.625rem 0.875rem; border-radius: 0.5rem; color: white; font-family: var(--font-body); font-size: 0.875rem; transition: var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2); } /* Suppress native browser red border on :invalid SEBELUM user berinteraksi. Border merah hanya ditampilkan setelah form.was-validated (saat submit). */ .form-input:invalid, .form-select:invalid, .form-textarea:invalid { box-shadow: none; border-color: var(--border-color); } .form-input:user-invalid, .form-select:user-invalid, .form-textarea:user-invalid { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2); } .checkbox-group { display: flex; align-items: flex-start; gap: 0.625rem; margin: 1rem 0; } .checkbox-group input[type="checkbox"], .checkbox-group input[type="radio"] { accent-color: var(--primary-color); margin-top: 0.25rem; cursor: pointer; } .checkbox-label { font-size: 0.8125rem; color: var(--text-muted); cursor: pointer; -webkit-user-select: none; user-select: none; } .checkbox-label span { color: white; font-weight: 500; } /* Checklist grid for documents */ .document-checklist-grid { display: flex; flex-direction: column; gap: 0.5rem; background: rgba(15, 23, 42, 0.4); padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--border-color); max-height: none; overflow-y: visible; animation: fadeSlideIn 0.3s ease; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* File Upload Component */ .file-upload-zone { border: 2px dashed var(--border-color); border-radius: 0.75rem; padding: 1.5rem; text-align: center; background: rgba(15, 23, 42, 0.2); transition: var(--transition-fast); cursor: pointer; margin-top: 1rem; } .file-upload-zone:hover { border-color: var(--primary-color); background: rgba(229, 62, 62, 0.02); } .file-upload-zone.dragover { border-color: var(--accent-color); background: rgba(229, 62, 62, 0.08); box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15); } .upload-icon { color: var(--text-muted); margin-bottom: 0.5rem; } .upload-icon svg { width: 2.25rem; height: 2.25rem; } .upload-text { font-size: 0.8125rem; color: var(--text-muted); } .upload-text span { color: var(--primary-color); font-weight: 600; } /* Upload Progress Bar */ .upload-progress-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; } .upload-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-color), #fc8181, var(--accent-color)); background-size: 200% 100%; border-radius: 3px; transition: width 0.3s ease; animation: progressShimmer 1.5s ease infinite; } @keyframes progressShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Spin animation for upload loading indicator */ .spin-animation { animation: spinUpload 1s linear infinite; } @keyframes spinUpload { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .gdrive-info-alert { background: rgba(49, 130, 206, 0.15); border: 1px solid rgba(49, 130, 206, 0.3); border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.75rem; color: #90cdf4; margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .gdrive-info-alert a { text-decoration: underline; font-weight: 700; color: #fff; } /* Dashboard Views for Logged In Users */ .portal-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 4.875rem); } @media (max-width: 868px) { .portal-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .portal-sidebar { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; padding: 0.75rem 1rem !important; border-right: none !important; border-bottom: 1px solid var(--border-color); background: rgba(15, 23, 42, 0.9) !important; width: 100%; gap: 1rem; } .sidebar-menu { flex-direction: row !important; overflow-x: auto; flex-grow: 1; gap: 0.5rem; padding-bottom: 0.25rem; /* -webkit-overflow-scrolling: touch; — deprecated, removed for compatibility */ } .menu-item { white-space: nowrap; padding: 0.5rem 0.75rem !important; font-size: 0.8125rem !important; } .sidebar-info-container { display: none !important; } .portal-sidebar .btn { margin-top: 0 !important; padding: 0.5rem 0.75rem !important; font-size: 0.8125rem !important; white-space: nowrap; } } .portal-sidebar { background: rgba(15, 23, 42, 0.5); border-right: 1px solid var(--border-color); padding: 2rem 1rem; display: flex; flex-direction: column; justify-content: space-between; } .sidebar-menu { display: flex; flex-direction: column; gap: 0.5rem; } .menu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; color: var(--text-muted); cursor: pointer; transition: var(--transition-fast); } .menu-item:hover, .menu-item.active { color: white; background: rgba(255, 255, 255, 0.05); } .menu-item.active { background: var(--primary-light); color: #fc8181; } .portal-main { padding: 2.5rem; overflow-y: auto; } @media (max-width: 640px) { .portal-main { padding: 1.5rem; } } .portal-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .portal-title { font-size: 1.75rem; } .portal-subtitle { font-size: 0.875rem; color: var(--text-muted); } /* Dashboard Analytics Grid */ .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; } .analytic-card { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: var(--shadow-md); } .analytic-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 700; } .analytic-icon.red { background: rgba(229, 62, 62, 0.15); color: #feb2b2; } .analytic-icon.blue { background: rgba(49, 130, 206, 0.15); color: #90cdf4; } .analytic-icon.gold { background: rgba(214, 158, 46, 0.15); color: #fbd38d; } .analytic-icon.green { background: rgba(56, 161, 105, 0.15); color: #9ae6b4; } .analytic-details h4 { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 0.25rem; } .analytic-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; font-family: var(--font-title); } /* Elegant Booking Calendar component */ .calendar-booking-container { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; margin-top: 1rem; } .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .calendar-month-title { font-weight: 700; font-size: 1rem; font-family: var(--font-title); } .calendar-nav-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; } .calendar-nav-btn:hover { background: rgba(255, 255, 255, 0.05); color: white; } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 700; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; } .calendar-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; text-align: center; } .calendar-day { aspect-ratio: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: var(--transition-fast); border: 1px solid transparent; position: relative; } .calendar-day.empty { cursor: default; background: transparent; border-color: transparent; } .calendar-day.available { background: rgba(255, 255, 255, 0.03); border-color: var(--border-color); } .calendar-day.available:hover { background: var(--primary-light); border-color: var(--primary-color); color: white; } .calendar-day.booked { background: rgba(229, 62, 62, 0.1); border-color: rgba(229, 62, 62, 0.3); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; } .calendar-day.booked::after { content: "Booked"; position: absolute; bottom: 3px; font-size: 0.5rem; font-weight: 700; color: #fc8181; } .calendar-day.selected { background: var(--success-color); border-color: #68d391; color: white; font-weight: 700; box-shadow: 0 0 10px rgba(56, 161, 105, 0.4); } .calendar-legend { display: flex; gap: 1.5rem; margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted); justify-content: center; } .legend-item { display: flex; align-items: center; gap: 0.375rem; } .legend-color { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; } /* Table Design */ .data-table-container { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; overflow-x: auto; /* -webkit-overflow-scrolling: touch; — deprecated, removed for compatibility */ box-shadow: var(--shadow-lg); margin-bottom: 2rem; } .data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; } .data-table th { background: rgba(15, 23, 42, 0.6); padding: 1rem 1.25rem; font-weight: 700; color: var(--text-light); border-bottom: 1px solid var(--border-color); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .data-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); color: var(--text-muted); } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: rgba(255, 255, 255, 0.02); color: var(--text-light); } /* Status Badges */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; } .badge-pending { background: rgba(214, 158, 46, 0.15); color: #fbd38d; } .badge-scheduled { background: rgba(49, 130, 206, 0.15); color: #90cdf4; } .badge-progress { background: rgba(159, 122, 234, 0.15); color: #d6bcfa; } .badge-completed { background: rgba(56, 161, 105, 0.15); color: #9ae6b4; } .badge-rejected { background: rgba(229, 62, 62, 0.15); color: #feb2b2; } /* multi-tab form layout for inspection team */ .inspection-wizard { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 2rem; box-shadow: var(--shadow-xl); } .wizard-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 2rem; overflow-x: auto; } .wizard-tabs::-webkit-scrollbar { height: 4px; } .wizard-tabs::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 2px; } .wizard-tabs::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 2px; } .wizard-tab { padding: 0.625rem 1.25rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 0.5rem; font-weight: 600; font-size: 0.8125rem; color: var(--text-muted); cursor: pointer; transition: var(--transition-fast); white-space: nowrap; } .wizard-tab:hover, .wizard-tab.active { color: white; background: rgba(255, 255, 255, 0.08); } .wizard-tab.active { background: var(--primary-color); border-color: #fc8181; color: white; } .wizard-content-pane { display: none; } .wizard-content-pane.active { display: block; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .form-section-title { font-size: 1.125rem; margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); color: var(--accent-color); text-transform: uppercase; font-weight: 800; } /* Compliance Score Display */ .compliance-score-box { background: rgba(15, 23, 42, 0.8); border: 1.5px solid var(--primary-color); border-radius: 1rem; padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .score-text-area h3 { font-size: 1.5rem; color: white; } .score-badge-circle { width: 5rem; height: 5rem; border-radius: 50%; background: linear-gradient( 135deg, var(--primary-color), var(--accent-color) ); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; box-shadow: 0 0 20px rgba(229, 62, 62, 0.4); } .score-number { font-size: 1.75rem; font-weight: 800; line-height: 1; } .score-label { font-size: 0.625rem; text-transform: uppercase; font-weight: 700; } /* Logs / Activity list for Admin */ .log-list { background: rgba(15, 23, 42, 0.4); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 0.75rem; } .log-entry { padding: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 0.25rem; } .log-entry:last-child { border-bottom: none; } .log-time { color: var(--accent-color); } .log-email-to { color: var(--secondary-color); font-weight: bold; } .log-subject { color: var(--text-light); } /* Interactive Charts inside Pimpinan/Admin portal using CSS only or SVG */ .chart-bar-visual { display: flex; align-items: flex-end; height: 180px; gap: 1rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; margin-top: 1.5rem; } .chart-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .chart-bar-pillar { width: 100%; border-radius: 0.25rem 0.25rem 0 0; transition: height 0.5s ease; position: relative; min-height: 5px; } .chart-bar-pillar:hover::after { content: attr(data-val); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background: #2d3748; color: white; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; white-space: nowrap; } .chart-bar-label { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.5rem; text-align: center; } /* Responsive elements */ .dashboard-main-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; margin-top: 1.5rem; } .dashboard-two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .checkbox-row-wrapper { display: flex; gap: 2rem; margin-top: 0.5rem; flex-wrap: wrap; } .modal-btn-row { margin-top: 1.5rem; display: flex; gap: 0.5rem; } .modal-footer-btns { display: flex; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--border-color); } .sidebar-info-container { padding: 1rem 0; } @media (max-width: 968px) { #perusahaan-dashboard-grid, .dashboard-main-grid, .dashboard-two-col-grid { grid-template-columns: 1fr !important; gap: 1.5rem; } } @media (max-width: 768px) { .hero-title { font-size: 2.25rem; } .info-section { padding: 1.5rem; margin-bottom: 3rem; } .service-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } } @media (max-width: 640px) { .checkbox-row-wrapper { gap: 0.75rem; flex-direction: column; } } @media (max-width: 580px) { .stats-grid { grid-template-columns: 1fr; gap: 1rem; } .calendar-booking-container { padding: 0.75rem; } .calendar-day { font-size: 0.75rem; } .calendar-day.booked::after { font-size: 0.45rem; } .modal-footer-btns { flex-direction: column-reverse; width: 100%; gap: 0.5rem; } .modal-footer-btns .btn { width: 100%; } } @media (max-width: 480px) { .hero-title { font-size: 1.75rem; } .hero-subtitle { font-size: 0.95rem; margin-bottom: 1.5rem; } .tracking-form { flex-direction: column; gap: 0.75rem; } .tracking-form .btn { width: 100%; } .logo-text h1 { font-size: 1rem; } .logo-text p { font-size: 0.65rem; } .logo-icon { height: 2.4rem; } .logo-icon img { height: 2.4rem; } .nav-container { padding: 0 0.5rem; } .btn { padding: 0.5rem 0.75rem; font-size: 0.75rem; } .modal-btn-row { flex-direction: column; gap: 0.75rem; } .modal-btn-row .btn { width: 100%; } .chart-bar-visual { gap: 0.5rem; } .chart-bar-label { font-size: 0.55rem; } .calendar-legend { flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; } } /* Print Styling for SPT & BAP Documents */ @media print { @page { size: A4; margin: 15mm 15mm 15mm 15mm !important; } /* Reset background and text colors to default white/black printing */ html, body { background: #ffffff !important; background-image: none !important; color: #000000 !important; font-family: "Times New Roman", Times, serif !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Hide entire dashboard structure */ header.navbar, main#app-view-container, .modal-backdrop, footer { display: none !important; } /* Override backdrop and show only the printed modal content */ body.printing-spt #modal-spt-preview, body.printing-bap #modal-report-preview, body.printing-suket #modal-suket-preview, body.printing-lembar-kerja #modal-lembar-kerja-preview { display: block !important; position: relative !important; width: 100% !important; height: auto !important; background: #ffffff !important; color: #000000 !important; z-index: 99999 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.printing-spt #modal-spt-preview .modal-content, body.printing-bap #modal-report-preview .modal-content, body.printing-suket #modal-suket-preview .modal-content, body.printing-lembar-kerja #modal-lembar-kerja-preview .modal-content { background: #ffffff !important; color: #000000 !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; } /* Hide print header/footer modal buttons */ .modal-header, .modal-body:last-child { display: none !important; } /* Show only the content container */ #spt-preview-body, #report-preview-body, #suket-preview-body, #lembar-kerja-preview-body { display: block !important; background: #ffffff !important; color: #000000 !important; padding: 0 !important; margin: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; font-family: "Times New Roman", Times, serif !important; } /* Page breaks between main letter and attachments */ .page-break { page-break-before: always !important; break-before: page !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } .spt-print-page { page-break-inside: avoid !important; padding: 15mm 10mm !important; box-sizing: border-box !important; } /* Ensure tables have clean border styling in black for printing */ table { border-collapse: collapse !important; page-break-inside: auto !important; break-inside: auto !important; } tr, td, th { page-break-inside: avoid !important; break-inside: avoid !important; } thead { display: table-header-group !important; } p, h1, h2, h3, h4, h5, h6 { break-inside: avoid !important; page-break-after: avoid !important; page-break-after: avoid !important; break-after: avoid !important; } table th, table td { color: #000000 !important; border-color: #000000 !important; } /* Named page for landscape suket print */ @page suket-page { size: landscape; margin: 8mm; } .suket-print-layout { page: suket-page; background: #ffffff !important; color: #000000 !important; font-family: "Californian FB", "Times New Roman", serif !important; } } /* FIREFIGHTER THEMING & ANIMATIONS */ .hero-section { position: relative; overflow: hidden; } /* Embers particles effect in background */ .embers-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; } .ember { position: absolute; bottom: -10px; background: radial-gradient( circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 157, 10, 0.8) 40%, rgba(255, 57, 22, 0.4) 70%, rgba(255, 57, 22, 0) 100% ); border-radius: 50%; pointer-events: none; animation: float-upwards 6s ease-in-out infinite; filter: blur(1px); opacity: 0; } @keyframes float-upwards { 0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; } 15% { opacity: 0.85; transform: translateY(-20%) translateX(calc(var(--ember-drift, 20px) * 0.3)) scale(0.7); } 45% { transform: translateY(-50%) translateX(calc(var(--ember-drift, 20px) * -0.5)) scale(1.0); } 75% { opacity: 0.85; transform: translateY(-80%) translateX(calc(var(--ember-drift, 20px) * 0.8)) scale(1.2); } 100% { transform: translateY(-110%) translateX(var(--ember-drift, 20px)) scale(1.4); opacity: 0; } } @keyframes firelight-flicker { 0%, 100% { box-shadow: 0 0 15px rgba(255, 57, 22, 0.25), 0 0 30px rgba(255, 157, 10, 0.15), inset 0 0 10px rgba(255, 57, 22, 0.05); border-color: rgba(255, 57, 22, 0.3); } 20% { box-shadow: 0 0 22px rgba(255, 57, 22, 0.4), 0 0 40px rgba(255, 157, 10, 0.25), inset 0 0 15px rgba(255, 57, 22, 0.1); border-color: rgba(255, 157, 10, 0.45); } 40% { box-shadow: 0 0 18px rgba(255, 57, 22, 0.3), 0 0 32px rgba(255, 157, 10, 0.2), inset 0 0 8px rgba(255, 57, 22, 0.08); border-color: rgba(255, 57, 22, 0.35); } 60% { box-shadow: 0 0 26px rgba(255, 57, 22, 0.45), 0 0 45px rgba(255, 157, 10, 0.3), inset 0 0 18px rgba(255, 57, 22, 0.15); border-color: rgba(255, 157, 10, 0.5); } 80% { box-shadow: 0 0 20px rgba(255, 57, 22, 0.32), 0 0 35px rgba(255, 157, 10, 0.22), inset 0 0 12px rgba(255, 57, 22, 0.12); border-color: rgba(255, 57, 22, 0.38); } } /* Fire alert / siren pulsing shadow glow for main CTA and tag */ .hero-tag { background: linear-gradient(90deg, #e53e3e, #dd6b20) !important; color: #ffffff !important; animation: siren-pulse 2s infinite alternate; border: 1px solid rgba(255, 255, 255, 0.35) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } @keyframes siren-pulse { 0% { box-shadow: 0 0 5px rgba(229, 62, 62, 0.5), 0 0 10px rgba(229, 62, 62, 0.3); } 100% { box-shadow: 0 0 18px rgba(229, 62, 62, 0.9), 0 0 35px rgba(221, 107, 32, 0.5); } } /* Hover glow accents for premium cards */ .service-card { position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .service-card::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background: linear-gradient(90deg, #e53e3e, #ed8936); transition: width 0.4s ease; } .service-card:hover::after { width: 100%; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(229, 62, 62, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1); border-color: rgba(229, 62, 62, 0.3) !important; } .service-card:hover .service-icon { background: rgba(229, 62, 62, 0.15) !important; color: #e53e3e !important; transform: scale(1.1) rotate(4deg); box-shadow: 0 0 15px rgba(229, 62, 62, 0.3); } /* Fiery emergency pulse hover on primary CTA buttons */ .btn-primary:hover, .btn-accent:hover { box-shadow: 0 0 15px rgba(229, 62, 62, 0.7), 0 0 25px rgba(221, 107, 32, 0.3); transform: translateY(-2px); filter: brightness(1.1); } /* Dynamic view-switch fade-in reveal animation */ #view-landing, #view-perusahaan, #view-edukasi, #view-pemeriksa, #view-admin, #view-pimpinan { animation: view-reveal 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; } @keyframes view-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Virtual File Explorer Layouts & Cards */ .folder-card, .file-card { transition: all var(--transition-normal); border: 1px solid var(--border-color) !important; } .folder-card:hover { transform: translateY(-3px) scale(1.02); border-color: rgba(246, 173, 85, 0.4) !important; background: rgba(246, 173, 85, 0.05) !important; box-shadow: var(--glass-shadow); } .file-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); background: rgba(30, 41, 59, 0.9) !important; } .file-icon { transition: transform var(--transition-fast); } .file-card:hover .file-icon { transform: scale(1.1); } .breadcrumb-container span:hover { text-decoration: underline; } .explorer-toolbar input:focus, .explorer-toolbar select:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 2px var(--border-focus); } /* User management specific tweaks */ .badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; text-align: center; } /* Real-time duplication warnings styling */ #user-collision-warning { animation: shake 0.3s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* Custom Option Cards for Inspection Type Selection */ .option-card { border: 1px solid var(--border-color); padding: 1rem; border-radius: 8px; cursor: pointer; transition: all var(--transition-normal); background: rgba(30, 41, 59, 0.4); display: flex; flex-direction: column; gap: 0.25rem; position: relative; } .option-card:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(30, 41, 59, 0.6); } .option-card input[type="checkbox"] { position: absolute; top: 0.75rem; right: 0.75rem; accent-color: var(--primary-color); transform: scale(1.2); pointer-events: none; } .info-note-box { padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.85rem; line-height: 1.45; margin-bottom: 1rem; border-left: 4px solid; color: #fff; transition: all var(--transition-normal); } .info-note-box.warning-box { border-color: var(--accent-color); background: rgba(214, 158, 46, 0.1); } .info-note-box.success-box { border-color: var(--success-color); background: rgba(56, 161, 105, 0.1); } .info-note-box.info-box { border-color: var(--secondary-color); background: rgba(49, 130, 206, 0.1); } .checkbox-card.selected.inspect { border-color: var(--accent-color); background: rgba(214, 158, 46, 0.1); } .checkbox-card.selected.completed { border-color: var(--success-color); background: rgba(56, 161, 105, 0.1); } .checkbox-card.selected.assigned { border-color: var(--secondary-color); background: rgba(49, 130, 206, 0.1); } /* ========================================================================== NEW UPGRADE: ROADMAP, STATS & PUBLIC COLLABORATION STYLING ========================================================================== */ /* 1. Statistics 2025 Glow Grid */ .stats-glow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; } .stats-glow-card { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; display: flex; align-items: center; gap: 1.25rem; transition: all var(--transition-normal); box-shadow: var(--shadow-md); } .stats-glow-card:hover { transform: translateY(-5px); border-color: var(--secondary-color); box-shadow: 0 10px 20px -5px rgba(49, 130, 206, 0.15), var(--glass-shadow); } .stats-icon { font-size: 2.25rem; background: rgba(255, 255, 255, 0.05); width: 4rem; height: 4rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .stats-glow-card:hover .stats-icon { background: var(--primary-light); transform: scale(1.1); } .stats-info h4 { font-size: 1.5rem; font-weight: 800; color: var(--text-light); margin-bottom: 0.25rem; font-family: var(--font-title); } .stats-info p { font-size: 0.8rem; color: var(--text-muted); margin: 0; } /* 2. Interactive Roadmap Timeline */ .roadmap-timeline { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 4rem; position: relative; } .roadmap-timeline::before { content: ""; position: absolute; left: 2rem; top: 1rem; bottom: 1rem; width: 2px; background: rgba(255, 255, 255, 0.05); } .roadmap-item { display: flex; gap: 2rem; position: relative; } .roadmap-number { width: 4rem; height: 4rem; border-radius: 50%; background: var(--bg-dark); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 1.25rem; font-weight: 800; color: var(--text-muted); z-index: 2; transition: all var(--transition-normal); } .roadmap-item.active .roadmap-number { border-color: var(--primary-color); color: var(--primary-color); box-shadow: 0 0 15px rgba(229, 62, 62, 0.3); } .roadmap-content { flex: 1; background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 1.75rem; box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .roadmap-item:hover .roadmap-content { border-color: rgba(255, 255, 255, 0.15); box-shadow: var(--shadow-md); } .roadmap-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .roadmap-header h4 { font-size: 0.9rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .roadmap-item.active .roadmap-header h4 { color: var(--primary-color); } .roadmap-content h5 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-light); } .roadmap-list { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem 1rem; } .roadmap-list li { font-size: 0.85rem; color: var(--text-muted); position: relative; padding-left: 1.25rem; } .roadmap-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success-color); font-weight: bold; } .roadmap-badge { font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 0.375rem; font-weight: 600; } /* 3. Emergency & Relawan Grids */ .emergency-grid, .relawan-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; margin-bottom: 4rem; align-items: start; } @media (max-width: 992px) { .emergency-grid, .relawan-grid { grid-template-columns: 1fr; } } .emergency-form-container, .relawan-form-container { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 2rem; box-shadow: var(--shadow-lg); } .info-alert-card { background: rgba(229, 62, 62, 0.05); border: 1px solid rgba(229, 62, 62, 0.15); border-radius: 1rem; padding: 1.5rem; } .info-alert-card h4 { font-size: 1.1rem; font-weight: 700; color: var(--text-light); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .info-alert-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; } .emergency-phone-list { display: flex; flex-direction: column; gap: 0.75rem; } .phone-item { display: flex; justify-content: space-between; align-items: center; background: rgba(15, 23, 42, 0.5); padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color); font-size: 0.85rem; } .phone-item strong { color: #fc8181; font-family: var(--font-title); font-size: 1rem; } /* 4. Pulse Alarm Button */ .btn-pulse-alarm { width: 100%; padding: 1rem; font-size: 1rem; font-weight: 800; border-radius: 0.75rem; background: #e53e3e; border-color: #c53030; color: white; margin-top: 1rem; position: relative; overflow: hidden; box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7); animation: pulse-alarm 1.8s infinite; transition: all var(--transition-fast); } .btn-pulse-alarm:hover { background: #c53030; transform: scale(1.02); } @keyframes pulse-alarm { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7); } 70% { transform: scale(1.01); box-shadow: 0 0 0 15px rgba(229, 62, 62, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); } } /* 5. Volunteer Hub Partner Grid */ .relawan-info-side { display: flex; flex-direction: column; gap: 1.5rem; } .relawan-partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .partner-card { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; text-align: center; transition: all var(--transition-fast); } .partner-card:hover { border-color: var(--accent-color); background: rgba(214, 158, 46, 0.05); } .partner-card h5 { font-size: 1.1rem; font-weight: 800; color: var(--accent-color); margin-bottom: 0.25rem; } .partner-card p { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.5rem; } .partner-count { display: inline-block; font-size: 0.75rem; background: rgba(255, 255, 255, 0.05); padding: 0.2rem 0.5rem; border-radius: 0.375rem; color: var(--text-light); font-weight: 600; } /* 6. Three Pillar Layout Landing Page */ .pilar-layanan-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 4rem; } .pilar-box { background: linear-gradient(135deg, rgba(13, 19, 33, 0.45) 0%, rgba(9, 13, 22, 0.75) 100%); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .pilar-box:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), var(--glass-shadow); } .pilar-box.pilar-emergency:hover { border-color: var(--primary-color); animation: firelight-flicker 1.8s infinite alternate; } .pilar-box.pilar-pencegahan:hover { border-color: var(--success-color); box-shadow: 0 0 25px rgba(34, 197, 94, 0.35), var(--glass-shadow); } .pilar-box.pilar-edukasi:hover { border-color: var(--accent-color); animation: firelight-flicker 1.8s infinite alternate; } .pilar-header { display: flex; flex-direction: column; gap: 0.5rem; } .pilar-badge { align-self: flex-start; font-size: 0.7rem; font-weight: 800; padding: 0.25rem 0.6rem; border-radius: 0.5rem; background: rgba(229, 62, 62, 0.15); color: #fc8181; text-transform: uppercase; letter-spacing: 0.05em; } .pilar-header h4 { font-size: 1.25rem; font-weight: 800; color: var(--text-light); margin: 0; font-family: var(--font-title); } .pilar-header p { font-size: 0.85rem; color: var(--text-muted); margin: 0; } .pilar-cards { display: flex; flex-direction: column; gap: 1rem; } .sub-service-card { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.75rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; transition: all var(--transition-fast); } .sub-service-card:hover { background: rgba(15, 23, 42, 0.7); border-color: rgba(255, 255, 255, 0.1); transform: scale(1.02); } .sub-service-card h5 { font-size: 0.95rem; font-weight: 700; color: var(--text-light); margin: 0; } .sub-service-card p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; margin: 0; } .card-icon-small { font-size: 1.2rem; } .btn-xs { padding: 0.4rem 0.75rem; font-size: 0.75rem; border-radius: 0.375rem; font-weight: bold; } /* 7. Pulse Alarm Blue */ @keyframes pulse-alarm-blue { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(49, 130, 206, 0.7); } 70% { transform: scale(1.01); box-shadow: 0 0 0 15px rgba(49, 130, 206, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(49, 130, 206, 0); } } /* 8. KKI Checklist Checkboxes Style Override */ .kki-checkbox-container input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--success-color); cursor: pointer; } .kki-question-card:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; } .kki-question-card { transition: all var(--transition-fast); } /* CERTIFICATE MONITORING BADGES & ALERTS */ .badge-expired { background: rgba(229, 62, 62, 0.2) !important; color: #fc8181 !important; border: 1px solid rgba(229, 62, 62, 0.4); } .badge-warning { background: rgba(221, 107, 32, 0.2) !important; color: #f6ad55 !important; border: 1px solid rgba(221, 107, 32, 0.4); } .badge-active { background: rgba(72, 187, 120, 0.2) !important; color: #68d391 !important; border: 1px solid rgba(72, 187, 120, 0.4); } .badge-certified { background: rgba(107, 70, 193, 0.2) !important; color: #b794f4 !important; border: 1px solid rgba(107, 70, 193, 0.4); } .expiry-alert-banner { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem; border-radius: 0.75rem; margin-bottom: 1.5rem; animation: slide-down 0.4s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .expiry-alert-banner.expired { background: linear-gradient(135deg, rgba(229, 62, 62, 0.15) 0%, rgba(229, 62, 62, 0.03) 100%); border: 1px solid rgba(229, 62, 62, 0.45); } .expiry-alert-banner.warning { background: linear-gradient(135deg, rgba(221, 107, 32, 0.15) 0%, rgba(221, 107, 32, 0.03) 100%); border: 1px solid rgba(221, 107, 32, 0.45); } @keyframes slide-down { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* PREMIUM CERTIFICATE ISSUANCE MODAL STYLES */ .cert-modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%); padding: 1.5rem !important; } .cert-modal-header h3 { font-family: var(--font-title); font-weight: 800; font-size: 1.25rem; background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 0.5rem; } .cert-form-section { background: rgba(30, 41, 59, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1.25rem; transition: all var(--transition-fast); } .cert-form-section:hover { background: rgba(30, 41, 59, 0.4); border-color: rgba(255, 255, 255, 0.08); } .cert-section-header { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent-color); margin: 0 0 1rem 0; text-transform: uppercase; display: flex; align-items: center; gap: 0.35rem; } .cert-input-icon-wrapper { position: relative; } .cert-input-icon-wrapper input { padding-left: 2.5rem !important; } .cert-input-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; align-items: center; justify-content: center; } .cert-pill-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-light); border-radius: 2rem; padding: 0.45rem 1rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); } .cert-pill-btn:hover { background: rgba(229, 62, 62, 0.15); border-color: var(--primary-color); color: var(--text-light); transform: translateY(-1px); } .cert-submit-btn { background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important; color: #fff !important; font-weight: bold; border: none !important; box-shadow: 0 4px 12px rgba(56, 161, 105, 0.25) !important; transition: all var(--transition-fast) !important; cursor: pointer; } .cert-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(56, 161, 105, 0.4) !important; } /* ========================================================================== SIAP DAMKAR - REFRACTORED INLINE STYLES ========================================================================== */ .sd-left_10_width_6px_height_6px_animation_delay__0 { left: 10%; width: 6px; height: 6px; animation-delay: 0s; animation-duration: 5s; --ember-drift: 40px; } .sd-left_25_width_4px_height_4px_animation_delay__1 { left: 25%; width: 4px; height: 4px; animation-delay: 2s; animation-duration: 6s; --ember-drift: -30px; } .sd-left_45_width_8px_height_8px_animation_delay__2 { left: 45%; width: 8px; height: 8px; animation-delay: 1s; animation-duration: 4s; --ember-drift: 20px; } .sd-left_60_width_5px_height_5px_animation_delay__3 { left: 60%; width: 5px; height: 5px; animation-delay: 3s; animation-duration: 7s; --ember-drift: -40px; } .sd-left_80_width_7px_height_7px_animation_delay__4 { left: 80%; width: 7px; height: 7px; animation-delay: 0.5s; animation-duration: 5.5s; --ember-drift: 15px; } .sd-left_90_width_3px_height_3px_animation_delay__5 { left: 90%; width: 3px; height: 3px; animation-delay: 4s; animation-duration: 6.5s; --ember-drift: -25px; } .sd-mt_1_5rem_6 { margin-top: 1.5rem; } .sd-d_none_7 { display: none; } .sd-fs_1_5rem_8 { font-size: 1.5rem; } .sd-text_muted_fs_0_875rem_9 { color: var(--text-muted); font-size: 0.875rem; } .sd-grid_template_columns_repeat_auto_fit_minmax__10 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } .sd-border_top_4px_solid_var_success_color_11 { border-top: 4px solid var(--success-color); } .sd-background_rgba_56_161_105_0_15_color_48bb78_12 { background: rgba(56, 161, 105, 0.15); color: #48bb78; } .sd-fs_1_5rem_mt_0_25rem_13 { font-size: 1.5rem; margin-top: 0.25rem; } .sd-margin_1rem_0_padding_left_1_25rem_fs_0_85rem_14 { margin: 1rem 0; padding-left: 1.25rem; font-size: 0.85rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.5rem; } .sd-d_flex_gap_0_5rem_margin_top_auto_15 { display: flex; gap: 0.5rem; margin-top: auto; } .sd-w_100_fw_bold_background_38a169_border_color__16 { width: 100%; font-weight: bold; background: #38a169; border-color: #2f855a; } .sd-border_top_4px_solid_var_accent_color_17 { border-top: 4px solid var(--accent-color); } .sd-background_rgba_214_158_46_0_15_color_ecc94b_18 { background: rgba(214, 158, 46, 0.15); color: #ecc94b; } .sd-w_100_fw_bold_background_var_accent_color_bor_19 { width: 100%; font-weight: bold; background: var(--accent-color); border-color: #d69e2e; } .sd-mt_4rem_mb_1_5rem_20 { margin-top: 4rem; margin-bottom: 1.5rem; } .sd-d_flex_background_rgba_30_41_59_0_7_border_de_21 { display: flex; background: rgba(30, 41, 59, 0.7); border: 1px solid var(--border-color); padding: 0.25rem; border-radius: 0.75rem; gap: 0.25rem; } .sd-rounded_0_5rem_transition_all_var_transition__22 { border-radius: 0.5rem; transition: all var(--transition-fast); padding: 0.4rem 1rem; } .sd-rounded_0_5rem_transition_all_var_transition__23 { border-radius: 0.5rem; transition: all var(--transition-fast); padding: 0.4rem 1rem; background: transparent; border: none; color: var(--text-muted); } .sd-d_grid_grid_template_columns_repeat_auto_fit__24 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .sd-background_var_bg_card_dark_border_default_ro_25 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; position: relative; transition: all var(--transition-normal); box-shadow: var(--shadow-md); } .sd-width_2_25rem_height_2_25rem_rounded_circle_b_26 { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--primary-light); border: 1px solid var(--primary-color); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; } .sd-text_light_fs_1rem_fw_700_mt_0_25rem_27 { color: var(--text-light); font-size: 1rem; font-weight: 700; margin-top: 0.25rem; } .sd-text_muted_fs_0_8rem_line_height_1_5_m_0_28 { color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; margin: 0; } .sd-width_2_25rem_height_2_25rem_rounded_circle_b_29 { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(214, 158, 46, 0.15); border: 1px solid var(--accent-color); color: var(--accent-color); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; } .sd-d_grid_grid_template_columns_repeat_auto_fit__30 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 4rem; margin-bottom: 2rem; } .sd-background_var_bg_card_dark_border_default_ro_31 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: var(--shadow-lg); } .sd-fs_1_5rem_text_white_mb_0_5rem_d_flex_align_c_32 { font-size: 1.5rem; color: #fff; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .sd-text_muted_fs_0_85rem_m_0_33 { color: var(--text-muted); font-size: 0.85rem; margin: 0; } .sd-d_flex_flex_col_gap_1rem_overflow_y_auto_max__34 { display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; max-height: 350px; padding-right: 0.5rem; } .sd-background_rgba_255_255_255_0_02_border_defau_35 { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: all var(--transition-fast); } .sd-text_white_fs_0_85rem_d_block_36 { color: #fff; font-size: 0.85rem; display: block; } .sd-fs_0_75rem_text_muted_d_block_mt_0_25rem_37 { font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 0.25rem; } .sd-p_0_35rem_0_6rem_fs_0_7rem_min_width_60px_ta__38 { padding: 0.35rem 0.6rem; font-size: 0.7rem; min-width: 60px; text-align: center; } .sd-background_var_bg_card_dark_border_default_ro_39 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: var(--shadow-lg); position: relative; } .sd-position_relative_overflow_hidden_border_radi_40 { position: relative; overflow: hidden; border-radius: 0.75rem; border: 1px solid var(--border-color); background: #000; display: flex; justify-content: center; align-items: center; aspect-ratio: 16/9; } .sd-w_100_h_100_d_flex_transition_transform_0_5s__41 { width: 100%; height: 100%; display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .sd-position_absolute_left_0_5rem_top_50_transfor_42 { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 50%; width: 2.25rem; height: 2.25rem; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s; z-index:20; } .sd-position_absolute_right_0_5rem_top_50_transfo_43 { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 50%; width: 2.25rem; height: 2.25rem; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s; z-index:20; } .sd-position_absolute_bottom_0_left_0_right_0_bac_44 { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 0.75rem 1rem; color: #fff; font-size: 0.8rem; pointer-events: none; z-index: 10; } .sd-d_block_fw_600_45 { display: block; font-weight: 600; } .sd-fs_0_7rem_color_ccc_46 { font-size: 0.7rem; color: #ccc; } .sd-d_flex_jc_center_gap_0_5rem_47 { display: flex; justify-content: center; gap: 0.5rem; } .sd-mb_1_5rem_d_none_48 { margin-bottom: 1.5rem; display: none; } .sd-mb_1rem_49 { margin-bottom: 1rem; } .sd-d_flex_flex_col_gap_1_5rem_50 { display: flex; flex-direction: column; gap: 1.5rem; } .sd-background_var_bg_card_dark_border_default_ro_51 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; } .sd-fs_0_95rem_mb_1rem_d_flex_align_center_gap_0__52 { font-size: 0.95rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--accent-color); } .sd-fs_0_8125rem_text_muted_ta_center_p_1rem_0_53 { font-size: 0.8125rem; color: var(--text-muted); text-align: center; padding: 1rem 0; } .sd-fs_0_95rem_mb_1rem_d_flex_align_center_gap_0__54 { font-size: 0.95rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--success-color); } .sd-max_width_700px_m_0_auto_background_var_bg_ca_55 { max-width: 700px; margin: 0 auto; background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; } .sd-d_grid_grid_template_columns_1fr_1fr_gap_1rem_56 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem; } .sd-position_relative_overflow_hidden_57 { position: relative; overflow: hidden; } .sd-d_none_58 { display: none; } .sd-d_flex_align_center_gap_0_5rem_mb_0_35rem_59 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .sd-width_20px_height_20px_rounded_circle_border__60 { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; } .sd-fw_700_text_white_fs_0_95rem_61 { font-weight: 700; color: #fff; font-size: 0.95rem; } .sd-fs_0_75rem_text_muted_padding_left_1_85rem_62 { font-size: 0.75rem; color: var(--text-muted); padding-left: 1.85rem; } .sd-flex_col_gap_0_5rem_max_height_none_d_none_63 { flex-direction: column; gap: 0.5rem; max-height: none; display: none; } .sd-d_flex_align_center_jc_between_p_0_6rem_0_75r_64 { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 0.5rem; border-radius: 6px; transition: background 0.2s ease; } .sd-m_0_d_flex_align_center_gap_0_5rem_65 { margin: 0; display: flex; align-items: center; gap: 0.5rem; } .sd-fs_0_6rem_padding_2px_6px_border_radius_4px_b_66 { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; background: rgba(59,130,246,0.2); color: #60a5fa; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .sd-d_none_align_center_gap_0_5rem_67 { display: none; align-items: center; gap: 0.5rem; } .sd-fs_0_75rem_text_muted_68 { font-size: 0.75rem; color: var(--text-muted); } .sd-fs_0_6rem_padding_2px_6px_border_radius_4px_b_69 { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; background: rgba(34,197,94,0.2); color: #4ade80; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .sd-fs_0_6rem_padding_2px_6px_border_radius_4px_b_70 { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; background: rgba(251,146,60,0.2); color: #fb923c; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .sd-mt_1rem_71 { margin-top: 1rem; } .sd-mt_2rem_72 { margin-top: 2rem; } .sd-w_100_73 { width: 100%; } .sd-max_width_650px_m_0_auto_background_var_bg_ca_74 { max-width: 650px; margin: 0 auto; background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; } .sd-d_flex_align_center_gap_1_5rem_border_bottom__75 { display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; margin-bottom: 1.5rem; } .sd-width_4_5rem_height_4_5rem_rounded_circle_bac_76 { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: linear-gradient( 135deg, var(--primary-color) 0%, #feb2b2 100% ); display: flex; align-items: center; justify-content: center; font-size: 2.25rem; font-weight: bold; color: white; } .sd-m_0_text_white_fs_1_25rem_77 { margin: 0; color: #fff; font-size: 1.25rem; } .sd-m_0_25rem_0_0_0_text_muted_fs_0_8rem_78 { margin: 0.25rem 0 0 0; color: var(--text-muted); font-size: 0.8rem; } .sd-text_light_m_0_0_1rem_0_fs_0_95rem_border_lef_79 { color: var(--text-light); margin: 0 0 1rem 0; font-size: 0.95rem; border-left: 3px solid var(--primary-color); padding-left: 0.5rem; } .sd-text_danger_80 { color: var(--danger-color); } .sd-d_grid_grid_template_columns_1fr_1fr_gap_1rem_81 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .sd-text_light_margin_1_5rem_0_1rem_0_fs_0_95rem__82 { color: var(--text-light); margin: 1.5rem 0 1rem 0; font-size: 0.95rem; border-left: 3px solid var(--primary-color); padding-left: 0.5rem; } .sd-d_flex_gap_0_5rem_83 { display: flex; gap: 0.5rem; } .sd-w_100_flex_grow_1_84 { width: 100%; flex-grow: 1; } .sd-p_0_375rem_0_75rem_fs_0_75rem_rounded_0_5rem_85 { padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: 0.5rem; } .sd-w_100_fw_600_86 { width: 100%; font-weight: 600; } .sd-background_linear_gradient_135deg_rgba_229_62_87 { background: linear-gradient( 135deg, rgba(229, 62, 62, 0.15) 0%, rgba(229, 62, 62, 0.03) 100% ); border: 1px solid rgba(229, 62, 62, 0.2); padding: 1.5rem; border-radius: 1rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .sd-background_rgba_229_62_62_0_2_color_feb2b2_fs_88 { background: rgba(229, 62, 62, 0.2); color: #feb2b2; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 2rem; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; margin-bottom: 0.5rem; } .sd-m_0_fs_1_5rem_text_white_89 { margin: 0; font-size: 1.5rem; color: #fff; } .sd-m_0_25rem_0_0_0_fs_0_875rem_text_muted_90 { margin: 0.25rem 0 0 0; font-size: 0.875rem; color: var(--text-muted); } .sd-d_flex_align_center_gap_0_5rem_box_shadow_0_4_91 { display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 10px rgba(229, 62, 62, 0.3); } .sd-mb_2rem_92 { margin-bottom: 2rem; } .sd-d_grid_grid_template_columns_repeat_auto_fit__93 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; } .sd-background_var_bg_card_dark_border_default_ro_94 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.25rem; display: flex; align-items: center; gap: 1rem; transition: transform 0.3s ease; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .sd-width_48px_height_48px_border_radius_0_75rem__95 { width: 48px; height: 48px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(66, 153, 225, 0.15); color: #63b3ed; } .sd-m_0_fs_0_8125rem_text_muted_text_transform_up_96 { margin: 0; font-size: 0.8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .sd-fs_1_75rem_font_weight_800_text_white_mt_0_25_97 { font-size: 1.75rem; font-weight: 800; color: #fff; margin-top: 0.25rem; } .sd-width_48px_height_48px_border_radius_0_75rem__98 { width: 48px; height: 48px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(236, 201, 75, 0.15); color: #ecc94b; } .sd-width_48px_height_48px_border_radius_0_75rem__99 { width: 48px; height: 48px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(72, 187, 120, 0.15); color: #48bb78; } .sd-d_grid_grid_template_columns_1fr_gap_1_5rem_100 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .sd-background_var_bg_card_dark_border_default_ro_101 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .sd-mb_1_25rem_102 { margin-bottom: 1.25rem; } .sd-m_0_fs_1_15rem_text_white_d_flex_align_center_103 { margin: 0; font-size: 1.15rem; color: #fff; display: flex; align-items: center; gap: 0.5rem; } .sd-text_accent_104 { color: var(--accent-color); } .sd-border_1px_solid_rgba_255_255_255_0_05_rounde_105 { border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.5rem; overflow: hidden; } .sd-ta_center_106 { text-align: center; } .sd-d_grid_grid_template_columns_repeat_auto_fit__107 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .sd-m_0_0_1_25rem_0_fs_1_1rem_text_white_d_flex_a_108 { margin: 0 0 1.25rem 0; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 0.5rem; } .sd-color_48bb78_109 { color: #48bb78; } .sd-d_flex_flex_col_gap_1rem_110 { display: flex; flex-direction: column; gap: 1rem; } .sd-d_flex_gap_0_75rem_align_start_111 { display: flex; gap: 0.75rem; align-items: flex-start; } .sd-width_24px_height_24px_rounded_circle_backgro_112 { width: 24px; height: 24px; border-radius: 50%; background: rgba(229, 62, 62, 0.2); color: var(--accent-color); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8125rem; flex-shrink: 0; } .sd-m_0_fs_0_875rem_text_white_113 { margin: 0; font-size: 0.875rem; color: #fff; } .sd-m_0_125rem_0_0_0_fs_0_75rem_text_muted_114 { margin: 0.125rem 0 0 0; font-size: 0.75rem; color: var(--text-muted); } .sd-width_24px_height_24px_rounded_circle_backgro_115 { width: 24px; height: 24px; border-radius: 50%; background: rgba(66, 153, 225, 0.2); color: #4299e1; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8125rem; flex-shrink: 0; } .sd-width_24px_height_24px_rounded_circle_backgro_116 { width: 24px; height: 24px; border-radius: 50%; background: rgba(236, 201, 75, 0.2); color: #ecc94b; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8125rem; flex-shrink: 0; } .sd-width_24px_height_24px_rounded_circle_backgro_117 { width: 24px; height: 24px; border-radius: 50%; background: rgba(72, 187, 120, 0.2); color: #48bb78; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8125rem; flex-shrink: 0; } .sd-color_var_secondary_color_118 { color: var(--secondary-color); } .sd-d_flex_flex_col_gap_0_75rem_max_height_250px__119 { display: flex; flex-direction: column; gap: 0.75rem; max-height: 250px; overflow-y: auto; } .sd-background_rgba_255_255_255_0_02_border_1px_s_120 { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); padding: 0.75rem; border-radius: 0.5rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .sd-m_0_fs_0_8125rem_text_white_121 { margin: 0; font-size: 0.8125rem; color: #fff; } .sd-m_0_125rem_0_0_0_fs_0_7rem_text_muted_122 { margin: 0.125rem 0 0 0; font-size: 0.7rem; color: var(--text-muted); } .sd-max_width_800px_m_0_auto_background_var_bg_ca_123 { max-width: 800px; margin: 0 auto; background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; } .sd-d_none_background_rgba_255_255_255_0_02_borde_124 { display: none; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; } .sd-d_none_margin_bottom_0_125 { display: none; margin-bottom: 0; } .sd-margin_bottom_0_126 { margin-bottom: 0; } .sd-d_grid_grid_template_columns_1fr_gap_0_5rem_m_127 { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.5rem; } .sd-d_flex_align_center_gap_0_5rem_fs_0_875rem_cu_128 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; } .sd-background_rgba_255_255_255_0_02_border_defau_129 { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; } .sd-d_grid_grid_template_columns_1fr_1fr_gap_0_5r_130 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; } .sd-fs_0_8rem_text_muted_131 { font-size: 0.8rem; color: var(--text-muted); } .sd-max_width_200px_132 { max-width: 200px; } .sd-fs_0_75rem_text_muted_mb_0_75rem_133 { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.75rem; } .sd-background_rgba_255_255_255_0_03_border_defau_134 { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); } .sd-background_var_success_color_135 { background: var(--success-color); } .sd-background_rgba_229_62_62_0_2_136 { background: rgba(229, 62, 62, 0.2); } .sd-mt_1_5rem_137 { margin-top: 1.5rem; } .sd-fs_0_7rem_text_muted_mt_0_25rem_138 { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; } .sd-width_4_5rem_height_4_5rem_rounded_circle_bac_139 { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: linear-gradient( 135deg, var(--accent-color) 0%, #f6ad55 100% ); display: flex; align-items: center; justify-content: center; font-size: 2.25rem; font-weight: bold; color: white; } .sd-text_light_m_0_0_1rem_0_fs_0_95rem_border_lef_140 { color: var(--text-light); margin: 0 0 1rem 0; font-size: 0.95rem; border-left: 3px solid var(--accent-color); padding-left: 0.5rem; } .sd-text_light_margin_1_5rem_0_1rem_0_fs_0_95rem__141 { color: var(--text-light); margin: 1.5rem 0 1rem 0; font-size: 0.95rem; border-left: 3px solid var(--accent-color); padding-left: 0.5rem; } .sd-mt_2_5rem_mb_1rem_142 { margin-top: 2.5rem; margin-bottom: 1rem; } .sd-fw_700_text_white_143 { font-weight: 700; color: white; } .sd-font_family_monospace_text_accent_fw_700_144 { font-family: monospace; color: var(--accent-color); font-weight: 700; } .sd-fs_0_8125rem_text_muted_mt_0_25rem_145 { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; } .sd-text_light_mb_1rem_146 { color: var(--text-light); margin-bottom: 1rem; } .sd-text_light_margin_1_5rem_0_1rem_0_147 { color: var(--text-light); margin: 1.5rem 0 1rem 0; } .sd-text_light_mt_1rem_148 { color: var(--text-light); margin-top: 1rem; } .sd-background_rgba_15_23_42_0_4_p_0_75rem_border_149 { background: rgba(15, 23, 42, 0.4); padding: 0.75rem; border-radius: 0.375rem; border: 1px solid var(--border-color); } .sd-mt_2rem_border_top_1px_solid_var_border_color_150 { margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; } .sd-d_flex_jc_end_gap_1rem_mt_3rem_border_top_1px_151 { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 3rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; } .sd-mb_2rem_d_grid_grid_template_columns_repeat_a_152 { margin-bottom: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .sd-background_rgba_221_107_32_0_2_color_fbd38d_153 { background: rgba(221, 107, 32, 0.2); color: #fbd38d; } .sd-mb_1rem_text_white_fs_1_125rem_154 { margin-bottom: 1rem; color: #fff; font-size: 1.125rem; } .sd-mt_2_5rem_mb_1rem_text_white_fs_1_125rem_155 { margin-top: 2.5rem; margin-bottom: 1rem; color: #fff; font-size: 1.125rem; } .sd-m_0_background_rgba_214_158_46_0_1_border_col_156 { margin: 0; background: rgba(214, 158, 46, 0.1); border-color: rgba(214, 158, 46, 0.2); color: #fbd38d; } .sd-text_decoration_underline_157 { text-decoration: underline; } .sd-d_flex_jc_center_align_center_158 { display:flex; justify-content:center; align-items:center; } .sd-grid_template_columns_1fr_mt_2rem_159 { grid-template-columns: 1fr; margin-top: 2rem; } .sd-fs_1_1rem_mb_1rem_160 { font-size: 1.1rem; margin-bottom: 1rem; } .sd-d_none_p_1rem_1_25rem_161 { display: none; padding: 1rem 1.25rem; } .sd-width_2_25rem_height_2_25rem_fs_1rem_d_flex_j_162 { width: 2.25rem; height: 2.25rem; font-size: 1rem; display:flex; justify-content:center; align-items:center; } .sd-fs_1_25rem_163 { font-size: 1.25rem; } .sd-height_80_background_fc8181_164 { height: 80%; background: #fc8181; } .sd-height_45_background_fbd38d_165 { height: 45%; background: #fbd38d; } .sd-height_60_background_90cdf4_166 { height: 60%; background: #90cdf4; } .sd-height_90_background_68d391_167 { height: 90%; background: #68d391; } .sd-height_30_background_ecc94b_168 { height: 30%; background: #ecc94b; } .sd-mt_2rem_background_var_bg_card_dark_border_de_169 { margin-top: 2rem; background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; } .sd-fs_1_15rem_mb_0_5rem_text_white_d_flex_align__170 { font-size: 1.15rem; margin-bottom: 0.5rem; color: #fff; display: flex; align-items: center; gap: 0.5rem; } .sd-background_rgba_255_255_255_0_02_border_1px_d_171 { background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.1); padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sd-d_flex_align_center_gap_0_5rem_172 { display: flex; align-items: center; gap: 0.5rem; } .sd-fs_1_1rem_173 { font-size: 1.1rem; } .sd-ta_left_174 { text-align: left; } .sd-fs_0_8rem_text_white_d_block_175 { font-size: 0.8rem; color: #fff; display: block; } .sd-fs_0_7rem_text_muted_176 { font-size: 0.7rem; color: var(--text-muted); } .sd-d_flex_gap_0_4rem_flex_wrap_wrap_177 { display: flex; gap: 0.4rem; flex-wrap: wrap; } .sd-background_rgba_229_62_62_0_15_border_1px_sol_178 { background: rgba(229, 62, 62, 0.15); border: 1px solid rgba(229, 62, 62, 0.3); color: #fc8181; cursor: pointer; } .sd-background_rgba_221_107_32_0_15_border_1px_so_179 { background: rgba(221, 107, 32, 0.15); border: 1px solid rgba(221, 107, 32, 0.3); color: #f6ad55; cursor: pointer; } .sd-background_rgba_72_187_120_0_15_border_1px_so_180 { background: rgba(72, 187, 120, 0.15); border: 1px solid rgba(72, 187, 120, 0.3); color: #68d391; cursor: pointer; } .sd-background_rgba_255_255_255_0_05_border_1px_s_181 { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; cursor: pointer; } .sd-d_grid_grid_template_columns_repeat_auto_fit__182 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .sd-background_rgba_72_187_120_0_1_border_1px_sol_183 { background: rgba(72, 187, 120, 0.1); border: 1px solid rgba(72, 187, 120, 0.2); padding: 1rem; border-radius: 0.75rem; text-align: center; } .sd-fs_0_75rem_color_68d391_fw_600_text_transform_184 { font-size: 0.75rem; color: #68d391; font-weight: 600; text-transform: uppercase; } .sd-fs_1_75rem_fw_bold_text_white_mt_0_25rem_185 { font-size: 1.75rem; font-weight: bold; color: #fff; margin-top: 0.25rem; } .sd-background_rgba_221_107_32_0_1_border_1px_sol_186 { background: rgba(221, 107, 32, 0.1); border: 1px solid rgba(221, 107, 32, 0.2); padding: 1rem; border-radius: 0.75rem; text-align: center; } .sd-fs_0_75rem_color_f6ad55_fw_600_text_transform_187 { font-size: 0.75rem; color: #f6ad55; font-weight: 600; text-transform: uppercase; } .sd-background_rgba_229_62_62_0_1_border_1px_soli_188 { background: rgba(229, 62, 62, 0.1); border: 1px solid rgba(229, 62, 62, 0.2); padding: 1rem; border-radius: 0.75rem; text-align: center; } .sd-fs_0_75rem_color_fc8181_fw_600_text_transform_189 { font-size: 0.75rem; color: #fc8181; font-weight: 600; text-transform: uppercase; } .sd-max_height_300px_overflow_y_auto_190 { max-height: 300px; overflow-y: auto; } .sd-mt_2rem_mb_2rem_background_var_bg_card_dark_b_191 { margin-top: 2rem; margin-bottom: 2rem; background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; } .sd-fs_1_15rem_mb_0_5rem_d_flex_align_center_gap__192 { font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; color: #fff; } .sd-text_muted_fs_0_8rem_m_0_0_1_25rem_0_193 { color: var(--text-muted); font-size: 0.8rem; margin: 0 0 1.25rem 0; } .sd-d_grid_grid_template_columns_repeat_auto_fit__194 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 1.25rem; } .sd-text_light_fs_0_875rem_m_0_0_0_75rem_0_fw_600_195 { color: var(--text-light); font-size: 0.875rem; margin: 0 0 0.75rem 0; font-weight: 600; } .sd-d_flex_gap_0_5rem_w_100_196 { display: flex; gap: 0.5rem; width: 100%; } .sd-fs_0_75rem_p_0_5rem_1rem_flex_grow_1_197 { font-size: 0.75rem; padding: 0.5rem 1rem; flex-grow: 1; } .sd-fs_0_75rem_p_0_5rem_1rem_border_1px_solid_rgb_198 { font-size: 0.75rem; padding: 0.5rem 1rem; border: 1px solid rgba(229, 62, 62, 0.4); background: transparent; color: #feb2b2; border-radius: 0.5rem; } .sd-d_flex_gap_0_5rem_align_center_199 { display: flex; gap: 0.5rem; align-items: center; } .sd-fs_0_75rem_text_muted_w_100_border_default_ro_200 { font-size: 0.75rem; color: var(--text-muted); width: 100%; border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.35rem; } .sd-fs_0_75rem_p_0_45rem_1rem_201 { font-size: 0.75rem; padding: 0.45rem 1rem; } .sd-d_flex_jc_between_align_center_background_rgb_202 { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); } .sd-fs_0_75rem_p_0_3rem_0_75rem_203 { font-size: 0.75rem; padding: 0.3rem 0.75rem; } .sd-grid_template_columns_repeat_auto_fit_minmax__204 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1.5rem; gap: 1rem; } .sd-p_1rem_1_25rem_205 { padding: 1rem 1.25rem; } .sd-width_2_25rem_height_2_25rem_fs_1rem_206 { width: 2.25rem; height: 2.25rem; font-size: 1rem; } .sd-width_2_25rem_height_2_25rem_fs_1rem_backgrou_207 { width: 2.25rem; height: 2.25rem; font-size: 1rem; background: rgba(221, 107, 32, 0.2); color: #fbd38d; } .sd-d_flex_jc_between_align_center_background_var_208 { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card-dark); padding: 0.75rem 1.25rem; border-radius: 0.75rem; border: 1px solid var(--border-color); margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; } .sd-d_flex_align_center_gap_0_75rem_209 { display: flex; align-items: center; gap: 0.75rem; } .sd-d_flex_align_center_gap_0_25rem_p_0_4rem_0_75_210 { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.75rem; } .sd-text_muted_fs_0_875rem_font_weight_500_211 { color: var(--text-muted); font-size: 0.875rem; font-weight: 500; } .sd-d_flex_gap_0_5rem_flex_grow_1_jc_end_max_widt_212 { display: flex; gap: 0.5rem; flex-grow: 1; justify-content: flex-end; max-width: 400px; width: 100%; } .sd-background_rgba_15_23_42_0_6_border_default_t_213 { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.85rem; width: 100%; outline: none; transition: var(--transition-fast); } .sd-background_rgba_15_23_42_0_6_border_default_t_214 { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.85rem; outline: none; width: 150px; } .sd-d_flex_gap_0_5rem_border_bottom_1px_solid_var_215 { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.25rem; padding-bottom: 0.25rem; } .sd-background_var_accent_color_text_white_border_216 { background: var(--accent-color); color: #fff; border-radius: 0.25rem 0.25rem 0 0; padding: 0.5rem 1rem; border: none; font-weight: 600; cursor: pointer; } .sd-background_transparent_text_muted_border_radi_217 { background: transparent; color: var(--text-muted); border-radius: 0.25rem 0.25rem 0 0; padding: 0.5rem 1rem; border: none; font-weight: 500; cursor: pointer; } .sd-d_grid_grid_template_columns_repeat_auto_fill_218 { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; margin-top: 1rem; } .sd-d_none_mt_1rem_219 { display: none; margin-top: 1rem; } .sd-width_150px_220 { width: 150px; } .sd-fw_600_text_light_fs_0_9rem_221 { font-weight: 600; color: var(--text-light); font-size: 0.9rem; } .sd-d_flex_gap_0_5rem_max_width_450px_w_100_222 { display: flex; gap: 0.5rem; max-width: 450px; width: 100%; } .sd-background_rgba_15_23_42_0_6_border_default_t_223 { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.85rem; width: 100%; outline: none; } .sd-d_flex_gap_0_5rem_224 { display: flex; gap: 0.5rem; } .sd-width_auto_225 { width: auto; } .sd-background_var_bg_card_dark_border_default_ro_226 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; margin-bottom: 2rem; } .sd-text_muted_fs_0_875rem_mb_1_5rem_227 { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.5rem; } .sd-max_width_600px_m_0_auto_228 { max-width: 600px; margin: 0 auto; } .sd-height_60_background_e53e3e_229 { height: 60%; background: #e53e3e; } .sd-height_40_background_dd6b20_230 { height: 40%; background: #dd6b20; } .sd-height_80_background_38a169_231 { height: 80%; background: #38a169; } .sd-background_var_bg_card_dark_border_default_ro_232 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; margin-top: 2rem; margin-bottom: 2rem; } .sd-fs_1_2rem_mb_0_5rem_text_white_d_flex_align_c_233 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #fff; display: flex; align-items: center; gap: 0.5rem; } .sd-text_muted_fs_0_85rem_m_0_0_1_5rem_0_234 { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1.5rem 0; } .sd-background_rgba_72_187_120_0_08_border_1px_so_235 { background: rgba(72, 187, 120, 0.08); border: 1px solid rgba(72, 187, 120, 0.15); padding: 1rem; border-radius: 0.75rem; text-align: center; } .sd-background_rgba_221_107_32_0_08_border_1px_so_236 { background: rgba(221, 107, 32, 0.08); border: 1px solid rgba(221, 107, 32, 0.15); padding: 1rem; border-radius: 0.75rem; text-align: center; } .sd-background_rgba_229_62_62_0_08_border_1px_sol_237 { background: rgba(229, 62, 62, 0.08); border: 1px solid rgba(229, 62, 62, 0.15); padding: 1rem; border-radius: 0.75rem; text-align: center; } .sd-mt_2rem_d_grid_grid_template_columns_1fr_gap__238 { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; } .sd-background_var_bg_card_dark_border_default_ro_239 { background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; } .sd-mb_1rem_d_flex_align_center_gap_0_5rem_240 { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .sd-d_flex_gap_0_5rem_background_rgba_0_0_0_0_2_p_241 { display: flex; gap: 0.5rem; background: rgba(0, 0, 0, 0.2); padding: 0.25rem; border-radius: 0.5rem; margin-bottom: 1.5rem; } .sd-flex_1_border_radius_0_375rem_242 { flex: 1; border-radius: 0.375rem; } .sd-d_flex_jc_between_243 { display: flex; justify-content: space-between; } .sd-fs_0_75rem_color_var_secondary_color_cursor_p_244 { font-size: 0.75rem; color: var(--secondary-color); cursor: pointer; } .sd-position_relative_d_flex_align_center_245 { position: relative; display: flex; align-items: center; } .sd-padding_right_2_5rem_246 { padding-right: 2.5rem; } .sd-position_absolute_right_0_5rem_background_non_247 { position: absolute; right: 0.5rem; background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.25rem; } .sd-w_100_mt_1rem_248 { width: 100%; margin-top: 1rem; } .sd-max_width_400px_249 { max-width: 400px; } .sd-mt_1_25rem_p_0_75rem_rounded_0_5rem_fs_0_8125_250 { margin-top: 1.25rem; padding: 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; display: none; line-height: 1.4; } .sd-background_rgba_229_62_62_0_05_p_1rem_border__251 { background: rgba(229, 62, 62, 0.05); padding: 1rem; border-radius: 0.75rem; border: 1px dashed rgba(229, 62, 62, 0.2); margin-bottom: 1.25rem; } .sd-m_0_flex_1_252 { margin: 0; flex: 1; } .sd-color_fca5a5_fw_600_253 { color: #fca5a5; font-weight: 600; } .sd-w_100_fs_0_75rem_text_muted_mt_0_5rem_line_he_254 { width: 100%; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; line-height: 1.3; } .sd-flex_1_255 { flex: 1; } .sd-background_rgba_255_255_255_0_05_cursor_not_a_256 { background: rgba(255, 255, 255, 0.05); cursor: not-allowed; } .sd-border_default_p_1rem_rounded_0_5rem_backgrou_257 { border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.15); margin-bottom: 1rem; } .sd-text_accent_fw_bold_mb_0_5rem_258 { color: var(--accent-color); font-weight: bold; margin-bottom: 0.5rem; } .sd-d_flex_flex_col_gap_0_5rem_mb_0_75rem_259 { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .sd-d_flex_gap_0_5rem_mt_1_5rem_260 { display: flex; gap: 0.5rem; margin-top: 1.5rem; } .sd-background_white_color_black_font_family_&quo_261 { background: white; color: black; font-family: "Times New Roman", Times, serif; padding: 2.5rem; border-radius: 0.5rem; max-height: 70vh; overflow-y: auto; } .sd-background_white_color_black_p_2_5rem_rounded_262 { background: white; color: black; padding: 2.5rem; border-radius: 0.5rem; max-height: 70vh; overflow-y: auto; font-family: "Times New Roman", Times, serif; } .sd-max_width_600px_border_1px_solid_rgba_255_255_263 { max-width: 600px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .sd-text_accent_margin_right_4px_264 { color: var(--accent-color); margin-right: 4px; } .sd-p_1_5rem_265 { padding: 1.5rem; } .sd-mb_1rem_266 { margin-bottom: 1rem; } .sd-d_block_fs_0_8rem_fw_bold_text_muted_mb_0_35r_267 { display: block; font-size: 0.8rem; font-weight: bold; color: var(--text-muted); margin-bottom: 0.35rem; } .sd-background_rgba_255_255_255_0_03_color_rgba_2_268 { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.6); font-weight: bold; } .sd-mb_0_5rem_269 { margin-bottom: 0.5rem; } .sd-border_color_rgba_255_255_255_0_15_270 { border-color: rgba(255,255,255,0.15); } .sd-d_grid_grid_template_columns_1fr_1fr_gap_1rem_271 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .sd-mb_0_25rem_272 { margin-bottom: 0.25rem; } .sd-d_block_fs_0_75rem_text_muted_mb_0_5rem_font__273 { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; font-style: italic; } .sd-d_flex_gap_0_5rem_flex_wrap_wrap_274 { display: flex; gap: 0.5rem; flex-wrap: wrap; } .sd-mt_1_5rem_d_flex_gap_0_75rem_275 { margin-top: 1.5rem; display: flex; gap: 0.75rem; } .sd-flex_1_p_0_75rem_rounded_0_5rem_fw_bold_276 { flex: 1; padding: 0.75rem; border-radius: 0.5rem; font-weight: bold; } .sd-flex_1_5_p_0_75rem_rounded_0_5rem_fs_0_95rem_277 { flex: 1.5; padding: 0.75rem; border-radius: 0.5rem; font-size: 0.95rem; } .sd-max_width_900px_width_95_278 { max-width: 900px; width: 95%; } .sd-background_white_color_black_font_family_cal_279 { background: white; color: black; font-family: 'Californian FB', 'Times New Roman', serif; padding: 3rem; border-radius: 0.5rem; max-height: 70vh; overflow-y: auto; border: 2px solid #ccc; } .sd-max_width_950px_width_95_280 { max-width: 950px; width: 95%; } .sd-background_25d366_text_white_border_none_fw_b_281 { background: #25d366; color: white; border: none; font-weight: bold; } .sd-d_grid_grid_template_columns_repeat_auto_fill_282 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; max-height: 250px; overflow-y: auto; padding: 0.5rem; background: rgba(0, 0, 0, 0.15); border-radius: 0.5rem; border: 1px solid var(--border-color); } .sd-border_default_p_1rem_rounded_0_5rem_backgrou_283 { border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.02); margin-top: 1rem; margin-bottom: 1.5rem; } .sd-text_accent_fw_bold_mb_0_75rem_d_flex_align_c_284 { color: var(--accent-color); font-weight: bold; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.25rem; } .sd-d_grid_grid_template_columns_repeat_auto_fit__285 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .sd-w_100_fw_bold_286 { width: 100%; font-weight: bold; } .sd-max_width_700px_287 { max-width: 700px; } .sd-padding_top_1rem_288 { padding-top: 1rem; } .sd-max_width_550px_289 { max-width: 550px; } .sd-background_rgba_255_255_255_0_02_border_1px_s_290 { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .sd-text_white_291 { color: #fff; } .sd-grid_column_span_2_292 { grid-column: span 2; } .sd-d_none_border_default_p_1rem_rounded_0_5rem_b_293 { display: none; border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.5rem; background: rgba(104, 211, 145, 0.1); margin-bottom: 1rem; } .sd-text_success_fw_bold_mb_0_5rem_294 { color: var(--success-color); font-weight: bold; margin-bottom: 0.5rem; } .sd-fs_0_8125rem_text_white_mb_0_75rem_d_flex_fle_295 { font-size: 0.8125rem; color: #fff; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; } .sd-fw_bold_text_accent_296 { font-weight: bold; color: var(--accent-color); } .sd-fw_bold_color_var_secondary_color_297 { font-weight: bold; color: var(--secondary-color); } .sd-fs_0_75rem_text_muted_mb_0_25rem_298 { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; } .sd-fs_0_8125rem_color_eee_background_rgba_0_0_0__299 { font-size: 0.8125rem; color: #eee; background: rgba(0, 0, 0, 0.3); padding: 0.5rem; border-radius: 0.25rem; white-space: pre-wrap; } .sd-d_flex_jc_between_align_center_background_rgb_300 { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.03); padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid rgba(255, 255, 255, 0.05); } .sd-fs_0_8125rem_font_family_monospace_301 { font-size: 0.8125rem; font-family: monospace; } .sd-text_decoration_none_302 { text-decoration: none; } .sd-mt_0_75rem_d_flex_gap_1rem_303 { margin-top: 0.75rem; display: flex; gap: 1rem; } .sd-d_flex_align_center_gap_0_25rem_fs_0_8125rem__304 { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; cursor: pointer; } .sd-mt_0_75rem_margin_bottom_0_305 { margin-top: 0.75rem; margin-bottom: 0; } .sd-d_none_background_rgba_229_62_62_0_15_border__306 { display: none; background: rgba(229, 62, 62, 0.15); border: 1px solid var(--danger-color); color: #fff; padding: 0.5rem; border-radius: 0.375rem; margin-top: 0.5rem; font-size: 0.75rem; } .sd-flex_2_307 { flex: 2; } .sd-max_width_450px_308 { max-width: 450px; } .sd-background_rgba_229_62_62_0_15_border_1px_sol_309 { background: rgba(229, 62, 62, 0.15); border: 1px solid var(--danger-color); padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1.25rem; color: #fff; } .sd-color_fc8181_d_block_mb_0_25rem_310 { color: #fc8181; display: block; margin-bottom: 0.25rem; } .sd-m_0_fs_0_8125rem_line_height_1_4_311 { margin: 0; font-size: 0.8125rem; line-height: 1.4; } .sd-max_width_500px_312 { max-width: 500px; } .sd-background_rgba_255_255_255_0_02_border_1px_s_313 { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.8125rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .sd-text_accent_font_family_monospace_314 { color: var(--accent-color); font-family: monospace; } .sd-grid_column_span_2_border_top_1px_solid_rgba__315 { grid-column: span 2; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 0.5rem; } .sd-font_family_monospace_text_white_316 { font-family: monospace; color: #fff; } .sd-d_grid_grid_template_columns_repeat_4_1fr_gap_317 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; } .sd-p_0_75rem_0_5rem_min_height_auto_border_radiu_318 { padding: 0.75rem 0.5rem; min-height: 0; /* 'auto' not supported in older Firefox; 0 is equivalent in flex context */ border-radius: 0.375rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; } .sd-text_muted_fs_0_75rem_ta_center_word_break_br_319 { color: var(--text-muted); font-size: 0.75rem; text-align: center; word-break: break-all; } .sd-d_none_background_rgba_229_62_62_0_15_border__320 { display: none; background: rgba(229, 62, 62, 0.15); border: 1px solid var(--danger-color); color: #fff; padding: 0.5rem; border-radius: 0.5rem; margin-bottom: 0.75rem; font-size: 0.8rem; font-weight: 600; } .sd-background_rgba_15_23_42_0_6_border_default_t_321 { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 0.5rem; padding: 0.5rem; width: 100%; } .sd-fw_bold_text_accent_mb_0_5rem_322 { font-weight: bold; color: var(--accent-color); margin-bottom: 0.5rem; } .sd-background_rgba_30_41_59_0_5_border_default_b_323 { background: rgba(30, 41, 59, 0.5); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1.25rem; } .sd-d_flex_align_center_gap_0_75rem_mb_1rem_324 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .sd-fs_2_25rem_325 { font-size: 2.25rem; } .sd-fs_1rem_text_light_word_break_break_all_326 { font-size: 1rem; color: var(--text-light); word-break: break-all; } .sd-w_100_fs_0_85rem_border_collapse_collapse_327 { width: 100%; font-size: 0.85rem; border-collapse: collapse; } .sd-border_bottom_1px_solid_rgba_255_255_255_0_05_328 { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .sd-p_0_5rem_0_text_muted_329 { padding: 0.5rem 0; color: var(--text-muted); } .sd-p_0_5rem_0_fw_bold_font_family_monospace_330 { padding: 0.5rem 0; font-weight: bold; font-family: monospace; } .sd-p_0_5rem_0_fw_bold_331 { padding: 0.5rem 0; font-weight: bold; } .sd-p_0_5rem_0_332 { padding: 0.5rem 0; } .sd-border_top_1px_solid_var_border_color_padding_333 { border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1rem; } .sd-fs_0_9rem_mb_0_75rem_text_light_334 { font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--text-light); } .sd-d_flex_gap_1rem_mb_1rem_335 { display: flex; gap: 1rem; margin-bottom: 1rem; } .sd-d_flex_align_center_gap_0_4rem_cursor_pointer_336 { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; color: var(--text-light); font-size: 0.875rem; } .sd-d_flex_align_center_gap_0_4rem_cursor_pointer_337 { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; color: #48bb78; font-size: 0.875rem; } .sd-d_flex_align_center_gap_0_4rem_cursor_pointer_338 { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; color: #fc8181; font-size: 0.875rem; } .sd-background_rgba_15_23_42_0_6_border_default_t_339 { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 0.5rem; padding: 0.5rem; width: 100%; font-size: 0.85rem; resize: vertical; } .sd-d_flex_gap_0_5rem_mt_1_5rem_border_top_1px_so_340 { display: flex; gap: 0.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 1rem; } .sd-max_width_600px_background_var_bg_card_dark_b_341 { max-width: 600px; background: var(--bg-card-dark); border: 1px solid var(--border-color); border-radius: 1rem; box-shadow: var(--shadow-lg); } .sd-border_bottom_1px_solid_rgba_255_255_255_0_08_342 { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; } .sd-m_0_text_white_fs_1_25rem_d_flex_align_center_343 { margin: 0; color: #fff; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .sd-background_none_border_none_text_muted_cursor_344 { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; } .sd-p_1rem_0_color_eee_fs_0_875rem_max_height_70v_345 { padding: 1rem 0; color: #eee; font-size: 0.875rem; max-height: 70vh; overflow-y: auto; } .sd-border_top_1px_solid_rgba_255_255_255_0_08_pa_346 { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; display: flex; justify-content: flex-end; gap: 0.5rem; } .sd-background_var_success_color_border_text_succ_347 { background: var(--success-color); border-color: var(--success-color); color: white; } .sd-max_width_800px_height_85vh_d_flex_flex_col_348 { max-width: 800px; height: 85vh; display: flex; flex-direction: column; } .sd-padding_bottom_0_75rem_border_bottom_1px_soli_349 { padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sd-m_0_fs_1_1rem_text_white_350 { margin: 0; font-size: 1.1rem; color: #fff; } .sd-flex_grow_1_p_1rem_0_d_flex_jc_center_align_c_351 { flex-grow: 1; padding: 1rem 0; display: flex; justify-content: center; align-items: center; background: #0f172a; overflow: hidden; position: relative; } .sd-border_top_1px_solid_rgba_255_255_255_0_08_pa_352 { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.75rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .sd-text_muted_353 { color: var(--text-muted); } .sd-d_inline_flex_align_center_gap_0_25rem_text_d_354 { display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; } /* Video Edukasi & Admin Video Components */ .video-edukasi-card { grid-column: span 1; display: flex; flex-direction: column; gap: 1rem; } .video-category-tabs-container { display: flex; flex-wrap: wrap; gap: 0.4rem; } .video-player-frame { position: relative; border-radius: 0.75rem; overflow: hidden; background: #000; aspect-ratio: 16 / 9; flex-shrink: 0; } .video-iframe-element { width: 100%; height: 100%; display: block; } .video-placeholder-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); cursor: pointer; } .video-play-icon { font-size: 4rem; margin-bottom: 0.75rem; filter: drop-shadow(0 4px 8px rgba(229, 62, 62, 0.5)); } .video-placeholder-text { color: #ccc; font-size: 0.9rem; text-align: center; padding: 0 1rem; } .video-info-box { padding: 0.5rem 0; display: none; } .video-info-title { color: #fff; font-size: 0.95rem; display: block; margin-bottom: 0.25rem; } .video-info-desc { color: #aaa; font-size: 0.78rem; display: block; } .video-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; overflow-y: auto; max-height: 280px; padding-right: 0.25rem; } .admin-video-form-card { margin-bottom: 1.5rem; padding: 1.5rem; } .admin-video-form-title { color: #fff; margin-bottom: 1rem; font-size: 1rem; } .admin-video-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .admin-video-full-col { grid-column: span 2; } .admin-video-sublabel { color: #aaa; font-size: 0.75rem; } .admin-video-submit-btn { margin-top: 1rem; } /* PWA Status Badge */ .pwa-status-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; margin-right: 8px; transition: all 0.3s ease; } #pwa-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; display: inline-block; } /* Captcha Component Styles */ #captcha-svg-container { background: #0f172a; border: 1px solid #334155; border-radius: 6px; height: 42px; width: 130px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; flex-shrink: 0; -webkit-user-select: none; user-select: none; } .captcha-svg-box { background: #0f172a; border-radius: 4px; } #login-captcha { text-transform: uppercase; letter-spacing: 2px; font-weight: bold; height: 42px; } /* E-Signature Modal Component Styles */ .esign-modal-backdrop { display: none; } .esign-modal-content { max-width: 580px; background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; color: #f8fafc; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .esign-modal-header { background: rgba(30, 41, 59, 0.6); padding: 1.25rem 1.5rem; border-bottom: 1px solid #1e293b; display: flex; align-items: center; justify-content: space-between; } .esign-modal-header-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #38bdf8; display: flex; align-items: center; gap: 8px; } .esign-modal-close { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1.2rem; } .esign-modal-body { padding: 1.5rem; } .esign-company-box { background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.2); padding: 12px 16px; border-radius: 10px; margin-bottom: 1.25rem; } .esign-company-label { font-size: 0.82rem; color: #94a3b8; } .esign-company-name { font-weight: 700; font-size: 1.05rem; color: #f1f5f9; margin-top: 2px; } .esign-reg-no { font-size: 0.78rem; font-family: monospace; color: #38bdf8; margin-top: 2px; } .esign-upload-box { margin-bottom: 1.25rem; } .esign-upload-card { margin-bottom: 1rem; background: rgba(30, 41, 59, 0.5); border: 1px dashed #334155; padding: 10px 14px; border-radius: 10px; } .esign-upload-flex { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .esign-upload-title { font-size: 0.82rem; font-weight: 600; color: #38bdf8; display: block; } .esign-upload-subtitle { font-size: 0.72rem; color: #94a3b8; font-style: italic; } .esign-upload-btn { background: linear-gradient(135deg, #0284c7, #2563eb); border: none; color: #fff; padding: 6px 14px; font-size: 0.78rem; border-radius: 6px; font-weight: 700; cursor: pointer; } .esign-canvas-label { display: block; font-size: 0.85rem; font-weight: 600; color: #cbd5e1; margin-bottom: 6px; } .esign-canvas-container { border: 2px dashed #334155; background: #020617; border-radius: 8px; position: relative; width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; } .esign-canvas { width: 100%; height: 155px; cursor: crosshair; touch-action: none; border-radius: 6px; } .esign-canvas-placeholder { position: absolute; pointer-events: none; color: #475569; font-size: 0.85rem; font-style: italic; } .esign-canvas-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .esign-clear-btn { background: #1e293b; border: 1px solid #334155; color: #94a3b8; padding: 4px 12px; font-size: 0.75rem; border-radius: 6px; } .esign-stamp-btn { background: rgba(59, 130, 246, 0.2); border: 1px solid #3b82f6; color: #60a5fa; padding: 4px 12px; font-size: 0.75rem; border-radius: 6px; } .esign-security-box { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2); padding: 10px 14px; border-radius: 8px; font-size: 0.78rem; color: #94a3b8; display: flex; align-items: flex-start; gap: 8px; } .esign-security-icon { font-size: 1.1rem; color: #10b981; } .esign-security-title { color: #10b981; } .esign-modal-footer { background: rgba(30, 41, 59, 0.4); padding: 1rem 1.5rem; border-top: 1px solid #1e293b; display: flex; justify-content: flex-end; gap: 10px; } .esign-btn-cancel { background: #1e293b; border: 1px solid #334155; color: #cbd5e1; padding: 8px 16px; border-radius: 8px; } .esign-btn-submit { background: linear-gradient(135deg, #10b981, #059669); border: none; color: #fff; font-weight: 700; padding: 8px 20px; border-radius: 8px; cursor: pointer; } /* Edukasi & Pelatihan Infographic Cards & Modals */ .edu-step-card-interactive { cursor: pointer; position: relative; transition: all 0.3s ease; border: 1px solid rgba(229, 62, 62, 0.4); } .step-number { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-color, #e53e3e); color: #ffffff; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(229, 62, 62, 0.35); } .step-number.edu-step-num { background: var(--accent-color, #e53e3e); color: #ffffff; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; } .edu-step-badge { background: rgba(229, 62, 62, 0.25); color: #feb2b2; font-size: 0.68rem; padding: 3px 8px; border-radius: 4px; font-weight: 700; border: 1px solid rgba(229, 62, 62, 0.4); } .edu-infographic-preview-box { overflow: hidden; border-radius: 0.5rem; border: 1px solid var(--border-color); background: rgba(15, 23, 42, 0.7); position: relative; margin-top: auto; } .edu-infographic-preview-img { width: 100%; height: 110px; object-fit: cover; object-position: top; display: block; opacity: 0.92; transition: all 0.3s ease; } .edu-infographic-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, 0.92), transparent 55%); display: flex; align-items: flex-end; justify-content: center; padding: 0.4rem; } .edu-infographic-overlay-text { font-size: 0.72rem; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .edu-modal-container { max-width: 920px; padding: 1.5rem; background: #0f172a; border: 1px solid var(--border-color); border-radius: 1rem; box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.7); } .edu-modal-header { border-bottom: 1px solid var(--border-color); padding-bottom: 0.8rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; } .edu-modal-title { margin: 0; color: #fff; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; } .edu-modal-close-btn { background: transparent; border: none; color: #fff; cursor: pointer; } .edu-modal-body-container { text-align: center; overflow: hidden; border-radius: 0.75rem; background: #000; padding: 0.5rem; } .edu-modal-img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 0.5rem; box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.6); } .edu-modal-footer { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .edu-modal-download-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; } .edu-step-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } .edu-step-title { margin: 0; } .edu-step-desc { margin-bottom: 0.6rem; } .edu-modal-footer-note { font-size: 0.825rem; color: var(--text-muted); } .edu-modal-footer-actions { display: flex; gap: 0.5rem; }