/* Dongfeng Srbija.
   Dizajn sistem preuzet iz sopstvenih stilova zvaničnog dongfeng-pv.com,
   koje imamo lokalno u Documentation/dongfeng-pv/css/. Vrednosti niže su
   prepisane iz njihovih scoped pravila, ne procenjene sa slike:

     default.u4rZJoiB.css   .app-header, .model-dropdown, .app-footer
     index.Bbm2zzGI.css     .hero-banner, .pv-model-showcase

   Element Plus iz entry.css se ne preuzima: to je generička biblioteka sa
   podrazumevanom plavom (#409eff), ne brend vrednost.
   Puna beleška je u DESIGN.md. Ovaj fajl je izvor istine i za design.html. */

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/public-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/public-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --c-bg: #fff;
    --c-surface: #f6f6f6;          /* .model-dropdown__image-wrap */
    --c-card: #f2f3f5;             /* naša kartica vozila */
    --c-alt: #f5f5f5;
    --c-ink: #111;                 /* .model-dropdown__title, __name */
    --c-title: #222;               /* .pv-model-showcase__title */
    --c-body: #333;                /* .btn, __group-button */
    --c-muted: #777;               /* .model-dropdown__child-button */
    --c-faint: #999;               /* .model-dropdown__desc */
    --c-dim: #bfbfbf;              /* .pv-model-showcase__model-btn */
    --c-line: #ececec;             /* .model-dropdown__side */
    --c-accent: #e60020;
    --c-navy: #051c2c;             /* .app-footer, .mobile-menu, .back-to-top */
    --c-dark: #0e1725;             /* .pv-brand-showcase, .pv-cta-banner */
    --c-blue: #26539d;             /* izbor u kolačićima, pravni linkovi */
    --c-dugme: #26539d;            /* dugmad; crvena ostaje za naglaske */
    --header-veil: #051c2c66;      /* .app-header background */

    --font-sans: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --header-h: 60px;
    --wrap: min(1440px, 100vw - 80px);
    --wrap-wide: min(1440px, 100vw - 120px);
    --section-y: clamp(2.5rem, 6vw, 3.75rem);
    /* Z skala: 1 sadržaj, 500 back-to-top, 999 mega meni, 1000 header. */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background-color: var(--c-bg);
    color: var(--c-body);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
}

body.mega-open {
    overflow: hidden;
}

/* Veza nosi boju dugmeta, ne podrazumevanu brauzersku plavu. Komponente
   koje same postavljaju boju ostaju kakve jesu — specifičnije su. */
a {
    color: var(--c-dugme);
}

img {
    max-width: 100%;
    height: auto;
}

/* Atribut hidden mora da nadjača display iz komponente. Bez ovoga
   .subnav i .mobile-menu (display: flex) ostaju u toku i u tab redu. */
[hidden] {
    display: none !important;
}

.wrap {
    width: var(--wrap);
    margin-inline: auto;
}

/* Fokus prsten za tastaturu, jednak na svetlom i tamnom. */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* ======================================================== tipografija == */

.h-display,
.h-section,
.h-panel,
.h-card {
    margin: 0;
    font-weight: 700;
}

/* Hero nema svoj naslov u njihovom kodu; ovo je naš, u istom ključu. */
.h-display {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}

/* .pv-model-showcase__title */
.h-section {
    font-size: clamp(1.75rem, 4vw, 2.375rem);
    line-height: 1;
    text-transform: uppercase;
    color: var(--c-title);
}

/* .model-dropdown__title */
.h-panel {
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-ink);
}

/* .model-dropdown__name */
.h-card {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-ink);
}

.t-lead {
    margin: 0;
    max-width: 42rem;
    font-size: clamp(1rem, 1.6vw, 1.125rem);
}

/* .model-dropdown__desc */
.t-meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-faint);
}

.on-dark {
    color: #fff;

    & .h-section,
    & .h-panel,
    & .t-lead {
        color: #fff;
    }

    & .t-meta {
        color: rgba(255, 255, 255, 0.6);
    }
}

/* ============================================================= dugmad ==
   .pv-model-showcase__learn-more: outline sa crvenim brisanjem koje raste
   sleva na hover, ne prosta promena boje. */

.btn {
    display: inline-block;
    padding: 0.75rem 2.25rem;
    border: 1px solid var(--c-body);
    border-radius: 2px;
    background-color: transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-body);
    /* Obična ispuna na prelaz; potez sleva nadesno je izbačen. */
    transition: background-color 0.25s ease, border-color 0.25s ease,
                color 0.25s ease;

    &:hover,
    &:focus-visible {
        background-color: var(--c-dugme);
        border-color: var(--c-dugme);
        color: #fff;
    }

    /* Odziv na pritisak, odmah i na pointer-down. */
    &:active {
        transform: translateY(1px);
    }
}

