/* ==========================================================================
   1. CORE STYLES & VARIABLES
   ========================================================================== */
:root {
    --bg-color: #f7f7f7;
    --text-main: #0a0a0a;
    --text-muted: #777777;
    --line-color: rgba(0, 0, 0, 0.15);
    --accent: #E33535;
    --font-stack: 'Manrope', sans-serif;
    --nav-height: 70px;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: var(--font-stack);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Glavni oštri kontejner */
.wrapper { 
    border-left: 1px solid var(--line-color); 
    border-right: 1px solid var(--line-color); 
    max-width: 90vw; 
    margin: 0 auto; 
    background: #fff; 
    position: relative; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { text-decoration: none; color: inherit; cursor: pointer; }
ul { list-style: none; }

/* ==========================================================================
   2. COMPONENTS (BUTTONS & FORMS)
   ========================================================================== */
.btn-rect {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 32px; border: 1px solid var(--text-main); border-radius: 0;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
    transition: all 0.3s ease; cursor: pointer; background: transparent; color: var(--text-main);
    text-align: center;
}
.btn-rect:hover { background: var(--text-main); color: #fff; }
.btn-solid { background: var(--text-main); color: #fff; }
.btn-solid:hover { background: transparent; color: var(--text-main); }
.btn-white { border-color: #fff; color: #fff; }
.btn-white:hover { background: #fff; color: var(--text-main); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: transparent; color: var(--accent); border-color: var(--text-main); }

.arch-input { 
    background: transparent; border: none; border-bottom: 1px solid var(--line-color); 
    padding: 15px 0; font-family: var(--font-stack); font-size: 13px; font-weight: 600; 
    color: var(--text-main); transition: border-color 0.3s; outline: none; width: 100%;
}
.arch-input:focus { border-bottom-color: var(--accent); }
.arch-input::placeholder { color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 10px; }
textarea.arch-input { resize: vertical; min-height: 100px; }

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
header {
    position: fixed; top: 0; width: 100%; height: var(--nav-height);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 5vw; background: rgba(247, 247, 247, 0.95); 
    border-bottom: 1px solid var(--line-color); z-index: 9999;
    backdrop-filter: blur(10px);
}

.logo img { height: 16px; display: block; }

.mobile-toggle { display: none; cursor: pointer; color: var(--text-main); }
.mobile-toggle svg { width: 24px; height: 24px; stroke-width: 1.5; stroke: currentColor; fill: none; }

.nav-center ul { display: flex; gap: 40px; }
.nav-center a { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-main); transition: color 0.3s; }
.nav-center a:hover { color: var(--accent); }

.nav-right { display: flex; gap: 24px; align-items: center; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text-main); display: flex; align-items: center; transition: color 0.3s; }
.icon-btn:hover { color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.5; fill: none; stroke: currentColor; }

/* ==========================================================================
   4. PAGE HEADERS (Unutrašnje stranice)
   ========================================================================== */
.page-header { padding: calc(var(--nav-height) + 60px) 5vw 40px; background: #fafafa; border-bottom: 1px solid var(--line-color); }
.breadcrumbs { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); display: flex; gap: 10px; align-items: center; margin-bottom: 30px; }
.breadcrumbs a { transition: color 0.3s; display: flex; align-items: center; gap: 5px; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { color: var(--text-main); }
.page-header h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 20px; }
.page-header h1 strong { font-weight: 800; display: block; }
.page-header p { font-size: 1.1rem; color: var(--text-muted); max-width: 600px; line-height: 1.6; }

/* ==========================================================================
   5. HERO FULL WIDTH (Front Page)
   ========================================================================== */
.hero-full { 
    min-height: 100vh; width: 100vw; position: relative; 
    border-bottom: 1px solid var(--line-color); 
    display: flex; flex-direction: column; background: #111;
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    filter: grayscale(100%); opacity: 0; transition: opacity 1.5s ease;
}
.hero-bg.active { opacity: 1; filter: grayscale(0%); }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2; }

.hero-grid {
    position: relative; z-index: 10; width: 100%; min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto;
    padding-top: var(--nav-height);
}
.hero-left { 
    grid-column: 1 / 2; grid-row: 1 / 2; display: flex; flex-direction: column; justify-content: center;
    padding: 10vh 5vw 0; border-right: 1px solid rgba(255,255,255,0.2);
}
.hero-caption { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 4px; color: var(--accent); margin-bottom: 20px; display: block; }
.hero-title { font-size: clamp(2.5rem, 6vw, 7rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; color: #fff; }
.hero-title span { font-weight: 200; display: block; color: rgba(255,255,255,0.7); }

.hero-right-bottom {
    grid-column: 2 / 3; grid-row: 2 / 3; padding: 5vw; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    border-top: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); backdrop-filter: blur(10px);
}
.hero-desc { font-size: clamp(0.9rem, 2vw, 1.1rem); font-weight: 400; color: #fff; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.6; max-width: 500px; }
.hero-bottom-left {
    grid-column: 1 / 2; grid-row: 2 / 3; border-top: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; padding: 0 5vw;
}

/* ==========================================================================
   6. USLUGE (Home & Archive Grid)
   ========================================================================== */
.services-section { padding-top: 100px; border-bottom: 1px solid var(--line-color); }
.section-title { padding: 0 5vw 60px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.section-title strong { font-weight: 800; display: block; }

.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-color); }
.arch-cell { border-right: 1px solid var(--line-color); display: flex; flex-direction: column; }
.arch-cell:last-child { border-right: none; }
.arch-content { padding: 60px 5vw; flex-grow: 1; }
.minimal-icon { margin-bottom: 40px; }
.minimal-icon svg { width: 24px; height: 24px; stroke-width: 1; stroke: var(--text-main); fill: none; }
.arch-cell h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; text-transform: uppercase; line-height: 1.2; margin-bottom: 30px; }
.arch-list { border-top: 1px solid var(--line-color); padding-top: 20px; }
.arch-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 15px; line-height: 1.4; }
.arch-list li::before { content: ''; display: block; width: 6px; height: 6px; background: var(--text-main); margin-top: 4px; flex-shrink: 0; }
.arch-visual { height: 300px; border-top: 1px solid var(--line-color); overflow: hidden; position: relative; }
.arch-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.8s, transform 0.8s; }
.arch-cell:hover .arch-visual img { filter: grayscale(0%); transform: scale(1.05); }

/* Usluge Archive Editorial Row */
.service-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-color); }
.sr-visual { border-right: 1px solid var(--line-color); overflow: hidden; position: relative; }
.sr-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform 0.8s ease, filter 0.8s ease; }
.service-row:hover .sr-visual img { filter: grayscale(0%); transform: scale(1.05); }
.sr-content { padding: 80px 5vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sr-num { font-family: monospace; font-size: 14px; font-weight: 800; color: var(--accent); margin-bottom: 20px; display: block; letter-spacing: 2px; }
.sr-content h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 200; text-transform: uppercase; line-height: 1.1; margin-bottom: 30px; letter-spacing: -0.02em; }
.sr-content h2 strong { font-weight: 800; display: block; }
.sr-content p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 40px; }
.sr-list { margin-bottom: 50px; width: 100%; border-top: 1px solid var(--line-color); padding-top: 20px; }
.sr-list li { display: flex; align-items: flex-start; gap: 15px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-main); margin-bottom: 15px; line-height: 1.4; }
.sr-list li::before { content: '■'; color: var(--accent); font-size: 10px; margin-top: 2px; }

