/* Osnovna postavka - resetovanje margina */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* font-family: 'Arial', sans-serif; */ /* Probaj promijeniti font */
    /* NOVI FONT: */
    font-family: 'Poppins', sans-serif;
    background-color: #ACBAC4; /* Boja pozadine cijelog ekrana */
    display: flex;
    justify-content: center; /* Centrira karticu horizontalno */
    align-items: center; /* Centrira karticu vertikalno */
    min-height: 100vh;
    transition: background-color 0.5s ease, color 0.5s ease; /* Lagani prelaz iz tamnog u svijetli način rada i obratno */

    flex-direction: column; /* OVO JE NOVO: Slaži kartice jednu ispod druge */

    padding-top: 50px; /* Malo prostora gore */
    padding-bottom: 50px; /* Malo prostora dole da se može skrolati */
    height: auto; /* Dozvoli da stranica raste koliko treba */
}

/* Izgled tvoje kartice */
.card {
    background-color: #F0F0DB;
    width: 90%; /* Zauzmi 90% širine ekrana (ostavi malo lufta sa strane) */
    max-width: 400px; /* ALI nemoj nikad biti širi od 400px (da na desktopu ne bude ogromno) */
    padding: 40px;
    border-radius: 20px; /* Zaobljenost ivica kartice */
    text-align: center;
    /* Ovo ispod je sjena - probaj promijeniti brojeve */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* Lagani prelaz iz tamnog u svijetli način rada i obratno */
    animation: ulazOdozdo 1s ease-out; /* Animacija - ulazak odozdo */
    position: relative; /* OVO JE NOVO: Sada je kartica "glavna" za sve apsolutne elemente unutar nje */
}

/* --- INSTAGRAM PRSTEN --- */

.profile-ring {
    width: 110px; /* Malo veće od slike */
    height: 110px;
    margin: 0 auto 20px auto; /* Centriranje i razmak dolje */
    /* Magija: Instagram Gradient */
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 50%; /* Krug */
    padding: 3px; /* Ovo određuje DEBLJINU šarenog prstena */
    /* Animacija pulsiranja koju ćemo definisati ispod */
    animation: pulsiranje 2s infinite;
}

/* Izgled slike */
.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff; /* Bijeli razmak između slike i prstena */
    background-color: #fff;
    display: block;
}

/* Ime i titula */
h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 5px;
}

p {
    color: #666;
    font-size: 14px;
    margin-bottom: 30px;
}

/* Kontejner za dugmad */
.link-container {
    display: flex;
    flex-direction: column; /* Reda dugmad jedno ispod drugog */
    gap: 15px; /* Razmak između dugmadi */
}

/* Izgled dugmeta */
.btn {
    text-decoration: none; /* Sklanja podvučenu liniju */
    background-color: #30364F; /* Boja dugmeta */
    color: white; /* Boja teksta */
    padding: 12px 20px;
    border-radius: 8px; /* Zaobljenost dugmeta */
    font-weight: bold;
    transition: 0.3s; /* Animacija promjene boje */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Lagani prelaz iz tamnog u svijetli način rada i obratno. 'All' znači animiraj sve promjene (boju, poziciju, sjenu) */
}

    /* Šta se desi kad pređeš mišem preko dugmeta (HOVER) */
    .btn:hover {
        background-color: #ACBAC4; /* Svjetlija boja na hover */
        transform: translateY(-3px); /* Malo se podigne */
    }

    /* Dodajemo razmak desno od svake ikone koja je unutar dugmeta */
    .btn i {
        margin-right: 5px;
    }

/* --- DARK MODE STILOVI --- */

/* Kad body ima klasu 'dark-mode', promijeni pozadinu i boju teksta */
body.dark-mode {
    background-color: #121212; /* Skoro crna */
    color: #ffffff;
}

    /* Moramo potamniti i karticu */
    body.dark-mode .card {
        background-color: #1e1e1e; /* Malo svjetlija crna */
        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1); /* Bijela sjena */
    }

    /* Moramo promijeniti boju naslova jer je bio taman */
    body.dark-mode h1 {
        color: #ffffff;
    }

    /* Tekst opisa */
    body.dark-mode p {
        color: #bbbbbb;
    }

    /* Dugmad u mraku mogu biti svjetlija ili imati bijeli okvir */
    body.dark-mode .btn {
        background-color: #333;
        border: 1px solid #555;
    }

        body.dark-mode .btn:hover {
            background-color: #000;
        }

    /* Prilagodba za Dark Mode (da bijeli okvir postane taman) */
    body.dark-mode .profile-img {
        border-color: #1e1e1e; /* Boja kartice u dark mode-u */
    }