/* Primarna radnja: plava stalno, na prelaz tamnija. */
.btn-primary {
    border-color: var(--c-dugme);
    background-color: var(--c-dugme);
    color: #fff;

    &:hover,
    &:focus-visible {
        border-color: color-mix(in srgb, var(--c-dugme) 82%, #000);
        background-color: color-mix(in srgb, var(--c-dugme) 82%, #000);
        color: #fff;
    }
}

.btn-on-dark {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

/* ============================================== filteri, red kao stanje ==
   Tri nivoa, tačno kao .pv-model-showcase: kategorija, potkategorija, model. */

.filter-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.filter-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #000;
    transition: color 0.2s ease, border-color 0.2s ease;

    &:hover,
    &:focus-visible {
        color: var(--c-accent);
    }

    &.is-active {
        border-color: var(--c-accent);
        color: var(--c-accent);
    }
}

/* Treći nivo: nazivi modela, bez okvira, sa podvlakom. */
.filter-model-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 28px;
    margin-top: 1.25rem;
    padding: 0 1.25rem 0.25rem;
}

.filter-model-btn {
    flex: 0 0 auto;
    padding: 4px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    white-space: nowrap;
    color: var(--c-dim);
    transition: color 0.2s ease, border-color 0.2s ease;

    &:hover,
    &:focus-visible {
        color: var(--c-ink);
    }

    &.is-active {
        border-bottom-color: var(--c-accent);
        color: var(--c-ink);
    }
}

/* ===================================================== header i navigacija
   .app-header: 60px, providna mornarska, bela dok je meni otvoren. */

/* Tri kolone umesto `space-between`: navigacija mora da stoji u sredini
   headera, a ne na sredini razmaka između logotipa i prekidača, koji
   nisu iste širine. */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    height: var(--header-h);
    padding: 0 30px;
    background-color: var(--header-veil);
    /* Naš sloj: providni header preko hero medija je pravi materijal,
       sadržaj se nazire kroz njega. Osnova je samo providnost bez blur-a. */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;

    /* 1:1: i skrolovan i otvoren-meni header su BELI sa senkom. */
    &.is-scrolled,
    &.is-menu-open {
        background-color: var(--c-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    &.is-scrolled {
        box-shadow: 0 2px 8px #00000014;
    }
}

/* Početna: preko hero videa nema pune ispune, već samo tamni prelaz
   od gornje ivice ka providnom dnu. Posle skrola beli header ostaje
   dovoljno providan da blur zadrži osećaj sloja iznad sadržaja. */
.page-home .site-header:not(.is-scrolled, .is-menu-open) {
    background-color: transparent;
    background-image: linear-gradient(
        to bottom,
        var(--header-veil),
        transparent
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.page-home .site-header.is-scrolled {
    background-color: rgb(255 255 255 / 80%);
    background-image: none;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

@media (prefers-reduced-transparency: reduce) {
    .site-header {
        background-color: var(--c-navy);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .page-home .site-header:not(.is-scrolled, .is-menu-open) {
        background-color: var(--c-navy);
        background-image: none;
    }

    .page-home .site-header.is-scrolled {
        background-color: var(--c-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.site-brand {
    display: inline-flex;
    flex-shrink: 0;
    justify-self: start;
}

.site-logo {
    display: block;
    width: auto;
    height: 26px;
}

/* Svetlo stanje headera nosi tamni logo; podrazumevano je beli. */
.site-logo-dark {
    display: none;
}

.is-scrolled .site-logo-dark,
.is-menu-open .site-logo-dark {
    display: block;
}

.is-scrolled .site-logo-light,
.is-menu-open .site-logo-light {
    display: none;
}

.site-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.site-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 100%;
    margin-right: 25px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    /* Natpisi se pišu kao rečenica, veliko samo prvo slovo. Razmak među
       slovima je zato blizu nule: 1px je mera za verzal, a na malim
       slovima razvlači reč. */
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    color: #ffffffad;
    transition: color 0.2s ease;

    &:hover,
    &:focus-visible,
    &[aria-expanded="true"] {
        color: #fff;

        & .site-nav-text::after {
            inline-size: 100%;
        }
    }

    &:last-child {
        margin-right: 0;
    }
}

/* Linija stanja pripada slovima, ne headeru: zato je tekst u svom
   `span`-u i linija raste ispod njega, na 6 px od osnovne linije. Raste
   sleva nadesno, u smeru čitanja. */
.site-nav-text {
    position: relative;
    display: inline-block;

    &::after {
        content: "";
        position: absolute;
        inset-block-end: -6px;
        inset-inline-start: 0;
        block-size: 1px;
        inline-size: 0;
        background-color: #fff;
        transition: inline-size 0.25s ease-out;
    }
}

/* Strana na kojoj se stoji nosi crvenu liniju, stalno i bez prelaza:
   to je stanje, ne odziv na pokazivač. */
.site-nav-link.is-active .site-nav-text::after,
.is-scrolled .site-nav-link.is-active .site-nav-text::after,
.is-menu-open .site-nav-link.is-active .site-nav-text::after {
    inline-size: 100%;
    background-color: var(--c-accent);
    transition: none;
}

/* Znak uz stavku: crvena podloga, bela slova, podignut kao eksponent.
   Piše se kao rečenica i tanko — pločica se vidi po boji, ne po debljini
   slova. */
.site-nav-znak {
    align-self: center;
    padding: 0.2em 0.55em 0.25em;
    border-radius: 4px;
    background-color: var(--c-accent);
    font-size: 0.625rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    /* `sup` sam po sebi diže i pomera osnovnu liniju; ovde je pločica, pa
       se poravnanje vraća i podiže se ručno. */
    vertical-align: baseline;
    position: relative;
    inset-block-start: -0.55em;
}

.is-scrolled .site-nav-link,
.is-menu-open .site-nav-link {
    color: #000000ad;

    & .site-nav-text::after {
        background-color: var(--c-accent);
    }

    &:hover,
    &:focus-visible,
    &[aria-expanded="true"] {
        color: #000;
    }
}

/* Sporedne strane stoje uz prekidače, manjim slovima: iste su vrste kao
   glavne, ali nisu kupovni put. */
.site-nav-sporedna {
    display: flex;
    align-items: center;
    height: 100%;
}

.site-nav-link-mala {
    margin-right: 1.5rem;
    font-size: 0.8rem;

    &:last-child {
        margin-right: 0;
    }
}

/* ------------------------------------------------ prekidači u headeru */

.header-prekidac {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem;
    border: 0;
    border-radius: 2px;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1;
    color: #ffffffc7;
    transition: color 0.2s ease;

    /* Ni tema ni engleska verzija još ne postoje; dugmad drže svoje mesto
       u rasporedu i to i kažu, umesto da tiho ne rade ništa. */
    &[aria-disabled="true"] {
        cursor: default;
    }

    &:hover,
    &:focus-visible {
        color: #fff;
    }
}

.header-ikona {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    fill: currentColor;
    transition: color 0.2s ease;
}

/* Globus na prelaz prelazi u crveno, ostatak dugmeta ne. */
.header-jezik:hover .header-globus,
.header-jezik:focus-visible .header-globus {
    color: var(--c-accent);
}

/* „EN" je stavka u istom redu sa „O nama" i „Kontakt", pa nosi njihovu
   veličinu i debljinu — ništa krupnije ni deblje. */
.header-jezik-oznaka {
    font-weight: 400;
    letter-spacing: 0.01em;
}

.site-header:is(.is-scrolled, .is-menu-open) .header-prekidac {
    color: #000000c7;

    &:hover,
    &:focus-visible {
        color: #000;
    }
}

/* Hamburger u headeru postoji samo na mobilnom; na svetlom headeru
   linije prelaze u tamno, isto kao nav stavke. */
.site-header .hamburger {
    display: none;
}

.site-header:is(.is-scrolled, .is-menu-open) .hamburger-line {
    background-color: #111;
}

/* Sedam stavki u sredini, dve sa strane i dva prekidača: razmak se steže
   pre nego što red pređe u drugi red ili gurne logotip. Osnovna mera je
   već zbijena, pa prvi prelom kreće tek na 1200 px. */
@media (width < 1200px) {
    .site-logo {
        height: 22px;
    }

    .site-nav-link {
        margin-right: 20px;
        font-size: 0.9375rem;
    }

    /* Prekidači ostaju blago veći od pomoćnih tekstualnih stavki. */
    .header-prekidac {
        font-size: 0.8125rem;
    }

    .site-nav-link-mala {
        margin-right: 1rem;
    }
}

/* Ispod ove mere sredina više ne staje uz obe strane. Sporedne stavke
   izlaze prve, jer su i u footeru i u mobilnom meniju; kupovni put
   ostaje ceo. */
@media (width < 1120px) {
    .site-nav-sporedna {
        display: none;
    }

    .site-nav-link {
        margin-right: 16px;
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-text::after {
        transition: none;
    }
}

/* ========================================================== mega meni ==
   .model-dropdown: panel ispod headera, ne fullscreen. */

.mega {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    z-index: 999;
    width: 100vw;
    background-color: var(--c-bg);
    box-shadow: 0 22px 42px #0000001f;
}

.mega-inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: 44px;
    width: var(--wrap-wide);
    height: min(620px, 100vh - var(--header-h) - 24px);
    margin-inline: auto;
    padding: 44px 0 50px;
}

.mega-side {
    padding-right: 24px;
    border-right: 1px solid var(--c-line);
    overflow-y: auto;
}

.mega-brands {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-brand-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-align: left;
    color: var(--c-body);
    transition: color 0.2s ease;

    &:hover,
    &:focus-visible,
    &.is-active {
        color: var(--c-accent);
    }
}

.mega-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Panel po brendu: vidljiv je samo aktivan, stanje nosi klasa a ne
   inline stil, da JS promena brenda ne ostane bez efekta. */
.mega-panel {
    display: none;
}

.mega-panel.is-active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mega-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 28px;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 26px;
    min-height: 0;
    padding-right: 8px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
}

/* ==================================================== kartica vozila ==
   Naša kartica: brend gore levo, naziv modela krupno, oznaka pogona desno,
   „duh" naziv iza vozila. Zadržana kakva jeste; iz .model-dropdown__card
   preuzeti su samo hover zum slike i mera slike u kutiji. */

.car-card {
    position: relative;
    display: block;
    padding: 1.5rem 1.5rem 2rem;
    background-color: var(--c-card);
    text-decoration: none;
    transition: background-color 0.25s ease;

    &:hover {
        background-color: #eceef1;
    }

    &:hover .car-card-img {
        transform: translateY(-4px) scale(1.04);
    }
}

.car-card-brand {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.car-card-name {
    display: block;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.car-card-variants {
    display: block;
    /* Rezerviši red i kada varijanti nema, da se kartice u redu poravnaju. */
    min-block-size: 1lh;
    font-size: 0.8125rem;
    color: var(--c-muted);
}

.car-card-figure {
    position: relative;
    display: block;
    margin-top: 0.75rem;
}

/* „Duh" naziv iza vozila: gradijent isečen kroz tekst, bledi naniže.
   Tehnika je iz njihovog .pv-model-showcase__bg-word. */
.car-card-ghost {
    position: absolute;
    inset-block-start: 4%;
    inset-inline: 0;
    text-align: center;
    font-size: clamp(2.75rem, 11vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12),
        rgba(0, 0, 0, 0.06) 50%,
        transparent
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    user-select: none;
}

.car-card-img {
    position: relative;
    display: block;
    width: 88%;
    margin-inline: auto;
    /* Slike vozila su na beloj podlozi; multiply ih stapa sa karticom. */
    mix-blend-mode: multiply;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.car-card-tag {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 4;
}

/* Pogonska oznaka je semantički čip, ne statusni ukras: ugao je isti kao
   na kartici, ikona ubrzava skeniranje, a boja je mirna i kategorijska. */
.drive-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 28px;
    padding: 0.35rem 0.55rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.055em;
}

.drive-pill-icon {
    display: block;
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
}

.drive-pill--ev,
.drive-pill--bev {
    background: #e5f5eb;
    color: #146c43;
}

.drive-pill--hev {
    background: #e8f0fa;
    color: #245b91;
}

.drive-pill--phev {
    background: #e4f4f2;
    color: #176d67;
}

.drive-pill--reev {
    background: #fff0dc;
    color: #875100;
}

/* Tooltip ostaje progresivno objašnjenje za miš i tastaturu. Na dodir se
   ne pojavljuje preko sadržaja; tada kratki vodič stoji iznad mreže. */
.drive-pill::before,
.drive-pill::after {
    position: absolute;
    inset-inline-end: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.drive-pill::before {
    content: "";
    inset-block-start: calc(100% + 3px);
    inline-size: 10px;
    block-size: 10px;
    margin-inline-end: 12px;
    background: var(--c-navy);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.drive-pill::after {
    content: attr(data-tooltip);
    inset-block-start: calc(100% + 12px);
    inline-size: max-content;
    max-inline-size: min(15rem, calc(100vw - 3rem));
    padding: 0.625rem 0.75rem;
    border-radius: 4px;
    background: var(--c-navy);
    box-shadow: 0 10px 28px rgb(5 28 44 / 0.2);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    color: #fff;
}

/* U heroju modela oznaka stoji uz levu ivicu tekstualne kolone. Tooltip zato
   raste udesno od oznake, umesto da na užim širinama izlazi van viewporta. */
.model-meta .drive-pill::before,
.model-meta .drive-pill::after {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.model-meta .drive-pill::before {
    margin-inline: 12px 0;
}

.model-meta .drive-pill::after {
    max-inline-size: min(13rem, calc(100vw - 3rem));
}

.model-meta .drive-pill:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 48%, transparent);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .drive-pill:hover::before,
    .drive-pill:hover::after,
    .car-card:focus-visible .drive-pill::before,
    .car-card:focus-visible .drive-pill::after,
    .model-meta .drive-pill:focus-visible::before,
    .model-meta .drive-pill:focus-visible::after {
        opacity: 1;
        transform: translateY(0);
    }
}

.car-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.25rem;
}

.car-grid > .is-hidden {
    display: none;
}

@media (width < 768px) {
    .site-header {
        padding-inline: 16px;
    }

    .site-nav {
        display: none;
    }

    .site-header .hamburger {
        display: flex;
    }

    .mega-inner {
        grid-template-columns: 1fr;
        height: auto;
        max-height: calc(100vh - var(--header-h));
        padding: 24px 0 32px;
        overflow-y: auto;
    }

    .mega-side {
        padding-right: 0;
        padding-bottom: 16px;
        border-right: 0;
        border-bottom: 1px solid var(--c-line);
    }

    .mega-brands {
        display: flex;
        flex-wrap: wrap;
        gap: 0 20px;
    }

    .mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ================================================================ hero ==
   .hero-banner: 100vh, max 1080px, video preko celog kadra. */

.hero {
    position: relative;
    width: 100%;
    /* Pun ekran. `dvh`, ne `vh`: to je isto na desktopu, a na telefonu
       prati traku pregledača koja se skuplja, pa heroj ne prelije ekran. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--c-dark);
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.01;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 28, 44, 0.38) 0%,
            rgba(5, 28, 44, 0.28) 42%, rgba(5, 28, 44, 0.72) 100%),
        rgba(5, 28, 44, 0.2);
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wrap);
    height: 100%;
    margin-inline: auto;
    padding-block: calc(var(--header-h) + 2rem) 5rem;
}

.hero-copy {
    width: 100%;
    max-width: 80rem;
    text-align: center;
}

.hero .h-display {
    max-width: none;
    font-size: clamp(3.5rem, 5.1vw, 5.25rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-transform: none;
    text-wrap: balance;
}

.hero-line {
    display: inline-block;
}

.hero-line + .hero-line {
    margin-inline-start: 0.16em;
}

.hero-sub {
    margin: clamp(1rem, 2vh, 1.5rem) 0 0;
    font-size: clamp(1.125rem, 1.8vw, 1.75rem);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.9);
}

.hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
    padding: 0.65rem 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    transition: color 180ms ease;

    &::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        block-size: 1px;
        background-color: rgba(255, 255, 255, 0.72);
        transform-origin: center;
        transition: transform 220ms ease, background-color 180ms ease;
    }

    &:focus-visible {
        color: #fff;

        &::after {
            background-color: #fff;
        }
    }

    &:active {
        transform: scale(0.97);
    }
}

@media (hover: hover) and (pointer: fine) {
    .hero-cta:hover {
        color: #fff;

        &::after {
            background-color: #fff;
            transform: scaleX(1.12);
        }
    }
}

.hero-scroll-cue {
    position: absolute;
    inset-block-end: clamp(2.75rem, 7vh, 4.5rem);
    inset-inline-start: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 52px;
    padding: 0.5rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72);
    transform: translateX(-50%);
    transition: opacity 180ms ease;

    &:hover,
    &:focus-visible {
        opacity: 1;
    }
}

.hero-scroll-cue img {
    inline-size: 1.75rem;
    block-size: auto;
    opacity: 0.82;
    transition: transform 220ms ease, opacity 180ms ease;
}

.hero-scroll-cue:hover img,
.hero-scroll-cue:focus-visible img {
    opacity: 1;
    transform: translateY(3px);
}

@media (width < 600px) {
    .hero-inner {
        width: min(100% - 30px, 1440px);
        padding-block: calc(var(--header-h) + 1.5rem)
            max(4.5rem, env(safe-area-inset-bottom));
    }

    .hero .h-display {
        font-size: clamp(2.75rem, 13vw, 3.5rem);
        line-height: 0.95;
        letter-spacing: -0.05em;
    }

    .hero-line {
        display: block;
    }

    .hero-line + .hero-line {
        margin-inline-start: 0;
    }

    .hero-sub {
        margin-top: 1.25rem;
        font-size: 1.25rem;
    }

    .hero-cta {
        margin-top: 1.75rem;
    }

    .hero-scroll-cue {
        inset-block-end: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* .hero-banner__indicators: trake 68x4, popuna raste crveno. */
.hero-dots {
    position: absolute;
    inset-block-end: 50px;
    inset-inline-start: 50%;
    z-index: 10;
    display: flex;
    gap: 12px;
    transform: translateX(-50%);
}

.hero-dot {
    position: relative;
    width: 68px;
    height: 4px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.hero-dot-bg {
    position: absolute;
    inset: 0;
    background-color: #ffffff59;
}

.hero-dot-fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 0;
    height: 100%;
    background-color: var(--c-accent);
}

.hero-dot.is-active .hero-dot-fill {
    width: 100%;
    transition: width 6s linear;
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta,
    .hero-cta::after,
    .hero-scroll-cue,
    .hero-scroll-cue svg {
        transition: none;
    }

    .hero-cta:hover::after {
        transform: none;
    }

    .hero-dot.is-active .hero-dot-fill {
        transition: none;
    }
}

/* ====================================================== sekcije stranice
   .pv-model-showcase: bela, padding 60px 0 70px, sve centrirano. */

.section {
    padding: var(--section-y) 0 calc(var(--section-y) + 10px);
}

.section-alt {
    background-color: var(--c-alt);
}

.section-dark {
    background-color: var(--c-navy);
}

.section-head {
    text-align: center;
}

.section-head .h-section {
    margin-bottom: 24px;
}

/* Bina vozila je preko cele širine, sa senkom-podlogom ispod. */
.car-stage {
    position: relative;
    width: 100vw;
    margin: 30px calc(50% - 50vw) 0;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Naše fotografije su kvadratne, tri četvrtine profila — ne široki
   isečeni profil kakav je nosila globalna paleta. Mera se zato daje po
   visini; po širini bi kvadrat narastao preko cele bine. */
.car-stage-img {
    position: relative;
    z-index: 2;
    inline-size: auto;
    block-size: min(440px, 52vw);
    max-inline-size: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* „Duh" naziv iza vozila: gradijent isečen kroz tekst, bledi naniže. */
.car-stage-ghost {
    position: absolute;
    inset-block-start: 12%;
    inset-inline-start: 50%;
    z-index: 0;
    transform: translateX(-50%);
    max-width: 100vw;
    font-size: clamp(72px, 13vw, 180px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.12),
        rgba(0, 0, 0, 0.06) 50%,
        transparent
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    user-select: none;
}

.car-stage-label {
    position: absolute;
    inset-block-end: 30px;
    inset-inline-start: 50%;
    z-index: 2;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--c-body);
    pointer-events: none;
}

@media (width < 992px) {
    .car-stage {
        min-height: 320px;
    }

    .car-stage-label {
        inset-block-end: 20px;
        font-size: 0.8125rem;
    }

    .btn {
        padding: 9px 28px;
        font-size: 0.75rem;
    }
}

/* -------------------------------------------------------------- CTA traka */

.cta-band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* ============================================================== footer ==
   .app-footer: #051c2c, tekst na 60% bele, linkovi 16px. */

.site-footer {
    background-color: var(--c-navy);
    color: #fff9;
    padding: clamp(56px, 6vw, 84px) 0 24px;
}

/* Stranica sa stalnom trakom: podnožje ostavlja mesta za nju, da se na
   dnu vidi i red sa autorskim pravima. */
body:has(.cta-traka) .site-footer {
    padding-block-end: calc(20px + 80px + env(safe-area-inset-bottom, 0px));
}

@media (width < 720px) {
    body:has(.cta-traka) .site-footer {
        padding-block-end: calc(20px + 104px + env(safe-area-inset-bottom, 0px));
    }
}

.site-footer-top {
    display: grid;
    grid-template-columns: minmax(330px, 1.65fr) repeat(4, minmax(130px, 1fr));
    align-items: start;
    gap: clamp(32px, 4vw, 72px);
    margin-bottom: clamp(48px, 6vw, 72px);
}

/* ======================================================================
   KOMPONENTE IZ NJIHOVIH SEKCIJA
   Sve niže je prepisano iz index.Bbm2zzGI.css i default.u4rZJoiB.css.
   Prvi prolaz kroz dizajn sistem pokrio je pet komponenti; ovo je
   ostatak, pa vodič sada odgovara zatečenom sajtu u celini.
   ====================================================================== */

/* ------------------------------------------- tamna brend sekcija
   .pv-brand-showcase: slika preko celog kadra, naslov gore centriran,
   tri stavke duž dna. Podloga #0e1725 je boja tamnih sekcija; footer i
   header koriste #051c2c. Postoje obe i ne mešaju se. */

.brand-showcase {
    position: relative;
    min-height: clamp(720px, 68vw, 940px);
    overflow: hidden;
    background-color: var(--c-dark);
    color: #fff;
}

.brand-showcase-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.brand-showcase-video {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.brand-showcase-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: inherit;
    width: var(--wrap);
    margin-inline: auto;
    padding-block: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 4vw, 3rem);
}

.brand-showcase-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.brand-showcase-title {
    margin: 0;
    max-width: 9ch;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.04em;
    text-transform: none;
    color: #fff;
}

.brand-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    padding-block: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.2s ease, gap 0.25s ease;

    &:hover,
    &:focus-visible {
        gap: 0.875rem;
        color: #fff;
    }
}

.brand-showcase-story {
    align-self: end;
    display: grid;
    grid-template-columns: minmax(0, 42rem);
    align-items: end;
    max-width: 56rem;
    margin-bottom: clamp(2rem, 5vw, 4.5rem);
}

.brand-showcase-panels {
    min-width: 0;
}

.brand-showcase-panel {
    max-width: 42rem;
}

.brand-showcase.is-enhanced .brand-showcase-panel:not(.is-active) {
    display: none;
}

.brand-showcase-item-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 3vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
}

.brand-showcase-item-desc {
    margin: 0;
    max-width: 58ch;
    font-size: clamp(1rem, 1.35vw, 1.1875rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.brand-showcase-tabs {
    display: none;
}

.brand-showcase.is-enhanced .brand-showcase-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.brand-showcase-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 68px;
    padding: 0.875rem 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: clamp(0.8125rem, 1.15vw, 1rem);
    font-weight: 600;
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.25s ease;
}

.brand-showcase-tab::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    inline-size: 100%;
    block-size: 2px;
    background-color: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.brand-showcase-tab:hover,
.brand-showcase-tab:focus-visible,
.brand-showcase-tab.is-active {
    color: #fff;
}

.brand-showcase-tab.is-active::before {
    transform: scaleX(1);
}

.brand-showcase.is-autoplaying .brand-showcase-tab.is-active::before {
    animation: brand-showcase-progress 6s linear both;
    transition: none;
}

@keyframes brand-showcase-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (width < 720px) {
    .brand-showcase {
        min-height: 760px;
    }

    .brand-showcase-shell {
        padding-block: 5rem 1.25rem;
    }

    .brand-showcase-top {
        display: block;
    }

    .brand-showcase-title {
        font-size: clamp(3.25rem, 15vw, 4.5rem);
    }

    .brand-showcase-link {
        margin-top: 1rem;
    }

    .brand-showcase-story {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        margin-bottom: 2.5rem;
    }

    .brand-showcase-item-title {
        font-size: 2rem;
    }

    .brand-showcase-item-desc {
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    .brand-showcase-tab {
        display: grid;
        justify-items: start;
        gap: 0.25rem;
        min-width: 0;
        padding-inline-end: 0.5rem;
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-showcase-link,
    .brand-showcase-tab,
    .brand-showcase-tab::before {
        transition: none;
        animation: none !important;
    }
}

/* ---------------------------------------------- oko iznad naslova
   Sitno, razmaknuto slovo iznad naslova sekcije na početnoj strani. */

.tech-eyebrow {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 3px;
    color: var(--c-faint);
}


/* Sekundarno dugme: tanka siva ivica koja na hover pocrveni. */
.btn-quiet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 36px;
    border: 1.5px solid #ccc;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-decoration: none;
    color: #555;
    transition: border-color 0.2s ease, color 0.2s ease;

    &:hover {
        border-color: var(--c-accent);
        color: var(--c-accent);
    }
}

/* --------------------------------------------------------- CTA traka
   .pv-cta-banner: slika, sadržaj levo, dugmad na beloj providnosti. */

.cta-banner {
    position: relative;
    min-height: clamp(420px, 42vw, 760px);
    overflow: hidden;
    background-color: var(--c-dark);
    color: #fff;
}

.cta-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(420px, 42vw, 760px);
    object-fit: cover;
}

.cta-banner-content {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: clamp(28px, 8vw, 154px);
    transform: translateY(-50%);
    width: min(780px, 50vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-banner-title {
    margin: 0 0 38px;
    font-size: clamp(26px, 2.1vw, 48px);
    line-height: 1.3;
    color: #fff;
}

.cta-banner-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: 4px;
    background-color: #fffc;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #000;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
        background-color: #ffffffe0;
        color: var(--c-ink);
    }
}

/* Početni CTA koristi kadar cele game. Poruka je centrirana u otvorenom
   nebu, iznad vozila, uz svetao radijalni veo koji čuva čitljivost bez
   zatvaranja fotografije u karticu. */
.cta-banner-home {
    isolation: isolate;
    min-height: clamp(560px, 56.25vw, 720px);
    background-color: #d8eef8;
}

.cta-banner-home::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: radial-gradient(
        ellipse 56% 50% at 50% 22%,
        rgb(255 255 255 / 96%) 0%,
        rgb(255 255 255 / 78%) 44%,
        rgb(255 255 255 / 0%) 100%
    );
    pointer-events: none;
}

.cta-banner-home .cta-banner-img {
    position: absolute;
    inset: 0;
    min-height: clamp(560px, 56.25vw, 720px);
    object-position: center center;
}

.cta-banner-home .cta-banner-content {
    z-index: 2;
    inset: 0;
    width: 100%;
    padding: clamp(56px, 7vw, 96px) 24px 0;
    transform: none;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.cta-banner-eyebrow {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    color: var(--c-accent);
}

.cta-banner-home .cta-banner-title {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--c-navy);
}

.cta-banner-text {
    max-width: 600px;
    margin: 20px 0 28px;
    font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
    line-height: 1.55;
    text-wrap: balance;
    color: rgb(5 28 44 / 78%);
}

.cta-banner-home .cta-banner-buttons {
    justify-content: center;
}

.cta-banner-primary,
.cta-banner-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 28px;
    border: 1px solid var(--c-navy);
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease,
        color 0.18s ease;
}

.cta-banner-primary {
    background-color: var(--c-navy);
    color: #fff;
}

.cta-banner-secondary {
    gap: 10px;
    background-color: rgb(255 255 255 / 48%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--c-navy);
}

@media (hover: hover) and (pointer: fine) {
    .cta-banner-primary:hover {
        border-color: #0c334d;
        background-color: #0c334d;
    }

    .cta-banner-secondary:hover {
        background-color: rgb(255 255 255 / 82%);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .cta-banner-secondary {
        background-color: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (width < 600px) {
    .cta-banner-home,
    .cta-banner-home .cta-banner-img {
        min-height: 680px;
    }

    .cta-banner-home::after {
        background: radial-gradient(
            ellipse 100% 52% at 50% 18%,
            rgb(255 255 255 / 98%) 0%,
            rgb(255 255 255 / 86%) 54%,
            rgb(255 255 255 / 0%) 100%
        );
    }

    .cta-banner-home .cta-banner-content {
        padding: 48px 16px 0;
    }

    .cta-banner-home .cta-banner-title {
        max-width: 340px;
    }

    .cta-banner-text {
        max-width: 330px;
        margin-block: 18px 24px;
    }

    .cta-banner-home .cta-banner-buttons {
        width: min(310px, 100%);
        flex-direction: column;
        gap: 10px;
    }

    .cta-banner-primary,
    .cta-banner-secondary {
        width: 100%;
    }
}

/* ------------------------------------------------------------- vesti
   .pv-news-contact: uska bočna kolona 180px, pa slajder kartica. */

.news {
    padding: 80px 0 90px;
    background-color: var(--c-alt);
    overflow: hidden;
}

.news-layout {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    width: 90vw;
    margin-inline: auto;
}

.news-sidebar {
    flex: 0 0 auto;
    width: 180px;
    padding-top: 4px;
}

.news-title {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink);
}

.news-main {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.news-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.news-card {
    display: block;
    text-decoration: none;
    color: var(--c-ink);

    &:hover .news-card-img {
        transform: scale(1.03);
    }
}

/* Vest bez fotografije: umesto praznog okvira, tanka crta i pomeraj
   naslova na prelaz, da kartica i dalje odgovara na dodir. */
.news-card-bez-slike {
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-line);

    & .news-card-title {
        transition: color 0.25s ease;
    }

    &:hover .news-card-title {
        color: var(--c-accent);
    }
}

.news-card-figure {
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    background-color: #f1f1f1;
    overflow: hidden;
}

.news-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card-date {
    display: block;
    margin: 20px 0 8px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #666;
}

.news-card-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
    color: #000;
    /* Dva reda, ostatak se seče. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-block-size: 2lh;
    overflow: hidden;
}

.news-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.news-progress {
    position: relative;
    flex: 1;
    height: 2px;
    background-color: #e5e5e5;

    &::after {
        content: "";
        display: block;
        position: relative;
        bottom: 1px;
        height: 3px;
        width: var(--progress, 0);
        background-color: var(--c-accent);
        transition: width 0.3s ease;
    }
}

.news-arrows {
    display: flex;
    gap: 6px;
}

.news-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    color: #888;
    transition: border-color 0.2s ease, color 0.2s ease;

    &:hover {
        border-color: var(--c-body);
        color: var(--c-body);
    }
}

/* ---------------------------------------------------- mobilni meni
   Header ostaje na svom mestu, a bela navigaciona površina se otvara ispod
   njega. Vozila su vizuelni izbor; ostale strane ostaju mirna lista. */

.mobile-overlay {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 998;
    background-color: rgb(5 28 44 / 0.16);
}

.mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 999;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--c-line);
    background-color: var(--c-bg);
    box-shadow: 0 24px 64px rgb(5 28 44 / 0.16);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-menu-nav {
    width: 100%;
    padding: 1.25rem 1rem calc(2rem + env(safe-area-inset-bottom));
}

.mobile-vehicles {
    min-width: 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-line);
}

.mobile-menu-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.mobile-menu-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--c-ink);
}

.mobile-menu-all,
.mobile-brand-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--c-body);
}

.mobile-brand-tabs {
    display: flex;
    gap: 1.25rem;
    margin: 0.75rem -1rem 0;
    padding-inline: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.mobile-brand-tabs::-webkit-scrollbar,
.mobile-vehicle-rail::-webkit-scrollbar {
    display: none;
}

.mobile-brand-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--c-muted);
    transition: color 160ms ease;
}

.mobile-brand-tab::after {
    content: "";
    position: absolute;
    inset: auto 0 4px;
    height: 2px;
    background-color: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-brand-tab.is-active {
    color: var(--c-ink);
}

.mobile-brand-tab.is-active::after {
    transform: scaleX(1);
}

.mobile-vehicle-panel {
    min-width: 0;
}

.mobile-vehicle-rail {
    display: flex;
    gap: 0.75rem;
    margin: 0 -1rem;
    padding: 0.5rem 1rem 0.25rem;
    overflow-x: auto;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.mobile-vehicle-card {
    position: relative;
    isolation: isolate;
    display: block;
    flex: 0 0 10.75rem;
    min-height: 7rem;
    padding: 0.875rem 0.75rem;
    border-radius: 4px;
    background-color: var(--c-card);
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--c-ink);
    transition: background-color 160ms ease;
}

.mobile-vehicle-card:active {
    background-color: #e7e9ec;
}

.mobile-vehicle-figure {
    position: absolute;
    z-index: 0;
    inset: -0.25rem -2rem -0.25rem 32%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent -30px,
        rgb(0 0 0 / 0.55) calc(14% - 30px),
        #000 calc(30% - 30px)
    );
    mask-image: linear-gradient(
        90deg,
        transparent -30px,
        rgb(0 0 0 / 0.55) calc(14% - 30px),
        #000 calc(30% - 30px)
    );
    pointer-events: none;
}

.mobile-vehicle-img {
    width: 128%;
    max-width: none;
    transform: translateX(8%);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.mobile-vehicle-brand {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 58%;
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.mobile-vehicle-name {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 58%;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mobile-vehicle-drive {
    position: absolute;
    z-index: 2;
    inset-block-end: 0.75rem;
    inset-inline-start: 0.75rem;
    gap: 0.2rem;
    min-block-size: 18px;
    padding: 0.15rem 0.35rem;
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.mobile-vehicle-drive .drive-pill-icon {
    inline-size: 0.5625rem;
    block-size: 0.5625rem;
}

/* Objašnjenje je deo pristupačnog naziva cele kartice; desktop tooltip ne
   pripada kompaktnoj touch navigaciji. */
.mobile-vehicle-drive::before,
.mobile-vehicle-drive::after {
    display: none;
}

.mobile-brand-all {
    margin-top: 0.375rem;
}

.mobile-menu-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    padding-top: 0.75rem;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    color: var(--c-ink);
    transition: color 160ms ease;

    &.is-active {
        color: var(--c-accent);
    }
}

.mobile-menu-links > .mobile-menu-item:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.mobile-menu-link-arrow {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--c-faint);
}

.mobile-menu-znak {
    margin-left: 0.25rem;
    padding: 0.15rem 0.35rem 0.18rem;
    border-radius: 4px;
    background-color: var(--c-accent);
    font-size: 0.5625rem;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    vertical-align: 0.4em;
}

.mobile-menu-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.mobile-menu-secondary .mobile-menu-item {
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 4px;
    background-color: var(--c-surface);
    font-size: 0.8125rem;
    font-weight: 550;
    text-align: center;
}

/* Otvaranje je kratak pomak iz pravca headera, ne prevlačenje cele stranice.
   Prelaz je reverzibilan i koristi samo transform/opacity. */
.mobile-overlay,
.mobile-menu {
    opacity: 0;
    transition: opacity 180ms ease-out;
}

.mobile-menu {
    transform: translateY(-12px);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
                opacity 180ms ease-out;
}

.mobile-overlay.is-open,
.mobile-menu.is-open {
    opacity: 1;
}

.mobile-menu.is-open {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu {
        transform: none;
        transition: opacity 0.2s ease;
    }

    .mobile-brand-tab::after,
    .mobile-brand-tab {
        transition: none;
    }
}

/* Hamburger i X dele isti centralni pivot. Raniji flex raspored je računao
   pomeraj za dugme od 24 px, pa se raspao kada je touch meta porasla na
   44 px: dijagonale nisu završavale u istoj tački. */
.hamburger {
    position: relative;
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hamburger-line {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 24px;
    height: 2px;
    background-color: #fff;
    transform-origin: center;
    transition: transform 180ms cubic-bezier(0.77, 0, 0.175, 1),
                opacity 120ms ease-out;
}

.hamburger-line:nth-child(1) {
    transform: translate(-50%, -7px);
}

.hamburger-line:nth-child(2) {
    transform: translate(-50%, -1px);
}

.hamburger-line:nth-child(3) {
    transform: translate(-50%, 5px);
}

.hamburger.is-open .hamburger-line:nth-child(1) {
    transform: translate(-50%, -1px) rotate(45deg);
}

.hamburger.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-open .hamburger-line:nth-child(3) {
    transform: translate(-50%, -1px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .hamburger-line {
        transition: none;
    }
}

/* -------------------------------------------------------- na vrh */

.back-to-top {
    position: fixed;
    inset-block-end: 80px;
    inset-inline-end: 40px;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 4px;
    background-color: var(--c-dugme);
    cursor: pointer;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.3s ease, visibility 0.3s ease,
                background-color 0.3s ease, border-radius 0.3s ease,
                inset-block-end 0.45s cubic-bezier(0.45, 0, 0.55, 1),
                translate 0.45s cubic-bezier(0.45, 0, 0.55, 1);

    &:hover {
        opacity: 1;
        background-color: color-mix(in srgb, var(--c-dugme) 82%, #000);
    }

    /* Skriven dok je hero u kadru; .3s fade kao u osnovi. */
    &[data-hidden] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ---------------------------------------------- traka za kolačiće
   .cookie-card: providna bela sa zamućenjem, prijanja uz dno. */

.cookie {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.cookie-card {
    width: 100%;
    border-radius: 3px;
    background-color: #ffffffd9;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.cookie-main {
    padding: 24px 40px;
}

.cookie-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.cookie-desc {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cookie-btn {
    padding: 10px 28px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
    color: #666;
    transition: opacity 0.2s ease;

    &:hover {
        opacity: 0.85;
    }
}

.cookie-btn-primary {
    border-color: #000;
    background-color: #000;
    color: #fff;
}

@media (prefers-reduced-transparency: reduce) {
    .cookie-card {
        background-color: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (width < 992px) {
    .news-layout {
        flex-direction: column;
    }

    .news-sidebar {
        width: 100%;
    }

    .cta-banner-content {
        width: min(780px, 86vw);
    }
}

/* ------------------------------------------------- podmeni u headeru
   .app-header__sub-dropdown: traka preko cele širine ispod headera. */

.subnav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 18px 72px;
    background-color: var(--c-bg);
}

.subnav-link {
    display: block;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    color: #666;
    transition: color 0.2s ease;

    &:hover {
        color: var(--c-accent);
    }
}

/* ------------------------------------------------ footer, pet kolona */

/* Zadržano za statički primer prethodne strukture u design.html; produkcioni
   footer koristi direktnu petokolonsku .site-footer-top mrežu. */
.footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-col-title {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #fff;
}

.footer-col-item {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    color: #fff9;
    transition: color 0.2s ease;
    cursor: pointer;

    &:hover {
        color: #fff;
    }
}

.footer-col-item-l3 {
    font-size: 0.875rem;
    color: #ffffff73;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-brand-home {
    display: block;
    line-height: 0;
}

.footer-brand-logo {
    display: block;
    width: min(190px, 100%);
    height: auto;
    margin-bottom: 22px;
}

.footer-brand-tagline {
    margin: 0 0 10px;
    font-size: 0.9375rem;
    color: #fff;
}

.footer-brand-copy {
    margin: 0 0 24px;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #fff9;
}

.footer-brand-copy span {
    display: block;
    white-space: nowrap;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ffffff26;
    border-radius: 50%;
    background-color: #ffffff0f;
    text-decoration: none;
    color: #fff;
    transition: color 0.2s ease, background-color 0.2s ease,
        border-color 0.2s ease, transform 0.2s ease;
}

.footer-social-icon.is-pending {
    opacity: 0.38;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    a.footer-social-icon:hover {
        border-color: #fff;
        background-color: #fff;
        color: var(--c-navy);
        transform: translateY(-1px);
    }
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #ffffff73;
}

@media (width < 1100px) {
    .site-footer-top {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (width < 720px) {
    .site-footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

@media (width < 480px) {
    .site-footer-top {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-brand-copy {
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-social-icon {
        transition: none;
    }
}

/* ------------------------------- kolačići, podešavanja i kvadratić
   Plava #26539d je funkcionalna boja izbora, ne brend boja. */

.cookie-settings-card {
    width: 85vw;
    max-width: 900px;
    max-height: 80vh;
    padding: 3%;
    background-color: var(--c-bg);
    overflow-y: auto;
}

.cookie-settings-divider {
    width: 100%;
    height: 1px;
    margin: 2rem 0;
    background-color: #e3e3e3;
}

.cookie-settings-desc {
    margin-top: 1.5%;
    font-size: 0.9em;
    line-height: 1.6;
    color: #444;
}

.cookie-check {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1em;
    color: #000;
}

.cookie-check-box {
    position: relative;
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.75em;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    background-color: transparent;
}

.cookie-check-box.is-checked {
    border-color: var(--c-blue);
    background-color: var(--c-blue);

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 0.55em;
        height: 0.35em;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg) translate(0.04em, -0.025em);
    }
}

.cookie-check-box.is-locked {
    cursor: default;
}

.cookie-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    background-color: var(--c-alt);
    cursor: pointer;
    font-size: 0.8em;
    font-style: italic;
    color: #666;

    &:hover {
        background-color: #eee;
        color: #000;
    }
}

.cookie-table {
    width: 90%;
    margin: 20px auto 0;
    border-collapse: collapse;
    color: #444;
}

.cookie-table th,
.cookie-table td {
    padding: 10px 30px;
    border: 1px solid #e3e3e3;
    font: 500 13px Arial, sans-serif;
    text-align: left;
}

.cookie-table tr:first-child td:first-child {
    font-weight: 900;
    color: #000;
}

/* ======================================================================
   PODSTRANICE, drugi prolaz kroz njihov CSS
   ====================================================================== */

/* -------------------------------------------- hero podstranice
   .service-hero / .news-hero: #111, ogroman naslov, negativan spacing. */

.page-hero {
    position: relative;
    min-height: clamp(420px, 46vw, 720px);
    overflow: hidden;
    background-color: #111;
    color: #fff;
}

.page-hero-img {
    display: block;
    width: 100%;
    height: clamp(420px, 46vw, 720px);
    object-fit: cover;
}

.page-hero-content {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, 100vw - 48px);
    text-align: center;
}

.page-hero-eyebrow {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 3px;
    color: #ffffffc2;
}

.page-hero-title {
    margin: 0;
    font-size: clamp(48px, 5.4vw, 98px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.8px;
    color: #fff;
}

.page-hero-sub {
    margin: 26px auto 0;
    max-width: 760px;
    font-size: clamp(15px, 1.15vw, 20px);
    line-height: 1.7;
    color: #ffffffdb;
}

/* --------------------------------- servis, harmonika kartice
   .service-card: red slika, kartica se siri na hover kroz flex. */

.acc-cards {
    display: flex;
    height: clamp(340px, 40vw, 525px);
    overflow: hidden;
    background-color: #111;
}

.acc-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    transition: flex 0.45s ease;

    &:hover,
    &:focus-visible {
        flex: 2.2 1 0;
    }
}

.acc-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.acc-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0000000d, #000000b8);
}

.acc-card-content {
    position: absolute;
    inset: 0;
    padding: 42px 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}

.acc-card-title {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 26px);
    font-weight: 700;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .acc-card {
        transition: none;
    }
}

/* ------------------------------------ konfigurator modela
   .model-config: vodeni zig, bocna sidra, boje vozila. */

.config-watermark {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: clamp(120px, 20vw, 320px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    background-image: linear-gradient(180deg, #00000009, #00000001);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    user-select: none;
}

.config-anchors {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.config-anchor {
    display: grid;
    grid-template-columns: 2px auto;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #000c;
    transition: color 0.2s ease;

    &.is-active {
        color: #000;

        & .config-anchor-dot {
            background-color: #000;
        }
    }
}

.config-anchor-dot {
    width: 2px;
    height: 34px;
    background-color: #89898966;
    transition: background-color 0.2s ease;
}

.config-anchor-label {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.config-colors {
    display: flex;
    gap: 16px;
}

.config-color {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #f7fafc;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.2s ease;

    &.is-active {
        box-shadow: 0 0 0 2px #406a70;
    }
}

/* ------------------------------------------------ galerija modela */

.model-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.model-gallery-extra {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.model-gallery-item {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    cursor: pointer;

    &:hover .model-gallery-img {
        transform: scale(1.04);
    }
}

.model-gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.model-gallery-caption {
    position: absolute;
    inset-block-end: 18px;
    inset-inline-start: 22px;
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: #fff;
}

@media (width < 768px) {
    .model-gallery-grid,
    .model-gallery-extra {
        grid-template-columns: 1fr;
    }

    .acc-cards {
        flex-direction: column;
        height: auto;
    }

    .acc-card {
        min-height: 160px;
    }
}

/* ============================================ navigacija, dopune ==
   Prekidač jezika, drugi nivo u mega meniju i traka podmenija su
   postojali u vodiču ali nisu bili uvezani u header. */

.header-end {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
    justify-self: end;
}

/* Mobilni header je dvodelni raster: logo je levi oslonac, dok su tema,
   jezik i meni jedna kompaktna alatna grupa poravnata uz desnu ivicu. */
@media (width < 768px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.375rem;
    }

    .site-brand {
        min-width: 0;
    }

    .site-logo {
        height: 25px;
    }

    .header-end {
        grid-column: 2;
        gap: 0;
        min-width: 0;
    }

    .site-header .header-prekidac,
    .site-header .hamburger {
        flex: 0 0 auto;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 4px;
    }

    .site-header .header-jezik {
        width: 58px;
    }

    .site-header .header-ikona {
        width: 20px;
        height: 20px;
    }

    .site-header .hamburger {
        align-items: center;
        padding: 10px;
    }

    .site-header .hamburger-line {
        width: 24px;
    }
}

@media (width < 350px) {
    .site-logo {
        height: 23px;
    }

    .site-header .header-jezik {
        width: 54px;
    }
}

/* Drugi nivo u levoj koloni: karoserija unutar brenda. */
.mega-children {
    list-style: none;
    margin: 0;
    padding: 2px 0 4px 18px;
}

.mega-child-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: var(--c-muted);
    transition: color 0.2s ease;

    &:hover,
    &:focus-visible,
    &.is-active {
        color: var(--c-accent);
    }
}

/* Sakrivena kartica u mega mreži kada je izabrana karoserija. */
.mega-grid > .is-hidden {
    display: none;
}

/* Traka podmenija: ulaz kao mega meni, istom putanjom. */
.subnav {
    box-shadow: 0 22px 42px #0000001f;
}

/* ================================== sekcije 5–8 i footer, dopune ==
   Mreža tehnologije je 1:1 asimetrična .9fr / 1.1fr; leva kolona nosi
   dve kartice jedna ispod druge, desna jednu punu visinu. */




/* Naslov brend sekcije nadjačava globalne tamne naslove, ali ostaje u
   prirodnom zapisu: editorial kompozicija, ne reklamni verzal. */
.brand-showcase-title {
    text-transform: none;
    letter-spacing: -0.04em;
    color: #fff;
}

/* Video brzo menja svetlinu, pa mornarski veo drži stabilan kontrast. */
.brand-showcase-media::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 28, 44, 0.76) 0%,
            rgba(5, 28, 44, 0.3) 58%, rgba(5, 28, 44, 0.2) 100%),
        linear-gradient(180deg, rgba(5, 28, 44, 0.3) 0%,
            rgba(5, 28, 44, 0.08) 38%, rgba(5, 28, 44, 0.82) 100%);
}

/* ====================================== Dongfeng paleta, bina vozila ==
   .pv-model-showcase: bela sekcija, sve centrirano, bina preko cele
   širine ekrana. Tri nivoa filtera: pogon, karoserija, model. */

.showcase {
    padding: 120px 0;
    background-color: var(--c-bg);
    overflow: hidden;
}

.showcase-inner {
    width: var(--wrap);
    margin-inline: auto;
    text-align: center;
}

.showcase-inner .tech-eyebrow {
    margin-bottom: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
}

.showcase-inner .h-section {
    margin-bottom: clamp(2.25rem, 4vw, 3rem);
    letter-spacing: -0.025em;
}

.showcase-drives,
.showcase-bodies,
.showcase-models {
    width: min(1080px, 100%);
    margin-inline: auto;
}

.showcase-drives,
.showcase-bodies {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 3rem);
    border-block-end: 1px solid rgba(5, 28, 44, 0.1);
}

.showcase-drives {
    padding-inline: clamp(2.5rem, 5vw, 4rem);
    padding-block-end: 0.875rem;
}

.showcase-bodies {
    margin-top: 0;
    padding-inline: clamp(7rem, 15vw, 13rem);
    padding-block: 0.75rem;
}

/* Sva tri nivoa koriste isti jezik stanja: miran tekst i crvena podvlaka.
   Razlika u veličini pokazuje hijerarhiju, bez tri različita tipa kontrole. */
.filter-btn-plain {
    font-size: 1rem;
}

.showcase-models {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-top: 0;
    padding-block: 0.75rem 0.25rem;
    padding-inline: clamp(2.5rem, 5vw, 4rem);
}

.showcase .filter-btn,
.showcase .filter-model-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.625rem 0 0.5rem;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    font-family: var(--font-sans);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.showcase .filter-btn {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--c-ink);
}

.showcase-bodies .filter-btn {
    font-size: 1rem;
}

.showcase .filter-model-btn {
    font-size: 1rem;
    font-weight: 500;
}

.showcase .filter-btn.is-active {
    border-block-end-color: var(--c-accent);
    color: var(--c-accent);
}

.showcase .filter-model-btn.is-active {
    border-block-end-color: var(--c-accent);
    color: var(--c-ink);
}

/* Bina: slajdovi se preklapaju, vidljiv je samo aktivan. */
.showcase-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    column-gap: 12px;
    place-items: center;
    width: min(620px, 100%);
    min-height: clamp(280px, 34vw, 520px);
    /* Zbij ceo paket vozilo + strelice + naziv + CTA za 50 px naviše.
       Negativna margina menja i tok, pa sekcija zaista troši manje visine. */
    margin: -26px auto 8px;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.showcase-stage.is-dragging {
    cursor: grabbing;
}

.showcase-slide {
    grid-area: 1 / 2;
    margin: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    /* Ne animiraj opacity roditelja: međuvrednost pravi izolovan
       compositing sloj i JPEG bela pozadina nakratko probije multiply. */
    transition: none;
}

.showcase-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.showcase-slide.is-drag-settling {
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.showcase-stage.is-dragging .showcase-slide.is-active {
    will-change: transform;
}

/* Naše fotografije nisu isečene nego stoje na beloj, pa `multiply` mora
   da ostane: bez njega beli pravougaonik prekriva „duh" naziv iza vozila.
   Ovo pravilo je pisano za providne snimke globalne palete i gasilo je
   i `multiply` i meru po visini. */
.showcase-slide .car-stage-img {
    position: relative;
    z-index: 2;
    inline-size: auto;
    block-size: min(440px, 52vw);
    max-inline-size: 100%;
    /* Kvadratni menu snimci nose veliki beli prostor ispod vozila.
       Sažmi taj optički višak u toku; z-index ne menja geometriju. */
    margin-block-end: -3rem;
    /* Uvećaj samo vizuelni kadar: geometrija bine i GSAP pomeranje slajda
       ostaju netaknuti. Mobilni prikaz dobija zasebnu, blažu meru ispod. */
    scale: 1.2;
    mix-blend-mode: multiply;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.showcase-slide .car-stage-label {
    position: static;
    display: block;
    margin-top: 8px;
    transform: none;
}

.showcase-arrow {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--c-dim);
    transition: color 0.2s ease, transform 0.2s ease;

    &:hover,
    &:focus-visible {
        color: var(--c-ink);
    }

    &:active {
        transform: scale(0.94);
    }
}

.showcase-arrow-prev {
    translate: -35px 0;
}

.showcase-arrow-next {
    grid-column: 3;
    translate: 35px 0;
}

/* Duplo veći SVG daje duplo veći znak strelice, dok dostupna 44 px meta
   ostaje ista i ne menja širinu centralne bine. */
.showcase-arrow svg {
    inline-size: 48px;
    block-size: 48px;
    max-inline-size: none;
    flex: 0 0 auto;
}

.showcase-cta {
    margin: 8px 0 0;
}

@media (width < 768px) {
    .showcase-inner {
        width: calc(100% - 30px);
    }

    .showcase-drives,
    .showcase-bodies,
    .showcase-models {
        width: 100%;
        justify-content: flex-start;
        gap: 1.5rem;
        padding-inline: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .showcase-drives::-webkit-scrollbar,
    .showcase-bodies::-webkit-scrollbar,
    .showcase-models::-webkit-scrollbar {
        display: none;
    }

    .showcase .filter-btn,
    .showcase .filter-model-btn {
        scroll-snap-align: start;
    }

    /* Razmak pripada poslednjem redu filtera: on pomera binu vozila,
       dok pogon i karoserija ostaju na početnoj poziciji sekcije. */
    .filter-model-row.showcase-models {
        margin-block-end: 50px;
    }

    .showcase-stage {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        column-gap: 6px;
        min-height: clamp(210px, 64vw, 250px);
        /* Mobilno podizanje je blaže: 24 px → -11 px, odnosno 35 px. */
        margin-top: -11px;
    }

    .showcase-slide .car-stage-img {
        block-size: min(440px, 62.4vw);
        scale: 1.1;
    }

    .showcase-arrow-prev {
        translate: -12px 0;
    }

    .showcase-arrow-next {
        translate: 12px 0;
    }
}

/* Model koji ne pripada trenutnom pogonu/karoseriji se sklanja iz reda. */
.filter-model-btn.is-hidden {
    display: none;
}

/* ------------------------------------------ kolačići, dopune za sajt
   Traka i podešavanja iz dizajn sistema, uvezani u stranicu. */

.cookie {
    /* Iznad svega osim ničega: pitanje saglasnosti mora da bude dostupno. */
    z-index: 99999;
}

.cookie-card {
    box-shadow: 0 -2px 24px #00000014;
}

/* Prava kućica je skrivena; vidljivi kvadrat prati njeno stanje, pa
   tastatura i čitač ekrana rade bez dodatnog koda. */
.cookie-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cookie-check-input:checked + .cookie-check-box {
    border-color: var(--c-blue);
    background-color: var(--c-blue);
}

.cookie-check-input:checked + .cookie-check-box::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.55em;
    height: 0.35em;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(0.04em, -0.025em);
}

.cookie-check-input:focus-visible + .cookie-check-box {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.cookie-settings {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000080;
}

.cookie-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cookie-settings-close {
    padding: 0 4px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #666;
    transition: color 0.2s ease;

    &:hover {
        color: #000;
    }
}

.cookie-settings-actions {
    padding-top: 1.5rem;
    text-align: right;
}

/* Ulaz: traka klizi odozdo, dijalog bledi. */
.cookie-card,
.cookie-settings-card {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-card {
    transform: translateY(100%);
}

.cookie.is-open .cookie-card,
.cookie-settings.is-open .cookie-settings-card {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-card {
        transform: none;
    }
}

@media (width < 768px) {
    .cookie-main {
        padding: 20px 0;
    }

    .cookie-actions {
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
    }
}

/* ============================================== pravne stranice ==
   Jedna kolona teksta, mera širine za udobno čitanje. Header je fiksan
   i providan, pa stranica bez hero medija mora sama da napravi mesto. */

.page-legal {
    padding-top: var(--header-h);
}

/* Bez hero medija header nema preko čega da bude providan. */
.page-legal .site-header {
    background-color: var(--c-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 2px 8px #00000014;
}

.page-legal .header-prekidac {
    color: #000000c7;
}

.page-legal .header-prekidac {
    color: #000000c7;

    &:hover,
    &:focus-visible {
        color: #000;
    }
}

.page-legal .site-nav-link {
    color: #000000ad;

    & .site-nav-text::after {
        background-color: var(--c-accent);
    }

    &:hover,
    &:focus-visible,
    &[aria-expanded="true"] {
        color: #000;
    }
}

.page-legal .site-logo-light,
.page-legal .hamburger-line {
    display: none;
}

.page-legal .site-logo-dark {
    display: block;
}

.page-legal .hamburger .hamburger-line {
    display: block;
    background-color: #111;
}

.legal {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem);
}

.legal-wrap {
    width: min(72ch, 100vw - 2 * clamp(1.25rem, 5vw, 3rem));
    margin-inline: auto;
}

.legal-title {
    margin-bottom: 1.25rem;
}

.legal-lead {
    max-width: none;
    color: var(--c-body);
}

.legal-updated {
    margin-top: 0.75rem;
}

.legal-h2 {
    margin-top: 2.75rem;
    margin-bottom: 0.75rem;
}

.legal-h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    font-size: 1.0625rem;
}

.legal p {
    margin: 0 0 1rem;
    line-height: 1.7;
}

.legal-table {
    width: 100%;
    margin: 1.5rem 0 0;
    display: block;
    overflow-x: auto;
}

.legal-actions {
    margin-block: 1.5rem;
}

/* Ono što čeka podatke od klijenta, vidljivo obeleženo. */
.legal-pending {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--c-accent);
    background-color: var(--c-alt);
    color: var(--c-muted);

    & > p:first-child {
        margin: 0;
    }
}

.legal-pending-siroko {
    max-width: 72ch;
}

.legal-pending-odmak {
    margin-top: 1.5rem;
}

.legal-related {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line);
    font-size: 0.9375rem;
}

.legal a {
    color: var(--c-blue);
    text-underline-offset: 2px;

    &:hover {
        color: var(--c-accent);
    }
}

/* Naziv zapisa se ne lomi na crticu. */
.legal-table td:first-child {
    white-space: nowrap;
}

/* ============================================== česta pitanja ==
   Native <details>: radi bez JavaScripta, na tastaturi i u čitaču
   ekrana. Strelica se okreće preko [open], bez ikakvog skripta. */

.faq {
    margin-top: 2rem;
    border-top: 1px solid var(--c-line);
}

.faq-item {
    border-bottom: 1px solid var(--c-line);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--c-ink);
    list-style: none;
    transition: color 0.2s ease;

    &::-webkit-details-marker {
        display: none;
    }

    &::after {
        content: "";
        flex-shrink: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform 0.3s ease;
    }

    &:hover,
    &:focus-visible {
        color: var(--c-accent);
    }
}

.faq-item[open] .faq-q {
    color: var(--c-accent);

    &::after {
        transform: rotate(225deg) translate(-2px, -2px);
    }
}

.faq-a {
    padding-bottom: 1.5rem;
    max-width: 62ch;

    & p {
        margin: 0 0 0.875rem;
        line-height: 1.7;
    }

    & ul {
        margin: 0 0 0.875rem;
        padding-left: 1.25rem;
    }

    & li {
        margin-bottom: 0.625rem;
        line-height: 1.7;
    }

    & p:last-child,
    & ul:last-child {
        margin-bottom: 0;
    }
}

.faq-pending-list {
    margin: 0;
    padding-left: 1.25rem;

    & li {
        margin-bottom: 0.5rem;
        line-height: 1.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-q::after {
        transition: none;
    }
}

/* ==================================== unutrašnje stranice, zaglavlje ==
   Stranica bez hero medija: header je beo, a naslovni blok pravi mesto
   ispod fiksnog headera. */

.page-inner {
    padding-top: var(--header-h);
}

.page-inner .site-header {
    background-color: var(--c-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 2px 8px #00000014;
}

.page-inner .header-prekidac {
    color: #000000c7;

    &:hover,
    &:focus-visible {
        color: #000;
    }
}

.page-inner .site-nav-link {
    color: #000000ad;

    & .site-nav-text::after {
        background-color: var(--c-accent);
    }

    &:hover,
    &:focus-visible,
    &[aria-expanded="true"] {
        color: #000;
    }
}

.page-inner .site-logo-light {
    display: none;
}

.page-inner .site-logo-dark {
    display: block;
}

.page-inner .hamburger-line {
    background-color: #111;
}

.page-head {
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 2vw, 1.5rem);
}

.page-head-lead {
    margin-top: 1rem;
    color: var(--c-muted);
}

/* -------------------------------------------------- filteri u redovima */

.page-vozila .wrap {
    width: min(1200px, calc(100vw - 80px));
}

.vozila-filters {
    display: grid;
    gap: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    border-block: 1px solid var(--c-line);
}

.vozila-filters .filter-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    min-block-size: 4.75rem;
}

.vozila-filters .filter-row + .filter-row {
    border-block-start: 1px solid var(--c-line);
}

.vozila-filters .filter-label {
    flex: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.vozila-filters .filter-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: clamp(1.25rem, 3vw, 3rem);
    min-inline-size: 0;
}

.vozila-filters .filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    min-block-size: 44px;
    padding: 0.625rem 0 0.5rem;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--c-ink);
}

.vozila-filters .filter-btn.is-active {
    border-block-end-color: var(--c-accent);
    color: var(--c-accent);
}

.drive-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    margin-block: 1.25rem 0;
    padding: 1rem 1.125rem;
    border: 1px solid color-mix(in srgb, var(--c-line) 75%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, #e5f5eb 38%, var(--c-bg));
    color: var(--c-body);
}

.drive-info-icon {
    flex: none;
    margin-block-start: 0.1rem;
    color: #146c43;
}

.drive-info p {
    max-inline-size: 88ch;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65;
}

.drive-info a {
    font-weight: 600;
    text-underline-offset: 2px;
    color: var(--c-ink);
}

.vozila-count {
    margin: 1.25rem 0 1.5rem;
    font-size: 0.875rem;
    color: var(--c-faint);
}

.vozila-count {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.vozila-reset {
    margin-left: 0.5rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: inherit;
    color: var(--c-accent);
}

@media (width < 900px) {
    .vozila-filters .filter-row {
        display: block;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        min-block-size: 0;
        padding-block: 0.75rem;
    }

    .vozila-filters .filter-label {
        display: block;
        margin-block-end: 0.25rem;
    }

    .vozila-filters .filter-rail {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 1.5rem;
        inline-size: 100%;
        max-inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .vozila-filters .filter-rail::-webkit-scrollbar {
        display: none;
    }

    .vozila-filters .filter-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

@media (width < 640px) {
    .page-vozila .wrap {
        width: calc(100vw - 32px);
    }

    .drive-info {
        gap: 0.625rem;
        padding: 0.875rem;
    }
}

/* ========================================= landing stranice brendova ==
   Jedan zajednički sistem za svih pet brendova: znak kao glavni naslovni
   element, dve mirne filter šine i mreža kartica bez ponovljenog brenda. */

.brand-page .wrap {
    width: min(1200px, calc(100vw - 80px));
}

.brand-page-title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.brand-masthead {
    padding-block: clamp(2rem, 5vw, 4.5rem) 0;
}

.brand-masthead-mark {
    display: grid;
    min-block-size: 7rem;
    place-items: center;
    margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.brand-masthead-logo {
    display: block;
    max-inline-size: min(78vw, 18.5rem);
}

.brand-filters {
    gap: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-block: 0;
    border-block: 1px solid var(--c-line);
}

.brand-filters .filter-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    min-block-size: 4.75rem;
}

.brand-filters .filter-row + .filter-row {
    border-block-start: 1px solid var(--c-line);
}

.brand-filters .filter-label {
    flex: none;
    color: var(--c-muted);
}

.brand-filters .filter-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: clamp(1.25rem, 3vw, 3rem);
    min-inline-size: 0;
}

.brand-filters .filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    min-block-size: 44px;
    padding: 0.625rem 0 0.5rem;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--c-ink);
}

.brand-filters .filter-btn.is-active {
    border-block-end-color: var(--c-accent);
    color: var(--c-accent);
}

.brand-model-count-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
}

.brand-model-count {
    margin: 0;
}

.brand-model-count-row .vozila-reset {
    margin-inline-start: 0;
}

.brand-model-section {
    padding-block: clamp(1.75rem, 3vw, 3rem) clamp(5rem, 8vw, 7.5rem);
}

:is(.brand-model-grid, .vehicle-catalog-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card {
    min-block-size: 100%;
    padding: 1.75rem 1.75rem 2.75rem;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--c-card);
    transition: background-color 100ms ease-out;
}

/* Globalni hover kartice se ovde prvo neutrališe; aktivira se samo za miš
   i trackpad u pointer media upitu niže. */
:is(.brand-model-grid, .vehicle-catalog-grid) .car-card:hover {
    background-color: var(--c-card);
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card:hover .car-card-img {
    transform: none;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card:active {
    background-color: #e6e8eb;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card:focus-visible {
    outline-offset: 4px;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card::after {
    content: "";
    position: absolute;
    inset-inline-end: 1.75rem;
    inset-block-end: 1.75rem;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-block-start: 1.5px solid var(--c-ink);
    border-inline-end: 1.5px solid var(--c-ink);
    transform: rotate(45deg);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-model-grid .car-card-brand {
    display: none;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card-name {
    max-inline-size: calc(100% - 4.5rem);
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card-variants {
    min-block-size: 0;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card-variants:empty {
    display: none;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card-figure {
    margin-block-start: 1.25rem;
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card-ghost {
    inset-block-start: 5%;
    font-size: clamp(3.25rem, 7vw, 6.25rem);
    letter-spacing: -0.03em;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.075),
        rgba(0, 0, 0, 0.025) 52%,
        transparent
    );
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card-img {
    inline-size: 104%;
    max-inline-size: none;
    margin-inline: -2%;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

:is(.brand-model-grid, .vehicle-catalog-grid) .car-card-tag {
    inset-block-start: 1.75rem;
    inset-inline-end: 1.75rem;
}

@media (hover: hover) and (pointer: fine) {
    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card:hover {
        background-color: #eceef1;
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card:hover .car-card-img {
        transform: translateY(-3px) scale(1.025);
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card:hover::after {
        transform: translateX(3px) rotate(45deg);
    }
}

@media (width < 1024px) {
    :is(.brand-model-grid, .vehicle-catalog-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width < 640px) {
    .brand-page .wrap {
        width: calc(100vw - 32px);
    }

    .brand-masthead {
        padding-block-start: 1.5rem;
    }

    .brand-masthead-mark {
        min-block-size: 6rem;
        margin-block-end: 1.5rem;
    }

    .brand-masthead-logo {
        max-inline-size: min(76vw, 16rem);
    }

    .brand-filters .filter-row {
        display: block;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        min-block-size: 0;
        padding-block: 0.75rem;
    }

    .brand-filters .filter-label {
        display: block;
        margin-block-end: 0.25rem;
    }

    .brand-filters .filter-rail {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 1.5rem;
        inline-size: 100%;
        max-inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .brand-filters .filter-rail::-webkit-scrollbar {
        display: none;
    }

    .brand-filters .filter-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .brand-model-count-row {
        justify-content: flex-start;
        margin-block-start: 1rem;
    }

    .brand-model-section {
        padding-block: 1.5rem 5rem;
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card {
        padding: 1.5rem 1.5rem 2.5rem;
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card::after {
        inset-inline-end: 1.5rem;
        inset-block-end: 1.5rem;
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card-tag {
        inset-block-start: 1.5rem;
        inset-inline-end: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card,
    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card::after,
    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card-img {
        transition: none;
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card:hover .car-card-img {
        transform: none;
    }

    :is(.brand-model-grid, .vehicle-catalog-grid) .car-card:hover::after {
        transform: rotate(45deg);
    }
}

/* ================================================ stranica modela ==
   Hero je split: tekst levo, vozilo desno sa „duh" nazivom iza. */

/* Putanja levo, prečice do sekcija desno, u istom redu. */
.crumbs-red-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
}

.sidra {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-block: 1.25rem 0;
    font-size: 0.875rem;

    & a {
        color: var(--c-muted);
        text-decoration: none;
        transition: color 0.25s ease;

        &:hover,
        &:focus-visible {
            color: var(--c-dugme);
        }
    }
}

@media (width < 860px) {
    .sidra {
        display: none;
    }
}

.crumbs {
    padding-block: 1.25rem 0;
    font-size: 0.875rem;
    color: var(--c-faint);

    & a {
        color: var(--c-muted);
        text-decoration: none;

        &:hover {
            color: var(--c-accent);
        }
    }

    & span[aria-hidden] {
        margin-inline: 0.5rem;
    }
}

/* Heroj uvek zauzima ceo ekran: `dvh` da se na telefonu ne skače kad se
   traka brauzera sklapa. */
/* Heroj je tačno jedan ekran ispod fiksnog headera: `100dvh` bi mu gurnulo
   donjih 60 px van kadra. Bez sopstvenih razmaka — sekcija dimenzija
   naleže odmah na njega. */
.model-hero {
    display: flex;
    align-items: center;
    min-block-size: calc(100vh - var(--header-h));
    min-block-size: calc(100dvh - var(--header-h));
    padding-block: 0;
}

.model-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Dimenzije: prava slika određuje odnos i visinu sekcije, a mere stoje na
   njoj, u tamnom podnožju kadra. */
.dimenzije {
    display: grid;
    background-color: #181818;
    color: #fff;
}

.dimenzije-slika,
.dim-mere {
    grid-area: 1 / 1;
}

.dimenzije-slika {
    display: block;
    width: 100%;
    height: auto;
    align-self: stretch;
    object-fit: cover;
}

/* Preliv ispod mera: fotografije nisu jednake svetline — T5 ima tamno
   podnožje, Friday skoro belo, gde bi beo tekst pao na 1,3:1. Preliv radi
   samo u donjoj trećini kadra i na tamnim snimcima se jedva primeti. */
.dim-mere {
    position: relative;
    z-index: 1;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width: 100%;
    margin: 0;
    padding-inline: clamp(1.25rem, 4vw, 4rem);
    padding-block: 14% 4%;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--c-navy) 78%, transparent) 0%,
        color-mix(in srgb, var(--c-navy) 58%, transparent) 22%,
        color-mix(in srgb, var(--c-navy) 26%, transparent) 52%,
        transparent 100%
    );
    list-style: none;
    text-align: center;

    & li {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }
}

/* Broj nosi sekciju: velik, tanak i sa skupljenim razmakom, kako veliki
   stepen i traži. `tabular-nums` je uslov za brojanje — bez njega cifre
   menjaju širinu i red poskakuje dok broj raste. */
.dim-broj {
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.dim-oznaka {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    color: rgb(255 255 255 / 0.62);
}

@media (width < 700px) {
    .dim-mere {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }
}

.model-hero-brand {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.model-hero-name {
    margin: 0.375rem 0 0;
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.model-hero-variants {
    margin: 0.75rem 0 0;
    color: var(--c-muted);
}

.model-switch {
    width: fit-content;
    margin-block-start: 1.25rem;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--c-line) 82%, transparent);
    border-radius: 6px;
    display: inline-flex;
    align-items: stretch;
    background: color-mix(in srgb, var(--c-card) 78%, var(--c-bg));
}

.model-switch-option {
    min-block-size: 44px;
    padding-inline: 1rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--c-muted);
    text-decoration: none;
    transition: background-color 140ms ease-out, color 140ms ease-out;
}

.model-switch-option.is-current {
    background: var(--c-bg);
    box-shadow: 0 1px 4px rgb(5 28 44 / 0.12);
    color: var(--c-ink);
}

@media (hover: hover) and (pointer: fine) {
    a.model-switch-option:hover {
        background: color-mix(in srgb, var(--c-bg) 64%, transparent);
        color: var(--c-ink);
    }
}

a.model-switch-option:active {
    background: color-mix(in srgb, var(--c-ink) 8%, var(--c-bg));
}

.model-meta {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.model-meta-badge {
    position: relative;
    min-block-size: 28px;
    padding: 0.35rem 0.55rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.055em;
}

.model-meta-badge--body {
    background: color-mix(in srgb, var(--c-card) 82%, var(--c-bg));
    color: var(--c-body);
}

@media (width < 480px) {
    .model-switch {
        width: 100%;
    }

    .model-switch-option {
        flex: 1 1 50%;
        padding-inline: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .model-switch-option {
        transition: none;
    }
}

.model-hero-tagline {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.model-hero-lead {
    max-width: 58ch;
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-body);
}

/* Srodni modeli dele isti vertikalni slot za opis. Nevidljivi tekst druge
   varijante meri stvarno prelamanje na svakoj širini, pa naslov, cena i CTA
   ostaju na istim koordinatama bez hardkodovanih desktop/mobile visina. */
.model-hero-lead-slot {
    max-width: 58ch;
    margin: 0.75rem 0 0;
    display: grid;
}

.model-hero-lead-slot .model-hero-lead {
    grid-area: 1 / 1;
    margin: 0;
}

.model-hero-lead-sizer {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.model-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.625rem;
    margin: 2rem 0 0;

    & .model-price-label {
        font-size: 0.8125rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--c-muted);
    }

    & .model-price-value {
        font-size: clamp(1.75rem, 3.5vw, 2.5rem);
        font-weight: 700;
        line-height: 1.1;
        color: var(--c-ink);
    }

    & .model-price-special {
        color: var(--c-accent);
    }

    & .model-price-note {
        font-size: 0.875rem;
        color: var(--c-muted);
    }

    /* Standardna cena ide u svoj red, ispod specijalne. */
    & .model-price-standard {
        flex-basis: 100%;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: var(--c-muted);
    }
}

.model-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0 0;
}

/* Suptilni linkovi ka dokumentima na dnu stranice. */
.model-hero-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.25rem 0 0;
}

.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--c-body);
    text-decoration: none;
    transition: color 0.25s ease;

    &:hover {
        color: var(--c-accent);
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }
}

.doc-link-icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--c-accent);
}

.model-hero-figure {
    position: relative;
}

.model-hero-figure .car-card-ghost {
    inset-block-start: 2%;
    font-size: clamp(3rem, 12vw, 8rem);
}

.model-hero-img {
    position: relative;
    display: block;
    width: 100%;
    mix-blend-mode: multiply;
}

/* ------------------------------------------------------- galerija */

/* Poravnati redovi. Svaka pločica dobija širinu srazmernu svom odnosu
   stranica (`--odnos`, pročitan iz same slike), pa red ide od ivice do
   ivice bez rupa, a `aspect-ratio` daje istu visinu svima u redu — bez
   sečenja. Panoramski kadar ostaje panoramski, uspravan ostaje uspravan. */
.galerija-sekcija {
    padding-block: 100px;

    /* Naslov galerije je crven, na svim stranicama vozila. Ostali naslovi
       sekcija ostaju tamni. */
    & .h-section {
        color: var(--c-accent);
    }
}

/* Model ispod naslova sekcije: brend i naziv u jednom redu. */
.sekcija-model {
    margin-block: 1.25rem 50px;
}

.sekcija-naziv {
    margin: 0 0 0.5rem;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.sekcija-brend {
    color: var(--c-muted);
}

/* Naslov druge mreže. Isti ključ kao naslov sekcije, samo manji, pa se
   vidi da je enterijer deo galerije a ne nova sekcija. */
.galerija-grupa {
    margin: 3.5rem 0 1.25rem;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--c-accent);
}

.model-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;

    /* Ciljana visina reda; stvarna se po redu doteruje sama. */
    --red: 15rem;
}

.model-gallery-item {
    --odnos: 1.5;
    flex: var(--odnos) 1 calc(var(--odnos) * var(--red));
    aspect-ratio: var(--odnos);
    overflow: hidden;
    background-color: var(--c-surface);

    /* Simetrična ease-in-out kriva: isto meko kreće i isto meko staje, i
       na ulazu i na izlazu — takva kriva je sama sebi obrnuta, pa se
       povratak poklapa sa odlaskom. `translateZ(0)` drži sliku na
       grafičkom sloju, pa se ne prekucava svaki kadar. */
    & img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1) translateZ(0);
        transform-origin: center;
        backface-visibility: hidden;
        transition: transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
    }

    &:hover img,
    &:focus-within img {
        transform: scale(1.04) translateZ(0);
    }

    &:hover .model-gallery-znak,
    &:focus-within .model-gallery-znak {
        opacity: 0.3;
    }
}

/* Znak se pojavljuje u sredini sličice na prelaz. */
.model-gallery-znak {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    display: block;
    inline-size: 100px;
    block-size: 100px;
    opacity: 0;
    pointer-events: none;
    /* Ista kriva kao uvećanje, da znak i slika idu zajedno. */
    transition: opacity 0.7s cubic-bezier(0.45, 0, 0.55, 1);

    & img {
        inline-size: 100%;
        block-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .model-gallery-item img,
    .model-gallery-znak {
        transition: none;
    }

    .model-gallery-item:hover img {
        transform: none;
    }
}

/* Bez ovoga bi se dve preostale slike u poslednjem redu razvukle
   preko celog ekrana. Punjači upiju višak i nemaju visinu. */
.model-gallery-punjac {
    flex: 1.6 1 calc(1.6 * var(--red));
    block-size: 0;
}

.model-gallery-btn {
    block-size: 100%;
}

@media (width < 900px) {
    .model-gallery {
        --red: 11rem;
    }
}

@media (width < 560px) {
    .model-gallery {
        --red: 8rem;
        gap: 0.5rem;
    }
}

.model-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}

@media (width < 768px) {
    .model-hero-inner {
        grid-template-columns: 1fr;
    }
}

/* ================================ tehnički podaci, uputstvo, ikone ==
   Parovi u mreži umesto tabele: na mobilnom se slažu u jednu kolonu i
   nema horizontalnog skrola, koji je na tabeli bio neizbežan. */

.icon,
.spec-icon,
.dok-ikona {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
    flex-shrink: 0;
}

.spec-sekcija {
    padding-block: 100px;
}

/* Ivice nosi svaka ćelija, ne razmak u mreži: prazna mesta na kraju reda
   tako ostaju nevidljiva umesto da se ocrtaju kao prazan kvadrat.
   Četiri kolone, pa tri, dve i jedna kako se prostor smanjuje. */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
    margin: 0;
    border-top: 1px solid var(--c-line);
}

/* Poslednji red nema donju ivicu: prepoznaje se kao ćelija koja je i prva
   u svom redu i među poslednjih N, pa ona i sve iza nje gube ivicu. Radi
   za bilo koji broj stavki; svako pravilo važi samo u svom opsegu, da se
   ne preklapaju. */
@media (width >= 1200px) {
    .spec-item:nth-child(4n + 1):nth-last-child(-n + 4),
    .spec-item:nth-child(4n + 1):nth-last-child(-n + 4) ~ .spec-item {
        border-bottom: 0;
    }
}

@media (width < 1200px) {
    .spec-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (900px <= width < 1200px) {
    .spec-item:nth-child(3n + 1):nth-last-child(-n + 3),
    .spec-item:nth-child(3n + 1):nth-last-child(-n + 3) ~ .spec-item {
        border-bottom: 0;
    }
}

@media (width < 900px) {
    .spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

@media (560px <= width < 900px) {
    .spec-item:nth-child(2n + 1):nth-last-child(-n + 2),
    .spec-item:nth-child(2n + 1):nth-last-child(-n + 2) ~ .spec-item {
        border-bottom: 0;
    }
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--c-line);
}

.spec-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--c-muted);
}

.spec-icon {
    color: var(--c-dim);
}

.spec-value {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}

/* Jedinica je tiša od broja: broj je ono što se čita. */
.spec-unit {
    margin-left: 0.3em;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-faint);
}

/* Vrednosti koje su tekst, ne broj, ne treba da vrište. */
.spec-item:has(.spec-value:not(:has(.spec-unit))) .spec-value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.spec-source {
    margin: 1.25rem 0 0;
    max-width: 62ch;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--c-faint);
}

/* ================================================== dokumenta za preuzimanje
   Do tri po redu, uvek iste širine, pa red ostaje miran i kad model ima
   samo jedan dokument. */



.dok-red {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dok {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    block-size: 100%;
    min-block-size: 72px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-bg);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-ink);
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;

    &:hover,
    &:focus-visible {
        background-color: #f9f9f9;
        border-color: var(--c-body);
    }
}

.dok-ikona {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: 0 0 auto;
    color: var(--c-accent);
}

@media (width < 1100px) {
    .dok-red {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width < 700px) {
    .dok-red {
        grid-template-columns: 1fr;
    }
}







/* Oprema u dve kolone: sve grupe otvorene, ništa se ne krije iza kartica. */
.oprema-kolone {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 3rem;
}

.oprema-naslov {
    margin: 0 0 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--c-line);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--c-accent);
}


.oprema-spisak {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (width < 720px) {
    .oprema-kolone {
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
    }
}

.equip-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--c-body);

    & .equip-icon {
        width: 1.25rem;
        height: 1.25rem;
        flex: 0 0 auto;
        margin-top: 0.125rem;
        color: var(--c-accent);
        fill: none;
    }
}

@media (width < 560px) {
    .equip-list {
        grid-template-columns: 1fr;
    }

}

/* ================================================ uvećan prikaz slike
   Native <dialog>: brauzer vodi fokus, Escape i podlogu. */

/* Bez sopstvenog prelaza na slici: uvećanje i znak vodi
   `.model-gallery-item`. Ranije su se dva prelaza borila, pa je slika
   isticala na 0,25 s dok je uvećanje išlo na 0,7 s — otud trzaj. */
.model-gallery-btn {
    position: relative;
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.lightbox {
    max-inline-size: 100vw;
    max-block-size: 100vh;
    max-block-size: 100dvh;
    inline-size: 100vw;
    block-size: 100vh;
    block-size: 100dvh;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--c-dark) 94%, transparent);

    &::backdrop {
        background: color-mix(in srgb, var(--c-dark) 82%, transparent);
    }
}

.lightbox-img {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    max-inline-size: min(92vw, 1600px);
    max-block-size: 86vh;
    max-block-size: 86dvh;
    inline-size: auto;
    block-size: auto;
}

.lightbox-zatvori,
.lightbox-nazad,
.lightbox-napred {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, #fff 14%, transparent);
    cursor: pointer;
    color: #fff;
    transition: background-color 0.25s ease;

    &:hover,
    &:focus-visible {
        background: var(--c-accent);
    }

    & svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }
}

.lightbox-zatvori {
    inset: 1.25rem 1.25rem auto auto;
}

.lightbox-nazad {
    inset: 50% auto auto 1.25rem;
    translate: 0 -50%;
}

.lightbox-napred {
    inset: 50% 1.25rem auto auto;
    translate: 0 -50%;
}

/* Ispod slike: naziv modela pa redni broj. */
.lightbox-broj {
    position: absolute;
    inset: auto 0 1.25rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    text-align: center;
}

.lightbox-model {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
}

.lightbox-red {
    font-size: 0.8125rem;
    color: color-mix(in srgb, #fff 60%, transparent);
}

@media (width < 640px) {
    .lightbox-nazad {
        inset: auto auto 1.25rem calc(50% - 4.5rem);
        translate: 0;
    }

    .lightbox-napred {
        inset: auto calc(50% - 4.5rem) 1.25rem auto;
        translate: 0;
    }

    .lightbox-broj {
        inset-block-end: 5.5rem;
    }
}

/* ================================================= sekcija sa videom
   Kolone se ne polove: desna je široka koliko traži mera teksta, leva
   uzima ostatak. Tako na 2K ekranu nema praznog žleba ni razvučenih
   praznina — po Apple pravilu da svaka vrednost mora da se brani. */

/* Sekcija je na beloj podlozi, pa je galerija ispod nje jasno odvojena
   svojom sivom. Razmak odozgo je isti kao kod ostalih sekcija: iznad nje
   više nije heroj nego sekcija dimenzija. */
.vsek-sekcija {
    container-type: inline-size;
    padding-block: 100px;
}

.vsek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 33rem);
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: stretch;
}

/* Naslov: veliki stepen traži zbijenije razmake, i po slovu i po redu.
   Stoji u jednom redu svuda gde ima mesta; na uskom ekranu se prelama
   prirodno, jer bi u jednom redu morao da postane nečitljivo sitan. */
.vsek-naslov {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--c-ink);
}

