.km-profile-page{

    padding:16px;

}

/* HEADER */

.km-profile-header{

    background:#fff;

    border-radius:20px;

    padding:24px;

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

}

/* AVATAR */

.km-profile-avatar{

    width:82px;

    height:82px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    font-weight:800;

}

/* NAME */

.km-profile-name{

    font-size:22px;

    font-weight:800;

    color:#0f172a;

}

/* EMAIL */

.km-profile-email{

    color:#64748b;

    margin-top:4px;

    font-size:14px;

}

/* BADGE */

.km-profile-badge{

    display:inline-block;

    margin-top:10px;

    padding:6px 12px;

    border-radius:30px;

    background:#eff6ff;

    color:#2563eb;

    font-size:11px;

    font-weight:700;

}

/* STATS */

.km-profile-stats{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:18px;

}

.km-profile-stat{

    background:#fff;

    border-radius:18px;

    padding:18px;

}

.km-profile-stat small{

    display:block;

    color:#64748b;

    margin-bottom:8px;

}

.km-profile-stat strong{

    font-size:22px;

}

.km-profile-stat .aktif{

    color:#16a34a;

}

.km-profile-stat .nonaktif{

    color:#dc2626;

}

/* CARD */

.km-profile-card{

    background:#fff;

    border-radius:20px;

    padding:22px;

    margin-bottom:18px;

}

/* SECTION */

.km-profile-section-title{

    font-size:15px;

    font-weight:800;

    margin-bottom:18px;

}

/* GRID */

.km-profile-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.km-profile-item label{

    display:block;

    font-size:12px;

    color:#64748b;

    margin-bottom:6px;

}

.km-profile-item div{

    font-size:14px;

    color:#0f172a;

    font-weight:600;

    line-height:1.7;

}

/* QR */

.km-profile-qr{

    text-align:center;

}

.km-profile-qr img{

    width:180px;

    border-radius:16px;

}

/* BTN */

.km-profile-edit-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    padding:16px;

    border-radius:16px;

    font-weight:700;

}

/* MOBILE */

@media(max-width:768px){

    .km-profile-grid{

        grid-template-columns:1fr;

    }

}

.km-edit-page{

    padding:16px;

}

.km-edit-card{

    background:#fff;

    border-radius:20px;

    padding:24px;

}

.km-edit-title{

    font-size:22px;

    font-weight:800;

    margin-bottom:24px;

}

.km-edit-success{

    background:#dcfce7;

    color:#166534;

    padding:14px;

    border-radius:14px;

    margin-bottom:18px;

}

.km-edit-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.km-edit-group{

    margin-bottom:18px;

}

.km-edit-group label{

    display:block;

    font-size:13px;

    font-weight:700;

    margin-bottom:8px;

    color:#475569;

}

.km-edit-group input,
.km-edit-group textarea{

    width:100%;

    border:1px solid #e2e8f0;

    border-radius:14px;

    padding:14px;

    font-size:14px;

    box-sizing:border-box;

}

.km-edit-group textarea{

    resize:vertical;

}

.km-edit-btn{

    width:100%;

    border:none;

    background:#2563eb;

    color:#fff;

    border-radius:16px;

    padding:16px;

    font-weight:700;

    cursor:pointer;

}

@media(max-width:768px){

    .km-edit-grid{

        grid-template-columns:1fr;

    }

}

.km-edit-page{

    padding:16px;

}

.km-edit-card{

    background:#fff;

    border-radius:20px;

    padding:24px;

}

.km-edit-title{

    font-size:22px;

    font-weight:800;

    margin-bottom:24px;

}

.km-edit-success{

    background:#dcfce7;

    color:#166534;

    padding:14px;

    border-radius:14px;

    margin-bottom:18px;

}

.km-edit-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.km-edit-group{

    margin-bottom:18px;

}

.km-edit-group label{

    display:block;

    font-size:13px;

    font-weight:700;

    margin-bottom:8px;

    color:#475569;

}

.km-edit-group input,
.km-edit-group textarea{

    width:100%;

    border:1px solid #e2e8f0;

    border-radius:14px;

    padding:14px;

    font-size:14px;

    box-sizing:border-box;

}

.km-edit-group textarea{

    resize:vertical;

}

.km-edit-btn{

    width:100%;

    border:none;

    background:#2563eb;

    color:#fff;

    border-radius:16px;

    padding:16px;

    font-weight:700;

    cursor:pointer;

}

@media(max-width:768px){

    .km-edit-grid{

        grid-template-columns:1fr;

    }

}

/* =========================
   TOPBAR
========================= */

.km-topbar{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:14px 18px;

    background:#e4f4f0;

    position:sticky;

    top:0;

    z-index:100;

    border-bottom:
        1px solid #eef2f7;

}

/* =========================
   LOGO
========================= */

.km-topbar-logo{

    flex:1;

    min-width:0;

    display:flex;

    align-items:center;

    overflow:hidden;

}

/* logo image */

.km-topbar-logo img{

    width:210px;

    max-width:100%;

    height:60px;

    object-fit:contain;

    object-position:left center;

    display:block;

}

/* =========================
   USER
========================= */

.km-topbar-user{

    flex-shrink:0;

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none !important;

    color:#0f172a;

    min-width:0;

}

/* info */

.km-topbar-userinfo{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    min-width:0;

}

/* name */

.km-topbar-name{

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:140px;

}

/* =========================
   AVATAR
========================= */

.km-topbar-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:800;

    flex-shrink:0;

    box-shadow:
        0 8px 20px
        rgba(37,99,235,.22);

}

/* =========================
   MOBILE
========================= */

@media(max-width:640px){

    .km-topbar{

        padding:12px 14px;

    }

    .km-topbar-logo img{

        width:190px;

        height:54px;

    }

    .km-topbar-name{

        max-width:90px;

        font-size:14px;

    }

    .km-topbar-avatar{

        width:38px;
        height:38px;

        font-size:15px;

    }

}

/* HOVER */

.km-topbar-user:hover
.km-topbar-avatar{

    transform:scale(1.06);

}

/* MOBILE */

@media(max-width:768px){

    .km-topbar{

        padding:0 14px;

    }

    .km-topbar-logo img{

        height:34px;

    }

    .km-topbar-avatar{

        width:38px;

        height:38px;

        font-size:14px;

    }

    .km-topbar-name{

        max-width:110px;
        font-size:14px;
        color: #225be4;

    }

}