*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f3f6fb;
}

/* HEADER */

.header{
    height:75px;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:999;
}
/* Tombol Sidebar */
.btn-sidebar{

    width:70px;
    height:60px;

    border:none;
    border-radius:15px;

    background:#ffffff;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:3px;

    cursor:pointer;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.btn-sidebar i{

    font-size:24px;
    color:#0F766E;

}

.btn-sidebar span{

    font-size:10px;
    font-weight:600;
    color:#0F766E;

    white-space:nowrap;

}

/* Logo Desa */
.logo-desa{

    width:55px;

}

.header h2{
    font-size:28px;
}

.header small{
    color:#666;
}

.logo{
    width:55px;
}

/* WELCOME */

.welcome{
    padding:25px;
}

.welcome h3{
    font-size:28px;
}

.welcome p{
    color:#666;
    margin-top:8px;
}

/* SEARCH */

.search-box{
    padding:0 25px 20px;
}

.search-box input{
    width:100%;
    padding:15px;
    border:none;
    border-radius:12px;
    background:white;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    font-size:16px;
}

/* GRID */

#gridMenu{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

padding:25px;

}

.grid-item{

background:white;

border-radius:20px;

padding:35px;

text-align:center;

cursor:pointer;

transition:.3s;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.grid-item:hover{

transform:translateY(-8px);

}

.grid-item i{

font-size:42px;

margin-bottom:15px;

display:block;

}

.grid-item h6{

font-size:18px;

font-weight:600;

}
/* ==========================
   TOOLBAR
========================== */

.toolbar{

padding:15px;

}

.toolbar input{

width:100%;

padding:12px;

border-radius:10px;

border:1px solid #ddd;

font-size:15px;

margin-bottom:15px;

}

.button-group{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.btn{

border:none;

padding:10px 18px;

border-radius:10px;

color:white;

font-weight:600;

cursor:pointer;

}

.hijau{

background:#16A34A;

}

.biru{

background:#2563EB;

}

.orange{

background:#F97316;

}

/* ==========================
TABLE
========================== */

.table-container{

overflow:auto;

padding:15px;

}

table{

border-collapse:collapse;

min-width:2300px;

background:white;

}

th{

background:#16A34A;

color:white;

padding:10px;

font-size:14px;

white-space:nowrap;

}

td{

padding:10px;

border:1px solid #ddd;

font-size:13px;

white-space:nowrap;

}

tbody tr:hover{

background:#F3F4F6;

}
.toolbar{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:20px 0;
}

.toolbar input{
flex:1;
padding:12px;
border-radius:10px;
border:1px solid #ddd;
}

.toolbar button{
padding:10px 16px;
border:none;
border-radius:10px;
background:#16A34A;
color:white;
cursor:pointer;
}

.table-container{
overflow-x:auto;
background:white;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

table{
border-collapse:collapse;
min-width:2400px;
width:100%;
}

th{
background:#16A34A;
color:white;
padding:10px;
white-space:nowrap;
}

td{
padding:10px;
border-bottom:1px solid #eee;
white-space:nowrap;
}
/* ===============================
   B1 PENDUDUK
================================ */

.page-header{

display:flex;

align-items:center;

gap:20px;

background:white;

padding:20px;

border-radius:15px;

margin-bottom:20px;

}

.back-btn{

width:45px;

height:45px;

border:none;

border-radius:12px;

cursor:pointer;

font-size:22px;

}

.summary{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-bottom:20px;

}

.summary-card{

background:white;

padding:20px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.05);

text-align:center;

}

.summary-card h2{

font-size:34px;

color:#16A34A;

margin-bottom:10px;

}

.toolbar{

display:flex;

gap:10px;

margin-bottom:20px;

flex-wrap:wrap;

}

.toolbar input{

flex:1;

padding:14px;

border-radius:12px;

border:1px solid #ddd;

}

.toolbar button{

padding:12px 18px;

border:none;

border-radius:12px;

background:#16A34A;

color:white;

cursor:pointer;

font-weight:600;

}

.table-box{

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.table-responsive{

overflow:auto;

}

#tblPenduduk{

border-collapse:collapse;

min-width:2600px;

width:100%;

}

#tblPenduduk th{

background:#16A34A;

color:white;

padding:12px;

white-space:nowrap;

}

#tblPenduduk td{

padding:10px;

border-bottom:1px solid #eee;

white-space:nowrap;

}

.empty{

text-align:center;

padding:50px !important;

color:#777;

}

.footer-table{

margin-top:15px;

font-weight:600;

}
/*=========================
MODAL
=========================*/

.modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

justify-content:center;

align-items:center;

z-index:9999;

}

.modal-content{

background:#fff;

width:90%;

max-width:1100px;

border-radius:15px;

padding:25px;

max-height:90vh;

overflow:auto;

}