@container (width >= 52rem) {
    .vsek-naslov {
        white-space: nowrap;
    }
}

/* ========================================== stalna traka na stranici modela
   Providan sloj preko sadržaja, po Apple pravilu da plutajuća hromiranost
   ne uzima traku ekrana nego lebdi nad njim. Svetla gornja ivica je odsjaj
   na materijalu. Skriva se iz toka fokusa dok se ne pojavi. */

.cta-traka {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    padding-block-end: env(safe-area-inset-bottom, 0);
    background: color-mix(in srgb, var(--c-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-block-start: 1px solid color-mix(in srgb, #fff 60%, var(--c-line));
    box-shadow: 0 -8px 32px color-mix(in srgb, var(--c-dark) 10%, transparent);

    /* Ulazi odozdo uz bledenje; dok ne uđe, ne prima ni fokus ni klik. */
    visibility: hidden;
    opacity: 0;
    translate: 0 100%;
    transition: opacity 0.45s cubic-bezier(0.45, 0, 0.55, 1),
                translate 0.45s cubic-bezier(0.45, 0, 0.55, 1),
                visibility 0s linear 0.45s;

    &.is-vidljiva {
        visibility: visible;
        opacity: 1;
        translate: 0 0;
        transition-delay: 0s;
    }
}

.cta-traka-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    inline-size: var(--wrap);
    margin-inline: auto;
    block-size: 80px;
}

.cta-traka-ime {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-ink);
}

.cta-traka-brend,
.cta-traka-karoserija {
    font-weight: 400;
    color: var(--c-muted);
}

.cta-traka-cena {
    font-weight: 800;
    color: var(--c-accent);
}

.cta-traka-pdv {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--c-muted);
}

