@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.page-pendaftaran {
    --brand: #176b5f;
    --brand-dark: #0f4e45;
    --brand-soft: #e7f4ef;
    --accent: #d79b2b;
    --ink: #17212b;
    --muted: #667085;
    --line: #dfe7e4;
    --surface: #ffffff;
    --tech-cyan: #3dd7e8;
    --tech-mint: #45d89b;
    --tech-ink: #10212b;
    background:
        linear-gradient(rgba(61, 215, 232, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69, 216, 155, 0.055) 1px, transparent 1px),
        radial-gradient(circle at 12% 8%, rgba(61, 215, 232, 0.18), transparent 26%),
        radial-gradient(circle at 88% 4%, rgba(69, 216, 155, 0.14), transparent 24%),
        linear-gradient(180deg, #f4fbfa 0%, #eef7f4 340px, #f8fbfa 100%);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    color: var(--tech-ink);
    font-family: 'Poppins', Arial, sans-serif;
    min-height: 100vh;
}

.page-pendaftaran *,
.page-pendaftaran *::before,
.page-pendaftaran *::after {
    letter-spacing: 0;
}

.page-pendaftaran::before {
    background:
        linear-gradient(90deg, rgba(23, 107, 95, 0.08), rgba(61, 215, 232, 0.24), rgba(69, 216, 155, 0.08)),
        rgba(255, 255, 255, 0.48);
    content: "";
    height: 1px;
    left: 0;
    position: fixed;
    right: 0;
    top: 118px;
    z-index: 0;
}

.page-pendaftaran .nu-header {
    background:
        linear-gradient(90deg, rgba(61, 215, 232, 0.12), transparent 38%, rgba(69, 216, 155, 0.14)),
        linear-gradient(135deg, rgba(10, 31, 40, 0.96), rgba(15, 78, 69, 0.94)),
        url('../images/icon-192.png') right 30px center / 88px no-repeat;
    border-bottom: 1px solid rgba(61, 215, 232, 0.3);
    box-shadow:
        0 18px 42px rgba(14, 44, 55, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 16px;
    position: relative;
}

.page-pendaftaran .nu-header::before {
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 44%, transparent 62%);
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(-72%);
}

.page-pendaftaran .nu-header-logo {
    height: 72px;
    left: 0;
    object-fit: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    z-index: 1;
}

.page-pendaftaran .nu-header-side-image {
    height: 432px;
    max-height: calc(100% + 220px);
    object-fit: contain;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 432px;
    z-index: 1;
}

.page-pendaftaran .nu-header h4,
.page-pendaftaran .nu-header small {
    position: relative;
    text-shadow: 0 1px 16px rgba(61, 215, 232, 0.22);
    z-index: 1;
}

.page-pendaftaran .nu-header-pendaftaran {
    left: 0;
    padding-left: 92px;
    padding-right: 360px;
    position: sticky;
    right: 0;
    text-align: left !important;
    top: 0;
    z-index: 1030;
}

.page-pendaftaran .nu-header-pendaftaran h4,
.page-pendaftaran .nu-header-pendaftaran small {
    display: block;
    margin-left: 0;
    text-align: left;
}

.page-pendaftaran main {
    margin-top: -26px;
    position: relative;
    z-index: 1;
}

.page-pendaftaran .card {
    background:
        linear-gradient(118deg, rgba(69, 216, 155, 0.09), rgba(255, 255, 255, 0.96) 42%, rgba(61, 215, 232, 0.1)),
        #ffffff;
    border: 1px solid rgba(23, 107, 95, 0.16);
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.82) inset,
        0 24px 62px rgba(16, 33, 43, 0.12),
        0 0 28px rgba(61, 215, 232, 0.08);
    overflow: hidden;
}

.page-pendaftaran .card-header {
    background:
        linear-gradient(90deg, rgba(15, 78, 69, 0.96), rgba(16, 33, 43, 0.94)),
        #10212b;
    border-bottom: 1px solid rgba(61, 215, 232, 0.28);
    color: #f8ffff;
    padding: 22px 24px;
    position: relative;
}