/* Definišemo animaciju koja se zove 'ulazOdozdo' */
@keyframes ulazOdozdo {
    0% {
        opacity: 0; /* Nevidljivo */
        transform: translateY(50px); /* Pomjereno 50px dolje */
    }

    100% {
        opacity: 1; /* Potpuno vidljivo */
        transform: translateY(0); /* Vraćeno na normalnu poziciju */
    }
}

/* Prvo sakrijemo svu dugmad da se ne vide dok ne krene animacija */
.btn {
    opacity: 0; /* Početno stanje: nevidljivo */
    animation: ulazOdozdo 0.8s ease-out forwards; /* 'forwards' znači: ostani vidljiv kad završiš */
}

    /* Prvo dugme kasni 0.2 sekunde */
    .btn:nth-child(1) {
        animation-delay: 0.2s;
    }

    /* Drugo dugme kasni 0.4 sekunde */
    .btn:nth-child(2) {
        animation-delay: 0.4s;
    }

    /* Treće dugme kasni 0.6 sekunde */
    .btn:nth-child(3) {
        animation-delay: 0.6s;
    }

    /* Četvrto dugme kasni 0.8 sekunde */
    .btn:nth-child(4) {
        animation-delay: 0.8s;
    }


@keyframes pulsiranje {
    0% {
        transform: scale(1); /* Normalna veličina */
        box-shadow: 0 0 0 0 rgba(220, 39, 67, 0.7); /* Nema sjene */
    }

    70% {
        transform: scale(1.05); /* Malo se poveća (5%) */
        box-shadow: 0 0 0 10px rgba(220, 39, 67, 0); /* Sjena se širi i nestaje */
    }

    100% {
        transform: scale(1); /* Vraća se nazad */
        box-shadow: 0 0 0 0 rgba(220, 39, 67, 0);
    }
}

/* --- PORTFOLIO GRID --- */

.portfolio-grid {
    display: grid; /* Aktiviramo Grid sistem */
    /* KLJUČNA LINIJA: */
    /* Napravi 2 kolone koje su iste širine (1fr = 1 fraction/dio) */
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* Razmak između slika (kao gutter u InDesignu) */
    margin-top: 20px;
}

/* Stilovi za same slike */
.work-item img {
    width: 100%; /* Slika mora popuniti svoju ćeliju */
    height: 100px; /* Fiksna visina da budu uredne */
    object-fit: cover; /* Crop-uj sliku da stane u kvadrat (ne rasteži je!) */
    border-radius: 8px; /* Zaobljene ivice */
    transition: transform 0.3s ease; /* Priprema za hover */
    cursor: pointer;
}

    /* Animacija kad pređeš mišem preko slike */
    .work-item img:hover {
        transform: scale(1.05); /* Malo zumiranje */
        filter: brightness(1.1); /* Malo posvijetli */
    }

/* Uklanjamo podvučene linije sa slika ako ih browser doda */
a.work-item {
    text-decoration: none;
    display: block; /* Da se link ponaša kao kutija */
    overflow: hidden; /* Osiguranje da slika ne "curi" van */
    border-radius: 8px; /* Da i link ima zaobljene ivice kao i slika */
}

    /* Da budemo sigurni da slika popunjava link */
    a.work-item img {
        display: block; /* Uklanja mali prazan prostor ispod slike koji se nekad javi */
    }

/* Smanjivanje slova na projektima */
.overlay span {
    font-size: 12px !important; /* Probaj 16px, 14px ili 1.2rem */
    font-weight: 500; /* Ako želiš da budu malo tanja */
    padding: 5px 10px; /* Malo prostora da tekst ne dira ivice */
}

/* --- RESPONSIVE PRAVILA (Media Queries) --- */

/* Opcionalno: Na mobitelu neka budu još manja */
@media (max-width: 768px) {
    .overlay span {
        font-size: 10px !important;
    }
}

/* Ovo se aktivira SAMO ako je ekran manji od 480 piksela */
@media (max-width: 480px) {

    /* Mijenjamo grid u jednu kolonu */
    .portfolio-grid {
        grid-template-columns: 1fr; /* Samo jedna kolona koja zauzima sve (1 fraction) */
    }

    /* Možemo malo smanjiti padding na kartici da dobijemo više mjesta */
    .card {
        padding: 20px; /* Bilo je 40px */
        width: 95%; /* Da kartica bude šira na malom ekranu */
    }

    /* Smanjimo malo naslov */
    h1 {
        font-size: 20px;
    }
}