/* GLOBALNI STILOVI I RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-dark: #0A0A0A;           /* Ultra tamna pozadina */
    --color-medium: #141414;         /* Sekcija pozadina */
    --color-accent-primary: #679afe; /* Primarni akcent (Plava) */
    --color-accent-secondary: #FFD700; /* Sekundarni akcent (Zlatna/Luxury) */
    --color-text-light: #F0F0F0;     /* Glavni tekst */
    --color-text-muted: #A0A0A0;     /* Muted tekst */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-dark); 
    color: var(--color-text-light); 
    line-height: 1.7;
    scroll-behavior: smooth;
}

h1, h2, h3, h4 {
    font-family: var(--font-secondary);
    color: var(--color-text-light);
    font-weight: 700;
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--color-accent-secondary);
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px; 
}

/* UTILITY KLASE */
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; } 
.mt-40 { margin-top: 40px !important; }

/* ------------------------------------- */
/* ANIMACIJE I SKROL EFEKTI KLASA */
/* ------------------------------------- */

/* Početno stanje: Fade In Up */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stanje kada je vidljivo */
.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Kašnjenja za sekvencijalni izgled */
.scroll-reveal.delay-1 { transition-delay: 0.15s; }
.scroll-reveal.delay-2 { transition-delay: 0.30s; }
.scroll-reveal.delay-3 { transition-delay: 0.45s; }


/* HEADER I NAVIGACIJA */
header {
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(5px); 
    display: flex;
    justify-content: space-between; 
    align-items: center;
    /* LIJEVO/DESNO padding MORA BITI VEĆI za razmak loga! */
    padding: 0px 0px; /* Vertikalni 1px (uski), Horizontalni 20px (za pomak loga) */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); 
    border-bottom: 1px solid var(--color-accent-primary);
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

nav {
    display: flex; 
}

/* STILOVI ZA LOGO (SLIKA) */
.logo {
    display: inline-block; 
    transition: opacity 0.3s;
    /* NOVO: Dodaje razmak od lijevog ruba Headera (pomjera logo udesno) */
    margin-left: 17px; 
}

.logo img {
    height: 70px; /* Postavite ovdje željenu VELIČINU. Npr. 80px */
    width: auto;
    display: block;
}

.logo:hover {
    opacity: 0.8; 
}
/* KRAJ STILOVA ZA LOGO */


/* ------ KOREKCIJA ZA NAVIGACIJU NA DESKTOPU ------ */

/* 1. Novi raspored (Logo + Nav lijevo) */
header .header-left {
    display: flex;
    align-items: center;
    /* Ako je .header-left skroz lijevo, sve će biti skroz lijevo */
    width: 100%; 
}

/* 2. Premještanje Nav-a uz logo */
header nav {
    margin-left: 15px; /* Razmak između loga i prve navigacijske stavke */
}

/* 3. Stilovi za linkove i ikone */
nav a {
    font-family: var(--font-secondary); 
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--color-text-muted); 
    transition: color 0.3s, text-shadow 0.3s;
    margin: 0 16px;
    display: flex; 
    align-items: center;
    gap: 8px; 
    position: relative; 
}

/* 4. Stilovi za ikone */
nav a i {
    font-size: 15px;
    color: var(--color-accent-primary); 
    transition: color 0.3s;
    width: 20px; 
    text-align: center;
}

/* 5. Hover i Active stanja */
nav a:hover,
nav a.active {
    color: var(--color-text-light); 
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

nav a:hover i,
nav a.active i {
    color: var(--color-accent-secondary); 
}

/* 6. Prilagodba donje crte (hover efekt) */
nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-secondary); 
    transition: width 0.3s ease-out;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}
/* ------ KRAJ KOREKCIJE ZA NAVIGACIJU NA DESKTOPU ------ */

/* ------ POČETAK MODIFIKACIJE ZA NAVIGACIJU (TVOJ ZAHTJEV) ------ */

/* 1. Novi raspored (Logo + Nav lijevo, Gumb desno) */
header .header-left {
    display: flex;
    align-items: center;
}

header .header-right {
    display: flex;
    align-items: center;
}

/* 2. Premještanje Nav-a uz logo */
header nav {
    margin-left: 0px; /* Razmak od loga */
}

/* 3. Stilovi za nove gumbe (Desktop vs Mobile) */
.join-btn-desktop {
    display: block; /* Prikazan na desktopu */
    padding: 10px 25px; /* Malo manji gumb za header */
    font-size: 14px;
    /* Nasljeđuje .btn i .primary-btn stilove */
}

.join-btn-mobile {
    display: none; /* Skriven na desktopu (OBAVEZNO) */
}

/* 4. "Luksuzni" stil za linkove i ikone */
nav a {
    font-family: var(--font-secondary); /* Montserrat (kao kod naslova) */
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--color-text-muted); /* Prigušena boja za eleganciju */
    transition: color 0.3s, text-shadow 0.3s;
    margin: 0 16px;
    display: flex; /* Za poravnanje ikone i teksta */
    align-items: center;
    gap: 8px; /* Razmak između ikone i teksta */
    position: relative; /* Za crtu ispod */
}

/* 5. Stilovi za ikone */
nav a i {
    font-size: 15px;
    color: var(--color-accent-primary); /* Ikona u plavoj boji */
    transition: color 0.3s;
    width: 20px; /* Fiksna širina da se tekst ne pomjera */
    text-align: center;
}

/* 6. Hover i Active stanja */
nav a:hover,
nav a.active {
    color: var(--color-text-light); /* Posvijetli tekst */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

nav a:hover i,
nav a.active i {
    color: var(--color-accent-secondary); /* Ikona postaje zlatna */
}

/* 7. Prilagodba donje crte (hover efekt) */
nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-secondary); /* Zlatna crta */
    transition: width 0.3s ease-out;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}