/* ================= ========================================================
   7. KATALOG & B2B PRODUCTS
   ========================================================================== */
.featured-products { padding-top: 100px; border-bottom: 1px solid var(--line-color); background: #fafafa; }
.catalog-layout { display: grid; grid-template-columns: 280px 1fr; flex-grow: 1; }
.catalog-sidebar { border-right: 1px solid var(--line-color); padding: 40px 5vw 40px 40px; background: #fff; }
.filter-group { margin-bottom: 40px; }
.filter-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; color: var(--text-main); border-bottom: 1px solid var(--line-color); padding-bottom: 10px; }
.filter-list li { margin-bottom: 12px; }
.filter-list a { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); transition: color 0.2s; display: flex; justify-content: space-between; }
.filter-list a:hover, .filter-list a.active { color: var(--accent); font-weight: 800; }
.filter-list .count { font-family: monospace; font-size: 11px; color: #aaa; }

.products-grid, .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 1px solid var(--line-color); }
.product-card { border-right: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); display: flex; flex-direction: column; cursor: pointer; transition: background 0.3s; background: #fff; }
.product-card:hover { background: #fafafa; }

.product-visual { aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid var(--line-color); padding: 20px; position: relative; }
.product-visual img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%); transition: all 0.5s ease; }
.product-card:hover .product-visual img { filter: grayscale(0%); transform: scale(1.05); }
.product-badge { position: absolute; top: 20px; left: 20px; border: 1px solid var(--text-main); padding: 4px 10px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.product-data { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.product-sku { font-family: monospace; font-size: 10px; color: var(--text-muted); margin-bottom: 10px; display: block; }
.product-title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; line-height: 1.2; margin-bottom: 15px; }
.product-meta { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 20px; border-top: 1px solid var(--line-color); padding-top: 15px; text-transform: uppercase; }
.product-meta span { color: var(--text-main); }
.product-action { margin-top: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); display: flex; align-items: center; gap: 5px; }

