/* ==========================================================================
   OVERCLOCK WEB - RESPONSIVE STILOVI (KOMPLETNA ORGANIZACIJA PO SEKCIJAMA)
   ========================================================================== */

/* ==========================================================================
   1. NAVIGACIJA, LOGO I HAMBURGER MENI
   ========================================================================== */

@media (max-width: 900px) {
    body .main-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 5%;
        flex-wrap: wrap; /* Omogućava prelamanje menija ispod gornje linije */
    }

    body .logo-wrapper {
        height: auto;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body .logo-wrapper img {
        height: 38px;
        width: auto;
    }

    body .logo-text {
        font-size: 22px;
        transform: none;
        /* PODEŠAVANJE VERTIKALNE OSE: */
        margin-top: 3px;    /* Negativna margina podiže tekst na gore. Menjaj na -2px, -4px... */
        margin-bottom: 0px; /* Pozitivna donja margina održava balans i visinu celog zaglavlja */
    }

    body .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        height: 38px;
        margin: 0;
    }

    body .hamburger-menu span {
        display: block;
        width: 28px;
        height: 3px;
        background-color: var(--white-color);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Kapsula mobilnog menija - pripremljena za glatku animaciju */
    body .main-navigation nav {
        display: flex;             /* Uvek je flex da bi stavke bile u koloni, animaciju radimo preko visine */
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.05);
        
        /* Jedina opravdana izmena: ostavljamo blagi blur na samoj kapsuli menija, 
           jer se ona spušta nisko van granica gornje trake i tako nezavisno muti pozadinu */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

        /* POČETNO STANJE (ZATVORENO) */
        max-height: 0;             /* Skuplja meni na nula piksela visine */
        opacity: 0;                /* Čini ga potpuno providnim */
        visibility: hidden;        /* Onemogućava klikove na nevidljive linkove */
        overflow: hidden;          /* Skriva tekst linkova dok je meni skupljen */
        padding: 0;                /* Skuplja unutrašnji vazduh na nulu */
        margin-top: 0;             /* Skuplja gornju marginu da ne pravi prazninu */
        border: 1px solid rgba(255, 255, 255, 0); /* Skriva ivicu dok je zatvoren */

        /* DEFINISANJE TRANZICIJE: Sve komponente se otvaraju glatko za 0.4 sekunde */
        transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease, padding 0.4s ease, margin-top 0.4s ease, border-color 0.4s ease;
    }

    body .main-navigation .header-actions {
        display: flex;             /* Prebačeno iz none u flex zbog animacije */
        width: 100%;
        justify-content: center;

        /* POČETNO STANJE (ZATVORENO) */
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        margin-top: 0;
        padding-bottom: 0;

        /* DEFINISANJE TRANZICIJE */
        transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease, margin-top 0.4s ease, padding-bottom 0.4s ease;
    }

    /* CSS Mehanizam za otvaranje (OTVORENO STANJE) */
    body .menu-toggle-cb:checked ~ nav {
        max-height: 500px;         /* Dovoljno velika maksimalna visina da obuhvati sve linkove bez sečenja */
        opacity: 1;                /* Meni postaje vidljiv */
        visibility: visible;
        padding: 25px 0;           /* Vraćamo tvoj originalni padding */
        margin-top: 20px;          /* Vraćamo tvoju originalnu marginu */
        border: 1px solid rgba(255, 255, 255, 0.1); /* Vraćamo suptilnu ivicu */
    }

    body .menu-toggle-cb:checked ~ .header-actions {
        max-height: 100px;         /* Proširuje prostor za glavno dugme */
        opacity: 1;
        visibility: visible;
        margin-top: 15px;          /* Vraćamo tvoju originalnu marginu */
        padding-bottom: 10px;       /* Vraćamo tvoj originalni padding */
    }

    /* Animacija hamburgera u X */
    body .menu-toggle-cb:checked + .hamburger-menu span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: var(--premium-blue);
    }
    
    body .menu-toggle-cb:checked + .hamburger-menu span:nth-child(2) {
        opacity: 0;
    }
    
    body .menu-toggle-cb:checked + .hamburger-menu span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: var(--premium-blue);
    }
}


/* ==========================================================================
   2. FIKS ZA MARKERE I NASLOVE SEKCIJA (GLOBALNO)
   ========================================================================== */

