/* ==========================================================================
   Neumorphism (Soft UI) — publik.unma.ac.id
   Satu sumber gaya untuk seluruh halaman. Dipakai bersama Tailwind (layout/spacing).
   ========================================================================== */

:root {
    --neu-bg: #e6ebf2;
    --neu-light: #ffffff;
    --neu-dark: #b8c1d1;
    --neu-text: #1e293b;
    --neu-muted: #526075;
    --neu-accent: #1e4fb8;
    --neu-accent-strong: #173d8f;
    --neu-radius: 1.5rem;
    --neu-radius-sm: 1rem;

    --neu-shadow: 9px 9px 18px var(--neu-dark), -9px -9px 18px var(--neu-light);
    --neu-shadow-hover: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
    --neu-shadow-sm: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
    --neu-inset: inset 6px 6px 12px var(--neu-dark), inset -6px -6px 12px var(--neu-light);
    --neu-inset-sm: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);

    /* warna aksen per komponen (bisa dioverride dengan kelas .tone-*) */
    --tone: var(--neu-accent);
}

.tone-blue    { --tone: #1e4fb8; }
.tone-indigo  { --tone: #4338ca; }
.tone-teal    { --tone: #0f766e; }
.tone-emerald { --tone: #047857; }
.tone-amber   { --tone: #b45309; }
.tone-rose    { --tone: #be123c; }
.tone-slate   { --tone: #475569; }
.text-tone    { color: var(--tone); }

/* ---------- Dasar ---------- */
html { background: var(--neu-bg); }
body.neu-body {
    background: var(--neu-bg);
    color: var(--neu-text);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    min-height: 100vh;
}
::selection { background: rgba(30, 79, 184, .18); }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid rgba(30, 79, 184, .45);
    outline-offset: 3px;
}

.skip-link {
    position: absolute; left: -999px; top: .5rem; z-index: 100;
    padding: .5rem 1rem; border-radius: .75rem;
    background: var(--neu-bg); box-shadow: var(--neu-shadow-sm); color: var(--neu-accent); font-weight: 700;
}
.skip-link:focus { left: .75rem; }

/* ---------- Permukaan ---------- */
.neu       { background: var(--neu-bg); border-radius: var(--neu-radius); box-shadow: var(--neu-shadow); }
.neu-sm    { background: var(--neu-bg); border-radius: var(--neu-radius-sm); box-shadow: var(--neu-shadow-sm); }
.neu-inset { background: var(--neu-bg); border-radius: var(--neu-radius-sm); box-shadow: var(--neu-inset); }
.neu-inset-sm { background: var(--neu-bg); border-radius: .75rem; box-shadow: var(--neu-inset-sm); }

.neu-hover { transition: box-shadow .25s ease, transform .25s ease; }
.neu-hover:hover { box-shadow: var(--neu-shadow-hover); transform: translateY(-3px); }
.neu-hover:active { box-shadow: var(--neu-inset); transform: none; }

.neu-hero { position: relative; overflow: hidden; }
.neu-hero::after {
    content: ''; position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem;
    border-radius: 9999px; box-shadow: var(--neu-inset); opacity: .55; pointer-events: none;
}
.neu-hero > * { position: relative; z-index: 1; }

.neu-divider {
    height: 2px; border-radius: 2px;
    background: linear-gradient(to bottom, var(--neu-dark), var(--neu-light));
    opacity: .7;
}
.neu-sep > * + * { border-top: 1px solid rgba(184, 193, 209, .55); }

/* ---------- Navigasi ---------- */
.neu-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(230, 235, 242, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 14px rgba(184, 193, 209, .55);
}
.neu-link {
    padding: .5rem 1rem; border-radius: .9rem; color: var(--neu-muted);
    transition: box-shadow .2s ease, color .2s ease;
}
.neu-link:hover { color: var(--neu-accent); box-shadow: var(--neu-shadow-sm); }
.neu-link:active { box-shadow: var(--neu-inset-sm); }

.neu-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--neu-muted); }
.neu-breadcrumb a:hover { color: var(--neu-accent); }
.neu-breadcrumb .sep { opacity: .5; }
.neu-breadcrumb [aria-current] { color: var(--neu-text); }

/* ---------- Ikon bulat ---------- */
.neu-icon {
    width: 3rem; height: 3rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--neu-bg); box-shadow: var(--neu-shadow-sm);
    color: var(--tone); font-size: 1.15rem;
}
.neu-icon-sm { width: 2.5rem; height: 2.5rem; font-size: .95rem; }
.neu-icon-lg { width: 4.25rem; height: 4.25rem; font-size: 1.6rem; }
.neu-icon.is-inset { box-shadow: var(--neu-inset-sm); }
.neu-icon.is-square { border-radius: 1rem; }

/* ---------- Tombol ---------- */
.neu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1.25rem; border-radius: 1rem; border: 0; cursor: pointer;
    background: var(--neu-bg); box-shadow: var(--neu-shadow-sm);
    color: var(--tone); font-weight: 700; font-size: .875rem; line-height: 1.2;
    transition: box-shadow .2s ease, color .2s ease, transform .2s ease;
    text-decoration: none;
}
.neu-btn:hover { box-shadow: var(--neu-shadow); transform: translateY(-1px); }
.neu-btn:active, .neu-btn.is-active, .neu-btn[aria-selected="true"] {
    box-shadow: var(--neu-inset-sm); transform: none; color: var(--tone);
}
.neu-btn[disabled], .neu-btn.is-disabled {
    cursor: not-allowed; opacity: .55; box-shadow: var(--neu-inset-sm); transform: none;
}
.neu-btn-sm { padding: .45rem .85rem; font-size: .75rem; border-radius: .8rem; }
.neu-btn-block { display: flex; width: 100%; }
.neu-btn-primary {
    color: #fff;
    background: linear-gradient(145deg, #2a5fd0, #173d8f);
    box-shadow: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
}
.neu-btn-primary:hover { color: #fff; }
.neu-btn-primary:active { box-shadow: inset 3px 3px 6px #10306f, inset -3px -3px 6px #2f6be0; }
.neu-btn-wa { --tone: #047857; }
/* Modifier perataan (tidak bergantung urutan muat CSS Tailwind) */
.neu-btn.justify-start   { justify-content: flex-start; }
.neu-btn.justify-between { justify-content: space-between; }
.neu-btn.items-start     { align-items: flex-start; }
.neu-btn.flex-col        { flex-direction: column; }

/* ---------- Tab ---------- */
.neu-tabs { display: flex; gap: .75rem; padding: .6rem; overflow-x: auto; scrollbar-width: none; }
.neu-tabs::-webkit-scrollbar { display: none; }
.neu-tabs .neu-btn { flex: 1 0 auto; color: var(--neu-muted); }
.neu-tabs .neu-btn[aria-selected="true"] { color: var(--tone); }
.tab-panel[hidden] { display: none !important; }
.tab-panel { animation: neu-fade .3s ease; }

/* ---------- Form ---------- */
.neu-input, .neu-select {
    width: 100%; border: 0; border-radius: 1rem;
    padding: .75rem 1.1rem; font-size: .9rem; font-weight: 600; color: var(--neu-text);
    background: var(--neu-bg); box-shadow: var(--neu-inset-sm);
}
.neu-input::placeholder { color: #8391a7; font-weight: 500; }
.neu-select { appearance: none; padding-right: 2.5rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23526075' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; }

/* ---------- Chip & badge ---------- */
.neu-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .85rem; border-radius: 9999px;
    background: var(--neu-bg); box-shadow: var(--neu-shadow-sm);
    font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--tone);
}
.neu-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .75rem; border-radius: 9999px;
    background: var(--neu-bg); box-shadow: var(--neu-inset-sm);
    font-size: .72rem; font-weight: 800; color: var(--tone); white-space: nowrap;
}
.badge-success { --tone: #047857; }
.badge-info    { --tone: #1e4fb8; }
.badge-warning { --tone: #b45309; }
.badge-danger  { --tone: #be123c; }
.badge-muted   { --tone: #526075; }

.neu-step {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--neu-bg); box-shadow: var(--neu-shadow-sm);
    font-weight: 800; font-size: .85rem; color: var(--tone);
}

/* ---------- Timeline (alur langkah) ---------- */
.neu-timeline { position: relative; }
.neu-timeline::before {
    content: ''; position: absolute; left: 1.1rem; top: .5rem; bottom: .5rem; width: 4px;
    border-radius: 4px; box-shadow: var(--neu-inset-sm);
}
.neu-timeline > * { position: relative; }

/* ---------- Tabel ---------- */
.neu-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.neu-table thead th {
    padding: .9rem 1rem; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; color: var(--neu-muted);
}
.neu-table tbody td { padding: 1rem; vertical-align: middle; border-top: 1px solid rgba(184, 193, 209, .55); }
.neu-table tbody tr { transition: background .2s ease; }
.neu-table tbody tr:hover { background: rgba(255, 255, 255, .35); }

/* Pembungkus tabel: kartu di desktop, polos di mobile (karena baris jadi kartu) */
@media (min-width: 1024px) {
    .neu-table-wrap { background: var(--neu-bg); border-radius: var(--neu-radius); box-shadow: var(--neu-shadow); padding: 1rem; }
}
.neu-table-wrap.always { background: var(--neu-bg); border-radius: var(--neu-radius); box-shadow: var(--neu-shadow); padding: 1rem; overflow-x: auto; }

/* Tabel → kartu di layar kecil. Isi <td data-label="..."> */
@media (max-width: 1023px) {
    .neu-table.is-responsive thead { display: none; }
    .neu-table.is-responsive, .neu-table.is-responsive tbody,
    .neu-table.is-responsive tr, .neu-table.is-responsive td { display: block; width: 100%; }
    .neu-table.is-responsive tbody tr {
        margin-bottom: 1.25rem; padding: .5rem 0;
        border-radius: var(--neu-radius-sm); background: var(--neu-bg); box-shadow: var(--neu-shadow-sm);
    }
    .neu-table.is-responsive tbody tr:hover { background: var(--neu-bg); }
    .neu-table.is-responsive tbody td {
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        padding: .7rem 1.1rem; text-align: right; border-top: 1px dashed rgba(184, 193, 209, .8);
    }
    .neu-table.is-responsive tbody td:first-child { border-top: 0; }
    .neu-table.is-responsive tbody td::before {
        content: attr(data-label); text-align: left; flex-shrink: 0;
        font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--neu-muted);
    }
    .neu-table.is-responsive.table-flat { box-shadow: none; }
}

/* ---------- Accordion ---------- */
.neu-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.neu-accordion-panel > div { overflow: hidden; }
.neu-accordion-panel.is-open { grid-template-rows: 1fr; }
[data-accordion] .chevron { transition: transform .3s ease; }
[data-accordion][aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ---------- Link daftar (beranda) ---------- */
.neu-list-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .9rem; border-radius: .9rem;
    color: var(--neu-muted); font-weight: 600; font-size: .92rem;
    transition: box-shadow .2s ease, color .2s ease, padding .2s ease;
}
.neu-list-link i { color: var(--tone); width: 1.1rem; text-align: center; }
.neu-list-link:hover { color: var(--neu-text); box-shadow: var(--neu-shadow-sm); padding-left: 1.15rem; }
.neu-list-link:active { box-shadow: var(--neu-inset-sm); }

/* ---------- Embed dokumen ---------- */
.neu-embed { border-radius: var(--neu-radius-sm); overflow: hidden; box-shadow: var(--neu-inset); padding: .6rem; }
.neu-embed iframe { width: 100%; height: 100%; border: 0; border-radius: .75rem; background: #fff; }

@keyframes neu-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
    .neu, .neu-sm, .neu-inset, .neu-btn, .neu-chip, .neu-icon { box-shadow: none !important; border: 1px solid #cbd5e1; }
    .neu-nav, footer .neu-btn { display: none; }
}