/* --- RESET (Poništavanje fabričkih postavki) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ključno: da padding ne širi elemente */
}

html {
    scroll-behavior: smooth; /* OVO JE MAGIJA */
}

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* --- HEADER & NAVIGACIJA --- */

header {
    background: #ffffff;
    padding: 20px 0; /* Malo prostora gore i dolje */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Diskretna sjena ispod menija */
    position: sticky; /* ZALIFEPI SE NA VRH */
    top: 0;
    z-index: 1000; /* Budi iznad svega ostalog */
}

/* Ovo je ključno! */
.navbar {
    display: flex; /* Aktiviraj Flexbox */
    justify-content: space-between; /* Logo skroz lijevo, linkovi skroz desno */
    align-items: center; /* Centriraj ih vertikalno da budu u istoj liniji */
}

/* Po defaultu (na velikim ekranima), hamburger ne postoji */
.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    letter-spacing: -1px; /* Malo stisni slova za moderni izgled */
}

/* Lista linkova */
nav ul {
    display: flex; /* I linkove unutar liste želimo jedne pored drugih */
    gap: 30px; /* Razmak između linkova */
}

nav a {
    font-weight: 500;
    transition: color 0.3s ease;
}

    nav a:hover {
        color: #E05423; /* Tvoja brend boja na hover */
    }

/* --- HERO SEKCIJA --- */

