/* =============================================================
   Početna ZetraERP (/) - prenesena prodajna stranica iz template_asp
   (ColorAdmin/wwwroot/landing). Sve je ograničeno na omotač .zl, pa
   portal, prijava i administracija zadržavaju cloud.css.
   Osnovna pravila koriste :where(.zl), da imaju istu specifičnost kao
   u izvoru (klase komponenti ih nadjačavaju).
   Svijetla tema, kao zaglavlje i podnožje javnog sajta (Fleet paritet).
   Izvorni rem su pretvoreni u px (cloud.css koristi korijen 14px).
   Fajl zl.css se generiše skriptom scripts/build-landing-css.py.
   ============================================================= */
.zl {
    --ui-bg: #f4f6f8;
    --ui-surface: #ffffff;
    --ui-soft: #eceff4;
    --ui-border: #dce0e8;
    --ui-border-strong: #c3cad6;
    --ui-text: #131821;
    --ui-muted: #586274;
    --ui-accent: #bd2433;
    --ui-accent-hover: #9d1b27;
    --ui-link: var(--ui-accent);
    --ui-link-hover: var(--ui-accent-hover);
    --ui-indicator: var(--ui-accent);
    --ui-tint: #fcf0f1;
    --ui-rail: #131821;
    --ui-rail-text: #e9edf3;
    --ui-rail-muted: #97a2b2;
    --ui-success: #18794e;
    --ui-shadow: 0 1px 2px rgb(19 24 33 / 5%), 0 10px 26px -14px rgb(19 24 33 / 12%);
    --ui-shadow-lift: 0 2px 4px rgb(19 24 33 / 6%), 0 20px 44px -18px rgb(19 24 33 / 20%);
    --ui-action-text: #ffffff;
    --secondary: var(--ui-accent);
    --r-card: 12px;
    --r-control: 8px;
    --ui-radius: var(--r-control);
    --measure: 64ch;
    --t-xs: clamp(12px, 11.68px + 0.1vw, 13.01px);
    --t-sm: clamp(14px, 13.6px + 0.12vw, 15.01px);
    --t-base: clamp(15.5px, 15.04px + 0.18vw, 17.01px);
    --t-lg: clamp(17.01px, 16px + 0.35vw, 20px);
    --t-xl: clamp(20px, 17.92px + 0.6vw, 26px);
    --t-2xl: clamp(26px, 21.6px + 1.3vw, 40px);
    --t-3xl: clamp(34px, 25.6px + 2.5vw, 58px);
    --step: clamp(48px, 28.8px + 5vw, 88px);
    --gutter: clamp(20px, 12px + 2vw, 32px);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --frame: color-mix(in srgb, var(--ui-text) 9%, transparent);
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
html:has(.zl) { scroll-behavior: smooth; scroll-padding-top: 110px; }
:where(.zl) a { color: var(--ui-link); text-decoration: none; }
:where(.zl) a:hover { color: var(--ui-link-hover); text-decoration: underline; }
:where(.zl) :is(h1, h2, h3, h4) { margin: 0 0 12px; color: var(--ui-text); font-weight: 600; line-height: 1.16; letter-spacing: -0.022em; overflow-wrap: break-word; text-wrap: balance; }
:where(.zl) h1 { font-size: var(--t-3xl); }
:where(.zl) h2 { font-size: var(--t-2xl); }
:where(.zl) h3 { font-size: var(--t-xl); }
:where(.zl) h4 { font-size: var(--t-base); }
:where(.zl) p { margin: 0 0 16px; color: inherit; text-wrap: pretty; }
:where(.zl) img { max-width: 100%; height: auto; }
:where(.zl) :is(a, button, summary):focus-visible { outline: 3px solid var(--ui-indicator); outline-offset: 3px; border-radius: 4px; }
/* 1304 = 1240px sadržaja + 2 x 32px, isto kao .container u zaglavlju javnog sajta. */
.zl .section-container, .zl .company-grid, .zl .data-usage-content, .zl .s-hero, .zl .s-facts-grid { width: min(100%, 1304px); margin-inline: auto; }
.zl .section-container, .zl .data-usage-content { padding-inline: var(--gutter); }
.zl .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9.6px; min-height: 44px; border: 1px solid var(--ui-border-strong); border-radius: var(--r-control); padding: 11.2px 20px; font-size: var(--t-sm); font-weight: 600; text-align: center; white-space: nowrap; line-height: 1.4; text-decoration: none; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.12s var(--ease); }
.zl .btn:hover { text-decoration: none; }
.zl .btn:active { transform: translateY(1px); }
.zl .btn-primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-action-text); }
.zl .btn-primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); color: var(--ui-action-text); }
.zl .btn-secondary { color: var(--ui-text); background: transparent; border-color: var(--ui-border-strong); }
.zl .btn-secondary:hover { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-text); }
.zl .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.zl .company-info, .zl .data-usage { padding-block: var(--step); }
.zl .company-info { background: var(--ui-surface); border-block: 1px solid var(--ui-border); }
.zl .data-card { max-width: 1000px; }
.zl .data-card h2 i { color: var(--ui-link); margin-right: 8px; }
.zl .data-list { padding: 0; margin: clamp(24px, 16px + 1.5vw, 36px) 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 6.4px + 1vw, 20px); }
.zl .data-list li { display: flex; align-items: flex-start; gap: 16px; padding: clamp(16px, 12.8px + 0.6vw, 21.6px); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--r-card); }
.zl .data-list .icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ui-link); background: var(--ui-tint); border-radius: var(--r-control); font-size: 16px; flex-shrink: 0; }
.zl .data-list h4 { font-size: var(--t-base); margin-bottom: 4.8px; }
.zl .data-list p { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }
.zl .transparency-note { padding: clamp(16px, 12.8px + 0.6vw, 24px); background: var(--ui-tint); border: 1px solid color-mix(in srgb, var(--ui-accent) 24%, transparent); border-radius: var(--r-card); }
.zl .transparency-note h4 { font-size: var(--t-base); }
.zl .transparency-note p { margin-bottom: 0; color: var(--ui-muted); }
.zl .transparency-note a { color: var(--ui-link); text-decoration: underline; text-underline-offset: 3px; }
.zl .company-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 16px + 4vw, 64px); padding-inline: var(--gutter); }
.zl .company-text p { color: var(--ui-muted); max-width: 58ch; }
.zl .company-details { padding: clamp(20px, 16px + 1vw, 28px); background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-card); }
.zl .company-details h3 { font-size: var(--t-lg); }
.zl .detail-item { display: flex; gap: 12px; align-items: flex-start; margin-top: 14.4px; padding-top: 14.4px; border-top: 1px solid var(--ui-border); font-size: var(--t-sm); }
.zl .detail-item i { color: var(--ui-link); flex: 0 0 20px; padding-top: 4px; }
.zl .detail-item p { margin: 0; }
@media (max-width: 767px) {
    .zl .section-container, .zl .data-usage-content, .zl .company-grid { padding-inline: 24px; }
    .zl .company-info, .zl .data-usage { padding-block: 32px; }
    .zl .company-grid { grid-template-columns: 1fr; gap: 24px; }
    .zl .data-list { grid-template-columns: 1fr; }
}

