/* ============================================================
   BILTEN — ISPORUKA za /assets/css/bilten.css  (v5)
   Sva pravila su unutar body.page-bilten.
   Markup, JS i imena klasa nisu dirani.
   (Izuzetak-predlog: .bilt__autor-foto — jedan novi element,
    vidi README. + opcioni bilten-grid.js za poravnanje mreže.)

   Ritam blokova (kontrast, ne bledilo):
   hero papir+mreža → svetlo → TAMNO (izlog mejla) → svetli list
   (autor) → siva kartica (pitanja) → TAMNO (završni poziv) →
   svetli footer sajta = povratak kući.
   ============================================================ */

body.page-bilten .bilt {
    padding-top: 0;
    counter-reset: biltsek;
}

/* širi papir; širina sadržaja = 37 ćelija mreže (1036px + 2×24 padding) */
body.page-bilten .container.narrow {
    max-width: 1084px;
}

/* ── HERO ──────────────────────────────────────────────────── */
/* --blt-bgx/--blt-bgy postavlja bilten-grid.js tako da se mreža
   poklopi sa kalendarskom trakom (isti pristup kao usluge hero).
   Bez JS-a: 0,0 — mreža radi, samo bez poklapanja. */
body.page-bilten .bilt__hero {
    --blt-bgx: 0px;
    --blt-bgy: 0px;
    position: relative;
    background-color: var(--bg-paper);
    background-image:
        linear-gradient(to right, rgba(26, 26, 24, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 26, 24, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: var(--blt-bgx) var(--blt-bgy);
    border-bottom: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
    padding: 112px 0; /* 4 ćelije */
}

/* mono dokument-markeri u uglovima (engineering paper konvencija) */
body.page-bilten .bilt__hero::before,
body.page-bilten .bilt__hero::after {
    position: absolute;
    top: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-light-haze);
    pointer-events: none;
}

body.page-bilten .bilt__hero::before {
    content: "DOC · CP-BLT";
    left: 24px;
}

body.page-bilten .bilt__hero::after {
    content: "TZ · EUROPE/BELGRADE";
    right: 24px;
    text-align: right;
}

/* hero kompozicija: copy levo (20 ćelija), obrazac desno (15 ćelija),
   procep 2 ćelije */
body.page-bilten .bilt__hero .container.narrow {
    position: relative;
    container-type: inline-size;
    /* 1036px overlay trake (::before) je element, ne background —
       clip vraća staro background ponašanje na 861–1132px (bez h-skrola) */
    overflow-x: clip;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 56px;
    align-items: center;
}

body.page-bilten .bilt__hero .mono-label {
    grid-column: 1;
    color: var(--brand);
}

body.page-bilten .bilt__hero .section-heading {
    grid-column: 1;
    font-size: clamp(3rem, 5.8vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.038em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
    /* „Sajber bilten" crn, „Crvene Pilule" crven: osnovna boja je
       brand, a ::first-line (uvek samo „Sajber bilten" zbog
       max-width) vraća tamnu. Čistija produkciona varijanta je
       <span> u template-u. */
    color: var(--brand);
    max-width: 14ch;
}

body.page-bilten .bilt__hero .section-heading::first-line {
    color: var(--fg-light);
}

body.page-bilten .bilt__lead {
    position: relative;
    grid-column: 1;
    font-size: clamp(1.3rem, 2vw, 1.45rem);
    line-height: 1.55;
    color: var(--fg-light-muted);
    max-width: 26em;
    margin: var(--space-5) 0 0;
}

/* kalendarska traka uz rečenicu koju ilustruje:
   7 ćelija = 7 dana, u razmeri papira (1 ćelija mreže = 1 dan),
   sedma crvena = dan izdanja. Mreža hero-a se JS-om dovodi u
   registar sa trakom. */
/* nedelja u ravni, preko OBE kolone hero mreže (i ispod obrasca):
   traka je poseban red grida (container::after), fluidno se
   skalira sa širinom sadržaja — prvi heks na levoj, sedmi na
   desnoj ivici. Crveni PON = dan izdanja (container::before,
   poseban sloj radi glatkog fade-a); sivi kursor korača. */
body.page-bilten .bilt__hero .container.narrow::after {
    content: "1 IZDANJE NEDELJNO";
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 56px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.14em;
    color: var(--fg-light-haze);
    padding-top: 94px;
    padding-top: calc(100cqw * 0.063465 + 28px);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1036 65.75'><path d='M28.5 0.5 L56.5 16.69 L56.5 49.06 L28.5 65.25 L0.5 49.06 L0.5 16.69 Z' fill='%23ffffff' stroke='%23bcbcbb' stroke-width='1'/><text x='28.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%239a9a98'>PON</text><path d='M191.5 0.5 L219.5 16.69 L219.5 49.06 L191.5 65.25 L163.5 49.06 L163.5 16.69 Z' fill='%23ffffff' stroke='%23bcbcbb' stroke-width='1'/><text x='191.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%239a9a98'>UTO</text><path d='M354.5 0.5 L382.5 16.69 L382.5 49.06 L354.5 65.25 L326.5 49.06 L326.5 16.69 Z' fill='%23ffffff' stroke='%23bcbcbb' stroke-width='1'/><text x='354.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%239a9a98'>SRE</text><path d='M517.5 0.5 L545.5 16.69 L545.5 49.06 L517.5 65.25 L489.5 49.06 L489.5 16.69 Z' fill='%23ffffff' stroke='%23bcbcbb' stroke-width='1'/><text x='517.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%239a9a98'>ČET</text><path d='M680.5 0.5 L708.5 16.69 L708.5 49.06 L680.5 65.25 L652.5 49.06 L652.5 16.69 Z' fill='%23ffffff' stroke='%23bcbcbb' stroke-width='1'/><text x='680.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%239a9a98'>PET</text><path d='M843.5 0.5 L871.5 16.69 L871.5 49.06 L843.5 65.25 L815.5 49.06 L815.5 16.69 Z' fill='%23ffffff' stroke='%23bcbcbb' stroke-width='1'/><text x='843.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%239a9a98'>SUB</text><path d='M1006.5 0.5 L1034.5 16.69 L1034.5 49.06 L1006.5 65.25 L978.5 49.06 L978.5 16.69 Z' fill='%23ffffff' stroke='%23bcbcbb' stroke-width='1'/><text x='1006.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%239a9a98'>NED</text></svg>") no-repeat 0% 0px / 1036px auto;
}

/* Statična bela mreža ispod; obojeni sloj korača dan po danu:
   PON–PET crveno (gradijent puna→bleda), SUB i NED posive.
   Na kraju svih sedam zajedno linearno pada u fade (opacity),
   petlja bešavna (0% i 100% na opacity 0), PON se blago vrati.
   Outline: solidna %23bcbcbb 1px na SVIM ćelijama oba sloja —
   identična linija preko identične linije, pa se tokom fade-a
   boja ivice nikad ne menja niti dublira. */
body.page-bilten .bilt__hero .container.narrow::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    left: 24px;
    bottom: calc(37.5px + 100cqw * 0.000483);
    width: 1036px;
    height: 65.75px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1036 65.75'><path d='M28.5 0.5 L56.5 16.69 L56.5 49.06 L28.5 65.25 L0.5 49.06 L0.5 16.69 Z' fill='%239b1919' stroke='%23bcbcbb' stroke-width='1'/><text x='28.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%23ffffff'>PON</text><path d='M191.5 0.5 L219.5 16.69 L219.5 49.06 L191.5 65.25 L163.5 49.06 L163.5 16.69 Z' fill='%23b13636' stroke='%23bcbcbb' stroke-width='1'/><text x='191.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%23ffffff'>UTO</text><path d='M354.5 0.5 L382.5 16.69 L382.5 49.06 L354.5 65.25 L326.5 49.06 L326.5 16.69 Z' fill='%23c45252' stroke='%23bcbcbb' stroke-width='1'/><text x='354.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%23ffffff'>SRE</text><path d='M517.5 0.5 L545.5 16.69 L545.5 49.06 L517.5 65.25 L489.5 49.06 L489.5 16.69 Z' fill='%23d66e6e' stroke='%23bcbcbb' stroke-width='1'/><text x='517.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%23ffffff'>ČET</text><path d='M680.5 0.5 L708.5 16.69 L708.5 49.06 L680.5 65.25 L652.5 49.06 L652.5 16.69 Z' fill='%23e58888' stroke='%23bcbcbb' stroke-width='1'/><text x='680.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%23ffffff'>PET</text><path d='M843.5 0.5 L871.5 16.69 L871.5 49.06 L843.5 65.25 L815.5 49.06 L815.5 16.69 Z' fill='%23e4e4e2' stroke='%23bcbcbb' stroke-width='1'/><text x='843.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%238a8a88'>SUB</text><path d='M1006.5 0.5 L1034.5 16.69 L1034.5 49.06 L1006.5 65.25 L978.5 49.06 L978.5 16.69 Z' fill='%23e4e4e2' stroke='%23bcbcbb' stroke-width='1'/><text x='1006.5' y='37.2' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='12' letter-spacing='1' fill='%238a8a88'>NED</text></svg>") no-repeat 0 0 / 1036px 65.75px;

    /* Rez NE animiramo direktno na clip-path-u nego kroz ovu promenljivu —
       vidi belešku uz @keyframes cpBltReveal. Statična vrednost 0 = ceo
       nedeljni niz vidljiv, što je i prikaz kad je animacija isključena
       (prefers-reduced-motion: reduce). */
    --cp-blt-rez: 0px;
    clip-path: inset(0 var(--cp-blt-rez) 0 0);
}

@media (prefers-reduced-motion: no-preference) {
    body.page-bilten .bilt__hero .container.narrow::before {
        animation: cpBltReveal 10.08s step-end infinite, cpBltGasi 10.08s linear infinite;
    }
}

/* 8 taktova po 12.5%: obojena traka (JEDNA statična slika, svih 7 dana)
   OTKRIVA se klip-maskom dan po dan s leva na desno; poslednji takt =
   zajednički fade u belo (cpBltGasi). Maska (ne swap slike) — slika se
   dekodira jednom, pa nema treperenja u prvom prolazu. Rezovi idu kroz
   prazan razmak između heksova, pa se nijedan ne seče.

   Animira se PROMENLJIVA --cp-blt-rez, ne sam clip-path. Razlog: Chrome
   clip-path animaciju predaje kompozitoru, koji je iscrtavao MEĐUVREDNOSTI
   bez obzira na step-end — rez je stajao tačno na sredini između dva reza,
   a to je po konstrukciji sredina heksagona, pa je dan bio obojen do pola
   (Denisov nalaz u Chromeu 27.7.2026; Firefox, koji animaciju vodi na
   glavnoj niti, prikazivao je korake ispravno). Nije pomogla ni verzija sa
   parovima keyframe-ova koji drže vrednost.
   Nesistemska (neregistrovana) promenljiva nema definisanu interpolaciju —
   njena vrednost može samo da skoči — i takva animacija ne ide na
   kompozitor. Rez zato više ne može da stane između dve zadate vrednosti.
   Mereno u Denisovom Chromeu 150: pre izmene polovičan heksagon u 2 od 7
   snimaka, posle 0 od 14 (8 raspoređeno preko svih granica koraka). */
@keyframes cpBltReveal {
    0%        { --cp-blt-rez: 926px; }
    12.5%     { --cp-blt-rez: 763px; }
    25%       { --cp-blt-rez: 600px; }
    37.5%     { --cp-blt-rez: 437px; }
    50%       { --cp-blt-rez: 274px; }
    62.5%     { --cp-blt-rez: 111px; }
    75%, 100% { --cp-blt-rez: 0px; }
}

@keyframes cpBltGasi {
    0%    { opacity: 0; }
    4%    { opacity: 1; }
    87.5% { opacity: 1; }
    100%  { opacity: 0; }
}

@media (max-width: 860px) {
    body.page-bilten .bilt__hero .container.narrow::after {
        grid-column: 1;
        grid-row: auto;
        margin-top: var(--space-6);
        padding-top: 67.63px;
        padding-top: calc(100cqw * 0.14447 + 24px); /* traka pune širine kolone */
        order: 4; /* redosled: copy → traka (tlo) → obrazac (akcija) */
        animation: none;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302 43.63'><path d='M19 1 L37 11.41 L37 32.22 L19 42.63 L1 32.22 L1 11.41 Z' fill='%239b1919' stroke='%23bcbcbb' stroke-width='1'/><text x='19' y='25.02' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='9' letter-spacing='1' fill='%23ffffff'>PON</text><path d='M63 1 L81 11.41 L81 32.22 L63 42.63 L45 32.22 L45 11.41 Z' fill='%23b13636' stroke='%23bcbcbb' stroke-width='1'/><text x='63' y='25.02' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='9' letter-spacing='1' fill='%23ffffff'>UTO</text><path d='M107 1 L125 11.41 L125 32.22 L107 42.63 L89 32.22 L89 11.41 Z' fill='%23c45252' stroke='%23bcbcbb' stroke-width='1'/><text x='107' y='25.02' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='9' letter-spacing='1' fill='%23ffffff'>SRE</text><path d='M151 1 L169 11.41 L169 32.22 L151 42.63 L133 32.22 L133 11.41 Z' fill='%23d66e6e' stroke='%23bcbcbb' stroke-width='1'/><text x='151' y='25.02' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='9' letter-spacing='1' fill='%23ffffff'>ČET</text><path d='M195 1 L213 11.41 L213 32.22 L195 42.63 L177 32.22 L177 11.41 Z' fill='%23e58888' stroke='%23bcbcbb' stroke-width='1'/><text x='195' y='25.02' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='9' letter-spacing='1' fill='%23ffffff'>PET</text><path d='M239 1 L257 11.41 L257 32.22 L239 42.63 L221 32.22 L221 11.41 Z' fill='%23e4e4e2' stroke='%23bcbcbb' stroke-width='1'/><text x='239' y='25.02' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='9' letter-spacing='1' fill='%238a8a88'>SUB</text><path d='M283 1 L301 11.41 L301 32.22 L283 42.63 L265 32.22 L265 11.41 Z' fill='%23e4e4e2' stroke='%23bcbcbb' stroke-width='1'/><text x='283' y='25.02' text-anchor='middle' font-family='JetBrains Mono, monospace' font-size='9' letter-spacing='1' fill='%238a8a88'>NED</text></svg>") no-repeat 0 0 / 100% auto;
    }

    body.page-bilten .bilt__hero .container.narrow::before {
        display: none;
    }
}

/* ── FORMA = OBRAZAC (isti objekat gore i dole) ───────────── */
body.page-bilten .bilt__form {
    position: relative;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
    border-top: 3px solid var(--brand);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 1px 2px rgba(30, 30, 28, 0.06), 0 24px 56px rgba(30, 30, 28, 0.12);
}

/* pečat preko ruba obrasca — obećanje kao overeno */
body.page-bilten .bilt__form::after {
    content: "POTVRDA MEJLOM";
    position: absolute;
    top: -13px;
    right: 16px;
    transform: rotate(-4deg);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--brand);
    border: 1.5px solid rgba(155, 25, 25, 0.75);
    border-radius: 3px;
    padding: 5px 8px;
    background: var(--bg-paper);
    pointer-events: none;
}

