/*
|--------------------------------------------------------------------------
| KORPOLAIRUD MODERN CONTROL CENTER
|--------------------------------------------------------------------------
| UI-only design layer.
| Backend/authentication logic remains untouched.
|--------------------------------------------------------------------------
*/

:root {
    --kp-navy-950: #06111f;
    --kp-navy-900: #081a2d;
    --kp-navy-800: #0b2943;
    --kp-navy-700: #103c5e;

    --kp-blue: #1677b7;
    --kp-blue-2: #2196d2;
    --kp-cyan: #25b7d3;

    --kp-gold: #d8ad4a;
    --kp-gold-light: #f0cf79;

    --kp-white: #ffffff;
    --kp-text: #152235;
    --kp-muted: #718096;

    --kp-bg: #f4f7fa;
    --kp-border: #e4eaf0;

    --kp-success: #16855b;
    --kp-danger: #c93c4c;

    --kp-radius: 18px;
    --kp-shadow:
        0 12px 35px rgba(5, 24, 42, .08);

    --kp-shadow-lg:
        0 25px 70px rgba(5, 24, 42, .16);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--kp-text);
    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(33,150,210,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 100%,
            rgba(216,173,74,.09),
            transparent 25%
        ),
        var(--kp-bg);

    min-height: 100vh;
}

/* --------------------------------------------------------------
   TYPOGRAPHY
-------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 750;
    letter-spacing: -.025em;
}

.text-muted {
    color: var(--kp-muted) !important;
}

/* --------------------------------------------------------------
   BOOTSTRAP OVERRIDES
-------------------------------------------------------------- */

.btn {
    border-radius: 12px;
    font-weight: 700;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--kp-blue),
            var(--kp-navy-700)
        );
    border-color: transparent;
}

.btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--kp-blue-2),
            var(--kp-navy-800)
        );

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(22,119,183,.22);
}

.form-control,
.form-select {
    border: 1px solid var(--kp-border);
    border-radius: 12px;
    min-height: 48px;
    background: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kp-blue);
    box-shadow:
        0 0 0 .22rem rgba(22,119,183,.12);
}

/* --------------------------------------------------------------
   KORPOLAIRUD BRAND
-------------------------------------------------------------- */

.kp-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.kp-brand-mark {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            var(--kp-navy-700),
            var(--kp-blue)
        );

    box-shadow:
        0 10px 24px rgba(8, 45, 75, .25);

    position: relative;
    overflow: hidden;
}

.kp-brand-mark::after {
    content: "";
    position: absolute;

    width: 80px;
    height: 80px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;

    transform: translate(30px, -30px);
}

.kp-brand-title {
    font-size: 15px;
    line-height: 1.1;
    font-weight: 850;
    color: var(--kp-navy-900);
    letter-spacing: .045em;
}

.kp-brand-subtitle {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kp-gold);
}

/* --------------------------------------------------------------
   LOGIN
-------------------------------------------------------------- */

.login-page,
.auth-page {
    min-height: 100vh;

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

    padding: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(6,17,31,.98),
            rgba(8,36,61,.97)
        );
}

.login-page::before,
.auth-page::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 44px 44px;
}

.login-page::after,
.auth-page::after {
    content: "";

    position: fixed;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    right: -280px;
    bottom: -350px;

    background:
        radial-gradient(
            circle,
            rgba(37,183,211,.24),
            transparent 68%
        );

    pointer-events: none;
}

.login-container,
.auth-container {
    width: min(100%, 1040px);

    display: grid;
    grid-template-columns: 1fr 460px;

    position: relative;
    z-index: 2;

    border-radius: 26px;

    overflow: hidden;

    background: rgba(255,255,255,.97);

    box-shadow: var(--kp-shadow-lg);
}

/* Left branding panel */

.login-brand-panel,
.auth-brand-panel {
    min-height: 620px;

    padding: 52px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #fff;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(37,183,211,.20),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #06111f 0%,
            #0a2944 55%,
            #0c4264 100%
        );

    position: relative;
    overflow: hidden;
}

.login-brand-panel::before,
.auth-brand-panel::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -240px;
    bottom: -260px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.018);
}

.kp-watermark {
    position: absolute;

    right: 32px;
    bottom: 30px;

    font-size: 90px;
    font-weight: 900;

    letter-spacing: -.08em;

    color: rgba(255,255,255,.035);

    user-select: none;
}

.login-hero-title,
.auth-hero-title {
    max-width: 520px;

    margin-top: 80px;

    font-size: clamp(34px, 4vw, 58px);

    line-height: .98;

    letter-spacing: -.055em;
}

.login-hero-title span,
.auth-hero-title span {
    color: var(--kp-gold-light);
}

.login-hero-description,
.auth-hero-description {
    max-width: 500px;

    margin-top: 24px;

    color: rgba(255,255,255,.68);

    line-height: 1.7;
}

.kp-status-line {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.68);
}

.kp-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #39d98a;

    box-shadow:
        0 0 0 5px rgba(57,217,138,.10),
        0 0 16px rgba(57,217,138,.6);
}

/* Login card */

.login-card,
.auth-card {
    padding: 48px 44px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #fff;
}

.login-card-header {
    margin-bottom: 30px;
}

.login-card-title {
    font-size: 30px;
    font-weight: 800;

    color: var(--kp-navy-950);

    letter-spacing: -.04em;
}

.login-card-description {
    color: var(--kp-muted);

    line-height: 1.6;

    margin-top: 9px;
}

.login-label {
    font-size: 12px;
    font-weight: 800;

    margin-bottom: 8px;

    color: var(--kp-navy-900);

    text-transform: uppercase;
    letter-spacing: .07em;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap .form-control {
    padding-left: 44px;
}

.login-input-icon {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--kp-muted);

    z-index: 2;
}

.login-submit {
    min-height: 52px;

    width: 100%;

    border-radius: 13px;

    font-weight: 800;

    letter-spacing: .01em;

    box-shadow:
        0 12px 25px rgba(22,119,183,.20);
}

.login-security {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 26px;

    padding-top: 20px;

    border-top: 1px solid var(--kp-border);

    font-size: 11px;

    color: var(--kp-muted);
}

/* --------------------------------------------------------------
   DASHBOARD
-------------------------------------------------------------- */

.kp-app {
    min-height: 100vh;
    background: var(--kp-bg);
}

.kp-sidebar {
    width: 270px;

    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;

    z-index: 1000;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            var(--kp-navy-950),
            var(--kp-navy-900)
        );

    border-right: 1px solid rgba(255,255,255,.06);

    display: flex;
    flex-direction: column;
}

.kp-sidebar-header {
    padding: 25px 22px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.kp-sidebar .kp-brand-title {
    color: #fff;
}

.kp-sidebar .kp-brand-subtitle {
    color: var(--kp-gold-light);
}

.kp-sidebar-nav {
    padding: 20px 13px;

    flex: 1;

    overflow-y: auto;
}

.kp-nav-label {
    margin: 13px 12px 8px;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .16em;

    color: rgba(255,255,255,.32);
}

.kp-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 13px;

    margin: 4px 0;

    border-radius: 11px;

    color: rgba(255,255,255,.65);

    text-decoration: none;

    font-size: 13px;
    font-weight: 650;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.kp-nav-link:hover {
    color: #fff;

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

    transform: translateX(2px);
}

.kp-nav-link.active {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(33,150,210,.22),
            rgba(33,150,210,.06)
        );

    box-shadow:
        inset 3px 0 0 var(--kp-gold);
}

.kp-main {
    margin-left: 270px;

    min-height: 100vh;
}

.kp-topbar {
    min-height: 76px;

    padding: 0 30px;

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

    background: rgba(255,255,255,.92);

    border-bottom: 1px solid var(--kp-border);

    backdrop-filter: blur(18px);

    position: sticky;
    top: 0;

    z-index: 900;
}

.kp-page {
    padding: 30px;
}

.kp-page-title {
    font-size: 28px;

    font-weight: 850;

    letter-spacing: -.045em;

    color: var(--kp-navy-950);
}

.kp-page-subtitle {
    margin-top: 5px;

    color: var(--kp-muted);

    font-size: 13px;
}

/* Dashboard cards */

.kp-stat-card {
    height: 100%;

    padding: 22px;

    border:
        1px solid var(--kp-border);

    border-radius: var(--kp-radius);

    background: #fff;

    box-shadow: var(--kp-shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.kp-stat-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 42px rgba(5,24,42,.12);
}

.kp-stat-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            var(--kp-blue),
            var(--kp-navy-700)
        );
}

.kp-stat-label {
    margin-top: 17px;

    color: var(--kp-muted);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.kp-stat-value {
    margin-top: 5px;

    font-size: 30px;

    font-weight: 850;

    letter-spacing: -.045em;

    color: var(--kp-navy-950);
}

.kp-card {
    border:
        1px solid var(--kp-border);

    border-radius: var(--kp-radius);

    background: #fff;

    box-shadow: var(--kp-shadow);

    overflow: hidden;
}

.kp-card-header {
    min-height: 64px;

    padding: 18px 21px;

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

    border-bottom: 1px solid var(--kp-border);
}

.kp-card-title {
    font-size: 14px;

    font-weight: 800;

    color: var(--kp-navy-900);
}

.kp-card-body {
    padding: 21px;
}

/* Status */

.kp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;
}

