/* =========================================================
   APM Logistics - Halaman Cek Resi
   File: css/apm-cekresi.css
   ========================================================= */

/* container bawaan punya padding 25px atas-bawah -> nolkan di halaman ini */
.cr-hero > .container,
.cr-result-wrap > .container,
.cr-help > .container{
    padding-top:0;
    padding-bottom:0
}

/* ---------- Hero + form ---------- */
.cr-hero{
    background:
        radial-gradient(900px 300px at 85% -40%, rgba(220,38,56,.08), transparent 70%),
        linear-gradient(180deg,#f4f8fd 0%,var(--white) 100%);
    padding:52px 0 28px;
    text-align:center
}
.cr-hero__title{
    font-size:clamp(30px,4vw,44px);
    letter-spacing:-.015em;
    margin-bottom:10px
}
.cr-hero__lead{
    font-size:16.5px;
    max-width:560px;
    margin:0 auto 26px
}
.cr-search{
    display:flex;
    align-items:center;
    gap:8px;
    max-width:640px;
    margin:0 auto;
    padding:8px 8px 8px 18px;
    background:var(--white);
    border:2px solid var(--border);
    border-radius:999px;
    box-shadow:0 14px 34px rgba(19,47,94,.12);
    transition:border-color .2s,box-shadow .2s
}
.cr-search:focus-within{
    border-color:var(--red);
    box-shadow:0 0 0 5px rgba(220,38,56,.12),0 14px 34px rgba(19,47,94,.12)
}
.cr-search__ico{
    flex:none;
    color:var(--navy);
    display:grid
}
.cr-search__ico svg{
    width:24px;
    height:24px
}
.cr-search__input{
    flex:1;
    min-width:0;
    height:48px;
    border:0;
    outline:0;
    background:transparent;
    font:inherit;
    font-size:18px;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--navy)
}
.cr-search__input::placeholder{
    color:#9aa6b8;
    font-weight:500;
    letter-spacing:0
}
.cr-search__btn{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:52px;
    padding:0 28px;
    border:0;
    border-radius:999px;
    background:var(--red);
    color:var(--white);
    font:inherit;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(220,38,56,.3);
    transition:background .2s,transform .2s
}
.cr-search__btn:hover{
    background:var(--red-dark);
    transform:translateY(-1px)
}
.cr-search__btn svg{
    width:20px;
    height:20px
}
.cr-search__btn.is-loading{
    opacity:.8;
    cursor:wait
}
.cr-search__btn.is-loading svg{
    display:none
}
.cr-search__btn.is-loading::before{
    content:"";
    width:18px;
    height:18px;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    animation:cr-spin .7s linear infinite
}
.cr-hint{
    min-height:22px;
    margin-top:10px;
    font-size:13.5px;
    color:var(--muted)
}
.cr-hint.is-error{
    color:var(--red);
    font-weight:600
}
.cr-recent{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
    color:var(--muted)
}
.cr-recent[hidden]{
    display:none
}
.cr-recent__list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center
}
.cr-chip{
    padding:5px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--white);
    color:var(--navy);
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:border-color .2s,color .2s
}
.cr-chip:hover{
    border-color:var(--red);
    color:var(--red)
}

/* ---------- Kartu hasil ---------- */
.cr-result-wrap{
    padding:0 0 8px;
    scroll-margin-top:96px
}
.cr-result-wrap .container{
    max-width:calc(980px + 48px)
}
#crResult:empty{
    display:none
}
.cr-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 18px 44px rgba(19,47,94,.08)
}
.cr-state{
    text-align:center;
    padding:40px 20px
}
.cr-state h3{
    font-size:19px;
    margin-bottom:6px
}
.cr-state p{
    max-width:440px;
    margin:0 auto
}
.cr-spinner{
    width:44px;
    height:44px;
    margin:0 auto 14px;
    border-radius:50%;
    border:4px solid var(--bg-soft);
    border-top-color:var(--red);
    animation:cr-spin .8s linear infinite
}
@keyframes cr-spin{
    to{
        transform:rotate(360deg)
    }
}
.cr-state__ico{
    width:58px;
    height:58px;
    margin:0 auto 14px;
    border-radius:50%;
    background:#fdecee;
    color:var(--red);
    display:grid;
    place-items:center
}
.cr-state__ico svg{
    width:30px;
    height:30px
}

