/* Frontend Lapor HUMAS */
.aa-humas-body {
    margin:0;
    color:#303f39;
    background:#f8faf8;
    font-family:'Montserrat','Segoe UI',sans-serif;
}

.aa-humas-body .main-navbar {
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 28px rgba(80,93,86,.08);
}

.aa-humas-page,
.aa-check-page,
.aa-detail-page {
    min-height:100vh;
    background:linear-gradient(180deg,#fbfcfa 0%,#fff 46%,#f2f6f3 100%);
}

.aa-humas-hero {
    padding:54px 0 44px;
    background:
        radial-gradient(circle at 14% 18%,rgba(191,207,197,.34),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(218,184,109,.2),transparent 25%),
        linear-gradient(135deg,#fff,#eef4f0);
}

.aa-kicker,
.aa-form-head span,
.aa-detail-hero span,
.aa-response-card span,
.aa-check-panel span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    color:#6d7f74;
    background:#fff;
    border:1px solid #e6eee8;
    border-radius:12px;
    box-shadow:0 10px 22px rgba(83,101,91,.07);
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.aa-kicker i,
.aa-form-head i,
.aa-detail-hero i,
.aa-response-card i,
.aa-check-panel i {
    color:#c59a45;
}

.aa-humas-hero h1,
.aa-form-head h2,
.aa-detail-hero h1,
.aa-check-panel h1 {
    margin:14px 0 10px;
    color:#303f39;
    font-size:clamp(1.8rem,3vw,3rem);
    font-weight:800;
    line-height:1.14;
}

.aa-humas-hero p,
.aa-detail-hero p,
.aa-check-panel p {
    max-width:720px;
    margin:0;
    color:#68776f;
    font-size:.9rem;
    line-height:1.75;
}

.aa-hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.aa-hero-actions a,
.aa-submit-row button,
.aa-submit-row a,
.aa-success-card a,
.aa-check-panel button,
.aa-check-panel > a,
.aa-not-found a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:10px 14px;
    border:0;
    border-radius:999px;
    font-size:.75rem;
    font-weight:800;
    text-decoration:none;
    transition:transform .25s ease,box-shadow .25s ease;
}

.aa-hero-actions a:last-child,
.aa-submit-row button,
.aa-success-card a:first-child,
.aa-check-panel button,
.aa-not-found a {
    color:#fff;
    background:linear-gradient(135deg,#8fa196,#b9c8be);
    box-shadow:0 16px 30px rgba(143,161,150,.2);
}

.aa-hero-actions a:first-child,
.aa-submit-row a,
.aa-success-card a:last-child,
.aa-check-panel > a {
    color:#45564e;
    background:#fff;
    border:1px solid #e6eee8;
    box-shadow:0 12px 24px rgba(83,101,91,.08);
}

.aa-submit-row button:disabled {
    opacity:.5;
    cursor:not-allowed;
}

.aa-ticket-card {
    display:flex;
    align-items:center;
    gap:18px;
    max-width:420px;
    margin-left:auto;
    padding:20px;
    background:#fff;
    border:1px solid #e6eee8;
    border-radius:18px;
    box-shadow:0 24px 48px rgba(83,101,91,.1);
}

.aa-ticket-card img {
    width:120px;
    height:120px;
    object-fit:contain;
}

.aa-ticket-card strong {
    display:block;
    color:#303f39;
    font-size:1.05rem;
    font-weight:800;
}

.aa-ticket-card small {
    display:block;
    margin-top:7px;
    color:#68776f;
    line-height:1.6;
}

.aa-form-section {
    padding:36px 0 70px;
}

.aa-form-card,
.aa-success-card,
.aa-check-panel,
.aa-detail-hero,
.aa-status-card,
.aa-detail-card,
.aa-detail-side,
.aa-response-card,
.aa-not-found {
    background:#fff;
    border:1px solid #e6eee8;
    border-radius:18px;
    box-shadow:0 18px 38px rgba(84,101,91,.08);
}

.aa-form-card {
    padding:24px;
}

.aa-form-card label {
    display:block;
    margin-bottom:7px;
    color:#303f39;
    font-size:.78rem;
    font-weight:800;
}

.aa-form-card .form-control,
.aa-form-card .form-select,
.aa-check-panel .form-control {
    min-height:50px;
    border:1px solid #e1eae4;
    border-radius:13px;
    color:#303f39;
    box-shadow:none;
}

.aa-form-card textarea.form-control {
    min-height:132px;
}

.aa-form-card small {
    display:block;
    margin-top:7px;
    color:#78877f;
    font-size:.68rem;
}

.aa-rating {
    display:flex;
    gap:7px;
    min-height:50px;
    align-items:center;
}

.aa-rating button {
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    color:#cbd5cf;
    background:#f7faf8;
    border:1px solid #e1eae4;
    border-radius:11px;
    font-size:1.15rem;
}

.aa-rating button.active {
    color:#c59a45;
    background:#fff7e8;
    border-color:#eadfbd;
}

.aa-upload-preview {
    margin-top:12px;
    overflow:hidden;
    background:#f7faf8;
    border:1px solid #e1eae4;
    border-radius:14px;
}

.aa-upload-preview img {
    width:100%;
    height:180px;
    object-fit:cover;
}

.aa-upload-preview span {
    display:block;
    padding:10px 12px;
    color:#65766d;
    font-size:.72rem;
    font-weight:800;
}

.aa-face-box {
    position:relative;
    overflow:hidden;
    min-height:260px;
    background:#eef4f0;
    border:1px dashed #c9d7cf;
    border-radius:15px;
}

.aa-face-box video {
    width:100%;
    height:260px;
    object-fit:cover;
    background:#1f2b26;
}

.aa-face-box span {
    position:absolute;
    right:12px;
    bottom:12px;
    left:12px;
    padding:9px 11px;
    color:#fff;
    background:rgba(48,63,57,.82);
    border-radius:12px;
    font-size:.72rem;
    font-weight:800;
    text-align:center;
}

.aa-face-box.verified {
    border-color:#8fa196;
    box-shadow:0 0 0 4px rgba(143,161,150,.16);
}

.aa-face-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:10px;
}

.aa-face-actions button {
    min-height:42px;
    color:#45564e;
    background:#fff;
    border:1px solid #e1eae4;
    border-radius:12px;
    font-size:.72rem;
    font-weight:800;
}

.aa-face-actions button:last-child {
    color:#fff;
    background:linear-gradient(135deg,#c59a45,#d8b66d);
    border:0;
}

.aa-face-actions button:disabled {
    opacity:.5;
}

.aa-face-note {
    color:#9a742d!important;
}

.aa-submit-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid #e9f0eb;
}

.aa-alert {
    border:0;
    border-radius:14px;
}

.aa-success-card,
.aa-check-panel,
.aa-not-found {
    width:min(100%,620px);
    margin:0 auto;
    padding:28px;
    text-align:center;
}

.aa-success-card > i {
    color:#8fa196;
    font-size:3rem;
}

.aa-success-card strong {
    display:block;
    margin:16px auto;
    padding:13px;
    color:#9a742d;
    background:#fff7e8;
    border:1px solid #eadfbd;
    border-radius:13px;
    font-size:1.18rem;
}

.aa-success-card div {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.aa-check-page,
.aa-detail-page {
    padding:40px 0 70px;
}

.aa-check-panel img,
.aa-not-found img {
    width:120px;
    height:120px;
    object-fit:contain;
    margin:0 auto 12px;
}

.aa-check-panel form {
    display:grid;
    gap:10px;
    margin:20px 0 14px;
}

.aa-detail-hero,
.aa-status-card,
.aa-response-card {
    margin-bottom:16px;
    padding:22px;
}

.aa-status-line {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.aa-status-line div {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    color:#7a8982;
    background:#f7faf8;
    border:1px solid #e6eee8;
    border-radius:13px;
}

.aa-status-line div.active {
    color:#303f39;
    background:#eef4f0;
    border-color:#c8d5cc;
}

.aa-status-line b {
    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    color:#fff;
    background:#b7c4bb;
    border-radius:50%;
}

.aa-status-line div.active b {
    background:#8fa196;
}

.aa-status-line span {
    font-size:.78rem;
    font-weight:800;
}

.aa-detail-card,
.aa-detail-side {
    height:100%;
    padding:20px;
}

.aa-detail-card > span,
.aa-response-card > span {
    color:#c59a45;
    font-size:.66rem;
    font-weight:800;
    text-transform:uppercase;
}

.aa-detail-card h2 {
    margin:9px 0;
    color:#303f39;
    font-size:1.15rem;
    font-weight:800;
}

.aa-detail-card p,
.aa-response-card p {
    margin:0;
    color:#5f7068;
    line-height:1.8;
}

.aa-detail-card img {
    width:100%;
    max-height:320px;
    margin-top:16px;
    object-fit:cover;
    border-radius:14px;
}

.aa-detail-side {
    display:grid;
    gap:10px;
}

.aa-detail-side div {
    padding:11px;
    background:#f7faf8;
    border:1px solid #e9f0eb;
    border-radius:12px;
}

.aa-detail-side small {
    display:block;
    color:#7a8982;
    font-size:.64rem;
    font-weight:800;
    text-transform:uppercase;
}

.aa-detail-side strong {
    color:#303f39;
    font-size:.82rem;
}

.aa-response-card {
    margin-top:16px;
}

@media (max-width:991.98px) {
    .aa-ticket-card {
        margin:0 auto;
    }

    .aa-submit-row {
        align-items:stretch;
        flex-direction:column;
    }
}

@media (max-width:575.98px) {
    .aa-humas-hero {
        padding:36px 0 30px;
    }

    .aa-ticket-card {
        display:block;
        text-align:center;
    }

    .aa-ticket-card img {
        margin:0 auto 12px;
    }

    .aa-form-card,
    .aa-success-card,
    .aa-check-panel,
    .aa-detail-hero,
    .aa-status-card,
    .aa-detail-card,
    .aa-detail-side,
    .aa-response-card {
        padding:18px;
    }

    .aa-face-actions,
    .aa-status-line {
        grid-template-columns:1fr;
    }
}