.page-pendaftaran .card-header::after {
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-mint), transparent);
    bottom: 0;
    content: "";
    height: 2px;
    left: 24px;
    position: absolute;
    width: min(220px, calc(100% - 48px));
}

.page-pendaftaran .card-header h5 {
    color: #f8ffff;
    font-weight: 800;
}

.page-pendaftaran .card-header small {
    color: #f8ffff;
    font-weight: 500;
    opacity: 0.72;
}

.page-pendaftaran .card-pra-pendaftaran {
    background:
        linear-gradient(128deg, rgba(255, 246, 224, 0.72), rgba(255, 255, 255, 0.98) 42%, rgba(61, 215, 232, 0.12)),
        #ffffff;
    border-color: rgba(215, 155, 43, 0.28);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.86) inset,
        0 24px 62px rgba(16, 33, 43, 0.12),
        0 0 30px rgba(215, 155, 43, 0.1);
}

.page-pendaftaran .card-pra-pendaftaran .card-header {
    background:
        linear-gradient(90deg, rgba(61, 215, 232, 0.12), transparent 38%, rgba(69, 216, 155, 0.14)),
        linear-gradient(135deg, rgba(10, 31, 40, 0.96), rgba(15, 78, 69, 0.94)),
        rgba(10, 31, 40, 0.92);
    border-bottom-color: rgba(61, 215, 232, 0.3);
}

.page-pendaftaran .card-pra-pendaftaran .card-header::after {
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-mint), transparent);
    width: min(270px, calc(100% - 48px));
}

.page-pendaftaran .pendaftaran-split {
    min-height: 620px;
}

