/* =============================================================================
   far360 — DEKORATÍV SÍKFORMÁK (clip-path, árnyék és színátmenet NÉLKÜL).

   Hol jelennek meg: a marketingoldalon, valamint a publikus KEZDŐ- és
   KÖSZÖNŐ-oldal heróján — máshol NEM (DESIGN.md formanyelv). A formák a tartalom
   ALATT ülnek (z-index 0), `pointer-events: none`-nal.

   ELHELYEZÉS (megrendelői kérés, 2026-09-20): a marketing-kezdőlaphoz hasonlóan
   MIND A NÉGY SAROKBAN egy-egy kisebb forma, félig a doboz szélén kilógva. A hero
   belső margója (hero.css) tartja a szöveget a sarkoktól, a címsor pedig nem törik
   sorba — így forma és szöveg SOSEM fedi egymást.

   860 px alatt a szövegoszlop a teljes szélességet megkapja, ezért ott a formák
   ELTŰNNEK. Ez tudatos: inkább ne legyen dísz, mint hogy olvashatatlan legyen a lap.
   ============================================================================= */.f-hero__shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.f-hero__shapes span {
    position: absolute;
    display: block;
}


/* --- HERO: egy-egy forma a NÉGY SAROKBAN ----------------------------------- */
/* mustársárga ötszög — bal fent */
.f-hero .f-shape--pent {
    left: -2%;
    top: -12%;
    width: 7vw;
    height: 6.6vw;
    max-width: 96px;
    max-height: 92px;
    background: var(--f-mustard);
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

/* világoskék kör — jobb fent */
.f-hero .f-shape--sky {
    right: -2.5%;
    top: -16%;
    width: 9vw;
    height: 9vw;
    max-width: 126px;
    max-height: 126px;
    border-radius: 50%;
    background: var(--f-sky);
}

/* korallpiros kör — bal lent */
.f-hero .f-shape--coral {
    left: -2.5%;
    bottom: -16%;
    width: 8vw;
    height: 8vw;
    max-width: 112px;
    max-height: 112px;
    border-radius: 50%;
    background: var(--f-coral);
}

/* tizenhat ágú csillag — jobb lent */
.f-hero .f-shape--star {
    right: -2%;
    bottom: -14%;
    width: 8.5vw;
    height: 8.5vw;
    max-width: 122px;
    max-height: 122px;
    background: var(--f-primary);
    clip-path: polygon(50% 0, 63% 22%, 88% 12%, 84% 38%, 100% 50%, 84% 62%, 88% 88%, 63% 78%, 50% 100%, 37% 78%, 12% 88%, 16% 62%, 0 50%, 16% 38%, 12% 12%, 37% 22%);
}

/* --- KÖSZÖNŐ-LAP: két forma az átlós sarkokban ------------------------------ */
.f-koszonjuk .f-shape--pent {
    left: -3%;
    top: -18%;
    width: 9vw;
    height: 8.5vw;
    max-width: 130px;
    max-height: 125px;
    background: var(--f-mustard);
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.f-koszonjuk .f-shape--star {
    right: -3%;
    bottom: -18%;
    width: 9vw;
    height: 9vw;
    max-width: 130px;
    max-height: 130px;
    background: var(--f-primary);
    clip-path: polygon(50% 0, 63% 22%, 88% 12%, 84% 38%, 100% 50%, 84% 62%, 88% 88%, 63% 78%, 50% 100%, 37% 78%, 12% 88%, 16% 62%, 0 50%, 16% 38%, 12% 12%, 37% 22%);
}

/* Keskeny nézetben a szövegoszlop a teljes szélességet elfoglalja — ilyenkor a
   dísz ELTŰNIK, mert nem lenne hová tenni úgy, hogy ne érjen a szöveghez. */
@media (max-width: 860px) {
    .f-hero__shapes { display: none; }
}