/* =============================================================================
   far360 — GLOBÁLIS SAROKFORMÁK (clip-path, árnyék és színátmenet NÉLKÜL).

   Megrendelői kérés (2026-10-19): a főoldali hero négy sarokformája MINDEN publikus
   oldalon látsszon, és görgetéskor is maradjon a helyén. Ezért a formák már nem a
   hero-kártya díszei, hanem a _Layout egyetlen, FIX díszrétege (Views/Shared/
   _Sarokformak.cshtml): a nézetablak négy sarkában ül, félig az ablak szélén kilógva.
   Az admin és az üzemeltetői felület külön layoutot használ — ott nincs dísz.

   MIT TARTUNK BE:
   * a réteg a tartalom MÖGÖTT van (z-index: -1): a kártyák, a fejléc-pirula, a szöveg és
     a gombok mind fölötte; a formák a margókon és az üveg-pirula alatt kandikálnak ki;
   * pointer-events: none — a réteg sosem fog el kattintást; aria-hidden a HTML-ben;
   * a forma mérete a nézetablakhoz igazodik (clamp), a látható részük a tartalom
     keskeny oldalmargójába (a 1120 px-es oszlop mellé) fér;
   * 1280 px alatt halványabbak (a tartalom közelebb ér a szélhez), 768 px alatt
     kicsik és halványak — nincs vízszintes görgetés: a réteg overflow: hidden;
   * NINCS animáció, tehát a prefers-reduced-motion semmit sem érint; nyomtatásban
     és kényszerített színeknél (forced-colors) a réteg elrejtve.

   SZÍNEK: ugyanazok a tokenek, mint a hero-nál voltak. A nyomda-aldomainen az
   /arculat.css felülírja a --f-primary (csillag) és a --f-mustard (ötszög) értékét,
   így ott a formák a nyomda arculati színeit viselik; a korall és az ég a far360 alap.
   A sötét téma: az oldalnak nincs, ezért nincs külön szabály sem.
   ============================================================================= */
.f-sarokformak {
    --sarok-meret: clamp(80px, 8.5vw, 136px);
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.f-sarokforma {
    position: absolute;
    display: block;
    width: var(--m);
    height: var(--m);
}

/* mustár ötszög (levél) — bal fent */
.f-sarokforma--mustar {
    --m: calc(var(--sarok-meret) * 0.85);
    left: calc(var(--m) * -0.3);
    top: calc(var(--m) * -0.3);
    background: var(--f-mustard);
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

/* világoskék kör (negyedkör) — jobb fent */
.f-sarokforma--eg {
    --m: calc(var(--sarok-meret) * 1.05);
    right: calc(var(--m) * -0.3);
    top: calc(var(--m) * -0.3);
    border-radius: 50%;
    background: var(--f-sky);
}

/* korall kör (félkör) — bal lent */
.f-sarokforma--korall {
    --m: var(--sarok-meret);
    left: calc(var(--m) * -0.1);
    bottom: calc(var(--m) * -0.5);
    border-radius: 50%;
    background: var(--f-coral);
}

/* tizenhat ágú csillag (korona) — jobb lent; a színe a márka/nyomda fő színe */
.f-sarokforma--csillag {
    --m: var(--sarok-meret);
    right: calc(var(--m) * -0.3);
    bottom: calc(var(--m) * -0.3);
    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özepes nézet: a tartalomoszlop már közel ér a széléhez, ezért halványabb a dísz,
   hogy a formák a kártyák alatt se vonják el a figyelmet. */
@media (max-width: 1279px) {
    .f-sarokformak { opacity: 0.55; }
}

/* Mobil: jóval kisebb és halványabb — a dísz sosem zavarhatja az olvasást. */
@media (max-width: 767px) {
    .f-sarokformak {
        --sarok-meret: clamp(44px, 13vw, 60px);
        opacity: 0.5;
    }
}

@media print, (forced-colors: active) {
    .f-sarokformak { display: none; }
}