/* ------ KRAJ MODIFIKACIJE ZA NAVIGACIJU ------ */


/* HERO SEKCIJA */
.hero-section {
    /* Ovdje stavi svoju hero sliku. Primjer: */
    background: url('https://i.imgur.com/your_hero_image.jpg') no-repeat center center/cover; 
    height: 100vh; /* Puni ekran */
    display: flex;
    align-items: center;
    position: relative;
}

/* Preko cijelog ekrana overlay sa gradijentom za dramu */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.95) 100%);
    z-index: 1;
}

.hero-content {
    color: var(--color-text-light);
    z-index: 2;
    padding-top: 100px; /* Offset zbog sticki hedera */
    max-width: 1000px;
    /* PROMJENA: Centriranje teksta i bloka */
    text-align: center; 
    margin: 0 auto;
}

.hero-content h1 {
    font-size: 80px;
    margin-bottom: 5px;
    line-height: 1;
    color: var(--color-accent-secondary);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3); 
}

.hero-content h2 {
    font-size: 32px;
    margin-bottom: 30px;
    color: var(--color-text-light);
    font-weight: 400;
}

.server-status {
    background: var(--color-accent-primary);
    color: var(--color-dark); 
    padding: 8px 15px;
    margin-top: 30px;
    border-radius: 20px;
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
    /* Centriran je jer je hero-content text-align: center; */
}

/* GUMBOVI (CTA) - Premium Stil */
.cta-buttons {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    /* PROMJENA: Centriranje dugmadi */
    justify-content: center; 
}

.btn {
    padding: 16px 40px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.primary-btn {
    background-color: var(--color-accent-primary);
    color: var(--color-dark); 
    border: 2px solid var(--color-accent-primary);
}

.primary-btn:hover {
    background: var(--color-accent-secondary);
    color: var(--color-dark);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
    border-color: var(--color-accent-secondary);
}

.secondary-btn {
    background-color: transparent;
    color: var(--color-text-light);
    border: 2px solid var(--color-text-light);
}

.secondary-btn:hover {
    background-color: var(--color-text-light);
    color: var(--color-dark);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* GLAVNE SEKCIJE SADRŽAJA */
.content-section {
    padding: 120px 0;
    text-align: center;
}

.dark-bg {
    background-color: var(--color-medium);
}

.content-section h2 {
    font-size: 44px;
    margin-bottom: 60px;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
}

.content-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--color-accent-primary);
    border-radius: 2px;
}

/* INFO SEKCIJA - KARTICE */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

.info-block.card {
    background-color: var(--color-medium);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease-in-out;
}

.info-block.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 188, 212, 0.2);
}

.info-block h3 {
    color: var(--color-accent-primary);
    margin-bottom: 15px;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-block i.fa-info-circle,
.info-block i.fa-gavel {
    color: var(--color-accent-secondary);
}

.info-block p {
    color: var(--color-text-muted);
}

/* PRAVILA (ACCORDION) STIL */
.rules .card {
    padding: 0;
    background-color: var(--color-medium);
    border: none;
    box-shadow: none;
}

.rule-item {
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--color-dark);
    overflow: hidden;
    transition: all 0.3s;
}

.rule-item summary {
    padding: 20px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--color-dark);
    border-left: 5px solid var(--color-accent-primary);
    color: var(--color-text-light);
    font-size: 18px;
    list-style: none; 
    position: relative;
}

/* Custom ikona za accordion */
.rule-item summary::before {
    content: '\25B6'; 
    font-size: 14px;
    color: var(--color-accent-primary);
    margin-right: 15px;
    transition: transform 0.3s;
    display: inline-block;
}

.rule-item[open] summary::before {
    content: '\25BC'; 
    transform: rotate(0deg); 
}

.rule-item ul {
    list-style: none;
    padding: 10px 20px 20px 45px;
    background-color: var(--color-medium);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rule-item li {
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--color-text-muted);
    position: relative;
}

.rule-item li::before {
    content: '\2022'; 
    color: var(--color-accent-secondary);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* NOVI STIL ZA GUMB UNUTAR KARTICE PRAVILA (TRAŽENA IZMJENA) */
.info-block.card.rules .btn {
    width: auto !important; /* Nadjačava 'width: 100%;' iz HTML-a */
    display: block; /* Omogućava da margin: auto radi */
    margin-left: auto;
    margin-right: auto;
    padding: 12px 30px; /* Smanjuje visinu i širinu gumba */
    font-size: 14px; /* Smanjuje font */
    text-align: center; /* CENTRIRANJE TEKSTA UNUTAR GUMBA */
}
/* KRAJ NOVE IZMJENE */

/* ************************************** */
/* NOVO: STILOVI ZA PONUDE CUSTOM AUTOMOBILA U GALERIJI */
/* ************************************** */

.gallery-offers-grid {
    display: grid;
    /* Na desktopu, raspored u 3 kolone */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin: 20px auto; /* Razmak gore/dolje */
    max-width: 1300px; 
    padding: 0 40px; /* Da se poravna sa .container */
}

/* Stil za pojedinačnu karticu (ponovo koristimo .info-block.card stilove) */
.offer-card {
    /* Reusability: Koristimo već definirane stilove pozadine, sjene i efekta */
    background-color: var(--color-medium);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-accent-primary); /* Naglašeni border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    text-align: center;
    transition: transform 0.4s ease-in-out;
}

.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3); /* Zlatni naglasak na hoveru */
}

