/* A fő banner konténer */
        #top-left-banner {
            position: fixed; /* Rögzített pozíció a képernyő bal felső sarkában */
            top: 0;
            left: 0;
            z-index: 1000; /* Legfelül jelenik meg */
            overflow: hidden; /* A túlnyúló részeket elrejti */
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.4s ease-in-out; /* Animáció a méretváltozáshoz */
        }

        /* A képet tartalmazó rész */
        .banner-image-container {
            /* A magasságot animáljuk a nyitáshoz/záráshoz */
            max-height: 700px; /* Maximális magasság nyitott állapotban (módosítható) */
            transition: max-height 0.4s ease-in-out;
        }

        .banner-image-container img {
            display: block; /* Eltávolítja a kép alatti felesleges helyet */
            width: 350px; /* A banner szélessége (módosítható) */
            height: auto;
        }

        /* A banner alján lévő kék sáv a nyíllal */
        .banner-toggle-bar {
            position: relative;
            background-color: #003399; /* A kék sáv színe */
            height: 25px; /* A sáv magassága */
            display: flex;
            justify-content: flex-end; /* A nyilat jobbra igazítja */
            align-items: center;
            padding-right: 10px;
        }

        /* A nyíl, amire kattintani lehet */
        .toggle-arrow {
            width: 40px;
            height: 40px;
            background-color: white;
            border: 2px solid #003399;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: absolute; /* Pozicionálás a kék sávhoz képest */
            right: 15px;
            bottom: -10px; /* Félig lelóg a sávról */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: transform 0.4s ease-in-out; /* Animáció a forgáshoz */
        }
        
        .toggle-arrow svg {
            width: 24px;
            height: 24px;
            fill: #003399;
        }


        /* ----- ZÁRT ÁLLAPOT ----- */

        /* Ha a banner zárva van, a kép konténerének magassága 0 lesz */
        #top-left-banner.closed .banner-image-container {
            max-height: 0;
        }

        /* Ha a banner zárva van, a nyíl lefelé mutat (180 fokos forgatás) */
        #top-left-banner.closed .toggle-arrow {
            transform: rotate(180deg);
        }

        