/* Reset osnovnih podešavanja */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1e2734; /* Tvoja boja pozadine */
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: #f0f4f8;
    
    /* POPRAVKA: Ovo nalaže da se i header i ikonice poređaju vertikalno, jedno ispod drugog */
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; /* Ređa sadržaj od vrha ekrana ka dole */
    align-items: center; /* Drži sve savršeno centrirano na sredini */
    
    min-height: 100vh;
    padding: 40px 20px;
}

/* Header kontejner koji drži H1 i Navigaciju */
.main-header {
    width: 100vw; /* Koristi 100% širine vidljivog ekrana */
    max-width: 100%; /* Sklanja bilo kakva prethodna ograničenja */
    text-align: center;
    padding: 0 20px; /* Malo prostora levo i desno da ne udara u same ivice ekrana */
}

/* Zajednički stil za H1 i stavke navigacije (Okviri i Zlatna boja) */
.site-title, .nav-item {
    color: #d4af37; /* Boja starog zlata / mesinga */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Stil specifičan za H1 */
.site-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px; /* Razmak između naslova i navigacije */
    padding: 15px 30px;
    display: inline-block; /* Da bi se okvir prilagodio tekstu */
    border: 4px solid rgba(212, 175, 55, 0.4); /* Prefinjeni zlatni okvir sa providnošću */
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.02); /* Blaga tekstura u pozadini */
}

/* Navigacija - postavlja sve stavke u jednu horizontalnu liniju */
.main-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%; /* Ovo sprečava da meni bude širi od ekrana i da beži levo */
    margin: 0 auto;
    flex-wrap: nowrap !important;
}

/* 3. Stavke navigacije - smanjujemo fiksni padding sa strana jer širinu sada diktira ekran */
.nav-item {
    flex: 1; /* SVAKI od 6 linkova će dobiti tačno jednaku širinu i podeliće prostor */
    text-align: center; /* Centrira tekst unutar te njegove kutije */
    white-space: nowrap; /* Sprečava da se tekst unutar jednog dugmeta prelomi u dva reda */
    
    display: inline-block;
    text-decoration: none;
    font-size: 1.7rem; /* Tvoj font */
    font-weight: 600;
    padding: 10px 5px; /* Smanjen levi/desni padding na minimum da slova imaju mesta */
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

/* Moderni efekat kada se mišem pređe preko linka */
.nav-item:hover {
    color: #ffffff;
    border-color: #d4af37; /* Okvir postaje punije zlatne boje */
    background-color: rgba(212, 175, 55, 0.1); /* Blagi zlatni sjaj unutar kutije */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); /* Suptilan odsjaj */
    transform: translateY(-2px); /* Lagano iskakanje nagore za moderan osećaj */
}

/* Kontejner za sliku koji obezbeđuje centriranje i razmak */
.profile-image-container {
    margin-bottom: 25px; /* Razmak između slike i H1 naslova ispod nje */
    display: flex;
    justify-content: center;
}

/* Stil za samu sliku */
.profile-image {
    width: 420px; /* Možeš promeniti širinu po želji */
    height: 420px; /* Ista visina kao širina da bi bila pravilan krug/kvadrat */
    object-fit: cover; /* Sprečava deformisanje (rastezanje) slike */
    
    /* Ako želiš da slika bude okrugla, ostavi liniju ispod. Ako želiš kvadrat sa blago zaobljenim ivicama, promeni na 4px ili 8px */
    border-radius: 50%; 
    
    /* Elegantan zlatni okvir i suptilna senka oko slike */
    border: 4px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    
    /* Blagi efekat prelaza ako kasnije budeš hteo neki hover na slici */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Moderni efekat: Kada se mišem pređe preko slike, okvir malo jače zasvetli i slika se blago uveća */
.profile-image:hover {
    border-color: #d4af37;
    transform: scale(1.03);
}



/* --- STIL ZA STRANICU GOSTOVANJA --- */

/* Glavni kontejner koji drži sve na sredini ekrana */
.video-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
}

/* Rešetka (Grid) koja drži videe centrirano i automatski pravi redove */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Automatski prilagođava širinu videa */
    gap: 30px; /* Razmak između video klipova */
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

