/* =====================================================
   SIBIMA - STYLE.CSS FINAL CLEAN
===================================================== */

:root{
    --blue:#0b4fae;
    --blue-dark:#062c75;
    --blue-soft:#eaf4ff;
    --gold:#ffc928;
    --green:#16a05d;
    --orange:#ff8a00;
    --red:#ef3b5d;
    --text:#061a42;
    --muted:#63748c;
    --glass:rgba(255,255,255,.72);
    --glass-strong:rgba(255,255,255,.86);
    --border:rgba(255,255,255,.55);
}

*{
    box-sizing:border-box;
    font-family:'Segoe UI', Arial, sans-serif;
}

body{
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(255,201,40,.22), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(11,103,255,.18), transparent 28%),
        linear-gradient(135deg,#eaf4ff,#f7fbff 45%,#eaf4ff);
}

a{
    text-decoration:none;
}

.glass-card{
    background:var(--glass);
    border:1px solid var(--border);
    box-shadow:0 18px 40px rgba(16,61,120,.13);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

/* FORM */
label{
    display:block;
    margin-top:14px;
    font-size:13px;
    font-weight:700;
}

input,
select,
textarea{
    width:100%;
    margin-top:6px;
    padding:11px 12px;
    border:1px solid rgba(11,79,174,.14);
    border-radius:12px;
    background:rgba(255,255,255,.72);
    font-size:13px;
    outline:none;
}

textarea{
    min-height:90px;
}

button{
    width:100%;
    margin-top:18px;
    padding:13px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#ffda47,#ffc400);
    color:#091b3a;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(255,196,0,.25);
}

.alert{
    margin:12px 0;
    padding:10px;
    border-radius:12px;
    background:#ffe7e7;
    color:#b91c1c;
}

.success{
    margin:12px 0;
    padding:12px;
    border-radius:12px;
    background:#e4fff0;
    color:#087a43;
    font-weight:700;
}

/* BUTTON */
.btn-submit{
    width:100%;
    padding:14px;
    border:none;
    border-radius:16px;
    background:#ffcc00;
    color:#061a42;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.btn-disabled{
    width:100%;
    padding:14px;
    border:none;
    border-radius:16px;
    background:#cbd5e1 !important;
    color:#64748b !important;
    font-size:16px;
    font-weight:700;
    cursor:not-allowed !important;
    box-shadow:none !important;
}

.small-btn,
.table-btn{
    display:inline-block;
    padding:7px 11px;
    border-radius:9px;
    background:var(--blue);
    color:white;
    font-size:12px;
    font-weight:700;
}

.btn-dashboard-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
}

.btn-bimbingan{
    margin-top:12px;
}

.input-disabled{
    background:#e5eaf1 !important;
    color:#64748b !important;
    cursor:not-allowed !important;
}

.input-info{
    display:block;
    margin-top:6px;
    color:#64748b;
    font-size:12px;
}

.input-info.warning{
    color:#a16207;
    font-weight:600;
}