.cta-traka-std {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--c-muted);
}

.cta-traka-docs {
    display: flex;
    gap: 1.25rem;
    margin: 0;
}

.cta-traka-akcije {
    display: flex;
    gap: 0.625rem;
    margin: 0;

    /* 44 px je i najmanji siguran dodir i visina dugmeta „na vrh", pa se
       ceo red poravna na istu meru. */
    & .btn {
        display: inline-flex;
        align-items: center;
        min-block-size: 44px;
        padding-block: 0;
        white-space: nowrap;
    }
}

/* Tablet: dokumenti odlaze — u stranici su na dohvat — a ostaje ono što
   traka jedino i treba da nosi: koji je model, koliko košta, šta dalje. */
@media (width < 1100px) {
    .cta-traka-docs {
        display: none;
    }

    .cta-traka-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Telefon: jedna radnja, preko cele širine, i cena iznad nje. Dva reda
   umesto tri kolone; dodir ostaje iznad 44 px. */
@media (width < 720px) {
    .cta-traka-inner {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        block-size: auto;
        padding-block: 0.75rem;
    }

    .cta-traka-std {
        display: none;
    }

    .cta-traka-akcije {
        & .btn {
            flex: 1 1 0;
            min-block-size: 44px;
            padding-inline: 0.75rem;
            text-align: center;
        }

        /* „Zatraži ponudu" ostaje, ali užа: primarna radnja vodi. */
        & .btn:first-child {
            flex-grow: 0.7;
        }
    }
}

/* Dugme „na vrh" se uklapa u red trake: iste visine kao dugmad, isto
   oštrih ivica i iste crvene, tik uz desnu ivicu mreže. Traka mu ostavlja
   mesto, pa se ništa ne preklapa. */
body.ima-cta-traku .back-to-top {
    inset-block-end: 18px;
    z-index: 9999;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 2px;
    opacity: 1;
}

@media (width >= 720px) {
    .cta-traka-inner {
        padding-inline-end: calc(44px + 0.625rem);
    }
}

/* Telefon: traka nosi dva reda, pa dugme ide iznad nje umesto u red. */
@media (width < 720px) {
    .back-to-top {
        display: none;
    }

    body.ima-cta-traku .back-to-top {
        inset-block-end: 80px;
        translate: 0 -36px;
    }
}

/* Providnost se gasi kad korisnik traži manje prozirnosti ili više
   kontrasta; pokret se svodi na bledenje. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .cta-traka {
        background: var(--c-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-block-start-color: var(--c-body);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-traka {
        translate: none;
        transition: opacity 0.2s linear, visibility 0s linear 0.2s;
    }

    .cta-traka.is-vidljiva {
        translate: none;
    }
}

/* Radna oznaka: tekst je napisao AI, čeka klijentov. */
.ai-oznaka {
    display: inline-block;
    /* U fleks koloni bi se inače razvukla preko cele širine. */
    align-self: start;
    margin: 0 0 1rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--c-accent);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-accent);
}