@media (max-width: 900px) {
    body .title-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center; /* Drži ceo paket (marker + reč) u apsolutnoj sredini ekrana */
        align-items: center;     /* Savršeno vertikalno poravnanje */
        width: 100%;
        padding: 6px 0;          /* Daje vertikalni luft celoj kutiji da font ne udara u ivice */
    }

    body .section-title, 
    body .section-title.dark-text {
        font-size: 2.1rem;
        width: auto;             /* Ključno: naslov uzima samo prostor slova, ne širi se na 100% */
        line-height: 1.4;        /* Povećano na 1.4 — daje ClaspoND fontu prostor da se "ispiše" bez sečenja */
        margin: 0;               /* Resetuje margine koje guraju tekst */
        padding: 0;              /* Uklanja stari padding-bottom koji je krivio vertikalnu osu */
        text-align: left;        /* Pošto Flexbox radi centriranje celog paketa, tekst unutar sebe ide prirodno */
    }

    body .title-marker {
        height: 26px;
        width: 6px;
        min-width: 6px;
        flex-shrink: 0;
        margin-right: 12px;
    
        /* 1. Resetujemo stare margine da krenemo od čiste nule */
        margin-top: -6px;
        margin-bottom: 0;
    
        /* 2. MILIMETARSKO PODEŠAVANJE ZA POČETNO SLOVO */
        transform: translateY(1px); 
    }

    /* PRISILNO PRIKAZIVANJE MARKERA U KONTAKT SEKCIJI */
    body .contact-section .title-wrapper,
    body .contact .title-wrapper,
    body #kontakt .title-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    body .contact-section .title-marker,
    body .contact .title-marker,
    body #kontakt .title-marker {
        display: block;
        visibility: visible;
        opacity: 1;
        width: 6px;
        min-width: 6px;
        height: 26px;
        background-color: var(--premium-blue);
        flex-shrink: 0;
        margin-right: 12px;
        margin-top: -6px;
    }
}


/* ==========================================================================
   3. HERO SEKCIJA
   ========================================================================== */

/* Za tablete i manje ekrane */
@media (max-width: 900px) {
    .hero h1 {
        font-size: 4rem; /* Smanjujemo masivni naslov sa 6.3rem da ne puca tekst */
    }
    .hero p {
        font-size: 18px; /* Blago smanjujemo opis radi boljeg pakovanja */
        padding: 0 20px;
    }
}

/* Specifično za mobilne telefone */
@media (max-width: 600px) {
    .hero h1 {
        font-size: 2.8rem; /* Agresivnije smanjenje naslova za male ekrane */
    }
    .hero-content {
        padding-top: 120px; /* Smanjujemo gornji prored jer je i navigacija uža */
    }
    .hero-actions {
        flex-direction: column; /* Ređamo dugmad jedno ispod drugog umesto horizontalno */
        gap: 15px;
    }
    .hero-actions .btn-black, 
    .hero-actions .btn-outline {
        width: 100%; /* Dugmad se šire celom širinom na mobilnom */
        max-width: 280px; /* Ali ih zaključavamo na max 280px da ne izgledaju preglomazno */
    }
}


/* ==========================================================================
   4. BENTO LIGHT GRID SEKCIJA
   ========================================================================== */

@media (max-width: 1024px) {
    .bento-light-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bento-light-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   5. GALERIJA, SLIDER I LIGHTBOX
   ========================================================================== */

/* Responzivnost: 1 kolona na mobilnim uređajima */
@media (max-width: 900px) {
   .large-gallery-grid {
        grid-template-columns: 1fr;        /* Na manjim ekranima se vraćaju jedna ispod druge */
        gap: 30px;
    }
}

/* Na mobilnom se strelice kriju jer se koristi prirodan svajp prstom */
@media (max-width: 768px) {
    .slider-arrow {
        display: none;
    }
}

/* Prilagođavanje za telefone - strelice se sklanjaju radi swipe prostora */
@media (max-width: 768px) {
    .lightbox-arrow { display: none; }
    .lightbox-close { top: 15px; right: 20px; font-size: 35px; }
    .lightbox-content { max-width: 95%; }
}


/* ==========================================================================
   6. CENOVNIK SEKCIJA
   ========================================================================== */

@media (max-width: 600px) {
    .pricing-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .pricing-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-right: 0;
    }
    
    .pricing-value {
        align-self: flex-end; /* Cenu na mobilnom guramo skroz dole desno */
    }
}


/* ==========================================================================
   7. BLOG SEKCIJA
   ========================================================================== */

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   8. KONTAKT FORMA (SADA SA FIKSOM ZA VERTIKALNU OSU DUGMETA)
   ========================================================================== */

@media (max-width: 900px) {
    body .contact-split-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    body .form-row {
        flex-direction: column;
        gap: 40px;
    }

    body .contact-submit-btn {
        display: flex;
        align-items: center;      /* Vertikalno centriranje elemenata unutar dugmeta */
        justify-content: center;  /* Horizontalno centriranje */
        margin: 20px auto 0 auto; /* Gura dugme u sredinu ekrana */
        
        /* FIKS ZA ANIMACIJE: Sprečava da transform iz skripti/animacija poremeti unutrašnju osu */
        transform: none; 
        will-change: auto;
    }

    /* FIKS ZA SAM TEKST UNUTAR DUGMETA: 
       Pretraživač na Xiaomi 12 nekada loše računa visinu fonta ako dugme ima fiksnu visinu ili padding.
       Ovim osiguravamo da unutrašnja linija teksta bude savršeno centrirana. */
    body .contact-submit-btn span,
    body .contact-submit-btn text {
        line-height: 1 !important;
        display: inline-block;
        vertical-align: middle;
    }

    /* FIKS ZA STRELICU: Osigurava da i ikonica/strelica prati istu visinsku osu bez odstupanja */
    body .contact-submit-btn i,
    body .contact-submit-btn svg {
        display: inline-flex;
        align-items: center;
        line-height: 1 !important;
    }
}


