/* ===================================================================
   UNIQUE Production — zajednicki stilovi (polish 2026)
   Iste boje i tekstovi; responzivnost, tempo i scroll dinamika.
   =================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: #a78bfa; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Navbar: staklasti efekat + skupljanje pri skrolu --- */
.navbar {
    background-color: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.navbar .logo img { transition: height 0.3s ease, transform 0.3s ease; }
.navbar.scrolled { padding-top: 8px; padding-bottom: 8px; background-color: rgba(0, 0, 0, 0.96); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); }
.navbar.scrolled .logo img { height: 40px; }

/* --- Zastavice jezika: u navbaru umesto plutajuce --- */
.navbar .language-switcher { position: static; padding: 0; margin: 0 6px 0 16px; }
.navbar .logo { margin-right: auto; }
.navbar .hamburger { order: 10; margin-left: 14px; }

/* --- Fluidni naslovi --- */
.hero h1 { font-size: clamp(30px, 6vw, 48px); }
.hero .subtitle { font-size: clamp(18px, 3.4vw, 28px); }
.about-section h2, .intro-section h2, .services-grid h2, .contact-info h2,
.gallery-header h2, .testimonials-section h2, .partnership-section h1,
.intro-section h1, .section h1 { font-size: clamp(26px, 4.6vw, 36px); }