.kp-badge-success {
    color: #08623f;
    background: #e3f8ef;
}

.kp-badge-warning {
    color: #74530a;
    background: #fff4d4;
}

.kp-badge-danger {
    color: #8f2635;
    background: #fde7eb;
}

.kp-badge-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

/* --------------------------------------------------------------
   TABLE
-------------------------------------------------------------- */

.table {
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 13px 15px;

    border-bottom-color: var(--kp-border);
}

.table thead th {
    color: var(--kp-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-weight: 800;
}

/* --------------------------------------------------------------
   ALERT
-------------------------------------------------------------- */

.alert {
    border-radius: 14px;
    border-width: 1px;
}

/* --------------------------------------------------------------
   MOBILE
-------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .login-container,
    .auth-container {
        grid-template-columns: 1fr;

        max-width: 520px;
    }

    .login-brand-panel,
    .auth-brand-panel {
        min-height: 250px;

        padding: 30px;
    }

    .login-hero-title,
    .auth-hero-title {
        margin-top: 35px;

        font-size: 36px;
    }

    .login-hero-description,
    .auth-hero-description {
        display: none;
    }

    .kp-sidebar {
        width: 78px;
    }

    .kp-sidebar .kp-brand-title,
    .kp-sidebar .kp-brand-subtitle,
    .kp-sidebar .kp-nav-label,
    .kp-sidebar .kp-nav-link span {
        display: none;
    }

    .kp-sidebar-header {
        display: flex;
        justify-content: center;
        padding: 18px 10px;
    }

    .kp-nav-link {
        justify-content: center;
    }

    .kp-main {
        margin-left: 78px;
    }

    .kp-topbar {
        padding: 0 20px;
    }

    .kp-page {
        padding: 20px;
    }
}

@media (max-width: 575.98px) {

    .login-page,
    .auth-page {
        padding: 14px;
    }

    .login-card,
    .auth-card {
        padding: 32px 25px;
    }

    .login-brand-panel,
    .auth-brand-panel {
        min-height: 190px;
    }

    .login-hero-title,
    .auth-hero-title {
        font-size: 30px;
        margin-top: 20px;
    }

    .kp-sidebar {
        display: none;
    }

    .kp-main {
        margin-left: 0;
    }

    .kp-page {
        padding: 15px;
    }

    .kp-topbar {
        min-height: 65px;
        padding: 0 15px;
    }
}

/* --------------------------------------------------------------
   SCROLLBAR
-------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #b9c5d0;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8ea0af;
}

/* ============================================================
   KORPOLAIRUD NEWS — PREMIUM LOGIN
   UI ONLY — AUTH BACKEND UNTOUCHED
   ============================================================ */

.kpn-login {
    min-height: 100vh;
    position: relative;
    overflow: hidden;

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

    padding: 30px;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(24, 126, 184, .22),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(216, 173, 74, .12),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #03111d 0%,
            #061c2f 48%,
            #082b45 100%
        );
}

.kpn-login::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .10;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    pointer-events: none;
}

/* Decorative maritime arcs */

.kpn-orbit {
    position: absolute;

    width: 720px;
    height: 720px;

    right: -390px;
    bottom: -430px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 0 0 55px rgba(255,255,255,.025),
        0 0 0 110px rgba(255,255,255,.018),
        0 0 0 165px rgba(255,255,255,.012);

    pointer-events: none;
}

.kpn-orbit-left {
    position: absolute;

    width: 420px;
    height: 420px;

    left: -280px;
    top: -260px;

    border-radius: 50%;

    border:
        1px solid rgba(37,183,211,.13);

    box-shadow:
        0 0 0 45px rgba(37,183,211,.025),
        0 0 0 90px rgba(37,183,211,.015);

    pointer-events: none;
}

/* Main layout */

.kpn-login-shell {
    width: min(1080px, 100%);

    min-height: 650px;

    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: 1.05fr .95fr;

    overflow: hidden;

    border-radius: 30px;

    background: rgba(255,255,255,.97);

    box-shadow:
        0 35px 100px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,255,255,.08);
}

/* LEFT */

.kpn-login-brand {
    position: relative;

    padding: 52px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #fff;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(37,183,211,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #04121f,
            #072b45 58%,
            #084664
        );
}

.kpn-login-brand::after {
    content: "";

    position: absolute;

    left: -140px;
    bottom: -220px;

    width: 620px;
    height: 360px;

    border-radius: 50%;

    border-top:
        1px solid rgba(255,255,255,.11);

    transform: rotate(-8deg);

    box-shadow:
        0 -35px 0 -1px rgba(255,255,255,.055),
        0 -70px 0 -1px rgba(255,255,255,.035);
}

/* Logo */

.kpn-logo {
    display: flex;
    align-items: center;
    gap: 15px;

    position: relative;
    z-index: 3;
}

.kpn-logo-mark {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    color: #fff;

    font-size: 25px;

    background:
        linear-gradient(
            145deg,
            #126d9f,
            #0b3655
        );

    border:
        1px solid rgba(255,255,255,.15);

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);
}

.kpn-logo-title {
    font-size: 18px;

    font-weight: 900;

    letter-spacing: .055em;

    line-height: 1.1;
}

.kpn-logo-subtitle {
    margin-top: 5px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .22em;

    color: #e4bf67;

    text-transform: uppercase;
}

/* Hero */

.kpn-login-hero {
    position: relative;

    z-index: 3;

    margin-top: 85px;
}

.kpn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #e6c66f;
}

.kpn-eyebrow::before {
    content: "";

    width: 23px;
    height: 1px;

    background: #e6c66f;
}

.kpn-login-title {
    max-width: 520px;

    margin-top: 19px;

    font-size: clamp(38px, 4vw, 61px);

    line-height: .97;

    letter-spacing: -.055em;

    font-weight: 900;
}

.kpn-login-title span {
    color: #e3bd62;
}

.kpn-login-description {
    max-width: 500px;

    margin-top: 24px;

    color: rgba(255,255,255,.66);

    font-size: 14px;

    line-height: 1.8;
}

.kpn-brand-line {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 10px;

    color: rgba(255,255,255,.45);

    letter-spacing: .06em;
}

.kpn-brand-line strong {
    color: rgba(255,255,255,.78);
}

/* RIGHT LOGIN */

.kpn-login-form {
    padding: 52px 48px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #fff;
}

.kpn-form-top {
    margin-bottom: 32px;
}

.kpn-form-kicker {
    font-size: 10px;

    font-weight: 850;

    color: #1677b7;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.kpn-form-title {
    margin-top: 9px;

    font-size: 31px;

    font-weight: 900;

    letter-spacing: -.045em;

    color: #061522;
}

.kpn-form-description {
    margin-top: 8px;

    color: #778594;

    font-size: 13px;

    line-height: 1.6;
}

/* Inputs */

.kpn-field {
    margin-bottom: 19px;
}

.kpn-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .06em;

    color: #173047;

    text-transform: uppercase;
}

.kpn-input {
    position: relative;
}

.kpn-input-icon {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #8293a1;

    z-index: 2;
}

.kpn-input .form-control {
    height: 54px;

    padding-left: 47px;
    padding-right: 45px;

    border-radius: 13px;

    border:
        1px solid #dfe6ec;

    color: #142334;

    background: #fbfcfd;

    font-size: 14px;

    transition:
        border .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.kpn-input .form-control:focus {
    background: #fff;

    border-color: #197bb5;

    box-shadow:
        0 0 0 4px rgba(25,123,181,.10);
}

/* Password toggle */

.kpn-password-toggle {
    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

    border: 0;

    background: transparent;

    color: #7b8c9b;

    padding: 7px;

    cursor: pointer;
}

/* Submit */

.kpn-submit {
    width: 100%;

    min-height: 54px;

    margin-top: 8px;

    border: 0;

    border-radius: 13px;

    color: #fff;

    font-size: 13px;

    font-weight: 850;

    letter-spacing: .01em;

    background:
        linear-gradient(
            135deg,
            #167dbb,
            #0b456b
        );

    box-shadow:
        0 13px 28px rgba(15,100,153,.22);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.kpn-submit:hover {
    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 18px 35px rgba(15,100,153,.29);
}

.kpn-submit:active {
    transform: translateY(0);
}

/* Security */

.kpn-security {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 27px;

    padding-top: 19px;

    border-top:
        1px solid #edf0f3;

    font-size: 10px;

    color: #8a98a5;
}

.kpn-secure {
    display: flex;
    align-items: center;
    gap: 7px;
}

.kpn-secure-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22a76b;

    box-shadow:
        0 0 0 4px rgba(34,167,107,.10);
}

.kpn-version {
    font-weight: 700;
}

/* Error */

.kpn-login .alert {
    border-radius: 12px;

    font-size: 12px;

    margin-bottom: 22px;
}

/* Responsive */

@media (max-width: 900px) {

    .kpn-login-shell {
        grid-template-columns: 1fr;

        max-width: 520px;

        min-height: auto;
    }

    .kpn-login-brand {
        min-height: 300px;

        padding: 34px;
    }

    .kpn-login-hero {
        margin-top: 40px;
    }

    .kpn-login-description {
        display: none;
    }

    .kpn-login-form {
        padding: 40px 34px;
    }
}

@media (max-width: 575px) {

    .kpn-login {
        padding: 13px;
    }

    .kpn-login-brand {
        min-height: 245px;

        padding: 27px;
    }

    .kpn-logo-mark {
        width: 50px;
        height: 50px;
    }

    .kpn-logo-title {
        font-size: 15px;
    }

    .kpn-login-title {
        font-size: 34px;
    }

    .kpn-login-form {
        padding: 34px 24px;
    }

    .kpn-form-title {
        font-size: 27px;
    }
}


/* ============================================================
   KORPOLAIRUD NEWS — NEWSROOM DASHBOARD
   ============================================================ */

.kpn-news-app {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(22,119,183,.055),
            transparent 30%
        ),
        #f4f7fa;
}

