/* =========================================================
   SEJARAH PAGE V14
   Visual timeline + compact corporate layout
   ========================================================= */

.history-page{
    overflow:hidden;
}

.history-page .eyebrow{
    color:var(--royal);
}

.history-intro{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:54px;
    align-items:center;
    padding-top:64px;
    padding-bottom:72px;
}

.history-photo-frame{
    overflow:hidden;
    border-radius:14px;
    background:#EEF3FB;
    box-shadow:0 18px 50px rgba(21,48,97,.09);
}

.history-photo-frame img{
    display:block;
    width:100%;
    height:auto;
}

.history-photo-caption{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:14px;
    color:var(--ink-soft);
    font-size:.78rem;
}

.history-caption-year{
    color:var(--royal);
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    letter-spacing:.08em;
}

.history-intro-copy h2,
.history-section-heading h2,
.history-growth-copy h2{
    font-size:clamp(1.55rem,2.6vw,2.2rem);
    line-height:1.2;
    letter-spacing:-.03em;
}

.history-intro-copy > p{
    margin-top:16px;
    color:var(--ink-soft);
    line-height:1.75;
    font-size:.92rem;
}

.history-intro-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:26px;
}

.history-stat-card{
    padding:20px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--paper);
}

.history-stat-card strong{
    display:block;
    color:var(--royal);
    font-family:'Sora',sans-serif;
    font-size:1.45rem;
    line-height:1;
}

.history-stat-card span{
    display:block;
    margin-top:8px;
    color:var(--ink-soft);
    font-size:.78rem;
    line-height:1.5;
}


/* Timeline */

.history-timeline-section{
    padding:72px 0 82px;
    background:#F2F6FC;
    border-top:1px solid #E5EBF5;
    border-bottom:1px solid #E5EBF5;
}

.history-section-heading{
    max-width:690px;
    margin-bottom:48px;
}

.history-section-heading p{
    margin-top:12px;
    max-width:60ch;
    color:var(--ink-soft);
    font-size:.91rem;
    line-height:1.7;
}

.history-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:22px;
    max-width:1040px;
    margin:0 auto;
}

.history-timeline::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:linear-gradient(
        180deg,
        rgba(31,70,157,0),
        rgba(31,70,157,.35) 10%,
        rgba(31,70,157,.35) 90%,
        rgba(31,70,157,0)
    );
}

.history-milestone{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);
    align-items:center;
}

.history-milestone-card{
    grid-column:1;
    padding:26px 28px;
    border:1px solid #DDE5F2;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 28px rgba(20,46,91,.045);
}

.history-milestone-right .history-milestone-card{
    grid-column:3;
}

.history-milestone-marker{
    position:relative;
    grid-column:2;
    grid-row:1;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.history-marker-dot{
    width:14px;
    height:14px;
    border:4px solid #F2F6FC;
    border-radius:50%;
    background:var(--royal);
    box-shadow:0 0 0 1px rgba(31,70,157,.25);
}

.history-marker-year{
    padding:5px 8px;
    border:1px solid #CDD9EE;
    border-radius:999px;
    background:#fff;
    color:var(--royal);
    font-family:'JetBrains Mono',monospace;
    font-size:.64rem;
    white-space:nowrap;
}

.history-milestone-kicker{
    display:block;
    margin-bottom:9px;
    color:var(--royal);
    font-family:'JetBrains Mono',monospace;
    font-size:.65rem;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.history-milestone-card h3{
    font-size:1.08rem;
    line-height:1.4;
}

.history-milestone-card p{
    margin-top:9px;
    color:var(--ink-soft);
    font-size:.84rem;
    line-height:1.7;
}

.history-milestone-featured{
    border-color:#BFD0EE;
    background:linear-gradient(135deg,#FFFFFF 0%,#F3F7FF 100%);
}


/* Growth panel */

.history-growth{
    padding-top:72px;
    padding-bottom:72px;
}

.history-growth-panel{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:48px;
    padding:44px 48px;
    overflow:hidden;
    border-radius:22px;
    background:linear-gradient(120deg,#0C2349 0%,#194687 70%,#1A5E9D 120%);
    color:#fff;
}

.history-growth-panel::after{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    right:-100px;
    top:-180px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.016);
}

.history-growth-copy,
.history-network-grid{
    position:relative;
    z-index:1;
}

.history-growth-copy .eyebrow{
    color:#62D8EF;
}

.history-growth-copy h2{
    color:#fff;
    max-width:18ch;
}

.history-growth-copy p{
    margin-top:14px;
    max-width:48ch;
    color:#CCD9EE;
    font-size:.88rem;
    line-height:1.7;
}

.history-growth-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:22px;
    color:#fff;
    font-size:.84rem;
    font-weight:700;
}

.history-growth-link span{
    color:#5EDBF1;
}

.history-network-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
}

.history-network-item{
    display:flex;
    min-height:180px;
    padding:22px;
    flex-direction:column;
    justify-content:flex-end;
    border-left:1px solid rgba(255,255,255,.13);
}

.history-network-icon{
    display:grid;
    width:38px;
    height:38px;
    margin-bottom:auto;
    place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.09);
    color:#62D8EF;
}

