/* Tentang KTAC Education — ringkas, mobile first, tanpa JavaScript khusus */
.ktac-about-page {
    --ktac-navy: #101a43;
    --ktac-blue: #315bea;
    --ktac-lime: #d9ff43;
    --ktac-ink: #111936;
    --ktac-muted: #5d6475;
    --ktac-paper: #f4f3ed;
    --ktac-line: rgba(17, 25, 54, .14);
    --ktac-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --ktac-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--ktac-ink);
    background: #fff;
    font-family: var(--ktac-font-sans);
}

.ktac-about-page *,
.ktac-about-page *::before,
.ktac-about-page *::after {
    box-sizing: border-box;
}

.ktac-about-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 620px;
    min-height: calc(82svh - 68px);
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    background: var(--ktac-navy);
}

.ktac-about-hero__media,
.ktac-about-hero__media img,
.ktac-about-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ktac-about-hero__media {
    z-index: -2;
}

.ktac-about-hero__media img {
    object-fit: cover;
    object-position: 67% center;
}

.ktac-about-hero__shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(8, 16, 44, .08) 0%, rgba(8, 16, 44, .28) 42%, rgba(8, 16, 44, .9) 100%),
        linear-gradient(90deg, rgba(8, 16, 44, .55), transparent 80%);
}

.ktac-about-hero__content {
    width: 100%;
    padding: 64px 20px 48px;
}

.ktac-about-kicker {
    margin: 0 0 13px;
    color: var(--ktac-blue);
    font-size: .68rem;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: .14em;
    font-family: var(--ktac-font-mono);
}

.ktac-about-hero .ktac-about-kicker {
    color: var(--ktac-lime);
}

.ktac-about-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.75rem, 12vw, 4.6rem);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -.055em;
    font-family: var(--ktac-font-sans);
}

.ktac-about-hero h1 em {
    color: var(--ktac-lime);
    font-family: var(--ktac-font-sans);
    font-weight: 900;
    font-style: normal;
}

.ktac-about-hero__content > p:not(.ktac-about-kicker) {
    max-width: 590px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .96rem;
    line-height: 1.68;
}

.ktac-about-button {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin-top: 26px;
    padding: 14px 19px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 850;
    text-decoration: none;
}

.ktac-about-button--lime {
    color: var(--ktac-ink);
    background: var(--ktac-lime);
}

.ktac-about-button--dark {
    color: #fff;
    background: var(--ktac-ink);
}

.ktac-about-button:focus-visible {
    outline: 3px solid var(--ktac-blue);
    outline-offset: 3px;
}

.ktac-about-intro,
.ktac-about-history,
.ktac-about-values,
.ktac-about-cta {
    padding: 68px 20px;
}

.ktac-about-intro h2,
.ktac-about-heading h2,
.ktac-about-current h2,
.ktac-about-values h2,
.ktac-about-cta h2 {
    margin: 0;
    font-size: clamp(2rem, 8.4vw, 3.55rem);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-family: var(--ktac-font-sans);
    font-weight: 850;
}

.ktac-about-intro h2 em,
.ktac-about-heading h2 em,
.ktac-about-current h2 em,
.ktac-about-values h2 em,
.ktac-about-cta h2 em {
    color: var(--ktac-blue);
    font-family: var(--ktac-font-sans);
    font-weight: 900;
    font-style: normal;
    letter-spacing: -.055em;
    text-decoration-line: underline;
    text-decoration-color: var(--ktac-lime);
    text-decoration-thickness: .09em;
    text-underline-offset: .12em;
}

.ktac-about-intro__copy {
    margin-top: 26px;
}

.ktac-about-intro__copy p {
    margin: 0;
    color: var(--ktac-muted);
    font-size: .96rem;
    line-height: 1.78;
}

.ktac-about-intro__copy p + p {
    margin-top: 15px;
}