.page-pendaftaran .pendaftaran-visual {
    background:
        linear-gradient(90deg, rgba(10, 31, 40, 0.12), rgba(23, 107, 95, 0.08)),
        url('../images/bgpondok.webp') center / cover no-repeat,
        linear-gradient(135deg, #dfeee9, #ffffff);
    border: 1px solid rgba(23, 107, 95, 0.16);
    border-radius: 8px;
    box-shadow:
        0 24px 62px rgba(16, 33, 43, 0.12),
        0 0 28px rgba(61, 215, 232, 0.08);
    height: 100%;
    min-height: 560px;
    overflow: hidden;
}

.page-pendaftaran .pendaftaran-split .card-pra-pendaftaran {
    margin-left: auto;
    max-width: 620px;
}

.page-pendaftaran .card-body {
    background: transparent;
}

.page-pendaftaran .form-label {
    color: #263f47;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.page-pendaftaran .form-control,
.page-pendaftaran .form-select {
    background:
        linear-gradient(90deg, rgba(61, 215, 232, 0.035), rgba(255, 255, 255, 0.96)),
        #ffffff;
    border: 1px solid rgba(23, 107, 95, 0.18);
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9) inset,
        0 8px 20px rgba(16, 33, 43, 0.04);
    color: var(--ink);
    min-height: 46px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.page-pendaftaran .form-control:hover,
.page-pendaftaran .form-select:hover {
    border-color: rgba(61, 215, 232, 0.46);
}

.page-pendaftaran .form-control:focus,
.page-pendaftaran .form-select:focus {
    border-color: rgba(69, 216, 155, 0.72);
    box-shadow:
        0 0 0 0.22rem rgba(69, 216, 155, 0.14),
        0 0 18px rgba(61, 215, 232, 0.14);
    transform: translateY(-1px);
}

.page-pendaftaran .form-control[readonly] {
    background:
        linear-gradient(90deg, rgba(23, 107, 95, 0.06), rgba(255, 255, 255, 0.9)),
        #f3f8f7;
    border-color: rgba(23, 107, 95, 0.12);
    color: #475467;
}

.page-pendaftaran .field-hint {
    background:
        linear-gradient(90deg, rgba(69, 216, 155, 0.2), rgba(16, 33, 43, 0.92)),
        rgba(16, 33, 43, 0.92);
    border: 1px solid rgba(69, 216, 155, 0.36);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(16, 33, 43, 0.16);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 8px;
    opacity: 0;
    padding: 9px 12px;
    pointer-events: none;
    position: relative;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.page-pendaftaran .field-hint::before {
    background: rgba(16, 33, 43, 0.92);
    border-left: 1px solid rgba(69, 216, 155, 0.36);
    border-top: 1px solid rgba(69, 216, 155, 0.36);
    content: "";
    height: 10px;
    left: 18px;
    position: absolute;
    top: -6px;
    transform: rotate(45deg);
    width: 10px;
}

.page-pendaftaran .form-control:focus + .field-hint {
    opacity: 1;
    transform: translateY(0);
}

.page-pendaftaran .btn {
    border-radius: 8px;
    font-weight: 700;
    min-height: 44px;
}

.page-pendaftaran .btn-daftar {
    background:
        linear-gradient(90deg, rgba(69, 216, 155, 0.22), rgba(15, 78, 69, 0.96)),
        var(--brand);
    border-color: rgba(69, 216, 155, 0.42);
    box-shadow:
        0 10px 22px rgba(23, 107, 95, 0.18),
        0 0 16px rgba(69, 216, 155, 0.16);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.page-pendaftaran .btn-daftar::before {
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.24) 46%, transparent 64%);
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(-120%);
    transition: transform 420ms ease;
}

.page-pendaftaran .btn-daftar:hover {
    background:
        linear-gradient(90deg, rgba(69, 216, 155, 0.26), rgba(15, 78, 69, 1)),
        var(--brand-dark);
    border-color: rgba(69, 216, 155, 0.58);
    color: #fff;
}

.page-pendaftaran .btn-daftar:hover::before {
    transform: translateX(120%);
}

.page-pendaftaran .btn-outline-secondary {
    background:
        linear-gradient(90deg, rgba(61, 215, 232, 0.07), rgba(255, 255, 255, 0.92)),
        #ffffff;
    border-color: rgba(61, 215, 232, 0.32);
    color: #174d52;
}

.page-pendaftaran .btn-outline-secondary:hover {
    background: var(--brand-soft);
    border-color: rgba(23, 107, 95, 0.34);
    color: var(--brand-dark);
}

.page-pendaftaran .admin-navbar .container {
    max-width: min(1320px, calc(100% - 24px));
}

.page-pendaftaran .admin-navbar__inner {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: space-between;
}

.page-pendaftaran .admin-navbar__brand {
    flex: 0 0 auto;
    margin-right: 0;
    white-space: nowrap;
}

.page-pendaftaran .admin-navbar__menu {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
}

.page-pendaftaran .admin-navbar__menu .btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    justify-content: center;
    line-height: 1.1;
    min-height: 34px;
    padding: 0.34rem 0.62rem;
    white-space: nowrap;
}

.page-pendaftaran .admin-navbar__user {
    flex: 1 1 auto;
    min-width: 120px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .page-pendaftaran .admin-navbar__inner {
        flex-wrap: wrap;
    }

    .page-pendaftaran .admin-navbar__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

    .page-pendaftaran .admin-navbar__menu .btn {
        justify-content: flex-start;
        width: 100%;
    }

    .page-pendaftaran .admin-navbar__user {
        text-align: left;
        width: 100%;
    }
}

.page-pendaftaran .note-box,
.page-pendaftaran .alert {
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.92), rgba(69, 216, 155, 0.08), rgba(61, 215, 232, 0.08)),
        #ffffff;
    border: 1px solid rgba(23, 107, 95, 0.16);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(16, 33, 43, 0.06);
}

.page-pendaftaran .note-box {
    color: #244148;
    padding: 16px 18px;
}

.page-pendaftaran .note-box b {
    color: var(--brand-dark);
}