/* ==========================================================================
   9. SEKCIJA IZNAD FOOTERA (ZAJEDNICA) I INLINE FOOTER
   ========================================================================== */

@media (max-width: 900px) {
    .community-content .massive-text {
        font-size: 3.6rem; 
        line-height: 1.1;
        text-align: center;
        margin: 0 auto 25px auto;
    }

    .inline-footer {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* OČIŠĆENO: Pojačana specifičnost uklanja potrebu za !important */
    body .community-content {
        width: 100%;
        padding-left: 16px;  /* Bezbedna zona da slova nikad ne dotaknu staklo ekrana */
        padding-right: 16px;
        box-sizing: border-box;
    }

    .footer-left { 
        align-items: center; 
        text-align: center; 
    }
}

@media (max-width: 480px) {
    .community-content .massive-text {
        font-size: 2.9rem; 
        letter-spacing: -0.5px;
        margin-bottom: 20px;
    }

}

/* --- TRANZICIJA BOJA KADA PROĐE KONTAKT FORMA --- */

/* Menja tekst logoa u crnu boju */
body .nav-dark-theme .logo-text {
    color: #000000;
}

/* Menja boju linkova u navigaciji u crnu boju */
body .nav-dark-theme .main-navigation nav a {
    color: #000000;
}

/* Menja sve tri linije hamburger menija u crnu boju */
body .nav-dark-theme .hamburger-menu span {
    background-color: #000000;
}

/* Ukoliko je hamburger meni otvoren (aktiviran X), zadržavamo premium plavu da se vidi selekcija */
body .nav-dark-theme .menu-toggle-cb:checked + .hamburger-menu span {
    background-color: var(--premium-blue);
}

/* Ako imaš SVG logo i želiš da i njega zatamniš (invertuješ) da bude crn */
body .nav-dark-theme .logo-wrapper img {
    filter: brightness(0); /* Pretvara beli logo u potpuno crn */
}

/* --- ZATAMNJIVANJE DUGMETA KADA SE AKTIVIRA TAMNA TEMA --- */

/* Prilagodi selektor (.contact-submit-btn) zavisno od toga kako se tvoje dugme tačno zove u kodu */
body .nav-dark-theme .btn-outline-nav {
    background-color: #000000; /* Postavlja pozadinu dugmeta u crnu */
    color: #ffffff;            /* Tekst postaje beo da bi se video na crnoj pozadini */
    border: 1px solid #000000; /* Opciono: ako imaš ivicu, neka bude crna */
}

/* Ako dugme unutar sebe ima strelicu (ikonu) */
body .nav-dark-theme .btn-outline-nav i,
body .nav-dark-theme .btn-outline-nav svg {
    fill: #ffffff;            /* Ako je SVG, menja boju ikone u belu */
    color: #ffffff;            /* Ako je font-ikonica */
}

/* --- DISKRETNO ZATAMNJIVANJE OMOTAČA (KAPSULE) U TAMNOJ TEMI --- */

    /* Kada navigacija prođe u crni mod, kapsula menija menja beli sjaj u diskretni tamni sjaj */
    body header.nav-dark-theme .main-navigation nav {
        background: rgba(0, 0, 0, 0.03);             /* Veoma suptilna tamna tekstura umesto bele */
        border: 1px solid rgba(0, 0, 0, 0.06);       /* Jedva primetna tamna ivica da se omotač odvoji od belog footera */
    }

    /* Osiguravamo da i u otvorenom (checked) stanju ivica zadrži tu diskretnu tamnu nijansu */
    body header.nav-dark-theme .menu-toggle-cb:checked ~ nav {
        border-color: rgba(0, 0, 0, 0.08);
    }

/* --- KONZISTENTNI HOVER EFEKTI --- */

/* 1. Hover za navigacione linkove */
body .main-navigation nav a:hover {
    color: var(--premium-blue); /* Boja kada pređeš mišem */
}

/* 2. Hover za navigacione linkove kada je crna tema */
body .nav-dark-theme .main-navigation nav a:hover {
    color: var(--premium-blue); /* Zadržavamo istu boju i ovde */
}

/* 3. Hover za dugme (Contact Submit Button) */
/* Kada je bela navigacija */
body .btn-outline-nav:hover {
    background-color: var(--premium-blue);
    color: #ffffff;
}

/* Kada je crna navigacija (nav-dark-theme) */
body .nav-dark-theme .btn-outline-nav:hover {
    background-color: var(--premium-blue); /* Ista boja kao u belom modu */
    color: #ffffff;
}