@charset "UTF-8";

/* Tombol hamburger */
.nangapada-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border-radius: 0.5rem;
    flex-shrink: 0;
}
.nangapada-burger:hover { background: #eff4ff; }
.nangapada-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #0F172A;
}

/* Overlay & drawer */
.nangapada-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.nangapada-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    width: min(320px, 85vw);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: -8px 0 32px rgba(7, 75, 216, 0.12);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
}
body.nangapada-menu-open { overflow: hidden; }
body.nangapada-menu-open .nangapada-overlay { opacity: 1; visibility: visible; }
body.nangapada-menu-open .nangapada-drawer { transform: translateX(0); visibility: visible; }

.nangapada-close {
    width: 40px;
    height: 40px;
    font-size: 28px;
    line-height: 1;
    border-radius: 0.5rem;
    color: #434655;
}
.nangapada-close:hover { background: #eff4ff; }

/* Item menu di drawer */
.nangapada-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #434655;
    cursor: pointer;
    list-style: none;
}
.nangapada-drawer__link::-webkit-details-marker { display: none; }
.nangapada-drawer__link:hover { background: #eff4ff; color: #0d1c2f; }
.nangapada-drawer__link.is-active { color: #0036a6; box-shadow: inset 3px 0 0 #0036a6; }

.nangapada-drawer__caret { font-size: 12px; transition: transform .2s ease; }
.nangapada-drawer__group[open] .nangapada-drawer__caret { transform: rotate(180deg); }

.nangapada-drawer__sub { padding-bottom: 0.25rem; background: #f8f9ff; }
.nangapada-drawer__sub a {
    display: block;
    padding: 0.5rem 1rem 0.5rem 1.75rem;
    font-size: 14px;
    line-height: 22px;
    color: #434655;
}
.nangapada-drawer__sub a:hover { color: #0d1c2f; background: #eff4ff; }
.nangapada-drawer__sub a.is-active { color: #0036a6; font-weight: 600; }

/* ==========================================================
   Konten modul & halaman umum (view/modules, view/pages)
   Tailwind preflight menghapus gaya bawaan, dan modul umum
   memakai class ala Bootstrap, jadi dasar-dasarnya diisi di sini.
   ========================================================== */
.nangapada-content { color: #434655; font-size: 16px; line-height: 26px; }
.nangapada-content h1, .nangapada-content h2, .nangapada-content h3,
.nangapada-content h4, .nangapada-content h5, .nangapada-content h6 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
    margin: 1.25em 0 0.5em;
}
.nangapada-content h1 { font-size: 28px; }
.nangapada-content h2 { font-size: 24px; }
.nangapada-content h3 { font-size: 20px; }
.nangapada-content h4 { font-size: 18px; }
.nangapada-content h5, .nangapada-content h6 { font-size: 16px; }
.nangapada-content > :first-child { margin-top: 0; }
.nangapada-content p { margin: 0 0 1em; }
.nangapada-content ul { list-style: disc; padding-left: 1.5em; margin: 0 0 1em; }
.nangapada-content ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 1em; }
.nangapada-content a:not([class]) { color: #0036a6; }
.nangapada-content a:not([class]):hover { text-decoration: underline; }
.nangapada-content img { max-width: 100%; height: auto; }
.nangapada-content iframe { max-width: 100%; }
.nangapada-content blockquote { border-left: 3px solid #0036a6; padding-left: 1em; margin: 0 0 1em; font-style: italic; }

/* Tabel: bisa digeser horizontal di layar kecil */
.nangapada-content table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 14px; }
.nangapada-content th, .nangapada-content td { border: 1px solid #E2E8F0; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.nangapada-content th { background: #eff4ff; color: #0F172A; font-weight: 600; }
.nangapada-content .table-profile-wrap, .nangapada-content .table-responsive { overflow-x: auto; }

/* Grid ala Bootstrap */
.nangapada-content .row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; row-gap: 1.5rem; }
.nangapada-content .row > * { flex: 0 0 100%; max-width: 100%; padding: 0 0.75rem; }
.nangapada-content .row.g-3 { margin: 0 -0.5rem; row-gap: 1rem; }
.nangapada-content .row.g-3 > * { padding: 0 0.5rem; }
.nangapada-content .row > .col { flex: 1 0 0%; }
@media (min-width: 576px) {
    .nangapada-content .col-sm-6, .nangapada-content .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
    .nangapada-content .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .nangapada-content .col-md-4, .nangapada-content .row-cols-md-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .nangapada-content .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .nangapada-content .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .nangapada-content .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1024px) {
    .nangapada-content .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .nangapada-content .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .nangapada-content .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .nangapada-content .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .nangapada-content .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Card */
.nangapada-content .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(7, 75, 216, 0.06);
}
.nangapada-content .card > img, .nangapada-content .card-img-top { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.nangapada-content .card-body { flex: 1; padding: 1rem 1.25rem; }
.nangapada-content .card-body h5, .nangapada-content .card-body h6 { margin: 0 0 0.5rem; }
.nangapada-content .card-text { font-size: 14px; line-height: 22px; }
.nangapada-content .card a:not(.btn) { color: #0036a6; font-weight: 600; font-size: 14px; }

/* Utilitas Bootstrap yang tidak ada di Tailwind */
.nangapada-content .d-flex { display: flex; }
.nangapada-content .justify-content-center { justify-content: center; }
.nangapada-content .justify-content-between { justify-content: space-between; }
.nangapada-content .align-items-center { align-items: center; }
.nangapada-content .img-fluid { max-width: 100%; height: auto; }

/* Tombol & form */
.nangapada-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s ease;
}
.nangapada-content .btn-primary { background: #0036a6; color: #ffffff; }
.nangapada-content .btn-primary:hover { background: #0539A6; }
.nangapada-content .form-group { margin-bottom: 1rem; }
.nangapada-content label { display: block; margin-bottom: 0.25rem; font-size: 14px; font-weight: 500; color: #0F172A; }
.nangapada-content .form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #c3c5d7;
    border-radius: 0.5rem;
    background: #ffffff;
    font-size: 15px;
}
.nangapada-content .form-control:focus { outline: none; border-color: #0036a6; box-shadow: 0 0 0 3px rgba(0, 54, 166, 0.15); }

/* Pagination */
.nangapada-content .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.nangapada-content .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #434655;
    font-size: 14px;
}
.nangapada-content .page-link:hover { background: #eff4ff; }
.nangapada-content .page-item.active .page-link { background: #0036a6; border-color: #0036a6; color: #ffffff; }
.nangapada-content .page-item.disabled .page-link { opacity: .5; pointer-events: none; }

/* ==========================================================
   Halaman khusus tema (pages/)
   ========================================================== */

/* Berita: grid masonry */
.nangapada-masonry { column-count: 1; column-gap: 1.5rem; }
@media (min-width: 768px) { .nangapada-masonry { column-count: 2; } }
@media (min-width: 1024px) { .nangapada-masonry { column-count: 3; } }
.nangapada-masonry__item { display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 1.5rem; }

/* Tabel data + DataTables (pages/table.php) */
.nangapada-datatable { width: 100% !important; border-collapse: collapse; }
.nangapada-datatable thead th {
    position: relative;
    padding: 0.875rem 1rem;
    background: #eff4ff;
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748B;
    text-align: left;
    white-space: nowrap;
}
.nangapada-datatable thead th:first-child { border-radius: 0.75rem 0 0 0.75rem; }
.nangapada-datatable thead th:last-child { border-radius: 0 0.75rem 0.75rem 0; }
.nangapada-datatable thead th.text-right { text-align: right; }
.nangapada-datatable thead th.text-center { text-align: center; }
.nangapada-datatable tbody tr { border-bottom: 1px solid #E2E8F0; transition: background-color .2s ease; }
.nangapada-datatable tbody tr:last-child { border-bottom: 0; }
.nangapada-datatable tbody tr:hover { background: #f8f9ff; }
.nangapada-datatable td { padding: 1rem; vertical-align: middle; font-size: 14px; line-height: 22px; color: #64748B; }

/* ikon urutkan kolom */
.nangapada-datatable thead th.sorting,
.nangapada-datatable thead th.sorting_asc,
.nangapada-datatable thead th.sorting_desc { cursor: pointer; padding-right: 1.75rem; }
.nangapada-datatable thead th.sorting::after,
.nangapada-datatable thead th.sorting_asc::after,
.nangapada-datatable thead th.sorting_desc::after {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: .35;
    content: "↕";
}
.nangapada-datatable thead th.sorting_asc::after { content: "↑"; opacity: .9; color: #0036a6; }
.nangapada-datatable thead th.sorting_desc::after { content: "↓"; opacity: .9; color: #0036a6; }

/* kotak cari, info, dan pagination DataTables */
.dataTables_wrapper { font-size: 14px; color: #64748B; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; text-align: right; }
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; justify-content: flex-end; }
.dataTables_wrapper .dataTables_filter input {
    width: 100%;
    max-width: 18rem;
    padding: 0.5rem 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    background: #ffffff;
    color: #0F172A;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: #0036a6; box-shadow: 0 0 0 1px #0036a6; }
.dataTables_wrapper .dataTables_info { padding-top: 1.25rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: 1rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
.dataTables_wrapper .dataTables_paginate span { display: inline-flex; gap: 0.375rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    color: #64748B;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #e6eeff; color: #0F172A; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #0036a6; border-color: #0036a6; color: #ffffff; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; pointer-events: none; }
.dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 0.25rem; align-self: center; }
@media (min-width: 768px) {
    .dataTables_wrapper .dataTables_info { float: left; }
    .dataTables_wrapper .dataTables_paginate { float: right; }
    .dataTables_wrapper::after { content: ""; display: table; clear: both; }
}

/* Responsive: kolom yang disembunyikan muncul lewat tombol + di kolom pertama */
.nangapada-datatable.dtr-inline.collapsed > tbody > tr > td.dtr-control { position: relative; padding-left: 2.75rem; cursor: pointer; }
.nangapada-datatable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    content: "+";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.375rem;
    height: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #0036a6;
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
}
.nangapada-datatable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before { content: "−"; background: #64748B; }
.nangapada-datatable > tbody > tr.child { background: #f8f9ff; }
.nangapada-datatable > tbody > tr.child ul.dtr-details { width: 100%; list-style: none; margin: 0; padding: 0; }
.nangapada-datatable > tbody > tr.child ul.dtr-details > li { display: flex; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #E2E8F0; }
.nangapada-datatable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
.nangapada-datatable > tbody > tr.child .dtr-title { min-width: 7.5rem; font-weight: 600; color: #434655; }
.nangapada-datatable > tbody > tr.child .dtr-data { flex: 1; text-align: left; }
.nangapada-datatable th.dtr-hidden, .nangapada-datatable td.dtr-hidden { display: none; }

/* Lightbox galeri */
.nangapada-lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    background: rgba(13, 28, 47, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.nangapada-lightbox.is-open { opacity: 1; visibility: visible; }
.nangapada-lightbox__stage { width: 100%; max-width: 1000px; text-align: center; }
.nangapada-lightbox__media img { max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 0.75rem; object-fit: contain; }
.nangapada-lightbox__media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 0.75rem; background: #000; }
.nangapada-lightbox__caption { margin-top: 1rem; color: #ffffff; font-size: 14px; }
.nangapada-lightbox__btn {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transition: background-color .2s ease;
}
.nangapada-lightbox__btn:hover { background: rgba(255, 255, 255, 0.25); }
.nangapada-lightbox__close { top: 1rem; right: 1rem; }
.nangapada-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.nangapada-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
    .nangapada-lightbox__prev, .nangapada-lightbox__next { top: auto; bottom: 1rem; transform: none; }
}
body.nangapada-lightbox-open { overflow: hidden; }

/* Cetak (dipakai tombol "Unduh / Cetak" di kalender): hanya konten halaman */
@media print {
    body > header, body > footer, .nangapada-overlay, .nangapada-drawer, .nangapada-no-print { display: none !important; }
    main { padding-top: 0 !important; }
    main > div > section:first-child { display: none !important; }
    .shadow-sm, .shadow-md { box-shadow: none !important; }
    .break-inside-avoid { break-inside: avoid; }
}