body.page-bilten .bilt__form::before {
    content: "OBRAZAC · PRIJAVA";
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-light-haze);
    margin-bottom: var(--space-4);
}

body.page-bilten .bilt__hero .bilt__form {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    justify-self: end;
    width: 100%;
}

body.page-bilten .bilt__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

body.page-bilten .bilt__input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--fg-light);
    background: var(--bg-light-soft);
    border: 1px solid #7a7a78;   /* ivica, pinovana (S130) */
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    transition: border-color 120ms ease, background 120ms ease;
}

body.page-bilten .bilt__input::placeholder {
    color: var(--fg-light-haze);
}

body.page-bilten .bilt__input:hover {
    border-color: var(--fg-light-mid);
}

body.page-bilten .bilt__input:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
    background: #fff;
}

body.page-bilten .bilt__submit {
    width: 100%;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: 1.0625rem;
    font-weight: 700;
    padding: var(--space-3) var(--space-5);
}

body.page-bilten .bilt__submit:focus-visible {
    outline: 2px solid var(--fg-light);
    outline-offset: 2px;
}

body.page-bilten .bilt__submit:disabled {
    opacity: 0.65;
    cursor: wait;
}

/* obećanje = deo ponude, odvojeno hairline-om od radnje */
body.page-bilten .bilt__fine {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--fg-light-mid);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
}