/* ---------- Dodaci za cloud ponudu (nisu u template_asp) ---------- */
/* Oznaka gdje je funkcija dostupna: paket, dodatak ili po ponudi (Components/Landing/ModuleTag.razor). */
.zl .zl-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, transparent); border-radius: 999px; background: var(--ui-tint); color: var(--ui-link); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0; white-space: nowrap; vertical-align: middle; text-decoration: none; }
.zl a.zl-tag:hover { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-action-text); text-decoration: none; }
.zl .zl-tag-sm { min-height: 20px; padding: 1px 7px; font-size: 11px; }
.zl .zl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.zl .fx-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.zl .fx-group-head .fx-group-title { margin-bottom: 0; }
.zl .fx-item .zl-tag { margin-top: 4px; align-self: flex-start; }
.zl .zl-avail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; color: var(--ui-muted); font-size: var(--t-sm); }
.zl .zl-flow-tag { margin: 12px 0 0; }
.zl .zl-hero-notes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--ui-muted); font-size: var(--t-sm); }
.zl .zl-hero-notes i { color: var(--ui-link); margin-right: 6px; }
.zl .zl-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 8px; padding: 0; list-style: none; }
.zl .zl-start li { display: flex; gap: 14px; padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--r-card); }
.zl .zl-start-num { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: var(--r-control); background: var(--ui-accent); color: var(--ui-action-text); font-weight: 700; }
.zl .zl-start h3 { font-size: var(--t-base); margin-bottom: 6px; }
.zl .zl-start p { margin: 0 0 8px; color: var(--ui-muted); font-size: var(--t-sm); }
.zl .zl-start a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; font-size: var(--t-sm); }
.zl .zl-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.zl .zl-btn-on-dark { color: #ffffff; background: transparent; border-color: rgb(255 255 255 / 45%); }
.zl .zl-btn-on-dark:hover { color: #ffffff; background: rgb(255 255 255 / 10%); border-color: #ffffff; }
@media (max-width: 767px) {
    .zl .zl-start { grid-template-columns: minmax(0, 1fr); }
    .zl .zl-cta-actions .btn { flex: 1 1 100%; }
}

/* =============================================================
   Javne podstranice (/moduli, /moduli/{key}, /paketi, /faq, /kontakt, /demo, /terms, /privacy)
   ============================================================= */
.zl .zl-page-hero { padding-block: 40px 56px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
.zl .zl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--ui-muted); font-size: var(--t-xs); }
.zl .zl-crumbs a { color: var(--ui-muted); }
.zl .zl-crumbs a:hover { color: var(--ui-link); }
.zl .zl-crumbs i { font-size: 9px; opacity: .6; }
.zl .zl-crumbs [aria-current] { color: var(--ui-text); font-weight: 600; }
.zl .zl-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 56px; align-items: end; }
.zl .zl-page-hero-grid:has(.zl-page-hero-aside) { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
.zl .zl-page-hero h1 { font-size: clamp(34px, 25.6px + 2.6vw, 52px); line-height: 1.08; max-width: 20ch; margin-bottom: 16px; }
.zl .zl-page-hero .s-lead { max-width: 62ch; }
.zl .zl-page-hero .hero-buttons { margin-top: 26px; }
.zl .zl-hero-tags { margin: 18px 0 0; align-items: center; }
.zl .zl-audience { display: inline-flex; align-items: center; gap: 7px; color: var(--ui-muted); font-size: var(--t-sm); }
.zl .zl-audience i { color: var(--ui-link); }
.zl .zl-loading { padding: 48px 0; color: var(--ui-muted); text-align: center; }
.zl .zl-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; }
.zl .zl-tag-plain { background: var(--ui-soft); border-color: var(--ui-border); color: var(--ui-text); }

/* Pretraga modula */
.zl .zl-search { position: relative; display: block; max-width: 460px; margin-top: 26px; }
.zl .zl-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); }
.zl .zl-search input { width: 100%; min-height: 48px; padding: 10px 14px 10px 42px; border: 1px solid var(--ui-border-strong); border-radius: var(--r-control); background: var(--ui-bg); color: var(--ui-text); font: inherit; font-size: var(--t-base); }
.zl .zl-search input:focus { outline: 3px solid color-mix(in srgb, var(--ui-accent) 35%, transparent); outline-offset: 1px; border-color: var(--ui-accent); }

/* Lista modula po paketima */
.zl .zl-modules { padding-block: 56px var(--step); }
.zl .zl-mod-group { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr); gap: 20px 48px; padding-block: 32px; border-top: 1px solid var(--ui-border); }
.zl .zl-mod-group:first-child { border-top: 0; padding-top: 0; }
.zl .zl-mod-group-head h2 { font-size: var(--t-xl); margin-bottom: 8px; }
.zl .zl-mod-group-head p { color: var(--ui-muted); font-size: var(--t-sm); margin: 0; max-width: 34ch; }
.zl .zl-mod-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zl .zl-mod-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; height: 100%; padding: 16px 18px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--r-card); color: var(--ui-text); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.zl .zl-mod-row:hover { color: var(--ui-text); text-decoration: none; border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow); transform: translateY(-1px); }
.zl .zl-mod-icon, .zl .zl-addon-icon, .zl .zl-price-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); background: var(--ui-tint); color: var(--ui-link); font-size: 18px; }
.zl .zl-mod-copy { display: grid; gap: 3px; min-width: 0; }
.zl .zl-mod-copy strong { font-size: var(--t-base); }
.zl .zl-mod-copy span { color: var(--ui-muted); font-size: var(--t-sm); line-height: 1.5; }
.zl .zl-mod-go { color: var(--ui-muted); transition: transform .2s var(--ease), color .2s var(--ease); }
.zl .zl-mod-row:hover .zl-mod-go { color: var(--ui-link); transform: translateX(3px); }
.zl .zl-empty { padding: 48px 24px; text-align: center; border: 1px dashed var(--ui-border-strong); border-radius: var(--r-card); background: var(--ui-surface); color: var(--ui-muted); }
.zl .zl-empty i { font-size: 28px; margin-bottom: 12px; }
.zl .zl-empty h2 { font-size: var(--t-lg); }

/* Detalji modula */
.zl .zl-price-card { padding: 24px; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-card); }
.zl .zl-price-card .zl-price-icon { margin-bottom: 16px; }
.zl .zl-price { display: block; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; }
.zl .zl-price small { font-size: var(--t-sm); font-weight: 500; color: var(--ui-muted); letter-spacing: 0; }
.zl .zl-price-card p { margin: 10px 0 14px; color: var(--ui-muted); font-size: var(--t-sm); }
.zl .zl-price-card .zl-tags { margin: 0; }
.zl .zl-md-shots { padding-block: 48px 0; }
.zl .zl-md-shots-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.zl .zl-md-shots-one { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.zl .zl-md-shots figure { margin: 0; }
.zl .zl-md-shots figcaption { margin-top: 10px; color: var(--ui-muted); font-size: var(--t-xs); }
.zl .zl-md-shots figcaption i { color: var(--ui-link); margin-right: 4px; }
.zl .zl-md-body { padding-block: 56px var(--step); }
.zl .zl-md-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px 56px; align-items: start; }
.zl .zl-check-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.zl .zl-check-grid li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ui-border); font-weight: 500; }
.zl .zl-check-grid i { color: var(--ui-link); margin-top: 5px; }
.zl .zl-md-h3 { font-size: var(--t-xl); margin: 44px 0 18px; }
.zl .zl-md-groups { display: grid; gap: 24px; }
.zl .zl-md-group h4 { color: var(--ui-muted); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.zl .zl-md-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zl .zl-md-group li { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--r-control); }
.zl .zl-md-group li span { color: var(--ui-muted); font-size: var(--t-sm); line-height: 1.55; }
.zl .zl-md-side { display: grid; gap: 16px; position: sticky; top: 120px; }
.zl .zl-md-card { padding: 22px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--r-card); }
.zl .zl-md-card h3 { font-size: var(--t-base); margin-bottom: 12px; }
.zl .zl-md-card h3 i { color: var(--ui-link); margin-right: 6px; }
.zl .zl-md-card p { color: var(--ui-muted); font-size: var(--t-sm); }
.zl .zl-md-card .btn { margin-top: 4px; }
.zl .zl-md-note { background: var(--ui-tint); border-color: color-mix(in srgb, var(--ui-accent) 22%, transparent); }
.zl .zl-md-note p { margin: 0; }
.zl .zl-flow-list { list-style: none; counter-reset: zl-flow; margin: 0; padding: 0; display: grid; }
.zl .zl-flow-list li { counter-increment: zl-flow; position: relative; display: flex; gap: 12px; align-items: center; padding: 8px 0; font-size: var(--t-sm); font-weight: 500; }
.zl .zl-flow-list li::before { content: counter(zl-flow); display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--ui-accent); color: var(--ui-action-text); font-size: 12px; font-weight: 700; }
.zl .zl-flow-list li + li::after { content: ""; position: absolute; left: 12px; top: -8px; height: 16px; border-left: 2px solid var(--ui-border-strong); }
.zl .zl-icon-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; font-size: var(--t-sm); }
.zl .zl-icon-list li { display: flex; gap: 10px; align-items: baseline; }
.zl .zl-icon-list i { color: var(--ui-link); width: 16px; text-align: center; }

