/* ======================================================
   HERO PENJUMLAHAN
====================================================== */

.addition-hero {
    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(37, 99, 235, 0.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(14, 165, 233, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fbff,
            #ffffff
        );
}


.addition-hero-card {
    min-height: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 38px;

    color: #ffffff;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    border-radius:
        var(--radius-extra-large);

    box-shadow:
        var(--shadow-large);
}


.addition-hero-label {
    margin-bottom: 30px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.72rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.09em;
}


.addition-hero-groups {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 30px;
}


.addition-small-group {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    max-width: 130px;
}


.addition-small-group span {
    width: 30px;

    height: 30px;

    display: block;

    background:
        rgba(255, 255, 255, 0.9);

    border-radius: 50%;
}


.addition-hero-groups > strong {
    font-size: 1.6rem;
}


.addition-hero-equation {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
}


.addition-hero-equation span,
.addition-hero-equation strong {
    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 14px;

    font-size: 1.45rem;

    font-weight: 900;
}


.addition-hero-equation strong {
    color:
        var(--color-primary-dark);

    background: #ffffff;
}


.addition-hero-equation small {
    font-size: 1.1rem;

    font-weight: 850;
}


.addition-hero-card p {
    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.77);

    font-size: 0.82rem;
}



/* ======================================================
   APERSEPSI
====================================================== */

.addition-intro-visual {
    min-height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 35px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #059669
        );
}


.addition-pencil-group {
    display: flex;

    gap: 7px;
}


.addition-pencil-group span {
    width: 16px;

    height: 80px;

    display: block;

    background:
        #ffffff;

    border-radius:
        5px 5px 2px 2px;

    transform:
        rotate(7deg);
}


.addition-intro-visual > strong {
    font-size: 1.8rem;
}


.addition-intro-result {
    width: 100%;

    margin-top: 10px;

    font-size: 2.3rem;

    font-weight: 900;

    text-align: center;
}



/* ======================================================
   CONCEPT
====================================================== */

.addition-concept-section {
    background:
        var(--color-background);
}


.addition-concept-demo {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 160px;

    align-items: center;

    gap: 22px;

    max-width: 950px;

    margin:
        0 auto 28px;

    padding: 32px;

    background:
        var(--color-background-soft);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-extra-large);
}


.addition-concept-group {
    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);
}


.addition-group-label {
    margin-bottom: 20px;

    color:
        var(--color-text-muted);

    font-size: 0.67rem;

    font-weight: 750;
}


.addition-concept-dots {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-bottom: 18px;
}


.addition-concept-dots span {
    width: 28px;

    height: 28px;

    background:
        var(--color-primary);

    border-radius: 50%;
}


.dots-secondary span {
    background:
        var(--color-secondary);
}


.addition-concept-group > strong {
    color:
        var(--color-primary);

    font-size: 1.6rem;
}


.addition-concept-sign {
    color:
        var(--color-text-muted);

    font-size: 1.7rem;

    font-weight: 900;
}


.addition-result-group {
    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    border-radius:
        var(--radius-medium);
}


.addition-result-group span {
    margin-bottom: 8px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.7rem;
}


.addition-result-group strong {
    font-size: 3rem;
}



/* ======================================================
   SYMBOL
====================================================== */

.addition-symbol-section {
    background:
        var(--color-background-soft);
}


.addition-symbol-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(450px, 1.2fr);

    align-items: center;

    gap: 70px;
}


.addition-symbol-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing:
        -0.04em;
}


.addition-symbol-content p {
    color:
        var(--color-text-muted);
}


.addition-symbol-cards {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;
}


.addition-symbol-card {
    min-height: 240px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.addition-symbol-card > strong {
    margin-bottom: 15px;

    color:
        var(--color-primary);

    font-size: 3.5rem;

    line-height: 1;
}


.addition-symbol-card > span {
    margin-bottom: 10px;

    color:
        var(--color-text-secondary);

    font-weight: 800;
}


.addition-symbol-card p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    font-size: 0.82rem;
}



/* ======================================================
   INTERACTIVE
====================================================== */

.addition-interactive-section {
    color: #ffffff;

    background:
        #0f172a;
}


.addition-interactive-section
.section-eyebrow {
    color:
        #93c5fd;
}


.addition-interactive-section
.section-header p {
    color:
        #94a3b8;
}


.addition-activity-card {
    max-width: 900px;

    margin-inline: auto;

    padding: 32px;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        var(--radius-extra-large);
}


.addition-builder {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 22px;

    margin-bottom: 25px;
}


.builder-group {
    min-height: 270px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background: #ffffff;

    border-radius:
        var(--radius-large);
}


.builder-label {
    margin-bottom: 18px;

    color:
        var(--color-text-muted);

    font-size: 0.7rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.builder-objects {
    min-height: 85px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;
}


.builder-dot {
    width: 29px;

    height: 29px;

    display: block;

    background:
        var(--color-primary);

    border-radius: 50%;
}


.builder-objects-secondary
.builder-dot {
    background:
        var(--color-secondary);
}


.builder-number {
    margin-bottom: 18px;

    color:
        var(--color-primary);

    font-size: 2.2rem;
}


.builder-controls {
    display: flex;

    gap: 8px;
}


.builder-controls button {
    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border:
        1px solid
        rgba(37, 99, 235, 0.16);

    border-radius: 10px;

    font-size: 1.2rem;

    font-weight: 850;
}


.builder-controls button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.builder-sign {
    color: #ffffff;

    font-size: 2rem;

    font-weight: 900;
}


.addition-builder-action {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 24px;
}


.addition-reset-button {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(255, 255, 255, 0.16);
}


.addition-builder-result {
    display: none;

    padding: 30px;

    color:
        var(--color-text);

    background: #ffffff;

    border-radius:
        var(--radius-large);

    text-align: center;
}


.addition-builder-result.show {
    display: block;
}


.result-label {
    display: block;

    margin-bottom: 20px;

    color:
        var(--color-text-muted);

    font-size: 0.7rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.combined-objects {
    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;
}


.combined-dot {
    width: 28px;

    height: 28px;

    display: block;

    background:
        var(--color-primary);

    border-radius: 50%;
}


.combined-equation {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-bottom: 14px;

    font-size: 1.4rem;

    font-weight: 800;
}


.combined-equation strong {
    color:
        var(--color-primary);

    font-size: 2rem;
}


.addition-builder-result p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);
}



