/* JAM AUTOMATIKE – stilovi */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        nav {
            background-color: #1a252f;
            padding: 0.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        }

        .logo-container {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.08);
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid rgba(52, 152, 219, 0.3);
            box-shadow: inset 0 0 8px rgba(52, 152, 219, 0.1);
            transition: all 0.3s ease;
        }

        .logo-container:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(52, 152, 219, 0.6);
        }

        .logo-img {
            height: 80px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0px 0px 10px rgba(52, 152, 219, 0.75)) drop-shadow(0px 0px 2px rgba(52, 152, 219, 0.9));
            transition: filter 0.3s ease, transform 0.3s ease;
        }

        .logo-container:hover .logo-img {
            filter: drop-shadow(0px 0px 15px rgba(52, 152, 219, 0.95)) drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.8));
            transform: scale(1.02);
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: #ffffff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #3498db;
        }

        header {
            background: linear-gradient(rgba(26, 37, 47, 0.80), rgba(26, 37, 47, 0.80)), url('../slike/web/hero-krilna-vrata.webp') no-repeat center center/cover;
            height: 55vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #fff;
            overflow: hidden;
            position: relative;
        }

        .header-content {
            position: relative;
            z-index: 10;
            padding: 1.5rem;
        }

        header h1 {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        header p {
            font-size: 1.3rem;
            color: #3498db;
            font-weight: 300;
        }

        .gate-wing {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: #1a252f;
            z-index: 20;
            transition: transform 1.8s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .gate-left {
            left: 0;
            border-right: 2px solid #3498db;
            animation: openLeftGate 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
            animation-delay: 0.5s;
        }

        .gate-right {
            right: 0;
            border-left: 2px solid #3498db;
            animation: openRightGate 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
            animation-delay: 0.5s;
        }

        @keyframes openLeftGate {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); opacity: 0; }
        }

        @keyframes openRightGate {
            0% { transform: translateX(0); }
            100% { transform: translateX(100%); opacity: 0; }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            font-size: 2.2rem;
            position: relative;
            padding-bottom: 1rem;
            color: #1a252f;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: #3498db;
        }

        /* 1. SEKCIJA: O nama (Svijetlo - Bijela pozadina) */
        .seo-about-section {
            background-color: #ffffff;
        }

        .seo-about-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .seo-about-content p {
            color: #444;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        /* 2. SEKCIJA: Naše Usluge (Tamnije - Blaga sivo-plava pozadina) */
        .services-section {
            background-color: #f1f2f6;
            border-top: 1px solid #e1e8ed;
            border-bottom: 1px solid #e1e8ed;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }

        .service-card {
            background: #ffffff; /* Bijele kartice na tamnijoj sivoj pozadini */
            padding: 2.5rem 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            border-top: 4px solid #1a252f;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border-top: 4px solid #3498db;
        }

        .service-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: #3498db;
        }

        .service-card h3 {
            margin-bottom: 1rem;
            font-size: 1.3rem;
            color: #1a252f;
        }

        .service-card p {
            color: #666;
            font-size: 0.95rem;
        }

        /* 3. SEKCIJA: Naši Radovi / Galerija (Svijetlo - Bijela pozadina) */
        .gallery-section {
            background-color: #ffffff;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            height: 220px;
            cursor: pointer;
            background-color: #ddd;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(52, 152, 219, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-overlay span {
            color: white;
            font-size: 2.5rem;
            font-weight: bold;
        }

        .lightbox {
            display: none;
            position: fixed;
            z-index: 2000;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .lightbox.active {
            display: flex;
            opacity: 1;
        }

        .lightbox-content {
            max-width: 85%;
            max-height: 85%;
            border-radius: 4px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.5);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .lightbox.active .lightbox-content {
            transform: scale(1);
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: #fff;
            font-size: 3rem;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
            user-select: none;
        }

        .lightbox-close:hover {
            color: #3498db;
        }

        .cta-section {
            background-color: #3498db;
            color: white;
            text-align: center;
            padding: 3rem 2rem;
        }

        .cta-section h2 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }

        .cta-section p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 1.5rem auto;
            opacity: 0.9;
        }

        .btn-contact {
            display: inline-block;
            background-color: #1a252f;
            color: white;
            padding: 0.8rem 2rem;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            transition: background 0.3s;
        }

        .btn-contact:hover {
            background-color: #2c3e50;
        }

        footer {
            background-color: #1a252f;
            color: #ffffff;
            padding: 4rem 2rem 2rem 2rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 3rem;
            border-bottom: 1px solid #2c3e50;
            padding-bottom: 3rem;
        }

        .footer-about h3, .footer-contact h3 {
            color: #3498db;
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer-about p {
            color: #a4b0be;
            margin-bottom: 0.5rem;
        }

        .footer-about .owner {
            font-size: 1.1rem;
            color: #ffffff;
            margin-top: 1rem;
            font-weight: 500;
        }

        .footer-contact ul {
            list-style: none;
        }

        .footer-contact ul li {
            margin-bottom: 1rem;
            color: #a4b0be;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-contact ul li strong {
            color: #ffffff;
        }

        .footer-contact a {
            color: #3498db;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-contact a:hover {
            text-decoration: underline;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            color: #747d8c;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            header h1 { font-size: 2rem; }
            header p { font-size: 1rem; }
            .nav-links { display: none; }
            .logo-img { height: 60px; }
            .footer-content { grid-template-columns: 1fr; text-align: center; }
            .footer-contact ul li { justify-content: center; }
        }

/* ===== DODATNI STILOVI (SEO nadogradnja) ===== */
:root { --tamna:#1a252f; --plava:#3498db; --plava-tamna:#1f6fa8; }
html { scroll-behavior:smooth; }
a { color: var(--plava-tamna); }
img, video { max-width:100%; }

/* Navigacija: logo kao link + mobilni izbornik */
nav .logo-link { display:flex; text-decoration:none; color:#fff; font-weight:700; }
.nav-links a[aria-current="page"] { color: var(--plava); }
.nav-toggle { display:none; background:none; border:1px solid rgba(255,255,255,.35); color:#fff; font-size:1.5rem; line-height:1; padding:.35rem .7rem; border-radius:6px; cursor:pointer; }
.nav-dropdown { position:relative; }
.nav-dropdown > ul { display:none; position:absolute; top:100%; left:-1rem; background:var(--tamna); list-style:none; padding:.6rem 0; min-width:250px; border-radius:0 0 6px 6px; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.nav-dropdown:hover > ul, .nav-dropdown:focus-within > ul { display:block; }
.nav-dropdown > ul a { display:block; padding:.5rem 1rem; font-weight:400; }

/* Hero */
header h1 .h1-brand { display:block; }
header h1 .h1-sub { display:block; font-size:1.15rem; letter-spacing:.5px; text-transform:none; font-weight:500; margin-top:.6rem; color:#e8f1f8; }
.hero-cta { margin-top:1.4rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.btn-primary, .btn-ghost { display:inline-block; padding:.8rem 1.6rem; border-radius:4px; font-weight:700; text-decoration:none; transition:background .3s, color .3s; }
.btn-primary { background:var(--plava); color:#fff; }
.btn-primary:hover { background:var(--plava-tamna); }
.btn-ghost { border:2px solid #fff; color:#fff; }
.btn-ghost:hover { background:#fff; color:var(--tamna); }
header.page-hero { height:auto; min-height:38vh; padding:3rem 1rem; }
header.page-hero h1 { font-size:2.4rem; }

/* Breadcrumbs */
.breadcrumbs { background:#fff; border-bottom:1px solid #e1e8ed; font-size:.9rem; }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; max-width:1200px; margin:0 auto; padding:.7rem 2rem; color:#666; }
.breadcrumbs li + li::before { content:"›"; margin-right:.4rem; color:#999; }
.breadcrumbs a { text-decoration:none; }

/* Kartice usluga – link */
.service-card .more { display:inline-block; margin-top:1rem; font-weight:700; text-decoration:none; color:var(--plava-tamna); }
.service-card .more:hover { text-decoration:underline; }
.service-card h3 a { color:inherit; text-decoration:none; }

/* Tekstualni blokovi */
.prose { max-width:900px; margin:0 auto; }
.prose h2 { color:var(--tamna); font-size:1.7rem; margin:2.2rem 0 .8rem; }
.prose h3 { color:var(--tamna); font-size:1.25rem; margin:1.6rem 0 .5rem; }
.prose p, .prose li { color:#444; font-size:1.05rem; line-height:1.8; }
.prose p { margin-bottom:1rem; }
.prose ul, .prose ol { margin:0 0 1rem 1.4rem; }
.prose li { margin-bottom:.35rem; }
.alt-bg { background:#f1f2f6; border-top:1px solid #e1e8ed; border-bottom:1px solid #e1e8ed; }
.white-bg { background:#fff; }

.split { display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:center; max-width:1100px; margin:0 auto; }
.split img { width:100%; height:auto; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,.12); }
.split .prose { margin:0; }

.kw-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
.kw-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.kw-card img { width:100%; height:220px; object-fit:cover; display:block; }
.kw-card .kw-body { padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.kw-card h3 { color:var(--tamna); margin-bottom:.6rem; font-size:1.25rem; }
.kw-card p { color:#555; font-size:.97rem; flex:1; }
.kw-card a.more { margin-top:1rem; font-weight:700; text-decoration:none; }

.steps { counter-reset:korak; list-style:none; margin:0 !important; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; }
.steps li { counter-increment:korak; background:#fff; padding:1.4rem 1.2rem 1.2rem; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.05); border-top:4px solid var(--plava); }
.steps li::before { content:counter(korak); display:inline-flex; width:2rem; height:2rem; border-radius:50%; background:var(--tamna); color:#fff; align-items:center; justify-content:center; font-weight:700; margin-bottom:.6rem; }
.steps li strong { display:block; color:var(--tamna); margin-bottom:.3rem; }

/* Područje rada */
.area-list { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; list-style:none; margin:1.5rem 0 0 !important; padding:0; }
.area-list li { background:#fff; border:1px solid #d6e4f0; color:var(--tamna); padding:.45rem 1rem; border-radius:999px; font-size:.95rem; margin:0; }

/* FAQ */
.faq { max-width:900px; margin:0 auto; }
.faq details { background:#fff; border:1px solid #e1e8ed; border-radius:8px; margin-bottom:.8rem; }
.faq summary { cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; color:var(--tamna); list-style:none; position:relative; padding-right:3rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:1.3rem; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--plava); }
.faq details[open] summary::after { content:"−"; }
.faq details > div { padding:0 1.3rem 1.2rem; color:#444; line-height:1.75; }
.faq h3 { display:inline; font-size:1.05rem; }

/* Galerija: video sličice, dostupnost */
.gallery-item { border:0; padding:0; display:block; width:100%; }
.gallery-item:focus-visible { outline:3px solid var(--plava); outline-offset:3px; }
.gallery-item .play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.gallery-item .play::before { content:""; width:64px; height:64px; border-radius:50%; background:rgba(26,37,47,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/32px no-repeat; box-shadow:0 0 0 3px rgba(52,152,219,.7); }
.gallery-caption { position:absolute; left:0; right:0; bottom:0; padding:.5rem .7rem; background:linear-gradient(transparent, rgba(0,0,0,.7)); color:#fff; font-size:.85rem; text-align:left; pointer-events:none; }
.lightbox video.lightbox-content { background:#000; }
.lightbox-caption { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#ddd; font-size:.95rem; padding:0 1rem; }

/* CTA dodatno */
.cta-buttons { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.btn-light { display:inline-block; background:#fff; color:var(--tamna); padding:.8rem 2rem; text-decoration:none; border-radius:4px; font-weight:bold; }
.btn-light:hover { background:#eaf3fb; }

/* Footer dodatno */
.footer-links h3 { color:var(--plava); margin-bottom:1.5rem; font-size:1.3rem; text-transform:uppercase; letter-spacing:1px; }
.footer-links ul { list-style:none; }
.footer-links li { margin-bottom:.7rem; }
.footer-links a { color:#a4b0be; text-decoration:none; }
.footer-links a:hover { color:#fff; text-decoration:underline; }

/* Plutajući gumb za poziv (mobitel) */
.call-fab { display:none; position:fixed; right:16px; bottom:16px; z-index:1500; background:#27ae60; color:#fff; text-decoration:none; font-weight:700; padding:.85rem 1.2rem; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.3); }

.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width: 900px) {
  .split { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  nav { padding:.5rem 1rem; flex-wrap:wrap; }
  .nav-toggle { display:block; }
  .nav-links { width:100%; flex-direction:column; gap:0; padding:.5rem 0; }
  .nav-links.open { display:flex; }
  .nav-links a { display:block; padding:.6rem .2rem; }
  .nav-dropdown > ul { display:block; position:static; box-shadow:none; padding:0 0 0 1rem; min-width:0; }
  header h1 .h1-sub { font-size:.95rem; }
  header.page-hero h1 { font-size:1.7rem; }
  .container { padding:3rem 1rem; }
  .breadcrumbs ol { padding:.7rem 1rem; }
  .call-fab { display:inline-block; }
  footer { padding-bottom:5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-wing { display:none; }
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}

@media (max-width: 768px) { header.home-hero { background-image: linear-gradient(rgba(26,37,47,.8), rgba(26,37,47,.8)), url('../slike/web/hero-krilna-vrata-800.webp'); } }