/* FAQ stranica */
.zl .zl-faq-page { padding-block: 56px var(--step); }
.zl .zl-faq-side { display: grid; gap: 16px; position: sticky; top: 120px; }
.zl .zl-faq-nav { display: grid; gap: 4px; }
.zl .zl-faq-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-control); color: var(--ui-text); font-weight: 600; }
.zl .zl-faq-nav a:hover { background: var(--ui-surface); text-decoration: none; }
.zl .zl-faq-nav span { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--ui-soft); color: var(--ui-muted); font-size: 12px; text-align: center; }
.zl .zl-faq-groups { display: grid; gap: 40px; }
.zl .zl-faq-group { scroll-margin-top: 120px; }
.zl .zl-faq-group h2 { font-size: var(--t-xl); margin-bottom: 8px; }

/* Kontakt */
.zl .zl-contact { padding-block: 56px var(--step); }
.zl .zl-contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 32px 48px; align-items: start; }
.zl .zl-form-card { padding: clamp(22px, 16px + 1.5vw, 36px); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--r-card); box-shadow: var(--ui-shadow); }
.zl .zl-form-card h2 { font-size: var(--t-xl); margin-bottom: 6px; }
.zl .zl-form-lead { color: var(--ui-muted); margin-bottom: 24px; }
.zl .zl-contact-side { display: grid; gap: 16px; }
.zl .zl-submit { margin-top: 24px; }

/* Forme i stanja iz cloud.css, usklađeni sa tokenima početne */
.zl .field { gap: 7px; color: var(--ui-text); font-size: var(--t-sm); font-weight: 600; }
.zl .field small { font-size: var(--t-xs); }
.zl .field :is(input, select, textarea) { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--ui-border-strong); border-radius: var(--r-control); background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: var(--t-base); font-weight: 400; }
.zl .field textarea { min-height: 130px; resize: vertical; }
.zl .field :is(input, select, textarea):focus { outline: 3px solid color-mix(in srgb, var(--ui-accent) 30%, transparent); outline-offset: 1px; border-color: var(--ui-accent); }
.zl .check-field { color: var(--ui-muted); font-size: var(--t-sm); font-weight: 400; }
.zl .check-field.field input { width: 16px; min-height: 0; height: 16px; padding: 0; }
.zl .form-grid { gap: 18px; }
.zl .form-note { font-size: var(--t-xs); }
.zl .callout { margin-top: 18px; padding: 16px 18px; border-radius: 0 var(--r-control) var(--r-control) 0; font-size: var(--t-sm); }
.zl .validation-message, .zl .validation-errors { color: var(--ui-link); font-size: var(--t-xs); font-weight: 500; }
.zl .validation-errors { margin: 0 0 16px; padding-left: 18px; }