.ktac-about-numbers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 36px 0 0;
    border-top: 1px solid var(--ktac-line);
    border-bottom: 1px solid var(--ktac-line);
}

.ktac-about-numbers div {
    min-width: 0;
    padding: 17px 9px;
    border-right: 1px solid var(--ktac-line);
}

.ktac-about-numbers div:last-child {
    border-right: 0;
}

.ktac-about-numbers dt {
    color: var(--ktac-blue);
    font-size: .87rem;
    font-weight: 900;
    font-family: var(--ktac-font-mono);
}

.ktac-about-numbers dd {
    margin: 5px 0 0;
    color: var(--ktac-muted);
    font-size: .64rem;
    line-height: 1.35;
}

.ktac-about-history {
    background: var(--ktac-paper);
}

.ktac-about-heading {
    max-width: 720px;
}

.ktac-about-heading > p:last-child {
    margin: 16px 0 0;
    color: var(--ktac-muted);
    line-height: 1.65;
}

.ktac-about-history__grid {
    display: grid;
    gap: 18px;
    margin-top: 38px;
}

.ktac-about-era {
    overflow: hidden;
    border: 1px solid var(--ktac-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 25, 54, .07);
}

.ktac-about-era > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ktac-about-era__body {
    padding: 22px 20px 24px;
}

.ktac-about-era__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--ktac-muted);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: var(--ktac-font-mono);
}

.ktac-about-era__meta span:first-child {
    color: var(--ktac-blue);
}

.ktac-about-era h3 {
    margin: 28px 0 0;
    font-size: 1.4rem;
    line-height: 1.18;
    letter-spacing: -.025em;
    font-family: var(--ktac-font-sans);
    font-weight: 850;
}

.ktac-about-era__body > p {
    margin: 11px 0 0;
    color: var(--ktac-muted);
    font-size: .9rem;
    line-height: 1.68;
}

.ktac-about-era ul {
    margin: 20px 0 0;
    padding: 0;
    border-top: 1px solid var(--ktac-line);
    list-style: none;
}

.ktac-about-era li {
    padding: 12px 0;
    color: var(--ktac-muted);
    border-bottom: 1px solid var(--ktac-line);
    font-size: .78rem;
    line-height: 1.5;
}

.ktac-about-era li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ktac-about-era li strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ktac-ink);
    font-family: var(--ktac-font-mono);
    font-size: .72rem;
    letter-spacing: .03em;
}

.ktac-about-current {
    background: #eef0f6;
}

.ktac-about-current__media {
    margin: 0;
    background: var(--ktac-navy);
}

.ktac-about-current__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ktac-about-current__media figcaption {
    padding: 9px 20px;
    color: rgba(255, 255, 255, .66);
    font-size: .62rem;
    line-height: 1.4;
}

.ktac-about-current__content {
    padding: 60px 20px 68px;
}

.ktac-about-current__lead {
    max-width: 820px;
    margin: 24px 0 0;
    color: #434b5f;
    font-size: .97rem;
    line-height: 1.82;
    padding-left: 17px;
    border-left: 4px solid var(--ktac-blue);
}

.ktac-about-current__milestones {
    margin-top: 34px;
    border-bottom: 1px solid var(--ktac-line);
}

.ktac-about-current__milestones article {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid var(--ktac-line);
}