.cr-res{
    padding:26px 28px
}
.cr-res__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px
}
.cr-res__label{
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:600
}
.cr-res__awb{
    font-size:26px;
    font-weight:700;
    color:var(--navy);
    letter-spacing:.02em;
    line-height:1.2;
    word-break:break-all
}
.cr-res__update{
    margin-top:6px;
    font-size:13.5px;
    color:var(--muted)
}
.cr-res__update strong{
    color:var(--navy)
}
.cr-badge{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 14px;
    border-radius:999px;
    background:#fff4e5;
    color:#b35c00;
    font-size:13px;
    font-weight:700
}
.cr-badge::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor
}
.cr-badge--done{
    background:#e7f7ee;
    color:#178a45
}

.cr-route{
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:14px;
    background:var(--bg-soft)
}
.cr-route small{
    display:block;
    font-size:11.5px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:600
}
.cr-route strong{
    display:block;
    color:var(--navy);
    font-size:14.5px;
    line-height:1.35;
    margin-top:2px
}
.cr-route svg{
    width:28px;
    height:28px;
    color:var(--red)
}
.cr-route__to{
    text-align:right
}

/* Stepper */
.cr-steps{
    list-style:none;
    margin:22px 0 6px;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.cr-step{
    position:relative;
    text-align:center;
    padding-top:30px;
    font-size:13px;
    font-weight:500;
    color:var(--muted)
}
.cr-step::before{
    content:"";
    position:absolute;
    top:10px;
    left:-50%;
    width:100%;
    height:3px;
    background:var(--border);
    z-index:0
}
.cr-step:first-child::before{
    display:none
}
.cr-step::after{
    content:"";
    position:absolute;
    top:2px;
    left:50%;
    width:19px;
    height:19px;
    margin-left:-9.5px;
    border-radius:50%;
    background:var(--white);
    border:3px solid var(--border);
    z-index:1                     /* titik di atas garis */
}
.cr-step.is-done,
.cr-step.is-current{
    color:var(--navy)
}
.cr-step.is-done::before,
.cr-step.is-current::before{
    background:var(--red)
}
.cr-step.is-done::after{
    background:var(--red);
    border-color:var(--red)
}
.cr-step.is-current{
    font-weight:700
}
.cr-step.is-current::after{
    border-color:var(--red);
    box-shadow:0 0 0 5px rgba(220,38,56,.15)
}

.cr-received{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:16px;
    padding:12px 16px;
    border-radius:12px;
    background:#e7f7ee;
    color:#14532d
}
.cr-received svg{
    flex:none;
    width:24px;
    height:24px;
    color:#178a45
}
.cr-received strong{
    display:block
}
.cr-received span{
    font-size:13px
}

.cr-res__grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:28px;
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid var(--border)
}
.cr-sub{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:14px
}

/* Timeline */
.cr-tl{
    list-style:none;
    margin:0;
    padding:0
}
.cr-tl li{
    display:grid;
    grid-template-columns:92px 1fr;
    gap:18px;
    position:relative;
    padding-bottom:18px
}
.cr-tl li::before{
    content:"";
    position:absolute;
    left:105px;
    top:6px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--border)
}
.cr-tl li::after{
    content:"";
    position:absolute;
    left:110px;
    top:20px;
    bottom:0;
    width:2px;
    background:var(--border)
}
.cr-tl li:last-child::after{
    display:none
}
.cr-tl li:first-child::before{
    background:var(--red);
    box-shadow:0 0 0 4px rgba(220,38,56,.15)
}
.cr-tl__time{
    text-align:right;
    font-size:12.5px;
    line-height:1.35;
    color:var(--muted)
}
.cr-tl__time strong{
    display:block;
    color:var(--navy);
    font-weight:600
}
.cr-tl__body{
    padding-left:14px
}
.cr-tl__status{
    font-weight:600;
    color:var(--text);
    font-size:14.5px;
    line-height:1.35
}
.cr-tl li:first-child .cr-tl__status{
    color:var(--navy);
    font-weight:700
}
.cr-tl__place{
    font-size:13px;
    color:var(--muted);
    margin-top:2px
}