/* Single Product */
.single-layout { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-color); }
.single-gallery { border-right: 1px solid var(--line-color); display: flex; flex-direction: column; }
.main-image { aspect-ratio: 4/3; padding: 60px; border-bottom: 1px solid var(--line-color); display: flex; align-items: center; justify-content: center; background: #fff; position: relative; }
.main-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 0.3s; }
.badge-premium { position: absolute; top: 30px; left: 30px; border: 1px solid var(--text-main); padding: 4px 10px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.thumb { aspect-ratio: 1; border-right: 1px solid var(--line-color); padding: 15px; cursor: pointer; transition: background 0.3s; background: #fafafa; }
.thumb:last-child { border-right: none; }
.thumb:hover, .thumb.active { background: #fff; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }

.single-info { padding: 60px 5vw; background: #fff; }
.single-sku { font-family: monospace; font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 15px; }
.single-title { font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 800; text-transform: uppercase; line-height: 1.1; margin-bottom: 25px; letter-spacing: -0.02em; }
.single-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-color); }

.tech-specs { margin-bottom: 40px; }
.spec-row { display: flex; border-bottom: 1px solid var(--line-color); padding: 15px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.spec-label { width: 40%; font-weight: 800; color: var(--text-main); }
.spec-value { width: 60%; font-weight: 600; color: var(--text-muted); }

.inquiry-box { background: #fafafa; padding: 40px; border: 1px solid var(--line-color); }
.inquiry-box h3 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }

.related-section { border-bottom: 1px solid var(--line-color); background: #fafafa; }
.section-heading-sm { font-size: 1.5rem; font-weight: 200; text-transform: uppercase; padding: 60px 5vw 40px; border-bottom: 1px solid var(--line-color); }
.section-heading-sm strong { font-weight: 800; }

/* ==========================================================================
   8. PORTFOLIO
   ========================================================================== */
.portfolio-section { border-bottom: 1px solid var(--line-color); background: var(--line-color); }
.portfolio-header { background: #fff; padding: 100px 5vw 60px; }

.portfolio-filters { padding: 0 5vw 40px; border-bottom: 1px solid var(--line-color); background: #fafafa; display: flex; gap: 30px; flex-wrap: wrap; }
.filter-btn { background: none; border: none; font-family: var(--font-stack); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); cursor: pointer; transition: color 0.3s; position: relative; padding-bottom: 5px; }
.filter-btn:hover { color: var(--text-main); }
.filter-btn.active { color: var(--accent); }
.filter-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--accent); }

.masonry, .portfolio-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 350px; gap: 1px; background: var(--line-color); border-bottom: 1px solid var(--line-color); }
.masonry-item, .pf-card { background: #fff; position: relative; overflow: hidden; display: block; cursor: crosshair; }
.masonry-item.large, .pf-card.large { grid-column: span 2; grid-row: span 2; }
.masonry-item.wide, .pf-card.wide { grid-column: span 2; }
.pf-card.tall { grid-row: span 2; }

.masonry-item img, .pf-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform 0.8s ease, filter 0.8s ease; }
.masonry-item:hover img, .pf-card:hover img { filter: grayscale(0%); transform: scale(1.05); }

.pf-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; opacity: 0; transition: opacity 0.4s ease; }
.pf-card:hover .pf-overlay { opacity: 1; }
.pf-category { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 10px; transform: translateY(10px); transition: transform 0.4s ease; }
.pf-title { font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; transform: translateY(10px); transition: transform 0.4s ease 0.1s; }
.pf-card:hover .pf-category, .pf-card:hover .pf-title { transform: translateY(0); }
.pf-tag { position: absolute; top: 20px; left: 20px; background: var(--text-main); color: #fff; padding: 10px 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.load-more-wrap { padding: 60px 0; text-align: center; border-bottom: 1px solid var(--line-color); background: #fafafa; }

/* Single Portfolio (Case Study) */
.portfolio-hero-img { width: 100%; height: 65vh; border-bottom: 1px solid var(--line-color); overflow: hidden; position: relative; background: #eee; }
.portfolio-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.portfolio-meta-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-color); background: #fafafa; }
.pm-item { padding: 40px 5vw; border-right: 1px solid var(--line-color); }
.pm-item:last-child { border-right: none; }
.pm-label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 2px; margin-bottom: 10px; display: block; }
.pm-value { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-main); }