/* SIDEBAR */

.kpn-news-sidebar {
    position: fixed;
    z-index: 1050;

    top: 0;
    bottom: 0;
    left: 0;

    width: 274px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            #04121f 0%,
            #061c2e 52%,
            #082d47 100%
        );

    color: #fff;

    box-shadow:
        10px 0 40px rgba(2,17,30,.10);
}

.kpn-news-sidebar::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -310px;
    bottom: -260px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        0 0 0 55px rgba(255,255,255,.018),
        0 0 0 110px rgba(255,255,255,.012);

    pointer-events: none;
}

.kpn-news-sidebar-header {
    position: relative;
    z-index: 2;

    padding: 24px 21px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.kpn-news-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;

    color: #fff;
}

.kpn-news-brand-mark {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #1685bf,
            #0a3e61
        );

    color: #fff;

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.24);
}

.kpn-news-brand-title {
    font-size: 13px;

    font-weight: 900;

    letter-spacing: .07em;

    line-height: 1.15;
}

.kpn-news-brand-subtitle {
    margin-top: 4px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .15em;

    color: #dfbb68;
}

/* NAV */

.kpn-news-nav {
    position: relative;
    z-index: 2;

    padding: 20px 12px;

    flex: 1;

    overflow-y: auto;
}

.kpn-news-section-label {
    margin:
        16px 11px 8px;

    font-size: 9px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .17em;

    color:
        rgba(255,255,255,.34);
}

.kpn-news-nav-link {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 3px 0;

    padding: 11px 12px;

    border-radius: 11px;

    color:
        rgba(255,255,255,.62);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.kpn-news-nav-link i {
    width: 19px;

    font-size: 15px;

    text-align: center;
}

.kpn-news-nav-link:hover {
    color: #fff;

    background:
        rgba(255,255,255,.065);

    transform: translateX(2px);
}

.kpn-news-nav-link.active {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(22,133,191,.25),
            rgba(22,133,191,.07)
        );

    box-shadow:
        inset 3px 0 0 #dfbb68;
}

.kpn-news-nav-link.breaking i {
    color: #f05b62;
}

/* SIDEBAR FOOTER */

.kpn-news-sidebar-footer {
    position: relative;
    z-index: 2;

    padding: 16px;

    border-top:
        1px solid rgba(255,255,255,.07);
}

.kpn-news-user-mini {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kpn-news-avatar {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 38px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #187db4,
            #0b3858
        );

    font-size: 13px;

    font-weight: 900;
}

.kpn-news-user-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    font-weight: 800;
}

.kpn-news-user-role {
    margin-top: 2px;

    font-size: 9px;

    color:
        rgba(255,255,255,.43);
}

/* MAIN */

.kpn-news-main {
    margin-left: 274px;

    min-height: 100vh;
}

/* TOPBAR */

.kpn-news-topbar {
    height: 76px;

    padding:
        0 30px;

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

    position: sticky;
    top: 0;

    z-index: 900;

    background:
        rgba(255,255,255,.92);

    border-bottom:
        1px solid #e3e9ee;

    backdrop-filter:
        blur(18px);
}

.kpn-news-breadcrumb {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 11px;

    color: #8996a2;
}

.kpn-news-breadcrumb strong {
    color: #14283a;
}

.kpn-news-top-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.kpn-news-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border-radius: 999px;

    background: #e8f8f0;

    color: #18724d;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .05em;

    text-transform: uppercase;
}

.kpn-news-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #21a66c;

    box-shadow:
        0 0 0 4px rgba(33,166,108,.10);
}

.kpn-news-profile {
    display: flex;
    align-items: center;

    gap: 9px;

    padding-left: 13px;

    border-left:
        1px solid #e3e9ee;
}

.kpn-news-profile-avatar {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #147eb9,
            #0a3c5e
        );

    font-size: 11px;

    font-weight: 900;
}

.kpn-news-profile-name {
    font-size: 10px;

    font-weight: 850;

    color: #173047;
}

.kpn-news-profile-role {
    margin-top: 2px;

    font-size: 8px;

    color: #8996a2;
}

/* PAGE */

.kpn-news-content {
    padding: 30px;
}

.kpn-news-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.kpn-news-kicker {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .16em;

    color: #147bb5;

    text-transform: uppercase;
}

.kpn-news-kicker::before {
    content: "";

    width: 20px;
    height: 1px;

    background: #d5ab51;
}

.kpn-news-heading {
    margin-top: 8px;

    font-size: 30px;

    font-weight: 900;

    letter-spacing: -.05em;

    color: #061622;
}

.kpn-news-heading span {
    color: #147bb5;
}

.kpn-news-description {
    margin-top: 6px;

    color: #7a8996;

    font-size: 12px;

    line-height: 1.6;
}

.kpn-news-date {
    color: #7d8b97;

    font-size: 10px;

    font-weight: 700;
}

/* HERO */

.kpn-news-hero {
    position: relative;

    overflow: hidden;

    min-height: 210px;

    padding: 29px;

    border-radius: 20px;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37,183,211,.20),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #051421,
            #0a2e49 60%,
            #0b4667
        );

    box-shadow:
        0 18px 45px rgba(4,28,46,.15);
}

.kpn-news-hero::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -220px;
    bottom: -270px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        0 0 0 45px rgba(255,255,255,.025),
        0 0 0 90px rgba(255,255,255,.015);
}

.kpn-news-hero-content {
    position: relative;
    z-index: 2;

    max-width: 680px;
}

.kpn-news-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .15em;

    color: #e4c26d;

    text-transform: uppercase;
}

.kpn-news-hero-title {
    margin-top: 12px;

    font-size: 29px;

    font-weight: 900;

    letter-spacing: -.04em;
}

.kpn-news-hero-text {
    max-width: 600px;

    margin-top: 10px;

    color:
        rgba(255,255,255,.62);

    font-size: 12px;

    line-height: 1.7;
}

.kpn-news-hero-actions {
    display: flex;

    gap: 9px;

    margin-top: 18px;
}

.kpn-news-btn-gold {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 14px;

    border-radius: 10px;

    color: #10283b;

    background: #e2bc63;

    text-decoration: none;

    font-size: 10px;

    font-weight: 850;

    transition:
        transform .18s ease,
        background .18s ease;
}

.kpn-news-btn-gold:hover {
    color: #10283b;

    background: #efd184;

    transform: translateY(-1px);
}

.kpn-news-btn-outline {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 14px;

    border:
        1px solid rgba(255,255,255,.17);

    border-radius: 10px;

    color:
        rgba(255,255,255,.82);

    text-decoration: none;

    font-size: 10px;

    font-weight: 750;
}

/* SECTION */

.kpn-news-section {
    margin-top: 25px;
}

.kpn-news-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 13px;
}

.kpn-news-section-title {
    font-size: 14px;

    font-weight: 850;

    color: #10283b;
}

.kpn-news-section-link {
    font-size: 10px;

    font-weight: 750;

    color: #167bb5;

    text-decoration: none;
}

/* QUICK CARDS */

.kpn-news-quick {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 13px;
}

.kpn-news-quick-card {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 17px;

    border:
        1px solid #e2e8ed;

    border-radius: 15px;

    background: #fff;

    color: #172b3e;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(5,24,42,.045);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.kpn-news-quick-card:hover {
    color: #172b3e;

    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(5,24,42,.09);
}

.kpn-news-quick-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 42px;

    border-radius: 12px;

    color: #147bb5;

    background:
        #eaf5fa;

    font-size: 17px;
}

.kpn-news-quick-title {
    font-size: 11px;

    font-weight: 850;
}

.kpn-news-quick-text {
    margin-top: 3px;

    font-size: 9px;

    color: #8996a2;
}

/* BOTTOM GRID */

.kpn-news-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(280px, .8fr);

    gap: 17px;
}