/* rezultat: stanja čitljiva i bez boje (✓ / ✕) */
body.page-bilten .bilt__result {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}

body.page-bilten .bilt__result[hidden] {
    display: none;
}

body.page-bilten .bilt__result::before {
    font-weight: 700;
}

body.page-bilten .bilt__result.is-ok {
    color: var(--u-forest);
    background: rgba(74, 93, 62, 0.08);
    border: 1px solid rgba(74, 93, 62, 0.35);
}

body.page-bilten .bilt__result.is-ok::before {
    content: "✓";
}

body.page-bilten .bilt__result.is-err {
    color: var(--brand);
    background: var(--brand-faint);
    border: 1px solid rgba(155, 25, 25, 0.35);
}

body.page-bilten .bilt__result.is-err::before {
    content: "✕";
}

/* honeypot + sr-only — ostaju sakriveni (anti-bot / pristupačnost) */
body.page-bilten .bilt__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.page-bilten .bilt__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── SEKCIJE: levi rail (indeks + naslov) / desna kolona ──── */
body.page-bilten .bilt__sekcija {
    padding: 112px 0; /* 4 ćelije */
}

/* rail 9 ćelija + procep 2 ćelije → sadržaj počinje na 11. liniji */
body.page-bilten .bilt__sekcija .container.narrow {
    display: grid;
    grid-template-columns: minmax(0, 252px) minmax(0, 1fr);
    gap: var(--space-5) 56px;
    align-items: start;
}

