/* =====================================================================
   Berikode - tampilan area admin
   Bootstrap 5 dipakai sebagai dasar; berkas ini menyesuaikan tampilannya
   dengan token merek Berikode.
   ===================================================================== */

body { background: var(--bk-bg); }

.bka { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }

/* ------------------------------ Sidebar ------------------------------ */
.bka-side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bk-surface);
    border-right: 1px solid var(--bk-line);
    overflow-y: auto;
}

.bka-side-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid var(--bk-line-soft);
}

.bka-side-brand img { height: 24px; display: block; }

.bka-side-tag {
    padding: .1rem .4rem;
    border-radius: 4px;
    background: var(--bk-accent-soft);
    color: var(--bk-accent-dark);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bka-side-nav { flex: 1; padding: .9rem .7rem 2rem; }

.bka-side-group {
    margin: 1.1rem 0 .35rem;
    padding: 0 .55rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bk-dim);
}

.bka-side-group:first-child { margin-top: 0; }

.bka-side-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    margin-bottom: .1rem;
    border-radius: var(--bk-radius-sm);
    color: var(--bk-ink-2);
    font-size: .88rem;
    font-weight: 500;
    transition: background .14s ease, color .14s ease;
}

.bka-side-link i { width: 1.15rem; font-size: 1rem; text-align: center; color: var(--bk-dim); }
.bka-side-link:hover { background: var(--bk-bg-2); color: var(--bk-ink); }
.bka-side-link:hover i { color: var(--bk-ink-2); }

.bka-side-link.is-active {
    background: var(--bk-accent-soft);
    color: var(--bk-accent-dark);
    font-weight: 600;
}

.bka-side-link.is-active i { color: var(--bk-accent); }

.bka-side-badge {
    margin-left: auto;
    min-width: 20px;
    padding: .02rem .34rem;
    border-radius: 999px;
    background: var(--bk-danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
}

/* ------------------------------- Topbar ------------------------------ */
.bka-main { display: flex; flex-direction: column; min-width: 0; }

.bka-top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.5rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bk-line);
}

.bka-top-logo { display: none; }
.bka-top-logo img { height: 22px; display: block; }
.bka-top-title { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.bka-top-spacer { margin-left: auto; }

.bka-user {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .28rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--bk-radius-sm);
    background: none;
    cursor: pointer;
}

.bka-user:hover { background: var(--bk-bg-2); }

.bka-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bk-ink);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
}

.bka-user-info { text-align: left; line-height: 1.25; }
.bka-user-info strong { display: block; font-size: .84rem; color: var(--bk-ink); }
.bka-user-info span { font-size: .74rem; color: var(--bk-dim); }

/* ------------------------------ Konten ------------------------------- */
.bka-content { flex: 1; padding: 1.5rem; }

.bka-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.3rem;
    flex-wrap: wrap;
}

.bka-head h2 { font-size: 1.4rem; margin-bottom: .2rem; }
.bka-head p { margin: 0; color: var(--bk-muted); font-size: .9rem; max-width: 62ch; }
.bka-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Panel */
.bka-panel {
    background: var(--bk-surface);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    margin-bottom: 1.2rem;
}

.bka-panel-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--bk-line-soft);
    flex-wrap: wrap;
}

.bka-panel-head h3 { margin: 0; font-size: .98rem; font-weight: 600; }
.bka-panel-body { padding: 1.1rem; }
.bka-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--bk-line-soft);
    flex-wrap: wrap;
}

/* ---------------------------- Toolbar filter ------------------------- */
.bka-toolbar { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; width: 100%; }
.bka-toolbar-grow { flex: 1 1 220px; min-width: 0; }
.bka-toolbar-item { flex: 0 1 170px; min-width: 0; }
.bka-toolbar .bk-label { font-size: .74rem; margin-bottom: .22rem; }

/* ------------------------------- Tabel ------------------------------- */
.bka-table-wrap { overflow-x: auto; }

.bka-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .88rem;
}