.portfolio-content-wrap { padding: 80px 5vw; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.pc-heading h2 { font-size: 1.8rem; font-weight: 800; text-transform: uppercase; line-height: 1.2; letter-spacing: -0.02em; position: sticky; top: 120px; }
.pc-text { font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); }
.pc-text p { margin-bottom: 30px; }
.pc-text p:first-of-type { font-size: 1.3rem; color: var(--text-main); font-weight: 400; line-height: 1.6; }
.pc-text strong { color: var(--text-main); font-weight: 700; }

.portfolio-inner-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-color); border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); }
.pig-item { background: #fff; aspect-ratio: 4/3; overflow: hidden; position: relative; }
.pig-item.full { grid-column: 1 / -1; aspect-ratio: 21/9; }
.pig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease, filter 0.5s ease; filter: grayscale(100%); }
.pig-item:hover img { transform: scale(1.03); filter: grayscale(0%); }

.portfolio-nav { display: flex; border-bottom: 1px solid var(--line-color); }
.p-nav-link { flex: 1; padding: 60px 5vw; border-right: 1px solid var(--line-color); display: flex; flex-direction: column; justify-content: center; transition: background 0.3s; }
.p-nav-link.next { text-align: right; border-right: none; }
.p-nav-link:hover { background: #fafafa; }
.p-nav-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 10px; }
.p-nav-title { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--text-main); transition: color 0.3s; }
.p-nav-link:hover .p-nav-title { color: var(--accent); }

/* ==========================================================================
   9. CUSTOMIZER BUILDER
   ========================================================================== */
.customizer-section { padding-top: 100px; border-bottom: 1px solid var(--line-color); }
.builder-header { padding: calc(var(--nav-height) + 40px) 5vw 40px; background: #fafafa; border-bottom: 1px solid var(--line-color); display: flex; justify-content: space-between; align-items: flex-end; }
.builder-header h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0; }
.builder-header h1 strong { font-weight: 800; display: block; }
.builder-meta { font-family: monospace; font-size: 12px; color: var(--text-muted); text-align: right; }