body.page-bilten .bilt__sekcija .container.narrow > * {
    grid-column: 2;
}

body.page-bilten .bilt__sekcija .container.narrow > .bilt__h2 {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 28px;
}

body.page-bilten .bilt__h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

body.page-bilten .bilt__h2::before {
    counter-increment: biltsek;
    content: "// 0" counter(biltsek);
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--brand);
    margin-bottom: var(--space-3);
}

/* ── ŠTA STIŽE (01) — tamna ploča sa heks mrežom (noćna smena) ─ */
body.page-bilten .bilt__sekcija[aria-labelledby="bilt-stize"] {
    --blt-bgx: 0px;
    background-color: #161614;
    color: #ece9e3;
    background-image:
        linear-gradient(to right, rgba(232, 232, 230, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(232, 232, 230, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: var(--blt-bgx) 0;
}

body.page-bilten .bilt__sekcija[aria-labelledby="bilt-stize"] .bilt__h2::before {
    color: #c52828;
}

body.page-bilten .bilt__stavke {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    counter-reset: stavka;
}

body.page-bilten .bilt__stavka {
    counter-increment: stavka;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: var(--space-5);
    padding: var(--space-6) 0;
    border-top: 1px solid #34342f;
    border-left: none;
}

body.page-bilten .bilt__stavka:first-child {
    border-top: none;
    padding-top: 0;
}

body.page-bilten .bilt__stavka:last-child {
    padding-bottom: 0;
}

body.page-bilten .bilt__stavka::before {
    content: "0" counter(stavka);
    grid-column: 1;
    grid-row: 1 / span 2;
    font-family: var(--font-mono);
    font-size: 3.4rem;
    font-weight: 500;
    line-height: 1;
    color: #4a4844;
    margin-top: -0.06em;
}

@supports (-webkit-text-stroke: 1px #000) {
    body.page-bilten .bilt__stavka::before {
        color: transparent;
        -webkit-text-stroke: 1.3px #625f59;
    }

    body.page-bilten .bilt__stavka:hover::before {
        -webkit-text-stroke-color: #c52828;
    }
}

body.page-bilten .bilt__stavka-t {
    grid-column: 2;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}

body.page-bilten .bilt__stavka-d {
    grid-column: 2;
    margin: 0;
    line-height: 1.65;
    color: #b8b4ab;
    max-width: 36em;
}

/* ── PRIMER IZDANJA (02) — izlog na projektnom papiru ─────── */
body.page-bilten .bilt__sekcija--primer {
    --blt-bgx: 0px;
    background-color: var(--bg-paper);
    background-image:
        linear-gradient(to right, rgba(26, 26, 24, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 26, 24, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: var(--blt-bgx) 0;
    border-bottom: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
}

body.page-bilten .bilt__napomena {
    display: block;
    margin: 0.35rem 0 var(--space-2);
    color: var(--fg-light-faint);
}

/* mejl = beli papir sa crvenim letterhead rubom;
   iza njega dva „prošla izdanja" — svežanj, blago nakošen */
body.page-bilten .bilt__mejl {
    background: #fff;
    border: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
    border-top: 2px solid var(--brand);
    border-radius: var(--radius-lg);
    box-shadow:
        14px 14px 0 -1px var(--bg-light-soft),
        14px 14px 0 0 #c6c4bf,
        28px 28px 0 -1px var(--bg-light-soft),
        28px 28px 0 0 #d8d6d1,
        0 24px 48px rgba(30, 30, 28, 0.09);
    overflow: hidden;
    transform: rotate(-0.4deg);
    margin: 0 28px 28px 0; /* svežanj pomeren ½ i 1 ćeliju; širina karte = 25 ćelija */
}

body.page-bilten .bilt__mejl-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
    background: var(--bg-paper);
}

body.page-bilten .bilt__mejl-meta {
    color: var(--fg-light-haze);
    flex: 0 0 auto;
}

body.page-bilten .bilt__mejl-subject {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg-light);
}

body.page-bilten .bilt__mejl-body {
    padding: var(--space-6);
    color: var(--fg-light);
}

body.page-bilten .bilt__mejl-intro {
    margin: 0 0 var(--space-6);
    color: var(--fg-light-muted);
}

body.page-bilten .bilt__mejl-items {
    list-style: none;
    counter-reset: mejl;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

body.page-bilten .bilt__mejl-item {
    counter-increment: mejl;
    position: relative;
    padding-left: 2.25rem;
    display: grid;
    gap: var(--space-1);
}

/* numeracija u mejlu preuzima crvenu — ista tri obećanja iz „Šta stiže" */
body.page-bilten .bilt__mejl-item::before {
    content: counter(mejl) ".";
    position: absolute;
    left: 0;
    top: 0.2em;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand);
}

/* „link" u primeru je namerno span — nosi vizuelni jezik mejla */
body.page-bilten .bilt__mejl-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.page-bilten .bilt__mejl-sent {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--fg-light-muted);
}

body.page-bilten .bilt__mejl-outro {
    margin: 0 0 var(--space-3);
    color: var(--fg-light-muted);
}

body.page-bilten .bilt__mejl-sig {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--fg-light-mid);
}

/* ── KO PIŠE — svetli list: autor na papiru, lično.
   Po dnu: linija horizonta (dva poteza brda) i stado —
   sve ovce sive, jedna crvena, izdvojena, ide ka autoru.
   Crvena pilula među ovcama. ────────────────────────── */
body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] {
    background-color: var(--bg-light-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' fill='none'><path d='M0 190 Q220 148 440 178 Q620 202 800 168 Q1000 138 1200 178' stroke='%231e1e1c' stroke-opacity='0.22' stroke-width='1.5'/><path d='M0 228 Q300 204 600 222 Q900 240 1200 212' stroke='%231e1e1c' stroke-opacity='0.12' stroke-width='1.2'/><g fill='%238a857e' stroke='%238a857e' stroke-width='1.5'><ellipse cx='395' cy='176' rx='11' ry='7' stroke='none'/><circle cx='406' cy='171.5' r='3.5' stroke='none'/><path d='M390 182 l0 7.5 M400 182 l0 7.5'/></g><g fill='%238a857e' stroke='%238a857e' stroke-width='1.6'><ellipse cx='470' cy='172' rx='13' ry='8' stroke='none'/><circle cx='483' cy='167' r='4' stroke='none'/><path d='M464 179 l0 8 M476 179 l0 8'/></g><g fill='%238a857e' stroke='%238a857e' stroke-width='1.6'><ellipse cx='555' cy='180' rx='12' ry='7.5' stroke='none'/><circle cx='567' cy='175' r='3.8' stroke='none'/><path d='M549 186 l0 8 M561 186 l0 8'/></g><g fill='%238a857e' stroke='%238a857e' stroke-width='1.4'><ellipse cx='613' cy='185' rx='10' ry='6.5' stroke='none'/><circle cx='623' cy='181' r='3.2' stroke='none'/><path d='M608 190 l0 7 M618 190 l0 7'/></g><g fill='%239b1919' stroke='%239b1919' stroke-width='1.6'><ellipse cx='738' cy='177' rx='13' ry='8' stroke='none'/><circle cx='751' cy='172' r='4' stroke='none'/><path d='M732 184 l0 8 M744 184 l0 8'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: max(1100px, 100vw) auto;
    border-top: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
    /* INTEGRACIONA ZAKRPA: horizont (bg) se skalira sa 100vw, a rezerva je
       bila kapirana na 11rem — na širokim ekranima brda stignu do linka
       „Zašto Crvena Pilula". Donji padding zato raste sa viewport-om
       (9vw+4rem drži ~50-80px vazduha do najvišeg brda), clamp ostaje
       kao minimum za uske ekrane — mobilni raspored nepromenjen. */
    padding-bottom: max(clamp(8rem, 13vw, 11rem), calc(9vw + 4rem));
}

/* autor lomi rail raspored — jedini lični blok na stranici:
   naslov + tekst levo, velika fotografija desno */
body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow {
    grid-template-columns: minmax(0, 1fr) auto;
}

body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow > * {
    grid-column: 1;
}

body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow > .bilt__h2 {
    grid-column: 1;
    position: static;
    margin-bottom: var(--space-4);
}

body.page-bilten .bilt__autor-tekst {
    font-size: clamp(1.2rem, 1.8vw, 1.35rem);
    line-height: 1.7;
    max-width: 28em;
    margin: 0 0 var(--space-5);
    color: var(--fg-light);
}

body.page-bilten .bilt__autor-link a {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}

body.page-bilten .bilt__autor-link a:hover,
body.page-bilten .bilt__autor-link a:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* fotografija autora u heksagonu logotipa, u boji — jedina
   fotografija na stranici (namerno: čovek iza mono dokumenta).
   Prelama granicu tamnog izloga iznad — autor izlazi iz
   dokumenta ka čitaocu.
   PREDLOG markup-a (jedan novi element u template-u):
   <img class="bilt__autor-foto" src="…" alt="Denis Daničić"> */
body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow > .bilt__autor-foto {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
    margin-left: var(--space-6);
}

body.page-bilten .bilt__autor-foto {
    display: block;
    width: clamp(320px, 36vw, 480px);
    height: auto;
    aspect-ratio: 10 / 9;
    clip-path: polygon(25% 8%, 75% 8%, 92.5% 50%, 75% 92%, 25% 92%, 7.5% 50%);
    object-fit: cover;
    object-position: 50% 22%;
}

/* preview slot (custom element) ne zna za aspect-ratio bez visine */
body.page-bilten image-slot.bilt__autor-foto {
    height: calc(clamp(320px, 36vw, 480px) * 0.9);
}

/* ── PITANJA — siva kartica između svetlog i tamnog ───────── */
body.page-bilten .bilt__sekcija[aria-labelledby="bilt-faq"] {
    background: var(--bg-light-card);
    border-top: 1px solid var(--bg-light-rule, rgba(30, 30, 28, 0.12));
}

body.page-bilten .bilt__faq {
    margin: 0;
    display: block;
}

body.page-bilten .bilt__faq-par {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) 0 var(--space-5);
    border-top: 1px solid #cfcdc8;
}