.modal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.modal-header span{

font-size:30px;

cursor:pointer;

}

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.form-grid input,
.form-grid select{

padding:12px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

font-family:Poppins;

}

.modal-footer{

margin-top:25px;

display:flex;

justify-content:flex-end;

gap:10px;

}

.modal-footer button{

padding:12px 20px;

border:none;

border-radius:10px;

cursor:pointer;

background:#16A34A;

color:white;

font-weight:600;

}

#btnBatal{

background:#9CA3AF;

}
/* ===========================
   PAGINATION
=========================== */

#pagination{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin:20px;

}

#pagination button{

padding:10px 18px;

border:none;

border-radius:8px;

background:#16A34A;

color:white;

cursor:pointer;

font-weight:600;

}

#pagination button:disabled{

background:#cccccc;

cursor:not-allowed;

}
/*==============================
PAGINATION
==============================*/

#pagination{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin:25px 0;

flex-wrap:wrap;

}

#pagination button{

background:#16A34A;

color:white;

border:none;

padding:10px 18px;

border-radius:8px;

cursor:pointer;

font-size:14px;

font-weight:600;

transition:.3s;

}

#pagination button:hover{

background:#15803D;

}

#pagination button:disabled{

background:#bdbdbd;

cursor:not-allowed;

}

.page-info{

font-size:15px;

font-weight:600;

}
/*=====================================
TOOLBAR
=====================================*/

.toolbar{

display:flex;

gap:10px;

flex-wrap:wrap;

align-items:center;

margin-bottom:15px;

}

.toolbar input{

flex:1;

min-width:250px;

padding:10px;

border:1px solid #ddd;

border-radius:8px;

}

.toolbar button{

padding:10px 16px;

border:none;

border-radius:8px;

cursor:pointer;

font-weight:bold;

background:#16A34A;

color:white;

transition:.3s;

}

.toolbar button:hover{

transform:translateY(-2px);

}

.infoBar{

margin-bottom:15px;

font-weight:bold;

color:#444;

}
/*==========================
HEADER BARU
==========================*/

.header-app{

    display:flex;
    align-items:center;
    gap:18px;

    background:linear-gradient(90deg,#0f5132,#198754);

    color:white;

    padding:15px 20px;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

}

.btn-back{

    width:45px;
    height:45px;

    border:none;

    border-radius:10px;

    background:white;

    color:#198754;

    cursor:pointer;

    font-size:20px;

}

.logo-desa{

    width:70px;

    height:70px;

    object-fit:contain;

}

.judul-app{

    flex:1;

}

.judul-app h1{

    margin:0;

    font-size:26px;

    font-weight:bold;

}

.judul-app h2{

    margin:2px 0;

    color:#FFD54F;

    font-size:18px;

}

.judul-app p{

    margin:4px 0;

}

.judul-app span{

    font-size:13px;

    opacity:.9;

}
.logo-desa{
    width:70px;
    height:70px;
    object-fit:contain;
}
.grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(230px,1fr));

gap:25px;

padding:20px;

}

.card-buku{

background:#fff;

border-radius:18px;

overflow:hidden;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.15);

transition:.3s;

}

.card-buku:hover{

transform:translateY(-8px);

}

.cover-buku{

width:100%;

height:300px;

object-fit:cover;

display:block;

}

.info-buku{

padding:15px;

text-align:center;

}

.info-buku h3{

margin:0;

font-size:22px;

}

.info-buku p{

margin:8px 0;

}

.badge{

display:inline-block;

padding:6px 15px;

border-radius:20px;

color:#fff;

font-size:13px;

font-weight:bold;

}

.badge.spreadsheet{

background:#16A34A;

}

.badge.folder{

background:#2563EB;

}

.badge.pdf{

background:#DC2626;

}
.hero{

background:white;

margin:20px;

padding:30px;

border-radius:20px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.hero h2{

margin-bottom:10px;

color:#0f766e;

}

.hero p{

color:#666;

line-height:1.6;

}

.statistik{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

gap:20px;

margin-top:25px;

}

.stat-card{

background:#0f766e;

color:white;

padding:20px;

border-radius:15px;

text-align:center;

}

.stat-card h3{

font-size:32px;

margin-bottom:5px;

}

.search-box{

padding:0 20px 20px;

}

.search-box input{

width:100%;

padding:16px;

border-radius:12px;

border:1px solid #ddd;

font-size:16px;

outline:none;

}

.search-box input:focus{

border:2px solid #0f766e;

}
.buku{

cursor:pointer;

transition:.3s;

text-align:center;

}

.cover{

position:relative;

overflow:hidden;

border-radius:18px;

box-shadow:0 8px 20px rgba(0,0,0,.18);

}

.cover img{

width:100%;

display:block;

transition:.4s;

}

.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.35s;

}

