html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

figure {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* --- Közös gomb stílusok --- */
.image-button {
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    z-index: 10;
}

.image-button img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    pointer-events: none;
    position: relative;
    z-index: 20;
}

.image-button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),
                0 17px 50px 0 rgba(0,0,0,0.19);
    transition: box-shadow 0.3s ease-in-out;
}

.image-button:active {
    box-shadow: 0 5px black;
    transform: translateY(4px);
}

.image-button::before {
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size, 0);
    height: var(--size, 0);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side,
      rgba(198,241,248,0.9) 0%, rgba(244,156,246,0.4) 80%, transparent 100%);
    z-index: 30;
    transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease;
    opacity: 0;
}
.image-button:hover::before {
    --size: 200px;
    opacity: 1;
}

/* --- Gomb pozíció és szélesség --- */
.button01 { top: 20%; left: 8%; width:5.6% }
.button1  { top: 20%; left: 28%; width:5.2% }
.button2  { top: 20%; left: 48%; width:4.58% }
.button3  { top: 48%; left: 47%; width:6.7% }
.button4  { top:19%; left: 67.2%; width:5.2% }
.button5  { top: 19.5%; left: 87%; width:5.2% }
.button6  { top: 42%; left: 69.1%; width:5.4% }
.button7  { top: 42%; left: 90%; width:6% }
.button8  { top: 43%; left: 5%; width: 5.9%}
.button9  { top: 42%; left: 26.2%; width: 5.4%}

/* --- Menü feliratok --- */
.menu-label {
    position: absolute;
    color: rgb(220, 211, 251);
    font-style:normal;
    font-weight: bold bold;
    font-family: 'Times New Roman', serif !important;
    font-size: 1em;
    background: rgba(0,0,0,0.5);
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
    z-index: 50;
}

/* Egyedi pozíciók a feliratokhoz */
.div01 { top: 32%; left: 8%; transform: translateX(-10%); }
.div1  { top: 31.3%; left: 28%; transform: translateX(-10%); }
.div2  { top: 31.5%; left: 48%; transform: translateX(-10%); }
.div3  { top: 62%; left: 43%; transform: translateX(-10%); }
.div4  { top: 31%; left: 68.5%; transform: translateX(-10%); }
.div5  { top: 30.5%; left: 88.5%; transform: translateX(-10%); }
.div6  { top: 56%; left: 70%; transform: translateX(-10%); }
.div7  { top: 55.4%; left: 92%; transform: translateX(-10%); }
.div8  { top: 56%; left: 5%; transform: translateX(-10%);}
.div9  { top: 55.4%; left: 24%; transform: translateX(-10%);}

/* Hover effektre való megjelenítés */
.image-button:hover + .menu-label {
    display: block;
}

/* --- Bootstrap modal z-index javítása --- */
.modal { z-index: 9999 !important; }
.modal-backdrop { z-index: 9998 !important; }

.modal-content {
    background-color: rgba(58, 56, 56, 0.2);
    backdrop-filter: blur(5px);
    color: rgb(178, 157, 249);
}

/* Footer gombok alap- és hover-stílusa */
.btn-secondary,
.btn-primary {
    background-color: rgba(48, 47, 47, 0.2);
    border: none;
    color: rgb(178, 157, 249);
}

.btn-secondary:hover,
.btn-primary:hover {
    background-color: rgb(91, 91, 91);
    border: none;
    color: inherit; /* szöveg szín változatlan */
}

.modal-footer {
    text-align: center;
}

footer {
    position: fixed;      /* mindig az oldal alján */
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;  /* vízszintesen középre */
    align-items: center;      /* függőlegesen középre */
    padding: 0;
    background-color: rgba(0, 0, 0, 0.3); /* transzparens fekete */
    backdrop-filter: blur(8px);           /* blur effekt */
    color: rgb(178, 157, 249);
    font-weight: thin;
    z-index: 1000;
}


.copyright {
    display:flex, inline-block;
    justify-content:bottom, center;
    align-items:center;
    color: rgb(178, 157, 249);
    opacity:40%;
}