/* NEWS CARD */

.kpn-news-card {
    overflow: hidden;

    border:
        1px solid #e1e8ed;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 8px 30px rgba(5,24,42,.05);
}

.kpn-news-card-header {
    padding: 17px 19px;

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

    border-bottom:
        1px solid #edf1f4;
}

.kpn-news-card-title {
    font-size: 12px;

    font-weight: 850;

    color: #12293c;
}

.kpn-news-card-body {
    padding: 0 19px;
}

/* NEWS ITEM */

.kpn-news-item {
    display: flex;

    gap: 13px;

    padding: 16px 0;

    border-bottom:
        1px solid #edf1f4;
}

.kpn-news-item:last-child {
    border-bottom: 0;
}

.kpn-news-thumb {
    width: 92px;
    height: 66px;

    flex: 0 0 92px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #0b314c,
            #126d9e
        );

    color:
        rgba(255,255,255,.55);

    font-size: 22px;
}

.kpn-news-item-category {
    display: inline-flex;

    padding: 4px 7px;

    border-radius: 5px;

    background: #eaf5fa;

    color: #1478ad;

    font-size: 8px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .05em;
}

.kpn-news-item-title {
    margin-top: 6px;

    color: #152b3d;

    font-size: 11px;

    font-weight: 800;

    line-height: 1.4;
}

.kpn-news-item-meta {
    margin-top: 6px;

    color: #94a0aa;

    font-size: 8px;
}

/* BREAKING */

.kpn-breaking {
    padding: 19px;
}

.kpn-breaking-status {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 9px;

    font-weight: 850;

    color: #c13e49;

    text-transform: uppercase;

    letter-spacing: .09em;
}

.kpn-breaking-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d84c58;

    box-shadow:
        0 0 0 5px rgba(216,76,88,.10);
}

.kpn-breaking-title {
    margin-top: 16px;

    font-size: 17px;

    font-weight: 850;

    line-height: 1.35;

    color: #132a3d;
}

.kpn-breaking-text {
    margin-top: 8px;

    color: #83909b;

    font-size: 10px;

    line-height: 1.7;
}

.kpn-breaking-divider {
    margin: 18px 0;

    height: 1px;

    background: #edf1f4;
}

/* SYSTEM */

.kpn-system-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 0;

    border-bottom:
        1px solid #edf1f4;
}

.kpn-system-row:last-child {
    border-bottom: 0;
}

.kpn-system-label {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #687986;

    font-size: 10px;
}

.kpn-system-value {
    color: #1b7653;

    font-size: 9px;

    font-weight: 850;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .kpn-news-quick {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .kpn-news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {

    .kpn-news-sidebar {
        width: 78px;
    }

    .kpn-news-sidebar-header {
        display: flex;

        justify-content: center;

        padding: 18px 9px;
    }

    .kpn-news-brand-title,
    .kpn-news-brand-subtitle,
    .kpn-news-section-label,
    .kpn-news-nav-link span,
    .kpn-news-sidebar-footer .kpn-news-user-name,
    .kpn-news-sidebar-footer .kpn-news-user-role {
        display: none;
    }

    .kpn-news-nav-link {
        justify-content: center;
    }

    .kpn-news-sidebar-footer {
        display: flex;

        justify-content: center;
    }

    .kpn-news-main {
        margin-left: 78px;
    }
}

@media (max-width: 600px) {

    .kpn-news-sidebar {
        display: none;
    }

    .kpn-news-main {
        margin-left: 0;
    }

    .kpn-news-topbar {
        height: 64px;

        padding: 0 15px;
    }

    .kpn-news-content {
        padding: 17px;
    }

    .kpn-news-welcome {
        align-items: flex-start;

        flex-direction: column;
    }

    .kpn-news-heading {
        font-size: 25px;
    }

    .kpn-news-hero {
        min-height: auto;

        padding: 23px;
    }

    .kpn-news-hero-title {
        font-size: 23px;
    }

    .kpn-news-quick {
        grid-template-columns: 1fr;
    }

    .kpn-news-profile-name,
    .kpn-news-profile-role {
        display: none;
    }

    .kpn-news-status {
        display: none;
    }
}


/* ============================================================
   KORPOLAIRUD - ROOT DATABASE SIDEBAR
   ============================================================ */

.sidebar .database-root-link,
.sidebar .database-root-link:visited {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 42px;
    padding: .65rem .85rem;
    border-radius: 10px;
    text-decoration: none;
}

.sidebar .database-root-link i {
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-size: .95rem;
}

.sidebar .database-root-link span {
    font-size: .84rem;
    font-weight: 500;
}

.sidebar .database-root-link:hover {
    text-decoration: none;
}


/* ============================================================
   KORPOLAIRUD NEWS
   ROOT DATABASE MANAGER SIDEBAR
   ============================================================ */

.kpn-news-sidebar .database-root-link {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    text-decoration: none !important;
}

.kpn-news-sidebar .database-root-link i {
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

.kpn-news-sidebar .database-root-link span {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
}

.kpn-news-sidebar .database-root-link:hover {
    text-decoration: none !important;
}

/* Root Database sedikit diberi aksen agar mudah dikenali */
.kpn-news-sidebar .database-root-link i {
    opacity: .95;
}


/* ============================================================
   KORPOLAIRUD NEWS - GLOBAL FLASH
   ============================================================ */

.kpn-global-flash-container{
    position:fixed;
    top:86px;
    right:24px;
    width:min(420px,calc(100vw - 32px));
    z-index:99999;
    pointer-events:none;
}

.kpn-global-flash{
    pointer-events:auto;
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:15px 17px;
    margin-bottom:12px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(15,43,64,.08);
    border-radius:15px;
    box-shadow:
        0 18px 45px rgba(10,32,52,.16),
        0 3px 10px rgba(10,32,52,.07);
    backdrop-filter:blur(18px);
    animation:kpnFlashIn .28s ease both;
    overflow:hidden;
}

.kpn-global-flash::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
}

.kpn-global-flash.success::before{
    background:#18a76d;
}

.kpn-global-flash.error::before{
    background:#dc3545;
}

.kpn-global-flash.warning::before{
    background:#e7a900;
}

.kpn-global-flash.info::before{
    background:#0879bd;
}

.kpn-global-flash-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}

.kpn-global-flash.success .kpn-global-flash-icon{
    color:#16865a;
    background:#e8f8f0;
}

.kpn-global-flash.error .kpn-global-flash-icon{
    color:#c52e3d;
    background:#fff0f1;
}

.kpn-global-flash.warning .kpn-global-flash-icon{
    color:#a87500;
    background:#fff7df;
}

.kpn-global-flash.info .kpn-global-flash-icon{
    color:#086b9f;
    background:#e9f5fb;
}

.kpn-global-flash-content{
    min-width:0;
    flex:1;
}

.kpn-global-flash-title{
    display:block;
    font-size:11px;
    font-weight:800;
    color:#17344d;
    margin-bottom:3px;
}

.kpn-global-flash-message{
    font-size:12px;
    line-height:1.5;
    color:#647687;
    word-break:break-word;
}

.kpn-global-flash-close{
    border:0;
    background:transparent;
    color:#91a0ac;
    padding:2px 3px;
    cursor:pointer;
    font-size:15px;
    line-height:1;
}

.kpn-global-flash-close:hover{
    color:#243d51;
}

.kpn-global-flash.hide{
    animation:kpnFlashOut .22s ease forwards;
}

@keyframes kpnFlashIn{
    from{
        opacity:0;
        transform:translate3d(25px,-8px,0) scale(.97);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0) scale(1);
    }
}

@keyframes kpnFlashOut{
    to{
        opacity:0;
        transform:translate3d(25px,-8px,0) scale(.97);
    }
}

/* ============================================================
   KORPOLAIRUD NEWS - GLOBAL LOADING
   ============================================================ */

#kpn-global-loader{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(8,121,189,.13),
            transparent 38%
        ),
        rgba(5,18,30,.55);
    backdrop-filter:blur(7px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .18s ease,
        visibility .18s ease;
}

#kpn-global-loader.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.kpn-loader-card{
    min-width:230px;
    padding:24px 26px;
    border-radius:19px;
    background:rgba(255,255,255,.97);
    box-shadow:0 25px 70px rgba(0,0,0,.24);
    text-align:center;
}

.kpn-loader-logo{
    width:48px;
    height:48px;
    margin:0 auto 14px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg,#087fbe,#07527f);
    box-shadow:0 10px 25px rgba(8,121,189,.24);
    font-size:21px;
}

.kpn-loader-spinner{
    width:25px;
    height:25px;
    margin:0 auto 13px;
    border:3px solid #dceaf2;
    border-top-color:#0879bd;
    border-radius:50%;
    animation:kpnLoaderSpin .75s linear infinite;
}

.kpn-loader-title{
    font-size:12px;
    font-weight:800;
    color:#17344d;
    letter-spacing:.2px;
}

.kpn-loader-subtitle{
    margin-top:4px;
    font-size:10px;
    color:#8a9ba8;
}