/* LOGIN */
.login-body{
    min-height:100vh;
    background:linear-gradient(135deg,#072d75,#0b67ff);
}

.login-container{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:28px;
    padding:28px;
}

.login-left{
    color:white;
    padding:56px;
    border-radius:30px;
    background:linear-gradient(145deg,rgba(0,72,160,.75),rgba(0,35,100,.55));
    border:1px solid rgba(255,255,255,.20);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.login-left h1{
    max-width:620px;
    margin:0 0 16px;
    font-size:38px;
    line-height:1.18;
}

.login-left p{
    max-width:560px;
    color:#eaf4ff;
    font-size:16px;
    line-height:1.65;
}

.login-feature{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

.login-feature span{
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    font-size:13px;
}

.login-right{
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-card{
    width:400px;
    padding:32px;
    border-radius:26px;
}

.login-card h2{
    margin:0;
    color:var(--blue);
    font-size:26px;
}

.login-card p{
    color:var(--muted);
    font-size:14px;
}

.login-hero-logo{
    width:330px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto 30px;
    filter:drop-shadow(0 15px 25px rgba(0,0,0,.30));
}

.login-card-logo{
    width:230px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto 22px;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.captcha-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.captcha-box{
    margin-top:6px;
    padding:11px;
    border-radius:12px;
    background:rgba(234,244,255,.85);
    color:var(--blue);
    font-weight:800;
    text-align:center;
}

.demo-box{
    margin-top:16px;
    padding:12px;
    border-radius:12px;
    background:rgba(234,244,255,.75);
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

/* DASHBOARD LAYOUT */
.dashboard-app{
    min-height:100vh;
    display:flex;
}

.dashboard-main{
    width:calc(100% - 296px);
    max-width:1420px;
    margin-left:296px;
    padding:18px 24px 24px 0;
    transition:.25s ease;
}

/* SIDEBAR */
.sidebar{
    position:fixed;
    top:18px;
    bottom:18px;
    left:18px;
    width:260px;
    display:flex;
    flex-direction:column;
    padding:18px;
    border-radius:28px;
    background:linear-gradient(160deg,rgba(0,74,165,.82),rgba(0,45,115,.88));
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 24px 55px rgba(0,38,102,.32);
    color:white;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
    transition:.25s ease;
}

.brand-area{
    text-align:center;
    padding:0 0 8px;
}

.brand-logo{
    width:100%;
    max-width:300px;
    height:auto;
    display:block;
    margin:0 auto;
    object-fit:contain;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));
    transition:.25s ease;
}

.sidebar-logo{
    display:none !important;
}

.sidebar-menu{
    flex:1;
    margin-top:0;
    padding-right:4px;
    overflow-y:auto;
}

.sidebar-menu::-webkit-scrollbar{
    width:5px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
    border-radius:10px;
    background:rgba(255,255,255,.25);
}

.sidebar-menu a{
    display:flex;
    align-items:center;
    gap:10px;
    margin:5px 0;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    color:white;
    font-size:13px;
    font-weight:650;
    transition:.25s ease;
}

.sidebar-menu a i{
    width:17px;
    font-size:15px;
}

.sidebar-menu a.active,
.sidebar-menu a:hover{
    background:linear-gradient(135deg,rgba(42,130,255,.95),rgba(0,86,220,.88));
    box-shadow:0 12px 25px rgba(0,38,102,.22);
}

.sidebar-bottom{
    flex:0 0 auto;
    margin-top:12px;
}

.logout-link{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    padding:11px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.10);
    color:white;
    font-size:13px;
    font-weight:700;
    transition:.25s ease;
}

/* SIDEBAR TOGGLE */
.sidebar-toggle{
    position:absolute;
    top:50%;
    right:-10px;
    transform:translateY(-50%);
    width:20px;
    height:72px;
    border:none;
    border-radius:20px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:999;
    border:1px solid rgba(255,255,255,.2);
    transition:.25s ease;
}

.sidebar-toggle:hover{
    background:rgba(255,255,255,.25);
}

.sidebar-toggle i{
    transition:.25s ease;
}

.sidebar-collapsed .sidebar{
    width:86px;
    padding:18px 10px;
}

.sidebar-collapsed .brand-logo{
    max-width:58px;
}

.sidebar-collapsed .sidebar-menu a{
    justify-content:center;
    padding:12px;
}

.sidebar-collapsed .sidebar-menu a span,
.sidebar-collapsed .logout-link span{
    display:none;
}

.sidebar-collapsed .logout-link{
    justify-content:center;
}

.sidebar-collapsed .dashboard-main{
    margin-left:122px;
    width:calc(100% - 122px);
}

.sidebar-collapsed .sidebar-toggle i{
    transform:rotate(180deg);
}

/* DISABLED MENU */
.disabled-menu{
    opacity:.45;
    cursor:not-allowed !important;
    pointer-events:none;
    background:rgba(255,255,255,.06) !important;
}

.disabled-menu i,
.disabled-menu span{
    color:#cbd5e1 !important;
}

/* TOPBAR */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
    padding:18px;
}

.topbar h1{
    margin:0;
    color:var(--text);
    font-size:27px;
}

.topbar p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:14px;
}

.status-pill{
    padding:10px 17px;
    border-radius:16px;
    background:rgba(255,233,151,.9);
    color:#091b3a;
    font-size:13px;
    font-weight:800;
}

.datetime-pill{
    padding:14px 22px;
    border-radius:16px;
    background:linear-gradient(135deg,#0b67ff,#00479d);
    color:white;
    font-size:14px;
    font-weight:700;
    box-shadow:0 10px 25px rgba(0,71,157,.20);
}

/* KPI */
.kpi-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:16px;
}

.kpi-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:20px;
}

