/* =========================================
   1. STYLE GLOBAL & RESET
   ========================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif; 
}
body { 
    display: flex; 
    min-height: 100vh; 
    overflow: hidden; 
    background-color: #f4f7fb; 
    background-image: radial-gradient(#dbe3eb 1px, transparent 1px); 
    background-size: 30px 30px;
}
body.bg-modern-dash { 
    display: block; 
    overflow-y: auto; 
}
.split-container { 
    display: flex; 
    width: 100%; 
    height: 100vh; 
}
.text-blue { color: #3b82f6 !important; }
.text-success { color: #16a34a !important; }
.dashed-divider { border: 0; border-top: 1px dashed #cbd5e1; margin: 20px 0; }
.link-no-decoration { text-decoration: none; }
.alert-spacing { margin-bottom: 25px; }

/* =========================================
   2. PANEL KIRI (ANIMASI 3D LOGIN & REGISTRASI)
   ========================================= */
.left-panel {
    flex: 1.3; 
    position: relative; 
    background: radial-gradient(circle at 50% 50%, #153257 0%, #0b1426 80%);
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 3rem; 
    text-align: center; 
    overflow: hidden; 
    box-shadow: 10px 0 25px rgba(0,0,0,0.3); 
    z-index: 10;
}
.left-panel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='69.282' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 17.32l-20 11.547L0 17.32V0h40v17.32zm0 34.641l-20 11.547-20-11.547V34.64h40v17.32z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"); 
    z-index: 1;
}
.light-line { position: absolute; width: 600px; height: 600px; border-radius: 50%; border: 1px solid rgba(255, 215, 0, 0.1); box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.05), 0 0 15px rgba(255, 255, 255, 0.05); z-index: 1; }
.line-1 { top: -200px; left: -200px; }
.line-2 { bottom: -300px; right: -100px; border-color: rgba(255,255,255,0.05); }