.bka-table thead th {
    padding: .6rem .85rem;
    background: var(--bk-bg-2);
    border-bottom: 1px solid var(--bk-line);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bk-muted);
    text-align: left;
    white-space: nowrap;
}

.bka-table tbody td {
    padding: .68rem .85rem;
    border-bottom: 1px solid var(--bk-line-soft);
    vertical-align: middle;
}

.bka-table tbody tr:last-child td { border-bottom: 0; }
.bka-table tbody tr:hover { background: var(--bk-bg); }
.bka-table .bka-col-no { width: 48px; color: var(--bk-dim); text-align: right; }
.bka-table .bka-col-act { width: 1%; white-space: nowrap; text-align: right; }
.bka-table .bka-main-cell { font-weight: 600; color: var(--bk-ink); }
.bka-table .bka-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tombol aksi ringkas dalam baris */
.bka-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius-sm);
    background: var(--bk-surface);
    color: var(--bk-muted);
    font-size: .88rem;
    cursor: pointer;
}

.bka-act:hover { border-color: var(--bk-accent); color: var(--bk-accent); }
.bka-act-danger:hover { border-color: var(--bk-danger); color: var(--bk-danger); }
.bka-acts { display: inline-flex; gap: .25rem; }

/* ------------------------------ Statistik ---------------------------- */
.bka-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }

.bka-stat {
    display: block;
    padding: 1.05rem 1.15rem;
    background: var(--bk-surface);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}

a.bka-stat:hover { border-color: var(--bk-accent); box-shadow: var(--bk-shadow); }

.bka-stat-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }

.bka-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bk-accent-soft);
    color: var(--bk-accent);
    font-size: .92rem;
}

.bka-stat-label { font-size: .78rem; font-weight: 600; color: var(--bk-muted); }
.bka-stat strong { display: block; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.2; color: var(--bk-ink); }
.bka-stat-sub { font-size: .78rem; color: var(--bk-dim); }

.bka-stat-success .bka-stat-icon { background: rgba(22,163,74,.10); color: var(--bk-success); }
.bka-stat-danger .bka-stat-icon  { background: rgba(220,38,38,.10); color: var(--bk-danger); }
.bka-stat-warning .bka-stat-icon { background: rgba(217,119,6,.10); color: var(--bk-warning); }

/* ------------------------------- Grafik ------------------------------ */
.bka-chart { display: flex; align-items: stretch; gap: .5rem; height: 220px; padding-top: .5rem; }
.bka-chart-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
.bka-chart-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }

.bka-chart-bar { width: 46%; max-width: 20px; border-radius: 3px 3px 0 0; min-height: 3px; }
.bka-chart-in  { background: var(--bk-accent); }
.bka-chart-out { background: #E3B7AF; }
.bka-chart-label { font-size: .7rem; color: var(--bk-dim); }

.bka-legend { display: flex; gap: 1rem; font-size: .78rem; color: var(--bk-muted); }
.bka-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bka-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ------------------------------ Timeline ----------------------------- */
.bka-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 1px solid var(--bk-line); }
.bka-timeline li { position: relative; padding: 0 0 .95rem 1rem; }

.bka-timeline li::before {
    content: '';
    position: absolute;
    left: -1.32rem;
    top: .42rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bk-accent);
    border: 2px solid var(--bk-surface);
}

.bka-timeline strong { display: block; font-size: .88rem; font-weight: 600; }
.bka-timeline span { font-size: .78rem; color: var(--bk-dim); }

/* -------------------------- Item invoice ----------------------------- */
.bka-items-table input, .bka-items-table select { font-size: .86rem; }
.bka-items-table td { padding: .35rem .3rem; vertical-align: top; }
.bka-items-table td:first-child { padding-left: 0; }
.bka-items-table th { font-size: .72rem; padding-bottom: .35rem; }

.bka-total-table { width: 100%; font-size: .9rem; }
.bka-total-table td { padding: .3rem 0; }
.bka-total-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.bka-total-table .bka-total-row td { padding-top: .6rem; border-top: 1px solid var(--bk-line); font-size: 1.05rem; font-weight: 700; }