.overlay button{

background:white;

border:none;

padding:12px 20px;

border-radius:10px;

font-weight:bold;

cursor:pointer;

}

.buku:hover{

transform:translateY(-10px);

}

.buku:hover img{

transform:scale(1.05);

}

.buku:hover .overlay{

opacity:1;

}

.buku h3{

margin:12px 0 5px;

color:#0f766e;

}

.buku p{

font-weight:600;

margin:0;

}
.judul-section{

margin:35px 0 15px;

font-size:22px;

font-weight:700;

color:#0f766e;

border-left:6px solid #0f766e;

padding-left:12px;

}
/*=============================
Aplikasi Pendukung
=============================*/

.app-section{

margin-top:40px;

}

.app-section h3{

font-size:22px;

color:#0f766e;

margin-bottom:15px;

}

.app-item{

display:flex;

align-items:center;

justify-content:space-between;

background:white;

padding:15px 18px;

margin-bottom:12px;

border-radius:14px;

box-shadow:0 3px 12px rgba(0,0,0,.08);

cursor:pointer;

transition:.3s;

}

.app-item:hover{

transform:translateX(6px);

background:#f0fdfa;

}

.app-left{

display:flex;

align-items:center;

gap:15px;

}

.app-logo{

width:45px;

height:45px;

object-fit:contain;

}

.app-title{

font-weight:600;

font-size:16px;

}

.app-arrow{

font-size:22px;

color:#0f766e;

}
/*==========================
SIDEBAR
==========================*/

.sidebar{

position:fixed;

top:0;

right:-320px;

width:300px;

height:100%;

background:white;

box-shadow:-5px 0 20px rgba(0,0,0,.2);

transition:.35s;

z-index:999;

overflow:auto;

}

.sidebar.active{

right:0;

}

.sidebar-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

background:#0f766e;

color:white;

}

.sidebar-header button{

background:none;

border:none;

color:white;

font-size:22px;

cursor:pointer;

}

.btn-sidebar{
    background: none;
    border: none;
    color: white;
    font-size: 26px;
    cursor: pointer;
    margin-left: auto;
    padding: 8px;
}

.sidebar-item{

display:flex;

align-items:center;

gap:15px;

padding:15px 18px;

border-bottom:1px solid #eee;

cursor:pointer;

transition:.3s;

}

.sidebar-item:hover{

background:#f0fdfa;

}

.sidebar-item img{

width:42px;

height:42px;

object-fit:contain;

}

.sidebar-item span{

font-weight:600;

}
/*==============================
OVERLAY
==============================*/

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:998;
}

.overlay.active{
    opacity:1;
    visibility:visible;
}

/*==============================
SIDEBAR
==============================*/

.sidebar{
    position:fixed;
    top:0;
    right:-330px;
    width:320px;
    height:100%;
    background:#fff;
    box-shadow:-10px 0 25px rgba(0,0,0,.2);
    transition:.35s;
    z-index:999;
    overflow-y:auto;
}

.sidebar.active{
    right:0;
}

.sidebar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
    background:#0F766E;
    color:white;
}

.sidebar-header h3{
    margin:0;
}

.sidebar-header button{
    border:none;
    background:none;
    color:white;
    font-size:24px;
    cursor:pointer;
}
.sidebar-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

cursor:pointer;

border-bottom:1px solid #eee;

transition:.25s;

}

.sidebar-item:hover{

background:#F0FDFA;

}

.sidebar-item span{

flex:1;

margin-left:12px;

font-weight:600;

}

.sidebar-item i:first-child{

font-size:22px;

color:#0F766E;

}
.title{

     margin-left:20px;

    background:#0F766E;

    color:white;

    padding:5px 18px;

    border-radius:10px;

    flex:1;

    box-shadow:0 4px 5px rgba(0,0,0,.15);

}
.title h2{

    color:white;

    margin:0;

    font-size:28px;

}

.title p{

    color:#E5E7EB;

    margin-top:2px;

    font-size:14px;

}
/* =========================================
   KUMPULAN PORTAL DESA
========================================= */

.portal-list{

    display:grid;

    grid-template-columns:
    repeat(auto-fill, minmax(220px, 1fr));

    gap:25px;

    padding:30px;

}


/* Kartu Portal */

.portal-card{

    background:white;

    border-radius:18px;

    padding:25px;

    min-height:180px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:.3s;

}


.portal-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 30px rgba(0,0,0,.2);

}


/* Ikon */

.portal-card > i{

    font-size:48px;

    color:#0F766E;

    margin-bottom:15px;

}


/* Nama Portal */

.portal-card h4{

    margin:0;

    font-size:18px;

    color:#111;

}


/* Kategori */

.portal-card p{

    margin-top:8px;

    color:#777;

    font-size:14px;

}
.portal-logo{
    width:120px;
    height:120px;
    object-fit:contain;
}