body.page-bilten .bilt__faq-par:first-child {
    border-top: none;
    padding-top: 0;
}

body.page-bilten .bilt__faq-par:last-child {
    padding-bottom: 0;
}

body.page-bilten .bilt__faq-q {
    position: relative;
    padding-left: 28px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

/* heks čvor iz logotipa kao bullet — ista geometrija kao
   fotografija autora i oznaka u hero labeli */
body.page-bilten .bilt__faq-q::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 12px;
    height: 11px;
    clip-path: polygon(25% 8%, 75% 8%, 92.5% 50%, 75% 92%, 25% 92%, 7.5% 50%);
    background: var(--brand);
}

body.page-bilten .bilt__faq-a {
    margin: 0;
    padding-left: 28px;
    line-height: 1.65;
    color: var(--fg-light-muted);
    max-width: 38em;
}

/* ── DNO — tamna završna ploča (pred-footer konvencija);
   ista mreža kao hero, noćna smena — dokument se zatvara,
   a svetli footer posle njega čita se kao povratak kući ───── */
body.page-bilten .bilt__sekcija--dno {
    --blt-bgx: 0px;
    position: relative;
    background-color: #161614;
    color: #ece9e3;
    background-image:
        linear-gradient(to right, rgba(232, 232, 230, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(232, 232, 230, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: var(--blt-bgx) 0;
    padding: 112px 0; /* 4 ćelije */
}

/* dokument se zatvara: EOF markeri u donjim uglovima */
body.page-bilten .bilt__sekcija--dno::before,
body.page-bilten .bilt__sekcija--dno::after {
    position: absolute;
    bottom: 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6f6b66;
    pointer-events: none;
}

body.page-bilten .bilt__sekcija--dno::before {
    content: "// EOF";
    left: 24px;
}

body.page-bilten .bilt__sekcija--dno::after {
    content: "CRVENAPILULA.RS/BILTEN";
    right: 24px;
    text-align: right;
}

body.page-bilten .bilt__sekcija--dno .container.narrow {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

/* nadjačava generičko `.bilt__sekcija .container.narrow > *` (kolona 2) */
body.page-bilten .bilt__sekcija--dno .container.narrow > * {
    grid-column: 1;
}

body.page-bilten .bilt__sekcija--dno .bilt__form {
    width: min(100%, 420px);
}

body.page-bilten .bilt__dno-poziv {
    grid-column: 1;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-2);
    max-width: 22em;
}

body.page-bilten .bilt__dno-poziv::before {
    content: "// PRIJAVA";
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #c52828;
    margin-bottom: var(--space-3);
}

body.page-bilten ::selection {
    background: var(--brand);
    color: #fff;
}

/* ── TABLET / MOBILNO ─────────────────────────────────────── */
@media (max-width: 860px) {
    body.page-bilten .bilt__hero .container.narrow {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-6);
    }

    /* desktop prelom pred „presek…“ nema smisla u uskoj koloni */
    body.page-bilten .bilt__lead br {
        display: none;
    }

    body.page-bilten .bilt__hero .bilt__form {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        order: 5;
    }

    body.page-bilten .bilt__sekcija .container.narrow,
    body.page-bilten .bilt__sekcija--dno .container.narrow,
    body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    body.page-bilten .bilt__sekcija .container.narrow > *,
    body.page-bilten .bilt__sekcija .container.narrow > .bilt__h2,
    body.page-bilten .bilt__dno-poziv,
    body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow > .bilt__autor-foto {
        grid-column: 1;
        grid-row: auto;
    }

    /* Ko ga piše — mobilna kompozicija: naslov → foto (centrirana
       figura) → tekst → link; stado u dnu sekcije ostaje kadrirano
       na jato (background center bottom) */
    /* jato u SVG-u stoji levo od centra (crvena ide ka autoru);
       na fiksnih 1100px pozadine +22px centrira stado u kadru */
    body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] {
        background-position: calc(50% + 22px) bottom;
    }

    body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow > .bilt__h2 {
        order: 1;
    }

    body.page-bilten .bilt__sekcija[aria-labelledby="bilt-autor"] .container.narrow > .bilt__autor-foto {
        order: 2;
        margin-top: 0;
        margin-left: 0;
        justify-self: center;
    }

    body.page-bilten .bilt__autor-tekst {
        order: 3;
    }

    body.page-bilten .bilt__autor-link {
        order: 4;
    }

    body.page-bilten .bilt__autor-foto {
        width: min(300px, 84vw);
    }

    body.page-bilten image-slot.bilt__autor-foto {
        height: calc(min(300px, 84vw) * 0.9);
    }

    body.page-bilten .bilt__sekcija .container.narrow > .bilt__h2 {
        position: static;
    }
}

@media (max-width: 640px) {
    body.page-bilten .bilt__hero {
        padding: 48px 0 56px; /* 2 ćelije, tanje gore */
    }

    /* ── mobilna tipografska skala (prevod, ne port):
       naslov ~32px, sekcijski naslovi 22px, tekst 16–17px;
       mono etikete ostaju 10–12px kao na svim stranicama ── */
    body.page-bilten .bilt__hero .section-heading {
        font-size: clamp(1.75rem, 8.2vw, 2.1rem);
        line-height: 1.12;
    }

    body.page-bilten .bilt__lead {
        font-size: 1.125rem;
        line-height: 1.6;
    }

    body.page-bilten .bilt__fine {
        font-size: 0.875rem;
    }

    body.page-bilten .bilt__h2 {
        font-size: 1.375rem;
    }

    body.page-bilten .bilt__stavka-t {
        font-size: 1.0625rem;
    }

    body.page-bilten .bilt__stavka-d {
        font-size: 1rem;
        line-height: 1.6;
    }

    body.page-bilten .bilt__mejl-subject,
    body.page-bilten .bilt__mejl-intro,
    body.page-bilten .bilt__mejl-outro {
        font-size: 1rem;
    }

    body.page-bilten .bilt__mejl-sent {
        font-size: 0.9375rem;
    }

    body.page-bilten .bilt__autor-tekst {
        font-size: 1.0625rem;
        line-height: 1.65;
    }

    body.page-bilten .bilt__faq-q {
        font-size: 1.0625rem;
    }

    body.page-bilten .bilt__faq-a {
        font-size: 1rem;
        line-height: 1.6;
    }

    body.page-bilten .bilt__dno-poziv {
        font-size: 1.375rem;
    }

    body.page-bilten .bilt__sekcija {
        padding: 56px 0;
    }

    /* dno: mobilni ritam umesto desktop 112px; dole prostor za EOF markere */
    body.page-bilten .bilt__sekcija--dno {
        padding: 64px 0 96px;
    }

    body.page-bilten .bilt__form {
        max-width: none;
        padding: var(--space-4);
    }

    body.page-bilten .bilt__stavka {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        column-gap: var(--space-4);
    }

    body.page-bilten .bilt__stavka::before {
        font-size: 2.1rem;
    }

    body.page-bilten .bilt__mejl {
        box-shadow:
            8px 8px 0 -1px var(--bg-light-soft),
            8px 8px 0 0 #c6c4bf,
            0 16px 32px rgba(30, 30, 28, 0.08);
        transform: none;
        margin: 0 8px 8px 0;
    }

    body.page-bilten .bilt__mejl-head {
        flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-4);
    }

    body.page-bilten .bilt__mejl-body {
        padding: var(--space-4);
    }

    body.page-bilten .bilt__mejl-item {
        padding-left: 1.75rem;
    }
}