:root {
--desa-blue: #0a4ea1;
--desa-blue-dark: #083d80;
--desa-secondary: #f4f6f8;
--desa-border: rgba(255,255,255,0.2);
} * { box-sizing: border-box; }
body {
margin: 0;
background: var(--desa-secondary);
font-family: system-ui, sans-serif;
} #desa-header-wrapper {
height: 56px;
background: var(--desa-blue);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
position: fixed;
inset: 0 0 auto 0;
z-index: 1000;
border-bottom: 4px solid #f59e0b;
}
.header-left {
display: flex;
align-items: center;
gap: 14px;
}
#mobile-toggle {
cursor: pointer;
font-size: 22px;
}
.header-title {
font-weight: 600;
font-size: 15px;
} #desa-public-nav ul {
display: flex;
gap: 8px;
}
#desa-public-nav a {
color: #fff;
padding: 8px;
border-radius: 6px;
}
#desa-public-nav a:hover {
background: rgba(255,255,255,0.15);
}
@media (max-width: 768px) {
#desa-public-nav .link-text { display: none; }
} #desa-page-wrapper {
display: flex;
padding-top: 56px;
width: 100%; } #desa-sidebar-nav {
width: 260px; background: var(--desa-blue-dark);
color: #fff;
transition: width .3s ease, transform .3s ease;
position: sticky;
top: 56px;
height: calc(100vh - 56px);
overflow-y: auto;
border-right: 4px solid #f59e0b; flex-shrink: 0;
} .sidebar-collapsed #desa-sidebar-nav {
width: 70px;
} .sidebar-user-status {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-bottom:1px solid var(--desa-border);
}
.sidebar-user-status i {
font-size: 32px;
} .sidebar-menu { padding: 12px 0; }
.menu-category-title {
padding: 12px 20px;
font-size: 11px;
opacity: .7;
}
.menu-item a,
.menu-item-dropdown a {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
font-size: 15px;
color: #fff;
} @media (min-width: 769px) {
.menu-item a:hover,
.menu-item-dropdown a:hover {
background: linear-gradient(
90deg,
rgba(255,255,255,.25),
rgba(255,255,255,0)
);
padding-left: 24px;
}
}
.menu-item a i,
.menu-item-dropdown a i {
font-size: 20px;
min-width: 24px;
}
.arrow-icon {
margin-left: auto;
transition: transform .3s ease;
} .submenu {
display: none;
background: rgba(0,0,0,.18);
padding: 8px 0;
}
.submenu li {
margin-bottom: 4px;
}
.submenu li:last-child {
margin-bottom: 0;
}
.submenu li a {
padding: 10px 20px 10px 52px;
font-size: 14px;
color: #fff;
}
.submenu li a:hover {
background: rgba(255,255,255,.15);
}
.menu-open + .submenu {
display: block;
}
.menu-open .arrow-icon {
transform: rotate(90deg);
} .sidebar-collapsed .submenu {
display: none !important;
} .sidebar-collapsed .sidebar-link-text,
.sidebar-collapsed .menu-category-title,
.sidebar-collapsed .user-text,
.sidebar-collapsed .arrow-icon {
display: none;
}
.sidebar-collapsed .sidebar-user-status,
.sidebar-collapsed .sidebar-menu a {
justify-content: center;
} @media (max-width: 768px) {
#desa-sidebar-nav {
position: fixed;
top: 56px;
bottom: 0;
left: 0;
transform: translateX(-100%);
z-index: 1200;
}
body.sidebar-open #desa-sidebar-nav {
transform: translateX(0);
}
} a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; } #desa-footer {
background: var(--desa-blue);
color: #ffffff;
padding: 14px 20px;
margin-top: auto;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
opacity: 0.95;
}
@media (max-width: 768px) {
.footer-inner {
flex-direction: column;
gap: 6px;
text-align: center;
}
}
.footer-right strong {
font-weight: 600;
}  #main {
flex: 1; min-width: 0; display: flex;   
flex-direction: column; width: 100%;
} .login-page-wrapper {
min-height: calc(100vh - 56px);
display: flex;
justify-content: center;
align-items: center;
background: var(--desa-secondary);
padding: 20px;
}
.login-card {
width: 100%;
max-width: 380px;
background: #0f4fa8;
color: #fff;
border-radius: 10px;
padding: 28px 24px;
box-shadow: 0 15px 40px rgba(0,0,0,.2);
}
.login-header {
text-align: center;
margin-bottom: 24px;
}
.login-header i {
font-size: 42px;
margin-bottom: 10px;
}
.login-header h2 {
margin: 0;
font-size: 20px;
}
.login-header p {
font-size: 13px;
opacity: .85;
}
.login-form .form-group {
margin-bottom: 16px;
}
.login-form label {
display: block;
font-size: 13px;
margin-bottom: 6px;
}
.login-form input {
width: 100%;
padding: 10px 12px;
border-radius: 6px;
border: none;
font-size: 14px;
}
.login-form input:disabled {
background: #e5e7eb;
}
.login-button {
width: 100%;
padding: 11px;
border: none;
border-radius: 6px;
background: #ffffff;
color: #0f4fa8;
font-weight: 600;
cursor: not-allowed;
display: flex;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.login-footer {
text-align: center;
margin-top: 16px;
}
.login-footer a {
font-size: 13px;
color: #e0e7ff;
} body.login-admin-standalone {
margin: 0;
background: var(--desa-secondary);
}
body.login-admin-standalone #desa-header-wrapper,
body.login-admin-standalone #desa-sidebar-nav,
body.login-admin-standalone footer {
display: none !important;
}  body.page-template-page-login-warga #desa-header-wrapper,
body.page-template-page-login-warga #desa-sidebar-nav,
body.page-template-page-login-warga #desa-footer,
body.page-template-lupa-pin #desa-header-wrapper,
body.page-template-lupa-pin #desa-sidebar-nav,
body.page-template-lupa-pin #desa-footer {
display: none !important;
} body.page-template-page-login-warga,
body.page-template-lupa-pin {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
margin: 0;
width: 100vw; } body.page-template-page-login-warga #page,
body.page-template-page-login-warga .site-grid,
body.page-template-page-login-warga .container,
body.page-template-page-login-warga .site-content,
body.page-template-page-login-warga main,
body.page-template-lupa-pin #page,
body.page-template-lupa-pin .site-grid,
body.page-template-lupa-pin .container,
body.page-template-lupa-pin .site-content,
body.page-template-lupa-pin main {
width: 100% !important;
max-width: 100% !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
background: transparent; } body.page-template-page-login-warga .login-wrapper,
body.page-template-lupa-pin .login-wrapper {
width: 100%;
max-width: 400px;
display: block; z-index: 10; }
body.page-template-page-login-warga .login-box,
body.page-template-lupa-pin .login-box {
background: #ffffff;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(10, 78, 161, 0.1);
text-align: center;
border: 1px solid #bae6fd;
width: 100%; } body.page-template-page-login-warga .login-icon-wrapper,
body.page-template-lupa-pin .login-icon-wrapper {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--desa-blue), #0ea5e9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: #ffffff;
font-size: 32px;
box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
} body.page-template-page-login-warga h2,
body.page-template-lupa-pin h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: var(--desa-blue-dark);
}
body.page-template-page-login-warga p,
body.page-template-lupa-pin p {
font-size: 14px;
color: #64748b;
margin-bottom: 30px;
} body.page-template-page-login-warga .input-group,
body.page-template-lupa-pin .input-group {
text-align: left;
margin-bottom: 20px;
}
body.page-template-page-login-warga .input-group label,
body.page-template-lupa-pin .input-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: #475569;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
body.page-template-page-login-warga input[type="text"],
body.page-template-page-login-warga input[type="password"],
body.page-template-lupa-pin input[type="text"],
body.page-template-lupa-pin input[type="tel"] {
width: 100%;
padding: 12px 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 15px;
transition: all 0.2s ease;
font-family: inherit;
}
body.page-template-page-login-warga input:focus,
body.page-template-lupa-pin input:focus {
border-color: var(--desa-blue);
outline: none;
box-shadow: 0 0 0 3px rgba(10, 78, 161, 0.1);
} body.page-template-page-login-warga .btn-login,
body.page-template-lupa-pin .btn-login {
width: 100%;
padding: 14px;
background: var(--desa-blue);
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 6px rgba(10, 78, 161, 0.2);
}
body.page-template-page-login-warga .btn-login:hover,
body.page-template-lupa-pin .btn-login:hover {
background: var(--desa-blue-dark);
transform: translateY(-2px);
box-shadow: 0 10px 15px rgba(10, 78, 161, 0.3);
} body.page-template-page-login-warga .login-footer-links,
body.page-template-lupa-pin .login-footer-links {
margin-top: 20px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
body.page-template-page-login-warga .login-footer-links a,
body.page-template-lupa-pin .login-footer-links a {
font-size: 13px;
color: var(--desa-blue);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.2s;
}
body.page-template-page-login-warga .login-footer-links a:hover,
body.page-template-lupa-pin .login-footer-links a:hover {
color: #f59e0b;
} body.page-template-page-login-warga .login-error {
background: #fee2e2;
color: #b91c1c;
padding: 12px;
font-size: 13px;
border-radius: 8px;
margin-bottom: 25px;
border: 1px solid #fecaca;
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
@media (max-width: 480px) {
body.page-template-page-login-warga .login-box,
body.page-template-lupa-pin .login-box {
padding: 30px 20px;
}
body.page-template-page-login-warga h2,
body.page-template-lupa-pin h2 {
font-size: 20px;
}
}