/* Kutija oko svakog pojedinačnog videa sa zlatnim okvirom */
.video-box {
    position: relative;
    padding-bottom: 56.25%; /* Ovo drži 16:9 razmeru ekrana da video ne bude izdeformisan */
    height: 0;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.4); /* Isti zlatni okvir kao na navigaciji */
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    background-color: #000;
}

/* Stil koji primorava YouTube iframe da se savršeno raširi unutar zlatne kutije */
.video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Prilagođavanje za mobilne telefone (da video ne bude preširok na malom ekranu) */
@media (max-width: 500px) {
    .video-grid {
        grid-template-columns: 1fr; /* Na mobilnom telefona ide jedan video ispod drugog */
    }
}

/* --- STIL ZA DRUŠTVENE MREŽE --- */

/* Glavni kontejner koji centrira ikonice horizontalno i odvaja ih od navigacije */
.social-networks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; /* Razmak između Facebook i Instagram ikonice */
    margin-top: 40px; /* Razmak između navigacije i ikonica */
    width: 100%;
}

/* Stil za linkove oko ikonica */
.social-link {
    display: inline-block;
    transition: transform 0.3s ease; /* Glatko podizanje na hover */
}

/* Stil za same ikonice (slike) */
.social-icon {
    width: 40px;  /* Optimalna veličina ikonica, možeš smanjiti na 35px ili povećati po želji */
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.5)); /* Blaga senka ispod ikonica */
    transition: filter 0.3s ease;
}

/* Moderni hover efekat */
.social-link:hover {
    transform: translateY(-3px); /* Ikonica se lagano podigne */
}

.social-link:hover .social-icon {
    /* Kada se pređe mišem, ikonica dobija suptilan zlatni sjaj u tonu sajta */
    filter: drop-shadow(0px 0px 8px rgba(212, 175, 55, 0.8)); 
}

/* --- KOD ZA FACEBOOK PADRAJUĆI MENI --- */

/* Kontejner za FB ikonicu i njegov meni */
.social-dropdown {
    position: relative;
    display: inline-block;
}

/* Skriveni meni koji se aktivira na hover */
/* Skriveni meni koji se aktivira na hover */
.dropdown-content {
    display: none;
    position: absolute;
    bottom: 48px; /* Malo spušteno ka ikonici da smanjimo prazan prostor */
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e2734;
    min-width: 200px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.7);
    z-index: 999;
    padding: 6px 0;
}

/* KLJUČNO REŠENJE: Nevidljivi most koji drži meni otvorenim dok miš prelazi preko praznog prostora */
.dropdown-content::before {
    content: '';
    position: absolute;
    bottom: -15px; /* Pruža se na dole, ka ikonici */
    left: 0;
    width: 100%;
    height: 15px; /* Pokriva tačno onu prazninu između menija i ikonice */
    background: transparent; /* Nevidljivo je za oko */
}