@keyframes kpnLoaderSpin{
    to{
        transform:rotate(360deg);
    }
}

/* Saat loader aktif, jangan izinkan scroll */
body.kpn-loading{
    overflow:hidden !important;
}

/* Mobile flash */
@media(max-width:576px){
    .kpn-global-flash-container{
        top:76px;
        left:16px;
        right:16px;
        width:auto;
    }

    .kpn-global-flash{
        border-radius:13px;
    }

    .kpn-loader-card{
        min-width:210px;
    }
}


/* ============================================================
   KORPOLAIRUD GLOBAL LAYOUT
   Single Navbar + Single Sidebar
   ============================================================ */

.kpn-global-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7fa;
    color: #173246;
}

.kpn-global-sidebar {
    width: 292px;
    min-width: 292px;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(
            circle at 0 100%,
            rgba(8,123,185,.25),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #061b2b,
            #062b43
        );
    border-right: 1px solid rgba(255,255,255,.06);
}

.kpn-global-brand {
    height: 112px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.kpn-global-brand-mark {
    width: 43px;
    height: 43px;
    min-width: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(
        135deg,
        #087bb9,
        #07527f
    );
    box-shadow:
        0 10px 25px rgba(0,0,0,.22);
    font-size: 21px;
}

.kpn-global-brand-title {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .08em;
}

.kpn-global-brand-subtitle {
    margin-top: 3px;
    color: #e8c65d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
}

.kpn-global-nav {
    flex: 1;
    overflow-y: auto;
    padding: 25px 15px;
}

.kpn-global-section {
    margin: 10px 0 9px;
    padding: 0 16px;
    color: rgba(178,205,219,.48);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}

.kpn-global-nav-item {
    min-height: 45px;
    margin: 3px 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    color: rgba(228,240,247,.76);
    text-decoration: none;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 650;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.kpn-global-nav-item i {
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-size: 15px;
}

.kpn-global-nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
    transform: translateX(2px);
}

.kpn-global-nav-item.active {
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(8,123,185,.35),
            rgba(8,123,185,.14)
        );
    box-shadow:
        inset 3px 0 0 #e9c34f;
}

.kpn-root-badge {
    margin-left: auto;
    padding: 3px 6px;
    border-radius: 999px;
    color: #e9c34f;
    background: rgba(233,195,79,.10);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .06em;
}

.kpn-global-sidebar-footer {
    padding: 17px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.kpn-global-user {
    min-height: 58px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 13px;
    background: rgba(255,255,255,.055);
}

.kpn-global-avatar,
.kpn-global-top-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #087bb9,
            #07527f
        );
    font-weight: 800;
}

.kpn-global-avatar {
    width: 37px;
    height: 37px;
    min-width: 37px;
    border-radius: 11px;
    font-size: 13px;
}

.kpn-global-user-info {
    min-width: 0;
    flex: 1;
}

.kpn-global-user-info strong,
.kpn-global-user-info small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpn-global-user-info strong {
    font-size: 11px;
}

.kpn-global-user-info small {
    margin-top: 2px;
    color: rgba(214,232,241,.52);
    font-size: 9px;
}

.kpn-global-logout,
.kpn-global-top-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.kpn-global-logout {
    width: 31px;
    height: 31px;
    color: rgba(255,255,255,.65);
    border-radius: 9px;
}

.kpn-global-logout:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.kpn-global-main {
    width: calc(100% - 292px);
    min-height: 100vh;
    margin-left: 292px;
}

.kpn-global-navbar {
    height: 66px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e4ebef;
    backdrop-filter: blur(12px);
}

.kpn-global-navbar-left,
.kpn-global-navbar-right {
    display: flex;
    align-items: center;
}

.kpn-global-navbar-left {
    gap: 15px;
}

.kpn-global-navbar-right {
    gap: 16px;
}

.kpn-global-menu-toggle {
    display: none;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5ea;
    border-radius: 10px;
    background: #fff;
    color: #365467;
}

.kpn-global-breadcrumb {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 11px;
}

.kpn-global-breadcrumb span {
    color: #91a0aa;
}

.kpn-global-breadcrumb span i {
    margin-right: 6px;
    color: #087bb9;
}

.kpn-global-breadcrumb > i {
    color: #c0cbd1;
    font-size: 9px;
}

.kpn-global-breadcrumb strong {
    color: #183447;
}

.kpn-global-online {
    padding: 7px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: #eaf8f2;
    color: #168356;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
}

.kpn-global-online span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #17a767;
}

.kpn-global-account {
    display: flex;
    align-items: center;
    gap: 9px;
}

.kpn-global-top-avatar {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    font-size: 12px;
}

.kpn-global-account-text strong,
.kpn-global-account-text small {
    display: block;
}

.kpn-global-account-text strong {
    color: #173246;
    font-size: 10px;
}

.kpn-global-account-text small {
    margin-top: 2px;
    color: #99a7af;
    font-size: 8px;
}

.kpn-global-top-logout {
    width: 34px;
    height: 34px;
    color: #627986;
    border: 1px solid #dbe5ea;
    border-radius: 10px;
}

.kpn-global-top-logout:hover {
    color: #07527f;
    background: #f2f8fb;
}

.kpn-global-content {
    min-height: calc(100vh - 66px);
    padding: 0;
}

.kpn-global-overlay {
    display: none;
}

@media (max-width: 991px) {

    .kpn-global-sidebar {
        transform: translateX(-100%);
        transition:
            transform .25s ease;
        box-shadow:
            15px 0 45px rgba(0,0,0,.18);
    }

    .kpn-global-sidebar.is-open {
        transform: translateX(0);
    }

    .kpn-global-main {
        width: 100%;
        margin-left: 0;
    }

    .kpn-global-menu-toggle {
        display: flex;
    }

    .kpn-global-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(2,16,27,.48);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    .kpn-global-overlay.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .kpn-global-online {
        display: none;
    }

    .kpn-global-navbar {
        padding: 0 15px;
    }

}

@media (max-width: 575px) {

    .kpn-global-navbar {
        height: 60px;
    }

    .kpn-global-account-text {
        display: none;
    }

    .kpn-global-navbar-right {
        gap: 9px;
    }

}

/* ============================================================
   KORPOLAIRUD NEWS
   GLOBAL LAYOUT - LEGACY HEADER COMPATIBILITY
   ============================================================ */

/*
 * Global navbar sudah menjadi satu-satunya navbar utama.
 * Header lama yang masih tertanam di halaman admin disembunyikan
 * agar tidak menghasilkan navbar/breadcrumb ganda.
 */

.kpn-global-layout > main > .kpn-news-topbar,
.kpn-global-layout > main > .kpn-news-navbar,
.kpn-global-layout > main > .kpn-news-header,
.kpn-global-layout > main > .kpn-page-header {
    display: none !important;
}

/* Legacy breadcrumb/header tepat setelah global navbar */
.kpn-global-main > .kpn-news-topbar,
.kpn-global-main > .kpn-news-navbar,
.kpn-global-main > .kpn-news-header,
.kpn-global-main > .kpn-page-header {
    display: none !important;
}

/* Jangan sembunyikan global navbar */
.kpn-global-navbar {
    display: flex !important;
}


/* ============================================================
   KORPOLAIRUD NEWS
   GLOBAL LAYOUT FINAL
   ============================================================ */

/* Hanya global navbar yang menjadi navbar utama */
.kpn-global-navbar {
    display: flex !important;
}

/* Hanya global sidebar yang menjadi sidebar utama */
.kpn-global-sidebar {
    display: flex !important;
}

/* Legacy layout sudah dimigrasikan ke global layout */
.kpn-news-sidebar,
.kpn-news-topbar {
    display: none !important;
}

/* Konten admin tetap berada di area global main */
.kpn-global-main {
    min-width: 0;
    width: 100%;
}


/* ============================================================
   KORPOLAIRUD NEWS
   GLOBAL RESPONSIVE LAYOUT
   ============================================================ */

/*
 * Prinsip:
 * 1. Tidak boleh ada horizontal overflow.
 * 2. Sidebar tetap sebagai layout utama.
 * 3. Main content selalu mengikuti viewport.
 * 4. Semua grid boleh mengecil / wrap.
 */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    margin: 0;
}

/* ------------------------------------------------------------
   GLOBAL APP SHELL
   ------------------------------------------------------------ */

.kpn-global-layout,
.kpn-global-shell,
.kpn-app-shell,
.kpn-global-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------ */

