/* HALAMAN CARA DAFTAR — PHP 7.4 */

.registration-guide-page{
    padding-top:26px;
}

.registration-hero{
    min-height:350px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    overflow:hidden;
    border:1px solid #d8e7f6;
    border-radius:28px;
    background:
        radial-gradient(circle at 82% 20%,rgba(44,116,222,.13),transparent 34%),
        linear-gradient(120deg,#fff 0%,#edf7ff 100%);
    box-shadow:0 16px 40px rgba(11,31,77,.08);
}

.registration-hero-copy{
    padding:42px 42px 38px;
    position:relative;
    z-index:2;
}

.registration-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:999px;
    color:#165bd6;
    background:#eaf4ff;
    font-size:12px;
    font-weight:600;
}

.registration-kicker .icon{
    width:18px;
    height:18px;
}

.registration-hero h1{
    max-width:640px;
    margin:22px 0 13px;
    color:#0b2f68;
    font-size:40px;
    line-height:1.16;
    letter-spacing:-1px;
    font-weight:600;
}

.registration-hero p{
    max-width:610px;
    margin:0;
    color:#526c8a;
    font-size:15.5px;
    line-height:1.65;
}

.registration-hero-actions{
    margin-top:24px;
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}

.registration-hero-actions .btn{
    min-height:50px;
}

.registration-security-note{
    margin-top:16px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#536d8b;
    font-size:11.5px;
    font-weight:500;
}

.registration-security-note .icon{
    width:18px;
    height:18px;
    color:#1461d2;
}

.registration-hero-visual{
    position:relative;
    min-height:350px;
    overflow:hidden;
    background:
        radial-gradient(circle at 48% 50%,rgba(35,113,225,.18),transparent 44%),
        linear-gradient(140deg,rgba(224,242,255,.1),rgba(194,226,255,.45));
}

.registration-hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(247,251,255,.95),rgba(247,251,255,0) 28%),
        radial-gradient(circle at 78% 12%,rgba(255,255,255,.75),transparent 22%);
}

.registration-phone{
    position:absolute;
    left:50%;
    top:50%;
    width:195px;
    min-height:280px;
    padding:46px 21px 24px;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:9px solid #102c55;
    border-radius:29px;
    background:#fff;
    box-shadow:0 24px 48px rgba(13,49,95,.2);
    z-index:2;
}

.phone-top{
    position:absolute;
    top:10px;
    left:50%;
    width:60px;
    height:7px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#17365f;
}

.phone-check{
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    margin-top:6px;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg,#16aa79,#39c892);
    box-shadow:0 10px 20px rgba(22,170,121,.2);
}

.phone-check .icon{
    width:38px;
    height:38px;
}

.registration-phone strong{
    margin-top:16px;
    color:#12386f;
    font-size:19px;
    font-weight:600;
}

.registration-phone small{
    margin-top:5px;
    color:#71859c;
    font-size:11px;
    line-height:1.4;
}

.phone-progress{
    width:100%;
    height:8px;
    margin-top:24px;
    overflow:hidden;
    border-radius:999px;
    background:#e6edf5;
}

.phone-progress span{
    display:block;
    width:72%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#1765d5,#26a9c7);
}

.registration-floating-card{
    position:absolute;
    min-width:195px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid #dce8f5;
    border-radius:14px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 30px rgba(13,49,95,.12);
    z-index:3;
}

.registration-floating-card > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    color:#1763d2;
    background:#eaf4ff;
}

.registration-floating-card > span .icon{
    width:21px;
    height:21px;
}

.registration-floating-card strong{
    display:block;
    color:#214572;
    font-size:12px;
    font-weight:600;
}

.registration-floating-card small{
    display:block;
    margin-top:2px;
    color:#7589a1;
    font-size:9.5px;
}

.card-one{
    left:7%;
    top:21%;
}

.card-two{
    right:5%;
    bottom:18%;
}

.registration-visual-shield{
    position:absolute;
    right:10%;
    top:14%;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:#fff;
    background:linear-gradient(135deg,#1464d5,#24a8c4);
    box-shadow:0 15px 30px rgba(20,100,213,.18);
    z-index:2;
}

.registration-visual-shield .icon{
    width:31px;
    height:31px;
}

.registration-flow-section{
    margin-top:34px;
    margin-bottom:25px;
}

.registration-section-heading{
    max-width:760px;
    margin:0 auto 20px;
    text-align:center;
}

.registration-section-heading > span{
    color:#1763d2;
    font-size:10.5px;
    letter-spacing:1.3px;
    font-weight:700;
}

.registration-section-heading h2{
    margin:5px 0 7px;
    color:#12386f;
    font-size:24px;
    line-height:1.25;
    font-weight:600;
}

.registration-section-heading p{
    margin:0;
    color:#657c98;
    font-size:13px;
    line-height:1.55;
}

.registration-flow-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:20px;
    align-items:start;
}

