:root { 
    --side-w: 300px; 
    --black-metallic: #1c1c1c; 
    --red-kdkmp: #e63946; 
    --bg-body: #f8fafd;
}

body { background-color: var(--bg-body); margin: 0; font-family: 'Segoe UI', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }

.sidebar { 
    width: var(--side-w); height: 100vh; position: fixed; left: 0; top: 0; 
    background: #fff; border-right: 1px solid #eee; z-index: 1001; 
}

.top-navbar { 
    margin-left: var(--side-w); padding: 0 40px; height: 50px; 
    background: var(--black-metallic); display: flex; align-items: center;
    position: sticky; top: 0; z-index: 1000;
}

main { margin-left: var(--side-w); padding: 35px; flex: 1; }

.top-navbar a, .top-navbar span { color: #ffffff; text-decoration: none; font-size: 0.85rem; }
.text-red-kdkmp { color: var(--red-kdkmp) !important; font-weight: bold; }
.user-avatar-red { background: var(--red-kdkmp) !important; color: white !important; width: 32px; height: 32px; font-size: 11px; }

/* KARTU PLATINUM SIMETRIS */
.bank-card {
    background: linear-gradient(135deg, #e5e4e2 0%, #ffffff 50%, #b4b4b4 100%);
    border-radius: 20px; padding: 35px; color: #1a1a1a; position: relative; border: 1px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); max-width: 610px; margin: 0 auto 25px auto; aspect-ratio: 1.62 / 1;
}

.pay-text { color: var(--red-kdkmp); font-weight: bold; }
.qr-box { background: #000; padding: 6px; border-radius: 8px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }

/* AREA MOTIF ADAT DI BAWAH */
.footer-wrapper { margin-left: var(--side-w); margin-top: auto; }
.footer-motif {
    height: 120px; width: 100%;
    background-repeat: repeat-x; background-size: contain; background-position: bottom;
    border-top: 5px solid var(--black-metallic);
}

@media (max-width: 992px) {
    .sidebar { display: none; }
    .top-navbar, main, .footer-wrapper { margin-left: 0; }
}