/* =========================================
   1. OSNOVE I TIPOGRAFIJA
   ========================================= */
   body { 
    font-family: 'Montserrat', sans-serif; 
    scroll-behavior: smooth; 
}

/* =========================================
   2. NAVIGACIJA (Slim & Wide Edition)
   ========================================= */
   nav { 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* Linkovi - elegantni i krupni na hover */
nav .hidden.md\:flex a {
    font-size: 13px !important; 
    letter-spacing: 0.2em !important;
    font-weight: 900 !important;
    transition: all 0.3s ease;
}

/* --- LOGO FIX SEKCIJA --- */

/* Default (Mobilni) */
nav img {
    width: 180px !important; 
    max-height: 55px !important; 
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.3s ease;
}

/* Hamburgermeni - Prikaz samo na mobilnom */
#menu-btn {
    display: flex !important;
    z-index: 120;
    position: relative;
}

/* DESKTOP PODEŠAVANJA (Preko 768px širine) */
@media (min-width: 768px) {
    /* Logo - MAKSIMALNO UVEĆAN NA PC-u */
    nav img {
        width: 380px !important; 
        max-height: 95px !important; 
    }

    /* OVDE JE FIX: Na PC verziji striktno sakrij crtice */
    #menu-btn {
        display: none !important;
    }
}

/* Mobilni meni overlay aktivacija */
#mobile-menu.active { 
    display: flex !important; 
}

.menu-pill { 
    width: 90%; 
    max-width: 350px;
    padding: 20px; 
    background: white; 
    border-radius: 50px; 
    text-align: center; 
    font-weight: 900; 
    text-transform: uppercase;
    font-size: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* =========================================
   3. HERO SEKCIJA (Video pozadina i centralni sadržaj)
   ========================================= */

/* Pozadinski video */
.video-background { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    min-width: 100%; 
    min-height: 100%; 
    object-fit: cover; 
    z-index: 0; 
    filter: brightness(0.4); /* Malo jači mrak da bijeli sadržaj bolje "pukne" */
}

/* Gradijent preko videa za bolju čitljivost teksta */
.video-overlay { 
    position: absolute; 
    inset: 0; 
    background: radial-gradient(circle, transparent 0%, rgba(0,0,0,0.8) 100%); 
    z-index: 1; 
}

/* Centralni logo na videu - FORSIRANO BIJEL */
.main-hero-logo { 
    width: 200px; /* Širina na mobilnim uređajima */
    height: auto;
    /* Filter koji pretvara originalni logo u čisto bijeli */
    filter: brightness(0) invert(1) !important; 
    transition: transform 0.5s ease;
    position: relative;
    z-index: 10;
}

/* Povećanje logotipa na većim ekranima (Desktop) */
@media (min-width: 768px) { 
    .main-hero-logo { 
        width: 420px; /* Baš masivan i upečatljiv logo na sredini */
    } 
}

/* Dodatni efekat na hover (opciono, za dinamičnost) */
.main-hero-logo:hover {
    transform: scale(1.03);
}
/* =========================================
   4. KARTICE I ANIMACIJE
   ========================================= */
@keyframes rotate-holo {
    0% { transform: perspective(1000px) rotateY(0deg) scale(1); }
    50% { transform: perspective(1000px) rotateY(12deg) scale(1.03); }
    100% { transform: perspective(1000px) rotateY(0deg) scale(1); }
}

.holo-rotate-img { animation: rotate-holo 8s ease-in-out infinite; }

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s ease-out;
}

.glass-card:hover {
    border-color: #ea580c;
    background: rgba(234, 88, 12, 0.07);
    transform: translateY(-5px);
}

/* POREĐENJE SEKCIJA */
.compare-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.compare-card:hover {
    border-color: #ea580c;
    background: rgba(234, 88, 12, 0.05);
    transform: scale(1.02);
}

/* RENDERING SCAN ANIMACIJA */
@keyframes scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.animate-scan { animation: scan 3s linear infinite; }