.kpi-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.kpi-icon.blue{background:linear-gradient(135deg,#0b67ff,#00479d);}
.kpi-icon.green{background:linear-gradient(135deg,#20c873,#149657);}
.kpi-icon.orange{background:linear-gradient(135deg,#ffad33,#ff7a00);}
.kpi-icon.yellow{background:linear-gradient(135deg,#ffdd55,#ffc400);}

.kpi-card p{
    margin:0;
    font-size:13px;
    font-weight:650;
}

.kpi-card h2{
    margin:5px 0;
    font-size:26px;
}

.kpi-card span{
    color:var(--muted);
    font-size:12px;
}

.kpi-status-text{
    font-size:20px !important;
    line-height:1.3;
}

/* PANEL & GRID */
.main-grid{
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:16px;
    margin-bottom:16px;
}

.three-column{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.panel{
    margin-bottom:16px;
    padding:18px;
    border-radius:20px;
}

.panel h2{
    margin:0 0 8px;
    color:var(--blue-dark);
    font-size:20px;
}

.panel p{
    color:var(--muted);
    font-size:13px;
}

.panel-title-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

/* TABLE */
.data-table{
    width:100%;
    margin-top:14px;
    border-collapse:collapse;
}

.data-table th,
.data-table td{
    padding:10px;
    border-bottom:1px solid rgba(11,79,174,.12);
    text-align:left;
    font-size:13px;
}

.data-table th{
    color:var(--blue-dark);
}

.compact-table th,
.compact-table td{
    padding:9px;
    font-size:13px;
}

/* PROGRESS STEP */
.step-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    row-gap:20px;
    column-gap:16px;
    margin-top:22px;
}

.step-item{
    text-align:center;
}

.step-circle{
    width:34px;
    height:34px;
    margin:0 auto 8px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:800;
}

.step-item.done .step-circle{
    background:var(--green);
    color:white;
}

.step-item.active .step-circle{
    background:var(--gold);
    color:#091b3a;
}

.step-item.todo .step-circle{
    background:#dce9f8;
    color:#123156;
}

.step-item p{
    margin:0;
    color:var(--text);
    font-size:12px;
    font-weight:600;
}

.progress-footer{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:20px;
}

.progress-track{
    flex:1;
    height:10px;
    border-radius:999px;
    background:#e8f1fb;
    overflow:hidden;
}

.progress-track div{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#20c873,#149657);
}

.progress-footer b{
    color:var(--green);
    font-size:13px;
}

/* STATUS */
.status-empty{
    background:#e5eaf1;
    color:#64748b;
}

.status-waiting{
    background:#fff4cc;
    color:#a76d00;
}

.status-approved{
    background:#dcfce7;
    color:#15803d;
}

.status-revision{
    background:#ffe4e6;
    color:#be123c;
}

.status-success{
    color:#15803d;
    font-weight:800;
}

.status-pill-dynamic{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 22px;
    border-radius:999px;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
}

.status-pill-dynamic i{
    font-size:16px;
}

.status-real-card{
    display:flex;
    gap:16px;
    margin-top:18px;
    padding:20px;
    border-radius:20px;
}

.status-real-card i{
    font-size:32px;
}

.status-real-card h3{
    margin:0 0 8px;
    font-size:22px;
}

.status-real-card p{
    margin:0;
    line-height:1.6;
}

/* ARTIKEL SAYA */
.artikel-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr 1fr;
    gap:16px;
}

.compact-topbar{
    padding:16px 20px;
}

.artikel-form-card,
.komponen-card,
.artikel-status-card{
    min-height:310px;
}

.judul-artikel-input{
    width:100%;
    min-height:110px;
    resize:vertical;
    padding:14px;
    border:1px solid rgba(11,79,174,.15);
    border-radius:14px;
    background:rgba(255,255,255,.80);
    color:#061a42;
    font-size:15px;
    line-height:1.6;
    font-weight:500;
}

.judul-artikel-input:focus{
    outline:none;
    border-color:#0b67ff;
    box-shadow:0 0 0 4px rgba(11,103,255,.12);
}

.komponen-artikel{
    margin-top:10px;
}

.komponen-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(11,79,174,.08);
    color:#061a42;
    font-size:14px;
    font-weight:600;
}

.komponen-item:last-child{
    border-bottom:none;
}

.komponen-item i{
    width:22px;
    color:#0b67ff;
    text-align:center;
    font-size:16px;
}

.template-download{
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid rgba(11,79,174,.10);
}

.template-info{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
}

.template-info i{
    color:#0b67ff;
    font-size:28px;
}

.template-info b{
    display:block;
    margin-bottom:4px;
    color:#061a42;
}

.template-info small{
    color:#64748b;
    line-height:1.5;
}

.btn-template{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:12px;
    border-radius:14px;
    background:linear-gradient(135deg,#0b67ff,#00479d);
    color:white;
    font-size:14px;
    font-weight:700;
    transition:.3s;
}

.btn-template:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(11,103,255,.25);
}

/* APPROVAL */
.approval-box{
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid rgba(11,79,174,.08);
}

.approval-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px;
}

.approval-item{
    padding:12px;
    border-radius:14px;
    background:#eef2f7;
    color:#64748b;
    font-size:13px;
    font-weight:700;
}

.approval-item b{
    display:block;
    margin-bottom:4px;
    color:#061a42;
}

.approval-item.approve{
    background:#dcfce7;
    color:#15803d;
}

.approval-item.menunggu{
    background:#fff4cc;
    color:#a76d00;
}

.approval-item.revisi,
.approval-item.tolak{
    background:#ffe4e6;
    color:#be123c;
}

.approval-card{
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:18px;
    border-radius:18px;
}

.approval-card i{
    margin-top:3px;
    font-size:28px;
}

.approval-card h3{
    margin:0 0 5px;
    font-size:18px;
}

.approval-card p{
    margin:0;
    font-size:14px;
    line-height:1.6;
}

.approval-success{
    background:#dcfce7;
    color:#15803d;
}

.approval-waiting{
    background:#fff4cc;
    color:#a76d00;
}

/* BIMBINGAN */
.tahapan-wrapper{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.tahap-card{
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(11,79,174,.12);
    background:rgba(255,255,255,.72);
}

.tahap-header{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}

.tahap-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#0b67ff;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.tahap-header h3{
    margin:0 0 6px;
    color:#061a42;
    font-size:16px;
}

.tahap-header span{
    font-size:13px;
    font-weight:700;
}

.tahap-card.approved{
    border-left:5px solid #16a34a;
}

.tahap-card.approved .tahap-header span{
    color:#16a34a;
}

.tahap-card.review{
    border-left:5px solid #f59e0b;
}

.tahap-card.review .tahap-header span{
    color:#a16207;
}

.tahap-card.revisi{
    border-left:5px solid #ef4444;
}

.tahap-card.revisi .tahap-header span{
    color:#dc2626;
}

.tahap-card.locked{
    opacity:.65;
    border-left:5px solid #94a3b8;
}

.tahap-card.open{
    border-left:5px solid #0b67ff;
}

.form-tahap,
.form-review{
    margin-top:14px;
}

.review-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.btn-approve{
    background:#16a34a !important;
    color:white !important;
}

.btn-revisi{
    background:#f59e0b !important;
    color:#061a42 !important;
}

.judul-auto-box{
    margin-top:14px;
    padding:14px;
    border-radius:14px;
    background:#f8fbff;
    border:1px solid rgba(11,79,174,.12);
}

.judul-auto-box small{
    display:block;
    margin-bottom:8px;
    color:#64748b;
    font-size:12px;
    font-weight:700;
}

.judul-auto-box p{
    margin:0;
    color:#061a42;
    font-size:15px;
    font-weight:700;
    line-height:1.6;
}

.catatan-box{
    margin-top:14px;
    padding:14px 16px;
    border-radius:14px;
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.catatan-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
    color:#c2410c;
}

.catatan-box p{
    margin:0;
    color:#7c2d12;
    font-size:14px;
    line-height:1.6;
}

/* TIMELINE BIMBINGAN */
.bimbingan-timeline-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:24px;
    align-items:start;
    margin-top:20px;
}

.timeline-left{
    position:relative;
    padding-left:8px;
    min-width:0;
}

.timeline-left::before{
    content:"";
    position:absolute;
    left:28px;
    top:18px;
    bottom:18px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg,#0b67ff,#dbeafe);
}

.timeline-step{
    position:relative;
    display:flex;
    gap:14px;
    padding:14px 12px;
    border-radius:18px;
    margin-bottom:12px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(11,79,174,.10);
    transition:.25s;
}

.timeline-step.active-step{
    background:#ffffff;
    box-shadow:0 14px 30px rgba(11,79,174,.16);
    transform:translateX(4px);
}

.timeline-point{
    position:relative;
    z-index:2;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    flex-shrink:0;
    background:#0b67ff;
}

.timeline-step.approved .timeline-point{
    background:#16a34a;
}

.timeline-step.review .timeline-point{
    background:#f59e0b;
}

.timeline-step.revisi .timeline-point{
    background:#ef4444;
}

.timeline-step.locked .timeline-point{
    background:#94a3b8;
}

.timeline-info h3{
    margin:0;
    font-size:13px;
    color:#64748b;
}

.timeline-info p{
    margin:3px 0;
    color:#061a42;
    font-size:15px;
    font-weight:800;
}

.timeline-info span{
    font-size:12px;
    font-weight:700;
}

.timeline-step.approved .timeline-info span{
    color:#15803d;
}

.timeline-step.review .timeline-info span{
    color:#a16207;
}

.timeline-step.revisi .timeline-info span{
    color:#dc2626;
}

.timeline-step.locked .timeline-info span{
    color:#64748b;
}

.timeline-right{
    min-width:0;
}

.active-stage-card{
    background:#fff;
    border-radius:24px;
    padding:24px;
    border:1px solid rgba(11,79,174,.12);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.active-stage-header{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.active-stage-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(135deg,#0b67ff,#00479d);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
}

.active-stage-header h2{
    margin:0 0 8px;
    color:#061a42;
    font-size:24px;
}

.active-stage-header span{
    font-size:14px;
    font-weight:800;
    color:#0b4fae;
}

/* HISTORY */
.history-item{
    margin-bottom:12px;
    padding:14px;
    border-radius:14px;
    background:rgba(255,255,255,.62);
    border:1px solid rgba(11,79,174,.10);
}

.history-item b{
    color:#061a42;
}

.history-item p{
    margin:7px 0;
    color:#475569;
    line-height:1.5;
}

.history-item small{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-size:12px;
}

/* NOTIFIKASI */
.notif-count{
    padding:6px 12px;
    border-radius:999px;
    background:#fee2e2;
    color:#b91c1c;
    font-size:12px;
    font-weight:800;
}

.notif-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:10px;
    padding:13px;
    border-radius:14px;
    background:rgba(255,255,255,.62);
    border:1px solid rgba(11,79,174,.10);
}

.notif-new{
    background:#fff7d6;
    border-color:#fde68a;
}

.notif-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    background:#0b67ff;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
}

.notif-item p{
    margin:0 0 6px;
    color:#061a42;
    font-weight:700;
    line-height:1.5;
}

.notif-item small{
    color:#64748b;
    font-size:12px;
}

/* PROFIL */
.profile-summary{
    text-align:center;
    padding:18px 0 24px;
}

.profile-avatar-large{
    width:92px;
    height:92px;
    margin:0 auto 14px;
    border-radius:50%;
    background:linear-gradient(135deg,#0b67ff,#00479d);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    font-weight:800;
}

.profile-summary h3{
    margin:0 0 6px;
    color:#061a42;
}

.profile-summary p{
    margin:0;
    color:#64748b;
}

/* LOG BIMBINGAN */
.log-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:18px;
}

.log-item{
    display:flex;
    gap:16px;
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.65);
    border:1px solid rgba(11,79,174,.10);
}

.log-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    flex-shrink:0;
}

.log-approved .log-icon{
    background:#16a34a;
}

.log-revisi .log-icon{
    background:#f59e0b;
}

.log-review .log-icon{
    background:#0b67ff;
}

.log-default .log-icon{
    background:#64748b;
}

.log-content{
    flex:1;
}

.log-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.log-head h3{
    margin:0;
    color:#061a42;
    font-size:17px;
}

.log-head span{
    color:#64748b;
    font-size:12px;
    white-space:nowrap;
}

.log-content b{
    display:block;
    margin-bottom:10px;
    color:#0b4fae;
}

.log-note{
    margin:10px 0;
    padding:12px;
    border-radius:12px;
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.log-note strong{
    color:#c2410c;
}

.log-note p{
    margin:6px 0 0;
    color:#7c2d12;
    line-height:1.5;
}

.log-content small{
    display:block;
    margin-top:10px;
    color:#64748b;
}

/* EXTRA */
.usid-status{
    display:flex;
    align-items:center;
    gap:14px;
    margin:16px 0;
}

.usid-status i{
    width:48px;
    height:48px;
    border-radius:14px;
    background:var(--green);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.usid-status h3{
    margin:0;
    color:var(--green);
    font-size:24px;
}

.bar-row{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:12px;
    margin:12px 0;
}

.bar{
    height:10px;
    border-radius:999px;
    background:#e8f1fb;
    overflow:hidden;
}

.bar div{
    height:100%;
    background:var(--blue);
}

.chat-box{
    padding:14px;
    border-radius:16px;
    background:rgba(243,248,255,.72);
}

.chat-item{
    margin-bottom:10px;
    padding:12px;
    border-radius:13px;
}

.chat-item.mentor{
    background:#e9f2ff;
    border-left:4px solid var(--blue);
}

.chat-item.student{
    background:#fff8d9;
    border-left:4px solid var(--gold);
}

/* RESPONSIVE */
@media(max-width:1100px){
    .kpi-row,
    .three-column{
        grid-template-columns:1fr 1fr;
    }

    .main-grid,
    .artikel-layout,
    .bimbingan-timeline-layout{
        grid-template-columns:1fr;
    }

    .tahapan-wrapper{
        grid-template-columns:1fr;
    }

    .timeline-left::before{
        left:28px;
    }
}

@media(max-width:850px){
    .dashboard-app{
        display:block;
    }

    .sidebar{
        position:relative;
        top:0;
        bottom:auto;
        left:0;
        width:auto;
        height:auto;
        margin:14px;
    }

    .dashboard-main{
        width:100%;
        margin-left:0;
        padding:14px;
    }

    .kpi-row,
    .three-column{
        grid-template-columns:1fr;
    }

    .topbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .login-container{
        grid-template-columns:1fr;
        padding:14px;
    }

    .login-left{
        display:none;
    }

    .log-item,
    .log-head{
        flex-direction:column;
    }
}
.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:20px;
}

.info-card{
    background:#fff;
    border-radius:20px;
    padding:24px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    border:1px solid #e5edf8;
}

.info-card h3{
    margin:0 0 20px;
    color:#0d347c;
    font-size:22px;
    font-weight:700;
}

.info-item{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #edf2f9;
}

.info-item:last-child{
    border-bottom:none;
}

.info-label{
    font-weight:600;
    color:#0d347c;
}

.info-value{
    color:#2d3d5f;
    text-align:right;
}

.article-title{
    background:#f8fbff;
    border:1px solid #d9e8ff;
    border-radius:12px;
    padding:15px;
    font-weight:600;
    color:#0d347c;
    margin-bottom:15px;
}
.info-two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.info-modern-card{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(11,79,174,.12);
    border-radius:24px;
    padding:26px;
    box-shadow:0 12px 30px rgba(16,61,120,.10);
}

.info-modern-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(11,79,174,.12);
}

.info-modern-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    background:linear-gradient(135deg,#0b67ff,#00479d);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.info-modern-title h2{
    margin:0;
    font-size:24px;
    color:#062c75;
}

.info-modern-list{
    display:flex;
    flex-direction:column;
}

.info-modern-row{
    display:grid;
    grid-template-columns:170px 20px 1fr;
    align-items:center;
    gap:8px;
    padding:15px 0;
    border-bottom:1px solid rgba(11,79,174,.10);
}

.info-modern-row:last-child{
    border-bottom:none;
}

.info-label{
    font-weight:800;
    color:#062c75;
}

.info-separator{
    color:#062c75;
    font-weight:800;
    text-align:center;
}

.info-value{
    color:#061a42;
    line-height:1.45;
}

.status-badge-inline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    background:#fff4cc;
    color:#a76d00;
    font-weight:800;
    font-size:13px;
}

@media(max-width:1100px){
    .info-two-column{
        grid-template-columns:1fr;
    }
}
/* INFO CARD MODERN */
.info-two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:18px;
}

