/* =========================================================
   APM Logistics - Landing Page (Retail Business)
   File: landing/css/apm-landing.css
   ========================================================= */
:root{
    --navy:#132f5e;
    --navy-btn:#1a3a7c;
    --navy-dark:#0c2550;
    --red:#dc2638;
    --red-dark:#b91c2c;
    --text:#4a5b78;
    --muted:#6b7a93;
    --bg-soft:#eef5fd;
    --bg-chip:#f2f6fb;
    --border:#dde6f1;
    --white:#fff;
    --radius:14px;
    --radius-sm:10px;
    --container:1206px;
    --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:90px
}
body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background:var(--white);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased
}
img{
    max-width:100%;
    display:block
}
a{
    color:inherit;
    text-decoration:none
}
h1,h2,h3,h4{
    color:var(--navy);
    margin:0;
    line-height:1.2;
    font-weight:700
}
p{
    margin:0
}
.container{
    width:100%;
    max-width:calc(var(--container) + 48px);
    margin:0 auto;
    padding:30px 24px
}
.section{
    padding:80px 0
}
.section--soft{
}
.eyebrow{
    display:block;
    color:var(--red);
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin-bottom:8px
}
.section-title{
    font-size:clamp(26px,3vw,38px);
    letter-spacing:-.01em
}
.section-head{
    margin-bottom:40px
}
.section-head--row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap
}
:focus-visible{
    outline:3px solid var(--red);
    outline-offset:3px
}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    font-size:15px;
    border-radius:12px;
    padding:14px 38px;
    transition:background .2s ease,transform .2s ease;
    border:0;
    cursor:pointer;
    font-family:inherit
}
.btn--red{
    background:var(--red);
    color:var(--white)
}
.btn--red:hover{
    background:var(--red-dark)
}
.btn--navy{
    background:var(--navy-btn);
    color:var(--white);
    border-radius:999px;
    padding:12px 34px
}
.btn--navy:hover{
    background:var(--navy-dark)
}
.btn--wa{
    background:#1fa855;
    color:var(--white);
    border-radius:999px;
    padding:12px 28px;
    box-shadow:0 6px 16px rgba(31,168,85,.25)
}
.btn--wa:hover{
    background:#178a45
}
.btn--wa svg{
    width:20px;
    height:20px;
    fill:currentColor
}
.btn--hero{
    border-radius:12px;
    padding:15px 34px;
    font-size:16px
}
.btn--hero svg{
    width:22px;
    height:22px
}
.btn svg{
    width:16px;
    height:16px
}

/* ===== Header ===== */
.header{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--white);
    border-bottom:1px solid transparent;
    transition:box-shadow .2s,border-color .2s
}
.header.is-scrolled{
    border-color:var(--border);
    box-shadow:0 4px 18px rgba(19,47,94,.06)
}
.header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:82px;
    gap:24px
}
.header__logo img{
    height:56px;
    width:auto
}
.nav{
    display:flex;
    gap:28px
}
.nav a{
    color:var(--navy);
    font-weight:600;
    font-size:15px;
    padding:6px 0;
    position:relative
}
.nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--red);
    transform:scaleX(0);
    transition:transform .2s
}
.nav a:hover::after,.nav a.is-active::after{
    transform:scaleX(1)
}
.nav-toggle{
    display:none;
    background:none;
    border:0;
    padding:8px;
    cursor:pointer;
    color:var(--navy)
}
.nav-toggle svg{
    width:28px;
    height:28px
}

/* ===== Hero ===== */
.hero{
    position:relative;
    background:#f4f8fd;
    overflow:hidden
}
.hero__media{
    position:absolute;
    inset:0 0 0 auto;
    width:62%;
    background:url(../images/apm/hero3.jpg) center right/cover no-repeat
}
.hero__media::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#f4f8fd 0%,rgba(244,248,253,.85) 14%,rgba(244,248,253,0) 42%)
}
.hero__inner{
    position:relative;
    min-height:528px;
    display:flex;
    align-items:center;
    padding:56px 0
}
.hero__content{
    max-width:620px
}
.hero__eyebrow{
    color:var(--navy);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:22px
}
.hero h1{
    font-size:clamp(34px,4.4vw,56px);
    letter-spacing:-.015em;
    line-height:1.08;
    margin-bottom:22px
}
.hero h1 .accent{
    color:var(--red)
}
.hero__lead{
    font-size:18px;
    color:var(--text);
    max-width:570px;
    margin-bottom:56px
}

/* Feature strip */
.features{
    background:var(--bg-soft)
}
.features__inner{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:170px;
    padding:23px 0
}
.feature{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--navy);
    font-weight:600;
    font-size:17px;
    padding-left:16px
}
.feature svg{
    width:30px;
    height:30px;
    flex:none
}