.registration-steps{
    display:grid;
    gap:14px;
}

.registration-flow-card{
    min-height:150px;
    padding:19px 20px;
    display:grid;
    grid-template-columns:38px 54px minmax(0,1fr);
    gap:14px;
    align-items:start;
    border:1px solid #dfe9f4;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(11,31,77,.065);
}

.flow-number{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    margin-top:7px;
    border-radius:50%;
    color:#fff;
    background:#1663d5;
    font-size:12px;
    font-weight:600;
}

.flow-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin-top:1px;
    border-radius:14px;
    color:#1763d2;
    background:#eaf4ff;
}

.flow-icon.cyan{
    color:#1396ae;
    background:#e7f7fa;
}

.flow-icon.green{
    color:#0da574;
    background:#e8f8f1;
}

.flow-icon.orange{
    color:#ef9413;
    background:#fff3de;
}

.flow-icon.purple{
    color:#7048c3;
    background:#f1ecff;
}

.flow-icon .icon{
    width:26px;
    height:26px;
}

.flow-copy > span{
    color:#6f849d;
    font-size:9.5px;
    letter-spacing:.9px;
    font-weight:600;
}

.flow-copy h3{
    margin:3px 0 5px;
    color:#153a70;
    font-size:17px;
    font-weight:600;
}

.flow-copy p{
    margin:0;
    color:#617995;
    font-size:12px;
    line-height:1.55;
}

.flow-tags{
    margin-top:11px;
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.flow-tags b{
    padding:6px 9px;
    border-radius:999px;
    color:#416181;
    background:#f0f5fb;
    font-size:9.5px;
    font-weight:500;
}

.vehicle-data-list{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 12px;
}

.vehicle-data-list span{
    display:flex;
    align-items:center;
    gap:6px;
    color:#476683;
    font-size:10.5px;
}

.vehicle-data-list .icon{
    width:15px;
    height:15px;
    color:#0ca477;
}

.flow-alert{
    margin-top:12px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:10px;
    color:#5b7190;
    background:#f4f8fd;
    font-size:10.5px;
}

.flow-alert .icon{
    width:16px;
    height:16px;
    color:#1763d2;
}

.flow-link{
    margin-top:12px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#1763d2;
    font-size:11.5px;
    font-weight:600;
}

.registration-guide-sidebar{
    display:grid;
    gap:15px;
    position:sticky;
    top:94px;
}

.registration-info-card{
    padding:19px;
    border:1px solid #dfe9f4;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(11,31,77,.065);
}

.registration-info-card h2{
    margin:0 0 13px;
    color:#153a70;
    font-size:17px;
    font-weight:600;
}

.preparation-item{
    padding:11px 0;
    display:grid;
    grid-template-columns:39px minmax(0,1fr);
    align-items:center;
    gap:10px;
    border-top:1px solid #e8eef5;
}

.preparation-item:first-of-type{
    border-top:0;
}

.preparation-item > span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#1763d2;
    background:#eaf4ff;
}

.preparation-item > span .icon{
    width:20px;
    height:20px;
}

.preparation-item strong{
    display:block;
    color:#254873;
    font-size:11.5px;
    font-weight:600;
}

.preparation-item p{
    margin:2px 0 0;
    color:#71859d;
    font-size:10px;
    line-height:1.4;
}

.registration-warning-card{
    background:linear-gradient(135deg,#fffaf1,#fff);
    border-color:#f4e1bb;
}

.warning-icon,
.cta-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-bottom:12px;
    border-radius:15px;
    color:#e99816;
    background:#fff0d5;
}

.warning-icon .icon,
.cta-icon .icon{
    width:25px;
    height:25px;
}

.registration-warning-card ul{
    margin:0;
    padding-left:18px;
    color:#617895;
    font-size:11px;
    line-height:1.7;
}

.registration-cta-card{
    text-align:center;
    background:linear-gradient(145deg,#eff7ff,#fff);
}

.registration-cta-card .cta-icon{
    margin-left:auto;
    margin-right:auto;
    color:#1763d2;
    background:#eaf4ff;
}

.registration-cta-card h2{
    margin-bottom:7px;
}

.registration-cta-card p{
    margin:0 0 15px;
    color:#627a96;
    font-size:11px;
    line-height:1.5;
}

.registration-cta-card .btn{
    width:100%;
    min-height:45px;
    font-size:12px;
}

.registration-cta-card > small{
    display:block;
    margin-top:11px;
    color:#71859d;
    font-size:9.5px;
}

.registration-cta-card > small a{
    color:#1763d2;
    font-weight:600;
}

.registration-timeline-summary{
    min-height:106px;
    padding:17px 20px;
    display:grid;
    grid-template-columns:repeat(9,auto);
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid #dfe9f4;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(11,31,77,.06);
}

.timeline-summary-item{
    min-width:112px;
    display:grid;
    justify-items:center;
    text-align:center;
}

.timeline-summary-item > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#1763d2;
    background:#eaf4ff;
}

