/* =========================================================
   KSP SEJAHTERA TRI WIJAYA
   GLOBAL LAYOUT FINAL
========================================================= */

:root {
    --ksp-sidebar-width: 260px;
    --ksp-topbar-height: 78px;

    --ksp-navy: #07111f;
    --ksp-navy2: #0d1929;

    --ksp-gold: #d9a441;
    --ksp-gold-light: #f1cf84;

    --ksp-bg: #f4f6fa;
    --ksp-white: #ffffff;

    --ksp-text: #172033;
    --ksp-muted: #6b7280;
    --ksp-border: #e4e8ef;
}


/* =========================================================
   RESET PENTING
========================================================= */

html {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0 !important;

    width: 100% !important;
    min-height: 100vh !important;

    background: var(--ksp-bg) !important;

    color: var(--ksp-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif !important;

    overflow-x: hidden !important;
}

* {
    box-sizing: border-box;
}


/* =========================================================
   APP / MAIN
========================================================= */

.app {
    min-height: 100vh !important;

    display: grid !important;

    grid-template-columns:
        var(--ksp-sidebar-width)
        minmax(0, 1fr) !important;
}

.main {
    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   SIDEBAR GLOBAL
========================================================= */

.sidebar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: var(--ksp-sidebar-width) !important;
    min-width: var(--ksp-sidebar-width) !important;
    max-width: var(--ksp-sidebar-width) !important;

    height: 100vh !important;

    padding: 20px 16px !important;

    margin: 0 !important;

    background:
        linear-gradient(
            180deg,
            #050c17 0%,
            #091525 55%,
            #07111f 100%
        ) !important;

    color: #ffffff !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 100 !important;

    font-size: 13px !important;
}


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

.sidebar .brand {
    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 8px 7px 22px !important;

    margin: 0 0 8px !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.08) !important;
}