.offer-card h3 {
    font-size: 22px;
    color: var(--color-accent-secondary); /* Zlatna boja za ponudu */
    margin-bottom: 8px;
}

.offer-card .price {
    font-family: var(--font-secondary);
    font-size: 30px;
    font-weight: 800;
    color: var(--color-accent-primary); /* Plava za isticanje cijene */
    margin-bottom: 15px;
}

.offer-card .btn {
    width: 100%;
    margin-top: 15px;
    
    /* PROMJENA ZA MANJI GUMB */
    padding: 10px 20px; /* Smanjeno s 14px 30px (iz .btn) */
    font-size: 13px;    /* Smanjena veličina fonta */
    max-width: 200px; /* Ograničite maksimalnu širinu gumba */
    display: block;   /* Da bi margin: auto radio */
    margin-left: auto;
    margin-right: auto;
}


/* RESPONSIVNOST za 3 kolone (prelazi u 1 kolonu na manjim ekranima) */
@media (max-width: 992px) {
    .gallery-offers-grid {
        /* Prelazak na 1 kolonu na tabletu i mobitelu */
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }
}


/* CUSTOM AUTO SLIDER */
.slider-container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.car-item.single-slide {
    background: var(--color-medium);
    border-radius: 12px;
    width: 700px; 
    max-width: 90%; 
    box-shadow: 0 0 40px rgba(0, 188, 212, 0.2); 
    padding: 0;
    overflow: hidden;
}

/* === POPRAVAK OVDJE: Smanjena visina slike (sa 400px na 300px) === */
.car-item.single-slide img {
    width: 100%;
    height: 300px; /* Vraćeno na manju visinu */
    object-fit: cover; 
    border: none; 
    border-bottom: 5px solid var(--color-accent-primary);
    transition: opacity 1s; 
}

.car-item .slide-info {
    padding: 20px;
}

.car-item h4 {
    font-size: 26px;
    color: var(--color-text-light);
}

/* TRGOVINA */
.donation-perks {
    margin: 60px auto;
    max-width: 900px;
    background-color: var(--color-medium);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.donation-perks h4 {
    color: var(--color-accent-secondary);
    font-size: 28px;
    margin-bottom: 25px;
    text-align: center;
}

.donation-perks ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0;
}

.donation-perks li {
    background-color: var(--color-dark);
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--color-text-light);
    transition: background-color 0.3s, transform 0.3s;
    
    /* Postavljanje na Flexbox je i dalje potrebno */
    display: flex; 
    align-items: center; /* Vertikalno centrira ikonu i tekst */
    /* Nema justify-content, što podrazumijeva flex-start (poravnanje lijevo) */
}

.donation-perks li:hover {
    background-color: #1e1e1e;
    transform: scale(1.03);
}

.donation-perks li i.icon {
    color: var(--color-accent-primary);
    margin-right: 15px;
    font-size: 20px;
}

/* STAFF */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 50px;
}

.staff-member {
    background-color: var(--color-medium);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s; 
}

.staff-member:hover {
    transform: translateY(-15px) rotateX(2deg);
    box-shadow: 0 20px 40px rgba(0, 188, 212, 0.3);
}

.staff-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid var(--color-accent-primary);
    transition: border-color 0.3s;
}

.staff-member h4 {
    color: var(--color-accent-secondary);
    margin-bottom: 5px;
    font-size: 22px;
}

.staff-member p {
    color: var(--color-text-muted);
    font-size: 14px;
}

/* PODNOŽJE (FOOTER) */
footer {
    background-color: #000;
    color: var(--color-text-muted);
    padding: 60px 0 20px;
    font-size: 15px;
    border-top: 1px solid var(--color-accent-primary);
}

footer .container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    text-align: left;
}

.footer-info, .footer-links, .footer-social {
    margin-bottom: 30px;
}

footer h4 {
    color: var(--color-text-light);
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 1px dashed var(--color-text-muted);
    padding-bottom: 5px;
}

.footer-links a, .footer-social a {
    display: block;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.footer-links a:hover, .footer-social a:hover {
    color: var(--color-accent-primary);
    transform: translateX(8px);
}

.footer-social a i {
    margin-right: 10px;
    color: var(--color-accent-secondary);
}

.copyright {
    grid-column: 1 / span 3;
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

/* ************************************** */
/* MODIFICIRANI STILOVI ZA GALERIJA.HTML */
/* ************************************** */

.gallery-header {
    background: transparent;
    padding: 80px 0 40px;
    text-align: center;
}

.gallery-header h1 {
    font-size: 52px;
    color: var(--color-accent-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.gallery-header p {
    font-size: 18px;
    margin-top: 10px;
    color: var(--color-text-muted);
}

/* Galerija vozila */
.gallery-grid {
    display: grid;
    /* KLJUČNA PROMJENA: Ograničavamo na 3 kolone */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* MEDIJSKI UPIT: za tablete (manje od 1024px) bit će 2 kolone */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MEDIJSKI UPIT: za mobitele (manje od 768px) bit će 1 kolona */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.gallery-item {
    background-color: var(--color-dark);
    border-radius: 12px;
    border: 1px solid rgba(0, 188, 212, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    transition: transform 0.4s, box-shadow 0.4s;
    overflow: hidden;
    height: auto; 
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 188, 212, 0.3);
}

.gallery-item summary {
    display: block;
    cursor: pointer;
    list-style: none;
    padding: 0;
}

.gallery-item img.main-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-bottom: 4px solid var(--color-accent-primary);
}

.summary-info {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-medium);
}

.summary-info h4 {
    font-size: 24px;
    color: var(--color-text-light);
}

.summary-info .price {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-accent-secondary);
}

/* Sadržaj koji se otvara - detalji */
.gallery-content {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--color-dark);
}

.gallery-content h5 {
    color: var(--color-accent-primary);
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 18px;
}

.gallery-content ul {
    padding-left: 0;
}

.gallery-content ul li {
    font-size: 15px;
    color: var(--color-text-muted);
}

.gallery-content ul li i {
    color: var(--color-accent-secondary);
}

.photo-gallery {
    display: flex;
    gap: 8px;
    margin: 15px 0 0;
}

.photo-gallery a {
    flex: 1;
    min-width: 0;
}

.photo-gallery img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid var(--color-medium);
    transition: border-color 0.3s;
}