/* Uvodni pasus vodi sekciju: pola širine, krupniji od tela teksta. */
.vsek-lead {
    width: 50%;
    margin: 0 0 clamp(2rem, 3.5vw, 3rem);
    font-size: clamp(1.0625rem, 1.15vw, 1.2rem);
    line-height: 1.6;
    color: var(--c-body);
}

/* Model koji još nema tekst: snimak uzima celu širinu umesto da desna
   kolona ostane prazna. */
.vsek-sam-video {
    grid-template-columns: 1fr;

    & .vsek-lepljivo {
        position: static;
    }
}

.vsek-video {
    position: relative;
}

.vsek-lepljivo {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
}

/* Tekst je jedan tok, ne četiri odvojena bloka: bliski razmaci ih vezuju
   u istu misao. Bez prigušivanja — sivo na sivom se ne čita. */
.vsek-tekst {
    display: flex;
    flex-direction: column;
    /* Sa podnaslovima celine su vidljivo odvojene, pa razmak može biti
       veći nego kad su bile goli pasusi. */
    gap: 2rem;
}

.vsek-celina {
    & .vsek-p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.65;
        letter-spacing: 0;
        color: var(--c-body);
    }
}

/* Podnaslov celine: crven, sa kratkom sivom crtom ispod njega. */
.vsek-podnaslov {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-accent);

    &::after {
        content: "";
        display: block;
        inline-size: 30%;
        block-size: 1px;
        margin-block: 0.625rem 20px;
        background: #ccc;
    }
}

