:root {
    --drawer-w: 1020px; /* lebar default di desktop */
    --drawer-z: 2140; /* pastikan > z-index header */
}

/* BACKDROP hitam transparan - nutup seluruh layar */
.drawer-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0,0,0,.55);
    z-index: var(--drawer-z);
    animation: fadeIn .15s ease-out;
}

/* PANEL kanan full height */
.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(100vw, var(--drawer-w));
    background: #fff;
    z-index: calc(var(--drawer-z) + 1);
    display: grid;
    grid-template-rows: auto 1fr auto; /* header, body, footer */
    box-shadow: -4px 0 24px rgba(0,0,0,.25);
    animation: slideIn .18s ease-out;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.drawer-body {
    padding: 16px;
    overflow: auto;
}

.drawer-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Mobile: penuh lebar */
@media (max-width: 640px) {
    :root {
        --drawer-w: 100vw;
    }
}

/* Animasi */
@keyframes slideIn {
    from {
        transform: translateX(16px);
        opacity: .7;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== Page Transition (fade + slide-in) ===== */
@keyframes page-fade-slide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-animate {
    animation: page-fade-slide .32s ease-out;
    will-change: opacity, transform;
}

/* Opsional: haluskan komponen di dalam card yang muncul belakangan (grid, dsb.) */
.page-body-card > * {
    transition: opacity .2s ease, transform .2s ease;
}

/* === Samakan lebar konten dengan header (full-bleed) === */
.layout-page .content-wrapper .container-xxl {
    max-width: 100% !important; /* buang batas container */
}

/* HANYA berlaku kalau ada wrapper .fullbleed */
.fullbleed .rz-card:first-of-type {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
    border: 1px solid rgba(67,89,113,.08);
    border-radius: .8rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

    .fullbleed .rz-card:first-of-type .rz-card-body {
        padding: clamp(18px,3.5vw,32px) clamp(16px,4vw,40px);
    }


/* Opsional: rapikan jarak atas setelah headbar */
.page-headbar + .content-wrapper .container-xxl {
    padding-top: 14px !important;
}