.kpn-global-sidebar {
    flex: 0 0 250px;
    width: 250px;
    max-width: 250px;
    min-width: 250px;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   MAIN
   ------------------------------------------------------------ */

.kpn-global-main,
.kpn-global-content,
.kpn-main-content,
main {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   GLOBAL NAVBAR
   ------------------------------------------------------------ */

.kpn-global-navbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.kpn-global-navbar-left,
.kpn-global-navbar-right {
    min-width: 0;
}

.kpn-global-navbar-right {
    max-width: 60%;
    overflow: hidden;
}

/* ------------------------------------------------------------
   PAGE CONTENT
   ------------------------------------------------------------ */

.kpn-page,
.kpn-page-content,
.kpn-dashboard,
.kpn-dashboard-content,
.kpn-content-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   BOOTSTRAP ROW SAFETY
   ------------------------------------------------------------ */

.row {
    max-width: 100%;
    min-width: 0;
}

.row > * {
    min-width: 0;
}

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.card,
.kpn-news-card,
.kpn-card,
.kpn-stat-card,
.kpn-quick-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   IMAGES
   ------------------------------------------------------------ */

img,
svg,
video {
    max-width: 100%;
}

/* ------------------------------------------------------------
   TABLES
   ------------------------------------------------------------ */

.table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================================
   DASHBOARD GRID
   ============================================================ */

.kpn-dashboard-grid,
.kpn-quick-grid,
.kpn-stat-grid,
.quick-grid,
.stats-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Quick access */
.kpn-quick-grid,
.quick-grid {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(240px, 100%),
                1fr
            )
        );
    gap: 14px;
}

/* Statistics */
.kpn-stat-grid,
.stats-grid {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(220px, 100%),
                1fr
            )
        );
    gap: 16px;
}

/* ============================================================
   DASHBOARD TWO COLUMN CONTENT
   ============================================================ */

.kpn-dashboard-columns,
.kpn-content-grid,
.dashboard-grid,
.newsroom-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);
    gap: 18px;
}

.kpn-dashboard-columns > *,
.kpn-content-grid > *,
.dashboard-grid > *,
.newsroom-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* ============================================================
   HERO
   ============================================================ */

.kpn-news-hero,
.kpn-hero,
.dashboard-hero,
.hero {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* ============================================================
   TEXT
   ============================================================ */

.kpn-news-card *,
.kpn-card *,
.card * {
    max-width: 100%;
}

.text-truncate {
    min-width: 0;
}

/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .kpn-global-sidebar {
        flex-basis: 250px;
        width: 250px;
    }

}

/* ============================================================
   LAPTOP / TABLET
   ============================================================ */

@media (max-width: 1199.98px) {

    .kpn-global-sidebar {
        flex-basis: 230px;
        width: 230px;
        min-width: 230px;
    }

    .kpn-dashboard-columns,
    .kpn-content-grid,
    .dashboard-grid,
    .newsroom-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 0.8fr);
    }

    .kpn-global-navbar-right {
        max-width: 55%;
    }
}

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

@media (max-width: 991.98px) {

    .kpn-global-sidebar {
        flex-basis: 220px;
        width: 220px;
        min-width: 220px;
    }

    .kpn-dashboard-columns,
    .kpn-content-grid,
    .dashboard-grid,
    .newsroom-grid {
        grid-template-columns: 1fr;
    }

    .kpn-global-navbar-right {
        max-width: 50%;
    }
}

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

