/* HALAMAN DAFTAR — PHP 7.4 */

.signup-page{
    padding:28px 0 34px;
    background:
        radial-gradient(circle at 12% 18%,rgba(41,111,220,.08),transparent 24%),
        radial-gradient(circle at 88% 72%,rgba(0,174,119,.06),transparent 23%);
}

.signup-shell{
    min-height:650px;
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    overflow:hidden;
    border:1px solid #d9e6f4;
    border-radius:26px;
    background:#fff;
    box-shadow:0 18px 48px rgba(11,31,77,.10);
}

.signup-side{
    padding:42px 38px;
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 90% 8%,rgba(89,171,255,.35),transparent 28%),
        radial-gradient(circle at 18% 92%,rgba(0,198,139,.22),transparent 27%),
        linear-gradient(145deg,#0d45aa 0%,#125fd2 55%,#0b4eb9 100%);
}

.signup-side::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    right:-100px;
    bottom:-100px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
    box-shadow:
        0 0 0 42px rgba(255,255,255,.035),
        0 0 0 84px rgba(255,255,255,.025);
}

.signup-side-top,
.signup-progress,
.signup-side-features{
    position:relative;
    z-index:1;
}

.signup-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.11);
    font-size:11.5px;
    font-weight:600;
}

.signup-kicker .icon{
    width:17px;
    height:17px;
}

.signup-side h1{
    margin:20px 0 12px;
    color:#fff;
    font-size:36px !important;
    line-height:1.18 !important;
    letter-spacing:-.8px !important;
    font-weight:600 !important;
}

.signup-side-top > p{
    max-width:480px;
    margin:0;
    color:rgba(255,255,255,.84);
    font-size:14px;
    line-height:1.65;
}

.signup-progress{
    margin-top:36px;
    display:grid;
    gap:7px;
}

.signup-progress-item{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:12px;
    align-items:center;
    opacity:.68;
}

.signup-progress-item.active{
    opacity:1;
}

.signup-progress-item > span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.3);
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.10);
    font-size:12px;
    font-weight:600;
}

.signup-progress-item.active > span{
    color:#1256c6;
    background:#fff;
    border-color:#fff;
}

.signup-progress-item strong{
    display:block;
    color:#fff;
    font-size:12.5px;
    font-weight:600;
}

.signup-progress-item small{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.72);
    font-size:10px;
}

.signup-progress > i{
    width:1px;
    height:22px;
    margin-left:18px;
    background:rgba(255,255,255,.25);
}

.signup-side-features{
    margin-top:38px;
    display:grid;
    gap:12px;
}

.signup-side-features > div{
    padding:12px 13px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:11px;
    align-items:center;
    border:1px solid rgba(255,255,255,.14);
    border-radius:13px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(4px);
}

.signup-side-features > div > span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.13);
}

.signup-side-features .icon{
    width:20px;
    height:20px;
}

.signup-side-features p{
    margin:0;
}

.signup-side-features strong{
    display:block;
    color:#fff;
    font-size:11.5px;
    font-weight:600;
}

.signup-side-features small{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.72);
    font-size:9.5px;
}

.signup-form-panel{
    padding:42px 44px 36px;
}

.signup-form-header{
    display:flex;
    align-items:center;
    gap:13px;
}

.signup-form-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:15px;
    color:#1762d3;
    background:#eaf4ff;
}

.signup-form-icon .icon{
    width:25px;
    height:25px;
}

.signup-form-header h2{
    margin:0;
    color:#11366d;
    font-size:24px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
}

.signup-form-header p{
    margin:4px 0 0;
    color:#6b8099;
    font-size:12px;
}

