/* 1. OSNOVNE POSTAVKE STRANICE */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
    background-color: #ffffff;
}

/* 2. ZAGLAVLJE I LOGO (1/3 širine slika) */
header {
    width: 100%;
    max-width: 800px; /* Ista širina kao i slider */
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.logo {
    width: 25%; /* Precizna trećina */
    max-width: none;
    height: auto; /* Osigurava da se logo ne izobliči */
}

/* 3. SREDIŠNJI PROSTOR STRANICE */
.slider-container {
    flex: 1; /* Gura footer na samo dno stranice */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 4. SLIDER (Kvadratni oblik i okvir za slike) */
.slider {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer; /* OVO JE NOVO: Pretvara miša u ruku za klik */
}

/* 5. SLIKE U SLIDESHOWU (sada koristimo klasu .slide umjesto samo img) */
.slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    opacity: 0;
    transform: translateX(5%);
    transition: opacity 1.5s ease-in-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 6. AKTIVNA SLIKA */
.slider .slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

/* NOVO: PRAVILO ZA FIKSNI OKVIR */
.okvir {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10; /* Drži okvir ZAUVIJEK iznad svih drugih slika */
    pointer-events: none; /* Propušta klikove kroz okvir ravno do slidera */
}

/* 7. PODNOŽJE (Opći podaci na dnu) */
footer {
    font-size: 11px;
    color: #888;
    padding: 0 20px 20px 20px; /* Dodan prostor sa strane zbog malih ekrana */
    text-align: center;
    line-height: 1.5; /* Blago povećan prored za bolju čitljivost */
    max-width: 800px; /* Zadržava širinu iste linije kao slider i logo */
}

/* 8. PRILAGODBA ZA MOBILNE UREĐAJE (Ekrani uži od 768px) */
@media (max-width: 768px) {
    header {
        justify-content: center; /* Gura logo natrag u sredinu na mobitelima */
        margin-top: 15px; /* Smanjen razmak od samog vrha ekrana */
        margin-bottom: 0; /* Osigurava da zaglavlje ne gura slider prema dolje */
    }

    .logo {
        width: 50%; /* Prilagođena veličina loga za mobitele */
    }
    
    /* NOVO: Stišćemo prostor između loga, slika i podnožja */
    .slider-container {
        padding-top: 5px; /* Smanjena udaljenost od loga do gornjeg ruba okvira */
        padding-bottom: 5px; /* Smanjena udaljenost od okvira do teksta na dnu */
    }
    
    footer {
        padding-bottom: 15px; /* Smanjuje prazan prostor na samom dnu ekrana */
    }
}
.footer-ime {
    font-weight: bold; /* Ime firme će biti malo deblje (slobodno obriši ako ne želiš) */
    margin-bottom: 5px; /* Razmak između imena firme i ostatka teksta */
    color: #555; /* Za nijansu tamnija boja kako bi se firma blago istaknula */
}

.footer-detalji {
    /* Ovaj dio će se sam prilagođavati širini ekrana (na mobitelu u više redova, na računalu u manje) */
}