/* ==========================================================================
   CSIKUNG CIKK - TELJES CSS KÓD (Minden stílus egyben)
   ========================================================================== */

/* Alapvető cikkbeállítások a tökéletes olvashatóságért */
.csikung-article {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #4a5568;
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Szekciók alapbeállításai */
.csikung-article section {
    padding: 4rem 2rem;
    background-color: #ffffff;
}

/* Váltakozó világos háttér a szekciókhoz (Dinamikus hatás a Jin-Jang cikkhez) */
.csikung-article section.bg-light {
    background-color: #f8fafc;
}

/* Középre zárt, jól olvasható szövegtörzs-szélesség */
.csikung-article .section-content {
    max-width: 800px;
    margin: 0 auto;
}

/* --- TIPOGRÁFIA --- */

/* Kis arany alcím a főcímek felett */
.csikung-article .arany-alcim {
    display: block;
    color: #cca43b;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-align: center; /* Ez teszi középre */
}

/* Főcímek (H2) */
.csikung-article h2 {
    color: #0b1c2c;
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 2rem;
    line-height: 1.3;
    text-align: center; /* Ez teszi középre */
}

/* Bekezdések */
.csikung-article p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Erős kiemelések (például a számozott pontoknál) */
.csikung-article p strong {
    color: #0b1c2c;
    font-weight: 600;
}

/* --- KÉK BELSŐ LINKEK (SEO optimalizált) --- */
.csikung-article a {
    color: #2d7fa4; /* A logódból vett elegáns kék */
    font-weight: 600;
    text-decoration: none; /* Letisztult, nincs csúnya aláhúzás */
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Amikor az olvasó ráviszi az egeret a kék linkre */
.csikung-article a:hover {
    color: #cca43b; /* Átvált az oldalad arany színére */
    text-decoration: underline; /* Csak ekkor jelenik meg a finom aláhúzás */
}

/* --- IDÉZET / MESTER BLOKK --- */
.csikung-article .mester-blokk {
    background-color: #fdfbf7;
    border-left: 4px solid #cca43b;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.csikung-article .mester-blokk .alcim {
    display: block;
    font-weight: 700;
    color: #0b1c2c;
    font-style: normal;
    margin-bottom: 0.5rem;
}

/* --- ELEGÁNS LISTÁK (Arany négyzetes listajelek) --- */
.csikung-article ul {
    list-style: none; /* Gyári pötty kikapcsolva */
    padding-left: 0;
    margin: 2rem 0;
}

.csikung-article ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 1.5rem;
}

/* Az egyedi arany négyzet */
.csikung-article ul li::before {
    content: "■"; 
    position: absolute;
    left: 0;
    top: 2px;
    color: #cca43b;
    font-size: 0.75rem;
}

/* --- CALL TO ACTION (CTA) DOBOZ ÉS GOMB --- */
.csikung-article .cikk-cta-wrapper {
    padding: 4rem 2rem;
    background-color: #ffffff;
}

.csikung-article .cikk-cta-box {
    max-width: 800px;
    margin: 0 auto;
    background-color: #eff5fa; /* Mély sötétkék háttér */
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(11, 28, 44, 0.1);
}

.csikung-article .cikk-cta-box h3 {
    font-size: 1.8rem;
    color: #131313;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.csikung-article .cikk-cta-box p {
    color: #2b2d30;
    margin-bottom: 2.5rem;
}

/* A HÍRES ARANY GOMB - FIXÁLT FEHÉR SZÖVEGGEL */
.csikung-article .cikk-cta-button {
    display: inline-block;
    background-color: #cca43b !important; /* Arany háttér */
    color: #ffffff !important; /* Szigorúan fehér szöveg! */
    text-decoration: none !important; /* Semmiképp sincs aláhúzás */
    padding: 1rem 2.5rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

/* Amikor az olvasó ráviszi az egeret a gombra */
.csikung-article .cikk-cta-button:hover {
    background-color: #b38f32 !important; /* Kicsit sötétebb arany */
    color: #ffffff !important; /* Ekkor is hófehér marad a szöveg! */
    text-decoration: none !important;
    transform: translateY(-2px); /* Finom lebegő animáció */
}

.csikung-article .cikk-abra-kontener {
    max-width: 700px; /* Hogy ne legyen ormótlanul nagy monitoron */
    margin: 3rem auto; /* Középre igazítja és térközt ad */
    text-align: center;
}
.csikung-article .cikk-abra-kep {
    width: 100%; /* Kitölti a konténert */
    height: auto; /* Megőrzi az arányait */
    border-radius: 8px; /* Finomabb hatásért */
    margin-bottom: 0.5rem; /* Hely a feliratnak */
}
.csikung-article .cikk-abra-szoveg {
    display: block;
    font-size: 0.9rem;
    color: #a0aec0; /* Halványabb szürke */
    font-style: italic;
}
/* --- JIN-JANG CIKK - EGYBEFÜGGŐ KÉP FORMÁZÁSA --- */

/* A kép konténere - középre zárás és elegáns távolságok */
.csikung-article .cikk-egy-kep-kontener {
    max-width: 650px; /* Mivel két ábra van egy képen, itt kicsit szélesebb lehet, hogy jól olvashatóak legyenek a feliratok rajta */
    margin: 2.5rem auto;
    text-align: center;
}

/* A kép reszponzív viselkedése */
.csikung-article .cikk-egy-kep {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 0.6rem;
}

/* A kép alatti magyarázó szöveg */
.csikung-article .cikk-egy-kep-szoveg {
    display: block;
    font-size: 0.9rem;
    color: #718096;
    font-style: italic;
    line-height: 1.5;
}

/* --- JIN-JANG CIKK - ÉLETÚT SZEKCIÓ KÉP FORMÁZÁSA --- */

/* A konténer, ami középen tartja a diagramot */
.csikung-article .cikk-eletut-kontener {
    max-width: 750px; /* Ideális szélesség ehhez az elrendezéshez */
    margin: 2.5rem auto;
    text-align: center;
}

/* A kép formázása és a lekerekítés */
.csikung-article .cikk-eletut-kep {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Nagyon finom árnyék a kiemelésért */
    margin-bottom: 0.6rem;
}

/* A kép alatti kísérő felirat */
.csikung-article .cikk-eletut-szoveg {
    display: block;
    font-size: 0.85rem;
    color: #718096;
    font-style: italic;
    line-height: 1.4;
    padding: 0 1rem;
}

/* ==========================================================================
   RESPONSIVE BEÁLLÍTÁSOK (Mobilra aktualizálás)
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE BEÁLLÍTÁSOK (Mobilra aktualizálás - Javított margókkal)
   ========================================================================== */

@media (max-width: 768px) {
    /* Szekciók alapvető oldalsó margója, hogy a sima szöveg se tapadjon a kijelző szélére */
    .csikung-article section {
        padding: 2.5rem 1.2rem !important;
    }

    /* Kisebb, mobilra optimalizált címsorok */
    .csikung-article h2 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    /* --- MESTER BLOKK / IDÉZET DOBOZ JAVÍTÁSA (image_8ecbee.png hiba) --- */
    .csikung-article .mester-blokk {
        padding: 1.5rem 1.2rem !important; /* Biztosítja a belső margót az arany csíktól és a szélektől */
        margin: 1.8rem 0 !important; /* Külső távolság alul-felül */
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Sima bekezdések mobil oldaltávolsága */
    .csikung-article p {
        margin-bottom: 1.2rem;
        padding: 0 0.2rem; /* Minimális légtér a biztonság kedvéért */
    }

    /* Listák mobil margói */
    .csikung-article ul {
        padding-left: 0.5rem !important;
        margin: 1.5rem 0 !important;
    }

    .csikung-article ul li {
        margin-bottom: 1.2rem;
        padding-left: 28px !important; /* Hely az arany négyzetnek, hogy ne csússzon rá a szövegre */
    }

    /* Képek és ábrák közötti távolságok igazítása */
    .csikung-article .cikk-abra-kontener,
    .csikung-article .cikk-egy-kep-kontener,
    .csikung-article .cikk-eletut-kontener {
        margin: 2rem auto !important;
        padding: 0 0.2rem !important;
    }

    /* --- CALL TO ACTION (CTA) MOBILOS JAVÍTÁSA (image_8eb9c3.png) --- */
    .csikung-article .cikk-cta-wrapper {
        padding: 2.5rem 1rem !important; /* Külső margó a kék doboz körül */
    }

    .csikung-article .cikk-cta-box {
        padding: 2.5rem 1.5rem !important; /* Belső margó a kék dobozon belül, így nem szorul össze a szöveg */
        border-radius: 8px;
    }

    .csikung-article .cikk-cta-box h3 {
        font-size: 1.4rem;
        line-height: 1.4;
        margin-bottom: 1.2rem;
    }

    .csikung-article .cikk-cta-box p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    /* A gomb teljes szélességű és kényelmesen nyomható lesz mobilon */
   .csikung-article .cikk-cta-button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 1.1rem 1rem !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important; /* Szellősebb sorok a kétmilliós törésnél */
        border-radius: 50px !important; /* Kapszula helyett elegáns, modern lekerekítés */
        letter-spacing: 0.5px !important; /* Mobilon picit közelebb hozzuk a betűket a helytakarékosságért */
    }
}