/* --------------------------- Media library --------------------------- */
.bka-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }

.bka-media-item {
    position: relative;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius-sm);
    background: var(--bk-surface);
    overflow: hidden;
}

.bka-media-thumb { display: block; aspect-ratio: 4 / 3; background: var(--bk-bg-2); }
.bka-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bka-media-meta { padding: .45rem .55rem; }
.bka-media-meta strong { display: block; font-size: .76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bka-media-meta span { font-size: .7rem; color: var(--bk-dim); }

.bka-media-del {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--bk-danger);
    font-size: .78rem;
    cursor: pointer;
    box-shadow: var(--bk-shadow);
}

.bka-media-del:hover { background: var(--bk-danger); color: #fff; }

/* ------------------------------- Login ------------------------------- */
.bka-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.2rem;
    background:
        radial-gradient(800px 400px at 78% 10%, rgba(43, 89, 255, .10), transparent 60%),
        var(--bk-bg);
}

.bka-login {
    width: min(400px, 100%);
    padding: 2rem;
    background: var(--bk-surface);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
}

.bka-login img { height: 26px; margin-bottom: 1.6rem; }

/* --------------------------- Select2 & Bootstrap --------------------- */
.select2-container--bootstrap-5 .select2-selection { border-color: var(--bk-line); border-radius: var(--bk-radius-sm); }
.dropdown-menu { border-color: var(--bk-line); border-radius: var(--bk-radius-sm); box-shadow: var(--bk-shadow); font-size: .88rem; }
.dropdown-item i { width: 1.1rem; }
.modal-content { border-color: var(--bk-line); border-radius: var(--bk-radius); }
.modal-header, .modal-footer { border-color: var(--bk-line-soft); }
.nav-tabs { border-color: var(--bk-line); }
.nav-tabs .nav-link { color: var(--bk-muted); border: 0; border-bottom: 2px solid transparent; font-size: .9rem; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--bk-ink); border-bottom-color: var(--bk-line); }
.nav-tabs .nav-link.active { color: var(--bk-accent); background: none; border-bottom-color: var(--bk-accent); font-weight: 600; }

/* --------------------------- Menu mengambang ------------------------- */
.bka-fab-panel {
    display: block;
    width: min(290px, calc(100vw - 2rem));
    max-height: min(72vh, 580px);
    padding: 0;
    background: var(--bk-surface);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow-lg);
    overflow: hidden;
    transform-origin: bottom right;
    transform: scale(.88) translateY(8px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}

.bka-fab.is-open .bka-fab-panel { opacity: 1; transform: none; }
.bka-fab-panel[hidden] { display: none; }

.bka-fab-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--bk-line-soft);
    background: var(--bk-bg-2);
}

.bka-fab-nav { padding: .55rem .55rem .7rem; max-height: calc(min(72vh, 580px) - 124px); overflow-y: auto; }

.bka-fab-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    padding: .65rem .7rem;
    border-top: 1px solid var(--bk-line-soft);
}

.bka-fab-foot .bk-btn { justify-content: center; }

/* =====================================================================
   Komponen lanjutan: detail, matriks izin, laporan, dan audit
   ===================================================================== */

/* ------------------------- Daftar definisi -------------------------- */
.bka-dl {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: .35rem .8rem;
    margin: 0;
    font-size: .86rem;
}

.bka-dl dt { color: var(--bk-muted); font-weight: 500; }
.bka-dl dd { margin: 0; color: var(--bk-ink); word-break: break-word; }

/* Pada kolom sempit label ditumpuk di atas nilainya. */
@media (max-width: 420px) {
    .bka-dl { grid-template-columns: 1fr; gap: .1rem .8rem; }
    .bka-dl dd { margin-bottom: .45rem; }
}

/* ----------------------------- Catatan ------------------------------ */
.bk-note {
    padding: .7rem .85rem;
    margin-bottom: .8rem;
    border-left: 3px solid var(--bk-line);
    background: var(--bk-bg);
    border-radius: 0 var(--bk-radius-sm) var(--bk-radius-sm) 0;
}