.info-modern-card{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(11,79,174,.12);
    border-radius:24px;
    padding:24px;
    box-shadow:0 12px 30px rgba(16,61,120,.10);
}

.info-modern-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(11,79,174,.12);
}

.info-modern-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    background:linear-gradient(135deg,#0b67ff,#00479d);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.info-modern-title h2{
    margin:0;
    font-size:24px;
    color:#062c75;
}

.info-modern-row{
    display:grid;
    grid-template-columns:170px 16px 1fr;
    align-items:start;
    gap:8px;
    padding:13px 0;
    border-bottom:1px solid rgba(11,79,174,.10);
}

.info-modern-row:last-child{
    border-bottom:none;
}

.info-label{
    font-weight:800;
    color:#062c75;
}

.info-separator{
    font-weight:800;
    color:#062c75;
    text-align:center;
}

.info-value{
    color:#061a42;
    line-height:1.45;
}

.status-badge-inline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    background:#fff4cc;
    color:#a76d00;
    font-weight:800;
    font-size:13px;
}

@media(max-width:1100px){
    .info-two-column{
        grid-template-columns:1fr;
    }
}
.review-card{
    max-width:900px;
}

.review-info{
    margin-bottom:20px;
}

.review-row{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid #edf2f7;
}

.review-row b{
    color:#0b347a;
}