/* ===== About ===== */
.about__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center
}
.about h2{
    font-size:clamp(28px,3.2vw,42px);
    margin-bottom:22px
}
.about p{
    font-size:16.5px;
    max-width:540px
}
.about__img{
    border-radius:var(--radius);
    overflow:hidden;
    aspect-ratio:575/450
}
.about__img img{
    width:100%;
    height:100%;
    object-fit:cover
}

/* Clients */
.clients{
    padding:0 0 36px;
    overflow:hidden
}
.clients h3{
    font-size:26px;
    margin-bottom:28px
}

/* ===== Legalitas ===== */
.legal__grid{
    display:grid;
    grid-template-columns:1fr 396px;
    gap:36px;
    align-items:stretch
}
.legal h2{
    font-size:clamp(28px,3vw,40px);
    max-width:440px;
    margin-bottom:36px
}
.legal__cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius)
}
.legal-card{
    padding:20px 18px 22px
}
.legal-card .num{
    display:block;
    color:var(--red);
    font-size:12px;
    font-weight:700;
    margin-bottom:12px
}
.legal-card h3{
    font-size:19px;
    margin-bottom:8px
}
.legal-card .sub{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    margin-bottom:26px;
    line-height:1.35
}
.legal-card p{
    font-size:14px;
    line-height:1.45
}
.legal__img{
    border-radius:var(--radius);
    overflow:hidden
}
.legal__img img{
    width:100%;
    height:100%;
    object-fit:cover
}

/* ===== Layanan ===== */
.services__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.service{
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.service__img{
    aspect-ratio:286/148;
    overflow:hidden
}
.service__img img{
    width:100%;
    height:100%;
    object-fit:cover
}
.service__body{
    padding:20px 18px 36px
}
.service h3{
    font-size:19px;
    margin-bottom:10px
}
.service p{
    font-size:15px;
    line-height:1.4
}

/* ===== Mengapa ===== */
.why__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.why-card{
    padding:20px 18px 22px;
    min-height:136px
}
.why-card .num{
    display:block;
    font-size:12px;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px
}
.why-card h3{
    font-size:19px;
    margin-bottom:18px
}
.why-card p{
    font-size:14.5px;
    line-height:1.45
}

/* ===== Galeri ===== */
.gallery__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--navy);
    font-weight:600;
    font-size:15px;
    margin-bottom:8px
}
.gallery__link svg{
    width:16px;
    height:16px;
    transition:transform .2s
}
.gallery__link:hover svg{
    transform:translateX(4px)
}
.gallery__grid{
    display:grid;
    grid-template-columns:376fr 400fr 382fr;
    gap:24px
}
.gallery__item{
    border-radius:var(--radius-sm);
    overflow:hidden;
    height:clamp(150px,12.5vw,180px)
}
.gallery__item img{
    width:100%;
    height:100%;
    object-fit:cover
}

/* ===== Testimoni ===== */
.testi__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.testi{
    padding:16px 18px 26px;
    display:flex;
    flex-direction:column
}
.testi .quote{
    color:var(--red);
    font-size:30px;
    line-height:1;
    font-weight:700;
    height:26px
}
.testi blockquote{
    margin:12px 0 32px;
    color:var(--navy);
    font-weight:700;
    font-size:17px;
    line-height:1.3;
    flex:1
}
.testi .who{
    font-size:12.5px;
    color:var(--text)
}

/* ===== Alur ===== */
.flow__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.flow-card{
    padding:18px 18px 22px;
    min-height:182px;
    display:flex;
    flex-direction:column
}
.flow-card .step{
    width:40px;
    height:40px;
    border:1px solid var(--border);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--red);
    font-weight:700;
    font-size:13px;
    margin-bottom:16px
}
.flow-card h3{
    font-size:17px;
    line-height:1.25;
    flex:1
}
.flow-card .of{
    font-size:13px;
    color:var(--text);
    margin-top:18px
}

