/* core.css - Reset and base variables */
:root {
  --primary: #3D52A0;
  --secondary: #e74c3c;
  --light: #ecf0f1;
  --dark: #2c3e50;
  --spacing-unit: 8px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: var(--dark);
  
}

        body, html { margin: 0; padding: 0; height: 100%; }
        .bg-vid {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -100;
            overflow: hidden;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
                        overflow-x: hidden;

        }
        .content {
            position: relative;
            z-index: 1;
            height: 200vh; /* Buat bisa di-scroll */
            color: white;
            padding: 20px;
        }
         /* Mobile-specific styles */
        @media (max-width: 768px) {
            .bg-vid {
                position: fixed;
                z-index: -100;
            }
            
            .bg-vid video {
                /* Untuk mobile, pastikan video tidak terlalu besar */
                max-width: 100%;
                max-height: 100%;
            }
            
            .container {
                padding: 15px;
            }
            
            nav ul {
                flex-direction: column;
                align-items: center;
            }
            
            nav ul li {
                margin: 5px 0;
                width: 100%;
                text-align: center;
            }
            
            header, nav, .main-content, footer {
                /* Sedikit transparan untuk mobile */
                background: rgba(0, 0, 0, 0.85);
            }
            
            .main-content {
                background: rgba(255, 255, 255, 0.95);
                padding: 20px;
            }
        }

        /* Very small devices */
        @media (max-width: 480px) {
            header h1 {
                font-size: 1.5rem;
            }
            
            .main-content {
                padding: 15px;
            }
            
            .bg-vid video {
                /* Penyesuaian untuk device sangat kecil */
                min-width: 150%; /* Untuk memastikan coverage penuh */
                min-height: 150%;
            }
        }

        /* Orientation landscape untuk mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .bg-vid video {
                min-width: 150%;
                min-height: 150%;
                width: auto;
                height: auto;
            }
            
            .container {
                padding: 10px;
            }
            
            header, nav {
                padding: 10px;
                margin-bottom: 15px;
            }
        }
        
    
.ive-table{width:100%;border-collapse:collapse}
.ive-table th,.ive-table td{padding:.6rem .8rem;border-bottom:1px solid #eee;text-align:left}
.badge{display:inline-flex;align-items:center;gap:.35em;padding:.2em .5em;border-radius:999px;font-size:.85em}
.badge-warn{background:#fff7ed;color:#9a3412}
.badge-info{background:#eff6ff;color:#1d4ed8}
.badge-ok{background:#ecfdf5;color:#047857}
.badge-done{background:#f1f5f9;color:#0f172a}
.badge-bad{background:#fef2f2;color:#b91c1c}
.btn{display:inline-flex;align-items:center;gap:.4em;padding:.45em .7em;border-radius:10px;background:#f3f4f6;color:#111;text-decoration:none}
.btn:hover{background:#e8eaee}
.btn-sm{font-size:.9em;padding:.35em .6em}
.btn-pay{background:#0d6efd;color:#fff}
.btn-danger{background:#dc2626;color:#fff}
.pagination{display:flex;gap:.4rem;margin-top:.8rem}
.page-link{padding:.35em .6em;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#111}
.page-link.active{background:#0d6efd;color:#fff;border-color:#0d6efd}
.empty,.alert-ok{padding:.8rem 1rem;border-radius:12px;margin:.6rem 0}
.empty{background:#f8fafc;color:#334155}
.alert-ok{background:#ecfdf5;color:#065f46}
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:.6rem 0 1rem}
.card{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:1rem;box-shadow:0 2px 6px rgba(16,24,40,.04)}
.form-grid{display:grid;gap:.6rem;max-width:560px}