.signup-form{
    margin-top:24px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.signup-field{
    min-width:0;
}

.signup-field-full{
    grid-column:1 / -1;
}

.signup-field > span{
    display:block;
    margin-bottom:7px;
    color:#284a75;
    font-size:12px;
    font-weight:600;
}

.signup-input{
    min-height:49px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #d8e4f1;
    border-radius:11px;
    background:#fff;
    transition:border-color .18s,box-shadow .18s,background .18s;
}

.signup-input:focus-within{
    border-color:#2266d5;
    box-shadow:0 0 0 3px rgba(34,102,213,.10);
}

.signup-input.invalid{
    border-color:#dc4c4c;
    background:#fffafa;
    box-shadow:0 0 0 3px rgba(220,76,76,.08);
}

.signup-input .icon{
    width:19px;
    height:19px;
    flex:0 0 auto;
    color:#68819f;
}

.signup-input input{
    width:100%;
    min-width:0;
    height:47px;
    padding:0;
    border:0;
    outline:0;
    color:#173b6e;
    background:transparent;
    font-size:13px !important;
}

.signup-input input::placeholder{
    color:#97a7b9;
}

.signup-password-input{
    padding-right:7px;
}

.password-toggle{
    min-width:auto !important;
    width:auto !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 9px !important;
    border:0 !important;
    border-radius:8px !important;
    color:#1762d3 !important;
    background:#edf5ff !important;
    box-shadow:none !important;
    font-size:10.5px !important;
    font-weight:600 !important;
    cursor:pointer;
}

.signup-error{
    min-height:16px;
    display:block;
    margin-top:4px;
    color:#c63e3e;
    font-size:9.5px;
}

.signup-checkbox{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:#637a96;
    font-size:10.5px;
    line-height:1.5;
}

.signup-checkbox input{
    width:16px;
    height:16px;
    margin:1px 0 0;
    flex:0 0 auto;
    accent-color:#1762d3;
}

.signup-checkbox a{
    color:#1762d3;
    font-weight:600;
}

.signup-submit{
    width:100%;
    min-height:50px;
    margin-top:1px;
}

.signup-submit .icon{
    width:18px;
    height:18px;
}

.signup-notice{
    padding:12px 14px;
    border-radius:11px;
    color:#166846;
    background:#eaf8f1;
    border:1px solid #bdebd8;
    font-size:11px;
    line-height:1.5;
}

.signup-notice.error{
    color:#a63d3d;
    background:#fff1f1;
    border-color:#f1c6c6;
}

.signup-login-link{
    margin-top:17px;
    padding-top:16px;
    border-top:1px solid #e7edf4;
    color:#6c8199;
    text-align:center;
    font-size:11.5px;
}

.signup-login-link a{
    color:#1762d3;
    font-weight:600;
}

.signup-safe-note{
    margin-top:14px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:10px;
    color:#607995;
    background:#f5f8fc;
    font-size:10.5px;
}

.signup-safe-note .icon{
    width:17px;
    height:17px;
    flex:0 0 auto;
    color:#1762d3;
}

@media(max-width:980px){
    .signup-shell{
        grid-template-columns:1fr;
    }

    .signup-side{
        padding:31px 30px;
    }

    .signup-progress{
        grid-template-columns:repeat(5,auto);
        align-items:center;
    }

    .signup-progress > i{
        width:34px;
        height:1px;
        margin:0;
    }

    .signup-side-features{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .signup-page{
        padding:18px 0 25px;
    }

    .signup-shell{
        border-radius:21px;
    }

    .signup-side{
        padding:26px 20px;
    }

    .signup-side h1{
        font-size:29px !important;
    }

    .signup-side-top > p{
        font-size:13.5px;
    }

    .signup-progress{
        grid-template-columns:1fr;
    }

    .signup-progress > i{
        width:1px;
        height:18px;
        margin-left:18px;
    }

    .signup-side-features{
        grid-template-columns:1fr;
        margin-top:28px;
    }

    .signup-form-panel{
        padding:27px 20px 24px;
    }

    .signup-form-header h2{
        font-size:21px !important;
    }

    .signup-form{
        grid-template-columns:1fr;
        gap:13px;
    }

    .signup-field-full{
        grid-column:auto;
    }
}

@media(max-width:390px){
    .signup-side h1{
        font-size:26px !important;
    }

    .signup-form-panel{
        padding-left:16px;
        padding-right:16px;
    }

    .signup-form-header{
        align-items:flex-start;
    }

    .signup-form-icon{
        width:43px;
        height:43px;
    }
}

/* PENDAFTARAN TELEGRAM + KODE INTERNAL v2 */
.signup-step-label{display:block;margin-bottom:3px;color:#1762d3;font-size:9px;letter-spacing:.8px;font-weight:800}
.signup-progress-item.done{opacity:1}.signup-progress-item.done>span{color:#0d8d69;border-color:rgba(255,255,255,.82);background:#fff}.signup-progress>i.done{background:rgba(255,255,255,.78)}
.signup-global-notice{margin-top:18px}.signup-global-notice[hidden],.signup-step-panel[hidden]{display:none!important}
.signup-multistep-form{display:block;margin-top:22px}.signup-step-panel{display:none;animation:signupStepIn .22s ease}.signup-step-panel.active{display:block}
@keyframes signupStepIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.signup-two-column,.signup-password-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.signup-password-grid{margin-top:14px}
.signup-step-panel>.signup-submit{margin-top:18px}
.signup-code-info,.signup-ready-card,.signup-email-primary-note{padding:15px;display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;border:1px solid #d6e5f3;border-radius:13px;background:#f5faff}
.signup-code-info>span,.signup-ready-card>span{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;color:#1762d3;background:#e6f1ff}.signup-ready-card{border-color:#bfe7d7;background:#effaf5}.signup-ready-card>span{color:#0b956e;background:#dff5eb}
.signup-code-info .icon,.signup-ready-card .icon{width:23px;height:23px}.signup-code-info small,.signup-ready-card small{display:block;color:#1762d3;font-size:8.5px;font-weight:800;letter-spacing:.7px}.signup-code-info strong,.signup-ready-card strong{display:block;margin-top:4px;color:#315a7d;font-family:"Poppins",sans-serif;font-size:12.5px}.signup-code-info p,.signup-ready-card p{margin:4px 0 0;color:#72889c;font-size:9.5px;line-height:1.55}
.signup-code-group{margin-top:24px;display:grid;grid-template-columns:repeat(5,62px);gap:10px;justify-content:center}.signup-code-input{width:62px;height:66px;border:1px solid #cfddeb;border-radius:13px;outline:0;color:#174b83;background:#fff;text-align:center;font-family:"Poppins",sans-serif;font-size:24px;font-weight:700}.signup-code-input:focus{border-color:#1762d3;box-shadow:0 0 0 4px rgba(23,98,211,.10)}.signup-code-input.invalid{border-color:#d84d4d;background:#fff8f8;box-shadow:0 0 0 3px rgba(216,77,77,.08)}
.signup-internal-code-note{margin-top:15px;padding:10px 12px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;border:1px solid #e2e9ef;border-radius:10px;color:#71869a;background:#fafcfd;font-size:9.5px;line-height:1.55}.signup-internal-code-note .icon{width:18px;height:18px;color:#1762d3}
.signup-button-row{margin-top:18px;display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px}.signup-button-row .signup-submit{margin:0}.signup-secondary-button{min-height:50px;padding:0 14px;border:1px solid #ccdbea;border-radius:11px;color:#526f8d;background:#fff;font-family:"Poppins",sans-serif;font-size:10.5px;font-weight:700;cursor:pointer}
.signup-final-summary{margin:16px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.signup-final-summary>div{padding:11px;border:1px solid #e0e9f1;border-radius:10px;background:#f9fbfd}.signup-final-summary small{display:block;color:#8194a6;font-size:8.5px}.signup-final-summary strong{display:block;margin-top:4px;color:#345c7e;font-size:9.8px;overflow-wrap:anywhere}
.signup-email-primary-note{grid-template-columns:38px minmax(0,1fr);padding:12px}.signup-email-primary-note>.icon{width:38px;height:38px;padding:9px;border-radius:10px;color:#1762d3;background:#e5f1ff}.signup-email-primary-note strong{display:block;color:#355d80;font-size:10px}.signup-email-primary-note small{display:block;margin-top:3px;color:#7d91a5;font-size:9px}
.signup-submit:disabled{opacity:.7;cursor:wait}
@media(max-width:700px){.signup-progress{grid-template-columns:1fr}.signup-two-column,.signup-password-grid,.signup-final-summary{grid-template-columns:1fr}.signup-button-row{grid-template-columns:1fr}.signup-code-group{grid-template-columns:repeat(5,minmax(42px,1fr));gap:7px}.signup-code-input{width:100%;height:56px;font-size:21px}}

/* PERBAIKAN ALUR KODE VERIFIKASI v3 */
.signup-code-stage{display:none;animation:signupStepIn .2s ease}
.signup-code-stage.active{display:block}
.signup-code-stage[hidden]{display:none!important}
.signup-verification-field{margin-top:22px}
.signup-verification-info{border-color:#d9e5f3;background:#f7faff}
.signup-verification-info>span{color:#6b4ed6;background:#eee9ff}
.signup-single-action{width:100%;margin-top:18px!important}
.signup-button-row{grid-template-columns:1fr!important}
.signup-secondary-button{display:none!important}

/* =====================================================
   HAPUS KETERANGAN + LOADING BUTTON v4
===================================================== */

/* Setelah kartu keterangan dihapus, form kode langsung tampil rapi. */
#signupFiveDigitStage .signup-code-group{
    margin-top:4px;
}

#signupVerificationStage .signup-verification-field{
    margin-top:4px;
}

/* Spinner kecil di dalam tombol utama pendaftaran. */
.signup-submit.is-loading{
    position:relative;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:9px;
    pointer-events:none;
    opacity:.88;
}

.signup-button-spinner{
    width:15px;
    height:15px;
    flex:0 0 15px;
    display:inline-block;
    border:2px solid rgba(255,255,255,.42);
    border-top-color:#ffffff;
    border-radius:50%;
    animation:signupButtonSpin .72s linear infinite;
}

.signup-button-loading-text{
    display:inline-block;
    line-height:1;
}

@keyframes signupButtonSpin{
    to{
        transform:rotate(360deg);
    }
}

@media(prefers-reduced-motion:reduce){
    .signup-button-spinner{
        animation-duration:1.4s;
    }
}