/* --- Navigacija: hamburger i na tabletima (769-1100px se lomila) --- */
@media (max-width: 1100px) {
    .hamburger { display: flex; }
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #000;
        padding: 20px;
        text-align: center;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    .nav-links.active { display: flex; }
    .nav-links li { margin: 10px 0; }
    .nav-links a { font-size: 20px; display: inline-block; padding: 6px 12px; }
    .dropdown-content { position: static; box-shadow: none; background-color: #1a1a1a; width: 100%; display: none; }
    .dropdown.open .dropdown-content { display: block; }
}

/* --- Dropdown na desktopu: meko otvaranje --- */
@media (min-width: 1101px) {
    .dropdown-content {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }
    .dropdown:hover .dropdown-content,
    .dropdown.open .dropdown-content,
    .dropdown:focus-within .dropdown-content {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
}

/* --- Smirenije animacije: statican sjaj umesto stalnog pulsiranja --- */
.intro-section, .testimonials-section { animation: none; box-shadow: 0 10px 30px rgba(167, 139, 250, 0.22); }
.custom-container { animation: none; box-shadow: 0 10px 30px rgba(167, 139, 250, 0.25); }
.image-placeholder img { animation: none; }
.cta-button, .hero .cta-button { animation: none; box-shadow: 0 10px 28px rgba(167, 139, 250, 0.45); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cta-button:hover, .hero .cta-button:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(167, 139, 250, 0.65); }
.section .contact-btn { animation: none; box-shadow: 0 8px 24px rgba(167, 138, 250, 0.5); }

/* --- Hover: blagi lift umesto scale (ostrije, bez mutnjenja slika) --- */
.gallery-item:hover, .service-item:hover { transform: translateY(-6px); }
.image-placeholder:hover { transform: translateY(-4px); }
.feature-image:hover { transform: none; }

/* --- Scroll reveal (dinamika pri skrolovanju) --- */
html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
html.js-reveal .reveal.reveal-in { opacity: 1; transform: none; }

/* --- Hero: parallax priprema + stabilna visina na telefonu --- */
.hero { height: 100vh; height: 100svh; }
.hero video { height: 100vh; height: 100svh; }
.hero-content { will-change: transform, opacity; }

/* --- index: reklamna traka fluidna --- */
.image-container { width: 100%; height: auto; }
.feature-image { width: 100%; }

/* --- index: pregled galerije, medjukorak za tablete --- */
@media (max-width: 1024px) { .gallery-preview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery-preview { grid-template-columns: 1fr; } }

/* --- galerija: filteri kao chipovi, prirodne proporcije na telefonu --- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gallery-filters button { margin: 0; }
@media (max-width: 1100px) and (min-width: 769px) {
    .gallery-grid { gap: 24px; }
    .gallery-grid .gallery-item img { height: 320px; }
}
@media (max-width: 768px) {
    .gallery-container { padding: 0 15px; }
    .gallery-grid .gallery-item img { height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
}

/* --- stranice usluga: sadrzaj ispod fiksiranog navbara --- */
body.page-pad main { padding-top: 130px; }
@media (max-width: 768px) { body.page-pad main { padding-top: 110px; } }

/* --- mobilno citanje + iOS auto-zum --- */
@media (max-width: 768px) {
    .about-section p, .contact-info p, .section p { text-align: left; }
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea { font-size: 16px; }
}

/* --- footer: powered by --- */
.footer-credit .powered-by { display: inline-block; margin-top: 8px; font-size: 12px; color: #999; letter-spacing: 0.3px; }
.footer-credit .powered-by a { color: #a78bfa; }

/* --- pristupacnost: smanjene animacije --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    html.js-reveal .reveal { opacity: 1; transform: none; }
}

/* --- stranice usluga: elegantan marker umesto tackica --- */
body.page-pad .section ul { list-style: none; padding-left: 6px; }
body.page-pad .section ul li { position: relative; padding-left: 30px; }
body.page-pad .section ul li::before {
    content: '\2726'; /* ✦ */
    position: absolute;
    left: 0;
    top: 0.05em;
    color: #a78bfa;
    font-size: 0.95em;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.45);
}

/* --- footer: logo sa belim ramom --- */
.footer-logo { text-align: center; margin: 28px 0 6px; }
.footer-logo img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 16px;
    border: 3px solid #fff;
    box-shadow: 0 0 22px rgba(167, 139, 250, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.footer-logo img:hover { transform: translateY(-3px); box-shadow: 0 6px 28px rgba(167, 139, 250, 0.55); }
@media (max-width: 480px) { .footer-logo img { width: 90px; height: 90px; } }

/* --- CTA kapsule: ujednacene na svim stranicama --- */
.section .contact-btn,
.cta-button,
.hero .cta-button,
.contact-form button {
    display: inline-block;
    background: linear-gradient(45deg, #a78bfa, #7c3aed);
    color: #fff;
    padding: 16px 42px;
    border: none;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    animation: none;
    box-shadow: 0 10px 28px rgba(167, 139, 250, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section .contact-btn:hover,
.cta-button:hover,
.hero .cta-button:hover,
.contact-form button:hover {
    background: linear-gradient(45deg, #a78bfa, #7c3aed);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(167, 139, 250, 0.65);
}
.section .centered-contact { text-align: center; }
@media (max-width: 768px) {
    .section .contact-btn,
    .cta-button,
    .hero .cta-button {
        width: auto;
        padding: 15px 36px;
        font-size: 16px;
    }
}

/* --- Dropdown "Usluge": strelica koja prati stanje --- */
.nav-links .dropdown > a::after {
    content: '▾';
    font-size: 12px;
    margin-left: 7px;
    display: inline-block;
    vertical-align: middle;
    color: #a78bfa;
    transition: transform 0.25s ease;
}
.nav-links .dropdown.open > a::after,
.nav-links .dropdown:hover > a::after { transform: rotate(180deg); }

/* --- Mobilni podmeni: kartica sa animacijom, klik otvara/zatvara --- */
@media (max-width: 1100px) {
    .dropdown-content,
    .dropdown:hover .dropdown-content {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        background: #141414;
        border-radius: 12px;
        margin: 6px auto 0;
        width: min(92%, 420px);
        border: 1px solid rgba(167, 139, 250, 0.18);
        transition: max-height 0.3s ease, opacity 0.22s ease, margin 0.3s ease;
    }
    .dropdown.open .dropdown-content {
        max-height: 340px;
        opacity: 1;
        margin-bottom: 4px;
    }
    .dropdown-content a {
        font-size: 16px;
        padding: 12px 14px;
        color: #e4e4e4;
        border-bottom: 1px solid rgba(167, 139, 250, 0.12);
    }
    .dropdown-content a:last-child { border-bottom: none; }
    .dropdown-content a:hover { background-color: #1d1d1d; }
}

/* --- Logo sekcija: lebdece iskre/note i disanje loga --- */
.custom-container { position: relative; overflow: hidden; }
.custom-container .float-spark {
    position: absolute;
    bottom: -30px;
    pointer-events: none;
    user-select: none;
    color: #fff;
    opacity: 0;
    will-change: transform, opacity;
    animation: sparkFloat linear infinite;
    text-shadow: 0 0 12px rgba(124, 58, 237, 0.8);
}
@keyframes sparkFloat {
    0%   { transform: translateY(0) rotate(0deg) scale(0.8); opacity: 0; }
    12%  { opacity: 0.9; }
    75%  { opacity: 0.5; }
    100% { transform: translateY(-560px) rotate(25deg) scale(1.15); opacity: 0; }
}
.image-placeholder { animation: logoBreathe 6s ease-in-out infinite; }
@keyframes logoBreathe {
    0%, 100% { transform: translateY(0);    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.35); }
    50%      { transform: translateY(-8px); box-shadow: 0 24px 46px rgba(124, 58, 237, 0.5); }
}

/* --- iskre: njihanje levo-desno dok se dizu --- */
.float-spark .sway {
    display: inline-block;
    animation: sparkSway ease-in-out infinite alternate;
}
@keyframes sparkSway {
    from { transform: translateX(-12px) rotate(-8deg); }
    to   { transform: translateX(12px) rotate(8deg); }
}

/* --- Lighthouse: kontrast i hamburger dugme --- */
button.hamburger { background: none; border: 0; padding: 6px; cursor: pointer; }
main .highlight, .section .highlight, .about-section .highlight,
.intro-section .quote-author, .quote-author,
.testimonial-card span { color: #7c3aed; }
.gallery-filters button { color: #7c3aed; border-color: #7c3aed; }
.gallery-filters button.active, .gallery-filters button:hover { color: #fff; }

/* --- O nama: ukrasi kartica (tekst netaknut) --- */
.about-container .section {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-container .section:not(.section-3):hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(167, 139, 250, 0.25);
}
.about-container .section:not(.section-3)::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #a78bfa, #7c3aed, transparent);
}
.about-container .section-1 { background: linear-gradient(160deg, #ffffff 65%, #f6f1ff); }
.about-container .section-1::after,
.about-container .section-4::after {
    content: '✦';
    position: absolute;
    right: 14px; bottom: 10px;
    color: rgba(167, 139, 250, 0.4);
    font-size: 18px;
}
.about-container .section-2 {
    background: linear-gradient(135deg, #ffffff, #f3e8ff);
    border: 1px solid rgba(167, 139, 250, 0.25);
}
.about-container .section-2 .quote { position: relative; padding-top: 36px; }
.about-container .section-2 .quote::before {
    content: '\201C';
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: 1;
    color: rgba(124, 58, 237, 0.3);
}
.about-container .section-4 { background: linear-gradient(200deg, #ffffff 65%, #f6f1ff); }
.about-container .section-4 p:first-of-type::first-letter {
    font-family: Georgia, serif;
    font-size: 44px;
    line-height: 0.85;
    color: #7c3aed;
    float: left;
    padding: 5px 8px 0 0;
}
.services-card {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, #a78bfa, #7c3aed) border-box;
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.services-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(167, 139, 250, 0.3); }
.services-card .services-list li {
    border-bottom: 1px dashed rgba(167, 139, 250, 0.3);
    padding: 9px 0;
    margin: 0;
    transition: transform 0.25s ease;
}
.services-card .services-list li:last-child { border-bottom: none; }
.services-card .services-list li:hover { transform: translateX(4px); }
.services-card .services-list li i { color: #7c3aed; }

/* --- O nama: usluge kao linkovi, dve u redu, sa iskrom --- */
.services-card { max-width: 540px; }
.services-card .services-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    text-align: left;
}
.services-card .services-list li {
    border-bottom: none;
    padding: 7px 0;
    margin: 0;
}
.services-card .services-list li:hover { transform: none; }
.services-card .services-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #555;
    text-decoration: none;
    font-size: 17px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.services-card .services-list a::before {
    content: '\2726';
    color: #7c3aed;
    font-size: 0.9em;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.45);
}
.services-card .services-list a:hover { color: #7c3aed; transform: translateX(3px); }
@media (max-width: 600px) {
    .services-card .services-list {
        grid-template-columns: 1fr;
        justify-items: start;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        gap: 4px;
    }
}
.services-card .services-list a { align-items: flex-start; text-align: left; }
.services-card .services-list a::before { margin-top: 2px; }
.services-card .services-list li { display: flex; justify-content: flex-start; }

/* --- Lighthouse: zastavice bez distorzije razmere --- */
.language-flag { object-fit: cover; }

/* --- Kartice usluga: naizmenicni ulazak sa strana --- */
@media (max-width: 768px) {
    html.js-reveal .reveal.reveal-left { transform: translateX(-110px); }
    html.js-reveal .reveal.reveal-right { transform: translateX(110px); }
    html.js-reveal .reveal.reveal-left,
    html.js-reveal .reveal.reveal-right { transition-duration: 0.85s, 0.85s; }
}
html.js-reveal .reveal.reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .reveal-left, html.js-reveal .reveal-right { transform: none; }
}