/* =========================================
   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: #f8fafc; 
}

/* KHUSUS HALAMAN DASHBOARD, BIODATA, RIWAYAT, & UPLOAD */
body.bg-modern-dash { 
    display: block; 
    overflow-y: auto; 
    
    /* KOMBINASI 3 LAPISAN BACKGROUND */
    background-image: 
        /* Lapisan 1: Gradasi Transparan (Untuk Menjaga Keterbacaan Form) */
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 246, 255, 0.85) 55%, rgba(254, 240, 138, 0.15) 100%),
        /* Lapisan 2: Peta Indonesia Monokrom (Watermark Utama) */
        url('../images/peta.png'),
        /* Lapisan 3: Pattern skin2.png (Tekstur Halftone/Modern) */
        url('../images/skin2.png');
        
    /* PENGATURAN UKURAN MASING-MASING LAPISAN */
    /* 1. Gradasi: Full 100%
       2. Peta: Diperbesar ke 98% (Membentang Luas Dari Sabang Sampai Merauke)
       3. Pattern skin2: Ukuran 700px agar menjadi aksen tekstur yang elegan */
    background-size: 100% 100%, 98% auto, 700px auto; 
    
    /* PENGATURAN POSISI */
    /* 1. Gradasi: Tengah
       2. Peta: Persis di Tengah Layar
       3. Pattern skin2: Di Sudut Kanan Atas */
    background-position: center center, center center, top right; 
    
    /* PENGATURAN REPEAT (TIDAK BERULANG) */
    background-repeat: no-repeat, no-repeat, no-repeat;
    
    /* EFEK PARALLAX (Background Terkunci Saat Form Di-scroll) */
    background-attachment: fixed, fixed, fixed;
}
.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: 10rem; 
    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;
    
    /* Kombinasi Gradasi Premium & Pattern skin1.png */
    background-image: 
        /* Lapisan 1 (Atas): Gradasi transparan Putih -> Biru Pastel -> Emas Tipis */
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(239, 246, 255, 0.85) 50%, rgba(254, 240, 138, 0.3) 100%),
        /* Lapisan 2 (Bawah): Memanggil file gambar dari folder images */
        url('../images/skin1.png');
        
    /* REVISI: Gradasi 100%, Pattern di-set ke 'cover' agar menutupi layar tanpa merusak rasio */
    background-size: 100% 100%, cover; 
    /* REVISI: Keduanya diposisikan di tengah */
    background-position: center center, center center;
    /* REVISI: Keduanya diset TIDAK BERULANG (no-repeat) */
    background-repeat: no-repeat, no-repeat;
    
    /* Animasi fade in ringan saat halaman dimuat */
    animation: panelFadeIn 1s ease-out;
}

@keyframes panelFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.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; }
/* ========================================================
   UPDATE: PROGRESS BAR (Gradasi Horizontal & Cahaya Halus) 
   ======================================================== */