.page-pendaftaran .captcha-img {
    background:
        linear-gradient(135deg, rgba(61, 215, 232, 0.08), #ffffff),
        #ffffff;
    border: 1px solid rgba(61, 215, 232, 0.28);
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(61, 215, 232, 0.1);
    min-height: 52px;
    padding: 6px;
    width: 100%;
}

.page-pendaftaran h5.mt-4 {
    align-items: center;
    border-top: 1px solid rgba(23, 107, 95, 0.12);
    color: #163f43;
    display: flex;
    font-size: 1rem;
    font-weight: 800;
    gap: 10px;
    padding-top: 24px;
}

.page-pendaftaran h5.mt-4::before {
    background: linear-gradient(180deg, var(--tech-cyan), var(--tech-mint));
    content: "";
    display: inline-block;
    height: 22px;
    width: 4px;
}

.page-pendaftaran .kode-modal-box {
    background:
        linear-gradient(118deg, rgba(69, 216, 155, 0.12), rgba(255, 255, 255, 0.96) 48%, rgba(61, 215, 232, 0.12)),
        #ffffff;
    border: 1px solid rgba(61, 215, 232, 0.28);
    border-radius: 8px;
    box-shadow:
        0 24px 70px rgba(16, 33, 43, 0.24),
        0 0 24px rgba(61, 215, 232, 0.14);
}

.page-form-lengkap {
    background:
        linear-gradient(rgba(61, 215, 232, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69, 216, 155, 0.045) 1px, transparent 1px),
        url('../images/bgpondok.webp') center top / cover fixed no-repeat,
        linear-gradient(180deg, #f4fbfa, #f8fbfa);
    background-size: 34px 34px, 34px 34px, cover, auto;
}

.page-form-lengkap .card-form-lengkap .card-header {
    background:
        linear-gradient(90deg, rgba(61, 215, 232, 0.12), transparent 38%, rgba(69, 216, 155, 0.14)),
        linear-gradient(135deg, rgba(10, 31, 40, 0.96), rgba(15, 78, 69, 0.94)),
        rgba(10, 31, 40, 0.92) !important;
    border-bottom-color: rgba(61, 215, 232, 0.3);
}

.page-form-lengkap .qr-kode-box {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(61, 215, 232, 0.09), rgba(255, 255, 255, 0.96) 50%, rgba(69, 216, 155, 0.1)),
        #ffffff;
    border: 1px solid rgba(23, 107, 95, 0.16);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(16, 33, 43, 0.08);
    display: flex;
    gap: 18px;
    padding: 16px;
}

.page-form-lengkap .qr-kode-canvas-wrap,
.page-form-lengkap .qr-kode-modal {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(23, 107, 95, 0.14);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

.page-form-lengkap .qr-kode-image {
    display: block;
    height: auto;
    max-width: 100%;
}

.page-form-lengkap .qr-kode-teks {
    color: #10212b;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.25;
    margin-top: 8px;
    overflow-wrap: anywhere;
    text-align: center;
}

.page-form-lengkap .qr-kode-info {
    flex: 1 1 auto;
    min-width: 0;
}

.page-form-lengkap .qr-kode-modal {
    margin-inline: auto;
    max-width: 206px;
}

@media (max-width: 767.98px) {
    .page-pendaftaran .nu-header {
        background-position: right 14px center;
        background-size: 64px;
        padding: 22px 82px 22px 82px;
        text-align: left !important;
    }

    .page-pendaftaran .nu-header-pendaftaran {
        padding-left: 60px;
        padding-right: 130px;
    }

    .page-pendaftaran .nu-header-logo {
        height: 52px;
        left: 0;
        width: 52px;
    }

    .page-pendaftaran .nu-header-side-image {
        height: 312px;
        max-height: calc(100% + 150px);
        right: 10px;
        width: 312px;
    }

    .page-pendaftaran .nu-header h4 {
        font-size: 0.98rem;
        line-height: 1.35;
    }

    .page-pendaftaran main {
        margin-top: -16px;
    }

    .page-pendaftaran .card-body {
        padding: 1.15rem !important;
    }

    .page-pendaftaran .pendaftaran-split {
        min-height: 0;
    }

    .page-pendaftaran .pendaftaran-visual {
        min-height: 220px;
    }

    .page-pendaftaran .pendaftaran-split .card-pra-pendaftaran {
        max-width: none;
    }

    .page-pendaftaran .btn {
        width: 100%;
    }

    .page-form-lengkap .qr-kode-box {
        align-items: stretch;
        flex-direction: column;
    }
}