* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 25%, #667eea 50%, #764ba2 75%, #f093fb 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
min-height: 100vh;
color: #333;
overflow-x: hidden;
position: relative;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Modern Police-themed Background Pattern */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
/* Police badge pattern */
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 1px, transparent 1px),
/* Geometric pattern */
linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
/* Subtle grid */
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size:
100px 100px,
150px 150px,
50px 50px,
50px 50px,
25px 25px,
25px 25px;
background-position:
0 0,
50px 50px,
0 0,
25px 25px,
0 0,
0 0;
pointer-events: none;
z-index: -2;
animation: patternMove 20s linear infinite;
}
@keyframes patternMove {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(50px) translateY(50px); }
}
/* Floating Police Elements with Custom SVG Background */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('polda-background.svg'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size:
cover,
300px 300px,
150px 150px;
background-position:
center center,
10% 10%,
90% 90%;
background-repeat:
no-repeat,
no-repeat,
no-repeat;
pointer-events: none;
z-index: -1;
animation: floatElements 30s ease-in-out infinite;
}
@keyframes floatElements {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.05;
}
50% {
transform: translateY(-20px) rotate(5deg);
opacity: 0.08;
}
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
animation: fadeIn 0.8s ease-out;
position: relative;
z-index: 1;
}
.container.full-width {
max-width: 100%;
padding: 10px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(102, 126, 234, 0.5); }
50% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(102, 126, 234, 0.6); }
}
header {
text-align: center;
background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240,240,240,0.9));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 30px;
border-radius: 25px;
margin-bottom: 30px;
box-shadow:
0 20px 40px rgba(0,0,0,0.15),
0 10px 20px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.9),
0 0 0 1px rgba(255,255,255,0.3);
position: relative;
overflow: hidden;
animation: slideIn 0.6s ease-out;
border: 1px solid rgba(255,255,255,0.2);
}
header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent,
rgba(102, 126, 234, 0.1),
rgba(118, 75, 162, 0.1),
transparent);
transform: rotate(45deg);
animation: shimmer 4s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
/* Police Badge Style Logo */
.logo {
width: 120px;
height: 120px;
margin-bottom: 20px;
object-fit: contain;
border-radius: 50%;
box-shadow:
0 15px 35px rgba(0,0,0,0.2),
0 5px 15px rgba(0,0,0,0.1),
0 0 0 6px rgba(255,255,255,0.9),
0 0 0 8px rgba(102, 126, 234, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 10px;
position: relative;
z-index: 2;
border: 2px solid rgba(102, 126, 234, 0.2);
animation: logoFloat 3s ease-in-out infinite;
}
.logo:hover {
transform: scale(1.05) rotate(2deg);
box-shadow: 0 12px 35px rgba(0,0,0,0.2), 0 0 0 6px rgba(102, 126, 234, 0.3);
border-color: rgba(102, 126, 234, 0.5);
}
.logo:hover {
transform: scale(1.1) rotate(5deg);
box-shadow:
0 20px 40px rgba(0,0,0,0.25),
0 10px 20px rgba(0,0,0,0.15),
0 0 0 8px rgba(255,255,255,0.9),
0 0 0 12px rgba(102, 126, 234, 0.4),
0 0 30px rgba(102, 126, 234, 0.3);
border-color: rgba(102, 126, 234, 0.6);
animation: logoGlow 1s ease-in-out;
}
@keyframes logoFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-5px) rotate(1deg);
}
}
@keyframes logoGlow {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.1) drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
}
}
/* Enhanced Header Titles */
header h1 {
color: #1e3c72;
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
background: linear-gradient(135deg, #1e3c72, #2a5298, #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
header h2 {
color: #2a5298;
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
opacity: 0.9;
}
header h3 {
color: #666;
font-size: 14px;
font-weight: 400;
opacity: 0.8;
}
/* Logo styling untuk admin dashboard */
.admin-header .logo {
width: 60px !important;
height: 60px !important;
margin-bottom: 10px;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 0 4px rgba(255,255,255,0.9);
border: 2px solid rgba(102, 126, 234, 0.3);
animation: logoFloat 3s ease-in-out infinite;
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 6px;
transition: all 0.3s ease;
}
.admin-header .logo:hover {
transform: scale(1.05) rotate(2deg);
box-shadow: 0 12px 25px rgba(0,0,0,0.2), 0 0 0 6px rgba(102, 126, 234, 0.4);
border-color: rgba(102, 126, 234, 0.6);
}
main {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.login-buttons {
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: center;
}
/* Floating Voice Control (Bottom Right Corner) */
.floating-voice-control {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
}
.btn-voice-float {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: linear-gradient(145deg, #28a745, #20c997);
color: white;
font-size: 18px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.btn-voice-float:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);
background: linear-gradient(145deg, #20c997, #28a745);
}
.btn-voice-float.stop {
background: linear-gradient(145deg, #dc3545, #e74c3c);
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}
.btn-voice-float.stop:hover {
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
background: linear-gradient(145deg, #e74c3c, #dc3545);
}
/* Pulse animation for active voice */
.btn-voice-float.playing {
animation: voicePulse 1.5s ease-in-out infinite;
}
@keyframes voicePulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 25px rgba(40, 167, 69, 0.8), 0 0 20px rgba(40, 167, 69, 0.6);
}
}
/* Ripple effect on click */
.btn-voice-float::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.4);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
}
.btn-voice-float:active::before {
width: 60px;
height: 60px;
}
/* Mobile responsive for floating control */
@media (max-width: 768px) {
.floating-voice-control {
bottom: 15px;
right: 15px;
}
.btn-voice-float {
width: 45px;
height: 45px;
font-size: 16px;
}
}
/* Enhanced Voice Welcome Controls */
.voice-welcome-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.btn-voice {
background: linear-gradient(145deg, #28a745, #20c997, #17a2b8);
color: white;
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.btn-voice:hover {
background: linear-gradient(145deg, #20c997, #28a745, #17a2b8);
box-shadow: 0 12px 30px rgba(40, 167, 69, 0.6);
transform: translateY(-4px) scale(1.05);
}
.btn-voice-stop {
background: linear-gradient(145deg, #dc3545, #e74c3c, #fd7e14);
color: white;
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-voice-stop:hover {
background: linear-gradient(145deg, #e74c3c, #dc3545, #fd7e14);
box-shadow: 0 12px 30px rgba(220, 53, 69, 0.6);
transform: translateY(-4px) scale(1.05);
}
/* Speech playing visual indicator */
body.speech-playing {
position: relative;
}
body.speech-playing::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #28a745, #20c997, #17a2b8, #28a745);
background-size: 200% 100%;
animation: speechProgress 3s linear infinite;
z-index: 9999;
}
@keyframes speechProgress {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Voice button animations */
.btn-voice::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
}
.btn-voice:hover::before {
width: 300px;
height: 300px;
}
/* Sound wave animation for voice button */
.btn-voice.playing {
animation: soundWave 1s ease-in-out infinite alternate;
}
@keyframes soundWave {
0% { box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4); }
100% { box-shadow: 0 8px 30px rgba(40, 167, 69, 0.8), 0 0 20px rgba(40, 167, 69, 0.6); }
}
/* Mobile responsive for voice controls */
@media (max-width: 768px) {
.voice-welcome-controls {
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 25px;
}
.btn-voice,
.btn-voice-stop {
width: 100%;
max-width: 300px;
font-size: 14px;
padding: 15px 25px;
}
}
/* Accessibility improvements */
.btn-voice:focus,
.btn-voice-stop:focus {
outline: 3px solid rgba(40, 167, 69, 0.5);
outline-offset: 2px;
}
/* Loading state for voice button */
.btn-voice.loading {
position: relative;
color: transparent;
}
.btn-voice.loading::after {
content: '🔄 Memuat...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.btn {
padding: 18px 35px;
font-size: 16px;
border: none;
border-radius: 15px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 160px;
position: relative;
overflow: hidden;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.btn:hover::before {
left: 100%;
}
.btn-user {
background: linear-gradient(145deg, #28a745, #20c997, #17a2b8);
color: white;
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-user:hover {
background: linear-gradient(145deg, #20c997, #28a745, #17a2b8);
box-shadow: 0 12px 30px rgba(40, 167, 69, 0.6);
transform: translateY(-4px) scale(1.05);
}
.btn-admin {
background: linear-gradient(145deg, #dc3545, #e74c3c, #fd7e14);
color: white;
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-admin:hover {
background: linear-gradient(145deg, #e74c3c, #dc3545, #fd7e14);
box-shadow: 0 12px 30px rgba(220, 53, 69, 0.6);
transform: translateY(-4px) scale(1.05);
}
.btn-submit {
background: linear-gradient(145deg, #007bff, #0056b3, #6f42c1);
color: white;
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-submit:hover {
background: linear-gradient(145deg, #0056b3, #007bff, #6f42c1);
box-shadow: 0 12px 30px rgba(0, 123, 255, 0.6);
transform: translateY(-4px) scale(1.05);
}
.btn-back {
background: linear-gradient(145deg, #6c757d, #5a6268, #495057);
color: white;
box-shadow: 0 8px 20px rgba(108, 117, 125, 0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-back:hover {
background: linear-gradient(145deg, #5a6268, #6c757d, #495057);
box-shadow: 0 12px 30px rgba(108, 117, 125, 0.6);
transform: translateY(-4px) scale(1.05);
}
.btn:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 15px 35px rgba(0,0,0,0.25);
filter: brightness(1.1);
}
.btn:active {
transform: translateY(-2px) scale(1.02);
transition: all 0.1s ease;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
/* Enhanced Form Styling */
.registration-form, .login-form {
background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,249,250,0.9));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 40px;
border-radius: 25px;
box-shadow:
0 20px 40px rgba(0,0,0,0.15),
0 10px 20px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.9);
width: 100%;
max-width: 500px;
position: relative;
border: 1px solid rgba(255,255,255,0.3);
animation: formSlideIn 0.8s ease-out;
}
@keyframes formSlideIn {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #1e3c72;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
position: relative;
}
.form-group label::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.3s ease;
}
.form-group:focus-within label::after {
width: 100%;
}
.form-group input, .form-group select {
width: 100%;
padding: 16px 20px;
border: 2px solid rgba(225, 229, 233, 0.8);
border-radius: 12px;
font-size: 16px;
background: rgba(255,255,255,0.95);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
}
.form-group input:focus, .form-group select:focus {
border-color: #667eea;
outline: none;
transform: translateY(-3px);
box-shadow:
0 8px 25px rgba(102, 126, 234, 0.25),
0 4px 12px rgba(102, 126, 234, 0.15);
background: white;
scale: 1.02;
}
.form-group input:hover, .form-group select:hover {
border-color: #b8c6db;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 20px;
}
.form-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 35px;
flex-wrap: wrap;
}
/* Enhanced Footer */
footer {
text-align: center;
color: rgba(255,255,255,0.9);
padding: 30px;
margin-top: 50px;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
border-radius: 20px 20px 0 0;
border-top: 1px solid rgba(255,255,255,0.2);
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
border-radius: 2px;
}
footer small {
display: block;
margin-top: 8px;
font-size: 11px;
opacity: 0.8;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
footer small a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: all 0.3s ease;
}
footer small a:hover {
color: #ffffff;
text-decoration: underline;
text-shadow: 0 0 5px rgba(255,255,255,0.5);
}
.admin-profile-corner {
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
}
.admin-desktop {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.admin-header {
background: linear-gradient(145deg, #ffffff, #f0f0f0);
padding: 25px 40px;
border-radius: 0;
margin-bottom: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
position: relative;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: none;
}
.header-left h1 {
color: #2c3e50;
font-size: 28px;
margin-bottom: 5px;
font-weight: 700;
}
.header-left h2 {
color: #7f8c8d;
font-size: 16px;
font-weight: 500;
margin: 0;
}
.admin-stats {
display: flex;
gap: 30px;
}
.stat-item {
text-align: center;
padding: 15px 20px;
background: linear-gradient(145deg, #667eea, #764ba2);
border-radius: 12px;
color: white;
min-width: 80px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.stat-number {
display: block;
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-full-content {
margin: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 30px 40px;
}
.admin-tabs {
background: rgba(255,255,255,0.95);
padding: 0;
border-radius: 15px 15px 0 0;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
display: flex;
flex-wrap: wrap;
position: relative;
}
/* Submenu wrapper */
.tab-menu-wrapper {
position: relative;
display: inline-block;
}
/* Submenu dropdown */
.tab-submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-radius: 8px;
min-width: 180px;
z-index: 1000;
margin-top: 5px;
}
.tab-menu-wrapper:hover .tab-submenu,
.tab-submenu.show {
display: block;
}
.tab-submenu button {
display: block;
width: 100%;
padding: 12px 20px;
border: none;
background: white;
text-align: left;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
color: #333;
}
.tab-submenu button:hover {
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
}
.tab-submenu button:first-child {
border-radius: 8px 8px 0 0;
}
.tab-submenu button:last-child {
border-radius: 0 0 8px 8px;
}
.tab-btn.has-submenu::after {
content: ' â–¼';
font-size: 10px;
margin-left: 5px;
}
.admin-tab-content {
background: rgba(255,255,255,0.95);
border-radius: 0 0 15px 15px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
min-height: 70vh;
}
.container.admin-desktop {
padding: 0;
max-width: 100%;
}
.container.admin-desktop main {
padding: 0 40px 40px 40px;
}
.admin-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 5px;
}
.admin-buttons {
display: flex;
gap: 10px;
}
.btn-change-pass {
background: #17a2b8;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-logout {
background: #dc3545;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease;
}
.modal-content {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 35px;
border-radius: 20px;
width: 90%;
max-width: 450px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
position: relative;
animation: slideIn 0.4s ease;
border: 1px solid rgba(255,255,255,0.2);
}
.modal-content h3 {
margin-bottom: 20px;
text-align: center;
color: #333;
}
.user-profile-corner {
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
}
.contact-corner {
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
}
.contact-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: linear-gradient(145deg, #25d366, #128c7e);
color: white;
text-decoration: none;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
font-weight: 600;
font-size: 14px;
backdrop-filter: blur(10px);
}
.contact-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
background: linear-gradient(145deg, #128c7e, #25d366);
text-decoration: none;
color: white;
}
.contact-icon {
font-size: 18px;
animation: ring 2s ease-in-out infinite;
}
@keyframes ring {
0%, 100% { transform: rotate(0deg); }
10%, 30% { transform: rotate(-10deg); }
20% { transform: rotate(10deg); }
}
.profile-card {
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(102, 126, 234, 0.2);
border-radius: 20px;
padding: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
backdrop-filter: blur(10px);
min-width: 200px;
transition: all 0.3s ease;
}
.profile-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0,0,0,0.2);
background: rgba(255, 255, 255, 1);
}
.profile-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.profile-avatar {
font-size: 20px;
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.profile-name {
display: flex;
flex-direction: column;
gap: 2px;
}
.profile-name span {
font-weight: 700;
color: #2c3e50;
font-size: 14px;
}
.profile-name small {
font-size: 11px;
color: #7f8c8d;
font-weight: 500;
}
.profile-actions {
display: flex;
gap: 8px;
}
.btn-profile-action {
flex: 1;
padding: 8px 12px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.3s ease;
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
}
.btn-profile-action:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn-profile-action.logout {
background: linear-gradient(145deg, #dc3545, #e74c3c);
}
.btn-profile-action.logout:hover {
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.broadcast-form {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.broadcast-history {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.broadcast-history h4 {
margin-bottom: 20px;
color: #333;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
.broadcast-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.broadcast-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
border-left: 4px solid #667eea;
}
.broadcast-info h5 {
margin: 0 0 8px 0;
color: #333;
font-size: 16px;
}
.broadcast-info p {
margin: 0 0 8px 0;
color: #666;
font-size: 14px;
}
.broadcast-info small {
color: #999;
font-size: 12px;
}
.broadcast-status {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.broadcast-status.sent {
background: #d4edda;
color: #155724;
}
.notification-area {
position: fixed;
top: 20px;
right: 20px;
z-index: 2000;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 10px;
}
.broadcast-notification {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border-radius: 12px;
padding: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-left: 4px solid #667eea;
animation: slideInRight 0.5s ease;
backdrop-filter: blur(10px);
}
.broadcast-notification.warning {
border-left-color: #ffc107;
}
.broadcast-notification.urgent {
border-left-color: #dc3545;
animation: pulse 0.5s ease infinite alternate;
}
.notification-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.notification-icon {
font-size: 18px;
}
.notification-header h4 {
flex: 1;
margin: 0;
font-size: 14px;
color: #333;
}
.close-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #999;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn:hover {
color: #666;
}
.broadcast-notification p {
margin: 0 0 8px 0;
color: #666;
font-size: 13px;
line-height: 1.4;
}
.broadcast-notification small {
color: #999;
font-size: 11px;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.user-management {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.search-section {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: center;
}
.search-section input {
flex: 1;
padding: 12px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 14px;
}
.users-table table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 2px solid #e2e8f0;
}
.users-table th, .users-table td {
padding: 12px;
text-align: left;
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
}
.users-table th:last-child, .users-table td:last-child {
border-right: none;
}
.users-table th {
background: #f8f9fa;
font-weight: 600;
color: #333;
border-bottom: 2px solid #dee2e6;
}
.users-table tbody tr {
background: #ffffff;
}
.users-table tbody tr:nth-child(even) {
background: #f8f9fa;
}
.status {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.status.active {
background: #d4edda;
color: #155724;
}
.status.inactive {
background: #f8d7da;
color: #721c24;
}
.btn-action {
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
margin-right: 5px;
transition: all 0.3s ease;
}
.btn-action.edit {
background: #17a2b8;
color: white;
}
.btn-action.edit:hover {
background: #138496;
transform: translateY(-1px);
}
.btn-action.delete {
background: #dc3545;
color: white;
}
.btn-action.delete:hover {
background: #c82333;
transform: translateY(-1px);
}
.btn-delete {
background: #dc3545;
color: white;
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-delete:hover {
background: #c82333;
transform: translateY(-1px);
}
.dashboard-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #ddd;
}
.tab-btn {
padding: 15px 25px;
border: none;
background: rgba(255,255,255,0.1);
cursor: pointer;
font-size: 16px;
border-radius: 10px 10px 0 0;
transition: all 0.3s ease;
position: relative;
font-weight: 600;
color: #666;
}
.tab-btn:hover {
background: rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
color: #667eea;
}
.tab-btn.active {
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.tab-btn.active::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #667eea;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.data-table {
overflow-x: auto;
}
.data-table table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
border: 2px solid #e2e8f0;
}
.data-table tbody tr {
transition: all 0.3s ease;
background: #ffffff;
}
.data-table tbody tr:nth-child(even) {
background: #f8f9fa;
}
.data-table tbody tr:hover {
background: #e6f3ff;
transform: scale(1.01);
}
.data-table th, .data-table td {
padding: 12px;
text-align: left;
border: 1px solid #dee2e6;
}
.data-table th {
background: #f8f9fa;
font-weight: bold;
color: #495057;
border-bottom: 2px solid #dee2e6;
}
.no-data {
text-align: center;
color: #666;
font-style: italic;
}
.pengungkapan-form {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
max-width: none;
width: 100%;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-row .form-group {
margin-bottom: 0;
}
.form-full {
grid-column: 1 / -1;
}
.pelaku-item {
display: flex;
gap: 10px;
margin-bottom: 10px;
align-items: center;
}
.pelaku-item input, .pelaku-item select {
flex: 1;
}
.btn-add, .btn-remove {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn-add {
background: #28a745;
color: white;
margin-top: 10px;
}
.btn-remove {
background: #dc3545;
color: white;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
margin-top: 10px;
}
.checkbox-group label {
display: flex;
align-items: center;
gap: 8px;
font-weight: normal;
}
/* Barang Bukti Styling */
.bb-container {
background: linear-gradient(145deg, #f8f9fa, #ffffff);
border: 2px solid #e1e5e9;
border-radius: 15px;
padding: 20px;
margin-top: 10px;
}
.bb-main-label {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
display: block;
}
.bb-header {
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
padding: 12px 20px;
border-radius: 10px;
margin-bottom: 20px;
text-align: center;
}
.bb-instruction {
margin: 0;
font-size: 14px;
font-weight: 500;
}
.bb-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.bb-card {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border: 2px solid #e1e5e9;
border-radius: 12px;
padding: 15px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.bb-card:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
.bb-card.active {
border-color: #28a745 !important;
background: linear-gradient(145deg, #f8fff9, #ffffff);
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
}
.bb-checkbox {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.bb-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #667eea;
cursor: pointer;
}
.bb-label {
font-weight: 600;
color: #2c3e50;
cursor: pointer;
font-size: 15px;
user-select: none;
}
.bb-inputs {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e1e5e9;
}
.bb-input-row {
display: flex;
gap: 10px;
align-items: center;
}
.bb-input-row input[type="number"] {
flex: 1;
padding: 10px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 14px;
background: white;
transition: all 0.3s ease;
}
.bb-input-row input[type="number"]:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.bb-input-row select {
flex: 1;
padding: 10px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 14px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
.bb-input-row select:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.bb-summary {
background: linear-gradient(145deg, #e8f5e8, #f0fff0);
border: 2px solid #28a745;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
}
.bb-summary h4 {
color: #155724;
margin-bottom: 15px;
font-size: 16px;
font-weight: 600;
}
.bb-summary-item {
padding: 8px 0;
color: #155724;
font-weight: 500;
border-bottom: 1px solid rgba(21, 87, 36, 0.1);
}
.bb-summary-item:last-child {
border-bottom: none;
}
.bb-summary-item.incomplete {
color: #856404;
}
.bb-summary-item .warning {
color: #dc3545;
font-weight: 600;
font-style: italic;
}
.profil-content {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.profil-info h3 {
margin-bottom: 20px;
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.info-item label {
font-weight: bold;
color: #555;
font-size: 14px;
}
.info-item span {
padding: 10px;
background: #f8f9fa;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.rekap-controls {
margin-bottom: 20px;
}
.rekap-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.rekap-btn {
padding: 10px 20px;
border: 2px solid #007bff;
background: white;
color: #007bff;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
.rekap-btn.active {
background: #007bff;
color: white;
}
.rekap-content {
display: none;
}
.rekap-content.active {
display: block;
}
.filter-section {
background: #f8f9fa;
padding: 15px; /* Reduced from 20px to 15px */
border-radius: 8px;
margin-bottom: 15px; /* Reduced from 20px to 15px */
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.filter-section label {
font-weight: bold;
color: #333;
}
.filter-section input, .filter-section select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.rekap-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.summary-item {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
text-align: center;
border-left: 5px solid #667eea;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.summary-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.summary-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
}
.summary-item:hover::before {
transform: translateX(100%);
}
.summary-item h4 {
margin: 0 0 10px 0;
color: #666;
font-size: 14px;
}
.summary-number {
font-size: 24px;
font-weight: bold;
color: #007bff;
}
.chart-section {
background: white;
padding: 15px; /* Reduced from 20px */
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-top: 15px; /* Added reduced margin */
}
.chart-section h4 {
margin-bottom: 15px; /* Reduced from 20px */
color: #333;
}
.simple-chart {
display: flex;
align-items: end;
gap: 10px;
height: 200px;
padding: 20px 0;
}
.chart-bar {
background: linear-gradient(to top, #007bff, #17a2b8);
color: white;
padding: 10px 5px;
border-radius: 4px 4px 0 0;
text-align: center;
font-size: 12px;
font-weight: bold;
min-width: 50px;
display: flex;
flex-direction: column;
justify-content: end;
}
.export-section {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.btn-export {
background: linear-gradient(145deg, #28a745, #20c997);
color: white;
padding: 15px 30px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}
.btn-export:hover {
background: linear-gradient(145deg, #20c997, #28a745);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.6);
animation: pulse 0.6s ease-in-out;
}
.btn-export:before {
content: '📄';
font-size: 18px;
}
.btn-share {
background: linear-gradient(145deg, #25d366, #128c7e);
color: white;
padding: 15px 30px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
margin-left: 15px;
}
.btn-share:hover {
background: linear-gradient(145deg, #128c7e, #25d366);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
animation: pulse 0.6s ease-in-out;
}
.btn-share:before {
content: '📱';
font-size: 18px;
}
#tkpContainer input, #waktuContainer input, #fotoContainer input {
margin-bottom: 10px;
}
textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
font-family: Arial, sans-serif;
resize: vertical;
}
textarea:focus {
border-color: #007bff;
outline: none;
}
.admin-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #ddd;
}
.admin-tab-content {
display: none;
}
.admin-tab-content.active {
display: block;
}
.pengungkapan-list {
margin-top: 20px;
}
.pengungkapan-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.pengungkapan-info p {
margin: 5px 0;
}
.btn-detail {
background: #17a2b8;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.register-link, .register-section {
text-align: center;
margin-top: 20px;
}
.register-link a, .register-section a {
color: #007bff;
text-decoration: none;
font-weight: bold;
}
.register-link a:hover, .register-section a:hover {
text-decoration: underline;
}
.register-section {
background: rgba(255,255,255,0.15);
padding: 15px;
border-radius: 12px;
margin-bottom: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
}
.register-section:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
.register-section p {
color: white;
margin: 0;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.dashboard-content {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.07);
width: 100%;
position: relative;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
animation: slideIn 0.6s ease-out;
}
.user-list {
margin-top: 20px;
}
.user-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.user-info p {
margin: 5px 0;
}
.action-buttons {
display: flex;
gap: 10px;
}
.btn-approve {
background: #28a745;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-reject {
background: #dc3545;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.no-data {
text-align: center;
padding: 40px;
color: #666;
}
/* Mobile-First Responsive Design */
@media (max-width: 768px) {
/* Base Mobile Layout */
body {
font-size: 14px;
line-height: 1.4;
}
.container {
padding: 5px;
margin: 0;
}
.container.full-width {
padding: 5px;
}
/* Header Mobile Optimization */
header {
padding: 15px;
margin-bottom: 15px;
border-radius: 15px;
}
header h1 {
font-size: 18px;
margin-bottom: 5px;
}
header h2 {
font-size: 14px;
margin-bottom: 3px;
}
header h3 {
font-size: 12px;
}
.logo {
width: 80px;
height: 80px;
margin-bottom: 15px;
border-radius: 50%;
box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 0 3px rgba(255,255,255,0.8);
padding: 6px;
border: 2px solid rgba(102, 126, 234, 0.2);
animation: logoFloat 3s ease-in-out infinite;
}
.logo:hover {
transform: scale(1.03);
box-shadow: 0 8px 25px rgba(0,0,0,0.2), 0 0 0 4px rgba(102, 126, 234, 0.3);
}
.admin-header .logo {
width: 40px !important;
height: 40px !important;
margin-bottom: 5px;
padding: 3px;
}
.admin-header .logo:hover {
transform: scale(1.03);
}
/* Mobile Navigation */
.login-buttons {
flex-direction: column;
align-items: center;
gap: 15px;
}
.btn {
width: 100%;
max-width: 280px;
padding: 12px 20px;
font-size: 16px;
margin-bottom: 10px;
}
/* Form Mobile Optimization */
.form-buttons {
flex-direction: column;
gap: 10px;
}
.form-buttons .btn {
width: 100%;
margin-bottom: 8px;
}
.registration-form, .login-form {
padding: 20px;
margin: 10px 5px;
border-radius: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-group input, .form-group select, .form-group textarea {
padding: 12px;
font-size: 16px; /* Prevents zoom on iOS */
border-radius: 8px;
}
.form-row {
grid-template-columns: 1fr;
gap: 15px;
}
/* Profile Card Mobile */
.user-profile-corner, .admin-profile-corner {
position: static;
margin-bottom: 15px;
width: 100%;
}
.profile-card {
width: 100%;
min-width: auto;
padding: 12px;
margin-bottom: 10px;
}
.profile-header {
gap: 8px;
margin-bottom: 8px;
}
.profile-avatar {
width: 35px;
height: 35px;
font-size: 16px;
}
.profile-name span {
font-size: 13px;
}
.profile-name small {
font-size: 10px;
}
.profile-actions {
flex-direction: row;
gap: 5px;
}
.btn-profile-action {
padding: 6px 10px;
font-size: 11px;
flex: 1;
}
/* Contact Button Mobile */
.contact-corner {
position: static;
margin-bottom: 10px;
text-align: center;
width: 100%;
}
.contact-btn {
padding: 10px 15px;
font-size: 13px;
border-radius: 20px;
width: auto;
display: inline-flex;
}
/* Admin Dashboard Mobile */
.admin-header {
padding: 15px;
border-radius: 15px;
margin-bottom: 10px;
}
/* Admin Management Mobile */
.admin-management {
gap: 20px;
}
.admin-add-section, .admin-list-section {
padding: 15px;
border-radius: 12px;
}
.admin-add-section h4, .admin-list-section h4 {
font-size: 16px;
margin-bottom: 15px;
}
.admin-form {
max-width: 100%;
}
.admin-table table {
min-width: 600px;
font-size: 12px;
}
.admin-table th, .admin-table td {
padding: 8px 4px;
}
.header-content {
flex-direction: column;
gap: 15px;
text-align: center;
}
.header-left h1 {
font-size: 20px;
margin-bottom: 3px;
}
.header-left h2 {
font-size: 13px;
}
.admin-stats {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.stat-item {
padding: 10px 15px;
min-width: 60px;
border-radius: 8px;
}
.stat-number {
font-size: 18px;
margin-bottom: 2px;
}
.stat-label {
font-size: 10px;
}
/* Tab Navigation Mobile */
.dashboard-tabs, .admin-tabs {
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 15px;
padding: 0;
}
.tab-btn {
flex: 1;
min-width: 120px;
padding: 10px 8px;
font-size: 12px;
border-radius: 8px;
margin-bottom: 5px;
}
.tab-btn.active {
transform: translateY(-1px);
}
/* Content Areas Mobile */
.admin-full-content {
padding: 10px;
margin: 0;
}
.admin-tab-content {
padding: 15px;
border-radius: 15px;
margin-bottom: 10px;
}
.dashboard-content {
padding: 15px;
border-radius: 15px;
margin: 5px;
}
/* Tables Mobile */
.data-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table table {
min-width: 600px;
font-size: 12px;
}
.data-table th, .data-table td {
padding: 8px 4px;
white-space: nowrap;
}
.users-table table {
min-width: 700px;
font-size: 12px;
}
.users-table th, .users-table td {
padding: 8px 4px;
}
/* Cards Mobile */
.user-card, .pengungkapan-card {
flex-direction: column;
gap: 10px;
padding: 15px;
margin-bottom: 10px;
border-radius: 12px;
}
.pengungkapan-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.header-right {
width: 100%;
justify-content: space-between;
flex-direction: row;
}
.pengungkapan-info p {
margin: 6px 0;
font-size: 13px;
line-height: 1.3;
}
/* Action Buttons Mobile */
.action-buttons {
flex-wrap: wrap;
gap: 5px;
justify-content: center;
}
.btn-action, .btn-approve, .btn-reject, .btn-info, .btn-edit, .btn-delete {
padding: 6px 10px;
font-size: 11px;
border-radius: 5px;
min-width: 60px;
flex: 1;
margin: 2px;
}
/* Form Elements Mobile */
.pelaku-item {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 8px;
}
.pelaku-item input, .pelaku-item select {
width: 100%;
margin-bottom: 5px;
}
.btn-add, .btn-remove {
padding: 8px 12px;
font-size: 12px;
border-radius: 6px;
margin-top: 5px;
}
/* Barang Bukti Mobile */
.bb-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.bb-card {
padding: 12px;
}
.bb-container {
padding: 15px;
}
.bb-header {
padding: 10px 15px;
margin-bottom: 15px;
}
.bb-instruction {
font-size: 13px;
}
.bb-input-row {
flex-direction: column;
gap: 8px;
}
.bb-input-row input[type="number"],
.bb-input-row select {
width: 100%;
padding: 8px;
}
.bb-summary {
padding: 15px;
}
.bb-summary h4 {
font-size: 14px;
}
.bb-summary-item {
font-size: 13px;
padding: 6px 0;
}
/* Checkbox Groups Mobile */
.checkbox-group {
grid-template-columns: 1fr;
gap: 8px;
}
.checkbox-group label {
font-size: 13px;
padding: 8px;
background: #f8f9fa;
border-radius: 6px;
}
/* Rekap Mobile */
.rekap-tabs {
flex-direction: column;
gap: 5px;
}
.rekap-btn {
width: 100%;
padding: 10px;
font-size: 13px;
border-radius: 8px;
}
.filter-section {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 15px;
}
.filter-section input, .filter-section select {
width: 100%;
margin-bottom: 8px;
}
.rekap-summary {
grid-template-columns: 1fr;
gap: 10px;
}
.summary-item {
padding: 15px;
text-align: center;
}
.summary-item h4 {
font-size: 12px;
margin-bottom: 5px;
}
.summary-number {
font-size: 20px;
}
/* Chart Mobile */
.simple-chart {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 10px;
height: 150px;
}
.chart-bar {
min-width: 30px;
font-size: 10px;
padding: 5px 2px;
}
/* Satuan Table Mobile */
.satuan-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
}
.satuan-table {
font-size: 9px;
min-width: 800px;
}
.satuan-table th,
.satuan-table td {
padding: 4px 2px;
font-size: 8px;
}
.satuan-table td:nth-child(2) {
min-width: 120px;
font-size: 9px;
}
.satuan-table td:nth-child(3) {
width: 30px;
min-width: 30px;
font-size: 10px;
font-weight: bold;
}
/* Notifications Mobile */
.notification-area {
position: fixed;
top: 10px;
left: 5px;
right: 5px;
max-width: none;
z-index: 2000;
}
.broadcast-notification {
margin-bottom: 8px;
padding: 12px;
border-radius: 10px;
font-size: 13px;
}
.notification-header h4 {
font-size: 13px;
}
.broadcast-notification p {
font-size: 12px;
line-height: 1.3;
}
.broadcast-notification small {
font-size: 10px;
}
/* Modal Mobile */
.modal-content {
width: 95%;
max-width: 95%;
max-height: 90vh;
padding: 20px;
margin: 5px;
border-radius: 15px;
overflow-y: auto;
}
.modal-content h3 {
font-size: 16px;
margin-bottom: 15px;
text-align: center;
}
/* Export Buttons Mobile */
.export-section {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
padding: 15px;
}
.btn-export, .btn-share {
width: 100%;
max-width: 250px;
padding: 12px 20px;
font-size: 14px;
margin: 0;
border-radius: 10px;
}
/* Search Mobile */
.search-section {
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}
.search-section input {
width: 100%;
padding: 10px;
font-size: 14px;
border-radius: 8px;
}
/* Info Grid Mobile */
.info-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.info-item {
background: #f8f9fa;
padding: 10px;
border-radius: 8px;
}
.info-item label {
font-size: 12px;
font-weight: 600;
}
.info-item span {
padding: 8px;
font-size: 14px;
border-radius: 4px;
}
/* Footer Mobile */
footer {
padding: 15px 10px;
margin-top: 20px;
font-size: 12px;
text-align: center;
}
footer small {
font-size: 10px;
line-height: 1.4;
}
/* Broadcast Form Mobile */
.broadcast-form {
padding: 15px;
border-radius: 12px;
margin-bottom: 15px;
}
.broadcast-history {
padding: 15px;
border-radius: 12px;
}
.broadcast-item {
flex-direction: column;
gap: 10px;
padding: 12px;
border-radius: 8px;
}
.broadcast-info h5 {
font-size: 14px;
margin-bottom: 5px;
}
.broadcast-info p {
font-size: 12px;
line-height: 1.3;
}
/* User Management Mobile */
.user-management {
padding: 15px;
border-radius: 12px;
}
/* Pengungkapan Form Mobile */
.pengungkapan-form {
padding: 15px;
border-radius: 12px;
}
/* TKP and Waktu Containers Mobile */
#tkpContainer input, #waktuContainer input, #fotoContainer input {
margin-bottom: 8px;
width: 100%;
padding: 10px;
border-radius: 6px;
}
/* Textarea Mobile */
textarea {
padding: 10px;
font-size: 14px;
border-radius: 8px;
min-height: 100px;
}
/* Status Badges Mobile */
.status {
padding: 3px 8px;
font-size: 10px;
border-radius: 10px;
}
/* Date Display Mobile */
.date {
font-size: 11px;
}
/* Loading States Mobile */
.no-data {
padding: 20px;
font-size: 13px;
text-align: center;
color: #666;
}
/* Utility Classes for Mobile */
.mobile-hidden {
display: none !important;
}
.mobile-full-width {
width: 100% !important;
}
.mobile-center {
text-align: center !important;
}
/* Touch Improvements */
.btn, .tab-btn, .btn-action, .contact-btn {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Prevent zoom on input focus (iOS) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
font-size: 16px !important;
}
}
/* Rekap Data Styling */
.rekap-detail {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
border-left: 4px solid #007bff;
}
.detail-item {
background: white;
padding: 10px;
margin: 8px 0;
border-radius: 6px;
border: 1px solid #e9ecef;
}
.detail-item strong {
color: #495057;
}
.detail-item small {
color: #6c757d;
}
.chart-section {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
text-align: center;
}
.simple-chart {
display: flex;
align-items: flex-end;
justify-content: center;
height: 120px;
background: white;
padding: 10px;
border-radius: 6px;
margin-top: 10px;
}
.chart-bar {
transition: all 0.3s ease;
cursor: pointer;
}
.chart-bar:hover {
opacity: 0.8;
transform: translateY(-2px);
}
/* Tabel Rekap Satuan */
.satuan-table-container {
overflow-x: auto;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.satuan-table {
width: 100%;
border-collapse: collapse;
background: white;
font-size: 12px;
}
.satuan-table th {
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
padding: 10px 8px;
text-align: center;
font-weight: 600;
border: 1px solid #5a67d8;
}
.satuan-table td {
padding: 8px;
text-align: center;
border: 1px solid #e2e8f0;
background: white;
color: #000000;
font-weight: bold;
}
.satuan-table tbody tr:nth-child(even) {
background: #f7fafc;
}
.satuan-table tbody tr:hover {
background: #e6fffa;
transform: scale(1.01);
transition: all 0.2s ease;
}
.satuan-table .no-data-row {
background: white !important;
}
.satuan-table .no-data-row:hover {
background: #f8f9fa !important;
}
.satuan-table .no-data-row td {
color: #dc2626 !important;
font-weight: bold !important;
}
.satuan-table .total-row {
background: linear-gradient(145deg, #007bff, #0056b3) !important;
color: white;
font-weight: bold;
border-top: 3px solid #667eea;
}
.satuan-table .total-row:hover {
background: linear-gradient(145deg, #0056b3, #007bff) !important;
transform: none;
}
.satuan-table .total-row td {
border-color: #0056b3;
font-size: 13px;
}
.satuan-table .header-row {
background: linear-gradient(145deg, #007bff, #0056b3) !important;
color: white;
font-weight: bold;
}
.satuan-table .header-row:hover {
background: linear-gradient(145deg, #0056b3, #007bff) !important;
transform: none;
}
.satuan-table .subheader-row {
background: linear-gradient(145deg, #e2e8f0, #cbd5e0) !important;
color: #2d3748;
font-weight: 600;
}
.satuan-table .subheader-row:hover {
background: linear-gradient(145deg, #cbd5e0, #e2e8f0) !important;
transform: none;
}
/* Admin Management */
.admin-management {
display: flex;
flex-direction: column;
gap: 30px;
}
.admin-add-section {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
border-left: 5px solid #667eea;
}
.admin-add-section h4 {
color: #333;
margin-bottom: 20px;
font-size: 18px;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
.admin-form {
max-width: 600px;
}
.admin-list-section {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.admin-list-section h4 {
color: #333;
margin-bottom: 20px;
font-size: 18px;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
.admin-table table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
min-width: 700px;
border: 2px solid #e2e8f0;
}
.admin-table th, .admin-table td {
padding: 12px;
text-align: left;
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
font-size: 14px;
}
.admin-table th:last-child, .admin-table td:last-child {
border-right: none;
}
.admin-table th {
background: #f8f9fa;
font-weight: 600;
color: #333;
border-bottom: 2px solid #dee2e6;
}
.admin-table tbody tr {
background: #ffffff;
}
.admin-table tbody tr:nth-child(even) {
background: #f8f9fa;
}
.admin-table tbody tr:hover {
background: #e6f3ff;
}
/* Pengungkapan Cards */
.pengungkapan-controls {
margin-bottom: 20px;
}
.pengungkapan-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.pengungkapan-card {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-left: 4px solid #667eea;
transition: all 0.3s ease;
}
.pengungkapan-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}
.pengungkapan-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
}
.pengungkapan-header h4 {
margin: 0;
color: #2d3748;
font-size: 18px;
}
.header-right {
display: flex;
align-items: center;
gap: 10px;
}
.pengungkapan-info p {
margin: 8px 0;
color: #4a5568;
font-size: 14px;
}
.pengungkapan-info strong {
color: #2d3748;
}
.action-buttons {
display: flex;
gap: 8px;
margin-top: 15px;
flex-wrap: wrap;
}
.btn-info {
background: #17a2b8;
color: white;
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: all 0.3s ease;
}
.btn-info:hover {
background: #138496;
transform: translateY(-1px);
}
.btn-edit {
background: #ffc107;
color: #212529;
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-edit:hover {
background: #e0a800;
transform: translateY(-1px);
}
.status {
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.status.pending {
background: #fff3cd;
color: #856404;
}
.status.approved {
background: #d4edda;
color: #155724;
}
.status.rejected {
background: #f8d7da;
color: #721c24;
}
.date {
font-size: 12px;
color: #6c757d;
font-weight: 500;
}
@media (max-width: 768px) {
.pengungkapan-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.header-right {
width: 100%;
justify-content: space-between;
}
.action-buttons {
justify-content: center;
}
.export-section {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.btn-share {
margin-left: 0;
width: 100%;
max-width: 250px;
}
}
.satuan-table td:first-child {
font-weight: 600;
background: #f8f9fa;
}
.satuan-table td:nth-child(2) {
text-align: left;
font-weight: 500;
min-width: 180px;
}
.satuan-table td:nth-child(3) {
color: #000000 !important;
font-weight: 700;
width: 60px;
min-width: 60px;
max-width: 60px;
}
.satuan-table td:nth-child(4),
.satuan-table td:nth-child(5) {
width: 40px;
min-width: 40px;
max-width: 40px;
font-size: 11px;
}
.satuan-table th:nth-child(3) {
width: 60px;
min-width: 60px;
}
.satuan-table th:nth-child(4),
.satuan-table th:nth-child(5) {
width: 40px;
min-width: 40px;
}
.satuan-table th:nth-child(6),
.satuan-table th:nth-child(7),
.satuan-table th:nth-child(8),
.satuan-table th:nth-child(9),
.satuan-table th:nth-child(10),
.satuan-table th:nth-child(11),
.satuan-table th:nth-child(12) {
width: 80px;
min-width: 80px;
font-size: 10px;
}
.satuan-table td:nth-child(6),
.satuan-table td:nth-child(7),
.satuan-table td:nth-child(8),
.satuan-table td:nth-child(9),
.satuan-table td:nth-child(10),
.satuan-table td:nth-child(11),
.satuan-table td:nth-child(12) {
width: 80px;
min-width: 80px;
font-size: 10px;
word-wrap: break-word;
overflow-wrap: break-word;
}
@media (max-width: 768px) {
.satuan-table {
font-size: 9px;
}
.satuan-table th,
.satuan-table td {
padding: 4px 2px;
}
.satuan-table td:nth-child(3) {
width: 35px;
min-width: 35px;
}
.satuan-table td:nth-child(4),
.satuan-table td:nth-child(5) {
width: 25px;
min-width: 25px;
}
.satuan-table th:nth-child(6),
.satuan-table th:nth-child(7),
.satuan-table th:nth-child(8),
.satuan-table th:nth-child(9),
.satuan-table th:nth-child(10),
.satuan-table th:nth-child(11),
.satuan-table th:nth-child(12),
.satuan-table td:nth-child(6),
.satuan-table td:nth-child(7),
.satuan-table td:nth-child(8),
.satuan-table td:nth-child(9),
.satuan-table td:nth-child(10),
.satuan-table td:nth-child(11),
.satuan-table td:nth-child(12) {
width: 50px;
min-width: 50px;
font-size: 8px;
}
/* Mobile table wrapper optimization */
.mobile-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 8px 0; /* Reduced from 10px to 8px */
}
.satuan-table.mobile-optimized {
min-width: 630px;
width: 100%;
border-collapse: collapse;
background: white;
}
.satuan-table.mobile-optimized th {
position: sticky;
top: 0;
z-index: 10;
background: linear-gradient(145deg, #667eea, #764ba2);
color: white;
font-weight: 600;
padding: 8px 4px;
text-align: center;
border: 1px solid #5a67d8;
font-size: 10px;
}
.satuan-table.mobile-optimized td {
padding: 6px 4px;
text-align: center;
border: 1px solid #e2e8f0;
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Satgas Table Enhanced Styling */
.satgas-table {
border: 2px solid #333 !important;
border-collapse: collapse !important;
}
.satgas-table th {
border: 1px solid #333 !important;
background: linear-gradient(145deg, #667eea, #764ba2) !important;
color: white !important;
font-weight: bold !important;
text-align: center !important;
vertical-align: middle !important;
padding: 8px 6px !important;
}
.satgas-table td {
border: 1px solid #333 !important;
padding: 6px 4px !important;
vertical-align: middle !important;
}
/* Styling khusus untuk kolom satuan */
.satgas-table .satuan-cell {
text-align: center !important;
vertical-align: middle !important;
font-weight: bold !important;
background-color: #f8f9fa !important;
border: 1px solid #333 !important;
}
/* Kolom nomor dan satuan */
.satgas-table td:nth-child(1) {
text-align: center !important;
vertical-align: middle !important;
font-weight: bold !important;
width: 40px;
min-width: 40px;
}
.satgas-table td:nth-child(2) {
text-align: center !important;
vertical-align: middle !important;
font-weight: bold !important;
min-width: 150px;
background-color: #f8f9fa !important;
}
/* Styling khusus untuk kolom satuan */
.satgas-table .satuan-cell {
text-align: center !important;
vertical-align: middle !important;
font-weight: bold !important;
background-color: #f8f9fa !important;
border: 1px solid #333 !important;
}
/* Kolom nomor dan satuan */
.satgas-table td:nth-child(1) {
text-align: center !important;
vertical-align: middle !important;
font-weight: bold !important;
width: 40px;
min-width: 40px;
}
.satgas-table td:nth-child(2) {
text-align: center !important;
vertical-align: middle !important;
font-weight: bold !important;
min-width: 150px;
background-color: #f8f9fa !important;
}
/* Header dan subheader styling */
.satgas-table .header-row td {
background-color: #e3f2fd !important;
font-weight: bold !important;
border: 1px solid #333 !important;
text-align: center !important;
}
.satgas-table .subheader-row td {
background-color: #f3e5f5 !important;
font-weight: bold !important;
border: 1px solid #333 !important;
text-align: center !important;
}
.satgas-table .no-data-row td {
background-color: #fff3e0 !important;
color: #e65100 !important;
font-style: italic !important;
border: 1px solid #333 !important;
}
.satgas-table .has-data-row td {
background-color: white !important;
border: 1px solid #333 !important;
}
/* Mobile responsive untuk tabel satgas */
@media (max-width: 768px) {
.satgas-table {
font-size: 9px !important;
min-width: 800px;
}
.satgas-table th,
.satgas-table td {
padding: 4px 2px !important;
font-size: 8px !important;
}
.satgas-table .satuan-cell {
font-size: 9px !important;
}
}
font-size: 14px;
opacity: 0.8;
margin-top: 10px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Particle Effect Animation */
@keyframes particles {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
.particle {
position: fixed;
width: 4px;
height: 4px;
background: rgba(255,255,255,0.6);
border-radius: 50%;
pointer-events: none;
animation: particles 15s linear infinite;
z-index: -1;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; }
.particle:nth-child(6) { left: 60%; animation-delay: 10s; }
.particle:nth-child(7) { left: 70%; animation-delay: 12s; }
.particle:nth-child(8) { left: 80%; animation-delay: 14s; }
.particle:nth-child(9) { left: 90%; animation-delay: 16s; }
/* Loading Animation */
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Notification Styles */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
border-radius: 12px;
color: white;
font-weight: 600;
z-index: 1000;
animation: slideInRight 0.5s ease-out;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.notification.success {
background: linear-gradient(145deg, rgba(40, 167, 69, 0.9), rgba(32, 201, 151, 0.9));
}
.notification.error {
background: linear-gradient(145deg, rgba(220, 53, 69, 0.9), rgba(231, 76, 60, 0.9));
}
.notification.info {
background: linear-gradient(145deg, rgba(0, 123, 255, 0.9), rgba(102, 126, 234, 0.9));
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
.container {
padding: 15px;
}
header {
padding: 25px 20px;
margin-bottom: 20px;
}
.logo {
width: 100px;
height: 100px;
}
header h1 {
font-size: 22px;
}
header h2 {
font-size: 16px;
}
.login-buttons {
gap: 20px;
flex-direction: column;
align-items: center;
}
.btn {
min-width: 200px;
padding: 16px 30px;
font-size: 14px;
}
.registration-form, .login-form {
padding: 30px 20px;
margin: 0 10px;
}
.form-buttons {
flex-direction: column;
gap: 15px;
}
.form-buttons .btn {
width: 100%;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 20px;
}
header h2 {
font-size: 14px;
}
.btn {
min-width: 180px;
padding: 14px 25px;
font-size: 13px;
letter-spacing: 0.8px;
}
.registration-form, .login-form {
padding: 25px 15px;
}
.form-group input, .form-group select {
padding: 14px 16px;
font-size: 15px;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.form-group input, .form-group select {
background: rgba(255,255,255,0.95);
color: #333;
}
.form-group input:focus, .form-group select:focus {
background: white;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.btn {
border: 2px solid currentColor;
}
.form-group input, .form-group select {
border-width: 3px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
body::before,
body::after {
animation: none;
}
}
/* Print Styles */
@media print {
body {
background: white !important;
}
body::before,
body::after {
display: none !important;
}
.btn {
background: #333 !important;
color: white !important;
box-shadow: none !important;
}
}
/* Enhanced Registrasi Management Styles */
.registrasi-management {
padding: 20px;
background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,249,250,0.9));
border-radius: 15px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.section-description {
color: #6c757d;
font-size: 14px;
margin-bottom: 20px;
font-style: italic;
}
.registrasi-controls {
display: flex;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.registrasi-list {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.user-card {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.user-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
}
.user-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.user-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.user-header h5 {
margin: 0;
color: #1e3c72;
font-size: 16px;
font-weight: 600;
}
.status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.pending {
background: linear-gradient(145deg, #ffc107, #fd7e14);
color: white;
animation: pulse 2s infinite;
}
.user-details p {
margin: 8px 0;
font-size: 14px;
color: #495057;
}
.user-details strong {
color: #1e3c72;
font-weight: 600;
}
.action-buttons {
display: flex;
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(0,0,0,0.1);
}
.btn-approve {
background: linear-gradient(145deg, #28a745, #20c997);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
}
.btn-approve:hover {
background: linear-gradient(145deg, #20c997, #28a745);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}
.btn-reject {
background: linear-gradient(145deg, #dc3545, #e74c3c);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
}
.btn-reject:hover {
background: linear-gradient(145deg, #e74c3c, #dc3545);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}
.btn-success {
background: linear-gradient(145deg, #28a745, #20c997);
color: white;
border: none;
padding: 12px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-success:hover {
background: linear-gradient(145deg, #20c997, #28a745);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}
.no-data-icon {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.6;
}
.no-data h4 {
color: #1e3c72;
margin-bottom: 10px;
font-size: 18px;
}
.no-data p {
color: #6c757d;
font-size: 14px;
line-height: 1.5;
}
/* Mobile Responsiveness for Registrasi */
@media (max-width: 768px) {
.registrasi-list {
grid-template-columns: 1fr;
}
.registrasi-controls {
flex-direction: column;
}
.user-card {
padding: 15px;
}
.action-buttons {
flex-direction: column;
}
.btn-approve,
.btn-reject {
padding: 10px 16px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.registrasi-management {
padding: 15px;
}
.user-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.status-badge {
align-self: flex-end;
}
}