/* ===== FAQ ===== */
.faq__grid{
    display:grid;
    grid-template-columns:500px 1fr;
    gap:88px;
    align-items:start
}
.faq h2{
    font-size:clamp(28px,3vw,40px);
    margin-bottom:46px
}
.faq__img{
    border-radius:var(--radius-sm);
    overflow:hidden
}
.faq__list{
    display:flex;
    flex-direction:column;
    gap:10px
}
.faq-item{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-sm)
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:13px 18px;
    font-weight:600;
    color:var(--text);
    font-size:15px
}
.faq-item summary::-webkit-details-marker{
    display:none
}
.faq-item summary .ico{
    position:relative;
    width:12px;
    height:12px;
    flex:none
}
.faq-item summary .ico::before,.faq-item summary .ico::after{
    content:"";
    position:absolute;
    background:var(--navy);
    border-radius:2px
}
.faq-item summary .ico::before{
    left:0;
    right:0;
    top:5px;
    height:2px
}
.faq-item summary .ico::after{
    top:0;
    bottom:0;
    left:5px;
    width:2px;
    transition:transform .2s
}
.faq-item[open] summary .ico::after{
    transform:scaleY(0)
}
.faq-item[open] summary{
    color:var(--navy)
}
.faq-item .answer{
    padding:0 18px 16px;
    font-size:14.5px;
    line-height:1.55
}

/* ===== CTA ===== */
.cta{
    position:relative;
    color:var(--white);
    overflow:hidden
}
.cta__media{
    position:absolute;
    inset:0 0 0 auto;
    width:100%;
    background:url(../images/apm/hero.jpg) center/cover no-repeat
}
.cta__media::before{
    content:"";
    position:absolute;
    inset:0;
}
.cta__inner{
    position:relative;
    min-height:280px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:48px 0
}
.cta h2{
    color:var(--white);
    font-size:clamp(28px,3vw,42px);
    font-weight:600;
    max-width:500px
}
.cta .btn{
    align-self:flex-end;
    margin-bottom:-14px
}

/* ===== Footer ===== */
.footer__inner{
    display:flex;
    align-items:center;
    gap:24px;
    padding:20px 0
}
.footer__logo img{
    height:54px;
    width:auto
}
.footer .nav{
    margin-left:190px;
    gap:24px
}
.footer .nav a{
    font-weight:500;
    color:var(--text)
}
.footer__copy{
    border-top:1px solid var(--border);
    padding:16px 0;
    font-size:13px;
    color:var(--muted);
    text-align:center
}


/* ===== Reveal (sekali saat scroll) ===== */
.reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease,transform .6s ease
}
.reveal.is-visible{
    opacity:1;
    transform:none
}
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    .reveal{
        opacity:1;
        transform:none;
        transition:none
    }
}