/* Pravni dokumenti */
.zl .zl-legal { padding-block: 48px var(--step); }
.zl .zl-legal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px 64px; align-items: start; }
.zl .zl-legal-body { max-width: 760px; }
.zl .zl-legal-updated { padding-bottom: 18px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: var(--t-sm); }
.zl .zl-legal-body h2 { font-size: var(--t-lg); margin: 34px 0 10px; }
.zl .zl-legal-body p { color: var(--ui-text); line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
.zl .zl-legal-side { display: grid; gap: 16px; position: sticky; top: 120px; }
.zl .zl-legal-nav { display: grid; gap: 4px; padding: 10px; }
.zl .zl-legal-nav a { padding: 10px 12px; border-radius: var(--r-control); color: var(--ui-text); font-weight: 600; }
.zl .zl-legal-nav a.active { background: var(--ui-tint); color: var(--ui-link); }

/* Paketi: komponente iz cloud.css (PlanCards, dodaci, kalkulator, tabela) u stilu početne */
.zl .zl-pk-section { padding-block: 64px; }
.zl .zl-pk-surface { background: var(--ui-surface); border-block: 1px solid var(--ui-border); }
.zl .zl-pk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 32px; margin-bottom: 36px; }
.zl .zl-pk-head .s-title { margin-bottom: 8px; }
.zl .billing-toggle { padding: 4px; border-color: var(--ui-border); border-radius: var(--r-control); background: var(--ui-soft); }
.zl .billing-toggle button { min-height: 40px; padding: 8px 18px; font-size: var(--t-sm); color: var(--ui-muted); border-radius: 6px; }
.zl .billing-toggle button.active { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow); }
.zl .billing-toggle small { font-size: 11px; color: var(--ui-success); font-weight: 700; }
.zl .plans-grid { gap: 18px; }
.zl .plan-card { padding: 28px 24px; border-color: var(--ui-border); border-radius: var(--r-card); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.zl .plan-card.featured { padding: 27px 23px; border-color: var(--ui-accent); box-shadow: var(--ui-shadow-lift); }
.zl .plan-ribbon { left: 22px; border-radius: 999px; padding: 4px 12px; font-size: 11px; letter-spacing: .04em; }
.zl .plan-card h3 { font-size: var(--t-xl); }
.zl .plan-description { color: var(--ui-muted); font-size: var(--t-sm); min-height: 64px; }
.zl .plan-price { font-size: 40px; letter-spacing: -0.03em; }
.zl .plan-period { font-size: var(--t-xs); }
.zl .plan-card .button { min-height: 44px; margin-top: 22px; border-radius: var(--r-control); font-size: var(--t-sm); }
.zl .plan-card .button.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-action-text); }
.zl .plan-features { font-size: var(--t-sm); border-color: var(--ui-border); }
.zl .plan-features .icon { color: var(--ui-link); }
.zl .plan-footnote { font-size: var(--t-xs); margin-top: 24px; }
.zl .addon-grid { gap: 14px; margin-top: 28px; }
.zl .addon-card { padding: 20px; border-color: var(--ui-border); border-radius: var(--r-card); background: var(--ui-bg); gap: 16px; }
.zl .addon-card h3 { font-size: var(--t-base); margin-bottom: 4px; }
.zl .addon-card h3 a { color: var(--ui-text); }
.zl .addon-card h3 a:hover { color: var(--ui-link); }
.zl .addon-card p { color: var(--ui-muted); font-size: var(--t-sm); margin: 0; }
.zl .addon-card strong { font-size: var(--t-base); margin-top: 10px; }
.zl .zl-addon-icon { flex: 0 0 44px; }
.zl .calculator { padding: clamp(22px, 16px + 1.5vw, 36px); background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--r-card); box-shadow: var(--ui-shadow); }
.zl .calculator .s-title { font-size: var(--t-xl); }
.zl .calculator .check-field input { width: 16px; height: 16px; }
.zl .quote-summary { border-color: var(--ui-border); }
.zl .quote-row { font-size: var(--t-sm); }
.zl .quote-total { font-size: var(--t-xl); border-color: var(--ui-border); }
.zl .zl-full { width: 100%; margin-top: 14px; }
.zl .comparison-wrap { position: relative; margin-top: 28px; border-color: var(--ui-border); border-radius: var(--r-card); background: var(--ui-surface); }
.zl .data-table { font-size: var(--t-sm); }
.zl .data-table th { background: var(--ui-soft); color: var(--ui-muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.zl .data-table td { border-color: var(--ui-border); }
.zl .data-table td a { color: var(--ui-text); font-weight: 600; }
.zl .data-table td a:hover { color: var(--ui-link); }
.zl .data-table tbody tr:hover td { background: var(--ui-bg); }
.zl .zl-yes { color: var(--ui-success); }

@media (max-width: 991px) {
    .zl .zl-page-hero-grid:has(.zl-page-hero-aside), .zl .zl-md-grid, .zl .zl-contact-grid, .zl .zl-legal-grid, .zl .zl-md-shots-grid, .zl .zl-mod-group { grid-template-columns: minmax(0, 1fr); }
    .zl .zl-md-side, .zl .zl-faq-side, .zl .zl-legal-side { position: static; }
}
@media (max-width: 767px) {
    .zl .zl-page-hero { padding-block: 28px 40px; }
    .zl .zl-mod-list, .zl .zl-check-grid, .zl .zl-md-group ul { grid-template-columns: minmax(0, 1fr); }
    .zl .zl-pk-section { padding-block: 44px; }
    .zl .zl-pk-head { align-items: start; }
    .zl .zl-search input, .zl .field :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .zl .zl-mod-row, .zl .zl-mod-go { transition: none; }
}


/* ===== landing-sales.css ===== */
/* =============================================================
   Prodajna landing stranica (/Landing/Index).
   Nadograđuje public-theme.css: isti tokeni (--ui-*), isti radius
   sistem (paneli 12px, kontrole 8px), jedan akcenat (Zetra crvena),
   svijetla i tamna tema preko .dark-mode na <html>.
   Vizuali su pravi snimci aplikacije (demo podaci), bez lažnih UI blokova.
   ============================================================= */

.zl { --frame: color-mix(in srgb, var(--ui-text) 9%, transparent); }

.s-title { font-size: var(--t-2xl); max-width: 26ch; margin-bottom: 12px; }
.s-lead { color: var(--ui-muted); font-size: var(--t-lg); max-width: 60ch; margin-bottom: 0; }

/* Okvir za snimke ekrana: tanka traka preglednika iznad slike */
.s-browser {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-card);
    box-shadow: var(--ui-shadow-lift);
}
.s-browser::before {
    content: "";
    display: block;
    height: 26px;
    background:
        radial-gradient(circle at 16px 13px, var(--ui-border-strong) 4px, transparent 4.5px),
        radial-gradient(circle at 30px 13px, var(--ui-border-strong) 4px, transparent 4.5px),
        radial-gradient(circle at 44px 13px, var(--ui-border-strong) 4px, transparent 4.5px),
        var(--ui-soft);
    border-bottom: 1px solid var(--ui-border);
}
.s-browser img { display: block; width: 100%; height: auto; }

.s-phone {
    margin: 0;
    overflow: hidden;
    background: var(--ui-surface);
    border: 6px solid var(--ui-rail);
    border-radius: 28px;
    box-shadow: var(--ui-shadow-lift);
}
.s-phone img { display: block; width: 100%; height: auto; }

/* Svijetli/tamni snimak prati temu stranice */
.shot-dark { display: none !important; }
html.dark-mode .shot-light, html[data-bs-theme="dark"] .shot-light { display: none !important; }
html.dark-mode .shot-dark, html[data-bs-theme="dark"] .shot-dark { display: block !important; }

/* ---------- Hero ---------- */
.s-hero {
    width: min(100%, 1320px);
    margin-inline: auto;
    padding: clamp(32px, 16px + 3vw, 64px) var(--gutter) clamp(48px, 32px + 3vw, 80px);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    gap: clamp(32px, 16px + 3vw, 64px);
    align-items: center;
}
.s-hero-copy h1 { font-size: clamp(33.6px, 22.4px + 2.6vw, 54.4px); line-height: 1.08; max-width: 16ch; margin-bottom: 17.6px; }
.s-hero-copy h1 span { color: var(--ui-link); }
.s-hero-copy > p { color: var(--ui-muted); font-size: var(--t-lg); max-width: 44ch; margin-bottom: 0; }
.s-hero-copy .hero-buttons { margin-top: 28px; }

.s-hero-visual { position: relative; padding-bottom: 40px; }
.s-hero-visual .s-browser { transform: perspective(1800px) rotateY(-4deg); transform-origin: left center; }
.s-phone-hero {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: clamp(120px, 24%, 190px);
    transform: rotate(3deg);
}

@media (prefers-reduced-motion: no-preference) {
    .s-hero-copy, .s-hero-visual { animation: s-rise 0.8s var(--ease) both; }
    .s-hero-visual { animation-delay: 0.12s; }
    .s-phone-hero { animation: s-rise-phone 0.9s var(--ease) 0.35s both; }
}
@keyframes s-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes s-rise-phone { from { opacity: 0; transform: translateY(28px) rotate(3deg); } to { opacity: 1; transform: rotate(3deg); } }

/* ---------- Činjenice ---------- */
.s-facts { background: var(--ui-rail); color: var(--ui-rail-text); }
.s-facts-grid {
    width: min(100%, 1248px);
    margin: 0 auto;
    padding: clamp(28px, 16px + 2vw, 44px) var(--gutter);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 40px;
}
.s-facts-grid div { margin: 0; }
.s-facts-grid dt { font-size: clamp(32px, 24px + 1.8vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #ffffff; }
.s-facts-grid dd { margin: 8px 0 0; color: var(--ui-rail-muted); font-size: var(--t-sm); max-width: 24ch; }

/* ---------- Tok rada (tabovi sa snimkom) ---------- */
.s-flow { padding-block: var(--step); }
.s-flow-grid {
    margin-top: clamp(28px, 16px + 2vw, 44px);
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.6fr);
    gap: clamp(24px, 16px + 2vw, 48px);
    align-items: start;
}
.s-flow-steps { display: grid; gap: 5.6px; }
.s-flow-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 2.4px 12px;
    text-align: left;
    padding: 13.6px 16px;
    color: var(--ui-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.s-flow-step i { grid-row: 1 / 3; align-self: start; margin-top: 3.2px; color: var(--ui-muted); font-size: 16.8px; text-align: center; }
.s-flow-step-title { font-weight: 600; }
.s-flow-step-text { grid-column: 2; color: var(--ui-muted); font-size: var(--t-sm); line-height: 1.5; display: none; }
.s-flow-step:hover { background: var(--ui-soft); }
.s-flow-step[aria-selected="true"] { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow); }
.s-flow-step[aria-selected="true"] i { color: var(--ui-link); }
.s-flow-step[aria-selected="true"] .s-flow-step-text { display: block; }
.s-flow-panel[hidden] { display: none; }
.s-flow-caption { display: none; margin: 14.4px 0 0; color: var(--ui-muted); font-size: var(--t-sm); }
@media (prefers-reduced-motion: no-preference) {
    .s-flow-panel:not([hidden]) { animation: s-fade 0.35s var(--ease); }
}
@keyframes s-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Mobilno ---------- */
.s-mobile { padding-block: var(--step); }
.s-mobile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 16px + 4vw, 80px); align-items: center; }
.s-mobile-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 20px; justify-content: center; }
.s-phone-offset { margin-top: 48px; }
.s-pairs { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.s-pairs div { padding-top: 14.4px; border-top: 2px solid var(--ui-accent); }
.s-pairs dt { font-weight: 600; margin-bottom: 4.8px; }
.s-pairs dd { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }

/* ---------- Priručnik ---------- */
.s-manual { padding-block: var(--step) 0; overflow: hidden; background: var(--ui-surface); border-top: 1px solid var(--ui-border); }
.s-manual-copy { max-width: 62ch; }
.s-manual-copy .fa-circle-question { color: var(--ui-link); }
.s-manual-shot { margin-top: clamp(28px, 16px + 2vw, 44px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; max-height: 520px; }

/* ---------- Završni poziv ---------- */
.s-cta { padding-block: var(--step); }
.s-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 32px;
    align-items: center;
    padding: clamp(24px, 16px + 2vw, 40px);
    background: var(--ui-rail);
    border-radius: var(--r-card);
}
.s-cta-inner h2 { color: #ffffff; font-size: var(--t-xl); margin-bottom: 6.4px; }
.s-cta-inner p { color: var(--ui-rail-muted); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
}

@media (max-width: 991px) {
    .s-hero { grid-template-columns: minmax(0, 1fr); }
    .s-hero-copy h1 { max-width: 20ch; }
    .s-hero-visual .s-browser { transform: none; }
    .s-flow-grid { grid-template-columns: minmax(0, 1fr); }
    .s-flow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5.6px; }
    .s-flow-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 11.2px 6.4px; }
    .s-flow-step i { grid-row: auto; margin: 0 0 3.2px; }
    .s-flow-step-title { font-size: var(--t-sm); }
    .s-flow-step[aria-selected="true"] .s-flow-step-text { display: none; }
    .s-flow-caption { display: block; }
    .s-mobile-grid { grid-template-columns: minmax(0, 1fr); }
    .s-mobile-phones { order: 2; }
    .s-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .s-hero { padding-inline: 16px; }
    .s-phone-hero { width: 32%; right: 0; }
    .s-pairs { grid-template-columns: minmax(0, 1fr); }
    .s-mobile-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-phone { border-width: 4px; border-radius: 20px; }
    .s-flow-step-title { font-size: var(--t-xs); }
    .s-cta-inner { grid-template-columns: minmax(0, 1fr); }
    .s-cta-inner .btn { justify-self: start; }
    .s-manual-shot { max-height: 320px; }
}