.progress-bar-fill { 
    height: 100%; 
    /* Gradasi kuning emas menyamping */
    background: linear-gradient(90deg, #fde047 0%, #d4af37 100%); 
    border-radius: 5px; 
    /* Inset shadow putih di atas memberikan efek 3D silinder tipis */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(212, 175, 55, 0.2);
    transition: width 0.5s ease-in-out; 
}

/* Jika progress bar sudah 100% (Hijau) */
.progress-bar-fill.bg-success {
    background: linear-gradient(90deg, #34d399 0%, #10b981 100%); 
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(16, 185, 129, 0.2);
}
.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; }
/* ========================================================
   UPDATE: TOMBOL UTAMA (Hijau - Simpan/Lanjut)
   ======================================================== */
.btn-continue-modern, .btn-final-continue { 
    /* Gradasi vertikal dari hijau muda ke hijau tua */
    background: linear-gradient(180deg, #10b981 0%, #059669 100%); 
    color: white; 
    border: 1px solid #047857; /* Border mempertegas bentuk tombol */
    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; 
    transition: all 0.2s ease; 
    /* Highlight putih di atas, bayangan hijau di bawah */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 4px 6px rgba(16, 185, 129, 0.15); 
    width: 100%;
}

.btn-continue-modern:hover, .btn-final-continue:hover:not(:disabled) { 
    background: linear-gradient(180deg, #059669 0%, #047857 100%); 
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 6px 15px rgba(16, 185, 129, 0.3); 
    transform: translateY(-1px); 
}
.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)
   ========================================= */
   /* Merapikan form upload (sebagai kontainer utama) */
/* Wadah Utama Form Upload */
.form-upload-baru {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
}

/* Area Kolom Pilih File (Garis putus-putus) */
.area-pilih-file {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    border: 1px dashed #94a3b8;
    padding: 8px;
    border-radius: 6px;
}

/* Tombol Cari Dokumen */
.tombol-cari-file {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.tombol-cari-file:hover {
    background-color: #2563eb;
    color: #ffffff;
}

/* Teks Keterangan File */
.teks-nama-file {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Saat file sudah berhasil dipilih (Warna Hijau) */
.teks-nama-file.berhasil {
    color: #059669;
    font-weight: 600;
    background-color: #dcfce3;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Tombol Unggah */
.tombol-unggah-file {
    background-color: #0f172a;
    color: #ffffff;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: 100%;
}
.tombol-unggah-file:hover {
    background-color: #1e293b;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}
   
.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; }

.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) {
    /* Kembalikan Fungsi Scroll */
    body {
        overflow-y: auto !important; 
        display: block !important; 
    }
    
    .split-container { 
        display: flex;
        flex-direction: column; 
        height: auto; 
        min-height: 100vh; 
    }
    
    /* --- PERBAIKAN PANEL KIRI (MENJADI HEADER RINGKAS) --- */
    .left-panel { 
        flex: none !important; 
        padding: 2.5rem 1rem 1.5rem 1rem !important; /* Kurangi padding drastis */
        height: auto !important; 
        min-height: auto !important; /* Jangan paksa tinggi layar */
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; 
        z-index: 10;
    } 
    
    /* Paksa teks judul mengecil di HP */
    .text-gold-3d { 
        font-size: 1.35rem !important; 
        line-height: 1.4 !important;
        margin-bottom: 0.8rem !important;
    } 
    
    /* Sembunyikan SEMUA ornamen 3D agar tidak sempit */
    .icon-3d, .light-line, .book-glow, .icon-book-wrapper { 
        display: none !important; 
    }
    
    /* Kecilkan Badge Kampus */
    .glass-badge {
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
    }

    /* Sembunyikan tag <br> yang memotong kalimat */
    br.hide-mobile {
        display: none !important;
    }
    
    /* --- PERBAIKAN PANEL KANAN (FORM LOGIN NAIK) --- */
    .right-panel { 
        flex: 1; 
        padding: 2rem 1rem 3rem 1rem !important; 
        align-items: flex-start !important; /* Tarik form ke atas, tidak di tengah */
        height: auto; 
        min-height: 60vh; 
    } 
    
    .login-box { 
        padding: 2rem 1.5rem !important; 
        max-width: 100% !important; 
        margin: 0 auto;
        border-radius: 12px !important;
    }

    .login-box h2 { font-size: 1.3rem !important; }
    .login-box p.subtitle { font-size: 0.85rem !important; margin-bottom: 1.5rem !important; }
    
    /* Layout Dashboard & Lainnya */
    .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; }
}

/* Khusus untuk HP berlayar sangat kecil (iPhone SE, dsb) */
@media (max-width: 400px) {
    .text-gold-3d { font-size: 1.15rem !important; }
    .left-panel { padding: 2rem 1rem 1rem 1rem !important; }
}
/* =========================================
   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;
}

/* =========================================
   DESAIN FORM UPLOAD ELEGAN & MODERN
   ========================================= */
/* Wadah Form Menyatu (Unified Component) */
.upload-modern-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 6px 6px 10px;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    width: 100%;
}
.upload-modern-wrapper:focus-within, 
.upload-modern-wrapper:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* Area Kiri: Tombol Pilih & Teks */
.file-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    overflow: hidden;
}

/* Tombol Pilih File (Soft Grey) */
.btn-choose-modern {
    background-color: #f1f5f9;
    color: #475569;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}
.btn-choose-modern:hover {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* Teks Nama File */
.file-name-modern {
    font-size: 0.85rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Saat file sudah berhasil dipilih (Warna Hijau) */
.file-name-modern.berhasil {
    color: #10b981;
    font-weight: 600;
}

/* Tombol Unggah (Aksen Navy/Blue) */
.btn-submit-modern {
    background-color: #0b1426;
    color: #ffffff;
    border: none;
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-submit-modern:hover {
    background-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

/* Responsif untuk Layar Kecil (HP) */
@media (max-width: 768px) {
    .upload-modern-wrapper {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        gap: 12px;
    }
    .file-input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .btn-choose-modern {
        width: 100%;
        justify-content: center;
    }
    .btn-submit-modern {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
}


/* =========================================
   21. RESPONSIVE SUPERADMIN & DATATABLES
   ========================================= */
@media (max-width: 992px) {
    /* Navbar Superadmin */
    .nav-container-wide { flex-direction: column; gap: 10px; padding: 15px; text-align: center; }
    .nav-brand { justify-content: center; flex-direction: column; gap: 5px; }
    .nav-user-panel { width: 100%; justify-content: center; gap: 15px; flex-wrap: wrap; }
    
    /* Card Statistik - Berubah jadi 2 kolom di Tablet, 1 kolom di HP */
    .stat-card-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 15px; }
    .stat-card { padding: 15px; flex-direction: column; text-align: center; gap: 10px; }
    
    /* Tab Navigasi Superadmin (Bisa digeser ke samping / di-swipe) */
    .super-tabs { 
        overflow-x: auto; 
        white-space: nowrap; 
        padding-bottom: 8px; 
        -webkit-overflow-scrolling: touch; 
    }
    .super-tabs::-webkit-scrollbar { height: 4px; }
    .super-tabs::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 4px; }

    /* Datatables (Tabel, Pencarian, & Filter) pada layar kecil */
    .dt-top-container, .dt-bottom-container { flex-direction: column; gap: 12px; align-items: stretch; padding: 15px !important; }
    .dt-left, .dt-right { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
    .dt-right { flex-direction: column; align-items: stretch; }
    
    .dataTables_wrapper .dataTables_filter label { width: 100%; text-align: left; align-items: flex-start; flex-direction: column; gap: 5px;}
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; max-width: 100%;}
    
    .custom-filter { width: 100%; flex-direction: column; align-items: flex-start; }
    .custom-filter select { width: 100%; }
    
    /* Fix Pagination Datatables biar tidak saling tindih */
    .dataTables_wrapper .dataTables_paginate { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 10px !important;}
    .dataTables_wrapper .dataTables_paginate .paginate_button { margin: 0 !important; }
}

/* =========================================
   UPDATE KHUSUS MOBILE (APP-LIKE FEEL - NO SCROLL)
   ========================================= */
@media (max-width: 768px) {
    body, html {
        overscroll-behavior-y: none;
        background-color: #153257 !important; 
        height: 100%;
        overflow: hidden; /* Kunci mati scroll di body */
    }

    .split-container {
        height: 100dvh !important; 
        display: flex;
        flex-direction: column;
        overflow: hidden; 
    }

    /* 1. HEADER DIBUAT LEBIH RINGKAS */
    .left-panel {
        flex: none !important;
        padding: 1.5rem 1rem !important; /* Padding dikurangi drastis */
        background: radial-gradient(circle at 50% 0%, #153257 0%, #0b1426 100%) !important;
        box-shadow: none !important;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        z-index: 2;
    }

    .text-gold-3d {
        font-size: 1.1rem !important; /* Judul dikecilkan */
        margin-bottom: 0.5rem !important;
    }

    .glass-badge {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
    }

    /* 2. FORM DITARIK KE ATAS & DIPADATKAN */
    .right-panel {
        flex: 1 !important;
        padding: 0 !important;
        background: #f8fafc !important;
        display: flex !important;
        align-items: center !important; /* Posisikan form di tengah sisa ruang */
        height: auto !important;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        margin-top: -20px; 
        z-index: 10;
        background-image: none !important;
        overflow: hidden !important; /* Matikan scroll di panel kanan */
    }

    .login-box {
        padding: 1.5rem !important; /* Padding dalam box form dikurangi */
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
    }

    .logo-img-3d {
        width: 60px !important; /* Logo kampus diperkecil sedikit */
        margin-bottom: -5px !important;
    }

    .login-box h2 {
        font-size: 1.25rem !important;
    }

    .login-box p.subtitle {
        margin-bottom: 1rem !important;
    }

    /* 3. JARAK INPUT & TOMBOL DIPERKETAT */
    .input-group {
        margin-bottom: 0.6rem !important;
    }

    .form-control {
        padding: 12px 15px 12px 42px !important; /* Kurangi tinggi input */
        font-size: 0.95rem !important;
    }

    .btn-login {
        padding: 12px !important;
        margin-top: 0.5rem !important;
        font-size: 1rem !important;
    }

    .forgot-password {
        margin-bottom: 10px !important;
    }
}


/* =========================================
   UPDATE DASHBOARD MOBILE (APP-LIKE FEEL)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Bersihkan Background agar Ringan & Native */
    body.bg-modern-dash {
        background-image: none !important; 
        background-color: #f8fafc !important;
        overscroll-behavior-y: none; /* Cegah efek mantul saat di-scroll */
    }

    /* 2. Rapatkan Wadah Utama */
    .dashboard-wrapper {
        padding: 15px 10px !important;
        margin: 0 !important;
    }

    /* 3. Sembunyikan Banner Besar di HP (Makan Tempat) */
    .welcome-banner-wide {
        display: none !important;
    }

    /* 4. Perkecil Header Halaman */
    .page-header {
        margin-bottom: 15px !important;
        gap: 10px !important;
    }
    .page-header h2 { font-size: 1.25rem !important; }
    .btn-back { width: 40px !important; height: 40px !important; font-size: 1rem !important; }

    /* 5. Ubah Kartu Tugas (Task) Jadi Bentuk List Aplikasi */
    .dashboard-grid { gap: 15px !important; }
    
    .modern-task-card {
        margin-bottom: 10px !important;
    }
    
    .task-step-indicator {
        margin-right: 12px !important;
    }
    
    .step-num {
        width: 35px !important; 
        height: 35px !important; 
        font-size: 0.9rem !important;
        border-width: 2px !important;
    }

    .task-content-area {
        padding: 15px !important; /* Kurangi padding dalam */
        border-radius: 12px !important;
    }

    .task-header-modern {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
    
    .task-header-modern h3 {
        font-size: 1.05rem !important;
        margin-bottom: 0 !important;
    }

    /* Sembunyikan deskripsi panjang di HP agar bersih */
    .task-header-modern p {
        display: none !important; 
    }

    .status-badge {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }

    /* 6. Tombol Aksi Menjadi Full Width (Ramah Jempol) */
    .btn-do-task {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px !important;
        font-size: 0.95rem !important;
        margin-top: 12px !important;
    }

    /* 7. Rapikan Widget Samping (Progress & Info) */
    .side-panel { gap: 15px !important; }
    .widget-card { padding: 15px !important; border-radius: 12px !important; }
    .widget-title { font-size: 1rem !important; margin-bottom: 12px !important; }
    
    /* 8. Alert Status Lebih Ringkas */
    .alert-success, .alert-error {
        padding: 15px !important;
        border-radius: 10px !important;
        margin-bottom: 15px !important;
    }
/* =========================================
       UPDATE NAVBAR/HEADER MOBILE (APP BAR)
       ========================================= */
    .navbar-modern {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    }
    
    .nav-container-wide {
        flex-direction: row !important; /* Berubah jadi sebaris */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        height: auto !important;
    }

    .nav-brand {
        flex-direction: row !important; /* Logo & Judul sejajar */
        align-items: center !important;
        gap: 10px !important;
    }

    .nav-logo {
        width: 32px !important; /* Perkecil logo agar proporsional */
        height: auto !important;
    }

    .brand-title {
        font-size: 1.05rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    /* Sembunyikan nama Universitas yang panjang agar tidak sempit di HP */
    .brand-sub {
        display: none !important; 
    }

    .nav-user-panel {
        width: auto !important; /* Jangan 100% lagi */
        justify-content: flex-end !important;
        margin-top: 0 !important; /* Hilangkan jarak atas */
    }

    /* Bikin tombol Keluar jadi lebih mungil */
    .btn-logout-modern {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    /* =========================================
       UPDATE FORM BIODATA/RIWAYAT MOBILE (APP FEEL)
       ========================================= */
    .upload-grid-layout {
        padding-bottom: 20px !important;
        gap: 15px !important;
    }
    
    /* 1. Perkecil Kotak Form (Card) */
    .form-section {
        padding: 15px !important; /* Kurangi padding drastis dari 35px */
        border-radius: 12px !important;
        margin-bottom: 15px !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }

    .form-section-title {
        font-size: 1.05rem !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }

    /* 2. Rapatkan Jarak Input & Label */
    .form-grid {
        gap: 12px !important;
    }
    
    .form-group {
        gap: 5px !important;
    }

    .form-group label {
        font-size: 0.85rem !important;
    }

    .form-input {
        padding: 12px 15px !important;
        font-size: 0.95rem !important;
        border-radius: 8px !important;
    }
    
    /* 3. Sesuaikan Dropdown Tanggal Lahir agar tidak sempit */
    .form-group div[style*="grid-template-columns"] {
        gap: 5px !important; /* Jarak antar tgl, bln, thn dirapatkan */
    }
    .form-group div[style*="grid-template-columns"] select {
        padding: 12px 5px !important; /* Kurangi padding kiri-kanan select box */
    }
    
    /* 4. Area Tombol Simpan (Sticky / Full Width) */
    .step-action-card {
        padding: 15px !important;
        flex-direction: column !important; /* Susun ke bawah */
        text-align: center !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }

    .step-action-card .action-text h4 {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }

    .btn-continue-modern {
        width: 100% !important; /* Tombol membentang penuh */
        padding: 14px !important;
        font-size: 1rem !important;
        margin-top: 5px !important;
        justify-content: center !important;
    }
    /* =========================================
       PERBAIKAN KARTU RIWAYAT V3 (STRICT APP FEEL)
       ========================================= */
    
    /* 1. Kunci Lebar Tabel agar tidak Over-Frame */
    .table-modern, .table-modern tbody {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important; 
    }

    .table-modern thead { 
        display: none !important; 
    }

    /* 2. Styling Kartu (Lebih ringkas & padat) */
    .table-modern tr {
        display: block !important;
        position: relative !important;
        padding: 12px !important; /* Padding dikurangi */
        margin-bottom: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
        width: 100% !important;
        box-sizing: border-box !important; /* Kunci agar tidak melebar */
    }

    .table-modern td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Teks Perusahaan (Lebih Kecil & Rapi) */
    .table-modern td:nth-child(1) {
        font-size: 0.95rem !important; /* Font dikecilkan */
        padding-right: 40px !important; /* Jarak aman tombol hapus */
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
        color: #0f172a !important;
    }

    /* Posisi / Jabatan */
    .table-modern td:nth-child(2) {
        font-size: 0.8rem !important; /* Font dikecilkan */
        color: #64748b !important;
        margin-bottom: 8px !important;
    }

    /* Masa Kerja (Badge) */
    .badge-time {
        font-size: 0.75rem !important; /* Font badge dikecilkan */
        padding: 4px 8px !important;
    }

    /* 4. Tombol Hapus (Ukurannya dipatenkan & dikunci posisinya) */
    .table-modern td:last-child {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 32px !important; /* Lebih mungil */
        height: 32px !important;
    }

    .btn-delete {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important; /* Ikon lebih kecil */
        margin: 0 !important;
    }

    /* =========================================
       PERKECIL UKURAN FORM & TEKS
       ========================================= */
    .form-section-title {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .form-group label {
        font-size: 0.8rem !important; /* Label form dikecilkan */
        margin-bottom: 4px !important;
    }

    .form-input {
        font-size: 0.85rem !important; /* Teks dalam kolom isian dikecilkan */
        padding: 10px 12px !important; /* Kolom tidak terlalu bengkak */
        border-radius: 8px !important;
    }

    .form-group[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important; /* Jarak dropdown dirapatkan */
    }

    .btn-add-modern {
        font-size: 0.9rem !important;
        padding: 10px !important;
    }
    .alert-success h3, .alert-error h3 { font-size: 1.05rem !important; }
    /* =========================================
       UPDATE HALAMAN UPLOAD BERKAS (APP FEEL)
       ========================================= */
    /* 1. Perkecil Padding Kartu Utama */
    .doc-card-premium {
        padding: 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        border-radius: 12px !important;
    }

    /* 2. Rapatkan Ikon & Judul Dokumen */
    .doc-card-left {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .doc-icon-box {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        border-radius: 10px !important;
    }

    .doc-text-info h4 {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    .doc-text-info p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    /* 3. Area Form Upload & Tombol ditarik penuh */
    .doc-card-right {
        width: 100% !important;
        min-width: 100% !important;
    }

    .form-upload-modern {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    /* Area pilih file dibikin sebaris & mirip input field */
    .area-file-modern {
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        background: #ffffff !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .btn-pilih-modern {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    .teks-file-modern {
        font-size: 0.8rem !important;
        text-align: left !important;
    }

    /* Tombol Unggah Super Ramah Jempol */
    .btn-unggah-modern {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }

    /* 4. Kotak Status (Bila Sudah Upload) */
    .status-success-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px !important;
        gap: 12px !important;
    }

    .status-filename {
        max-width: 100% !important;
        font-size: 0.85rem !important;
    }

    /* Tombol Lihat & Hapus digeser ke kanan bawah */
    .status-actions {
        width: 100% !important;
        justify-content: flex-end !important;
        border-top: 1px dashed #bbf7d0 !important;
        padding-top: 12px !important;
        margin-top: 5px !important;
    }

    /* 5. Widget Ringkasan di Bawah */
    .upload-sidebar {
        margin-top: 5px !important;
    }
    
    .widget-card-sticky {
        padding: 15px !important;
    }
}