.pdf-box{
    margin:20px 0;
}

.btn-pdf{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#0b67ff;
    color:white;
    text-decoration:none;
    padding:12px 18px;
    border-radius:12px;
    font-weight:600;
}

.review-actions{
    margin-top:20px;
    display:flex;
    gap:12px;
}

.btn-danger{
    background:#dc2626;
    color:white;
}

.btn-warning{
    background:#f59e0b;
    color:white;
}

.btn-success{
    background:#16a34a;
    color:white;
}
.pdf-action-box{
    margin:22px 0;
}

.btn-pdf-view{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    text-decoration:none;
    background:#fff;
    border:2px solid #e53935;
    border-radius:16px;
    padding:16px 20px;
    transition:.25s;
}

.btn-pdf-view:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(229,57,53,.15);
}

.btn-pdf-view .fa-file-pdf{
    font-size:34px;
    color:#e53935;
}

.pdf-btn-text{
    flex:1;
}

.pdf-btn-text span{
    display:block;
    font-size:16px;
    font-weight:700;
    color:#1e3a8a;
}

.pdf-btn-text small{
    display:block;
    margin-top:4px;
    color:#64748b;
}

.btn-pdf-view .fa-arrow-up-right-from-square{
    color:#1e3a8a;
    font-size:18px;
}
.table-toolbar{
    margin-bottom:20px;
}