@media (max-width: 480px) {
    .s-flow-steps { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
    .s-facts-grid { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .s-hero-copy, .s-hero-visual, .s-phone-hero, .s-flow-panel { animation: none !important; }
}

/* Handheld controls keep readable names; tab strips provide their own scroll. */
@media (max-width: 768px) {
    .zl { --t-base: 16px; --t-sm: 16px; --t-xs: 14px; }
    .zl .zk-tab-name,
    .zl .s-flow-step-title { font-size: 16px; }
    .zl .zk-tab-name { overflow-wrap: anywhere; }
    .zl .s-flow-steps { grid-template-columns: repeat(5, minmax(92px, 1fr)); overflow-x: auto; }
}


/* ===== sections/cijene.css ===== */
/* =============================================================
   Sekcija "Kako se formira cijena" (#cijene), partial _Cijene.cshtml.
   Prefiks cj-. Samo tokeni iz public-theme.css, radi i u tamnoj temi.
   Raspored: lijevo vertikalni niz koraka (brojevi su samo redoslijed),
   desno primjer iz priručnika i snimak akcije cjenovnika.
   ============================================================= */

.cj {
    padding-block: var(--step);
    background: var(--ui-surface);
    border-block: 1px solid var(--ui-border);
}

.cj-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 16px + 3.5vw, 72px);
    align-items: start;
    margin-top: clamp(28px, 16px + 2.5vw, 48px);
}

/* ---------- Niz koraka ---------- */
.cj-steps { margin: 0; padding: 0; list-style: none; counter-reset: cj-step; }
.cj-step {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 25.6px;
    counter-increment: cj-step;
}
.cj-step::before {
    content: counter(cj-step);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--ui-muted);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--r-control);
    font-size: var(--t-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cj-step::after {
    content: "";
    position: absolute;
    left: calc(18px - 0.5px);
    top: 41.6px;
    bottom: 5.6px;
    width: 1px;
    background: var(--ui-border);
}
.cj-step:last-child { padding-bottom: 0; }
.cj-step:last-child::after { display: none; }
.cj-step h3 { margin: 5.6px 0 5.6px; font-size: var(--t-lg); }
.cj-step p { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); line-height: 1.6; }

.cj-step-key::before { color: var(--ui-action-text); background: var(--ui-accent); border-color: var(--ui-accent); }
.cj-badge {
    display: inline-block;
    margin-left: 6.4px;
    padding: 2.4px 8px;
    color: var(--ui-link);
    background: var(--ui-tint);
    border-radius: var(--r-control);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: middle;
}

/* ---------- Primjer ---------- */
.cj-side { display: grid; gap: clamp(24px, 16px + 1.5vw, 36px); min-width: 0; }
.cj-example {
    padding: clamp(20px, 16px + 1vw, 28px);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-card);
}
.cj-example h3 { display: flex; align-items: baseline; gap: 9.6px; font-size: var(--t-lg); }
.cj-example h3 i { color: var(--ui-link); font-size: 0.95em; }
.cj-setup { color: var(--ui-muted); font-size: var(--t-sm); line-height: 1.6; margin-bottom: 20px; }
.cj-setup strong { color: var(--ui-text); font-weight: 600; }

.cj-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.45; }
.cj-table th, .cj-table td { padding: 10.4px 9.6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.cj-table thead th { color: var(--ui-muted); font-size: var(--t-xs); font-weight: 600; border-bottom-color: var(--ui-border-strong); }
.cj-table tbody th { font-weight: 600; }
.cj-table tbody tr:last-child > * { border-bottom: 0; }
.cj-table th:first-child, .cj-table td:first-child { padding-left: 0; }
.cj-table th:last-child, .cj-table td:last-child { padding-right: 0; }
.cj-table .cj-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cj-table .cj-final { color: var(--ui-text); font-weight: 700; }

.cj-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cj-note {
    display: flex;
    gap: 9.6px;
    margin: 20px 0 0;
    padding-top: 16px;
    color: var(--ui-muted);
    border-top: 1px solid var(--ui-border);
    font-size: var(--t-sm);
    line-height: 1.55;
}
.cj-note i { margin-top: 4px; color: var(--ui-link); }

/* ---------- Snimak ---------- */
.cj-shots { margin-top: clamp(28px, 16px + 2vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 12px + 1vw, 28px); }
.cj-shot { margin: 0; }
.cj-shot figcaption { margin-top: 13.6px; color: var(--ui-muted); font-size: var(--t-xs); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .cj-grid { grid-template-columns: minmax(0, 1fr); }
    .cj-shots { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .cj-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cj-table, .cj-table tbody, .cj-table tr, .cj-table th, .cj-table td { display: block; }
    .cj-table tr { padding: 13.6px 0; border-bottom: 1px solid var(--ui-border); }
    .cj-table tbody tr:last-child { border-bottom: 0; }
    .cj-table th, .cj-table td,
    .cj-table th:first-child, .cj-table td:first-child,
    .cj-table th:last-child, .cj-table td:last-child { padding: 3.2px 0; border-bottom: 0; }
    .cj-table tbody th { margin-bottom: 4.8px; }
    .cj-table td {
        display: grid;
        grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
        gap: 12px;
    }
    .cj-table td::before { content: attr(data-label); color: var(--ui-muted); font-size: var(--t-xs); font-weight: 600; }
    .cj-table .cj-num { text-align: left; white-space: normal; }
}
@media (max-width: 480px) {
    .cj-step { grid-template-columns: 32px minmax(0, 1fr); gap: 12.8px; }
    .cj-step::before { width: 32px; height: 32px; }
    .cj-step::after { left: calc(16px - 0.5px); top: 37.6px; }
    .cj-badge { display: table; margin: 5.6px 0 0; }
}


/* ===== sections/funkcije.css ===== */
/* =============================================================
   Prodajna stranica: "Funkcije po područjima" (#o-aplikaciji).
   Partial: Views/Landing/Partials/_Funkcije.cshtml. JS: funkcije.js.
   Prefiks klasa: fx-. Samo tokeni iz public-theme.css (svijetla i
   tamna tema), radius 12px paneli i 8px kontrole, jedan akcenat.
   ============================================================= */

.fx {
    padding-block: var(--step);
    background: var(--ui-surface);
    border-block: 1px solid var(--ui-border);
}

.fx-head { max-width: 64ch; }
.fx-eyebrow {
    margin: 0 0 14.4px;
    color: var(--ui-muted);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ---------- Traka tabova (horizontalna, skrolabilna na uskim ekranima) ---------- */
.fx-tabs-wrap {
    position: relative;
    margin-top: clamp(28px, 16px + 2vw, 40px);
    border-bottom: 1px solid var(--ui-border);
}
.fx-tabs {
    position: relative; /* offsetParent za računanje pozicije taba u JS */
    display: flex;
    gap: 2.4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.fx-tabs::-webkit-scrollbar { display: none; }

.fx-tab {
    position: relative;
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 11.2px 13.6px;
    color: var(--ui-muted);
    background: transparent;
    border: 0;
    border-radius: var(--r-control) var(--r-control) 0 0;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.fx-tab i { font-size: 0.95em; color: var(--ui-muted); transition: color 0.2s var(--ease); }
.fx-tab::after {
    content: "";
    position: absolute;
    left: 9.6px;
    right: 9.6px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ui-accent);
    transform: scaleX(0);
    transition: transform 0.25s var(--ease);
}
.fx-tab:hover { color: var(--ui-text); background: var(--ui-soft); }
.fx-tab[aria-selected="true"] { color: var(--ui-text); }
.fx-tab[aria-selected="true"] i { color: var(--ui-link); }
.fx-tab[aria-selected="true"]::after { transform: scaleX(1); }
/* Fokus unutar trake koja reže overflow: obrub ide unutra. */
.fx-tab:focus-visible { outline-offset: -3px; border-radius: var(--r-control); }

/* Blijeđenje rubova kad traka ima još tabova lijevo ili desno (postavlja JS). */
.fx-tabs-wrap::before,
.fx-tabs-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
    z-index: 1;
}
.fx-tabs-wrap::before { left: 0; background: linear-gradient(to right, var(--ui-surface), transparent); }
.fx-tabs-wrap::after { right: 0; background: linear-gradient(to left, var(--ui-surface), transparent); }
.fx-tabs-wrap[data-more-start]::before,
.fx-tabs-wrap[data-more-end]::after { opacity: 1; }

/* ---------- Panel područja ---------- */
.fx-panel { padding-top: clamp(28px, 16px + 2vw, 44px); }
.fx-panel[hidden] { display: none; }
.fx-panel:focus-visible { outline: 3px solid var(--ui-indicator); outline-offset: 6px; border-radius: var(--r-card); }

.fx-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    grid-template-areas:
        "head shot"
        "groups shot";
    grid-template-rows: auto 1fr;
    gap: 0 clamp(28px, 16px + 3vw, 56px);
    align-items: start;
}
.fx-panel-head { grid-area: head; }
.fx-shot { grid-area: shot; }
.fx-groups { grid-area: groups; }

.fx-area-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--t-xl);
    margin-bottom: 9.6px;
}
.fx-area-title i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38.4px;
    height: 38.4px;
    color: var(--ui-link);
    background: var(--ui-tint);
    border-radius: var(--r-control);
    font-size: 16px;
}
.fx-intro { color: var(--ui-muted); max-width: 52ch; margin-bottom: 0; }