.vokvir {
    position: relative;
    overflow: hidden;
    block-size: 100%;
    border-radius: 8px;
    background: var(--c-dark);

    /* Snimak je 2,11:1 unutar 16:9 okvira, pa crne trake dolaze iz samog
       materijala; uvećanje ih izbacuje iz kadra. */
    & .vokvir-video {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transform: scale(1.19);
    }
}

.vokvir-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 0;
    background: color-mix(in srgb, var(--c-dark) 30%, transparent);
    cursor: pointer;
    font: inherit;
    color: #fff;

    &[hidden] {
        display: none;
    }
}

@container (width < 60rem) {
    .vsek {
        grid-template-columns: 1fr;
    }

    .vsek-lead {
        width: 100%;
    }

    .vsek-lepljivo {
        position: static;
    }

    .vsek-video .vokvir {
        aspect-ratio: 16 / 9;
        block-size: auto;
    }
}

/* Podnaslov unutar sekcije: ista mera kao naziv modela, bez sive. */
.pod-naslov {
    margin: 0 0 2rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.wltp {
    margin-top: 3.5rem;
}

/* Faze su kolone, veličine redovi; zaglavlje stoji iznad. */
.wltp-tabela {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;

    & th,
    & td {
        padding: 0.875rem 1rem 0.875rem 0;
        text-align: start;
        border-block-end: 1px solid var(--c-line);
    }

    & thead th {
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--c-muted);
        border-block-end-color: var(--c-body);
    }

    & tbody th {
        font-weight: 600;
        color: var(--c-ink);
    }

    & tbody td {
        font-weight: 400;
        color: var(--c-ink);
        font-variant-numeric: tabular-nums;
    }

    & tbody tr:last-child th,
    & tbody tr:last-child td {
        border-block-end: 0;
    }
}

/* Uzak ekran: tabela se prelama u parove naziv–vrednost po fazi. */
@media (width < 900px) {
    .wltp-tabela {
        display: block;

        & thead {
            display: none;
        }

        & tbody,
        & tr {
            display: block;
        }

        & tr {
            padding-block: 0.75rem;
            border-block-end: 1px solid var(--c-line);
        }

        & th,
        & td {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.25rem 0;
            border: 0;
        }

        & tbody td::before {
            content: attr(data-faza);
            font-weight: 400;
            color: var(--c-muted);
        }
    }
}

.model-colors {
    margin-top: 3rem;

    & .h-card {
        margin-bottom: 0.875rem;
    }

    & .h-card + .color-list + .h-card {
        margin-top: 2rem;
    }
}

/* Isti h4 kao grupe u opremi, da se dve sekcije čitaju u istom ključu.
   Prvi u sekciji ide odmah ispod naziva modela, pa nema gornji razmak. */
.colors-sub {
    margin: 2.5rem 0 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--c-line);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--c-accent);

    &:first-child {
        margin-top: 0;
    }
}

.color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.color-item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--c-body);
}

/* Uzorak boje iz cenovnika. Preliv je aproksimacija štampanog uzorka, pa
   nosi i tanku unutrašnju liniju da se svetle nijanse vide na beloj. */
.color-chip {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
    background: var(--c-surface);
}

.color-note {
    max-width: 62ch;
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--c-muted);
}

@media (width < 560px) {
    .spec-grid {
        grid-template-columns: 1fr;
    }

    .spec-item:last-child {
        border-bottom: 0;
    }

}

@media (prefers-reduced-motion: reduce) {
    .dok {
        transition: none;
    }
}

/* Uvodni tekst modela i tekstualne vrednosti u specifikaciji. */
.model-intro {
    max-width: 68ch;
}

.model-intro-p {
    margin: 0 0 1.125rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--c-body);

    &:last-child {
        margin-bottom: 0;
    }
}

.spec-value-text {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
}

/* ==================================================== kontakt forma ==
   Strana bez mrvica i bez sekcijskog rama: sadržaj centriran, u meri
   teksta, sa vazduhom heroja. Ista ljuska nosi i hvala i 404 stranu. */
.forma-strana {
    display: flex;
    justify-content: center;
    min-block-size: calc(100vh - var(--header-h));
    min-block-size: calc(100dvh - var(--header-h));
    padding: clamp(3rem, 8vh, 6rem) 1.25rem clamp(4rem, 10vh, 7rem);
}

.forma-okvir {
    width: min(34rem, 100%);
}

/* Poruka (hvala, 404): centrirana i vertikalno, jer nema šta da se skroluje. */
.poruka-okvir {
    align-self: center;
    width: min(36rem, 100%);
    text-align: center;
}

.poruka-nadnaslov {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* Veliki tekst nosi skupljen razmak i tesan prored. */
.poruka-naslov {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--c-title);
}

.poruka-tekst {
    max-width: 44ch;
    margin: 1.25rem auto 2.25rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--c-body);
}

.poruka-akcije {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
}

.kf {
    max-width: 34rem;
    margin-inline: auto;
}

/* Veliki naslov nosi skupljen razmak i tesan prored. */
.kf-naslov {
    margin: 0 0 2rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--c-title);
}

.kf-polje {
    margin: 0 0 1rem;

    & label {
        display: block;
        margin-bottom: 0.375rem;
        font-size: 0.8125rem;
        color: var(--c-muted);
    }

    & input,
    & select,
    & textarea {
        width: 100%;
        min-height: 44px;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--c-line);
        border-radius: 2px;
        background: var(--c-bg);
        font: inherit;
        font-size: 1rem;
        color: var(--c-ink);
        transition: border-color 0.25s ease;
    }

    & textarea {
        resize: vertical;
    }

    & :is(input, select, textarea):focus-visible {
        outline: 0;
        border-color: var(--c-dugme);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-dugme) 25%, transparent);
    }

    & .aria-nevalidno,
    & [aria-invalid="true"] {
        border-color: var(--c-accent);
    }
}

.kf-saglasnost {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--c-muted);

    & input {
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 2px;
    }
}

/* Mamac za botove: iz toka, van ekrana, ne uzima fokus i ne čita se. */
.kf-mamac {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kf-greska {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--c-accent);
}

.kf-posalji {
    width: 100%;

    &[disabled] {
        opacity: 0.55;
        cursor: progress;
    }
}

.kf-sitno {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--c-muted);

    & a {
        color: inherit;
        text-decoration: underline;
    }
}

.kf-hvala-naslov {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

/* Ispod 760 px leva kolona nema šta da pokaže: forma uzima punu širinu. */


/* Izbor modela sa slikama. Pravi select je skriven ali ostaje u dokumentu
   i nosi vrednost; dugme i spisak su samo prikaz preko njega. */
.kf-select-skriven {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.kf-polje-izbor {
    position: relative;
}

.kf-izbor-dugme {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: 64px;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-bg);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--c-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease;

    &:hover {
        border-color: var(--c-body);
    }

    &:focus-visible {
        outline: 0;
        border-color: var(--c-dugme);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-dugme) 25%, transparent);
    }

    & img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        flex: none;
    }
}

/* Dva reda: brend u sitnom iznad, naziv modela podebljan ispod. Cena se
   odvaja na desnu ivicu, pa je poređenje modela lakše. */
.kf-model-ime {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.kf-model-brend {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.kf-model-naziv {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-ink);
}

/* Cene idu u par: precrtana standardna levo, snižena desno. Kad sniženja
   nema, u paru je samo jedna. */
.kf-model-cene {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-inline-start: auto;
    padding-inline-start: 0.75rem;
}

.kf-model-stara {
    font-size: 0.8125rem;
    color: var(--c-muted);
}

.kf-model-cena {
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--c-accent);
}

.kf-izbor-strelica {
    width: 16px;
    height: 16px;
    margin-inline-start: 0.75rem;
    fill: currentColor;
    transition: transform 0.25s cubic-bezier(0.45, 0, 0.55, 1);
}

.kf-izbor-dugme[aria-expanded="true"] .kf-izbor-strelica {
    transform: rotate(180deg);
}

/* Spisak lebdi kao materijal: providna podloga sa zamućenjem, senka po
   veličini površine. Slika uz naziv, izabrani red obeležen. */
.kf-izbor-spisak {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 6px);
    z-index: 30;
    max-height: min(21rem, 50vh);
    margin: 0;
    padding: 0.375rem;
    list-style: none;
    overflow-y: auto;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--c-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 18px 48px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.08);
}

@media (prefers-reduced-transparency: reduce) {
    .kf-izbor-spisak {
        background: var(--c-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.kf-izbor-red {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 56px;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--c-ink);
    cursor: pointer;

    &:hover {
        background: color-mix(in srgb, var(--c-ink) 6%, transparent);
    }

    &[aria-selected="true"] {
        background: color-mix(in srgb, var(--c-dugme) 10%, transparent);
        font-weight: 600;
    }

    & img {
        width: 72px;
        height: 72px;
        object-fit: contain;
        flex: none;
    }
}


/* Zvezdica obeležava obavezno polje; objašnjenje stoji uz samo dugme, kao
   na ostalim formama u radnom prostoru. */
.kf-obavezno {
    color: var(--c-accent);
}

.kf-podnozje {
    margin-top: 1.5rem;
}

.kf-obavezna-polja {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--c-muted);
}

/* Poruka o grešci stoji ispod svog polja i vidi se tek kad polje ima
   grešku; polje tada dobija crvenu ivicu. Isto važi i za padajući spisak
   iscrtan preko sakrivenog `select`-a. */
.kf-poruka {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--c-accent);
}

[data-kf-polje].ima-gresku .kf-poruka {
    display: block;
}

.kf-polje.ima-gresku :is(input, select, textarea),
.kf-polje.ima-gresku .kf-izbor-dugme {
    border-color: var(--c-accent);
}

.kf-saglasnost.ima-gresku label,
.kf-saglasnost.ima-gresku label a {
    color: var(--c-accent);
}

.kf-saglasnost.ima-gresku input {
    outline: 1px solid var(--c-accent);
    outline-offset: 1px;
}

/* Poruka uz saglasnost se poravnava sa tekstom, ne sa kvadratićem. */
.kf-saglasnost {
    flex-wrap: wrap;

    & .kf-poruka {
        flex: 1 0 100%;
        margin-inline-start: calc(18px + 0.625rem);
    }
}

/* Spisak bez slika: običan red teksta, poziv na izbor prigušen. */
.kf-izbor-tekst {
    flex: 1;
    min-width: 0;
}

.kf-izbor-poziv {
    color: var(--c-muted);
}

/* Visinu od 64 px traži samo spisak sa slikama modela. */
.kf-izbor-dugme {
    min-height: 44px;
}

.kf-polje-izbor.kf-polje-model .kf-izbor-dugme {
    min-height: 64px;
}

.kf-izbor-red {
    min-height: 44px;
}

.kf-polje-izbor.kf-polje-model .kf-izbor-red {
    min-height: 56px;
}

/* ==================================================== prodajna mreža ==
   Grad je naslov grupe: posetilac traži najbliži salon, ne firmu. */
/* Grad je crn, naziv dilera plav, ikone crvene: tri nivoa se razlikuju
   bojom, pa se kartica čita bez okvira. */
.mreza-grad {
    margin: 3rem 0 1.25rem;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--c-ink);

    &:first-child {
        margin-top: 0;
    }
}

.mreza-spisak {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bez okvira, po odluci klijenta: kartica je skoro providna, pa sadržaj
   stoji na istoj levoj ivici kao naslov grada. Podloga na oznaci se širi
   izvan te ivice negativnom marginom, tako da tekst ne mrda.

   Unutra su samo spiskovi, a razmake drži `gap`, ne margine pasusa —
   zbog toga se ranije razmicalo neujednačeno. */
.mreza-diler {
    display: grid;
    gap: 1rem;
    margin-inline: -0.875rem;
    padding: 0.875rem;
    align-content: start;
}

/* Naslov dilera nosi boju dugmeta: on je i ulaz u karticu. Uloga stoji uz
   naslov kao njegov drugi red, pa ide u istu grupu. */
.mreza-naziv {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.25;
    color: var(--c-dugme);
}

.mreza-uloga {
    margin: -0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--c-muted);
}

/* Jedan spisak po kartici. Svaki podatak je jedna stavka u njemu —
   adresa, osoba, telefon, mejl, sajt — pa razmak drži jedan `gap` i ne
   može da preskoči između grupa, kao kad su spiskovi bili razdvojeni. */
.mreza-podaci {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Red sa podatkom: crvena ikona, pa podatak. */
.mreza-red {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Adresa je jedan podatak u dva reda, pa oba stoje uz istu ikonu. */
.mreza-adresa {
    display: grid;
}

.mreza-ikona {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    margin-block-start: 3px;
    fill: var(--c-accent);
}

/* Ime osobe otvara svoju grupu, pa iznad sebe traži više vazduha nego
   između telefona i mejla koji joj pripadaju. */
.mreza-osoba {
    display: grid;
    gap: 0.125rem;
    margin-block-start: 0.75rem;
}

.mreza-ime {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}

.mreza-funkcija {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* Telefon, mejl i sajt izgledaju i ponašaju se isto — jedna vrsta veze,
   ne tri. Meta za prst drži 44 px na dodiru; mišem se ne promašuje, a tri
   takva reda razvuku karticu, pa se na preciznom pokazivaču vraćaju na
   svoju pravu visinu. */
.mreza-veza {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-size: 0.9375rem;
    color: var(--c-body);
    text-decoration: none;
    transition: color 0.25s ease;

    &:hover,
    &:focus-visible {
        color: var(--c-accent);
        text-decoration: underline;
    }
}

@media (pointer: fine) {
    .mreza-veza {
        min-block-size: 0;
    }
}

/* ====================================================== pravne strane ==
   Duži tekst se čita, ne skenira. Mera reda je oko 70 znakova jer duži red
   gubi početak sledećeg, a kolona je centrirana — pri levoj ivici bi na
   širokom ekranu ostajale dve trećine praznine.

   Razmaci: naslov je bliže svom tekstu nego prethodnom pasusu, pa se grupa
   čita kao celina. Prored raste obrnuto od veličine slova, po istom pravilu
   kao i drugde na sajtu. */
.pravna {
    max-width: min(800px, 100%);
    margin-inline: auto;
}

.pravna-naslov {
    margin: 2rem 0 0.5rem;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--c-ink);

    &:first-child {
        margin-top: 0;
    }
}

.pravna-pasus {
    margin: 0 0 0.625rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-body);
}

.pravna-spisak {
    margin: 0 0 0.875rem;
    padding-inline-start: 1.25rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-body);

    & > li {
        margin-bottom: 0.375rem;
    }
}

/* Pravna strana nema šta da radi sa 100 px razmaka iznad teksta. */
.pravna-sekcija {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

/* Zaglavlje pravne strane deli kolonu sa tekstom, pa se naslov i prvi
   pasus poklapaju po levoj ivici. */
.page-head .pravna {
    max-width: min(800px, 100%);
}

/* Uvod od jedne rečenice ne treba da se lomi pre kraja kolone: `t-lead`
   ga seče na 42 rem zbog dužih tekstova, a ovaj je kraći od kolone. */
.page-head-lead-puna {
    max-width: 100%;
}

/* Prijava za dilersku mrežu stoji u istoj koloni kao tekst iznad nje.
   Forma je inače uska i centrirana u svojoj sekciji; ovde je to davalo
   stepenik prema naslovu, pa se širi na celu kolonu, a kratka polja idu
   u dva reda. */
.diler-prijava {
    margin-top: 2.5rem;

    & .kf {
        max-width: none;
        margin-inline: 0;
    }

    & .kf-forma {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.25rem;
    }

    /* Poruka, saglasnost, greška, dugme i sitno idu preko obe kolone;
       kratka polja se dele u parove. */
    & :is(.kf-mamac, [data-kf-polje="poruka"], .kf-saglasnost, .kf-greska,
          .kf-podnozje, .kf-sitno, noscript) {
        grid-column: 1 / -1;
    }
}

@media (width < 640px) {
    .diler-prijava .kf-forma {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tabela kolačića je jedini tabelarni sadržaj; na uskom ekranu klizi
   unutar svog okvira umesto da razvuče stranicu. */
.pravna-tabela-okvir {
    margin: 0 0 1.5rem;
    overflow-x: auto;
}

.pravna-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;

    & :is(th, td) {
        padding: 0.75rem 1rem 0.75rem 0;
        border-bottom: 1px solid var(--c-line);
        text-align: left;
        vertical-align: top;
    }

    & th {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--c-muted);
    }

    & code {
        font-size: 0.875rem;
    }
}

.pravna-firma {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-line);
}