.photo-gallery img:hover {
    border-color: var(--color-accent-primary);
}

.back-btn {
    padding: 14px 35px;
    margin-top: 40px;
    font-size: 16px;
    display: inline-block;
}

/* ************************************** */
/* NOVO: STIL ZA PODNASLOV GALERIJE */
/* ************************************** */


/* Dekorativna linija ispod naslova */
.gallery-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-accent-secondary); /* Zlatna crta */
    border-radius: 2px;
}
/* ************************************** */
/* MODAL/LIGHTBOX (POPRAVAK)             */
/* ************************************** */
.modal {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.95); 

    align-items: center; 
    justify-content: center; 
}

/* Sadržaj Modala (Slika) */
.modal-content {
    margin: auto; 
    display: block;
    width: 90%;
    max-width: 900px;
    max-height: 90vh; 
    object-fit: contain; 
    border: 5px solid var(--color-accent-secondary); 
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* Gumb za zatvaranje */
.close-btn {
    position: fixed; 
    top: 20px;
    right: 45px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10000;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--color-accent-primary);
    text-decoration: none;
    cursor: pointer;
}

/* Animacija zuma */
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}


/* RESPONSIVNOST */
@media (max-width: 1100px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
    
    /* HEADER KOREKCIJA */
    header {
        padding: 10px 20px;
        /* ISPRAVKA #1: Uklonjeno 'position: static;' da bi header ostao sticky */
        /* position: static; */ 
    }
    
    /* ISPRAVKA #2: Navigacija se skriva na mobitelu */
    nav {
        display: none; 
    }
    /* DODANO: Sakrij desktop gumb na mobitelu */
    .join-btn-desktop {
        display: none;
    }
    .join-btn-mobile {
        display: block; /* OVO SADA RADI JER JE UKLONJEN !important */
        background-color: var(--color-accent-primary);
        color: var(--color-dark);
        padding: 8px 15px;
        border-radius: 5px;
        font-weight: 700;
        cursor: pointer;
    }
    
    /* HERO KOREKCIJA */
    .hero-section {
        height: auto; /* Da ne zauzima cijeli ekran na mobitelu */
        padding-top: 100px; /* Osiguraj prostor od vrha */
        padding-bottom: 80px;
        align-items: flex-start;
    }
    .hero-content {
        padding-top: 0;
    }
    .hero-content h1 {
        font-size: 44px; /* Smanji H1 */
    }
    .hero-content h2 {
        font-size: 20px; /* Smanji H2 */
    }
    .content-section {
        padding: 80px 0; /* Manji padding sekcija */
    }
    .content-section h2 {
        font-size: 34px; /* Smanji naslov sekcije */
        margin-bottom: 40px;
    }

    /* CTA KOREKCIJA */
    .cta-buttons {
        flex-direction: column;
        gap: 15px; /* Manji razmak */
    }
    .btn {
        width: 100%;
        padding: 14px 30px; /* Manji padding za gumbe */
        font-size: 15px;
    }

    /* INFO & PRAVILA KOREKCIJA */
    /* Pravila gumb popravak na mobilnom uređaju */
    .info-block.card.rules .btn {
        width: 100% !important; 
        margin-left: 0;
        margin-right: 0;
        padding: 16px 40px; 
        font-size: 16px;
        text-align: center; 
    }
    .info-block.card {
        padding: 25px; /* Manji padding kartica */
    }
    .info-block h3 {
        font-size: 20px; /* Manji naslov u kartici */
    }

    /* AUTO SLIDER KOREKCIJA */
    .car-item.single-slide img {
        height: 250px; /* Manja visina slike */
    }
    .car-item h4 {
        font-size: 20px; /* Manji naslov slajdera */
    }

    /* TRGOVINA KOREKCIJA */
    .donation-perks {
        padding: 30px;
    }
    .donation-perks h4 {
        font-size: 24px;
    }
    .donation-perks ul {
        grid-template-columns: 1fr; /* Jedna kolona za pogodnosti */
        gap: 10px;
    }
    .donation-perks li {
        font-size: 15px;
        padding: 12px;
    }

    /* STAFF KOREKCIJA */
    .staff-grid {
        grid-template-columns: 1fr; /* Jedna kolona za staff */
        gap: 20px;
    }
    .staff-member img {
        width: 100px;
        height: 100px;
    }

    /* FOOTER KOREKCIJA */
    footer .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }
    footer h4 {
        margin-bottom: 10px;
    }
    .footer-links a, .footer-social a {
        display: inline-block; /* Inline linkovi za bolji raspored */
        margin: 0 10px 10px 10px;
    }
    .footer-social a i {
        margin-right: 5px;
    }
    .copyright {
        grid-column: 1;
        font-size: 14px;
    }
    
    /* GALERIJA KOREKCIJA */
    .gallery-header {
        padding: 60px 0 30px;
    }
    .gallery-header h1 {
        font-size: 36px;
    }
    .gallery-header p {
        font-size: 16px;
    }
    .gallery-grid {
        gap: 0x;
        grid-template-columns: 1fr;
    }
    .gallery-item img.main-img {
        height: 180px; /* Manja visina glavne slike u galeriji */
    }
    .summary-info {
        padding: 12px 15px;
    }
    .summary-info h4 {
        font-size: 20px;
    }
    .summary-info .price {
        font-size: 22px;
    }
    .photo-gallery {
        gap: 5px; /* Manji razmak između thumbnailova */
    }
    .photo-gallery img {
        height: 50px; /* Manja visina thumbnailova */
    }
    .back-btn {
        width: 100%;
    }
    
    /* MODAL KOREKCIJA */
    .modal-content {
        width: 95%;
        border-width: 3px;
    }
    .close-btn {
        top: 10px;
        right: 20px;
        font-size: 40px;
    }
}