/* Snimak ekrana: ostaje u vidu dok se čita lista (desktop). */
.fx-shot {
    position: sticky;
    top: 104px;
    margin: 0;
}
.fx-shot-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12.8px;
    color: var(--ui-muted);
    font-size: var(--t-xs);
}
.fx-shot-caption i { color: var(--ui-link); }

/* Grupe funkcija: naslov grupe sa linijom, stavke kao naziv + rečenica. */
.fx-groups {
    display: grid;
    gap: 25.6px;
    margin-top: clamp(24px, 16px + 1vw, 32px);
}
.fx-group-title {
    margin: 0 0 13.6px;
    padding-bottom: 8.8px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0;
}
.fx-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13.6px;
}
.fx-item {
    position: relative;
    padding-left: 17.6px;
    font-size: var(--t-sm);
    line-height: 1.55;
}
.fx-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--ui-accent);
}
.fx-item strong { display: block; color: var(--ui-text); font-weight: 600; font-size: var(--t-base); line-height: 1.35; margin-bottom: 2.4px; }
.fx-item span { display: block; color: var(--ui-muted); }

@media (prefers-reduced-motion: no-preference) {
    .fx-panel:not([hidden]) { animation: fx-in 0.4s var(--ease); }
}
@keyframes fx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .fx-tab { padding-inline: 11.2px; }
    .fx-tab i { display: none; }
}

@media (max-width: 991px) {
    .fx-tab { flex: 0 0 auto; }
    .fx-tab i { display: inline-block; }
    .fx-panel-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "shot"
            "groups";
        grid-template-rows: auto;
    }
    .fx-shot { position: static; margin-top: 24px; }
    .fx-groups { margin-top: 32px; }
    .fx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
}

@media (max-width: 767px) {
    /* Traka ide od ruba do ruba ekrana; 24px = padding .section-container na <768px (public-theme.css). */
    .fx-tabs-wrap { margin-inline: -24px; }
    .fx-tabs { padding-inline: 24px; scroll-padding-inline: 24px; }
    .fx-tab { padding: 10.4px 12px; }
    .fx-list { grid-template-columns: minmax(0, 1fr); }
    .fx-area-title { font-size: var(--t-lg); }
    .fx-area-title i { width: 33.6px; height: 33.6px; font-size: 14.4px; }
}

@media (max-width: 480px) {
    .fx-tab i { display: none; }
    .fx-groups { gap: 21.6px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-panel { animation: none !important; }
    .fx-tab, .fx-tab i, .fx-tab::after, .fx-tabs-wrap::before, .fx-tabs-wrap::after { transition: none !important; }
}


/* ===== sections/integracije.css ===== */
/* =============================================================
   Sekcija „Integracije i tehnologija" (#integracije), prefiks in-.
   Asimetrična mreža od 12 kolona: grupe 7/5, pa 5/7, pa traka
   lokalnih programa preko cijele širine. Samo tokeni iz public-theme.css.
   ============================================================= */

.in-section { padding-block: var(--step); }

.in-eyebrow {
    display: block;
    margin-bottom: 14.4px;
    color: var(--ui-muted);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.in-grid {
    margin-top: clamp(28px, 16px + 2vw, 44px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.in-group {
    min-width: 0;
    padding: clamp(20px, 16px + 1vw, 32px);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-card);
}
.in-group-legal { grid-column: span 7; }
.in-group-devices { grid-column: span 5; }
.in-group-auto { grid-column: span 5; }
.in-group-access { grid-column: span 7; }

.in-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.in-group-head h3 { margin: 0; font-size: var(--t-lg); }
.in-group-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--ui-link);
    background: var(--ui-tint);
    border-radius: var(--r-control);
}

.in-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 17.6px; }
.in-items li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0 13.6px;
    padding-top: 17.6px;
    border-top: 1px solid var(--ui-border);
}
.in-items li:first-child { padding-top: 0; border-top: 0; }
.in-items li > i { margin-top: 4.8px; color: var(--ui-link); text-align: center; }
.in-items h4 { margin: 0 0 4.8px; font-size: var(--t-base); }
.in-items p { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }

/* Pristup: 2 x 2 unutar široke grupe */
.in-items-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.in-items-two li,
.in-items-two li:first-child { padding-top: 17.6px; border-top: 1px solid var(--ui-border); }
.in-items-two li:nth-child(-n+2) { padding-top: 0; border-top: 0; }

/* Zakonske obaveze: tamna ploča (bijeli tekst na --ui-rail je dozvoljen) */
.in-group-legal { background: var(--ui-rail); border-color: var(--ui-rail); color: var(--ui-rail-text); }
.in-group-legal h3,
.in-group-legal h4 { color: #ffffff; }
.in-group-legal p { color: var(--ui-rail-muted); }
.in-group-legal .in-group-icon { color: #ffffff; background: color-mix(in srgb, var(--ui-rail-text) 10%, transparent); }
.in-group-legal .in-items li { border-top-color: color-mix(in srgb, var(--ui-rail-text) 14%, transparent); }
.in-group-legal .in-items li:first-child { border-top: 0; }
.in-group-legal .in-items li > i { color: var(--ui-rail-text); opacity: 0.85; }

/* Lokalni programi: traka preko cijele širine */
.in-local {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: 20px 40px;
    align-items: center;
    padding: clamp(17.6px, 14.4px + 0.8vw, 24px) clamp(20px, 16px + 1vw, 32px);
    background: var(--ui-soft);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-card);
}
.in-local-copy h3 { display: flex; align-items: center; gap: 9.6px; margin: 0 0 5.6px; font-size: var(--t-base); }
.in-local-copy h3 i { color: var(--ui-link); }
.in-local-copy p { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }
.in-local-list { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.in-local-list div { margin: 0; padding-left: 13.6px; border-left: 2px solid var(--ui-accent); }
.in-local-list dt { color: var(--ui-muted); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; }
.in-local-list dd { margin: 2.4px 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--ui-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .in-group-legal, .in-group-access { grid-column: span 7; }
    .in-group-devices, .in-group-auto { grid-column: span 5; }
    .in-local { grid-template-columns: minmax(0, 1fr); }
    .in-local-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .in-group-legal, .in-group-devices, .in-group-auto, .in-group-access { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .in-grid { grid-template-columns: minmax(0, 1fr); }
    .in-items-two { grid-template-columns: minmax(0, 1fr); gap: 17.6px; }
    .in-items-two li:nth-child(2) { padding-top: 17.6px; border-top: 1px solid var(--ui-border); }
    .in-local-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}


/* ===== sections/izvjestaji.css ===== */
/* =============================================================
   Sekcija „Analitika i izvještaji" (#izvjestaji), prefiks iz-.
   Raspored: veliki snimak kontrolne ploče + lista ploča, katalog
   izvještaja u pet kolona, zajednički alati uz snimak Tree View
   grupisanja i panel zakazanih izvještaja. Samo tokeni iz public-theme.css.
   ============================================================= */

.iz-section {
    padding-block: var(--step);
    background: var(--ui-surface);
    border-block: 1px solid var(--ui-border);
    overflow-x: clip;
}

.iz-h3 { font-size: var(--t-lg); margin-bottom: 16px; }

/* ---------- Kontrolne ploče ---------- */
.iz-boards {
    margin-top: clamp(28px, 16px + 2vw, 44px);
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(24px, 16px + 2vw, 48px);
    align-items: center;
}
.iz-boards-shot { min-width: 0; }

.iz-board-list { margin: 0; padding: 0; list-style: none; display: grid; }
.iz-board-list li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0 13.6px;
    padding-block: 14.4px;
    border-top: 1px solid var(--ui-border);
}
.iz-board-list li:first-child { border-top: 0; padding-top: 0; }
.iz-board-list li > i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--ui-link);
    background: var(--ui-tint);
    border-radius: var(--r-control);
    font-size: 15.2px;
}
.iz-board-list h4 { margin: 0 0 3.2px; font-size: var(--t-base); }
.iz-board-list p { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }

