/* =========================================================
   ZSONGODA – PLAKÁTNAPTÁR 2026–27
   05 – WORD BÓNUSZ
   ========================================================= */

.zn26-bonus-section,
.zn26-bonus-section * {
    box-sizing: border-box;
}

.zn26-bonus-section {
    --green: #214E3B;
    --green-dark: #173B2D;
    --green-soft: #2B5B45;
    --eucalyptus: #93AB9B;
    --sage: #C0CEC3;
    --cream: #F7F5EF;
    --cream-light: #FCFBF7;
    --text-light: #F5F3ED;
    --text-soft: #D5DED7;

    position: relative;
    overflow: hidden;

    width: 100%;

    padding: 115px 0 120px;

    background:
        radial-gradient(
            circle at 17% 40%,
            rgba(147,171,155,.17) 0,
            rgba(147,171,155,0) 30%
        ),
        linear-gradient(
            135deg,
            #173B2D 0%,
            #214E3B 58%,
            #285640 100%
        );

    font-family: Aptos, "Segoe UI", Arial, sans-serif;
}


/* =========================================================
   BELSŐ ELRENDEZÉS
   ========================================================= */

.zn26-bonus-inner {
    position: relative;
    z-index: 5;

    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr .95fr;

    gap: 95px;
    align-items: center;
}


/* =========================================================
   BAL OLDAL – WORD MOCKUP
   ========================================================= */