/* Stil za pojedinačne linkove unutar menija */
.dropdown-content a {
    color: #f0f4f8;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 1.2rem; /* Prilagođena veličina za ćirilicu */
    font-family: 'Cormorant Garamond', Georgia, serif;
    text-align: center;
    text-transform: none; /* Sklanja velika slova da tekst izgleda prirodnije */
    letter-spacing: 0px;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Hover efekat za stavke unutar menija */
.dropdown-content a:hover {
    background-color: rgba(212, 175, 55, 0.15); /* Blagi zlatni sjaj iza teksta */
    color: #d4af37; /* Slova postaju zlatna */
}

/* Komanda koja prikazuje meni kada se mišem pređe preko FB ikonice */
.social-dropdown:hover .dropdown-content {
    display: block;
}

/* ==========================================================================
   POTPUNA REAKTIVNOST (RESPONSIVE) ZA MOBILNE TELEFONE I TABLETE (ispod 850px)
   ========================================================================== */
@media (max-width: 850px) {
    
    /* 1. Sređivanje opštih margina na telu stranice */
    body {
        padding: 20px 10px; /* Manji prostor od ivica ekrana na telefonu */
    }

    /* 2. Sređivanje profilne slike da ne gura ekran i da bude normalne veličine */
    .profile-image {
        width: 180px;  /* Smanjeno sa 420px na optimalnih 180px za mobilni */
        height: 180px; /* Ista visina da ostane pravilan krug */
        border-width: 3px; /* Malo tanji okvir da izgleda prefinjenije */
    }

    /* 3. Sređivanje glavnog naslova da ne bude ogroman i da se ne lomi ružno */
    .site-title {
        font-size: 1.6rem; /* Smanjena veličina slova */
        padding: 10px 15px; /* Manji unutrašnji razmak */
        margin-bottom: 25px; /* Manji razmak do navigacije */
        letter-spacing: 1px;
        border-width: 2px;
    }

    /* 4. KLJUČNA POPRAVKA: Prebacivanje navigacije iz jedne linije u vertikalni red */
    .main-navigation {
        flex-direction: column; /* Ređa dugmad jedno ispod drugog */
        flex-wrap: wrap !important; /* Poništava opasni nowrap sa PC verzije */
        gap: 12px; /* Razmak između dugmića */
        width: 100%;
        padding: 0 10px;
    }

    /* 5. Prilagođavanje dugmića navigacije za lakše kliktanje prstom */
    .nav-item {
        flex: none; /* Poništava PC raspored širenja */
        width: 100%; /* Svako dugme zauzima punu širinu ekrana (odnosno kontejnera) */
        max-width: 290px; /* Ne dozvoljava im da se razvuku previše na širim telefonima */
        font-size: 1.3rem; /* Optimalna veličina slova za mobilni */
        padding: 12px 10px; /* Veći padding na gore/dole da se lakše pogodi prstom */
        white-space: normal; /* Dozvoljava tekstu da pređe u dva reda ako je tesno (npr. ПОРУЧИ КЊИГУ) */
    }
    
    /* Poništavamo pomeranje na hover jer na telefonu nema miša (samo klik) */
    .nav-item:hover {
        transform: none; 
    }

    /* 6. Sređivanje rešetke za videe (Gostovanja) na manjim ekranima */
    .video-grid {
        grid-template-columns: 1fr; /* Samo jedan video u redu */
        gap: 20px;
        padding: 10px;
    }

    /* 7. POPRAVKA ZA FACEBOOK DROPDOWN NA TELEFONU */
    /* Pošto na telefonu nema "hover-a" (prelaska mišem), stari sistem je neupotrebljiv.
       Ovaj kod osigurava da se padajući meni lepo ponaša i da se tekst ne gužva */
    .dropdown-content {
        bottom: 50px; /* Pozicija iznad ikonice */
        min-width: 260px; /* Širi meni da dugačka imena profila stanu u jedan red */
        max-width: 90vw; /* Sprečava meni da izađe van ivica ekrana telefona */
    }

    .dropdown-content a {
        font-size: 1rem; /* Malo manji font za dugačke nazive FB stranica */
        padding: 12px 10px; /* Lakše za kliknuti prstom */
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    }
    
    .dropdown-content a:last-child {
        border-bottom: none;
    }
}

/* Dodatni presek za izuzetno male telefone (širine ispod 360px) */
@media (max-width: 360px) {
    .site-title {
        font-size: 1.4rem;
    }
    .nav-item {
        font-size: 1.2rem;
    }
}
/* ==========================================================================
   ZAJEDNIČKA GORNJA NAVIGACIJA (.nav-top)
   ========================================================================== */

/* Kontejner koji drži dugme i natpis na vrhu stranice */
.nav-top {
            width: 100%;
            max-width: 1200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            position: absolute;
            top: 0;
        }

        .btn-back {
            color: #d4af37;
            text-decoration: none;
            font-size: 1.2rem;
            border: 1px solid rgba(212, 175, 55, 0.4);
            padding: 6px 15px;
            border-radius: 4px;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

        .btn-back:hover {
            background-color: #d4af37;
            color: #0d1117;
        }

/* ==========================================================================
   PRILAGOĐAVANJE ZA MOBILNE TELEFONE
   ========================================================================== */
/* Prilagođavanje za mobilne telefone - dugme ostaje LEVO */
@media (max-width: 600px) {
    .nav-top {
        padding: 15px 20px;
        justify-content: flex-start; /* Drži sve poravnato uz levu ivicu */
        align-items: flex-start;     /* Osigurava da ne pobegne ka sredini */
    }
    
    .btn-back {
        width: auto;                 /* Sprečava dugme da se raširi preko celog ekrana */
        display: inline-flex;
        padding: 6px 15px;           /* Zadržava lep oblik i veličinu kutije */
        font-size: 1rem;
    }
}