.search-form{
    display:flex;
    align-items:center;
    gap:12px;
}

.search-box{
    flex:1;
    position:relative;
}

.search-box i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#64748b;
}

.search-box input{
    width:100%;
    height:50px;
    padding:0 16px 0 46px;
    border:1px solid #dbe3ef;
    border-radius:14px;
    background:#fff;
    font-size:14px;
}

.btn-search{
    width:42px;
    height:42px;
    border:none;
    border-radius:10px;
    background:#0b67ff;
    color:white;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.btn-search:hover{
    background:#0957d9;
}

.btn-reset{
    height:50px;
    min-width:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#eef2f7;
    color:#334155;
    text-decoration:none;
    font-weight:600;
}

@media(max-width:768px){

    .search-form{
        flex-direction:column;
    }

    .search-box,
    .btn-search,
    .btn-reset{
        width:100%;
    }
}
.article-header-card{
    margin-bottom:24px;
}

.article-header-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.article-header-content h2{
    margin:0 0 10px;
    color:#0b347a;
    font-size:24px;
}

.article-meta{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.article-meta span{
    display:flex;
    align-items:center;
    gap:8px;
    color:#475569;
    font-size:14px;
}

@media(max-width:768px){

    .article-header-content{
        flex-direction:column;
        align-items:flex-start;
    }

}
.btn-perbaiki-judul{
    display:flex;
    align-items:center;
    gap:16px;

    width:100%;

    margin-top:18px;
    padding:18px;

    border-radius:18px;

    text-decoration:none;

    background:#fff4e5;
    border:2px solid #f59e0b;

    color:#b45309;

    transition:.25s;
}

.btn-perbaiki-judul:hover{
    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(245,158,11,.18);
}

.btn-perbaiki-judul i{
    font-size:28px;
}

.btn-perbaiki-judul span{
    display:block;
    font-size:18px;
    font-weight:700;
}

.btn-perbaiki-judul small{
    display:block;
    margin-top:4px;
    color:#92400e;
}
/* =====================================================
   SIBIMA - BIMBINGAN TIMELINE & REVIEW UI
===================================================== */

.bimbingan-timeline-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:24px;
    align-items:start;
}

.timeline-left{
    position:sticky;
    top:110px;
}

.timeline-step{
    display:flex;
    gap:14px;
    padding:14px 12px;
    border-left:3px solid #e5e7eb;
    margin-bottom:10px;
    border-radius:14px;
    background:#fff;
    transition:.25s;
}

.timeline-step.active-step{
    background:#eef6ff;
    border-left-color:#0b67ff;
    box-shadow:0 10px 24px rgba(11,103,255,.12);
}

.timeline-point{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1f5f9;
    color:#64748b;
    flex-shrink:0;
}

.timeline-step.approved .timeline-point{
    background:#dcfce7;
    color:#16a34a;
}

.timeline-step.review .timeline-point{
    background:#fef3c7;
    color:#d97706;
}

.timeline-step.revisi .timeline-point{
    background:#fee2e2;
    color:#dc2626;
}

.timeline-step.locked .timeline-point{
    background:#e5e7eb;
    color:#6b7280;
}

.timeline-step.open .timeline-point{
    background:#e0f2fe;
    color:#0284c7;
}

.timeline-info h3{
    margin:0;
    font-size:13px;
    color:#64748b;
}

.timeline-info p{
    margin:3px 0 6px;
    font-weight:700;
    color:#0f172a;
}

.timeline-info span{
    font-size:12px;
    color:#64748b;
}

.active-stage-card{
    background:#fff;
    border:1px solid #e5edf7;
    border-radius:22px;
    padding:24px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.active-stage-header{
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:22px;
}

.active-stage-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0b67ff,#1e90ff);
    color:white;
    font-size:24px;
}

.active-stage-header h2{
    margin:0 0 6px;
    color:#0b347a;
    font-size:22px;
}

.active-stage-header span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#64748b;
}