.zn26-bonus-visual {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* organikus háttérfolt */

.zn26-bonus-blob {
    position: absolute;
    z-index: 0;

    width: 520px;
    height: 520px;

    border-radius:
        48% 52% 59% 41% /
        43% 56% 44% 57%;

    background: rgba(255,255,255,.07);

    transform: rotate(-8deg);
}


/* hátsó papírlap */

.zn26-bonus-sheet-back {
    position: absolute;
    z-index: 1;

    width: 390px;
    height: 545px;

    border-radius: 6px;

    background: #E8EDE8;

    box-shadow: 0 28px 60px rgba(0,0,0,.16);

    transform:
        translate(-52px, 22px)
        rotate(-7deg);

    opacity: .76;
}


/* középső papírlap */

.zn26-bonus-sheet-middle {
    position: absolute;
    z-index: 2;

    width: 390px;
    height: 545px;

    border-radius: 6px;

    background: #F1F1EB;

    box-shadow: 0 28px 60px rgba(0,0,0,.18);

    transform:
        translate(45px, 14px)
        rotate(5deg);

    opacity: .92;
}


/* valódi Word kép */

.zn26-bonus-document {
    position: relative;
    z-index: 4;

    width: min(100%, 390px);
    height: auto;

    display: block;

    border-radius: 6px;

    box-shadow:
        0 42px 80px rgba(0,0,0,.31),
        0 9px 25px rgba(0,0,0,.15);

    transform:
        perspective(1400px)
        rotateY(2deg)
        rotateZ(-1.5deg);
}


/* kép kerete – erre kerül a védőréteg */

.zn26-bonus-document-wrap {
    position: relative;
    z-index: 4;

    width: min(100%, 390px);
}


/* =========================================================
   OLVASHATÓSÁG CSÖKKENTÉSE
   A dokumentum felső része látszik,
   a tényleges lista nem olvasható tisztán
   ========================================================= */

.zn26-bonus-protection {
    position: absolute;
    z-index: 6;

    left: 4%;
    right: 4%;

    top: 24%;
    bottom: 7%;

    border-radius: 3px;

    background:
        linear-gradient(
            to bottom,
            rgba(247,245,239,.55),
            rgba(247,245,239,.76)
        );

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    pointer-events: none;
}


/* kis felirat a dokumentumon */

.zn26-bonus-badge-big {
    position: absolute;
    z-index: 8;

    left: -35px;
    top: 70px;

    padding: 11px 18px;

    border-radius: 100px;

    background: var(--cream);
    color: var(--green-dark);

    font-size: 12px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;

    box-shadow: 0 12px 28px rgba(0,0,0,.17);

    transform: rotate(-4deg);
}


/* =========================================================
   JOBB OLDAL – SZÖVEG
   ========================================================= */

.zn26-bonus-copy {
    position: relative;
    z-index: 5;

    max-width: 565px;
}


.zn26-bonus-kicker {
    margin: 0 0 19px;

    color: var(--sage);

    font-size: 14px;
    line-height: 1.3;

    font-weight: 750;

    letter-spacing: .09em;
    text-transform: uppercase;
}


.zn26-bonus-title {
    margin: 0 0 28px;

    color: #FFFFFF;

    font-size: clamp(42px,3.7vw,59px);
    line-height: 1.07;

    letter-spacing: -.032em;

    font-weight: 580;
}


.zn26-bonus-title span {
    color: #C3D3C7;
}


.zn26-bonus-intro {
    margin: 0 0 36px;

    color: var(--text-soft);

    font-size: 18px;
    line-height: 1.63;
}


.zn26-bonus-intro strong {
    color: #FFFFFF;
    font-weight: 700;
}


/* =========================================================
   ELŐNYÖK
   ========================================================= */

.zn26-bonus-points {
    margin: 0;
    padding: 0;

    list-style: none;
}


.zn26-bonus-point {
    position: relative;

    padding: 20px 0 20px 49px;

    border-top: 1px solid rgba(255,255,255,.14);
}


.zn26-bonus-point:last-child {
    border-bottom: 1px solid rgba(255,255,255,.14);
}


/* pipa */

.zn26-bonus-check {
    position: absolute;

    left: 0;
    top: 19px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(192,206,195,.15);

    color: var(--sage);

    font-size: 14px;
    font-weight: 800;
}


.zn26-bonus-point strong {
    display: block;

    margin-bottom: 4px;

    color: #FFFFFF;

    font-size: 17px;
    line-height: 1.4;

    font-weight: 700;
}


.zn26-bonus-point span:not(.zn26-bonus-check) {
    display: block;

    color: rgba(255,255,255,.68);

    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   ZÁRÓ KIEMELÉS
   ========================================================= */

.zn26-bonus-summary {
    margin-top: 34px;
    padding-left: 21px;

    border-left: 3px solid var(--eucalyptus);

    color: #FFFFFF;

    font-size: 17px;
    line-height: 1.55;

    font-weight: 650;
}


/* =========================================================
   EUKALIPTUSZ DEKOR
   ========================================================= */

.zn26-bonus-euca {
    position: absolute;
    z-index: 1;

    right: -120px;
    bottom: -140px;

    width: 380px;
    height: 470px;

    opacity: .13;

    pointer-events: none;
}


.zn26-bonus-euca path {
    fill: none;

    stroke: #BED0C2;
    stroke-width: 2;
    stroke-linecap: round;
}


.zn26-bonus-euca ellipse {
    fill: rgba(190,208,194,.55);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .zn26-bonus-section {
        padding: 95px 0 100px;
    }

    .zn26-bonus-inner {
        width: min(100% - 50px, 1000px);

        grid-template-columns: 1fr 1fr;

        gap: 55px;
    }

    .zn26-bonus-visual {
        min-height: 520px;
    }

    .zn26-bonus-document-wrap,
    .zn26-bonus-document {
        width: min(100%, 330px);
    }

    .zn26-bonus-sheet-back,
    .zn26-bonus-sheet-middle {
        width: 330px;
        height: 462px;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .zn26-bonus-section {
        padding: 75px 0 80px;
    }

    .zn26-bonus-inner {
        width: calc(100% - 36px);

        display: flex;
        flex-direction: column;

        gap: 55px;
    }

    .zn26-bonus-copy {
        order: 1;

        max-width: none;
    }

    .zn26-bonus-visual {
        order: 2;

        width: 100%;
        min-height: 450px;
    }

    .zn26-bonus-kicker {
        margin-bottom: 14px;

        font-size: 12px;
    }

    .zn26-bonus-title {
        margin-bottom: 22px;

        font-size: clamp(34px,9.5vw,43px);
        line-height: 1.08;
    }

    .zn26-bonus-intro {
        margin-bottom: 28px;

        font-size: 17px;
        line-height: 1.55;
    }

    .zn26-bonus-document-wrap,
    .zn26-bonus-document {
        width: min(78vw, 310px);
    }

    .zn26-bonus-sheet-back,
    .zn26-bonus-sheet-middle {
        width: min(78vw, 310px);
        height: 434px;
    }

    .zn26-bonus-sheet-back {
        transform:
            translate(-28px, 19px)
            rotate(-6deg);
    }

    .zn26-bonus-sheet-middle {
        transform:
            translate(27px, 16px)
            rotate(5deg);
    }

    .zn26-bonus-badge-big {
        left: -18px;
        top: 55px;

        padding: 9px 13px;

        font-size: 10px;
    }

    .zn26-bonus-euca {
        width: 250px;
        height: 320px;

        right: -130px;
        bottom: -80px;
    }

}