.bk-note:last-child { margin-bottom: 0; }
.bk-note strong { display: block; margin-bottom: .2rem; font-size: .78rem; color: var(--bk-muted); }
.bk-note p { margin: 0; font-size: .87rem; }

.bk-hr { margin: .9rem 0; border: 0; border-top: 1px solid var(--bk-line-soft); }

.bk-list { margin: 0; padding-left: 1.1rem; font-size: .87rem; }
.bk-list li { margin-bottom: .3rem; }
.bk-list li:last-child { margin-bottom: 0; }

.bk-text-success { color: var(--bk-success); }
.bk-text-danger  { color: var(--bk-danger); }

/* -------------------------- Baris tabel khusus ---------------------- */
.bka-table tbody tr.bka-row-active  { background: var(--bk-accent-soft); }
.bka-table tbody tr.bka-row-warn td { background: rgba(217, 119, 6, .06); }
.bka-table tbody tr.bka-row-muted td { opacity: .55; }
.bka-table tbody tr.bka-row-detail:hover { background: transparent; }

.bka-table tr.bka-row-total td,
.bka-table tfoot tr.bka-row-total td {
    font-weight: 700;
    color: var(--bk-ink);
    background: var(--bk-bg);
}

.bka-table tfoot td {
    padding: .6rem .75rem;
    border-top: 1px solid var(--bk-line);
    font-size: .87rem;
}

/* Tabel yang berisi input pada setiap selnya. */
.bka-table-form tbody td { padding: .4rem .45rem; vertical-align: middle; }
.bka-table-form .bk-input { padding: .4rem .55rem; font-size: .85rem; }
.bka-table-form .bk-item-sub { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ------------------------------- Tab -------------------------------- */
.bka-tabs {
    display: flex;
    gap: .3rem;
    margin-bottom: 1rem;
    padding-bottom: .1rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--bk-line);
}

.bka-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border-bottom: 2px solid transparent;
    color: var(--bk-muted);
    font-size: .87rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.bka-tab:hover { color: var(--bk-ink); }

.bka-tab.is-active {
    border-bottom-color: var(--bk-accent);
    color: var(--bk-accent);
    font-weight: 600;
}

.bka-tab-count {
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--bk-bg-2);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.bka-tab.is-active .bka-tab-count { background: var(--bk-accent-soft); color: var(--bk-accent); }

/* --------------------- Ringkasan angka pada form -------------------- */
.bka-summary { border-top: 1px solid var(--bk-line-soft); background: var(--bk-bg); }

.bka-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .32rem 0;
    font-size: .88rem;
}

.bka-summary-row span { color: var(--bk-muted); }
.bka-summary-row strong { font-variant-numeric: tabular-nums; }

.bka-summary-total {
    margin-top: .35rem;
    padding-top: .6rem;
    border-top: 1px solid var(--bk-line);
}

.bka-summary-total span { color: var(--bk-ink); font-weight: 600; }
.bka-summary-total strong { font-size: 1.1rem; color: var(--bk-accent); }

/* ------------------------ Batang aksi menempel ---------------------- */
.bka-sticky-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1rem;
    padding: .75rem 1.1rem;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    background: var(--bk-surface);
    box-shadow: var(--bk-shadow);
}

.bka-sticky-foot .bk-small { margin-right: auto; }

/* ----------------------- Pilihan role & izin ------------------------ */
.bka-role-opt,
.bka-perm-opt {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem .6rem;
    margin-bottom: .3rem;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bka-role-opt:hover,
.bka-perm-opt:hover { border-color: var(--bk-accent); background: var(--bk-accent-soft); }

.bka-role-opt input,
.bka-perm-opt input { margin-top: .2rem; flex: 0 0 auto; }

.bka-role-opt > span,
.bka-perm-opt > span { display: flex; flex-direction: column; gap: .1rem; font-size: .86rem; }

.bka-role-opt strong { font-size: .9rem; }

.bka-perm-opt code {
    font-size: .72rem;
    color: var(--bk-dim);
    background: none;
    padding: 0;
}

.bka-perm-opt input:disabled { cursor: not-allowed; }
.bka-perm-opt:has(input:disabled) { cursor: not-allowed; opacity: .75; }

.bka-perm-group { break-inside: avoid; }

.bka-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
}