.hero {
    height: 90vh; /* 90% visine ekrana (Viewport Height) */
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://picsum.photos/1920/1080?grayscale');
    /* Trik: Preko slike smo stavili taman sloj (overlay) da se tekst bolje čita */

    background-size: cover; /* Raširi sliku da pokrije sve */
    background-position: center;
    color: white;
    /* Centriranje teksta */
    display: flex;
    justify-content: center; /* Horizontalno centriranje */
    align-items: center; /* Vertikalno centriranje */
    text-align: center;
}

    .hero h1 {
        font-size: 48px; /* Veliki naslov */
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .hero p {
        font-size: 18px;
        margin-bottom: 30px;
        max-width: 600px; /* Ne daj tekstu da ode preširoko */
        margin-left: auto; /* Centriranje bloka teksta */
        margin-right: auto;
    }

/* --- SEKCIJA USLUGE --- */

.services {
    padding: 80px 0; /* Veliki razmak gore i dolje da "diše" */
    background-color: #f9f9f9; /* Vrlo svijetlo siva pozadina da se razlikuje od bijele */
    text-align: center; /* Centriraj naslov sekcije */
}

    .services h2 {
        font-size: 36px;
        margin-bottom: 50px;
        color: #333;
    }

/* Mreža za kartice */
.services-grid {
    display: grid;
    /* Tri kolone iste širine (1fr = 1 fraction) */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px; /* Razmak između kartica */
}

/* Izgled jedne kartice */
.service-card {
    background: white; /* Bijela kartica na sivoj pozadini */
    padding: 40px 30px;
    border-radius: 12px; /* Zaobljene ivice */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Vrlo blaga, moderna sjena */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    /* Efekat lebdenja */
    .service-card:hover {
        transform: translateY(-10px); /* Kartica ide gore */
        box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sjena postaje jača */
    }

    /* Ikonice (FontAwesome) */
    .service-card i {
        font-size: 40px; /* Velika ikona */
        color: #E05423; /* Tvoja brend boja */
        margin-bottom: 20px;
    }

    .service-card h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .service-card p {
        color: #666;
        font-size: 15px;
        line-height: 1.6;
    }

/* --- FOOTER --- */

footer {
    background: #222; /* Skoro crna */
    color: #fff; /* Bijeli tekst */
    padding: 30px 0;
    text-align: center;
    margin-top: auto; /* Gurni ga na dno ako je stranica kratka */
}

    footer p {
        opacity: 0.7; /* Malo priguši bijelu boju da ne blješti */
        font-size: 14px;
    }

/* --- ZAJEDNIČKE KLASE (Utility Classes) --- */

/* Kontejner drži sadržaj u sredini (da ne ide od ivice do ivice na velikim ekranima) */
.container {
    width: 90%;
    max-width: 1200px; /* Nikad šire od 1200px */
    margin: 0 auto; /* Centriraj kontejner */
}

ul {
    list-style: none; /* Skloni tačkice sa liste */
}

a {
    text-decoration: none; /* Skloni podvlačenje sa linkova */
    color: inherit;
}

/* --- DUGMAD --- */

.primary-btn {
    display: inline-block;
    background: #E05423; /* Tvoja boja */
    color: white;
    padding: 12px 30px;
    border-radius: 50px; /* Pilula oblik */
    font-weight: 600;
    transition: transform 0.3s ease, background 0.3s ease;
}

    .primary-btn:hover {
        background: #c94012; /* Tamnija nijansa na hover */
        transform: translateY(-3px); /* Malo se podigne */
    }

/* Dugme u navigaciji (Kontakt) */
.cta-btn {
    padding: 8px 20px;
    border: 2px solid #333;
    border-radius: 5px;
    font-weight: 600;
}

    .cta-btn:hover {
        background: #333;
        color: white;
    }

/* --- PORTFOLIO SEKCIJA --- */
.portfolio {
    padding: 80px 0;
    text-align: center;
    background: #fff;
}

    .portfolio h2 {
        font-size: 36px;
        margin-bottom: 40px;
    }

.portfolio-gallery {
    display: grid;
    /* Automatski prilagodi kolone: minimum 300px širine */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project-item img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

    .project-item img:hover {
        transform: scale(1.03); /* Blagi zoom na sliku */
        cursor: pointer;
    }

/* --- KONTAKT SEKCIJA --- */
.contact {
    padding: 100px 0;
    background: #333; /* Tamna pozadina */
    color: white; /* Bijeli tekst */
    text-align: center;
}

    .contact h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .contact p {
        font-size: 18px;
        margin-bottom: 40px;
        opacity: 0.8;
    }

/* --- STILOVI ZA FORMU --- */

.contact-form {
    max-width: 600px;
    margin: 40px auto 0; /* Centriraj formu */
    text-align: left; /* Vrati tekst u lijevo unutar forme */
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block; /* Da labela bude iznad polja */
    margin-bottom: 8px;
    font-weight: 600;
    color: #ddd; /* Svijetla slova jer je pozadina tamna */
}

input, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #444; /* Tamnija siva unutar polja */
    color: white;
    font-family: inherit; /* Koristi isti font kao ostatak sajta */
    font-size: 16px;
}

    /* Kada klikneš u polje (Focus) */
    input:focus, textarea:focus {
        outline: none;
        border-color: #E05423; /* Tvoja narandžasta boja */
        background: #555;
    }

/* Dugme mora biti šire */
.submit-btn {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px;
}

/* --- MOBILNI PRIKAZ (Max širina 768px - tableti i mobiteli) --- */

@media (max-width: 768px) {

    /* 1. Pokaži hamburger dugme */
    .hamburger {
        display: block; /* Sad ga vidimo! */
    }

    /* 1. Popravka Navigacije */
    .navbar {
        flex-direction: column; /* Logo gore, linkovi dole */
        gap: 15px;
    }

    /* 2. Sakrij meni i pozicioniraj ga apsolutno */
    nav ul {
        /* gap: 15px; Smanji razmak između linkova */
        /* flex-wrap: wrap; Ako ne stanu u jedan red, pređi u novi */
        /*justify-content: center; */

        /* Prvo ga sakrijemo skroz */
        display: none;
        /* Pozicioniranje */
        flex-direction: column;
        width: 100%;
        position: absolute; /* Lebdi iznad sadržaja */
        top: 70px; /* Visina hedera */
        left: 0;
        background-color: #ffffff; /* Bijela pozadina */
        box-shadow: 0 10px 15px rgba(0,0,0,0.1); /* Sjena */
        padding: 20px 0;
        text-align: center;
    }

        /* 3. Klasa koja će se aktivirati JS-om */
        nav ul.active {
            display: flex; /* Kad ima klasu 'active', prikaži se! */
        }

    /* 2. Popravka Hero Sekcije */
    .hero h1 {
        font-size: 32px; /* Smanji naslov */
    }

    .hero p {
        font-size: 16px;
        padding: 0 10px; /* Dodaj malo lufta sa strane */
    }

    /* 3. Popravka Usluga (Najvažnije!) */
    .services-grid {
        /* Umjesto 3 kolone, pređi na 1 kolonu */
        grid-template-columns: 1fr;
    }

    .service-card {
        margin-bottom: 20px; /* Dodatni razmak */
    }
}