.btn-kembali {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    background: white;

    color: #1e3a8a;

    padding: 11px 18px;

    border-radius: 12px;

    font-weight: 600;

    margin-bottom: 18px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, .08);

    transition: .2s;

}


.btn-kembali:hover {

    background: #1e3a8a;

    color: white;

    transform: translateX(-3px);

}

.drive-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    box-sizing: border-box;

    margin-top: 10px;
    padding: 14px;

    background: #16a34a;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    transition: 0.2s;
}

.drive-btn:hover {
    background: #15803d;
}

.drive-btn i {
    font-size: 17px;
}

/* ==========================================
   AGENDA HOME
========================================== */

.agenda-home {

    margin: 18px 16px;

    padding: 18px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: white;

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow:
        0 8px 20px rgba(37,99,235,0.20);

}


.agenda-home-icon {

    width: 52px;
    height: 52px;

    min-width: 52px;

    border-radius: 15px;

    background: rgba(255,255,255,0.18);

    display: flex;

    align-items: center;
    justify-content: center;

}


.agenda-home-icon i {

    font-size: 27px;

}


.agenda-home-content {

    flex: 1;

}


.agenda-home-content h3 {

    margin: 0 0 4px;

    font-size: 17px;

    font-weight: 600;

}


.agenda-home-content p {

    margin: 0 0 8px;

    font-size: 12px;

    opacity: .9;

}


#agendaTerdekat {

    font-size: 12px;

    font-weight: 500;

}


.agenda-home-btn {

    border: none;

    background: white;

    color: #2563eb;

    padding: 9px 12px;

    border-radius: 10px;

    font-family: Poppins, sans-serif;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

}


.agenda-home-btn i {

    margin-left: 4px;

}


/* ==========================================
   HP
========================================== */

@media (max-width: 600px) {

    .agenda-home {

        align-items: flex-start;

        padding: 15px;

    }


    .agenda-home-icon {

        width: 45px;
        height: 45px;

        min-width: 45px;

    }


    .agenda-home-content h3 {

        font-size: 15px;

    }


    .agenda-home-content p {

        font-size: 11px;

    }


    .agenda-home-btn {

        padding: 8px 10px;

        font-size: 11px;

    }

}

/* ==========================================
   AGENDA & KALENDER DESA
   KARTU DI ATAS SEMUA MENU
========================================== */

.agenda-home {

    margin: 18px 16px;

    padding: 18px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: white;

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow:
        0 8px 20px rgba(
            37,
            99,
            235,
            0.20
        );

}


.agenda-home-icon {

    width: 52px;

    height: 52px;

    min-width: 52px;

    border-radius: 15px;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

    display: flex;

    align-items: center;

    justify-content: center;

}


.agenda-home-icon i {

    font-size: 27px;

}


.agenda-home-content {

    flex: 1;

}


.agenda-home-content h3 {

    margin:
        0 0 4px;

    font-size: 17px;

    font-weight: 600;

}


.agenda-home-content p {

    margin:
        0 0 8px;

    font-size: 12px;

    opacity: .90;

}


#agendaTerdekat {

    font-size: 12px;

    font-weight: 500;

}


.agenda-home-btn {

    border: none;

    background: white;

    color: #2563eb;

    padding:
        9px 12px;

    border-radius: 10px;

    font-family:
        'Poppins',
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

}


.agenda-home-btn i {

    margin-left: 4px;

}


/* ==========================================
   TAMPILAN HP
========================================== */

@media (
    max-width: 600px
) {

    .agenda-home {

        margin:
            14px 12px;

        padding: 14px;

        gap: 10px;

    }


    .agenda-home-icon {

        width: 45px;

        height: 45px;

        min-width: 45px;

    }


    .agenda-home-icon i {

        font-size: 23px;

    }


    .agenda-home-content h3 {

        font-size: 14px;

    }


    .agenda-home-content p {

        font-size: 10px;

    }


    #agendaTerdekat {

        font-size: 10px;

    }


    .agenda-home-btn {

        padding:
            8px 9px;

        font-size: 10px;

    }

}

/* =========================================================
   GESER JUDUL HEADER AGAR TIDAK TERTUTUP SIDEBAR
========================================================= */

@media (min-width: 901px) {

    .header .title {

        margin-left: 250px !important;

    }

}

/* =========================================================
   MENU HP - 3 KOLOM
========================================================= */

@media (max-width: 600px) {

    #gridMenu.grid-menu {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* Semua kartu menu yang dibuat oleh menu.js */
    #gridMenu.grid-menu > * {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding: 12px 6px !important;
        min-height: 120px !important;
        border-radius: 14px !important;
    }

    /* Ukuran icon */
    #gridMenu.grid-menu > * i {
        font-size: 25px !important;
    }

    /* Tulisan menu */
    #gridMenu.grid-menu > * {
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: center;
    }

}