.sidebar .brand-logo {
    width: 62px !important;
    height: 62px !important;

    min-width: 62px !important;

    flex: 0 0 62px !important;

    border-radius: 16px !important;

    background: #ffffff !important;

    border:
        2px solid
        rgba(217,164,65,.50) !important;

    overflow: hidden !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


.sidebar .brand-logo img {
    width: 100% !important;
    height: 100% !important;

    padding: 4px !important;

    object-fit: contain !important;

    background: #ffffff !important;
}


.sidebar .brand-text {
    min-width: 0 !important;
}


.sidebar .brand-text strong {
    display: block !important;

    color: var(--ksp-gold-light) !important;

    font-size: 16px !important;

    font-weight: 800 !important;

    line-height: 1.2 !important;

    letter-spacing: .3px !important;
}


.sidebar .brand-text small {
    display: block !important;

    margin-top: 4px !important;

    color: #9cabc0 !important;

    font-size: 10px !important;

    letter-spacing: .8px !important;
}


/* =========================================================
   MENU TITLE
========================================================= */

.sidebar .menu-title {
    margin: 15px 10px 7px !important;

    color: #74849b !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    text-transform: uppercase !important;

    letter-spacing: 1.3px !important;
}


/* =========================================================
   SEMUA JENIS NAV/MENU
========================================================= */

.sidebar nav,
.sidebar .menu,
.sidebar .menu-sidebar {
    display: flex !important;

    flex-direction: column !important;

    gap: 5px !important;

    width: 100% !important;
}


/* =========================================================
   MENU LINK
========================================================= */

.sidebar nav > a,
.sidebar .menu > a,
.sidebar .menu-sidebar > a {
    width: 100% !important;

    min-height: 44px !important;

    padding: 10px 12px !important;

    margin: 0 !important;

    border-radius: 10px !important;

    color: #dbe2ec !important;

    text-decoration: none !important;

    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    white-space: normal !important;
}


.sidebar nav > a:hover,
.sidebar .menu > a:hover,
.sidebar .menu-sidebar > a:hover {
    background:
        rgba(255,255,255,.07) !important;

    color: #ffffff !important;
}


/* =========================================================
   MENU AKTIF
========================================================= */

.sidebar a.aktif,
.sidebar a.active {
    background:
        linear-gradient(
            90deg,
            #c78b20,
            #e7b551
        ) !important;

    color: #101010 !important;

    box-shadow:
        0 7px 16px
        rgba(217,164,65,.22) !important;
}


/* =========================================================
   IKON MENU
========================================================= */

.sidebar .menu-icon,
.sidebar .ico {
    width: 26px !important;
    height: 26px !important;

    min-width: 26px !important;

    flex: 0 0 26px !important;

    border-radius: 7px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background:
        rgba(255,255,255,.07) !important;

    font-size: 15px !important;
}


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

.topbar {
    position: sticky !important;

    top: 0 !important;

    z-index: 80 !important;

    width: 100% !important;

    min-height: var(--ksp-topbar-height) !important;
    height: var(--ksp-topbar-height) !important;

    padding: 13px 25px !important;

    margin: 0 !important;

    background:
        rgba(255,255,255,.98) !important;

    border-bottom:
        1px solid
        var(--ksp-border) !important;

    display: flex !important;

    align-items: center !important;

    gap: 16px !important;

    overflow: visible !important;
}


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

.topbar h3,
.topbar .topbar-title {
    margin: 0 !important;

    color: var(--ksp-navy) !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* =========================================================
   SEARCH
========================================================= */

.topbar .pencarian-global,
.topbar .search-global,
.topbar .search {
    position: relative !important;

    width: 310px !important;
    max-width: 310px !important;

    margin: 0 !important;

    flex: 0 1 310px !important;
}


.topbar .pencarian-global input,
.topbar .search-global input,
.topbar .search input {
    width: 100% !important;

    height: 44px !important;

    padding: 0 16px 0 43px !important;

    margin: 0 !important;

    border:
        1px solid
        var(--ksp-border) !important;

    border-radius: 11px !important;

    background: #f9fafc !important;

    outline: none !important;

    color: var(--ksp-text) !important;

    font-size: 14px !important;
}


/* =========================================================
   TOPBAR GLOBAL HARUS DI KANAN
========================================================= */

.topbar > .topbar-kanan-global {
    margin-left: auto !important;
}


/* =========================================================
   HILANGKAN PROFIL / LONCENG VERSI LAMA
   YANG MENYEBABKAN ADMIN 1 DOBEL
========================================================= */

.topbar > .admin,
.topbar > .profile,
.topbar > .topbar-right,
.topbar > .topbar-kanan {
    display: none !important;
}


/* tetapi komponen GLOBAL jangan disembunyikan */

.topbar > .topbar-kanan-global {
    display: flex !important;
}


/* =========================================================
   CONTENT
========================================================= */

.content {
    width: 100% !important;

    max-width: 1800px !important;

    padding: 25px 27px 45px !important;

    margin: 0 auto !important;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.page-header {
    width: 100% !important;

    display: flex !important;

    justify-content: space-between !important;

    align-items: flex-start !important;

    gap: 20px !important;

    margin-bottom: 22px !important;
}


.page-header h1 {
    margin: 0 0 7px !important;

    color: var(--ksp-navy) !important;

    font-size: 31px !important;

    line-height: 1.15 !important;
}


.page-header p {
    margin: 0 !important;

    color: var(--ksp-muted) !important;

    font-size: 14px !important;
}


/* =========================================================
   CARDS
========================================================= */

.card,
.panel,
.stat,
.summary-box {
    box-sizing: border-box !important;
}


/* =========================================================
   TOMBOL DASHBOARD
========================================================= */

.btn-dashboard {
    flex-shrink: 0 !important;
}


/* =========================================================
   FIX HALAMAN YANG TERLIHAT SEPERTI ZOOM
========================================================= */

.main,
.content,
.page,
.page-content,
.content-area {
    transform: none !important;

    zoom: 1 !important;

    left: auto !important;
}


/* =========================================================
   TABLE
========================================================= */

.table-wrap {
    width: 100% !important;

    overflow-x: auto !important;
}


/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 1100px) {

    :root {
        --ksp-sidebar-width: 235px;
    }

    .topbar {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


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

@media (max-width: 820px) {

    .app {
        display: block !important;
    }

    .main {
        width: 100% !important;

        margin: 0 !important;
    }

    .sidebar {
        width: 270px !important;

        min-width: 270px !important;
        max-width: 270px !important;

        transform:
            translateX(-100%) !important;

        transition:
            transform .25s ease !important;
    }

    body.sidebar-open .sidebar {
        transform:
            translateX(0) !important;
    }

    .topbar {
        width: 100% !important;

        min-height: 70px !important;
        height: 70px !important;

        padding: 10px 13px !important;

        gap: 8px !important;
    }

    .topbar .hamburger,
    .hamburger,
    .hamb {
        display: flex !important;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;

        align-items: center !important;
        justify-content: center !important;
    }

    .topbar .pencarian-global,
    .topbar .search-global,
    .topbar .search {
        min-width: 0 !important;

        width: auto !important;

        flex: 1 1 auto !important;
    }

    .topbar .pencarian-global input,
    .topbar .search-global input,
    .topbar .search input {
        height: 44px !important;

        font-size: 13px !important;
    }

    .topbar h3,
    .topbar .topbar-title {
        font-size: 15px !important;
    }

    .content {
        width: 100% !important;

        padding:
            18px 14px 35px !important;
    }

    .page-header {
        flex-direction: column !important;
    }

    .page-header h1 {
        font-size: 27px !important;
    }
}


/* =========================================================
   HP KECIL
========================================================= */

@media (max-width: 520px) {

    .topbar h3,
    .topbar .topbar-title {
        display: none !important;
    }

    .content {
        padding:
            16px 12px 30px !important;
    }

    .page-header h1 {
        font-size: 24px !important;
    }
}

/* =========================================================
   PATCH FINAL SIDEBAR MOBILE
========================================================= */
.sidebar {
    transition: transform .24s ease !important;
}

@media (max-width: 960px) {
    .app {
        display: block !important;
    }

    .sidebar {
        transform: translateX(-100%) !important;
        width: min(300px, 86vw) !important;
        min-width: 0 !important;
        max-width: min(300px, 86vw) !important;
        z-index: 1000 !important;
    }

    .sidebar.show {
        transform: translateX(0) !important;
    }

    .main {
        width: 100% !important;
        margin-left: 0 !important;
        grid-column: auto !important;
    }

    .hamburger,
    .dk-hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1001 !important;
    }
}

body.sidebar-open,
body.dk-sidebar-open {
    overflow: hidden !important;
}
/* ===== FINAL GLOBAL INTERACTION ===== */
.global-hamburger{width:42px;height:42px;border:1px solid var(--ksp-border);border-radius:10px;background:#fff;color:var(--ksp-navy);font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:10px}
.global-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(2,8,23,.45);z-index:89}
.notification-item-global{display:block;padding:12px 14px;border-bottom:1px solid #eef1f5;text-decoration:none;color:#172033}.notification-item-global:hover{background:#f8fafc}.notification-item-global strong{display:block;font-size:11px}.notification-item-global small{display:block;color:#6b7280;margin-top:4px;font-size:10px}.notification-empty-global{padding:22px 14px;text-align:center;color:#6b7280;font-size:11px}
@media(max-width:960px){.app{display:block!important}.main{grid-column:auto!important;width:100%!important}.sidebar{transform:translateX(-105%)!important;transition:transform .22s ease!important;z-index:1000!important}.sidebar-open .sidebar{transform:translateX(0)!important}.sidebar-open .global-sidebar-overlay{display:block}.topbar{padding-left:12px!important}.content{padding-left:14px!important;padding-right:14px!important}}
@media(min-width:961px){body.sidebar-open .sidebar{transform:translateX(-105%)!important}body.sidebar-open .main{grid-column:1 / -1!important;margin-left:0!important}.global-hamburger{display:inline-flex}}
/* ===== TOPBAR NOTIFIKASI & PROFIL FINAL ===== */
.topbar-kanan-global{display:flex!important;align-items:center!important;gap:10px!important;margin-left:auto!important}.notification-wrap-global,.profile-wrap-global{position:relative!important}.notification-button-global{width:46px!important;height:46px!important;min-width:46px!important;border:1px solid var(--ksp-border)!important;border-radius:12px!important;background:#fff!important;cursor:pointer!important;font-size:18px!important;position:relative!important}.notification-badge-global{position:absolute!important;right:-5px!important;top:-6px!important;min-width:19px!important;height:19px!important;padding:0 5px!important;border-radius:999px!important;background:#d64545!important;color:#fff!important;font-size:9px!important;font-weight:900!important;display:flex!important;align-items:center!important;justify-content:center!important}.notification-panel-global{display:none!important;position:absolute!important;right:0!important;top:55px!important;width:355px!important;max-width:calc(100vw - 24px)!important;background:#fff!important;border:1px solid var(--ksp-border)!important;border-radius:15px!important;box-shadow:0 18px 50px rgba(15,23,42,.18)!important;overflow:hidden!important;z-index:99999!important}.notification-panel-global.show{display:block!important}.notification-header-global{padding:14px 15px!important;border-bottom:1px solid var(--ksp-border)!important;display:flex!important;justify-content:space-between!important;gap:10px!important}.notification-header-global strong{font-size:12px!important}.notification-header-global small{color:var(--ksp-muted)!important;font-size:9px!important}.notification-body-global{max-height:430px!important;overflow:auto!important}.profile-button-global{min-height:48px!important;border:0!important;border-radius:12px!important;background:transparent!important;display:flex!important;align-items:center!important;gap:9px!important;cursor:pointer!important}.avatar-global,.profile-panel-avatar-global{width:44px!important;height:44px!important;min-width:44px!important;border-radius:50%!important;background:var(--ksp-navy)!important;color:var(--ksp-gold-light)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:900!important}.profile-text-global{text-align:left!important}.profile-text-global strong{display:block!important;color:var(--ksp-navy)!important;font-size:12px!important}.profile-text-global small{display:block!important;color:var(--ksp-muted)!important;font-size:9px!important;margin-top:3px!important}.profile-arrow-global{font-size:9px!important;color:#7b8491!important}.profile-panel-global{display:none!important;position:absolute!important;right:0!important;top:55px!important;width:255px!important;background:#fff!important;border:1px solid var(--ksp-border)!important;border-radius:15px!important;box-shadow:0 18px 50px rgba(15,23,42,.18)!important;overflow:hidden!important;z-index:99999!important}.profile-panel-global.show{display:block!important}.profile-panel-header-global{display:flex!important;gap:10px!important;align-items:center!important;padding:14px!important;border-bottom:1px solid var(--ksp-border)!important}.profile-panel-header-global strong{display:block!important;font-size:11px!important}.profile-panel-header-global small{display:block!important;font-size:9px!important;color:var(--ksp-muted)!important;margin-top:3px!important}.profile-menu-global{padding:8px!important}.profile-menu-global a{display:block!important;padding:10px 11px!important;border-radius:8px!important;text-decoration:none!important;color:var(--ksp-text)!important;font-size:10px!important;font-weight:750!important}.profile-menu-global a:hover{background:#f4f6fa!important}.profile-menu-global .logout-global{color:#c9363f!important}@media(max-width:700px){.profile-text-global,.profile-arrow-global{display:none!important}.notification-panel-global{position:fixed!important;top:70px!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important}.profile-panel-global{position:fixed!important;top:70px!important;right:10px!important;width:240px!important}}


/* =========================================================
   PATCH UJI COBA 2 - LOGIN & HAMBURGER
========================================================= */
.auth-page{min-height:100vh!important;background:linear-gradient(135deg,#06101d 0%,#0b1b2e 55%,#f4f6fa 55%,#f4f6fa 100%)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:32px!important;overflow:auto!important}
.auth-shell{width:min(1120px,100%)!important;min-height:650px!important;display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;background:#fff!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:28px!important;overflow:hidden!important;box-shadow:0 28px 80px rgba(2,8,23,.28)!important}
.auth-visual{position:relative!important;padding:48px!important;background:linear-gradient(145deg,#050d18 0%,#0b1b2f 68%,#12263d 100%)!important;color:#fff!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;min-width:0!important}
.auth-visual:after{content:"";position:absolute;right:-110px;bottom:-130px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.22),rgba(217,164,65,0) 70%);pointer-events:none}
.auth-brand{display:flex!important;align-items:center!important;gap:18px!important;position:relative!important;z-index:1!important}.auth-logo{width:92px!important;height:92px!important;object-fit:contain!important;background:#fff!important;border:2px solid #e7b551!important;border-radius:20px!important;padding:6px!important}.auth-brand-text strong{display:block!important;color:#f1cf84!important;font-size:23px!important;line-height:1.15!important;letter-spacing:.02em!important}.auth-brand-text small{display:block!important;margin-top:8px!important;color:#aeb9c8!important;font-size:11px!important;letter-spacing:.18em!important}
.auth-visual-copy{position:relative!important;z-index:1!important;max-width:560px!important}.auth-visual-copy h1{margin:0 0 16px!important;color:#fff!important;font-size:42px!important;line-height:1.08!important;letter-spacing:-.025em!important}.auth-visual-copy p{margin:0!important;color:#c9d2df!important;font-size:15px!important;line-height:1.8!important}.auth-badges{display:grid!important;gap:10px!important;margin-top:28px!important}.auth-badge{padding:12px 14px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:12px!important;background:rgba(255,255,255,.055)!important;color:#e6ebf2!important;font-size:12px!important}.auth-footnote{position:relative!important;z-index:1!important;color:#8290a2!important;font-size:11px!important}
.auth-panel{padding:54px 52px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:#fff!important}.auth-panel h2{margin:0 0 8px!important;color:#07111f!important;font-size:31px!important;letter-spacing:-.02em!important}.auth-panel>p{margin:0 0 28px!important;color:#6b7280!important;font-size:13px!important}.auth-form-group{margin-bottom:17px!important}.auth-form-group label{display:block!important;margin-bottom:8px!important;color:#273348!important;font-size:12px!important;font-weight:800!important}.auth-input-wrap{position:relative!important;display:flex!important;align-items:center!important}.auth-input{width:100%!important;min-height:48px!important;padding:11px 13px!important;border:1px solid #d9dee8!important;border-radius:11px!important;background:#fff!important;color:#111827!important;font:inherit!important;font-size:13px!important;outline:none!important;transition:.18s ease!important}.auth-input:focus{border-color:#d9a441!important;box-shadow:0 0 0 4px rgba(217,164,65,.12)!important}.auth-toggle-password{position:absolute!important;right:8px!important;border:0!important;background:#f5f6f8!important;border-radius:8px!important;padding:7px 9px!important;cursor:pointer!important;color:#344054!important;font-size:11px!important}.auth-submit{width:100%!important;min-height:50px!important;border:0!important;border-radius:11px!important;background:linear-gradient(90deg,#c88d20,#f0b94f)!important;color:#121212!important;font-weight:900!important;cursor:pointer!important;margin-top:4px!important;box-shadow:0 8px 18px rgba(201,142,33,.20)!important}.auth-submit:hover{filter:brightness(.98)!important;transform:translateY(-1px)!important}.auth-alert{margin-bottom:18px!important;padding:12px 14px!important;border-left:4px solid #dc4c55!important;border-radius:9px!important;background:#fff0f1!important;color:#8f2930!important;font-size:12px!important;line-height:1.5!important}.auth-help{margin-top:16px!important;display:flex!important;flex-wrap:wrap!important;gap:8px 14px!important;font-size:11px!important}.auth-help a{color:#8a5d0c!important;font-weight:750!important;text-decoration:none!important}.auth-help a:hover{text-decoration:underline!important}.auth-note{margin-top:20px!important;padding:12px 14px!important;border-radius:10px!important;background:#f8fafc!important;color:#667085!important;font-size:10px!important;line-height:1.6!important}
@media(max-width:860px){.auth-page{padding:14px!important;background:#f4f6fa!important}.auth-shell{grid-template-columns:1fr!important;min-height:0!important;border-radius:20px!important}.auth-visual{padding:28px!important;min-height:300px!important}.auth-logo{width:72px!important;height:72px!important}.auth-visual-copy{margin-top:45px!important}.auth-visual-copy h1{font-size:31px!important}.auth-footnote{margin-top:30px!important}.auth-panel{padding:34px 28px!important}}
@media(max-width:520px){.auth-page{padding:0!important}.auth-shell{border-radius:0!important;min-height:100vh!important}.auth-visual{min-height:250px!important;padding:24px!important}.auth-brand-text strong{font-size:18px!important}.auth-brand-text small{font-size:9px!important}.auth-visual-copy{margin-top:28px!important}.auth-visual-copy h1{font-size:26px!important}.auth-visual-copy p{font-size:12px!important}.auth-badges{display:none!important}.auth-panel{padding:30px 22px 38px!important}.auth-panel h2{font-size:26px!important}}

/* Hamburger selalu dapat dipakai untuk buka/tutup sidebar */
.topbar .hamburger,.topbar .dk-hamburger,.topbar .global-hamburger{display:inline-flex!important;align-items:center!important;justify-content:center!important;z-index:1105!important}
@media(max-width:960px){body.sidebar-open .topbar .hamburger,body.sidebar-open .topbar .dk-hamburger,body.sidebar-open .topbar .global-hamburger{position:fixed!important;top:14px!important;left:calc(min(300px,86vw) - 56px)!important;z-index:1205!important;background:#fff!important;box-shadow:0 5px 18px rgba(0,0,0,.18)!important}}
.auth-toggle{position:absolute!important;right:7px!important;top:50%!important;transform:translateY(-50%)!important;border:0!important;border-radius:8px!important;background:#f2f4f7!important;color:#344054!important;padding:7px 10px!important;font-size:10px!important;font-weight:800!important;cursor:pointer!important}.auth-options{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:center!important;margin:2px 0 14px!important;color:#7a8492!important;font-size:10px!important}.auth-options a,.auth-links a{color:#8a5d0c!important;font-weight:800!important;text-decoration:none!important}.auth-links{display:flex!important;gap:14px!important;justify-content:center!important;margin-top:17px!important;font-size:10px!important}.auth-panel>.auth-footnote{margin-top:20px!important;text-align:center!important;color:#98a2b3!important;font-size:9px!important}

/* =========================================================
   PATCH UJI 3 - HAMBURGER SPLIT SCREEN
   Tombol penutup ditempatkan di atas sidebar supaya tidak
   terjebak stacking-context topbar ketika layar sempit.
========================================================= */
.global-sidebar-close{
    display:none;
    position:fixed;
    top:14px;
    left:calc(var(--ksp-sidebar-width) - 58px);
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:11px;
    background:#ffffff;
    color:#07111f;
    font-size:23px;
    line-height:1;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5000;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}
@media(max-width:960px){
    body.sidebar-open .global-sidebar-close,
    body.dk-sidebar-open .global-sidebar-close{display:flex!important}
    body.sidebar-open .topbar .hamburger,
    body.sidebar-open .topbar .dk-hamburger,
    body.sidebar-open .topbar .global-hamburger,
    body.dk-sidebar-open .topbar .hamburger,
    body.dk-sidebar-open .topbar .dk-hamburger,
    body.dk-sidebar-open .topbar .global-hamburger{visibility:hidden!important}
}


/* ============================================================
   LOGOUT PAGE — PATCH UJI 6
============================================================ */
body.logout-page{
    min-height:100vh;
    margin:0;
    padding:32px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at top right, rgba(229,171,53,.16), transparent 34%),
        linear-gradient(135deg,#f7f9fc 0%,#eef3f8 100%);
    color:#0b1728;
}

.logout-card{
    width:min(100%,560px);
    background:#fff;
    border:1px solid #e4e9f0;
    border-radius:24px;
    padding:34px;
    text-align:center;
    box-shadow:0 22px 60px rgba(15,23,42,.14);
}

.logout-card img{
    width:150px;
    max-width:45%;
    height:auto;
    display:block;
    margin:0 auto 22px;
    border-radius:18px;
}

.logout-card h1{
    margin:0 0 12px;
    font-size:32px;
    line-height:1.15;
    color:#0b1728;
}

.logout-card p{
    margin:0 auto 26px;
    max-width:440px;
    color:#667085;
    font-size:16px;
    line-height:1.65;
}

.logout-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.logout-btn{
    min-height:50px;
    border-radius:12px;
    border:1px solid transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    font-weight:800;
    font-size:15px;
    text-decoration:none;
    cursor:pointer;
    font-family:inherit;
}

.logout-btn.secondary{
    background:#fff;
    color:#0b1728;
    border-color:#d8dee8;
}

.logout-btn.primary{
    background:#07111f;
    color:#f2bd4b;
    border-color:#07111f;
}

.logout-btn:hover{
    transform:translateY(-1px);
}

@media (max-width:560px){
    body.logout-page{padding:18px 12px;}
    .logout-card{padding:26px 20px;border-radius:20px;}
    .logout-card h1{font-size:27px;}
    .logout-actions{grid-template-columns:1fr;}
}

/* v12: item notifikasi wajib dapat diklik di seluruh area */
.notification-item-global{position:relative!important;cursor:pointer!important;pointer-events:auto!important;padding-right:72px!important}.notification-item-global *{pointer-events:none!important}.notification-action-global{position:absolute!important;right:14px!important;top:50%!important;transform:translateY(-50%)!important;font-size:9px!important;font-weight:900!important;color:#b7791f!important}