/* ************************************** */
/* MODIFICIRANI STILOVI ZA RESPONSIVNOST */
/* ************************************** */

@media (max-width: 992px) {
    /* Opšte promjene za manji ekran */
    .container {
        padding: 0 20px;
    }

    /* KOREKCIJA LOGA I PORAVNANJE NA MOBILNOM */
    header {
        flex-direction: column;
        align-items: center;
        padding: 10px 20px; 
    }
    
    header .header-left {
        width: 100%; 
        display: flex;
        justify-content: center; 
        margin-bottom: 0; /* ISPRAVKA #3: Uklonjena margina */
    }
    
    .logo {
        margin-left: 0;
    }

    .logo img {
        height: 30px; 
    }
    
    /* NAVIGACIJA NA MOBILNOM: SKRIVENA */
    header nav {
        display: none; /* ISPRAVKA #4: Skrivamo navigaciju */
    }
    
    /* KRAJ LOGA I PORAVNANJA */

    /* HERO SEKCIJA KOREKCIJA */
    .hero-content {
        padding-top: 80px;
        text-align: center; 
    }

    .hero-content h1 {
        font-size: 50px;
    }
    .hero-content h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .hero-content p {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 15px;
        justify-content: center;
    }
    .btn {
        padding: 14px 30px;
        font-size: 14px;
    }

    /* GLAVNE SEKCIJE KOREKCIJA */
    .content-section {
        padding: 80px 0;
    }
    .content-section h2 {
        font-size: 36px;
        margin-bottom: 40px;
    }
    
    /* INFO KOREKCIJA */
    .info-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .info-block.card:hover {
        transform: none; 
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    .info-block h3 {
        font-size: 22px;
    }
    
    /* TRGOVINA KOREKCIJA */
    .donation-perks {
        padding: 30px;
    }
    .donation-perks h4 {
        font-size: 24px;
    }
    .donation-perks ul {
        grid-template-columns: 1fr;
    }

    /* STAFF KOREKCIJA */
    .staff-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .staff-member img {
        width: 100px;
        height: 100px;
    }
    
    /* FOOTER KOREKCIJA */
    footer .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }
    .footer-links a, .footer-social a {
        display: inline-block; 
        margin: 0 10px 10px 10px;
    }
    .copyright {
        grid-column: 1;
        font-size: 14px;
    }
    
    /* GALERIJA KOREKCIJA */
    .gallery-header {
        padding: 60px 0 30px;
    }
    .gallery-header h1 {
        font-size: 36px;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}
.gallery-content ul {
    list-style: none; /* Uklanja točkice/markere */
    padding-left: 0;  /* Uklanja zadani lijevi padding liste */
}

.gallery-content ul li {
    padding-left: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center; /* NOVO: Centriranje ikone i teksta */
}
.donation-perks ul {
    list-style: none; /* Uklanja točkice/markere */
    padding-left: 0;  /* Uklanja zadani lijevi padding liste */
}
/* --- POPRAVAK ZA SEKCIJU INFO & PRAVILA --- */

/* Sprečava da se box "O NAMA" rasteže, ali mu daje minimalnu visinu */
.info-grid .info-block:first-child {
    align-self: start;
    
    /* NOVO: Dodajemo minimalnu visinu da se box "O NAMA" podudara s visinom 
       "KLJUČNA PRAVILA" boxa kada su detalji zatvoreni. */
    min-height: 450px; 
}
}
/* ************************************** */
/* NOVO: STIL ZA CUSTOM PAYPAL GUMB */
/* ************************************** */
.custom-paypal-btn {
    /* Osnovni izgled i poravnanje */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    gap: 10px; /* Razmak između ikone i teksta */
    padding: 12px 30px;
    
    /* Centriranje unutar kartice i prilagodba širine */
    width: 100%; 
    max-width: 200px; /* Ograničeno na širinu postojećih gumba u offer-card */
    margin-left: auto;
    margin-right: auto;
    display: flex; 

    /* Boje i font, koristeći tvoje postojeće varijable */
    background-color: var(--color-accent-primary); /* Tvoja plava akcent boja */
    color: var(--color-text-light); /* Svijetli tekst */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-secondary); 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    white-space: nowrap; 

    /* Efekti */
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
}