/* ========================================================== o nama ==
   Brojke stoje same u redu, bez okvira: broj nosi pažnju, oznaka ga samo
   imenuje. Isti ključ kao mere u sekciji dimenzija, samo na beloj. */
.brojke-sekcija {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.brojke {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 2rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }
}

.broj-vrednost {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
}

.broj-oznaka {
    max-width: 18ch;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--c-muted);
}

/* Tri obaveze: tanka linija iznad svake umesto kartice sa senkom. */
.obaveze {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.obaveza {
    padding-top: 1.25rem;
    border-top: 2px solid var(--c-accent);
}

.obaveza-naslov {
    margin: 0 0 0.625rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}

.obaveza-tekst {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--c-body);
}

/* Pločica brenda vodi na njegov spisak vozila. */
/* Pet brendova i prelaz na ceo spisak: tri u redu, dva reda, bez
   krnjeg poslednjeg reda kakav je davao `auto-fit`. */
.brendovi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brend-plocica {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    min-height: 148px;
    padding: 1.75rem 1.25rem 1.5rem;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-bg);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color 0.25s ease;

    &:hover {
        border-color: var(--c-accent);
    }
}

/* Traka jednake visine u svakoj pločici: znakovi se razlikuju po visini,
   ali im donja ivica reda ostaje ista, pa brojevi ispod stoje u liniji. */
.brend-znak {
    display: grid;
    place-items: center;
    block-size: 64px;
    inline-size: 100%;
}

/* Klijentovi logotipi stoje na beloj podlozi, a pločica je bela, pa se
   ništa ne meša. Visina i odnos stranica dolaze iz `data/vozila.php`, pa
   je kutija poznata i pre nego što se slika učita. */
.brend-logo {
    inline-size: auto;
    max-inline-size: 100%;
}

.brend-logo-dongfeng { block-size: 26px; aspect-ratio: 148 / 26; }
.brend-logo-forthing { block-size: 44px; aspect-ratio: 80 / 44; }
.brend-logo-dfsk { block-size: 50px; aspect-ratio: 67 / 50; }
.brend-logo-voyah { block-size: 56px; aspect-ratio: 59 / 56; }
.brend-logo-m-hero { block-size: 30px; aspect-ratio: 118 / 30; }

.cookie-settings-title {
    font-size: 1.25rem;
}

.brend-ime {
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Šesta pločica nema znak, pa na njegovo mesto ide reč u istom ključu
   kao naslovi sekcija. */
.brend-sve-tekst {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.brend-broj {
    font-size: 0.8125rem;
    color: var(--c-muted);
}

@media (width < 720px) {
    .brendovi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width < 420px) {
    .brendovi {
        grid-template-columns: minmax(0, 1fr);
    }

    .brend-plocica {
        min-height: 0;
    }
}

/* ================================== garancija, servis i održavanje ==
   Prodajne strane sa dosta teksta: naslov stoji u svojoj koloni levo, a
   telo teksta u koloni širine oko 62 znaka desno. Oko se tako uvek vraća
   na istu levu ivicu, a red ostaje kratak koliko treba da se čita. */
.srv-sekcija,
.srv-uvod {
    padding-block: clamp(3rem, 7vw, 6rem);
}

/* Naslov sekcije stoji iznad svog teksta, ne pored njega u lepljivoj
   koloni. Lepljiva kolona je izbačena na zahtev klijenta: strane su
   informativne, čitaju se odozgo nadole, a naslov koji prati skrol samo
   odvlači pažnju sa sadržaja. Isti raspored nosi i strana o tehnologiji. */
.srv-split {
    display: block;
}

.srv-split-glava {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.srv-split-telo {
    max-inline-size: 74ch;
    margin-block-start: 0.75rem;
}

.srv-glava-ikona {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--c-accent);
}

/* Naslovi sekcija: veliki tekst traži zbijen razmak među slovima i
   kratak prored, po istom pravilu kao i drugde na sajtu. */
.srv-naslov {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--c-title);

    /* U koloni naslova stoji sam, bez razmaka ispod. */
    .srv-split-glava > & {
        margin-bottom: 0;
    }
}

.srv-naslov-sam {
    margin-bottom: 2rem;
}

.srv-pasus {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--c-body);
}

/* Najava spiska pripada spisku, ne pasusu iznad. */
.srv-najava {
    margin: 1.75rem 0 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--c-ink);
}

.srv-napomena {
    margin: 1.5rem 0 0;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--c-muted);
}

/* ------------------------------------------------------------- heroj */

.srv-hero {
    position: relative;
    display: flex;
    align-items: center;
    /* Ista mera na svim stranama koje nose fotografiju u heroju — garancija,
       servis i održavanje, korisnički servis i prodajna mreža — da se prelaz
       sa strane na stranu ne oseti. `min-`, ne `block-size`: kad je teksta
       više nego što stane, kadar raste umesto da ga preseče. */
    min-block-size: 500px;
    overflow: hidden;
    background-color: var(--c-dark);
    color: #fff;
}

.srv-hero-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Preliv sleva: fotografije nisu jednake svetline, a beo tekst mora da
   drži kontrast i na najsvetlijoj. Boja preliva je brend tamnoplava, ne
   crna, pa kadar dobija ton umesto sivila. Mera je izračunata iz samih
   snimaka; desna trećina kadra ostaje netaknuta, pa se vozilo i dalje
   vidi. */
.srv-hero-inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 7vw, 5rem);
}

.srv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--c-navy) 84%, transparent) 0%,
        color-mix(in srgb, var(--c-navy) 68%, transparent) 34%,
        color-mix(in srgb, var(--c-navy) 26%, transparent) 66%,
        transparent 100%
    );
}

.srv-hero-content {
    position: relative;
    z-index: 1;
    max-width: min(46rem, 100%);
}

.srv-hero-naslov {
    margin: 0;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
}

/* Podnaslov je drugi naslov strane, ali ne sme da se takmiči sa prvim:
   nosi ga veličina i svetlina, ne debljina. */
.srv-hero-podnaslov {
    margin: 1rem 0 0;
    max-width: 34ch;
    font-size: clamp(1.0625rem, 1.8vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #ffffffdb;
}

.srv-hero-dugmad {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Dve brojke stoje jedna uz drugu ispod uvoda, sa tankom crvenom linijom
   iznad svake — ista mera naglaska kao kartice na ostalim stranama. Dok je
   naslov stajao u lepljivoj levoj koloni bile su jedna ispod druge; ta
   kolona više ne postoji. */
.srv-brojke {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    max-inline-size: 44rem;
    list-style: none;

    & > li {
        display: grid;
        gap: 0.5rem;
        padding-block-start: 1.25rem;
        border-block-start: 2px solid var(--c-accent);
    }
}

.srv-brojke .broj-vrednost {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
}

.srv-brojke .broj-oznaka {
    max-inline-size: 24ch;
    font-size: 0.9375rem;
}

/* ------------------------------------------------ spisak sa kvačicama */

.srv-lista {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        font-size: 1.0625rem;
        line-height: 1.5;
        color: var(--c-body);
    }
}

.srv-lista-dve {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
}

.srv-kvacica {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    /* Poravnanje po prvom redu teksta, ne po sredini stavke. */
    margin-block-start: 0.28em;
    color: var(--c-accent);
}

/* ------------------------------------------------------- kartice s ikonom */

.srv-kartice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 1.5rem 2rem;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

/* Tanka linija iznad svake, kao kod obaveza na strani o nama: ista mera
   naglaska na celom sajtu, bez kartica i senki. */
.srv-kartica {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--c-accent);
}

.srv-kartica-ikona {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--c-ink);
}

.srv-kartica-tekst {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--c-body);
}

/* ---------------------------------------------------------- usluge uz servis */

.srv-usluge {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.srv-usluga {
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-bg);
}

.srv-usluga-ikona {
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--c-accent);
}

.srv-usluga-naslov {
    margin: 1rem 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}

.srv-usluga-tekst {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-body);
}

/* ------------------------------------------------------- poziv u toku strane */

.srv-poziv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-bg);
}

.srv-poziv-tekst {
    max-width: 62ch;

    & .srv-pasus:last-child {
        margin-bottom: 0;
    }
}

.srv-poziv-naslov {
    margin: 0 0 0.75rem;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}

.srv-poziv-dugme {
    flex: 0 0 auto;
}

.srv-veza-red {
    margin: 1.75rem 0 0;
}

.srv-veza {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

/* --------------------------------------------------- tamni poziv na dnu */

/* Visinu traci daje sekcija, ne odnos stranica fotografije: studijski
   snimak je 4:3, pa bi se traka inače razvukla preko 900 px. */
.srv-cta {
    min-block-size: clamp(400px, 40vw, 600px);
}

.srv-cta .cta-banner-img {
    position: absolute;
    inset: 0;
    block-size: 100%;
    min-block-size: 0;
}

.srv-cta .cta-banner-content {
    inline-size: min(680px, calc(100% - 2 * clamp(28px, 8vw, 154px)));
}

.srv-cta-naslov {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 2.6vw, 2.375rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.srv-cta-pasus {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffffd6;
}

.srv-cta .cta-banner-buttons {
    margin-top: 1.5rem;
}

/* Veličina fajla ide ispod imena dokumenta, ne u istom redu. */
.dok-mera {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--c-muted);
}

@media (width < 900px) {
    .srv-lista-dve {
        grid-template-columns: 1fr;
    }

    .srv-poziv {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (width < 640px) {
    .srv-hero-podnaslov {
        max-width: none;
    }

    .srv-hero-dugmad .btn-glass {
        inline-size: 100%;
    }
}

/* Uvod stoji uz svoju grupu dokumenata, pa mu donji razmak nije potreban
   koliko punoj sekciji. */
.srv-sekcija-uvod {
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;

    & .t-lead {
        color: var(--c-muted);
    }
}

/* ============================== prodajna mreža: heroj, mapa, spisak ==
   Heroj bez fotografije, po odluci klijenta: puna brend crvena. Beo tekst
   na njoj drži 4,8:1, pa prolazi i za obična slova, ne samo za naslov.
   Preliv koji na ostalim stranama štiti tekst od fotografije ovde nema
   šta da radi, pa se gasi. */
.mreza-hero {
    /* Podloga ispod fotografije: dok se slika ne učita, tekst stoji na
       brend crvenoj, ne na beloj rupi. */
    background-color: var(--c-accent);

    /* Uvodni tekst stoji u heroju, ispod naslova. Beo na crvenoj drži
       4,79:1, pa prolazi i kao telo teksta, ne samo kao naslov. */
    & .mreza-hero-tekst {
        margin: clamp(1rem, 2vw, 1.5rem) 0 0;
        max-inline-size: 54ch;
        font-size: 1rem;
        line-height: 1.6;
        color: #ffffffeb;
    }
}

/* ------------------------------------------------------------ mapa */

.mreza-mapa-okvir {
    position: relative;
}

/* Vodeći grad i mapa u jednom redu. Dva rasporeda za izbor klijenta:
   `a` — saloni jedan uz drugog, mapa pola širine
   `b` — saloni jedan ispod drugog, mapa 70 % */
.mreza-vrh {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    margin-block-end: clamp(2.5rem, 5vw, 4rem);

    &[data-raspored="a"] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    &[data-raspored="b"] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    }
}

/* U rasporedu `a` saloni stoje jedan uz drugog, u `b` jedan ispod drugog. */
.mreza-vrh[data-raspored="a"] .mreza-spisak-vrh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mreza-vrh[data-raspored="b"] .mreza-spisak-vrh {
    grid-template-columns: minmax(0, 1fr);
}

@media (width < 1000px) {
    .mreza-vrh[data-raspored="a"],
    .mreza-vrh[data-raspored="b"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (width < 620px) {
    .mreza-vrh[data-raspored="a"] .mreza-spisak-vrh {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mapa deli red sa salonima vodećeg grada; širinu joj daje kolona, ne
   sopstvena mera. Srbija je oko dva i po puta viša nego šira, pa je kadar
   namerno visok — u širokom i niskom bi se pola Balkana videlo sa strane
   samo da bi zemlja stala po visini. */
.mreza-mapa {
    block-size: 450px;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background-color: var(--c-alt);
}

.mreza-mapa-savet {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--c-faint);
}

/* Leaflet svoje potpise crta sitno i sivo; ovde se izjednačavaju sa
   ostalim sitnim tekstom na strani. */
.leaflet-container {
    font-family: var(--font-sans);
}

.leaflet-control-attribution {
    background: #ffffffd6;
    font-size: 0.6875rem;
    color: var(--c-muted);

    & a {
        color: var(--c-dugme);
    }
}

/* Znak umesto pina: simbol iz logotipa na beloj ploči, jer se crveno na
   svetloj podlozi mape inače gubi. Znak je krug, pa je i ploča krug, sa
   vazduha oko simbola koliko i sam simbol traži — bez toga simbol dodiruje
   ivicu i ploča izgleda kao da je premala za njega. Raste iz svog
   središta, pa tačka ostaje na mestu. */
/* `.leaflet-marker-icon` iz Leafletovog stila postavlja `display: block`
   i učitava se posle našeg lista, pa bi sam `.mreza-znak` izgubio —
   simbol bi ostao uz gornju ivicu ploče umesto u njenom središtu. Zato
   selektor nosi obe klase. */
.leaflet-marker-icon.mreza-znak {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    /* Leaflet meru ikone piše u inline stil; ovo mora da ga nadjača. */
    margin: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.18), 0 4px 10px rgb(0 0 0 / 0.14);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;

    & img {
        display: block;
        inline-size: 22px;
        block-size: 22px;
    }

    &.is-aktivan {
        transform: scale(1.14);
        box-shadow: 0 2px 6px rgb(0 0 0 / 0.22), 0 8px 18px rgb(0 0 0 / 0.18);
    }

    &:focus-visible {
        outline: 2px solid var(--c-ink);
        outline-offset: 3px;
    }
}

/* ---------------------------------------------------------- spisak */

/* Grad sa najviše salona drži pun red; ostala tri stoje jedan uz drugog
   ispod njega, svaki sa svojim naslovom. */
.mreza-ostali {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    margin-block-start: 3rem;
}

/* U koloni je uvek jedan salon, pa mreža ne pravi drugi red. */
.mreza-spisak-uska {
    grid-template-columns: minmax(0, 1fr);
}

.mreza-kolona .mreza-grad {
    margin-block-start: 0;
}

/* Kartica se označi kad joj se dodirne znak na mapi i obrnuto. Ostaje
   samo crvena linija uz levu ivicu, bez podloge — oznaka kaže gde si, ne
   viče. Bez pomeranja: spisak ne sme da poskakuje. */
.mreza-diler {
    scroll-margin-block: calc(var(--header-h) + 1.5rem);
    transition: box-shadow 0.25s ease;

    &.is-oznacen {
        box-shadow: inset 3px 0 0 var(--c-accent);
    }

    &:focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 4px;
    }
}

@media (width < 900px) {
    .mreza-ostali {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width < 620px) {
    .mreza-ostali {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mreza-znak,
    .mreza-diler {
        transition: none;
    }
}

/* ============================================== tehnologija, tri predloga ==
   Jedan sadržaj, tri scene, birane sa `body[data-predlog]`:
   a — kvantno polje (svetla), b — tok energije (svetla),
   c — komandni centar (tamna). Zajednička pravila prva, razlike ispod. */

.teh-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-block-size: 500px;
    overflow: hidden;
}

/* Fotografija preseka vozila je najdublji sloj; preko nje ide preliv, pa
   tekst — isti redosled kao na ostalim herojima. */
.teh-hero-slika {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Preliv sleva, ista mera i ista brend tamnoplava kao na ostalim
   herojima, da tekst drži kontrast preko svetle ilustracije. */
.teh-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--c-navy) 84%, transparent) 0%,
        color-mix(in srgb, var(--c-navy) 68%, transparent) 34%,
        color-mix(in srgb, var(--c-navy) 26%, transparent) 66%,
        transparent 100%
    );
}

.teh-hero-inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 7vw, 5rem);
}

/* Sve tri sekcije su sidra sa početne strane (`/tehnologija/#platforma`
   i dalje), a zaglavlje je `fixed`, pa bez ovog razmaka dolazak na sidro
   gurne naslov pod traku. */
.teh-sekcija {
    padding-block: clamp(3.5rem, 8vw, 7rem);
    scroll-margin-block-start: calc(var(--header-h) + 1.5rem);
}

.teh-glava {
    max-inline-size: 62ch;
}

/* Kicker imenuje sistem pre naslova, sitno i s razmaknutim slovima. */
/* Kicker imenuje celinu pre naslova: sitno, razmaknuto, u akcentu. Isti
   je na svim stranama, pa deli jedno pravilo. */
.srv-kicker,
.teh-kicker {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
}

.teh-naslov {
    margin: 0 0 1.25rem;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-title);
}

.teh-uvod {
    margin: 0;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.6;
    color: var(--c-body);
}

.teh-podnaslov {
    margin: 0 0 0.625rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}

.teh-pasus {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-body);
}

/* Dve celine platforme: slika, pa tekst ispod nje, jedna uz drugu. */
.teh-celine {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-block-start: clamp(2rem, 4vw, 3.5rem);
}

.teh-celina {
    margin: 0;
}

.teh-slika-okvir {
    overflow: hidden;
    border-radius: 2px;
}

.teh-slika,
.teh-mach-slika img,
.teh-baterija-slika img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.teh-celina-tekst {
    padding-block-start: 1.25rem;
}

/* Mach Power: slika i vodeća stavka u jednom redu, mreža ispod. */
.teh-mach {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    margin-block-start: clamp(2rem, 4vw, 3.5rem);
}

.teh-mach-slika {
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
}

.teh-mreza {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    list-style: none;
}

/* Ista mera naglaska kao na ostalim stranama: linija iznad, bez kutije. */
.teh-kartica {
    padding-block-start: 1.25rem;
    border-block-start: 2px solid var(--c-accent);
}

.teh-kartica-ikona {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--c-ink);
}

.teh-kartica-naslov {
    margin: 0.875rem 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}

.teh-kartica-tekst {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--c-body);
}

/* Poziv: centriran, kao zaključak celine. */
.teh-poziv {
    max-inline-size: 46rem;
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    text-align: center;
}

.teh-poziv-tekst {
    font-size: 1.0625rem;
}

/* ---------------------------------------------- pregled na početnoj ==
   Jedna editorial bina umesto tri jednake kartice. Svi slajdovi ostaju u
   HTML-u; horizontalni scroll-snap radi i bez skripte, dok JS dodaje drag,
   strelice, aktivno poglavlje i brojač. */