.judul-auto-box{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:16px;
    margin-bottom:18px;
}

.judul-auto-box small{
    display:block;
    color:#64748b;
    margin-bottom:6px;
}

.judul-auto-box p{
    margin:0;
    font-weight:700;
    color:#0f172a;
    line-height:1.5;
}

.approval-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin:18px 0;
}

.approval-item{
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:14px;
    background:#f8fafc;
}

.approval-item b{
    display:block;
    font-size:13px;
    color:#475569;
    margin-bottom:6px;
}

.approval-item span{
    display:inline-flex;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:#e5e7eb;
    color:#475569;
}

.approval-item small{
    display:block;
    margin-top:8px;
    color:#64748b;
    line-height:1.4;
}

.approval-item.approved,
.approval-item.approve{
    background:#f0fdf4;
    border-color:#bbf7d0;
}

.approval-item.approved span,
.approval-item.approve span{
    background:#dcfce7;
    color:#15803d;
}

.approval-item.revisi{
    background:#fff7ed;
    border-color:#fed7aa;
}

.approval-item.revisi span{
    background:#ffedd5;
    color:#c2410c;
}

.approval-item.menunggu,
.approval-item.submitted{
    background:#f8fafc;
    border-color:#e2e8f0;
}

.approval-item.menunggu span,
.approval-item.submitted span{
    background:#e0f2fe;
    color:#0369a1;
}