.builder-layout, .customizer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; border-bottom: 1px solid var(--line-color); flex-grow: 1; }
.builder-options-panel { border-right: 1px solid var(--line-color); background: #fff; }
.builder-menu { border-right: 1px solid var(--line-color); }

.builder-step { border-bottom: 1px solid var(--line-color); }
.step-header { padding: 30px 5vw; display: flex; align-items: center; gap: 20px; background: #fafafa; }
.step-num { font-family: monospace; font-size: 14px; font-weight: 800; color: var(--accent); letter-spacing: 2px; }
.step-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-main); }
.step-content { padding: 40px 5vw; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.item-card { border: 1px solid var(--line-color); padding: 20px; display: flex; flex-direction: column; gap: 15px; cursor: pointer; transition: all 0.3s; position: relative; }
.item-card:hover { border-color: var(--text-main); }
.item-card.active { border-color: var(--text-main); background: var(--text-main); color: #fff; }
.item-card.active .item-desc { color: rgba(255,255,255,0.7); }
.item-icon { width: 40px; height: 40px; background: var(--bg-color); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-color); transition: all 0.3s; }
.item-card.active .item-icon { background: #fff; color: var(--text-main); border-color: #fff; }
.item-icon svg { width: 20px; height: 20px; stroke-width: 1.5; stroke: currentColor; fill: none; }
.item-name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.item-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; transition: color 0.3s; }
.status-badge { position: absolute; top: 15px; right: 15px; font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; }

.builder-option { padding: 30px 5vw; border-bottom: 1px solid var(--line-color); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.3s; text-transform: uppercase; }
.builder-option:hover { background: #f9f9f9; }
.builder-option.active { background: var(--text-main); color: #fff; }
.builder-option .opt-title { font-size: clamp(10px, 2vw, 12px); font-weight: 800; letter-spacing: 1px; }
.builder-option .opt-type { font-size: 10px; font-family: monospace; }
.builder-option.active .opt-type { color: rgba(255,255,255,0.5); }

.builder-sidebar { display: flex; flex-direction: column; position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; background: #fafafa; }
.set-visual, .builder-preview { aspect-ratio: 4/3; border-bottom: 1px solid var(--line-color); background: #eee; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 40px; min-height: 400px;}
.set-visual img, .builder-preview img { width: 100%; height: 100%; object-fit: contain; transition: all 0.5s ease; }
.set-visual img { filter: grayscale(100%); opacity: 0.8; }
.set-visual:hover img { filter: grayscale(0%); opacity: 1; }
.grid-decor { position: absolute; inset: 0; background-image: linear-gradient(var(--line-color) 1px, transparent 1px), linear-gradient(90deg, var(--line-color) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.3; pointer-events: none; }

.set-summary { padding: 40px; border-bottom: 1px solid var(--line-color); background: #fff; flex-grow: 1; }
.summary-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; color: var(--text-muted); }
.summary-list { list-style: none; margin-bottom: 30px; }
.summary-list li { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; border-bottom: 1px dashed var(--line-color); padding-bottom: 10px; }
.summary-list li span { color: var(--text-muted); font-family: monospace; font-size: 11px; }

.set-inquiry { padding: 40px; background: #111; color: #fff; }
.set-inquiry h3 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; color: var(--accent); }
.set-inquiry .arch-input { border-bottom: 1px solid #333; color: #fff; }
.set-inquiry .arch-input::placeholder { color: #666; }

/* ==========================================================================
   10. O NAMA & KONTAKT 
   ========================================================================== */
.manifesto-section { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--line-color); }
.manifesto-title { padding: 80px 5vw; border-right: 1px solid var(--line-color); background: #fff; }
.manifesto-title h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; text-transform: uppercase; line-height: 1.2; position: sticky; top: 120px; }
.manifesto-title h2 span { color: var(--accent); }
.manifesto-text { padding: 80px 5vw; background: #fff; }
.manifesto-text p { font-size: 1.2rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 40px; }
.manifesto-text p.intro { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 200; color: var(--text-main); line-height: 1.4; margin-bottom: 50px; }
.manifesto-text p strong { font-weight: 700; color: var(--text-main); }

.production-visual { width: 100%; height: 60vh; border-bottom: 1px solid var(--line-color); overflow: hidden; position: relative; }
.production-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 1s ease, transform 1s ease; }
.production-visual:hover img { filter: grayscale(0%); transform: scale(1.02); }
.visual-caption { position: absolute; bottom: 30px; left: 5vw; background: #fff; padding: 10px 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }

.values-section { border-bottom: 1px solid var(--line-color); }
.values-grid { display: grid; grid-template-columns: 1fr 1fr; }
.value-card { padding: 80px 5vw; border-right: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); }
.value-card:nth-child(2n) { border-right: none; }
.value-card:nth-last-child(-n+2) { border-bottom: none; }
.v-num { font-family: monospace; font-size: 12px; font-weight: 800; color: var(--accent); margin-bottom: 30px; display: block; letter-spacing: 2px; }
.v-title { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; }
.v-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; }

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-color); }
.contact-info { padding: 80px 5vw; border-right: 1px solid var(--line-color); background: #fff; }
.ci-block { margin-bottom: 50px; }
.ci-block:last-child { margin-bottom: 0; }
.ci-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 15px; display: block; }
.ci-val { font-size: 1.2rem; font-weight: 700; color: var(--text-main); display: block; margin-bottom: 5px; transition: color 0.3s; }
a.ci-val:hover { color: var(--accent); }
.contact-form-wrap { padding: 80px 5vw; background: #fafafa; }
.contact-form-wrap h2 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 40px; letter-spacing: -0.02em; }
.map-section { width: 100%; height: 50vh; border-bottom: 1px solid var(--line-color); background: #eee; position: relative; overflow: hidden; }
.map-section iframe { width: 100%; height: 100%; border: none; filter: grayscale(100%) contrast(120%); transition: filter 0.5s ease; }
.map-section iframe:hover { filter: grayscale(0%) contrast(100%); }

/* ==========================================================================
   11. STATS & CTA
   ========================================================================== */
.stats-tech { background: #111; color: #fff; border-bottom: 1px solid #333; }
.stats-header { padding: 100px 5vw 60px; border-bottom: 1px solid #333; }
.stats-header h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 200; text-transform: uppercase; max-width: 900px; line-height: 1.3; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-block { padding: 40px 5vw; border-right: 1px solid #333; display: flex; flex-direction: column; gap: 15px; }
.stat-block:last-child { border-right: none; }
.stat-tech-val { font-family: monospace; font-size: 14px; color: var(--accent); letter-spacing: 2px; }
.stat-tech-lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff; }

.community-cta { padding: 100px 5vw; text-align: center; border-bottom: 1px solid var(--line-color); background: #fafafa; }
.community-cta h2 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 20px; }
.community-cta h2 span { color: var(--accent); }
.community-cta p { font-size: 1rem; color: var(--text-muted); margin-bottom: 40px; max-width: 600px; margin-inline: auto; }

.global-cta { padding: 100px 5vw; text-align: center; background: #111; color: #fff; border-bottom: 1px solid #333; }
.global-cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 40px; }
.global-cta h2 strong { font-weight: 800; color: var(--accent); display: block; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
footer { padding: 80px 5vw 40px; background: #fff; }

/* OVDJE JE POPRAVKA: Dodata 4. kolona u grid-template-columns */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 80px; }

.f-col h4 { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 30px; }
.f-col a, .f-col p { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1px; }
.f-col a:hover { color: var(--accent); }
.socials { display: flex; gap: 20px; margin-top: 30px; }
.socials a { color: var(--text-main); }
.socials a:hover { color: var(--accent); }
.socials svg { width: 18px; height: 18px; stroke-width: 1.5; stroke: currentColor; fill: none; }
.f-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--line-color); padding-top: 30px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
/* ==========================================================================
   13. GLOBAL MEDIA QUERIES (MOP-UP)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Usluge/Portfolio/Catalog Grids */
    .arch-grid, .customizer-grid, .builder-layout, .contact-layout { grid-template-columns: 1fr !important; }
    .arch-cell, .service-content, .manifesto-title, .contact-info, .builder-options-panel { border-right: none; border-bottom: 1px solid var(--line-color); }
    .arch-cell:last-child { border-bottom: none; }
    .service-row { grid-template-columns: 1fr !important; }
    .sr-visual { border-right: none; border-bottom: 1px solid var(--line-color); height: 40vh; }
    .service-row.reverse .sr-visual { order: 1; border-left: none; }
    .service-row.reverse .sr-content { order: 2; }
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .product-card:nth-child(2n) { border-right: none; }
    .product-card { border-bottom: 1px solid var(--line-color); }
    .portfolio-archive-grid, .portfolio-meta-bar { grid-template-columns: repeat(2, 1fr) !important; }
    .pf-card.large { grid-column: span 2; grid-row: span 2; }
    .pf-card.wide { grid-column: span 2; }
    .builder-sidebar { position: relative; height: auto; top: 0; border-top: 1px solid var(--line-color); }
    .manifesto-section, .values-grid { grid-template-columns: 1fr !important; }
    .value-card { border-right: none !important; border-bottom: 1px solid var(--line-color) !important; }
    .value-card:last-child { border-bottom: none !important; }
    .cta-bar { justify-content: center; }
}

@media (max-width: 768px) {
    /* Mobile tweaks */
    .hero-grid { grid-template-columns: 1fr !important; grid-template-rows: 1fr auto; }
    .hero-left { grid-column: 1 / 2; border-right: none; padding-bottom: 40px; }
    .hero-right-bottom { grid-column: 1 / 2; border-top: 1px solid rgba(255,255,255,0.2); padding: 40px 5vw; }
    .hero-bottom-left { display: none; }
    .masonry, .portfolio-archive-grid { grid-template-columns: 1fr !important; grid-auto-rows: 300px; }
    .masonry-item.large, .masonry-item.wide, .pf-card.large, .pf-card.wide, .pf-card.tall { grid-column: span 1; grid-row: span 1; }
    .pf-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); padding: 20px; }
    .pf-category, .pf-title { transform: translateY(0); }
    .catalog-layout { grid-template-columns: 1fr !important; }
    .catalog-sidebar { border-right: none; border-bottom: 1px solid var(--line-color); padding: 30px 5vw; }
    .catalog-grid, .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .product-card { border-right: 1px solid var(--line-color); }
    .product-card:nth-child(2n) { border-right: none; }
    .form-grid { grid-template-columns: 1fr !important; gap: 20px; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .stat-block { border-right: none; border-bottom: 1px solid #333; padding: 40px 5vw; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 40px; }
    .portfolio-nav { flex-direction: column; }
    .p-nav-link { border-right: none; border-bottom: 1px solid var(--line-color); text-align: left; }
    .p-nav-link.next { text-align: left; border-bottom: none; }
}
/* ==========================================================================
   POPRAVKE: KONTAKT FORMA I MAPA
   ========================================================================== */
.contact-form-wrap form { margin-top: 20px; }
.contact-form-wrap .arch-input { background: transparent !important; }

/* Filter za tamniju mapu koja se slaže sa crvenim akcentom */
.map-section iframe {
    filter: grayscale(100%) contrast(110%) brightness(95%);
    transition: filter 0.5s ease;
}
.map-section iframe:hover {
    filter: grayscale(30%) contrast(100%) brightness(100%);
}
/* ==========================================================================
   POPRAVKA: CUSTOMIZER MOBILE LAYOUT (PRAVILAN REDOSLED)
   ========================================================================== */
@media (max-width: 1024px) {
    .builder-layout, .customizer-grid { 
        display: flex !important; 
        flex-direction: column !important; 
    }
    
    /* UBIJAMO SIDEBAR KONTEJNER: Ovo nam dozvoljava da vadimo njegove elemente napolje */
    .builder-sidebar { 
        display: contents !important; 
    }
    
/* 1. SLIKA IDE PRVA NA VRH I OSTAJE ZAKUCANA (Premium Sticky Parallax) */
    .set-visual { 
        order: 1 !important; 
        position: sticky !important; /* Zakucava sliku */
        top: var(--nav-height) !important; /* Odmiče je tačno ispod headera */
        z-index: 50 !important; /* Gura je iznad svih ostalih opcija */
        height: 35vh !important; 
        min-height: 250px !important; 
        padding: 20px !important;
        border-bottom: 2px solid var(--text-main) !important;
        background: #fff !important; /* Puna pozadina da sakrije tekst koji podilazi */
        box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* Suptilna senka koja pojačava efekat prelaza */
    }
    
    /* 2. OPCIJE (DUGMIĆI) IDU ISPOD SLIKE */
    .builder-options-panel { 
        order: 2 !important; 
        border-right: none !important;
    }
    
    /* 3. SUMARNI PRIKAZ ISPOD OPCIJA */
    .set-summary { 
        order: 3 !important; 
    }

    /* 4. FORMA IDE NA SAMO DNO */
    .set-inquiry { 
        order: 4 !important; 
        background: #fafafa !important; 
        color: var(--text-main) !important; 
    }
    .set-inquiry .arch-input { 
        border-bottom-color: var(--line-color) !important; 
        color: var(--text-main) !important; 
    }

    /* Vizuelna doterivanja opcija za manje ekrane */
    .builder-header { padding: calc(var(--nav-height) + 20px) 5vw 20px !important; flex-direction: column; align-items: flex-start; gap: 15px;}
    .builder-header h1 { font-size: 1.8rem !important; }
    .builder-meta { text-align: left !important; }
    
/* Fix za prelamanje [ 01 ] i naslova */
    .step-header { 
        padding: 15px 5vw !important; 
        gap: 10px !important; 
        flex-wrap: nowrap !important; 
        align-items: flex-start !important; 
    }
    .step-num { 
        font-size: 12px !important; 
        letter-spacing: 0px !important; 
        white-space: nowrap !important; /* Ne dozvoljava prelamanje zagrada */
        flex-shrink: 0 !important; /* Ne dozvoljava smanjivanje broja */
        margin-top: 2px !important;
    }
    .step-title { 
        font-size: 12px !important; 
        line-height: 1.3 !important; 
        letter-spacing: 0.5px !important; 
    }
    .step-content { padding: 15px 5vw !important; grid-template-columns: 1fr !important; gap: 10px !important; }
    
    .item-card { padding: 12px 15px !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; }
    .item-icon { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; }
    .item-icon svg { width: 18px !important; height: 18px !important; }
    .item-name { font-size: 12px !important; }
    .item-desc { font-size: 10px !important; margin-top: 2px !important; line-height: 1.2 !important; }
    .status-badge { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; right: 15px !important; margin: 0 !important; }
    .item-card > div:last-child { padding-right: 50px !important; }
}
/* ==========================================================================
   POPRAVKE: PAGINACIJA ZA SEARCH I ARHIVE
   ========================================================================== */
.custom-pagination .nav-links { 
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; 
}
.custom-pagination .page-numbers { 
    padding: 10px 15px; border: 1px solid var(--line-color); 
    color: var(--text-muted); transition: all 0.3s ease; 
    background: #fff;
}
.custom-pagination .page-numbers.current, 
.custom-pagination .page-numbers:hover { 
    background: var(--text-main); color: #fff; border-color: var(--text-main); 
}
.custom-pagination .next, .custom-pagination .prev { border: none; background: transparent; color: var(--text-main); }
.custom-pagination .next:hover, .custom-pagination .prev:hover { background: transparent; color: var(--accent); }
/* ==========================================================================
   KONAČNI FIX: KONTROLA SIVE BOJE ZA FORMA NA CUSTOMIZERU (UVEK SIVA)
   ========================================================================== */
.set-inquiry {
    background: #fafafa !important; /* Puna svetlo siva pozadina */
    color: var(--text-main) !important; /* Tamni tekst */
}

/* Naslov unutar forme */
.set-inquiry h3 {
    color: var(--text-main) !important;
}

/* Polja za unos (Inputi) na sivoj pozadini */
.set-inquiry .arch-input {
    background: transparent !important;
    color: var(--text-main) !important; /* Tamni tekst dok kucaš */
    border-bottom-color: var(--line-color) !important; /* Suptilna linija ispod */
}

/* Placeholder tekst (Ime, prezime...) da bude čitljiv */
.set-inquiry .arch-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
}

/* Fix ako prebaci u fokus/kliknuto polje */
.set-inquiry .arch-input:focus {
    border-bottom-color: var(--text-main) !important;
}