@media (max-width: 767.98px) {

    .kpn-global-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .kpn-global-navbar {
        min-height: 60px;
    }

    .kpn-global-navbar-left {
        flex: 1 1 auto;
    }

    .kpn-global-navbar-right {
        flex: 0 0 auto;
        max-width: 45%;
    }

    .kpn-quick-grid,
    .quick-grid,
    .kpn-stat-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .kpn-dashboard-columns,
    .kpn-content-grid,
    .dashboard-grid,
    .newsroom-grid {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   VERY SMALL SCREEN
   ============================================================ */

@media (max-width: 480px) {

    .kpn-global-navbar-right {
        max-width: 40%;
    }

    .kpn-news-hero,
    .kpn-hero,
    .dashboard-hero,
    .hero {
        border-radius: 16px;
    }

}


/* Bootstrap container tidak boleh menyebabkan page overflow */
.container,
.container-fluid {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {

    .container,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

}


/* ============================================================
   KORPOLAIRUD NEWS
   CONTENT SPACING NORMALIZATION
   ============================================================ */

/*
 * Global sidebar sudah menangani lebar navigasi.
 * Content tidak boleh mengulang offset sidebar.
 */

.kpn-global-main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Wrapper halaman */
.kpn-global-main > .kpn-news-main,
.kpn-global-main > .kpn-news-content,
.kpn-global-main > .kpn-dashboard,
.kpn-global-main > .kpn-page,
.kpn-global-main > main {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Dashboard content */
.kpn-dashboard,
.kpn-dashboard-content,
.kpn-content-wrapper,
.kpn-page-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
    min-width: 0;
}

/*
 * Hilangkan offset lama yang biasanya dipakai
 * ketika sidebar masih berada di dalam setiap halaman.
 */
.kpn-news-main {
    margin-left: 0 !important;
}

.kpn-news-content {
    margin-left: 0 !important;
}

/*
 * Jika wrapper menggunakan transform/position lama,
 * jangan biarkan membuat ruang kosong.
 */
.kpn-global-main {
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* ============================================================
   DESKTOP CONTENT WIDTH
   ============================================================ */

@media (min-width: 992px) {

    .kpn-global-main {
        width: auto !important;
        max-width: none !important;
    }

    .kpn-global-main > .container,
    .kpn-global-main > .container-fluid {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

}

/* ============================================================
   PAGE INNER CONTENT
   ============================================================ */

.kpn-global-main .kpn-page,
.kpn-global-main .kpn-dashboard,
.kpn-global-main .kpn-dashboard-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Bootstrap container tetap diberi gutter normal,
 * tetapi tidak diberi offset tambahan.
 */
.kpn-global-main .container {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   PREVENT DOUBLE SIDEBAR OFFSET
   ============================================================ */

.kpn-global-main [class*="main"],
.kpn-global-main [class*="content"] {
    box-sizing: border-box;
}

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

@media (max-width: 991.98px) {

    .kpn-global-main,
    .kpn-news-main,
    .kpn-news-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

}


/* ============================================================
   DASHBOARD FINAL ALIGNMENT
   ============================================================ */

.kpn-global-main .kpn-dashboard-inner,
.kpn-global-main .dashboard-inner,
.kpn-global-main .kpn-dashboard-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100%;
    max-width: 100%;
}

/*
 * Hero dan quick access mengikuti batas content,
 * bukan membuat offset baru.
 */
.kpn-global-main .kpn-news-hero,
.kpn-global-main .kpn-hero,
.kpn-global-main .kpn-quick-grid,
.kpn-global-main .kpn-dashboard-grid,
.kpn-global-main .kpn-content-grid {
    margin-left: 0;
    max-width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   KORPOLAIRUD NEWS
   GLOBAL LAYOUT CONTRACT
   ============================================================ */

:root {
    --kpn-sidebar-width: 270px;
}

/*
 * Sidebar adalah fixed navigation.
 * Semua area utama WAJIB dimulai setelah sidebar.
 */

.kpn-global-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

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

    z-index: 1100 !important;
}

/*
 * Navbar global berada di sebelah kanan sidebar.
 */
.kpn-global-navbar {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    left: var(--kpn-sidebar-width) !important;

    width: auto !important;

    z-index: 1000 !important;
}

/*
 * MAIN adalah area yang sebelumnya salah:
 * margin-left 0 membuat sidebar menutup content.
 */
.kpn-global-main {
    position: relative !important;

    margin-left: var(--kpn-sidebar-width) !important;
    padding-left: 0 !important;

    width: calc(100% - var(--kpn-sidebar-width)) !important;
    max-width: calc(100% - var(--kpn-sidebar-width)) !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/*
 * Jika main menggunakan top spacing untuk navbar,
 * gunakan padding-top, bukan margin-left tambahan.
 */
.kpn-global-main {
    padding-top: 0 !important;
}

/*
 * Konten halaman tidak boleh membuat offset sidebar kedua kali.
 */
.kpn-global-main > .kpn-news-main,
.kpn-global-main > .kpn-news-content,
.kpn-global-main > .kpn-dashboard,
.kpn-global-main > .kpn-page,
.kpn-global-main > main {
    margin-left: 0 !important;
    padding-left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/*
 * Container internal tetap boleh memiliki gutter,
 * tetapi tidak boleh menggeser seluruh halaman.
 */
.kpn-global-main > .container,
.kpn-global-main > .container-fluid {
    box-sizing: border-box;
}

/*
 * Hindari horizontal overflow akibat layout lama.
 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/*
 * Desktop.
 */
@media (min-width: 992px) {

    .kpn-global-sidebar {
        width: var(--kpn-sidebar-width) !important;
    }

    .kpn-global-navbar {
        left: var(--kpn-sidebar-width) !important;
    }

    .kpn-global-main {
        margin-left: var(--kpn-sidebar-width) !important;

        width: calc(100% - var(--kpn-sidebar-width)) !important;
        max-width: calc(100% - var(--kpn-sidebar-width)) !important;
    }

}

/*
 * Mobile:
 * sidebar biasanya menjadi drawer/off-canvas.
 * Main kembali full width.
 */
@media (max-width: 991.98px) {

    .kpn-global-main {
        margin-left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .kpn-global-navbar {
        left: 0 !important;
    }

}

/* ============================================================
   REMOVE OLD DOUBLE OFFSET
   ============================================================ */

.kpn-global-main .kpn-news-main,
.kpn-global-main .kpn-news-content,
.kpn-global-main .kpn-dashboard,
.kpn-global-main .kpn-dashboard-content,
.kpn-global-main .kpn-content-wrapper,
.kpn-global-main .kpn-page-content {
    margin-left: 0 !important;
}

/*
 * Jangan gunakan aturan lama yang memindahkan content
 * dengan left/transform.
 */
.kpn-global-main .kpn-news-main,
.kpn-global-main .kpn-news-content,
.kpn-global-main .kpn-dashboard,
.kpn-global-main .kpn-dashboard-content {
    left: auto !important;
    transform: none !important;
}


/* ============================================================
   KORPOLAIRUD NEWS
   GLOBAL NAVBAR VERTICAL OFFSET
   ============================================================ */

:root {
    --kpn-sidebar-width: 270px;
    --kpn-navbar-height: 56px;
}

/*
 * GLOBAL NAVBAR
 *
 * Navbar fixed sehingga tidak ikut scroll.
 * Tingginya dijadikan satu sumber konfigurasi.
 */

.kpn-global-navbar {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    left: var(--kpn-sidebar-width) !important;

    width: auto !important;
    height: var(--kpn-navbar-height) !important;
    min-height: var(--kpn-navbar-height) !important;

    box-sizing: border-box !important;

    z-index: 1000 !important;
}

/*
 * GLOBAL MAIN
 *
 * Main harus dimulai:
 *
 * X = setelah sidebar
 * Y = setelah navbar
 *
 * Ini mencegah navbar menutup breadcrumb,
 * heading, hero dan konten halaman.
 */

.kpn-global-main {
    position: relative !important;

    margin-left: var(--kpn-sidebar-width) !important;

    width: calc(100% - var(--kpn-sidebar-width)) !important;
    max-width: calc(100% - var(--kpn-sidebar-width)) !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    /*
     * NAVBAR OFFSET
     */
    padding-top: var(--kpn-navbar-height) !important;

    padding-left: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;
}

/*
 * Jangan tambahkan margin-top ke child.
 * Offset navbar cukup dilakukan SATU KALI
 * pada global main.
 */

.kpn-global-main > .kpn-news-main,
.kpn-global-main > .kpn-news-content,
.kpn-global-main > .kpn-dashboard,
.kpn-global-main > .kpn-dashboard-content,
.kpn-global-main > .kpn-content-wrapper,
.kpn-global-main > .kpn-page-content,
.kpn-global-main > main {
    margin-top: 0 !important;
}

/*
 * Content internal tetap full terhadap area MAIN.
 */

.kpn-global-main > .kpn-news-main,
.kpn-global-main > .kpn-news-content,
.kpn-global-main > .kpn-dashboard,
.kpn-global-main > .kpn-dashboard-content,
.kpn-global-main > .kpn-content-wrapper,
.kpn-global-main > .kpn-page-content,
.kpn-global-main > main {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;

    left: auto !important;
    transform: none !important;
}

/*
 * BODY tidak boleh memberikan offset tambahan.
 */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/*
 * DESKTOP
 */

@media (min-width: 992px) {

    .kpn-global-sidebar {
        width: var(--kpn-sidebar-width) !important;
        min-width: var(--kpn-sidebar-width) !important;
        max-width: var(--kpn-sidebar-width) !important;

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

    .kpn-global-navbar {
        left: var(--kpn-sidebar-width) !important;
        right: 0 !important;
        top: 0 !important;
    }

    .kpn-global-main {
        margin-left: var(--kpn-sidebar-width) !important;

        width: calc(100% - var(--kpn-sidebar-width)) !important;
        max-width: calc(100% - var(--kpn-sidebar-width)) !important;

        padding-top: var(--kpn-navbar-height) !important;
    }

}

/*
 * MOBILE
 *
 * Sidebar menjadi drawer/off-canvas.
 * Navbar full width.
 * Main tidak memiliki offset horizontal.
 */

@media (max-width: 991.98px) {

    .kpn-global-sidebar {
        width: min(270px, 86vw) !important;
        max-width: min(270px, 86vw) !important;
    }

    .kpn-global-navbar {
        left: 0 !important;
        right: 0 !important;

        height: var(--kpn-navbar-height) !important;
    }

    .kpn-global-main {
        margin-left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-top: var(--kpn-navbar-height) !important;
    }

}

/*
 * ============================================================
 * PROTECTION AGAINST OLD PAGE OFFSETS
 * ============================================================
 *
 * Beberapa halaman lama kemungkinan mempunyai:
 *
 * margin-top: -...
 * top: -...
 * transform: translateY(...)
 *
 * Rule berikut mencegah child utama kembali naik
 * menembus navbar.
 */

.kpn-global-main > * {
    box-sizing: border-box;
}

/*
 * Breadcrumb/header halaman harus berada DI BAWAH navbar.
 */

.kpn-global-main .kpn-news-topbar,
.kpn-global-main .kpn-page-header,
.kpn-global-main .kpn-breadcrumb,
.kpn-global-main .kpn-dashboard-header {
    position: relative !important;
}

/*
 * Global loader/flash tetap berada di atas seluruh UI.
 */

#kpn-global-loader {
    z-index: 2000 !important;
}

.kpn-global-flash-container {
    z-index: 2100 !important;
}


/* ============================================================
   KPN SETTINGS UI RESTORE
   Content-only styling.
   Global navbar/sidebar tetap dikendalikan layout global.
   ============================================================ */

.settings-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 34px 0 60px;
}

.settings-shell > .mb-4:first-child {
    margin-bottom: 22px !important;
}

.settings-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 34px 38px;
    margin-bottom: 26px;
    background:
        radial-gradient(circle at 90% 10%, rgba(32,151,211,.30), transparent 34%),
        linear-gradient(135deg, #061b2d 0%, #0b3858 55%, #0879b8 100%);
    color: #fff;
    box-shadow: 0 18px 45px rgba(5,34,54,.16);
}

.settings-hero::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -100px;
    top: -190px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    pointer-events: none;
}

.settings-eyebrow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: #f5c84c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.settings-hero h1,
.settings-hero h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.1;
}

.settings-hero p {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 15px;
}

/* Cards */

.settings-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2eaf0;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(8,37,58,.07);
}

.settings-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 26px;
    border-bottom: 1px solid #e7edf2;
}

.settings-card-header h2,
.settings-card-header h3 {
    margin: 0;
    color: #09263c;
    font-size: 19px;
    font-weight: 800;
}

.settings-card-header p,
.settings-card-header small {
    display: block;
    margin: 5px 0 0;
    color: #71859a;
}

.settings-card-body {
    padding: 26px;
}

/* Profile */

.settings-profile {
    text-align: center;
}

.settings-big-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0876b4, #0b91d1);
    color: #fff;
    font-size: 31px;
    font-weight: 800;
    box-shadow: 0 12px 25px rgba(8,118,180,.20);
}

.settings-profile h2,
.settings-profile h3 {
    margin: 0;
    color: #09263c;
    font-size: 21px;
    font-weight: 800;
}

.settings-profile .role {
    margin-top: 5px;
    color: #71859a;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 18px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #e9f8f1;
    color: #07875d;
    font-size: 12px;
    font-weight: 700;
}

.status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18b77b;
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-top: 1px solid #e8eef3;
    text-align: left;
}

.info-row span,
.info-row label {
    color: #71859a;
    font-size: 13px;
}

.info-row strong {
    color: #09263c;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

/* Forms */

.settings-shell .form-label,
.settings-shell label {
    color: #17354c;
    font-size: 13px;
    font-weight: 700;
}

.settings-shell .form-control,
.settings-shell .form-select {
    min-height: 46px;
    border: 1px solid #dbe5ec;
    border-radius: 11px;
    background: #fff;
    color: #17354c;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.settings-shell .form-control:focus,
.settings-shell .form-select:focus {
    border-color: #0b87c9;
    box-shadow: 0 0 0 3px rgba(11,135,201,.12);
}

.settings-shell .form-text {
    color: #7b8da0;
    font-size: 12px;
    margin-top: 6px;
}

.settings-shell textarea.form-control {
    min-height: 110px;
}

/* Password / security */

.security-notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 17px;
    border: 1px solid #d8eaf4;
    border-radius: 14px;
    background: #f0f8fc;
    color: #45677e;
}

.security-notice > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #087bb8;
    font-size: 18px;
}

.security-notice strong {
    display: block;
    margin-bottom: 3px;
    color: #17354c;
    font-size: 13px;
}

.security-notice small {
    color: #668095;
    font-size: 12px;
    line-height: 1.55;
}

/* Feature rows */

.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid #e7edf2;
}

.feature-row:last-child {
    border-bottom: 0;
}

.feature-title {
    color: #17354c;
    font-size: 14px;
    font-weight: 750;
}

.feature-description {
    margin-top: 4px;
    color: #71859a;
    font-size: 12px;
    line-height: 1.5;
}