.history-network-item strong{
    display:block;
    color:#fff;
    font-family:'Sora',sans-serif;
    font-size:1.85rem;
    line-height:1;
}

.history-network-item > span:last-child{
    display:block;
    margin-top:8px;
    color:#BDD0EA;
    font-size:.78rem;
}


/* Values */

.history-values{
    padding-top:12px;
    padding-bottom:80px;
}

.history-values-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.history-value-card{
    position:relative;
    min-height:190px;
    padding:26px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}

.history-value-number{
    position:absolute;
    top:18px;
    right:20px;
    color:#DCE5F2;
    font-family:'JetBrains Mono',monospace;
    font-size:1.9rem;
    font-weight:600;
}

.history-value-card h3{
    margin-top:34px;
    font-size:1.08rem;
}

.history-value-card p{
    margin-top:8px;
    color:var(--ink-soft);
    font-size:.84rem;
    line-height:1.65;
}

.history-bottom-actions{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:28px;
}


/* Replay reveal */

.history-reveal{
    opacity:0;
    transform:translateY(34px);
    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
}

.history-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

.history-delay-1{transition-delay:.08s}
.history-delay-2{transition-delay:.16s}
.history-delay-3{transition-delay:.24s}


/* Tablet */

@media(max-width:980px){
    .history-intro{
        grid-template-columns:1fr;
        gap:34px;
    }

    .history-growth-panel{
        grid-template-columns:1fr;
        gap:28px;
    }

    .history-growth-copy h2{
        max-width:24ch;
    }

    .history-values-grid{
        grid-template-columns:1fr 1fr;
    }
}


/* Mobile */

@media(max-width:720px){
    .history-intro{
        padding-top:42px;
        padding-bottom:52px;
    }

    .history-intro-stats{
        grid-template-columns:1fr;
    }

    .history-timeline-section{
        padding:52px 0 60px;
    }

    .history-section-heading{
        margin-bottom:34px;
    }

    .history-timeline{
        gap:18px;
    }

    .history-timeline::before{
        left:10px;
    }

    .history-milestone,
    .history-milestone-right{
        display:grid;
        grid-template-columns:34px minmax(0,1fr);
        align-items:start;
    }

    .history-milestone-marker,
    .history-milestone-right .history-milestone-marker{
        grid-column:1;
        grid-row:1;
        align-items:flex-start;
        padding-top:18px;
    }

    .history-marker-year{
        display:none;
    }

    .history-milestone-card,
    .history-milestone-right .history-milestone-card{
        grid-column:2;
        grid-row:1;
        padding:22px 20px;
    }

    .history-growth{
        padding-top:52px;
        padding-bottom:52px;
    }

    .history-growth-panel{
        padding:34px 24px;
        border-radius:18px;
    }

    .history-network-grid{
        grid-template-columns:1fr;
    }

    .history-network-item{
        min-height:auto;
        padding:20px 0;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.13);
    }

    .history-network-item:first-child{
        border-top:0;
    }

    .history-network-icon{
        margin-bottom:16px;
    }

    .history-values-grid{
        grid-template-columns:1fr;
    }

    .history-bottom-actions{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(prefers-reduced-motion:reduce){
    .history-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* =========================================================
   V15 - PENUTUP RINGKAS
   Halaman sejarah difokuskan pada kronologi, bukan statistik
   operasional yang sudah tampil di homepage.
   ========================================================= */

.history-simple-closing{
    padding-top:58px;
    padding-bottom:70px;
}

.history-simple-closing-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    padding:32px 34px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--paper);
}

