:root {
    --charcoal:   #171614;
    --charcoal-2: #24221E;
    --cream:      #F4ECDF;
    --cream-dark: #E7D8C0;
    --gold:       #C7A66A;
    --gold-light: #E1C58E;
    --sidebar-w:  260px;
}
body { font-family: 'Lato', sans-serif; background-color: var(--cream); color: var(--charcoal); min-height: 100vh; }
h1, h2, h3, h4, .font-vintage { font-family: 'Playfair Display', serif; }

.btn-gold { background-color: var(--gold); border: 1px solid var(--gold); color: var(--charcoal); font-weight: 700; }
.btn-gold:hover, .btn-gold:focus { background-color: var(--gold-light); border-color: var(--gold-light); color: var(--charcoal); }
.btn-outline-gold { border: 1px solid var(--gold); color: var(--gold-light); background: transparent; }
.btn-outline-gold:hover { background: var(--gold); color: var(--charcoal); }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(199,166,106,.3); }

.monogram { width: 80px; height: 80px; border: 2px solid var(--gold); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--gold); margin-bottom: 1rem; }
.tagline { letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; color: var(--gold); }
.auth-page { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(circle at 80% 15%, rgba(199,166,106,.18), transparent 45%), var(--charcoal); }
.auth-card { width: 100%; max-width: 420px; background: var(--charcoal-2); color: var(--cream); border: 1px solid var(--gold); border-radius: 16px; padding: 2rem; text-align: center; }
.auth-card h1 { color: var(--gold-light); }
.auth-card .form-label { color: var(--gold-light); font-weight: 700; }

.app-wrapper { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--charcoal); color: var(--cream); position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 3px solid var(--gold); display: flex; flex-direction: column; }
.sidebar-brand { padding: 1.5rem 1rem 1rem; text-align: center; border-bottom: 1px solid var(--charcoal-2); }
.sidebar-brand .monogram { width: 56px; height: 56px; font-size: 1.5rem; margin-bottom: .5rem; }
.sidebar-brand .nama { font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.05rem; line-height: 1.2; }
.sidebar-menu { list-style: none; padding: 1rem .75rem; margin: 0; }
.sidebar-menu a { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; margin-bottom: .25rem; border-radius: 10px; color: var(--cream-dark); text-decoration: none; }
.sidebar-menu a i { color: var(--gold); font-size: 1.15rem; }
.sidebar-menu a:hover { background: var(--charcoal-2); color: var(--gold-light); }
.sidebar-menu a.aktif { background: var(--charcoal-2); color: var(--gold-light); border-left: 3px solid var(--gold); font-weight: 700; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-navbar { background: #fffdf8; border-bottom: 1px solid var(--cream-dark); padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.app-navbar .judul { font-family: 'Playfair Display', serif; font-size: 1.35rem; margin: 0; }
.btn-toggle-sidebar { display: none; border: 1px solid var(--cream-dark); background: #fff; }
.app-content { flex: 1; padding: 1.5rem; }
.app-footer { text-align: center; padding: 1rem; font-size: .85rem; color: #6b6558; border-top: 1px solid var(--cream-dark); }

.card-naradipa { background: #fffdf8; border: 1px solid var(--cream-dark); border-radius: 14px; }
.card-naradipa .card-header-naradipa { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cream-dark); font-family: 'Playfair Display', serif; font-size: 1.1rem; }
.table-naradipa thead th { background: var(--charcoal-2); color: var(--gold-light); font-weight: 700; border: 0; white-space: nowrap; }
.table-naradipa tbody tr:hover { background: rgba(199,166,106,.1); }

@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: calc(-1 * var(--sidebar-w) - 10px); z-index: 1040; transition: left .25s; }
    body.sidebar-open .sidebar { left: 0; }
    .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1030; }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .btn-toggle-sidebar { display: inline-block; }
}