.teh-pregled {
    padding-block: clamp(5rem, 10vw, 8.5rem);
    background-color: var(--c-bg);
}

.teh-pregled-glava {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.65fr);
    align-items: end;
    gap: clamp(2rem, 7vw, 8rem);
}

.teh-pregled .teh-naslov {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.75rem, 5.4vw, 5.75rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.teh-pregled .teh-uvod {
    max-width: 42ch;
    padding-bottom: 0.4rem;
    font-size: clamp(1rem, 1.35vw, 1.1875rem);
    line-height: 1.65;
}

.teh-naslov-veza {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus-visible {
        text-decoration: underline;
        text-underline-offset: 8px;
        text-decoration-thickness: 2px;
        text-decoration-color: var(--c-accent);
    }
}

.teh-pregled-stage {
    position: relative;
    margin-top: clamp(3rem, 6vw, 5rem);
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--c-card);
    box-shadow: 0 24px 70px rgba(5, 28, 44, 0.08);
}

.teh-pregled-mobile-progress {
    display: none;
}

.teh-pregled-viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.teh-pregled-viewport::-webkit-scrollbar {
    display: none;
}

.teh-pregled-viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.teh-pregled-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.teh-pregled-slide {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.65fr);
    flex: 0 0 100%;
    min-width: 0;
    min-height: clamp(500px, 47vw, 660px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.teh-pregled-media {
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #e8eaed;
}

.teh-pregled-media .teh-slika {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.teh-pregled-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4.5rem);
    background-color: var(--c-card);
}

.teh-pregled .teh-podnaslov {
    max-width: 14ch;
    margin-bottom: auto;
    font-size: clamp(1.75rem, 2.7vw, 2.75rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.teh-pregled .teh-pasus {
    max-width: 38ch;
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    line-height: 1.65;
}

.teh-pregled-vise {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--c-body);
    transition: gap 0.25s ease, color 0.2s ease;

    &:hover,
    &:focus-visible {
        gap: 0.75rem;
        color: var(--c-accent);
    }
}

.teh-pregled-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-top: 1px solid rgba(5, 28, 44, 0.12);
    background-color: #fff;
}

.teh-pregled-chapters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.teh-pregled-chapter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 78px;
    padding: 1rem clamp(1rem, 2vw, 1.75rem);
    border: 0;
    border-right: 1px solid rgba(5, 28, 44, 0.1);
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    color: rgba(17, 17, 17, 0.52);
    transition: color 0.25s ease, background-color 0.25s ease;
}

.teh-pregled-chapter::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    inline-size: 0;
    block-size: 2px;
    background-color: var(--c-accent);
    transition: inline-size 0.3s ease;
}

.teh-pregled-chapter:hover,
.teh-pregled-chapter:focus-visible {
    color: var(--c-ink);
    background-color: rgba(5, 28, 44, 0.025);
}

.teh-pregled-chapter.is-active {
    color: var(--c-ink);
}

.teh-pregled-chapter.is-active::before {
    inline-size: 100%;
}

.teh-pregled-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: clamp(1rem, 2vw, 1.75rem);
}

.teh-pregled-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(5, 28, 44, 0.2);
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    color: var(--c-ink);
    transition: border-color 0.2s ease, background-color 0.2s ease,
                color 0.2s ease;
}

.teh-pregled-arrow:hover,
.teh-pregled-arrow:focus-visible {
    border-color: var(--c-navy);
    background-color: var(--c-navy);
    color: #fff;
}

.teh-pregled-arrow:disabled {
    cursor: default;
    opacity: 0.3;
}

@media (width < 980px) {
    .teh-pregled-glava {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .teh-pregled .teh-uvod {
        max-width: 52ch;
        padding-bottom: 0;
    }

    .teh-pregled-slide {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(280px, 48vw) auto;
        min-height: 0;
    }

    .teh-pregled-copy {
        min-height: 330px;
    }

    .teh-pregled-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .teh-pregled-stepper {
        justify-content: flex-end;
        min-height: 68px;
        border-top: 1px solid rgba(5, 28, 44, 0.1);
    }
}

@media (width < 620px) {
    .teh-pregled {
        padding-block: 5.5rem 0;
    }

    .teh-pregled .teh-naslov {
        font-size: clamp(2.6rem, 12vw, 3.6rem);
    }

    .teh-pregled-stage {
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        border-radius: 0;
        box-shadow: none;
    }

    .teh-pregled-slide {
        grid-template-rows: 260px auto;
    }

    .teh-pregled-copy {
        min-height: 340px;
        justify-content: center;
        padding: 2.25rem 2.5rem 2.75rem;
    }

    .teh-pregled-controls {
        display: none;
    }

    .teh-pregled-mobile-progress {
        position: absolute;
        z-index: 3;
        inset: 244px auto auto 50%;
        display: flex;
        gap: 0.375rem;
        width: 7rem;
        min-height: 32px;
        padding: 15px 0;
        border: 0;
        background: none;
        transform: translateX(-50%);
        cursor: pointer;
    }

    .teh-pregled-mobile-progress:disabled {
        cursor: default;
    }

    .teh-pregled-progress-segment {
        position: relative;
        flex: 1 1 0;
        height: 2px;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.48);
    }

    .teh-pregled-progress-segment::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--c-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .teh-pregled-progress-segment.is-active::after {
        transform: scaleX(1);
    }

    .teh-pregled-stage.is-autoplaying
        .teh-pregled-progress-segment.is-active::after {
        animation: teh-pregled-progress 6s linear both;
        transition: none;
    }

    .teh-pregled .teh-podnaslov {
        margin-bottom: 1rem;
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .teh-pregled-chapters {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .teh-pregled-chapters::-webkit-scrollbar {
        display: none;
    }

    .teh-pregled-chapter {
        flex: 0 0 11rem;
        min-height: 72px;
        scroll-snap-align: start;
    }

    .teh-pregled-stepper {
        padding-inline: 2.5rem;
    }
}

@keyframes teh-pregled-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .teh-pregled-viewport {
        scroll-behavior: auto;
    }

    .teh-pregled-vise,
    .teh-pregled-chapter,
    .teh-pregled-chapter::before,
    .teh-pregled-arrow {
        transition: none;
    }

    .teh-pregled-progress-segment::after {
        animation: none !important;
        transition: none;
    }
}

/* Baterija: slika levo, tekst desno. */
.teh-baterija {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.teh-baterija-slika {
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
}

.teh-celina-red {
    margin-block-start: 1.75rem;
}

/* ------------------------------------------------------- predlog a ==
   Kvantno polje: mreža čestica na dubokoj mornarskoj, strana svetla. */
[data-predlog="a"] .teh-hero {
    background-color: var(--c-navy);
}

[data-predlog="a"] .teh-sekcija-mach {
    background-color: var(--c-alt);
}

/* ------------------------------------------------------- predlog b ==
   Tok energije: svetao heroj, struja čestica preko njega, tekst taman. */
/* Predlog b nosi svetliji preliv: ilustracija sme da se vidi cela, a
   tekst se štiti tamnom pločom iza sebe umesto zavesom preko kadra. */
[data-predlog="b"] .teh-hero {
    background-color: #dfe8f2;

    &::after {
        background: linear-gradient(
            to right,
            color-mix(in srgb, var(--c-navy) 74%, transparent) 0%,
            color-mix(in srgb, var(--c-navy) 54%, transparent) 42%,
            transparent 82%
        );
    }
}

[data-predlog="b"] .teh-kartica {
    border-block-start-color: #2f7fb5;
}

[data-predlog="b"] .teh-kicker {
    color: #2f7fb5;
}

/* ------------------------------------------------------- predlog c ==
   Komandni centar: cela strana tamna, tanke linije, svetlo plavi sjaj. */
[data-predlog="c"] {
    background-color: var(--c-dark);

    & .teh-hero {
        background-color: var(--c-dark);
    }

    /* Na tamnoj strani ilustracija se stišava, da tekst vodi. */
    & .teh-hero-slika {
        opacity: 0.45;
    }

    & .teh-hero::after {
        background: linear-gradient(
            to right,
            color-mix(in srgb, var(--c-dark) 92%, transparent) 0%,
            color-mix(in srgb, var(--c-dark) 78%, transparent) 40%,
            color-mix(in srgb, var(--c-dark) 45%, transparent) 75%,
            color-mix(in srgb, var(--c-dark) 25%, transparent) 100%
        );
    }

    & .teh-sekcija {
        background-color: var(--c-dark);
    }

    & .teh-sekcija-mach {
        background-color: #0a111d;
    }

    & .teh-naslov,
    & .teh-podnaslov,
    & .teh-kartica-naslov {
        color: #fff;
    }

    & .teh-uvod,
    & .teh-pasus,
    & .teh-kartica-tekst {
        color: #ffffffc2;
    }

    & .teh-kartica {
        padding: 1.25rem;
        border: 1px solid #ffffff1f;
        border-block-start: 2px solid var(--c-accent);
        border-radius: 2px;
        background: #ffffff08;
    }

    & .teh-kartica-ikona {
        color: #9cc1ff;
    }

    /* Slike na tamnom dobijaju tanku svetlu ivicu umesto senke. */
    & .teh-slika-okvir,
    & .teh-mach-slika,
    & .teh-baterija-slika {
        border: 1px solid #ffffff1f;
    }
}

@media (width < 900px) {
    .teh-celine,
    .teh-mach,
    .teh-baterija {
        grid-template-columns: minmax(0, 1fr);
    }

    .teh-mreza {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width < 560px) {
    .teh-mreza {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==================================================== subvencije ==
   Vodič kroz državni postupak, ne prodajna strana: bez fotografije u
   heroju, sa jasnim stanjem na vrhu i zvaničnim izvorima na dnu. */

.sub-glava {
    padding-block-end: clamp(0.5rem, 1.5vw, 1rem);
}

.sub-kicker {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
}

.sub-uvod {
    margin-block-start: 1rem;
    max-inline-size: 62ch;
    color: var(--c-body);
}

.sub-sekcija {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ------------------------------------------- aktuelne informacije */

.sub-aktuelno {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-bg);
}

/* Stanje se menja u toku godine, pa nosi i datum provere: posetilac vidi
   koliko je podatak star, a ne samo šta piše. */
.sub-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-ink);
}

.sub-status-tacka {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 50%;
    background-color: currentcolor;
}

.sub-status-radi .sub-status-tacka {
    color: #1a7f37;
}

.sub-status-pauza .sub-status-tacka {
    color: #b26a00;
}

.sub-status-stop .sub-status-tacka {
    color: var(--c-accent);
}

.sub-status-datum {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--c-muted);
}

.sub-brojke {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
        display: grid;
        gap: 0.375rem;
        padding-block-start: 1rem;
        border-block-start: 2px solid var(--c-accent);
    }
}

.sub-brojka-oznaka {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.sub-brojka-vrednost {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}

.sub-brojka-opis {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--c-body);
}

/* Upozorenje nosi ikonu, jer se čita pre nego što se pročita. */
.sub-napomena {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    max-inline-size: 74ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--c-body);
}

.sub-napomena-sama {
    margin-block-start: clamp(2rem, 4vw, 3rem);
}

.sub-napomena-ikona {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 3px;
    fill: var(--c-accent);
}

.sub-aktuelno-veza {
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

/* ----------------------------------------------------- postupak */

/* Numeracija dolazi iz `ol`, pa se korak ne može omaći u redosledu. */
/* Dve kolone po tri koraka. Tok ide po kolonama, ne po redovima, pa prva
   kolona nosi korake 1-3 a druga 4-6 — inače bi se čitalo cik-cak. */
.sub-koraci {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
    align-content: start;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    counter-reset: korak;
    list-style: none;
}

.sub-korak {
    counter-increment: korak;
    padding-inline-start: clamp(2.75rem, 4vw, 3.5rem);
    position: relative;
    max-inline-size: 56ch;

    &::before {
        content: counter(korak);
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        display: grid;
        place-items: center;
        inline-size: 2.25rem;
        block-size: 2.25rem;
        border-radius: 50%;
        background: var(--c-accent);
        font-size: 0.9375rem;
        font-weight: 700;
        color: #fff;
    }
}

.sub-korak-naslov {
    margin: 0.25rem 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
}

.sub-korak-tekst {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-body);
}

.sub-korak-veze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.5rem;
    margin: 0.875rem 0 0;
}

.sub-veza {
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;

    &:hover,
    &:focus-visible {
        text-decoration: underline;
    }
}

/* --------------------------------------------- izbor vrste prijave */

.sub-prijava {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}

.sub-prijava-put {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-bg);
}

.sub-prijava-naslov {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
}

.sub-dokumentacija {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tri vozila u redu na desktopu, dva na tabletu, jedno na telefonu. */
.sub-vozila {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------- pitanja */

/* Otvara se nativnim `details`: radi bez JavaScripta i pretraga ga čita.
   Spisak je centriran, jer nema šta da se poravna uz njega. */
.sub-pitanja {
    border-block-start: 1px solid var(--c-line);
}

.sub-pitanje {
    border-block-end: 1px solid var(--c-line);

    /* Poslednje pitanje ne zatvara spisak linijom: gornja ivica ga već
       odvaja od naslova, a donja bi visila preko kraja sekcije. */
    &:last-child {
        border-block-end: 0;
    }
}

.sub-pitanje-naslov {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-ink);
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }

    &::after {
        content: "+";
        flex: none;
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 1;
        color: var(--c-accent);
    }
}

.sub-pitanje[open] .sub-pitanje-naslov::after {
    content: "\2212";
}

/* Odgovor je blok: na subvencijama jedan pasus, na pitanjima ume da nosi
   i spisak, pa mere stoje na jednom mestu. */
.sub-pitanje-odgovor {
    margin: 0;
    padding-block-end: 1.25rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-body);

    & p {
        margin: 0 0 0.75rem;
    }

    & ul {
        margin: 0 0 0.75rem;
        padding-inline-start: 1.25rem;
    }

    & li {
        margin-block-end: 0.375rem;
    }

    & > :last-child {
        margin-block-end: 0;
    }
}

/* ------------------------------------------------ zvanični izvori */

/* Naslov i spisak dele istu centriranu kolonu, pa im se leva ivica
   poklapa; centriranje svakog za sebe ih razilazi, jer naslov i telo
   teksta nemaju istu meru od 74 znaka. */
.sub-pitanja-okvir {
    max-inline-size: 74ch;
    margin-inline: auto;
}

.sub-izvori-uvod {
    max-inline-size: 62ch;
    margin-block-end: clamp(1.5rem, 3vw, 2rem);
}

.sub-izvori {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.sub-izvor-naslov {
    margin: 0 0 0.75rem;
    padding-block-start: 1rem;
    border-block-start: 2px solid var(--c-accent);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-ink);
}

.sub-izvor-spisak {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Na ovoj strani naslov i uvod stoje jedan ispod drugog, ne u dve kolone:
   informativna je, pa se čita odozgo nadole. Naslov zato i ne prati skrol. */
.srv-split-mirna {
    display: block;
}

.srv-split-mirna .srv-split-glava {
    position: static;
}

.srv-split-mirna .srv-split-telo {
    margin-block-start: 0.75rem;
    max-inline-size: 74ch;
}

@media (width < 900px) {
    .sub-brojke,
    .sub-prijava,
    .sub-dokumentacija,
    .sub-izvori {
        grid-template-columns: minmax(0, 1fr);
    }

    .sub-koraci {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .sub-vozila {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sub-korak {
        max-inline-size: 74ch;
    }
}

/* Uži prelom ide posle šireg, inače bi ga onaj na 900 px pregazio. */
@media (width < 620px) {
    .sub-vozila {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================ pitanja i odgovori ==
   Spisak onoga što tek čeka klijenta: tema podebljano, pa šta tačno
   nedostaje — da se vidi šta treba dostaviti, a ne samo da nešto fali. */
.pitanja-cekaju-uvod {
    margin-block-end: clamp(1.5rem, 3vw, 2rem);
}

.pitanja-cekaju {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
        display: grid;
        gap: 0.25rem;
        padding-block-start: 0.875rem;
        border-block-start: 1px solid var(--c-line);
    }
}

.pitanja-cekaju-tema {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-ink);
}

.pitanja-cekaju-sta {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--c-muted);
}

/* ================================== strane vodiča: centrirana kolona ==
   Garancija i servis nemaju nijednu fotografiju. Dok je kolona teksta
   stajala uz levu ivicu, desna polovina strane je zjapila prazna i to se
   čitalo kao rupa, ne kao vazduh. Kolona ide u sredinu, pa praznina
   postaje margina — isto rešenje kao kod pitanja i pravnih strana.

   Heroj i tamna traka na dnu ostaju preko cele širine: oni nose sliku. */
.strana-vodic .srv-sekcija > .wrap,
.strana-vodic .srv-uvod > .wrap {
    inline-size: min(880px, 100vw - 40px);
}

/* U centriranoj koloni spisak od šest i više stavki staje u dve kolone,
   pa se ne razvlači u tanku traku. */
.strana-vodic .srv-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
}

/* Kartica ih je pet u redu na punoj širini; u užoj koloni tri. */
.strana-vodic .srv-kartice {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.strana-vodic .srv-split-telo,
.strana-vodic .srv-napomena,
.strana-vodic .srv-brojke {
    max-inline-size: none;
}

@media (560px <= width < 900px) {
    .strana-vodic .srv-kartice {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width < 760px) {
    .strana-vodic .srv-lista,
    .strana-vodic .srv-brojke {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (width < 560px) {
    .strana-vodic .srv-kartice {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ======================================================= kontakt ==
   Kartica zastupnika je ista kao kartica dilera na prodajnoj mreži, samo
   sama u redu, pa se ne razvlači preko cele širine. */
.kontakt-spisak {
    grid-template-columns: minmax(0, 26rem);
    margin-block-start: 1.5rem;
}

.kontakt-uvod {
    max-inline-size: 62ch;
    margin-block-end: clamp(2rem, 4vw, 3rem);
}

.kontakt-veza-red {
    margin: 0.875rem 0 0;
}

/* Zaglavlje strane vodiča takođe ide u centriranu kolonu, da naslov ne
   ostane sam uz levu ivicu iznad centriranog sadržaja. */
.strana-vodic .sub-glava > .wrap {
    inline-size: min(880px, 100vw - 40px);
}

/* Mapa na kontaktu ima jednu tačku, pa je niža i uža od one na prodajnoj
   mreži — tamo kadar mora da obuhvati celu Srbiju. */
.kontakt-mapa-okvir {
    margin-block-start: clamp(2rem, 4vw, 3rem);
}

.kontakt-mapa-okvir .mreza-mapa {
    block-size: 360px;
}

/* Obrazac na kontaktu deli centriranu kolonu sa ostatkom strane. */
.kontakt-forma-okvir {
    max-inline-size: 34rem;
}