.ktac-about-current__milestones span {
    color: var(--ktac-blue);
    font-family: var(--ktac-font-mono);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.ktac-about-current__milestones p {
    margin: 0;
    color: var(--ktac-muted);
    font-size: .86rem;
    line-height: 1.72;
}

.ktac-about-values {
    background: #fff;
}

.ktac-about-values__grid {
    display: grid;
    gap: 0;
    margin-top: 36px;
    border-top: 1px solid var(--ktac-line);
}

.ktac-about-values__grid article {
    padding: 24px 0;
    border-bottom: 1px solid var(--ktac-line);
}

.ktac-about-values__grid span {
    color: var(--ktac-blue);
    font-size: .69rem;
    font-weight: 900;
    font-family: var(--ktac-font-mono);
}

.ktac-about-values__grid h3 {
    margin: 18px 0 7px;
    font-size: 1.15rem;
}

.ktac-about-values__grid p {
    margin: 0;
    color: var(--ktac-muted);
    font-size: .88rem;
    line-height: 1.6;
}

.ktac-about-cta {
    background: var(--ktac-lime);
}

.ktac-about-cta .ktac-about-kicker {
    color: #3f4b1a;
}

.ktac-about-cta .ktac-about-button {
    margin-top: 28px;
}

@media (min-width: 700px) {
    .ktac-about-hero {
        min-height: 680px;
        min-height: calc(88svh - 76px);
    }

    .ktac-about-hero__content,
    .ktac-about-intro,
    .ktac-about-history,
    .ktac-about-values,
    .ktac-about-cta {
        padding-right: 7vw;
        padding-left: 7vw;
    }

    .ktac-about-hero h1 {
        font-size: clamp(4.5rem, 8.8vw, 6.4rem);
    }

    .ktac-about-button {
        width: max-content;
        min-width: 225px;
    }

    .ktac-about-intro {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 7vw;
    }

    .ktac-about-intro__copy {
        margin-top: 0;
    }

    .ktac-about-current__content {
        padding: 78px 7vw 86px;
    }

    .ktac-about-current__media figcaption {
        padding-right: 7vw;
        padding-left: 7vw;
    }

    .ktac-about-current__milestones article {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 24px;
        padding: 24px 0;
    }

    .ktac-about-numbers {
        grid-column: 1 / -1;
    }

    .ktac-about-numbers div {
        padding: 20px;
    }

    .ktac-about-history__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .ktac-about-values__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ktac-about-values__grid article {
        padding: 27px 24px;
        border-right: 1px solid var(--ktac-line);
    }

    .ktac-about-values__grid article:first-child {
        padding-left: 0;
    }

    .ktac-about-values__grid article:last-child {
        padding-right: 0;
        border-right: 0;
    }

    .ktac-about-cta {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 40px;
    }

    .ktac-about-cta .ktac-about-button {
        flex: 0 0 auto;
        margin-top: 0;
    }
}

@media (min-width: 1100px) {
    .ktac-about-hero {
        min-height: 720px;
        min-height: calc(92svh - 84px);
    }

    .ktac-about-hero__media img {
        object-position: center;
    }

    .ktac-about-hero__shade {
        background:
            linear-gradient(90deg, rgba(8, 16, 44, .84) 0%, rgba(8, 16, 44, .5) 45%, rgba(8, 16, 44, .03) 76%),
            linear-gradient(0deg, rgba(8, 16, 44, .65), transparent 52%);
    }

    .ktac-about-hero__content,
    .ktac-about-intro,
    .ktac-about-history,
    .ktac-about-values,
    .ktac-about-cta {
        padding-right: max(6vw, calc((100vw - 1280px) / 2));
        padding-left: max(6vw, calc((100vw - 1280px) / 2));
    }

    .ktac-about-intro,
    .ktac-about-history,
    .ktac-about-values,
    .ktac-about-cta {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .ktac-about-history__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ktac-about-current {
        display: grid;
        grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
        gap: 6vw;
        align-items: start;
        padding: 96px max(6vw, calc((100vw - 1280px) / 2));
    }

    .ktac-about-current__media {
        overflow: hidden;
        border-radius: 22px;
    }

    .ktac-about-current__media img {
        aspect-ratio: 4 / 3;
    }

    .ktac-about-current__media figcaption {
        padding: 10px 14px;
    }

    .ktac-about-current__content {
        padding: 0;
    }

    .ktac-about-hero h1 {
        font-size: clamp(5.6rem, 6.5vw, 7.2rem);
    }

    .ktac-about-era__body {
        padding: 27px 27px 30px;
    }
}