.history-simple-closing h2{
    margin-top:8px;
    font-size:clamp(1.35rem,2.2vw,1.85rem);
    line-height:1.2;
}

.history-simple-closing p{
    margin-top:8px;
    color:var(--ink-soft);
    font-size:.88rem;
}

.history-simple-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;
}

@media(max-width:760px){
    .history-simple-closing{
        padding-top:42px;
        padding-bottom:52px;
    }

    .history-simple-closing-inner{
        align-items:flex-start;
        flex-direction:column;
        padding:26px 22px;
    }

    .history-simple-actions{
        width:100%;
        align-items:flex-start;
        flex-direction:column;
    }
}

/* =========================================================
   V16 - TAMBAHAN NARASI SEJARAH
   ========================================================= */

.history-evolution-section{
    padding:70px 0 76px;
    background:#fff;
    border-top:1px solid #E8EDF5;
}

.history-evolution-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.history-evolution-card{
    position:relative;
    min-height:275px;
    padding:28px 26px;
    border:1px solid #DDE5F2;
    border-radius:16px;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFE 100%);
    box-shadow:0 8px 28px rgba(20,46,91,.035);
}

.history-evolution-icon{
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    margin-bottom:22px;
    border-radius:13px;
    background:#EDF4FF;
    color:var(--royal);
    font-size:1rem;
}

.history-evolution-kicker{
    display:block;
    margin-bottom:8px;
    color:var(--royal);
    font-family:'JetBrains Mono',monospace;
    font-size:.65rem;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.history-evolution-card h3{
    font-size:1.02rem;
    line-height:1.45;
}

.history-evolution-card p{
    margin-top:10px;
    color:var(--ink-soft);
    font-size:.84rem;
    line-height:1.7;
}

.history-trust{
    padding-top:70px;
    padding-bottom:12px;
}

.history-trust-panel{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
    gap:48px;
    align-items:center;
    padding:42px 46px;
    border:1px solid #DDE5F2;
    border-radius:20px;
    background:linear-gradient(135deg,#F8FBFF 0%,#EEF5FF 100%);
}

.history-trust-copy h2{
    margin-top:8px;
    max-width:19ch;
    font-size:clamp(1.45rem,2.4vw,2rem);
    line-height:1.25;
    letter-spacing:-.025em;
}

.history-trust-copy p{
    margin-top:14px;
    max-width:64ch;
    color:var(--ink-soft);
    font-size:.88rem;
    line-height:1.75;
}

.history-trust-quote{
    position:relative;
    padding:28px 28px 28px 30px;
    border-left:3px solid var(--royal);
    border-radius:0 14px 14px 0;
    background:#fff;
    box-shadow:0 10px 30px rgba(20,46,91,.05);
}

.history-quote-mark{
    display:block;
    height:28px;
    color:#C8D7EF;
    font-family:Georgia,serif;
    font-size:3.5rem;
    line-height:.8;
}

.history-trust-quote p{
    margin-top:12px;
    color:#23385F;
    font-size:.95rem;
    font-weight:600;
    line-height:1.7;
}

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

    .history-evolution-card:last-child{
        grid-column:1 / -1;
    }

    .history-trust-panel{
        grid-template-columns:1fr;
        gap:28px;
    }

    .history-trust-copy h2{
        max-width:26ch;
    }
}

@media(max-width:720px){
    .history-evolution-section{
        padding:52px 0 58px;
    }

    .history-evolution-grid{
        grid-template-columns:1fr;
    }

    .history-evolution-card,
    .history-evolution-card:last-child{
        grid-column:auto;
        min-height:auto;
    }

    .history-trust{
        padding-top:52px;
    }

    .history-trust-panel{
        padding:28px 22px;
        border-radius:17px;
    }

    .history-trust-quote{
        padding:24px 22px;
    }
}