.custom-paypal-btn:hover {
    background-color: #00A3B8; /* Malo tamnija nijansa plave na hover */
    transform: translateY(-2px); 
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.custom-paypal-btn:active {
    transform: translateY(0); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* **************************************************** */
/* IZMJENE ZA SMANJENJE KARTICA I NOVI GUMB ZA KUPNJU */
/* **************************************************** */

/* **************************************************** */
/* REVIDIRANI STILOVI ZA GALERIJU: JEDNAKA VISINA I CENTRIRANJE */
/* **************************************************** */

.gallery-grid {
    /* Mijenja stari stil da bude kompaktniji */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; 
    padding-top: 30px;
    align-items: stretch; /* Osigurava da se kartice unutar reda protežu po visini */
}

.gallery-item {
    /* Ključno: Flexbox za organiziranje unutarnjeg sadržaja vertikalno */
    display: flex;
    flex-direction: column;
    height: 100%; /* Da zauzme cijelu visinu Grid ćelije */
}

/* Smanjenje visine glavne slike */
.gallery-item .main-img {
    height: 180px; 
    object-fit: cover;
}

/* Manji padding za naslov i cijenu */
.summary-info {
    padding: 10px 15px; 
}

.gallery-content {
    padding: 15px;
    padding-bottom: 0; 
    /* Ključno: neka ovaj blok popuni sav preostali prostor u kartici */
    flex-grow: 1;
    /* Unutarnji Flexbox za organiziranje elemenata unutar content boxa */
    display: flex;
    flex-direction: column;
}

/* 4. **ISPRAVAK CENTRIRANJA NASLOVA (Performanse/Galerija)** */
.gallery-content h5 {
    margin-top: 15px;
    margin-bottom: 8px; 
    /* Koristimo Flexbox za centriranje ikone i teksta */
    display: flex; 
    align-items: center;
    justify-content: center; /* KLJUČ ZA CENTRIRANJE! */
    gap: 10px; 
    text-align: center; /* Dodatno osiguranje */
}

/* 5. Stil za formu koja drži gumb, služi kao "footer" kartice */
.gallery-content form.buy-car-form {
    padding: 15px; 
    padding-top: 10px; 
    background-color: var(--color-dark); 
    margin: 0 -1px -1px -1px; 
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* **KLJUČNO ZA GUMB NA DNU: GURANJE FORME NA DNO** */
    margin-top: auto; 
}

.gallery-content form button.buy-car-btn {
    width: 100%;
    padding: 12px 25px; 
    font-size: 14px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 6. Manji prostor u listama performansi */
.gallery-content ul {
    list-style: none;
    padding-left: 0;
    text-align: left; 
}

.gallery-content ul li {
    font-size: 14px;
    margin-bottom: 5px;
    display: flex; 
    align-items: center;
    gap: 10px;
}

/* 7. Popravak galerije unutar kartice */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 15px; 
}

.photo-gallery img {
    width: 100%;
    height: 60px; 
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.2s;
}


/* LIGHTBOX2 RJEŠENJE - Smanjuje veličinu otvorene slike */
.lightbox .lb-image {
    /* Podesite ovu maksimalnu širinu (npr. 600px) na željenu veličinu */
    max-width: 1000px !important; 
    
    /* Osigurava da se proporcije zadrže */
    width: auto !important; 
    height: auto !important; 
    
    /* Centriranje u Lightbox prozoru */
    display: block;
    margin: 0 auto;
}
.gallery-subtitle {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important; 
}
/* Pravilo koje boji veliku sekciju u sivo, vjerojatno nešto poput ovoga */
#trgovina {
    background-color: var(--color-dark); /* <-- PROMIJENITE OVO */
    padding: 80px 0;
}

/* ILI */

section {
    background-color: var(--color-medium); /* <-- PROMIJENITE OVO */
    padding: 80px 0;
}
/* Prisiljavanje crne pozadine za cijeli sadržaj trgovine */
#glavni-sadrzaj-trgovine {
    background-color: var(--color-dark) !important;
}
/* ======================================================= */
/* FINALNI I KOMPLETNI CSS FIX ZA TRGOVINA.HTML */
/* ======================================================= */

/* 1. CILJA GLAVNI SADRŽAJ (SAD JE MANJE AGRESIVAN) */
/* Cilja SVE glavne DIV elemente koji drže sadržaj (sekcije, containere, itd.) */
.trgovina-page section, 
.trgovina-page main, 
.trgovina-page > div:not(#footer) {
    background-color: var(--color-dark) !important;
}

/* 2. CILJA FOOTER - OVOM MORA POBIJEDITI */
/* Koristimo sve moguće selektore da osiguramo da je crno */
body.trgovina-page #footer,
body.trgovina-page #footer .footer-bottom,
body.trgovina-page #footer .footer-info {
    background-color: var(--color-dark) !important; 
}

/* PRILAGODBA POZICIJE SADRŽAJA NA POČETNOJ STRANICI */
#home .hero-content {
    /* Povlači sadržaj (Logo i Tekst) 100 piksela prema gore.
       Podesi ovu vrijednost (-100px) ako želiš da ide više ili manje. */
    margin-top: -100px; 
}

/* OPASNOST: Ako je #home sekcija postavljena na visinu cijelog ekrana (100vh)
   i sadržaj je centriran, možda ćeš morati smanjiti padding/min-height na #home. 
   Ako gornje ne radi, probaj dodati i ovo: */
#home {
    /* Ako #home koristi veliki padding na vrhu, smanji ga */
    padding-top: 50px !important; 
    /* Ako je postavljen na 100% visine ekrana, promijeni način centriranja */
    justify-content: flex-start;
}
/* ======================================================= */
/* NOVA GLATKA ANIMACIJA ZA KARTICE TRGOVINE (KAO U GALERIJI) */
/* ======================================================= */

/* Primijeni na element koji predstavlja cijelu karticu/stavku unutar Trgovine */
.trgovina-grid > div {
    /* KLJUČNO ZA GLATKOĆU: Duža tranzicija (0.4s) s elegantnom funkcijom (ease-in-out) */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out; 
    
    position: relative; 
    z-index: 1; 
    cursor: pointer; 
    
    /* FORSIRANJE GLATKOĆE: Forsira hardversko ubrzanje (GPU) */
    transform: translateZ(0); 
    will-change: transform;
}