.bka-perm-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bka-perm-all {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bk-accent);
    font: inherit;
    font-size: .7rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.bka-perm-all:hover { text-decoration: underline; }

/* ------------------------------ Chip -------------------------------- */
.bka-chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.bka-chip {
    padding: .2rem .5rem;
    border: 1px solid var(--bk-line);
    border-radius: 999px;
    background: var(--bk-bg);
    color: var(--bk-ink-2);
    font-size: .72rem;
}

/* --------------------- Baris kategori pada laporan ------------------ */
.bka-catrow { margin-bottom: .85rem; }
.bka-catrow:last-child { margin-bottom: 0; }

.bka-catrow-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .25rem;
    font-size: .87rem;
}

.bka-catrow-top strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bka-catrow-track {
    height: 6px;
    margin-bottom: .2rem;
    border-radius: 999px;
    background: var(--bk-bg-2);
    overflow: hidden;
}

.bka-catrow-fill { height: 100%; border-radius: 999px; }

/* ------------------------- Rincian audit log ------------------------ */
.bka-diff-wrap { padding: .7rem .9rem 1rem; background: var(--bk-bg); }

.bka-diff-head,
.bka-diff tr {
    display: grid;
    grid-template-columns: 22% 39% 39%;
    gap: .6rem;
}

.bka-diff-head {
    padding: 0 .1rem .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bk-dim);
}

.bka-diff { width: 100%; font-size: .8rem; }

.bka-diff th,
.bka-diff td {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--bk-line-soft);
    text-align: left;
    word-break: break-word;
}

.bka-diff th { color: var(--bk-muted); font-weight: 500; }
.bka-diff-old { color: var(--bk-danger); }
.bka-diff-new { color: var(--bk-success); }
.bka-diff em { color: var(--bk-dim); font-style: normal; }

@media (max-width: 640px) {
    .bka-diff-head { display: none; }
    .bka-diff tr { grid-template-columns: 1fr; gap: 0; padding: .4rem 0; border-bottom: 1px solid var(--bk-line); }
    .bka-diff th { padding-bottom: .1rem; }
    .bka-diff td { border-bottom: 0; padding-top: .1rem; }
    .bka-diff-old::before { content: 'Sebelum: '; color: var(--bk-dim); }
    .bka-diff-new::before { content: 'Sesudah: '; color: var(--bk-dim); }
}

/* --------------------------- Aksi media ----------------------------- */
.bka-media-acts {
    display: flex;
    gap: .2rem;
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid var(--bk-line-soft);
}

.bka-media-acts .bka-act { width: 26px; height: 26px; font-size: .78rem; }


/* ------------------------------ Responsif ---------------------------- */
@media (max-width: 980px) {
    .bka { grid-template-columns: 1fr; }
    .bka-side { display: none; }
    .bka-top-logo { display: block; }
    .bka-top { padding: .6rem 1rem; }
    .bka-user-info { display: none; }
    .bka-content { padding: 1rem 1rem 6rem; }
    .bka-head h2 { font-size: 1.2rem; }
    .bka-head-actions { width: 100%; }
    .bka-head-actions .bk-btn { flex: 1 1 auto; justify-content: center; }
    .bka-toolbar-item, .bka-toolbar-grow { flex: 1 1 100%; }
    .bka-stats { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .bka-stat { padding: .8rem .85rem; }
    .bka-stat strong { font-size: 1.25rem; }
    .bka-panel-foot { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
    .bka-stats { grid-template-columns: 1fr; }
    .bka-table { font-size: .84rem; }
    .bka-table thead th, .bka-table tbody td { padding: .55rem .6rem; }
}