.timeline-summary-item .icon{
    width:21px;
    height:21px;
}

.timeline-summary-item strong{
    margin-top:6px;
    color:#244771;
    font-size:11px;
    font-weight:600;
}

.timeline-summary-item small{
    color:#778ba2;
    font-size:9px;
}

.registration-timeline-summary > i{
    color:#9db0c5;
    font-style:normal;
}

.registration-timeline-summary > i .icon{
    width:18px;
    height:18px;
}

.registration-faq-section{
    margin-top:28px;
    margin-bottom:30px;
}

.registration-faq-grid{
    max-width:940px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.registration-faq-item{
    overflow:hidden;
    border:1px solid #dfe9f4;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 18px rgba(11,31,77,.055);
}

.registration-faq-item button{
    width:100%;
    min-height:56px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    color:#244873;
    background:#fff;
    text-align:left;
    font-size:11.5px;
    font-weight:600;
    cursor:pointer;
}

.registration-faq-item button .icon{
    width:18px;
    height:18px;
    color:#1763d2;
    transition:transform .2s;
}

.registration-faq-item button[aria-expanded="true"] .icon{
    transform:rotate(90deg);
}

.registration-faq-answer{
    display:none;
    padding:0 15px 14px;
}

.registration-faq-item.open .registration-faq-answer{
    display:block;
}

.registration-faq-answer p{
    margin:0;
    color:#637b97;
    font-size:10.5px;
    line-height:1.55;
}

@media(max-width:1050px){
    .registration-hero{
        grid-template-columns:1fr;
    }

    .registration-hero-visual{
        min-height:330px;
    }

    .registration-flow-layout{
        grid-template-columns:1fr;
    }

    .registration-guide-sidebar{
        grid-template-columns:repeat(3,minmax(0,1fr));
        position:static;
    }

    .registration-timeline-summary{
        grid-template-columns:repeat(5,1fr);
    }

    .registration-timeline-summary > i{
        display:none;
    }
}

@media(max-width:760px){
    .registration-guide-page{
        padding-top:18px;
    }

    .registration-hero{
        border-radius:22px;
    }

    .registration-hero-copy{
        padding:27px 21px 23px;
    }

    .registration-hero h1{
        font-size:30px;
    }

    .registration-hero p{
        font-size:14px;
    }

    .registration-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .registration-hero-actions .btn{
        width:100%;
    }

    .registration-hero-visual{
        min-height:300px;
    }

    .registration-phone{
        width:170px;
        min-height:245px;
        padding-top:42px;
    }

    .phone-check{
        width:58px;
        height:58px;
    }

    .card-one{
        left:2%;
        top:15%;
    }

    .card-two{
        right:2%;
        bottom:11%;
    }

    .registration-floating-card{
        min-width:155px;
        padding:10px;
    }

    .registration-flow-card{
        grid-template-columns:34px 46px minmax(0,1fr);
        gap:10px;
        padding:16px;
    }

    .flow-icon{
        width:44px;
        height:44px;
    }

    .flow-copy h3{
        font-size:16px;
    }

    .vehicle-data-list{
        grid-template-columns:1fr;
    }

    .registration-guide-sidebar{
        grid-template-columns:1fr;
    }

    .registration-timeline-summary{
        grid-template-columns:1fr;
        gap:14px;
    }

    .timeline-summary-item{
        width:100%;
        grid-template-columns:42px 1fr;
        justify-items:start;
        align-items:center;
        column-gap:10px;
        text-align:left;
    }

    .timeline-summary-item > span{
        grid-row:1 / span 2;
    }

    .timeline-summary-item strong{
        margin-top:0;
    }

    .registration-faq-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:430px){
    .registration-hero-copy{
        padding:24px 18px 20px;
    }

    .registration-hero h1{
        font-size:27px;
    }

    .registration-hero-visual{
        min-height:275px;
    }

    .registration-phone{
        width:155px;
        min-height:230px;
    }

    .registration-floating-card{
        min-width:135px;
    }

    .registration-floating-card strong{
        font-size:10.5px;
    }

    .registration-floating-card small{
        font-size:8.5px;
    }

    .registration-flow-card{
        grid-template-columns:31px 42px minmax(0,1fr);
        padding:14px;
    }

    .flow-number{
        width:30px;
        height:30px;
    }

    .flow-icon{
        width:40px;
        height:40px;
    }
}