/* Stanje kada je miš iznad elementa (hover) */
.trgovina-grid > div:hover {
    /* PROMJENA: Manje agresivna, ali glatka animacija (kao u galeriji) */
    transform: translateY(-8px) scale(1.01); 
    
    /* Sjaj (Glow) baziran na Zlatnoj boji (--color-accent-secondary) */
    box-shadow: 
        /* Zlatni sjaj (Glow) */
        0 0 20px rgba(255, 215, 0, 0.4), /* Zlatni sjaj iz galerije */
        
        /* Srednja sjena (Podizanje) */
        0 15px 40px rgba(0, 0, 0, 0.6), 
        
        /* Donja sjena */
        0 5px 15px rgba(0, 0, 0, 0.4);
        
    z-index: 10;
}
/* ======================================================= */
/* SEKCIJA: KAKO IGRATI? (#guide) */
/* ======================================================= */

.guide-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 4 stupca na većem ekranu */
    gap: 30px;
    margin-top: 50px;
    text-align: center;
}

.guide-step {
    background-color: var(--color-medium);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Animacija pri hoveru - kao u ostalim dijelovima */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.guide-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.guide-step h3 {
    font-size: 1.5rem;
    color: var(--color-accent-primary); /* Akcent boja */
    margin-bottom: 15px;
}

.guide-step p {
    color: var(--color-text-muted);
}

.icon-wrapper {
    background-color: var(--color-dark); 
    color: var(--color-accent-secondary); /* Zlatna/Luxury boja za ikone */
    font-size: 2.5rem;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px; /* Centriranje i odmak */
    border: 2px solid var(--color-accent-secondary);
}

.guide-cta {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    background-color: rgba(103, 154, 254, 0.1); /* Svjetla pozadina od primarne akcent boje */
    border: 1px solid var(--color-accent-primary);
    border-radius: 8px;
    color: var(--color-text-light);
}

.guide-cta a {
    font-weight: 700;
}

/* Prilagodba za mobilne uređaje */
@media (max-width: 768px) {
    .guide-steps-grid {
        grid-template-columns: 1fr; /* Samo jedan stupac na malim ekranima */
    }
}
#guide {
    background-color: #0A0A0A; 
}
/* ======================================================= */
/* HEADER - DODAVANJE LOGIN GUMBA DESNO */
/* ======================================================= */

header {
    /* Osigurava da je logo lijevo, a login desno */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    /* Ako tvoj header već koristi display: flex, provjeri da li je space-between postavljen */
}

/* Primjer: Stil za gumb unutar header-right */
.header-right .btn {
    padding: 4px 8px; 
    font-size: 0.9rem;
}

.header-right .btn i {
    font-size: 0.9rem;
    margin-right: 8px; 
}


/* ======================================================= */
/* MANJI BUTTON ZA HEADER (SMANJENI PADDING) */
/* ======================================================= */

.small-btn {
    /* KLJUČNO: Omogućuje slaganje elemenata u jednom redu */
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; /* Centriranje po visini */

    /* Smanjen padding, posebno horizontalni */
    padding: 8px 15px !important; 
    
    /* Smanjena veličina fonta */
    font-size: 0.9rem !important; 
}

/* Osiguraj da ikona unutar malog gumba odgovara veličini i da ima razmak */
.small-btn i {
    font-size: 0.9rem !important;
    /* Podesi marginu da se odmakne od teksta */
    margin-right: 8px !important; 
    margin-bottom: 0 !important; /* Ukloni marginu s dna, ako je ostala od column stila */
}
/* ======================================================= */
/* MODALNI PROZOR (POP-UP) - GLASSMORHPISM / FROSTED GLASS */
/* ======================================================= */

/* Pozadina (Overlay) */
.modal-overlay {
    /* KLJUČNO: Modal mora biti fiksiran da bi bio na sredini ekrana */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    backdrop-filter: blur(15px); 
    background: rgba(0, 0, 0, 0.7); 
    
    /* SKRIVENO DOK NIJE AKTIVNO: Uvijek koristimo flex, ali ga gasimo opacityjem/pointer-events */
    display: flex; 
    justify-content: center;
    align-items: center;
    z-index: 10000;
    
    pointer-events: none; /* Ne dozvoljava klikanje ispod */
    opacity: 0;
    /* Dodana visible tranzicija da izbjegnemo skok */
    visibility: hidden; 
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

/* Stanje kada je modal AKTIVAN (pomoću JavaScripta) */
.modal-overlay.modal-active {
    pointer-events: auto; /* Dozvoli klikanje */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Prikazuj odmah */
}

/* Sadržaj modala (GLASS BOX) */
.modal-content {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(20px); 
    
    padding: 40px; 
    border-radius: 15px; 
    width: 90%;
    max-width: 420px; 
    text-align: center;
    position: relative;
    
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.5), 
        0 0 40px rgba(255, 215, 0, 0.1); 
    
    /* Animacija (Dolazi s blagom 3D rotacijom) */
    transform: perspective(1000px) rotateX(-5deg);
    transition: all 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
}

/* Animacija modala kada je aktivan */
.modal-overlay.modal-active .modal-content {
    transform: perspective(1000px) rotateX(0deg);
}

/* Gumb za zatvaranje (X) - OSTATAK CSS-a OSTAJE ISTI */
.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem; 
    color: var(--color-text-light); 
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    transition: color 0.2s, transform 0.2s;
}

.close-modal:hover {
    color: var(--color-accent-secondary);
    transform: scale(1.1);
}

/* Tipografija */
.modal-content h3 {
    color: var(--color-accent-secondary); 
    margin-bottom: 5px;
    font-size: 1.9rem;
    font-weight: 800;
}