.iz-note {
    display: flex;
    gap: 9.6px;
    align-items: baseline;
    margin: 6.4px 0 0;
    padding-top: 14.4px;
    border-top: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: var(--t-sm);
}
.iz-note i { color: var(--ui-link); }

/* ---------- Katalog izvještaja ---------- */
.iz-catalog { margin-top: clamp(40px, 24px + 3vw, 64px); }
.iz-catalog .iz-h3 { margin-bottom: 5.6px; }
.iz-catalog-lead { margin: 0 0 24px; color: var(--ui-muted); font-size: var(--t-sm); max-width: 60ch; }

.iz-catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 2px solid var(--ui-text);
}
.iz-col {
    min-width: 0;
    padding: 17.6px 17.6px 4px;
    border-left: 1px solid var(--ui-border);
}
.iz-col:first-child { padding-left: 0; border-left: 0; }
.iz-col h4 {
    display: flex;
    align-items: center;
    gap: 8.8px;
    margin: 0 0 13.6px;
    font-size: var(--t-sm);
    font-weight: 700;
}
.iz-col h4 i { color: var(--ui-link); width: 16px; text-align: center; }
.iz-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8.8px; }
.iz-col li {
    position: relative;
    padding-left: 15.2px;
    color: var(--ui-muted);
    font-size: var(--t-sm);
    line-height: 1.45;
}
.iz-col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6.4px;
    height: 2px;
    background: var(--ui-border-strong);
}

/* ---------- Zajednički alati ---------- */
.iz-tools {
    margin-top: clamp(40px, 24px + 3vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(24px, 16px + 2vw, 48px);
    align-items: center;
}
.iz-tools-shot { min-width: 0; }
.iz-tool-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22.4px 28px; }
.iz-tool-list div { margin: 0; }
.iz-tool-list dt { display: flex; align-items: center; gap: 8.8px; margin-bottom: 4.8px; font-weight: 600; }
.iz-tool-list dt i { color: var(--ui-link); width: 17.6px; text-align: center; }
.iz-tool-list dd { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }

/* ---------- Zakazani izvještaji ---------- */
.iz-schedule {
    margin-top: clamp(32px, 20px + 2vw, 48px);
    padding: clamp(20px, 16px + 1vw, 32px);
    background: var(--ui-tint);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, var(--ui-border));
    border-radius: var(--r-card);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 24px clamp(24px, 16px + 2vw, 48px);
    align-items: start;
}
.iz-schedule-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
.iz-schedule-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ui-action-text);
    background: var(--ui-accent);
    border-radius: var(--r-control);
    font-size: 17.6px;
}
.iz-schedule-head h3 { margin: 0 0 6.4px; font-size: var(--t-lg); }
.iz-schedule-head p { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }
.iz-schedule-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.iz-schedule-facts div { margin: 0; padding-top: 12px; border-top: 2px solid var(--ui-accent); }
.iz-schedule-facts dt { margin-bottom: 4px; font-weight: 700; font-size: var(--t-sm); }
.iz-schedule-facts dd { margin: 0; color: var(--ui-muted); font-size: var(--t-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .iz-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
    .iz-col:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
    .iz-schedule { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 991px) {
    .iz-boards, .iz-tools { grid-template-columns: minmax(0, 1fr); }
    .iz-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .iz-col:nth-child(3n + 1) { padding-left: 17.6px; border-left: 1px solid var(--ui-border); }
    .iz-col:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}

@media (max-width: 767px) {
    .iz-catalog-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .iz-col,
    .iz-col:nth-child(2n + 1),
    .iz-col:nth-child(3n + 1) { padding: 16px 0; border-left: 0; border-top: 1px solid var(--ui-border); }
    .iz-col:first-child { border-top: 0; }
    .iz-tool-list { grid-template-columns: minmax(0, 1fr); }
    .iz-schedule-facts { grid-template-columns: minmax(0, 1fr); }
    .iz-schedule-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}


/* ===== sections/pitanja.css ===== */
/* =============================================================
   Sekcija "Česta pitanja" (#pitanja), partial _Pitanja.cshtml.
   Prefiks: fq-. Native <details>/<summary>, bez JavaScripta.
   Raspored: lijevo ljepljiv uvod (naslov, opis, kontakt), desno jedna
   kolona pitanja do 70ch. Ikona +/- je nacrtana sa dvije crte i
   animira se samo transformom.
   ============================================================= */

.fq { padding-block: var(--step); background: var(--ui-surface); border-block: 1px solid var(--ui-border); }

.fq-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: clamp(32px, 16px + 4vw, 80px);
    align-items: start;
}

.fq-intro { position: sticky; top: 110px; }
.fq-contact {
    display: flex;
    align-items: baseline;
    gap: 10.4px;
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: var(--t-sm);
}
.fq-contact i { color: var(--ui-link); }
.fq-contact a { font-weight: 600; }

/* ---------- Lista pitanja ---------- */
.fq-list { max-width: 70ch; border-top: 1px solid var(--ui-border); }
.fq-item { border-bottom: 1px solid var(--ui-border); }

.fq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18.4px 4px;
    color: var(--ui-text);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    list-style: none;
    cursor: pointer;
    border-radius: var(--r-control);
}
.fq-q::-webkit-details-marker { display: none; }
.fq-q::marker { content: ""; }
.fq-q:hover { color: var(--ui-link); }
.fq-item[open] > .fq-q { color: var(--ui-link); }

/* Ikona: kvadrat 8px radiusa sa plusom; vertikalna crta nestaje kad je otvoreno */
.fq-icon {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--ui-link);
    background: var(--ui-tint);
    border-radius: var(--r-control);
    transition: transform 0.3s var(--ease);
}
.fq-icon::before,
.fq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12.8px;
    height: 2px;
    margin: -1px 0 0 -6.4px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.fq-icon::after { transform: rotate(90deg); }
.fq-item[open] .fq-icon { transform: rotate(180deg); }
.fq-item[open] .fq-icon::after { transform: rotate(90deg) scaleX(0); opacity: 0; }

.fq-a { padding: 0 52px 21.6px 4px; color: var(--ui-muted); }
.fq-a p { margin-bottom: 12px; }
.fq-a p:last-child { margin-bottom: 0; }
.fq-a a { font-weight: 600; }
.fq-help { color: var(--ui-link); }

@media (prefers-reduced-motion: no-preference) {
    .fq-item[open] .fq-a { animation: fq-open 0.32s var(--ease); }
}
@keyframes fq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .fq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .fq-intro { position: static; }
    .fq-list { max-width: none; }
}

@media (max-width: 767px) {
    .fq-q { font-size: var(--t-base); padding-block: 16px; }
    .fq-icon { width: 28px; height: 28px; }
    .fq-a { padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .fq-icon, .fq-icon::before, .fq-icon::after { transition: none !important; }
    .fq-item[open] .fq-a { animation: none !important; }
}


/* ===== sections/uvodjenje.css ===== */
/* =============================================================
   Sekcija "Kako izgleda uvođenje" (#uvodjenje), partial _Uvodjenje.cshtml.
   Prefiks: uv-. Samo tokeni iz public-theme.css (svijetla i tamna tema).
   Raspored: horizontalna vremenska linija sa pet faza (desktop),
   vertikalna linija ispod 1100px; ispod nje prava po ulogama
   (sa snimkom) i kontrolna lista spremnosti u asimetričnoj mreži.
   ============================================================= */

.uv { padding-block: var(--step); }

.uv-head { max-width: 62ch; }
.uv-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--ui-link);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------- Vremenska linija ---------- */
.uv-timeline {
    --uv-marker: 44px;
    position: relative;
    margin: clamp(32px, 20px + 2.5vw, 52px) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px clamp(16px, 8px + 1.2vw, 28px);
}
/* Linija ide kroz sredinu markera, od prvog do posljednjeg */
.uv-timeline::before {
    content: "";
    position: absolute;
    top: calc(var(--uv-marker) / 2 - 1px);
    left: calc(var(--uv-marker) / 2);
    right: calc(var(--uv-marker) / 2);
    height: 2px;
    background: var(--ui-border-strong);
}