.catatan-box{
    margin-top:18px;
    padding:16px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.catatan-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:#0b347a;
    margin-bottom:8px;
}

.catatan-box p{
    margin:0;
    color:#334155;
    line-height:1.6;
}

.approval-mini{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    border-radius:16px;
    margin:16px 0;
    font-size:14px;
}

.approval-mini.waiting{
    background:#fff7ed;
    color:#9a3412;
    border:1px solid #fed7aa;
}

.approval-mini.approved{
    background:#f0fdf4;
    color:#166534;
    border:1px solid #bbf7d0;
}

.approval-mini.locked{
    background:#f1f5f9;
    color:#475569;
    border:1px solid #e2e8f0;
}

.form-review,
.form-tahap{
    margin-top:22px;
}

.form-review textarea,
.form-tahap textarea{
    width:100%;
    min-height:110px;
    resize:vertical;
    border:1px solid #dbe3ef;
    border-radius:14px;
    padding:14px;
    font-family:inherit;
    font-size:14px;
    background:#fff;
}

.form-review textarea:focus,
.form-tahap textarea:focus{
    outline:none;
    border-color:#0b67ff;
    box-shadow:0 0 0 4px rgba(11,103,255,.08);
}

.review-actions{
    display:flex;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
}

.btn-approve,
.btn-revisi{
    border:none;
    border-radius:14px;
    padding:12px 18px;
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.btn-approve{
    background:#16a34a;
    color:white;
}

.btn-revisi{
    background:#f97316;
    color:white;
}

.btn-approve:hover,
.btn-revisi:hover{
    opacity:.9;
}

.table-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:12px;
    background:#0b67ff;
    color:white;
    text-decoration:none;
    font-weight:600;
    border:none;
}

.table-btn:hover{
    background:#0957d9;
}

.btn-disabled{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    border-radius:14px;
    border:none;
    background:#e5e7eb;
    color:#64748b;
    font-weight:700;
    cursor:not-allowed;
}

.success{
    background:#ecfdf5;
    border:1px solid #bbf7d0;
    color:#166534;
    padding:14px 16px;
    border-radius:16px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:10px;
}

.alert{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#991b1b;
    padding:14px 16px;
    border-radius:16px;
    margin-bottom:18px;
}

.article-header-card{
    position:sticky;
    top:12px;
    z-index:30;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
}

.article-header-content{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
}

.article-header-content h2{
    margin:0 0 10px;
    color:#0b347a;
}

.article-meta{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.article-meta span{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:#475569;
}

.status-badge-inline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:#eef6ff;
    color:#0b67ff;
    font-weight:700;
    white-space:nowrap;
}

/* RESPONSIVE */
@media(max-width:900px){

    .bimbingan-timeline-layout{
        grid-template-columns:1fr;
    }

    .timeline-left{
        position:relative;
        top:0;
    }

    .approval-grid{
        grid-template-columns:1fr;
    }

    .article-header-content{
        flex-direction:column;
        align-items:flex-start;
    }

    .status-badge-inline{
        white-space:normal;
    }
}