.modal-content p:first-of-type {
    color: var(--color-text-light);
    margin-bottom: 35px; 
    font-size: 1rem;
}

/* Opcije za prijavu (Kontejner za gumbe) */
.login-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Stil za GUMBE */
.login-options .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    border-radius: 10px; 
    font-size: 1.1rem;
    font-weight: 700; 
    text-decoration: none;
    background: transparent;
    color: var(--color-text-light);
    border: 2px solid; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.login-options .btn:hover {
    transform: translateY(-3px);
    background: var(--color-dark); 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.login-options .btn i {
    margin-right: 15px;
    font-size: 1.5rem;
    color: inherit; 
}

/* FiveM Gumb */
.login-fivem {
    border-color: var(--color-accent-primary); 
}
.login-fivem:hover {
    box-shadow: 0 8px 30px rgba(103, 154, 254, 0.4);
}

/* Discord Gumb */
.login-discord {
    border-color: #5865F2; 
}
.login-discord:hover {
    box-shadow: 0 8px 30px rgba(88, 101, 242, 0.4);
}

/* Info Tekst ispod gumba */
.modal-content p:last-of-type {
    margin-top: 35px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ======================================================= */
/* FIX ZA PREKLAPANJE: STIL ZA DVA STUPCA (GRID) */
/* ======================================================= */

.login-grid {
    display: grid;
    /* Postavi 2 stupca jednake širine */
    grid-template-columns: 1fr 1fr; 
    gap: 15px; /* Razmak između gumba */
    margin-top: 25px; /* Dodatni razmak iznad gumba */
}

/* Stil za GUMBE unutar GRID-a (nasljeđuju stilove od .btn) */
.login-grid .btn {
    /* Uklanjamo sve što bi smetalo u gridu */
    width: auto; 
    padding: 15px 10px; /* Manji padding da se gumbi ne preklapaju */
    font-size: 1rem;
    flex-direction: column; /* Stavi tekst ispod ikone (izgleda bolje u 2 stupca) */
    text-align: center;
    height: 100%; /* Ista visina za oba gumba */
}

.login-grid .btn i {
    /* Centriraj ikonu iznad teksta */
    margin-right: 0; 
    margin-bottom: 5px; 
    font-size: 1.6rem;
}

/* Odzivnost (Za male mobitele, neka se vrate u jedan stupac) */
@media (max-width: 500px) {
    .login-grid {
        grid-template-columns: 1fr;
    }
    .login-grid .btn {
        flex-direction: row;
        text-align: left;
        padding: 18px 20px;
        font-size: 1.1rem;
    }
    .login-grid .btn i {
        margin-right: 15px;
        margin-bottom: 0;
    }
}
/* ======================================================= */
/* STIL ZA LOGOTIP U MODALNOM PROZORU */
/* ======================================================= */

.modal-content .modal-logo {
    /* Ograniči širinu loga */
    max-width: 140px; /* SMANJENO */
    height: auto;
    /* Podesi marginu ispod loga */
    margin-bottom: 25px; 
    margin-top: 0;
    
    /* Dodaj blagi sjaj (opcionalno) */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.2));
}
/* ======================================================= */
/* EFEKT ZAMAGLJIVANJA (BLUR) I ZAKLJUČAVANJE SKROLANJA */
/* ======================================================= */

/* Klasa koja se dodaje na <body> tag kada je modal otvoren */
body.modal-open-blur {
    /* KLJUČNO ZA ZAKLJUČAVANJE: Onemogući skrolanje cijele stranice */
    overflow: hidden !important; 
    
    /* Jačina blur efekta (koristimo 10px kako si tražio) */
    filter: blur(10px); 
    
    /* Osiguraj da animacija izgleda glatko */
    transition: filter 0.4s ease-in-out;
    
    /* Spriječi lagano pomicanje ekrana koje se ponekad događa kod blura */
    transform: scale(1.005); 
}
/* --- GALERIJA: HIDE per-car BUY buttons (čuvamo HTML) --- */
.buy-car-form { display: none !important; }

/* --- PONUDE: 4 KARTICE (1x/3x/5x/10x) --- */
.gallery-offers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
  margin: 32px auto;
  max-width: 1300px;
  padding: 0 20px;
}
.offer-card {
  background: var(--color-medium);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  text-align: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.offer-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.6); }
.offer-card .price { font-size: 28px; font-weight: 800; color: var(--color-accent-primary); margin: 8px 0; }
.offer-card p { color: var(--color-text-muted); font-size: 14px; margin-bottom: 12px; }

/* responsive: 4 -> 2 -> 1 */
@media (max-width: 992px) {
  .gallery-offers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-offers-grid { grid-template-columns: 1fr; }
}

/* Mobile perf: smanji shadowa i animacija */
@media (max-width: 420px) {
  .offer-card { box-shadow: 0 6px 12px rgba(0,0,0,0.45); transform: none; }
  .gallery-grid .gallery-item .main-img { height: 180px; } /* manje visine slike na mobitelu */
}

/* Lazy images: make sure they fit nicely */
.gallery-grid img, .photo-gallery img {
  width: 100%; height: auto; display: block; object-fit: cover;
  image-rendering: auto; /* browser optim */
}

/* Small perf tweak: reduce heavy box-shadows globally on mobile */
@media (max-width: 768px) {
  * { backface-visibility: hidden; -webkit-font-smoothing: antialiased; }
  .info-block.card, .offer-card, .product-card { box-shadow: 0 8px 20px rgba(0,0,0,0.45); }
}
/* -------- PAGE LOAD ANIMACIJA (fade + mali slide) -------- */

.page-enter {
    opacity: 0;
    transform: translateY(10px);
    animation: pageFadeIn 0.35s ease-out forwards;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}