.system-item {
    height: 100%;
    padding: 18px;
    border: 1px solid #e2eaf0;
    border-radius: 14px;
    background: #fff;
}

.system-item strong {
    display: block;
    color: #17354c;
    font-size: 13px;
}

.system-item small {
    display: block;
    margin-top: 5px;
    color: #71859a;
    line-height: 1.5;
}

/* Buttons */

.settings-shell .btn {
    min-height: 42px;
    border-radius: 11px;
    font-weight: 700;
}

.settings-shell .btn-primary,
.settings-shell button[type="submit"] {
    border: 0;
    background: linear-gradient(135deg, #087bb9, #05659b);
    color: #fff;
    box-shadow: 0 8px 18px rgba(8,123,185,.18);
}

.settings-shell .btn-primary:hover,
.settings-shell button[type="submit"]:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}

/* Prevent old settings layout artifacts */

body.kpn-settings-page {
    overflow-x: hidden;
}

.settings-shell .kpn-sidebar,
.settings-shell .kpn-topbar,
.settings-shell .kpn-main {
    display: none !important;
}

/* Responsive */

@media (max-width: 991.98px) {
    .settings-shell {
        width: min(100% - 30px, 760px);
        padding-top: 24px;
    }

    .settings-hero {
        padding: 28px 25px;
        border-radius: 20px;
    }

    .settings-card-body {
        padding: 21px;
    }
}

@media (max-width: 575.98px) {
    .settings-shell {
        width: calc(100% - 22px);
        padding: 18px 0 40px;
    }

    .settings-hero {
        padding: 23px 20px;
    }

    .settings-hero h1,
    .settings-hero h2 {
        font-size: 28px;
    }

    .settings-card-header {
        padding: 18px;
    }

    .settings-card-body {
        padding: 18px;
    }

    .info-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .info-row strong {
        text-align: left;
    }

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


/* ============================================================
   KPN WEB GLOBAL SETTINGS
   ============================================================ */

.settings-web-global-card {
    margin-top: 26px;
}

.settings-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    background: #eaf6fc;
    color: #087bb9;
    font-size: 20px;
}

.root-only-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f4f7e8;
    color: #7d7510;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.settings-web-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid #e1eaf0;
    border-radius: 14px;
    background: #f8fbfd;
}

.settings-web-toggle strong {
    display: block;
    color: #17354c;
    font-size: 14px;
}

.settings-web-toggle small {
    display: block;
    margin-top: 4px;
    color: #71859a;
    font-size: 12px;
}

.settings-switch {
    position: relative;
    display: block;
    width: 50px;
    height: 28px;
    margin: 0;
    cursor: pointer;
}

.settings-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd7df;
    transition: .2s ease;
}

.settings-switch span::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.16);
    transition: .2s ease;
}

.settings-switch input:checked + span {
    background: #0786c6;
}

.settings-switch input:checked + span::after {
    transform: translateX(22px);
}

.settings-web-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e6edf2;
}

.settings-root-warning {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #71859a;
}

.settings-root-warning > i {
    color: #0785c3;
    font-size: 19px;
}

.settings-root-warning strong {
    display: block;
    color: #17354c;
    font-size: 12px;
}

.settings-root-warning small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
}

@media (max-width: 767.98px) {

    .root-only-badge {
        display: none;
    }

    .settings-web-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-web-actions .btn {
        width: 100%;
    }

}


/* ============================================================
   KPN ACTIVITY SYSTEM
   ============================================================ */

.activity-page {
    max-width: 1480px;
    margin: 0 auto;
    padding: 34px 34px 60px;
}

.activity-page-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

.activity-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#087fbc;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    margin-bottom:8px;
}

.activity-page-header h1 {
    margin:0;
    color:#102d43;
    font-size:clamp(30px,4vw,42px);
    font-weight:800;
}

.activity-page-header p {
    margin:8px 0 0;
    color:#71879a;
    font-size:14px;
}

.activity-header-actions {
    display:flex;
    align-items:center;
    gap:10px;
}

.activity-header-actions form {
    margin:0;
}

.activity-stat-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    margin-bottom:20px;
}

.activity-stat-card {
    display:flex;
    align-items:center;
    gap:14px;
    min-height:92px;
    padding:18px;
    border:1px solid #e4edf2;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 26px rgba(16,45,67,.055);
}

.activity-stat-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:13px;
    background:#eaf6fc;
    color:#087fbc;
    font-size:19px;
}

.activity-stat-card span {
    display:block;
    color:#7a8ea0;
    font-size:11px;
    font-weight:600;
}

.activity-stat-card strong {
    display:block;
    margin-top:2px;
    color:#102d43;
    font-size:24px;
    font-weight:800;
}

.activity-card {
    overflow:hidden;
    border:1px solid #e3ecf1;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 38px rgba(16,45,67,.065);
}

.activity-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 24px;
    border-bottom:1px solid #e8eef2;
}

.activity-card-header h2 {
    margin:0;
    color:#17364d;
    font-size:18px;
    font-weight:800;
}

.activity-card-header p {
    margin:4px 0 0;
    color:#8294a3;
    font-size:12px;
}

.activity-live-badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border-radius:999px;
    background:#ecfbf4;
    color:#08794d;
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
}

.activity-live-badge span {
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

.activity-filter {
    padding:16px 24px;
    background:#f8fafc;
    border-bottom:1px solid #e8eef2;
}

.activity-filter-form {
    display:flex;
    align-items:center;
    gap:10px;
}

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

.activity-search i {
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:#8da0ae;
}

.activity-search input {
    width:100%;
    min-height:42px;
    padding-left:38px;
    border:1px solid #dce7ed;
    border-radius:10px;
    background:#fff;
}

.activity-filter-form .form-select {
    width:210px;
    min-height:42px;
    border-radius:10px;
}

.activity-table-wrap {
    width:100%;
    overflow-x:auto;
}

.activity-table {
    width:100%;
    min-width:1080px;
    border-collapse:collapse;
}

.activity-table th {
    padding:13px 18px;
    background:#fbfcfd;
    border-bottom:1px solid #e7eef2;
    color:#718697;
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
    text-align:left;
    white-space:nowrap;
}

.activity-table td {
    padding:16px 18px;
    border-bottom:1px solid #edf2f5;
    vertical-align:middle;
}

.activity-table tbody tr:last-child td {
    border-bottom:0;
}

.activity-table tbody tr:hover {
    background:#fbfdfe;
}

.activity-time {
    color:#526c7f;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:11px;
    white-space:nowrap;
}

.activity-user {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:150px;
}

.activity-avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    background:#087fbc;
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.activity-user strong {
    display:block;
    color:#17364d;
    font-size:12px;
}

.activity-user small {
    display:block;
    margin-top:2px;
    color:#899aa8;
    font-size:10px;
}

.activity-action {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:750;
    white-space:nowrap;
}

.activity-action.success {
    background:#eaf9f1;
    color:#08794d;
}

.activity-action.secondary {
    background:#eef2f5;
    color:#637786;
}

.activity-action.primary {
    background:#eaf5ff;
    color:#0875b0;
}

.activity-action.warning {
    background:#fff7df;
    color:#876b00;
}

.activity-action.danger {
    background:#fff0f1;
    color:#bd3842;
}

.activity-action.info {
    background:#edf8fd;
    color:#0877a8;
}

.activity-detail strong {
    display:block;
    max-width:300px;
    color:#29465b;
    font-size:11px;
    font-weight:650;
}

.activity-detail small {
    display:block;
    max-width:300px;
    margin-top:3px;
    color:#8a9ba8;
    font-size:10px;
}

.activity-ip,
.activity-path {
    color:#657d8e;
    font-size:10px;
}

.activity-path {
    display:block;
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.activity-empty {
    padding:70px 20px;
    text-align:center;
}

.activity-empty-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    margin:0 auto 14px;
    border-radius:18px;
    background:#eef7fb;
    color:#087fbc;
    font-size:25px;
}

.activity-empty h3 {
    margin:0;
    color:#29465b;
    font-size:17px;
}

.activity-empty p {
    margin:6px 0 0;
    color:#899aa8;
    font-size:12px;
}

.activity-security-note {
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-top:16px;
    padding:15px 18px;
    border:1px solid #dcecf4;
    border-radius:14px;
    background:#f5fbfe;
}

.activity-security-note > i {
    color:#087fbc;
    font-size:18px;
}

.activity-security-note strong {
    display:block;
    color:#315167;
    font-size:11px;
}

.activity-security-note span {
    display:block;
    margin-top:2px;
    color:#7b91a0;
    font-size:10px;
}

@media (max-width:1100px) {
    .activity-stat-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:767px) {

    .activity-page {
        padding:22px 16px 40px;
    }

    .activity-page-header {
        flex-direction:column;
    }

    .activity-header-actions {
        width:100%;
    }

    .activity-stat-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .activity-filter-form {
        flex-direction:column;
        align-items:stretch;
    }

    .activity-filter-form .form-select {
        width:100%;
    }
}