/* ===== Responsive ===== */
@media (max-width:1199px){
    .legal__grid{
        grid-template-columns:1fr
    }
    .legal__img{
        max-height:380px
    }
    .faq__grid{
        grid-template-columns:1fr 1fr;
        gap:48px
    }
    .footer .nav{
        margin-left:auto
    }
}
@media (max-width:991px){
    .section{
        padding:64px 0
    }
    .nav-toggle{
        display:block
    }
    .header .nav{
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:var(--white);
        flex-direction:column;
        gap:0;
        padding:8px 24px 20px;
        border-bottom:1px solid var(--border);
        box-shadow:0 12px 24px rgba(19,47,94,.08);
        display:none
    }
    .header .nav.is-open{
        display:flex
    }
    .header .nav a{
        padding:12px 0;
        border-bottom:1px solid var(--bg-chip)
    }
    .header .nav a::after{
        display:none
    }
    .header .btn--navy,.header .btn--wa{
        display:none
    }
    .hero__media{
        position:relative;
        width:100%;
        height:320px;
        inset:auto
    }
    .hero__media::before{
        background:linear-gradient(180deg,rgba(244,248,253,0) 60%,#f4f8fd 100%)
    }
    .hero{
        display:flex;
        flex-direction:column-reverse
    }
    .hero__inner{
        min-height:0;
        padding:40px 0 48px
    }
    .hero__lead{
        margin-bottom:32px
    }
    .features__inner{
        grid-template-columns:repeat(2,1fr)
    }
    .about__grid{
        grid-template-columns:1fr;
        gap:36px
    }
    .legal__cards{
        grid-template-columns:1fr
    }
    .services__grid{
        grid-template-columns:repeat(2,1fr)
    }
    .why__grid,.testi__grid{
        grid-template-columns:repeat(2,1fr)
    }
    .flow__grid{
        grid-template-columns:repeat(2,1fr)
    }
    .gallery__grid{
        grid-template-columns:1fr 1fr
    }
    .gallery__item:last-child{
        grid-column:1/-1
    }
    .faq__grid{
        grid-template-columns:1fr
    }
    .faq h2{
        margin-bottom:28px
    }
    .cta__media{
        width:100%
    }
    .cta__media::before{
        background:rgba(12,37,80,.82)
    }
    .cta__inner{
        flex-direction:column;
        align-items:flex-start
    }
    .cta .btn{
        align-self:flex-start;
        margin:0
    }
    .footer__inner{
        flex-direction:column;
        text-align:center
    }
    .footer .nav{
        margin:0;
        flex-wrap:wrap;
        justify-content:center
    }
}
@media (max-width:575px){
    .container{
        padding:0 18px
    }
    .header__inner{
        height:70px
    }
    .header__logo img{
        height:44px
    }
    .header .nav{
        top:70px
    }
    .hero__media{
        height:240px
    }
    .hero__eyebrow{
        letter-spacing:.12em
    }
    .hero__lead{
        font-size:16px
    }
    .btn{
        width:100%
    }
    .features__inner{
        grid-template-columns:1fr;
        gap:14px;
        padding:24px 0
    }
    .feature{
        padding-left:0;
        font-size:16px
    }
    .services__grid,.why__grid,.testi__grid,.flow__grid,.gallery__grid{
        grid-template-columns:1fr
    }
    .gallery__item{
        height:200px
    }
    .flow-card,.why-card{
        min-height:0
    }
}

/* ===== Klien: marquee berjalan ===== */
.clients__marquee{
    overflow:hidden;
    position:relative;
    padding:4px 0;
    max-width:calc(var(--container) + 48px);
    margin:0 auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.clients__track{
    display:flex;
    gap:12px;
    width:max-content;
    animation:clients-scroll var(--marquee-duration,30s) linear infinite
}
.clients__marquee:hover .clients__track{
    animation-play-state:paused
}

.client{
    flex:none;
    width:200px;
    height:96px;
    background:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text);
    font-size:15px;
    font-weight:600;
    padding:10px 18px
}
.client img{
    width:100%;
    height:100%;
    max-height:72px;
    object-fit:contain;
    transition:transform .2s
}
.client:hover img{
    transform:scale(1.06)
}
@keyframes clients-scroll{
    to{
        transform:translateX(calc(-50% - 6px))
    }
}
@media (max-width:575px){
    .client{
        width:150px;
        height:76px
    }
    .client img{
        max-height:56px
    }
}

/* ===== Balon Lacak Resi (kiri bawah) ===== */
.track-widget{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:95;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px
}
.track-float{
    position:relative;
    height:56px;
    padding:0 22px 0 18px;
    border-radius:999px;
    background:var(--red);
    color:var(--white);
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    font-size:15px;
    box-shadow:0 8px 24px rgba(220,38,56,.3);
    transition:transform .2s,background .2s
}
.track-float:hover{
    background:var(--red-dark);
    transform:translateY(-2px)
}
.track-float svg{
    width:26px;
    height:26px;
    position:relative;
    z-index:1;
    flex:none
}
.track-float__label{
    position:relative;
    z-index:1
}
.track-float::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--red);
    animation:track-pulse 2.4s ease-out infinite;
    z-index:0
}
@keyframes track-pulse{
    0%{
        transform:scale(1);
        opacity:.45
    }
    100%{
        transform:scale(1.25,1.5);
        opacity:0
    }
}
.track-bubble{
    position:relative;
    max-width:240px;
    background:#fff;
    color:var(--navy);
    border-radius:14px 14px 14px 4px;
    padding:12px 34px 12px 14px;
    font-size:14px;
    line-height:1.4;
    box-shadow:0 10px 30px rgba(19,47,94,.18);
    display:flex;
    flex-direction:column;
    gap:2px;
    cursor:pointer;
    opacity:0;
    transform:translateY(8px) scale(.96);
    transform-origin:bottom left;
    pointer-events:none;
    transition:opacity .3s,transform .3s
}
.track-bubble.is-show{
    opacity:1;
    transform:none;
    pointer-events:auto
}
.track-bubble span{
    color:var(--text)
}
.track-bubble::after{
    content:"";
    position:absolute;
    left:24px;
    bottom:-7px;
    width:14px;
    height:14px;
    background:#fff;
    transform:rotate(45deg);
    border-radius:2px
}
.track-bubble__close{
    position:absolute;
    top:4px;
    right:6px;
    background:none;
    border:0;
    font-size:20px;
    line-height:1;
    color:var(--muted);
    cursor:pointer;
    padding:2px 6px
}
.track-bubble__close:hover{
    color:var(--navy)
}
@media (max-width:575px){
    .track-widget{
        left:14px;
        bottom:14px
    }
    .track-float{
        height:50px;
        padding:0 18px 0 14px;
        font-size:14px
    }
    .track-float svg{
        width:22px;
        height:22px
    }
    .track-bubble{
        max-width:210px;
        font-size:13px
    }
}

@media (prefers-reduced-motion:reduce){
    .clients__track{
        animation:none;
        flex-wrap:wrap;
        width:auto;
        justify-content:center
    }
    .clients__marquee{
        -webkit-mask-image:none;
        mask-image:none
    }
    .track-float::before{
        animation:none;
        display:none
    }
}