.icon-3d { position: absolute; z-index: 2; font-size: 4rem; background: linear-gradient(135deg, #fff, #a2b0c3); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.5)); animation: float 6s ease-in-out infinite; }
.icon-gold { background: linear-gradient(135deg, #ffe47a, #d4af37, #aa7c11); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0px 0px 20px rgba(255,215,0,0.4)) drop-shadow(0px 10px 10px rgba(0,0,0,0.5)); }
.icon-cap { top: 18%; left: 18%; font-size: 5.5rem; animation-delay: 0s; transform: rotate(-15deg); }
.icon-gear-1 { top: 22%; right: 20%; font-size: 6rem; animation-delay: 1s; }
.icon-gear-2 { top: 15%; right: 12%; font-size: 3rem; animation-delay: 1.5s; }
.icon-bulb { top: 40%; right: 10%; font-size: 4.5rem; animation-delay: 2s; transform: rotate(15deg); }
.icon-ribbon { bottom: 15%; left: 12%; font-size: 5rem; animation-delay: 0.5s; }
.icon-book-wrapper { position: absolute; bottom: 12%; right: 15%; z-index: 2; animation: float 5s ease-in-out infinite; }
.icon-book { font-size: 7rem; background: linear-gradient(to bottom, #fff, #8da0b6); -webkit-background-clip: text; color: transparent; }
.book-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 50px; background: rgba(255, 235, 160, 0.8); filter: blur(40px); z-index: -1; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }

.content-overlay { z-index: 5; max-width: 85%; display: flex; flex-direction: column; align-items: center; }
.text-gold-3d { font-size: 2.8rem; font-weight: 800; line-height: 1.3; margin-bottom: 2rem; text-transform: uppercase; background: linear-gradient(to bottom, #fff9d6 0%, #f7d059 40%, #d4af37 60%, #aa7c11 100%); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.8)) drop-shadow(0px 0px 15px rgba(255,215,0,0.3)); }
.glass-badge { padding: 12px 35px; font-size: 1.1rem; font-weight: 600; color: #e2e8f0; letter-spacing: 1px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 50px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }

/* =========================================
   3. PANEL KANAN (FORM LOGIN & REGISTRASI)
   ========================================= */
.right-panel { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 1.5rem; 
    position: relative; 
    height: 100vh; 
    overflow: hidden; 
    background-color: #f8fafc;
    background-image: 
        linear-gradient(rgba(11, 20, 38, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 20, 38, 0.03) 1px, transparent 1px),
        radial-gradient(at top left, rgba(59, 130, 246, 0.08) 0%, transparent 70%),
        radial-gradient(at bottom right, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    background-size: 35px 35px, 35px 35px, 100% 100%, 100% 100%;
    background-position: center center;
}

.login-box { 
    width: 100%; 
    max-width: 420px; 
    padding: 2rem 2.5rem; 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px; 
    box-shadow: 0 15px 35px rgba(11, 20, 38, 0.08), 0 5px 15px rgba(0,0,0,0.03); 
    border: 1px solid rgba(255, 255, 255, 0.8); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    max-height: 96vh; 
}

.logo-container-3d { text-align: center; margin-bottom: 0.8rem; perspective: 1000px; }
.logo-img-3d { width: 75px; height: auto; transform-style: preserve-3d; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.15)); }
.login-box h2 { font-size: 1.5rem; color: #1a202c; margin-bottom: 0.2rem; text-align: center; font-weight: 800; }
.login-box p.subtitle { color: #718096; margin-bottom: 1.2rem; text-align: center; font-size: 0.85rem; line-height: 1.4;}

.alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem; }
.alert-error { background-color: #fee2e2; color: #991b1b; border-left: 3px solid #ef4444; }
.alert-success { background-color: #d1fae5; color: #065f46; border-left: 3px solid #10b981; }

.input-group { position: relative; margin-bottom: 0.8rem; }
.input-group i.icon-left { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8392a5; font-size: 0.95rem;}
.form-control { 
    width: 100%; 
    padding: 12px 15px 12px 38px; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    font-size: 0.95rem; 
    background-color: rgba(244, 248, 252, 0.8); 
    color: #2d3748; 
    font-weight: 500; 
    transition: all 0.3s;
}
.form-control::placeholder { color: #a0aec0; font-weight: 400; }
.form-control:focus { border-color: #0b1426; background-color: #ffffff; outline: none; box-shadow: 0 0 0 3px rgba(11, 20, 38, 0.1); }

.toggle-password { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #a0aec0; font-size: 0.95rem;}
.toggle-password:hover { color: #0b1426; }

.btn-login { 
    width: 100%; 
    padding: 12px; 
    margin-top: 0.5rem; 
    background-color: #0b1426; 
    color: white; border: none; 
    border-radius: 8px; 
    font-size: 1rem; 
    font-weight: 700; 
    cursor: pointer; 
    transition: all 0.3s; 
    border-bottom: 3px solid #d4af37; 
}
.btn-login:hover { background-color: #153257; transform: translateY(-2px); border-bottom-color: #f7d059; }

.forgot-password { display: block; text-align: right; margin-top: 8px; margin-bottom: 15px; font-size: 0.85rem; font-weight: 700; color: #0b1426; text-decoration: none;}
.forgot-password:hover { color: #d4af37; text-decoration: underline; }
.register-link { text-align: center; margin-top: 0.5rem; font-size: 0.85rem; color: #718096; }
.register-link a { color: #0b1426; font-weight: 700; text-decoration: none;}
.register-link a:hover { color: #d4af37; }
.back-link { display: block; text-align: center; margin-top: 0.8rem; font-size: 0.85rem; font-weight: 700; color: #0b1426; text-decoration: none;}
.back-link i { margin-right: 5px; }
.back-link:hover { color: #d4af37; }

/* =========================================
   4. NAVBAR & WRAPPER UTAMA DASHBOARD
   ========================================= */
.navbar-modern { background-color: #ffffff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.02); position: sticky; top: 0; z-index: 100; }
.nav-container-wide { max-width: 1300px; margin: 0 auto; padding: 12px 30px; display: flex; justify-content: space-between; align-items: center; }
.nav-brand { display: flex; align-items: center; gap: 15px; } .nav-logo { width: 45px; height: auto; }
.brand-title { font-size: 1.25rem; font-weight: 800; color: #0b1426; display: block; } .brand-sub { font-size: 0.8rem; color: #718096; font-weight: 500; }
.nav-user-panel { display: flex; align-items: center; gap: 25px; } .user-info-modern { display: flex; flex-direction: column; text-align: right; }
.user-welcome { font-size: 0.8rem; color: #64748b; } .user-name-bold { font-size: 0.95rem; font-weight: 700; color: #0b1426; }
.btn-logout-modern { background-color: #fff1f2; color: #e11d48; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: 1px solid #fecdd3; transition: all 0.3s; }
.btn-logout-modern:hover { background-color: #e11d48; color: #ffffff; }

.dashboard-wrapper { max-width: 1300px; margin: 2rem auto; padding: 0 30px; }
.page-header { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.page-header h2 { color: #0b1426; font-size: 1.8rem; font-weight: 800; margin-bottom: 5px; } .page-header p { color: #64748b; font-size: 0.95rem; }
.btn-back { width: 50px; height: 50px; border-radius: 12px; background: #ffffff; border: 1px solid #e2e8f0; display: flex; justify-content: center; align-items: center; color: #0b1426; text-decoration: none; font-size: 1.3rem; transition: all 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.02); } 
.btn-back:hover { background: #0b1426; color: white; border-color: #0b1426; transform: translateX(-3px); }

/* =========================================
   5. DASHBOARD GRID & KARTU TUGAS
   ========================================= */
.welcome-banner-wide { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); border-radius: 20px; padding: 2.5rem 3.5rem; color: white; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 15px 35px rgba(15, 32, 39, 0.15); margin-bottom: 2.5rem; position: relative; overflow: hidden; }
.welcome-banner-wide::before { content: ''; position: absolute; top: -50%; left: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%); }
.banner-content { position: relative; z-index: 2; } .banner-content h1 { font-size: 2.2rem; margin-bottom: 10px; color: #f7d059; } .banner-content p { font-size: 1.05rem; color: #e2e8f0; line-height: 1.6; max-width: 700px; }
.banner-icon { font-size: 6rem; color: rgba(255,255,255,0.05); position: absolute; right: 5%; transform: rotate(-15deg); }

.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; }
.section-header { margin-bottom: 1.5rem; } .section-header h2 { font-size: 1.5rem; color: #0b1426; font-weight: 700; } .section-header p { color: #64748b; font-size: 0.95rem; }

.modern-task-card { display: flex; margin-bottom: 15px; }
.task-step-indicator { display: flex; flex-direction: column; align-items: center; margin-right: 25px; }
.step-num { width: 50px; height: 50px; border-radius: 50%; background-color: #e2e8f0; color: #64748b; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; font-weight: 700; z-index: 2; border: 4px solid #f4f7fb; }
.step-line-down { width: 3px; flex: 1; background-color: #e2e8f0; margin-top: -5px; margin-bottom: -20px; z-index: 1; }
.task-content-area { flex: 1; background: #ffffff; border-radius: 16px; padding: 25px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); margin-bottom: 15px; transition: all 0.3s; }
.task-header-modern { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.task-header-modern h3 { font-size: 1.25rem; color: #0b1426; font-weight: 700; margin-bottom: 8px; } .task-header-modern p { color: #64748b; font-size: 0.95rem; line-height: 1.5; }

.status-badge { padding: 6px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.status-badge.warning { background-color: #fef9c3; color: #a16207; } .status-badge.locked { background-color: #f1f5f9; color: #64748b; } .status-badge.success { background-color: #dcfce3; color: #166534; }
.modern-task-card.active .step-num { background-color: #d4af37; color: #ffffff; border-color: #fef9c3; box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }
.modern-task-card.active .task-content-area { border-color: #d4af37; box-shadow: 0 10px 30px rgba(11,20,38,0.06); }
.btn-do-task { display: inline-flex; align-items: center; gap: 10px; background-color: #0b1426; color: white; padding: 12px 25px; border-radius: 8px; text-decoration: none; font-weight: 600; margin-top: 20px; transition: all 0.3s; }
.btn-do-task:hover { background-color: #153257; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(11,20,38,0.2); }
.modern-task-card.locked .task-content-area { background-color: #f8fafc; opacity: 0.7; }

.side-panel { display: flex; flex-direction: column; gap: 20px; }
.widget-card { background: #ffffff; border-radius: 16px; padding: 25px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.widget-title { font-size: 1.1rem; color: #0b1426; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f1f5f9; }
.progress-container { margin-bottom: 15px; } .progress-text { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95rem; color: #475569; } .progress-text strong { color: #d4af37; font-size: 1.1rem; }
.progress-bar-bg { width: 100%; height: 10px; background-color: #e2e8f0; border-radius: 5px; overflow: hidden; } .progress-bar-fill { height: 100%; background-color: #d4af37; border-radius: 5px; }
.progress-list { list-style: none; padding: 0; } .progress-list li { font-size: 0.9rem; color: #64748b; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .progress-list li i { color: #cbd5e1; }
.info-row { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 12px; } .info-row span { color: #64748b; } .info-row strong { color: #1e293b; text-align: right; }
.help-widget { background: linear-gradient(to bottom right, #f0fdf4, #dcfce3); border-color: #bbf7d0; text-align: center; } .help-icon { font-size: 2.5rem; color: #16a34a; margin-bottom: 15px; } .help-widget h4 { color: #166534; font-size: 1.2rem; margin-bottom: 10px; } .help-widget p { font-size: 0.9rem; color: #15803d; margin-bottom: 20px; line-height: 1.5; }
.btn-whatsapp-modern { display: inline-block; background-color: #25D366; color: white; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 700; width: 100%; box-shadow: 0 4px 10px rgba(37,211,102,0.2); transition: transform 0.2s; } .btn-whatsapp-modern:hover { transform: translateY(-2px); }

/* =========================================
   6. LAYOUT FORM 2 KOLOM (BIODATA, RIWAYAT)
   ========================================= */
.upload-grid-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; padding-bottom: 50px; }
.upload-main-content { display: flex; flex-direction: column; gap: 15px; }

.form-section { background: #ffffff; border-radius: 16px; padding: 35px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); margin-bottom: 25px; }
.form-section-title { font-size: 1.2rem; color: #0b1426; font-weight: 700; margin-bottom: 25px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9; display: flex; align-items: center; gap: 12px; } .form-section-title i { color: #d4af37; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.form-group { display: flex; flex-direction: column; gap: 10px; } .form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-size: 0.95rem; font-weight: 600; color: #475569; } .required-star { color: #ef4444; }
.form-input { padding: 14px 18px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 0.95rem; color: #1e293b; background-color: #f8fafc; transition: all 0.3s; font-family: inherit; }
.form-input:focus { border-color: #0b1426; background-color: #ffffff; outline: none; box-shadow: 0 0 0 4px rgba(11,20,38,0.08); }
.form-input:disabled, .form-input[readonly] { background-color: #f1f5f9; color: #94a3b8; cursor: not-allowed; border-color: #e2e8f0; }

.table-responsive { overflow-x: auto; border-radius: 12px; border: 1px solid #e2e8f0; } .table-modern { width: 100%; border-collapse: collapse; background-color: #ffffff; }
.table-modern th { background-color: #f8fafc; color: #64748b; text-align: left; padding: 16px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #e2e8f0; }
.table-modern td { padding: 16px; border-bottom: 1px solid #f1f5f9; color: #475569; font-size: 0.95rem; vertical-align: middle; } .table-modern tr:hover td { background-color: #f8fafc; }
.badge-time { background-color: #f1f5f9; color: #475569; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; border: 1px solid #e2e8f0; }
.btn-delete, .btn-action-del { background-color: #fee2e2; color: #ef4444; border: 1px solid #fecaca; padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; transition: 0.2s; cursor:pointer;} .btn-delete:hover, .btn-action-del:hover { background: #fca5a5; color: white;}
.btn-action-view { background: white; color: #3b82f6; border: 1px solid #bfdbfe; padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; transition: 0.2s; text-decoration:none;} .btn-action-view:hover { background: #eff6ff; }
.btn-add-modern { background-color: #f1f5f9; color: #0b1426; border: 1px solid #cbd5e1; padding: 12px 25px; border-radius: 8px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; } .btn-add-modern:hover { background-color: #0b1426; color: #ffffff; border-color: #0b1426; }
.empty-state { text-align: center; padding: 50px 20px; background-color: #ffffff; border-radius: 12px; }

.step-action-card { background: linear-gradient(to right, #ffffff, #f8fafc); padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.action-text h4 { margin-bottom: 5px; color: #0b1426; font-size: 1.25rem; font-weight: 800; } .action-text p { color: #64748b; font-size: 0.95rem; line-height: 1.5; max-width: 500px; }
.btn-continue-modern, .btn-final-continue { background-color: #10b981; color: white; border: none; padding: 16px 30px; border-radius: 12px; font-size: 1.05rem; font-weight: 700; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; white-space: nowrap; transition: all 0.3s; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); width:100%;}
.btn-continue-modern:hover, .btn-final-continue:hover:not(:disabled) { background-color: #059669; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.btn-final-continue:disabled { background-color: #cbd5e1; cursor: not-allowed; box-shadow: none; }

.upload-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
.widget-card-sticky, .widget-card { background: #ffffff; border-radius: 16px; padding: 25px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.doc-notes p { font-size: 0.85rem; color: #64748b; line-height: 1.5; background: #f8fafc; padding: 12px; border-radius: 8px; }
.widget-guide { background: linear-gradient(to bottom right, #fffbeb, #fef3c7); border: 1px solid #fde68a; border-radius: 16px; padding: 25px; } .widget-guide h4 { color: #b45309; margin-bottom: 15px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; } .widget-guide ul { padding-left: 20px; color: #92400e; font-size: 0.9rem; line-height: 1.6; } .widget-guide li { margin-bottom: 8px; }

/* =========================================
   7. KARTU UPLOAD BERKAS (CHECKLIST)
   ========================================= */
.doc-card-premium { background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; gap: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: all 0.3s; }
.doc-card-premium.is-uploaded { border-left: 6px solid #10b981; }
.doc-card-left { display: flex; align-items: center; gap: 18px; flex: 1; }
.doc-icon-box { width: 50px; height: 50px; background-color: #f1f5f9; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: #64748b; flex-shrink: 0; }
.doc-card-premium.is-uploaded .doc-icon-box { background-color: #dcfce3; color: #16a34a; }
.doc-text-info h4 { font-size: 1.1rem; color: #0b1426; margin-bottom: 3px; font-weight: 700; } .doc-text-info p { font-size: 0.85rem; color: #64748b; margin: 0; }
.star-wajib { color: #ef4444; margin-left: 5px; font-size: 1.2rem; }
.doc-card-right { min-width: 320px; }

.upload-compact-form { display: flex; align-items: center; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px; }
.file-input-real { width: 100%; font-size: 0.85rem; color: #475569; cursor: pointer; } .file-input-real::file-selector-button { background-color: #e2e8f0; border: none; padding: 8px 12px; border-radius: 6px; color: #334155; font-weight: 600; cursor: pointer; margin-right: 10px; transition: 0.2s; }
.btn-upload-solid { background-color: #0b1426; color: white; border: none; padding: 9px 20px; border-radius: 6px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: 0.2s; white-space: nowrap; } .btn-upload-solid:hover { background-color: #3b82f6; }
.status-success-box { display: flex; align-items: center; justify-content: space-between; background-color: #f0fdf4; border: 1px solid #bbf7d0; padding: 10px 15px; border-radius: 8px; gap: 15px; }
.status-title { color: #16a34a; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.status-filename { font-size: 0.8rem; color: #475569; font-weight: 600; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-filename span { font-size: 0.7rem; color: #94a3b8; font-weight: 400; }
.status-actions { display: flex; gap: 8px; }

.doc-progress-container { margin-bottom: 20px; } .progress-labels { display: flex; justify-content: space-between; font-size: 0.95rem; color: #475569; margin-bottom: 8px; } .progress-labels strong { color: #0b1426; font-size: 1.1rem; }
.bg-warning { background-color: #f59e0b; } .bg-success { background-color: #10b981; }

/* =========================================
   8. REVIEW DATA & FINALISASI PENGUNCIAN
   ========================================= */
.summary-title { font-size: 1.3rem; color: #0b1426; margin-bottom: 15px; padding-left: 5px; font-weight: 800; }
.review-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.review-header { background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } .review-title-area { display: flex; align-items: center; gap: 12px; } .review-title-area h4 { font-size: 1.1rem; color: #1e293b; font-weight: 700; margin: 0; }
.btn-review-edit { background-color: #ffffff; color: #0b1426; border: 1px solid #cbd5e1; padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; text-decoration: none; transition: all 0.2s; } .btn-review-edit:hover { background-color: #0b1426; color: #ffffff; }
.review-body { padding: 20px; }
.review-list-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 25px; } .review-list-grid li { display: flex; flex-direction: column; border-bottom: 1px dashed #e2e8f0; padding-bottom: 8px; } .review-list-grid li.full-span { grid-column: 1 / -1; } .review-list-grid li span { font-size: 0.8rem; color: #64748b; margin-bottom: 3px; } .review-list-grid li strong { font-size: 0.95rem; color: #0b1426; font-weight: 600; }
.review-table-wrapper { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; } .review-table { width: 100%; border-collapse: collapse; } .review-table th { background-color: #f1f5f9; padding: 10px 15px; text-align: left; font-size: 0.8rem; text-transform: uppercase; } .review-table td { padding: 12px 15px; border-top: 1px solid #e2e8f0; font-size: 0.9rem; }
.review-empty { padding: 15px; background-color: #f8fafc; color: #64748b; border-radius: 8px; font-size: 0.9rem; font-style: italic; border: 1px dashed #cbd5e1; }
.review-file-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .review-file-list li { display: flex; justify-content: space-between; align-items: center; background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 12px 15px; border-radius: 8px; } .file-name-left { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #0b1426; } .file-info-right { display: flex; align-items: center; gap: 15px; text-align: right; } .file-real-name { font-size: 0.85rem; color: #64748b; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-size-badge { background-color: #e2e8f0; color: #475569; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }

.final-card-pending { border: 2px solid #3b82f6 !important; } .final-card-success { border: 2px solid #16a34a !important; }
.lock-title { color: #1e3a8a !important; }
.agreement-box { background-color: #eff6ff; border: 1px solid #bfdbfe; padding: 15px; border-radius: 10px; margin-bottom: 20px; } .agreement-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .agreement-checkbox { width: 20px; height: 20px; margin-top: 3px; accent-color: #2563eb; } .agreement-text { font-size: 0.85rem; color: #1e3a8a; line-height: 1.5; }
.warning-box { background-color: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; } .warning-icon { color: #dc2626; }
.btn-submit-final { background-color: #2563eb !important; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important; } .btn-submit-final:hover { background-color: #1d4ed8 !important; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important; }
.final-success-box { text-align: center; padding: 20px 0; } .final-success-icon { font-size: 4rem; color: #16a34a; margin-bottom: 15px; } .final-success-title { color: #166534; font-size: 1.4rem; margin-bottom: 10px; font-weight: 800; } .final-success-desc { color: #15803d; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; }

/* =========================================
   9. MEDIA QUERY (RESPONSIVE HP & TABLET)
   ========================================= */
@media (max-width: 992px) {
    .split-container { flex-direction: column; height: auto; min-height: 100vh; }
    .left-panel { flex: none; padding: 4rem 2rem; } 
    .text-gold-3d { font-size: 2rem; } 
    .icon-3d { opacity: 0.5; }
    
    .right-panel { 
        flex: 1; 
        padding: 2rem 1rem; 
        align-items: center; 
        justify-content: center;
        overflow-y: auto; 
    } 
    .login-box { 
        padding: 2rem 1.5rem; 
        max-width: 360px; 
        width: 100%;
        max-height: none; 
    }
    
    .dashboard-grid, .upload-grid-layout, .form-grid { grid-template-columns: 1fr; }
    .welcome-banner-wide { padding: 2rem; flex-direction: column; text-align: center; } .banner-icon { position: relative; right: 0; margin-top: 20px; transform: none; }
    .task-header-modern { flex-direction: column; } .nav-user-panel .user-info-modern { display: none; }
    
    .upload-sidebar { position: static; }
    .doc-card-premium { flex-direction: column; align-items: flex-start; } .doc-card-right { width: 100%; min-width: 100%; }
    .upload-compact-form { flex-direction: column; width: 100%; padding: 10px; gap: 10px; } .btn-upload-solid { width: 100%; }
    .status-success-box { flex-direction: column; align-items: flex-start; } .status-filename { max-width: 100%; white-space: normal; }
}

@media (max-width: 768px) {
    .review-list-grid { grid-template-columns: 1fr; } 
    .review-file-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
    .file-info-right { width: 100%; justify-content: space-between; }
    .file-real-name { max-width: 70%; }
    .step-action-card { flex-direction: column; text-align: center; padding: 25px 20px; }
}

/* =========================================
   10. STYLING KHUSUS PANEL ADMIN & SUPERADMIN
   ========================================= */
.stat-card { 
    background: white; 
    border-radius: 12px; 
    padding: 20px; 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
    border: 1px solid #e2e8f0; 
    flex: 1; 
    min-width: 250px;
}

.stat-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; }
.stat-info h4 { font-size: 0.85rem; color: #64748b; margin-bottom: 5px; font-weight: 600; text-transform: uppercase;}
.stat-info h2 { font-size: 1.8rem; color: #0b1426; font-weight: 800; line-height: 1;}

.icon-blue { background: #eff6ff; color: #3b82f6; }
.icon-green { background: #f0fdf4; color: #16a34a; }
.icon-purple { background: #f5f3ff; color: #9333ea; }
.icon-yellow { background: #fffbeb; color: #d97706; }
.icon-red { background: #fef2f2; color: #dc2626; }

/* =========================================
   BADGE UNTUK TABEL MAHASISWA (HALAMAN ADMIN)
   ========================================= */
.badge-status { padding: 6px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.bg-pending { background-color: #f1f5f9; color: #475569; } 
.bg-waiting { background-color: #dbeafe; color: #1e40af; } 
.bg-revisi { background-color: #fee2e2; color: #991b1b; } 
.bg-lulus { background-color: #dcfce3; color: #166534; } 

/* =========================================
   BADGE UNTUK TABEL STAFF (HALAMAN SUPERADMIN)
   ========================================= */
.role-badge { padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; white-space: nowrap;}
.badge-admin { background-color: #dbeafe; color: #1e40af; }
.badge-asesor { background-color: #fae8ff; color: #6b21a8; }

/* =========================================
   11. STYLING MODAL (POP-UP) & TOMBOL STAFF
   ========================================= */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.modal-content { background-color: #fff; margin: 8% auto; padding: 25px; border-radius: 12px; width: 400px; max-width: 90%; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 1.5rem; cursor: pointer; color: #94a3b8; transition: 0.3s; }
.close-btn:hover { color: #ef4444; }

.btn-action-group { display: flex; gap: 8px; justify-content: center; }
.btn-sm { padding: 6px 10px; border-radius: 6px; border: none; color: white; cursor: pointer; font-size: 0.8rem; transition: 0.2s; }
.btn-edit { background-color: #f59e0b; } .btn-edit:hover { background-color: #d97706; }
.btn-key { background-color: #8b5cf6; } .btn-key:hover { background-color: #7c3aed; }
.btn-del { background-color: #ef4444; } .btn-del:hover { background-color: #dc2626; }

/* =========================================
   12. STYLING TAB NAVIGASI SUPERADMIN
   ========================================= */
.super-tabs { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid #e2e8f0; }
.tab-btn { background: none; border: none; padding: 12px 25px; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; color: #64748b; cursor: pointer; transition: 0.3s; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-btn:hover { color: #0b1426; }
.tab-btn.active { color: #d4af37; border-bottom-color: #d4af37; }
.tab-content-area { display: none; animation: fadeIn 0.4s ease; }
.tab-content-area.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   14. TOMBOL DETAIL SUPERADMIN
   ========================================= */
.btn-detail { background-color: #3b82f6 !important; color: white !important;}
.btn-detail:hover { background-color: #2563eb !important; }

/* =========================================
   15. ENHANCEMENT FULL POWER SUPERADMIN
   ========================================= */
.stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
.dt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 15px; }
.custom-filter { display: flex; align-items: center; gap: 10px; background: #f8fafc; padding: 8px 15px; border-radius: 8px; border: 1px solid #e2e8f0; }
.custom-filter label { font-size: 0.85rem; font-weight: 600; color: #475569;}
.custom-filter select { padding: 6px 12px; border-radius: 6px; border: 1px solid #cbd5e1; outline: none; font-family: 'Poppins', sans-serif; font-size: 0.85rem; cursor: pointer; background-color: #ffffff;}
.custom-filter select:focus { border-color: #3b82f6;}

/* =========================================
   16. STYLING LOG AKTIVITAS (SUPERADMIN)
   ========================================= */
.log-time { font-size: 0.85rem; color: #64748b; font-family: monospace; }
.log-role-admin { background-color: #dbeafe; color: #1e40af; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.log-role-asesor { background-color: #fae8ff; color: #6b21a8; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.log-role-mhs { background-color: #f1f5f9; color: #475569; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.log-role-super { background-color: #fef9c3; color: #854d0e; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }

/* =========================================
   17. PREMIUM DATATABLES & CORPORATE UI
   ========================================= */
.dt-top-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; background: #f8fafc; padding: 15px 20px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 20px; }
.dt-bottom-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; padding-top: 20px; margin-top: 15px; border-top: 1px solid #e2e8f0; }
.dt-left { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.dt-right { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; color: #475569 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important;}

.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; font-size: 0.9rem; font-weight: 600; color: #475569;}
.dataTables_wrapper .dataTables_filter input { border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 16px; margin-left: 10px; outline: none; font-family: 'Poppins', sans-serif; background: #fff; width: 250px; transition: 0.3s;}
.dataTables_wrapper .dataTables_filter input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }

.dataTables_wrapper .dataTables_length label { display: flex; align-items: center; font-size: 0.9rem; color: #64748b; white-space: nowrap;}
.dataTables_wrapper .dataTables_length select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 12px; margin: 0 8px; outline: none; font-family: 'Poppins', sans-serif; background: #fff; cursor: pointer;}

.custom-filter { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: #475569;}
.custom-filter select { padding: 8px 12px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; font-family: 'Poppins', sans-serif; outline: none; cursor: pointer; min-width: 180px;}
.custom-filter select:focus { border-color: #3b82f6; }

.dt-button.buttons-excel { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; border: none !important; border-radius: 8px !important; padding: 8px 18px !important; font-size: 0.9rem !important; font-weight: 600 !important; display: flex !important; align-items: center !important; gap: 8px !important; box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2) !important; transition: 0.3s !important;}
.dt-button.buttons-excel:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3) !important;}

.dataTables_wrapper .dataTables_info { font-size: 0.85rem; font-weight: 500; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 6px 14px !important; margin: 0 4px !important; border-radius: 8px !important; border: 1px solid #e2e8f0 !important; background: #fff !important; color: #475569 !important; font-weight: 600 !important; font-size: 0.85rem !important; cursor: pointer !important; transition: 0.2s !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #f1f5f9 !important; color: #0b1426 !important; border-color: #cbd5e1 !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #3b82f6 !important; color: white !important; border-color: #3b82f6 !important; box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.5; cursor: not-allowed !important;}

/* =========================================
   18. TOMBOL AKSI MODERN (PREMIUM SAAS)
   ========================================= */
.btn-action-group { display: flex; gap: 10px; justify-content: center; align-items: center; }

/* Base Style Ikon Kotak */
.btn-icon-modern {
    width: 36px;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Edit (Soft Amber) */
.btn-icon-edit { background-color: #fef3c7 !important; color: #d97706 !important; }
.btn-icon-edit:hover { background-color: #f59e0b !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); transform: translateY(-2px); }

/* Key/Reset (Soft Purple) */
.btn-icon-key { background-color: #f3e8ff !important; color: #7e22ce !important; }
.btn-icon-key:hover { background-color: #9333ea !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(147, 51, 234, 0.25); transform: translateY(-2px); }

/* Delete (Soft Red) */
.btn-icon-del { background-color: #fee2e2 !important; color: #dc2626 !important; }
.btn-icon-del:hover { background-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25); transform: translateY(-2px); }

/* Buka Data (Soft Blue) */
.btn-icon-pastel-blue { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.btn-icon-pastel-blue:hover { background-color: #3b82f6 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transform: translateY(-2px); }

/* Set Jadwal (Soft Green) */
.btn-icon-pastel-green { background-color: #dcfce3 !important; color: #166534 !important; }
.btn-icon-pastel-green:hover { background-color: #10b981 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transform: translateY(-2px); }

/* Merge PDF (Soft Red) */
.btn-icon-pastel-red { background-color: #fee2e2 !important; color: #991b1b !important; }
.btn-icon-pastel-red:hover { background-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); transform: translateY(-2px); }

/* Base Style Tombol Teks ("Buka Data") */
.btn-text-modern {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 6px;
}
.btn-text-blue { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.btn-text-blue:hover { background-color: #3b82f6 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); transform: translateY(-2px); }


/* =========================================
   19. STYLING KARTU DOKUMEN (ADMIN DETAIL) 
   ========================================= */
.doc-card-container { display: flex; flex-direction: column; gap: 12px; }

.doc-item-card {
    display: grid; 
    grid-template-columns: 1fr 90px 170px; 
    align-items: center; gap: 15px;
    background-color: #ffffff; padding: 12px 20px;
    border-radius: 8px; border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: 0.2s;
}
.doc-item-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

.doc-col-name { display: flex; align-items: center; gap: 15px; }
.doc-icon-status { font-size: 1.2rem; flex-shrink: 0; }
.doc-name { font-size: 0.95rem; color: #0f172a; font-weight: 700; line-height: 1.3;}
.doc-name.text-muted { color: #94a3b8; font-weight: 500; }

.doc-col-size { display: flex; justify-content: center; align-items: center; border-left: 2px dashed #f1f5f9; border-right: 2px dashed #f1f5f9; height: 100%; }
.doc-size-badge { background-color: #f8fafc; color: #64748b; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; border: 1px solid #e2e8f0; white-space: nowrap; }

.doc-col-action { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

.icon-ready { color: #10b981; }
.icon-empty { color: #ef4444; }
.icon-system { color: #f59e0b; }

.btn-act-buka { background-color: #ffffff; color: #3b82f6; border: 1px solid #bfdbfe; padding: 6px 15px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s;}
.btn-act-buka:hover { background-color: #eff6ff; }
.btn-act-hapus { background-color: #fef2f2; color: #ef4444; border: 1px solid #fecaca; width: 32px; height: 32px; border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; transition: 0.2s; font-size: 0.85rem; cursor: pointer; flex-shrink: 0;}
.btn-act-hapus:hover { background-color: #ef4444; color: white; }

.badge-kurang { background-color: #fef2f2; color: #ef4444; border: 1px solid #fecaca; padding: 6px 15px; border-radius: 6px; font-size: 0.85rem; font-style: italic; font-weight: 600;}
.badge-sistem { background-color: #fffbeb; color: #d97706; border: 1px solid #fcd34d; padding: 6px 15px; border-radius: 6px; font-size: 0.85rem; font-weight: 600;}

@media (max-width: 768px) {
    .doc-item-card { grid-template-columns: 1fr; gap: 10px; }
    .doc-col-size { border: none; justify-content: flex-start; padding-left: 35px; height: auto; }
    .doc-col-action { justify-content: flex-start; padding-left: 35px; }
}

/* =========================================
   20. DASHBOARD ADMIN (JADWAL & ASESOR)
   ========================================= */
.info-jadwal-box { 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    padding: 8px 12px; 
    border-radius: 8px; 
    font-size: 0.8rem; 
}
.info-jadwal-box strong { 
    color: #0f172a; 
    display: block; 
    margin-bottom: 3px; 
    font-size: 0.85rem;
}
.info-jadwal-box span { 
    color: #64748b; 
    display: block; 
    margin-bottom: 2px;
}
.info-jadwal-box .jadwal-time { 
    color: #3b82f6; 
    font-weight: 700; 
    margin-top: 5px; 
    display: inline-block; 
    background: #eff6ff; 
    padding: 2px 6px; 
    border-radius: 4px;
}