/* ======================================================
   EXAMPLE
====================================================== */

.addition-example-section {
    background:
        var(--color-background-soft);
}


.addition-worked-card {
    padding: 30px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.worked-story {
    margin-bottom: 22px;
}


.worked-story-label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--color-primary);

    font-size: 0.67rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}


.worked-story p {
    margin-bottom: 0;

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


.worked-addition-visual {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin-bottom: 24px;

    padding: 30px;

    background:
        #fff7ed;

    border-radius:
        var(--radius-medium);
}


.worked-addition-visual div {
    text-align: center;

    font-size: 1.8rem;

    line-height: 1.8;
}


.worked-addition-visual > strong {
    color:
        var(--color-text-muted);

    font-size: 1.5rem;
}


.worked-addition-steps {
    display: grid;

    gap: 10px;
}


.worked-addition-steps > div {
    display: grid;

    grid-template-columns:
        38px 1fr;

    align-items: center;

    gap: 13px;

    padding: 13px;

    background:
        var(--color-background-soft);

    border-radius: 10px;
}


.worked-addition-steps span {
    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border-radius: 50%;

    font-size: 0.7rem;

    font-weight: 850;
}


.worked-addition-steps p {
    margin-bottom: 0;

    color:
        var(--color-text-secondary);

    font-size: 0.82rem;
}



/* ======================================================
   STRATEGIES
====================================================== */

.addition-strategy-section {
    background:
        var(--color-background);
}


.addition-strategy-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.addition-strategy-card {
    padding: 26px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.strategy-number {
    display: block;

    margin-bottom: 26px;

    color:
        var(--color-primary);

    font-size: 0.68rem;

    font-weight: 850;
}


.strategy-visual {
    min-height: 110px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    padding: 18px;

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

    border-radius:
        var(--radius-medium);

    font-size: 1rem;

    font-weight: 850;
}


.addition-strategy-card h3 {
    margin-bottom: 10px;

    font-size: 1.02rem;
}


.addition-strategy-card p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    font-size: 0.82rem;
}



/* ======================================================
   NUMBER LINE
====================================================== */

.addition-numberline-section {
    background:
        var(--color-background-soft);
}


.addition-numberline-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.7fr)
        minmax(500px, 1.3fr);

    align-items: center;

    gap: 70px;
}


.addition-numberline-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing:
        -0.04em;
}


.addition-numberline-content p {
    color:
        var(--color-text-muted);
}


.addition-numberline-card {
    overflow: hidden;

    padding: 35px 25px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-small);
}


.addition-jump-labels {
    display: flex;

    justify-content: center;

    gap: 35px;

    margin-bottom: 14px;
}


.addition-jump-labels span {
    color:
        var(--color-primary);

    font-size: 0.7rem;

    font-weight: 850;
}


.addition-number-line {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(11, 1fr);

    min-width: 520px;

    margin-bottom: 25px;
}


.addition-number-line::before {
    content: "";

    position: absolute;

    left: 2%;

    right: 2%;

    top: 50%;

    height: 3px;

    background:
        #cbd5e1;

    transform:
        translateY(-50%);
}


.addition-number-line span {
    position: relative;

    z-index: 2;

    width: 33px;

    height: 33px;

    display: grid;

    place-items: center;

    margin-inline: auto;

    color:
        var(--color-text-muted);

    background: #ffffff;

    border:
        2px solid
        #e2e8f0;

    border-radius: 50%;

    font-size: 0.7rem;

    font-weight: 800;
}


.addition-number-line
.jump-start {
    color:
        var(--color-primary);

    border-color:
        var(--color-primary);
}


.addition-number-line
.jump-step {
    color:
        #047857;

    border-color:
        #10b981;
}


.addition-number-line
.jump-result {
    color: #ffffff;

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);
}


.addition-numberline-card p {
    margin-bottom: 0;

    color:
        var(--color-text-muted);

    text-align: center;

    font-size: 0.8rem;
}



/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1024px) {

    .addition-symbol-wrapper,
    .addition-numberline-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .addition-strategy-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



@media (max-width: 860px) {

    .addition-concept-demo {
        grid-template-columns:
            1fr;

        max-width: 650px;
    }


    .addition-concept-sign {
        transform:
            rotate(90deg);

        text-align: center;
    }

}



@media (max-width: 600px) {

    .addition-hero-card {
        min-height: 360px;

        padding: 25px;
    }


    .addition-hero-groups {
        gap: 12px;
    }


    .addition-small-group span {
        width: 25px;

        height: 25px;
    }


    .addition-symbol-cards {
        grid-template-columns: 1fr;
    }


    .addition-builder {
        grid-template-columns: 1fr;
    }


    .builder-sign {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .addition-activity-card {
        padding: 20px;
    }


    .addition-builder-action {
        flex-direction: column;
    }


    .addition-builder-action .button {
        width: 100%;
    }


    .worked-addition-visual {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .addition-strategy-grid {
        grid-template-columns: 1fr;
    }


    .addition-numberline-card {
        overflow-x: auto;
    }

}