/* Detail */
.cr-detail{
    margin:0;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden
}
.cr-detail > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    font-size:14px
}
.cr-detail > div + div{
    border-top:1px solid var(--border)
}
.cr-detail dt{
    color:var(--muted)
}
.cr-detail dd{
    margin:0;
    color:var(--navy);
    font-weight:600;
    text-align:right;
    word-break:break-word
}

/* Tombol aksi */
.cr-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--border)
}
.cr-actions--center{
    justify-content:center;
    border-top:0;
    padding-top:0;
    margin-top:18px
}
.cr-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:44px;
    padding:0 20px;
    border:0;
    border-radius:999px;
    font:inherit;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s
}
.cr-btn svg{
    width:18px;
    height:18px
}
.cr-btn--ghost{
    background:var(--bg-chip);
    color:var(--navy)
}
.cr-btn--ghost:hover{
    background:var(--border)
}
.cr-btn--wa{
    background:#1fa855;
    color:var(--white)
}
.cr-btn--wa:hover{
    background:#178a45;
    color:var(--white)
}

/* ---------- Bantuan ---------- */
.cr-help{
    padding:56px 0 64px
}
.cr-help .section-head{
    margin-bottom:24px
}
.cr-help__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.cr-help__card{
    padding:22px 20px
}
.cr-help__ico{
    width:44px;
    height:44px;
    border-radius:12px;
    background:var(--bg-soft);
    color:var(--red);
    display:grid;
    place-items:center;
    margin-bottom:14px
}
.cr-help__ico svg{
    width:22px;
    height:22px
}
.cr-help__card h3{
    font-size:17px;
    margin-bottom:6px
}
.cr-help__card p{
    font-size:14.5px;
    line-height:1.5
}
.cr-faq{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:28px;
    max-width:820px
}
.cr-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:32px;
    padding:24px 28px;
    border-radius:var(--radius);
    background:var(--bg-soft);
    border:1px solid var(--border)
}
.cr-cta h3{
    font-size:19px;
    margin-bottom:4px
}
.cr-cta .btn{
    flex:none
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

/* ---------- Responsive ---------- */
@media (max-width:991px){
    .cr-res__grid{
        grid-template-columns:1fr
    }
    .cr-help__grid{
        grid-template-columns:1fr 1fr
    }
}
@media (max-width:575px){
    .cr-hero{
        padding:32px 0 20px
    }
    .cr-hero__lead{
        font-size:15px;
        margin-bottom:20px
    }
    .cr-search{
        padding:6px 6px 6px 14px
    }
    .cr-search__ico{
        display:none
    }
    .cr-search__input{
        height:46px;
        font-size:16px              /* 16px mencegah auto-zoom iOS */
    }
    .cr-search__btn{
        height:46px;
        padding:0 18px
    }
    .cr-res{
        padding:20px 16px
    }
    .cr-res__head{
        flex-direction:column;
        gap:10px
    }
    .cr-res__awb{
        font-size:22px
    }
    .cr-route{
        grid-template-columns:1fr;
        gap:8px
    }
    .cr-route svg{
        transform:rotate(90deg);
        width:22px;
        height:22px
    }
    .cr-route__to{
        text-align:left
    }
    .cr-step{
        font-size:10.5px
    }
    .cr-tl li{
        grid-template-columns:70px 1fr;
        gap:14px
    }
    .cr-tl li::before{
        left:79px
    }
    .cr-tl li::after{
        left:84px
    }
    .cr-actions{
        justify-content:stretch
    }
    .cr-actions .cr-btn{
        flex:1 1 auto
    }
    .cr-actions .cr-btn--wa{
        flex-basis:100%
    }
    .cr-help{
        padding:40px 0 48px
    }
    .cr-help__grid{
        grid-template-columns:1fr
    }
    .cr-cta{
        flex-direction:column;
        align-items:flex-start;
        padding:20px
    }
}