.uv-phase { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 17.6px; min-width: 0; }
.uv-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--uv-marker);
    height: var(--uv-marker);
    color: var(--ui-link);
    background: var(--ui-surface);
    border: 2px solid var(--ui-accent);
    border-radius: var(--r-control);
    box-shadow: 0 0 0 6px var(--ui-bg);
    font-size: 16px;
}
/* Prvi račun je cilj podešavanja: puni marker */
.uv-phase:nth-child(4) .uv-marker { color: var(--ui-action-text); background: var(--ui-accent); }

.uv-phase-body { min-width: 0; }
.uv-steps {
    display: block;
    margin-bottom: 5.6px;
    color: var(--ui-muted);
    font-size: var(--t-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.uv-phase-title { font-size: var(--t-lg); margin-bottom: 8px; }
.uv-phase-text { color: var(--ui-muted); font-size: var(--t-sm); margin-bottom: 13.6px; }
.uv-phase-list {
    margin: 0;
    padding: 13.6px 0 0;
    list-style: none;
    display: grid;
    gap: 6.4px;
    border-top: 1px solid var(--ui-border);
    font-size: var(--t-sm);
}
.uv-phase-list li { position: relative; padding-left: 16px; line-height: 1.45; }
.uv-phase-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7.2px;
    height: 2px;
    background: var(--ui-accent);
}

/* Faze se pojavljuju jedna za drugom */
.uv-phase[data-reveal]:nth-child(2) { transition-delay: 0.06s; }
.uv-phase[data-reveal]:nth-child(3) { transition-delay: 0.12s; }
.uv-phase[data-reveal]:nth-child(4) { transition-delay: 0.18s; }
.uv-phase[data-reveal]:nth-child(5) { transition-delay: 0.24s; }

/* ---------- Prava i provjera ---------- */
.uv-detail {
    margin-top: clamp(40px, 24px + 3vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 16px + 3vw, 56px);
    align-items: start;
}
.uv-block-title { display: flex; align-items: center; gap: 9.6px; font-size: var(--t-xl); margin-bottom: 9.6px; }
.uv-block-title i { color: var(--ui-link); font-size: 0.85em; }
.uv-block-lead { color: var(--ui-muted); margin-bottom: 20px; max-width: 58ch; }

.uv-rights-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 13.6px; }
.uv-rights-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 13.6px; align-items: start; font-size: var(--t-sm); }
.uv-rights-list i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--ui-link);
    background: var(--ui-tint);
    border-radius: var(--r-control);
}
.uv-rights-list span { padding-top: 6.4px; }
.uv-shot { margin-top: 28px; }

.uv-check {
    padding: clamp(20px, 16px + 1vw, 30.4px);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-card);
    box-shadow: var(--ui-shadow);
}
.uv-check-group + .uv-check-group { margin-top: 22.4px; padding-top: 22.4px; border-top: 1px solid var(--ui-border); }
.uv-check-title { margin-bottom: 12px; color: var(--ui-muted); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; }
.uv-check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 11.2px; }
.uv-check-list li { position: relative; padding-left: 32px; font-size: var(--t-sm); line-height: 1.5; }
.uv-check-list li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0.1em;
    display: grid;
    place-items: center;
    width: 20.8px;
    height: 20.8px;
    color: var(--ui-link);
    background: var(--ui-tint);
    border-radius: var(--r-control);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11.2px;
    line-height: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    /* Vertikalna linija: marker lijevo, tekst desno */
    .uv-timeline { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 760px; }
    .uv-timeline::before { display: none; }
    /* Svaka faza crta dio linije do sljedećeg markera */
    .uv-phase:not(:last-child)::after {
        content: "";
        position: absolute;
        top: var(--uv-marker);
        bottom: 0;
        left: calc(var(--uv-marker) / 2 - 1px);
        width: 2px;
        background: var(--ui-border-strong);
    }
    .uv-phase { grid-template-rows: none; grid-template-columns: var(--uv-marker) minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
    .uv-phase:last-child { padding-bottom: 0; }
    .uv-phase-body { padding-top: 8.8px; }
    .uv-phase-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

@media (max-width: 991px) {
    .uv-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .uv-timeline { --uv-marker: 38.4px; }
    .uv-phase { gap: 16px; }
    .uv-phase-list { grid-template-columns: minmax(0, 1fr); }
    .uv-block-title { font-size: var(--t-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .uv-phase[data-reveal] { transition-delay: 0s !important; }
}


/* ===== sections/za-koga.css ===== */
/* =============================================================
   Sekcija "Za koga" (#za-koga), partial _ZaKoga.cshtml.
   Prefiks zk-. Samo tokeni iz public-theme.css, radi i u tamnoj temi.
   Raspored: vodoravni izbor uloga (tabovi), ispod detalj uloge
   sa listom i pravim snimkom ekrana.
   ============================================================= */

.zk { padding-block: var(--step); }

.zk-head { margin-bottom: clamp(28px, 16px + 2.5vw, 48px); }
.zk-eyebrow {
    display: block;
    margin-bottom: 14.4px;
    color: var(--ui-muted);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ---------- Izbor uloge ---------- */
.zk-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: clamp(24px, 16px + 1.5vw, 36px);
}
.zk-tab {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 9.6px;
    row-gap: 2.4px;
    align-content: start;
    min-height: 44px;
    padding: 13.6px 14.4px;
    text-align: left;
    color: var(--ui-text);
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: var(--r-control);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.zk-tab i { grid-row: 1 / 3; margin-top: 3.2px; color: var(--ui-muted); text-align: center; transition: color 0.2s var(--ease); }
.zk-tab-name { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.zk-tab-hint { grid-column: 2; color: var(--ui-muted); font-size: var(--t-xs); line-height: 1.4; }
.zk-tab:hover { background: var(--ui-soft); border-color: var(--ui-border-strong); }
.zk-tab[aria-selected="true"] {
    background: var(--ui-surface);
    border-color: var(--ui-accent);
    box-shadow: var(--ui-shadow);
}
.zk-tab[aria-selected="true"] i { color: var(--ui-link); }

/* ---------- Detalj uloge ---------- */
.zk-panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 16px + 3vw, 56px);
    align-items: start;
}
.zk-panel[hidden] { display: none; }
.zk-panel:focus-visible { outline: 3px solid var(--ui-indicator); outline-offset: 6px; border-radius: var(--r-card); }

.zk-role { font-size: var(--t-xl); margin-bottom: 16px; }
.zk-saves {
    margin: 0 0 24px;
    padding: 14.4px 16px;
    color: var(--ui-text);
    background: var(--ui-tint);
    border-left: 3px solid var(--ui-accent);
    border-radius: var(--r-control);
    font-size: var(--t-sm);
    line-height: 1.55;
}
.zk-saves strong { font-weight: 600; }

.zk-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.zk-list li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 11.2px;
    font-size: var(--t-sm);
    line-height: 1.55;
}
.zk-list i { margin-top: 4.8px; color: var(--ui-link); font-size: 12.8px; }

.zk-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 13.6px 0 0;
    color: var(--ui-muted);
    font-size: var(--t-xs);
}

@media (prefers-reduced-motion: no-preference) {
    .zk-panel:not([hidden]) { animation: zk-in 0.4s var(--ease); }
}
@keyframes zk-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .zk-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .zk-panel { grid-template-columns: minmax(0, 1fr); }
    .zk-shot { order: -1; }
}
@media (max-width: 767px) {
    .zk-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6.4px; }
    .zk-tab { padding: 11.2px 12px; }
    .zk-tab-hint { display: none; }
    .zk-tab i { grid-row: auto; margin-top: 2.4px; }
}
@media (max-width: 480px) {
    .zk-tab-name { font-size: var(--t-xs); }
}
@media (prefers-reduced-motion: reduce) {
    .zk-panel, .zk-tab, .zk-tab i { animation: none !important; transition: none !important; }
}