/* ============================================================
   PORUKA DANA — dizajn sistem
   Brend: Ammar Bašić · zelena #1F4033 · zlatna #C6A968 · papir #F4EFE4
   ------------------------------------------------------------
   Jedna kolona: header, kartica i traka knjiga dijele istu
   širinu (--maxw) i isti unutrašnji padding (--pad).
   Ornamenti su geometrijski (osmokraka zvijezda, arabeskni
   uglovi, girih traka) i drže se ivica — nikad pozadine.
   ------------------------------------------------------------
   1 Tokeni · 2 Reset · 3 Ambijent · 4 Header · 5 Ornamenti
   6 Kartica · 7 Svajp · 8 Sekcije · 9 Traka · 10 Modali
   11 Redovi · 12 Sačuvano · 13 Dijeljenje · 14 Toast
   15 Uvod · 16 Nadogradnja · 17 Razvojna traka
   18 Vodič za instalaciju · 19 Responzivno · 20 Pomoćno
   ============================================================ */

/* ugao za pokretni obrub kartice — registrovan da bi bio animiran */
@property --ugao {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- 1. TOKENI ---------- */
:root {
  --brand-gold:   #C6A968;
  --brand-gold-l: #E9C77E;

  --serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --display: 'Playfair Display', 'EB Garamond', Georgia, serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;  --r-xl: 24px;
  --pad:  clamp(16px, 4.6vw, 26px);
  --maxw: 580px;
  --mpad: clamp(16px, 4.6vw, 22px);

  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;  --t: .34s;

}

/* --- TAMNA: „noć“ --- */
:root,
:root[data-tema="tamna"] {
  --bg:        #0B1711;
  --bg-2:      #0E1C15;
  --surface:   #12251C;
  --surface-2: #162C21;
  --ink:       #F2ECE0;
  --ink-soft:  #A5B3A8;
  --ink-mute:  #6B7D71;
  --gold:      #C6A968;
  --line:      rgba(198,169,104,.16);
  --line-soft: rgba(242,236,224,.07);
  --glow:      rgba(198,169,104,.24);
  --glow-2:    rgba(122,198,150,.10);
  --shadow:    0 34px 72px -26px rgba(0,0,0,.92), 0 8px 22px -12px rgba(0,0,0,.6);
  --na-zlatu:  #11221A;
  --grain:     .022;
  --uzorak-op: .048;
  --uzorak-karta: .028;
  --zlato-filter: none;
  --nit-nula:  rgba(198,169,104,0);
  --nit-slabo: rgba(198,169,104,.11);
  --nit-jako:  rgba(233,199,126,.95);
  --navod:     #E9C77E;
  color-scheme: dark;
}

/* --- SVIJETLA: „papir“ --- */
:root[data-tema="svijetla"] {
  --bg:        #F5F1E7;
  --bg-2:      #FBF8F1;
  --surface:   #FDFBF6;
  --surface-2: #F8F4EA;
  --ink:       #13271D;
  --ink-soft:  #4C5F52;
  --ink-mute:  #8A9A8D;
  --gold:      #96742E;
  --line:      rgba(19,39,29,.13);
  --line-soft: rgba(19,39,29,.07);
  --glow:      rgba(150,116,46,.20);
  --glow-2:    rgba(31,64,51,.08);
  --shadow:    0 30px 60px -26px rgba(19,39,29,.34), 0 8px 20px -12px rgba(19,39,29,.18);
  --na-zlatu:  #FDFBF6;
  --grain:     .018;
  --uzorak-op: .046;
  /* Viša nego na tamnoj temi: zlato na papiru je mekši kontrast nego svijetli
     motiv na tamnoj podlozi, pa mu treba nešto više da se uopšte osjeti.
     Složeno po izgledu, ne po računu — vidi `--uzorak-karta` iznad. */
  --uzorak-karta: .046;
  --zlato-filter: saturate(1.2) brightness(.62);
  --nit-nula:  rgba(150,116,46,0);
  --nit-slabo: rgba(150,116,46,.12);
  --nit-jako:  rgba(150,116,46,.8);
  --navod:     #A8813A;
  color-scheme: light;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold); color: var(--bg); }

/* ---------- 3. AMBIJENT ---------- */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient::before {
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain); mix-blend-mode: overlay;
}

/* brend geometrija preko cijele strane — tiho, tek da se osjeti materijal */
.ambient__uzorak {
  position: absolute; inset: 0;
  background: url("/assets/texture/texture.svg") repeat center / 620px auto;
  opacity: var(--uzorak-op);
  filter: var(--zlato-filter);
  /* jače pri vrhu, pa se gubi prema dnu — da ne leži ravno preko cijele strane */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 68%, transparent 94%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 68%, transparent 94%);
}
@media (min-width: 760px) { .ambient__uzorak { background-size: 860px auto; } }

/* Na telefonu ambijentalni uzorak nema gdje da se vidi: kartica pokrije skoro
   cijeli ekran, pa od njega ostanu samo uske pruge uz rubove — a one se, uz
   karticin vlastiti uzorak druge veličine i drugog pomaka, čitaju kao drugi
   motiv koji se ne poklapa. Zato na telefonu uzorak živi samo na kartici i na
   sačuvanim stavkama. Na širem ekranu ostaje: tamo ima praznog prostora oko
   kartice i uzorak radi ono zbog čega i postoji. */
@media (max-width: 759.98px) { .ambient__uzorak { display: none; } }
.ambient__glow {
  position: absolute; left: 50%; top: -26vh; width: 140vw; height: 86vh;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 52% at 50% 46%, var(--glow) 0%, transparent 70%),
    radial-gradient(38% 44% at 22% 62%, var(--glow-2) 0%, transparent 72%);
  animation: dah 16s var(--ease-soft) infinite;
}
@keyframes dah { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

/* meka zraka koja polako putuje — daje dubinu, ne odvlači pažnju */
.ambient__zraka {
  position: absolute; left: 50%; bottom: -34vh; width: 120vw; height: 76vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--glow) 0%, transparent 74%);
  opacity: .5;
  animation: dah 22s 3s var(--ease-soft) infinite reverse;
}

/* ---------- 4. HEADER ---------- */
/* Sakrivena dok JS ne odluči šta se pokazuje — vidi #ucitavanje ispod. */
html:not(.ucitano) .app { visibility: hidden; }
.app { position: relative; z-index: 1; }

.hdr {
  position: sticky; top: 0; z-index: 40;
  padding: calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  backdrop-filter: saturate(185%) blur(34px);
  -webkit-backdrop-filter: saturate(185%) blur(34px);
}
/* tanka linija ispod headera — sav karakter nosi zamućenje */
.hdr::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line-soft);
}
.hdr__inner {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 9px;
}
.hdr__mark { width: 32px; height: 32px; flex: none; }

/* povratak na poruke — tih, tekstualni, bez okvira */
.nazad {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  margin-left: -4px; padding: 6px 4px; color: var(--ink-soft);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-back);
}
.nazad svg { width: 14px; height: 14px; flex: none; }
@media (hover: hover) {
  .nazad:hover { color: var(--gold); }
}
.nazad:active { transform: translateX(-2px); }
.hdr__ime { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hdr__title {
  font-family: var(--serif); font-size: 13px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; line-height: 1; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr__sub { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; line-height: 1; white-space: nowrap; }
.hdr__spacer { flex: 1; }

.icon-btn {
  position: relative;
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-soft); border: 1px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-back);
}
@media (hover: hover) {
  .icon-btn:hover { color: var(--gold); border-color: var(--line); background: var(--surface); }
}
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 18px; height: 18px; }

/* pilula „Sačuvane poruke“ */
.pilula {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink-soft);
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-back);
}
.pilula svg { width: 14px; height: 14px; flex: none; }
.pilula--zlatna svg { color: var(--gold); }
@media (hover: hover) {
  .pilula:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
}
.pilula:active { transform: scale(.96); }
.pilula__kratko { display: none; }
.pilula--ikona { padding: 7px; width: 34px; height: 32px; justify-content: center; }
.pilula--ikona svg { width: 16px; height: 16px; }
.pilula__broj {
  display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--gold); color: var(--na-zlatu);
  font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0;
}
@media (max-width: 599px) {
  .pilula__dugo { display: none; }
  .pilula__kratko { display: inline; }
}
@media (max-width: 460px) {
  .hdr__title { font-size: 11.5px; letter-spacing: .18em; }
  .hdr__sub { font-size: 8px; letter-spacing: .16em; }
  .hdr__mark { width: 28px; height: 28px; }
}
@media (max-width: 400px) {
  .pilula { padding: 7px 9px; }
  .pilula__kratko { display: none; }
  .nazad span { display: none; }
}

.main { padding: 0 var(--pad) 60px; }
.wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }

.view { display: none; }
.view.is-active { display: block; animation: viewIn .4s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 5. ORNAMENTI ---------- */

/* razdjelnik: linija — osmokraka zvijezda — linija */
.razdjelnik {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: clamp(14px, 3.5vw, 19px) auto 0; max-width: 260px; width: 100%;
}
.razdjelnik i { flex: 1; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--gold) 46%, transparent) 45%,
    color-mix(in srgb, var(--gold) 52%, transparent) 55%,
    transparent); }
.razdjelnik svg {
  width: 15px; height: 15px; flex: none; color: var(--gold); opacity: .85;
  animation: zvijezdaOkret 46s linear infinite;
}
@keyframes zvijezdaOkret { to { transform: rotate(360deg); } }

/* brendirani razdjelnik iz seta */

/* brend znak umjesto zvjezdice — ispod detalja dana */
.razdjelnik--znak { max-width: 300px; gap: 16px; }
.razdjelnik__znak {
  width: 40px; height: 40px; flex: none;
  opacity: .92;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--gold) 26%, transparent));
  animation: znakDah 7s var(--ease-soft) infinite;
}
@keyframes znakDah {
  0%, 100% { opacity: .8;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.045); }
}

/* uglovi kartice — samo tanka zagrada, gore lijevo i desno */
.karta__uglovi { position: absolute; inset: 13px; pointer-events: none; }
.karta__uglovi span {
  position: absolute; width: 34px; height: 34px; color: var(--gold);
  opacity: 0; animation: ugaoUlaz .9s var(--ease) forwards;
}
.karta__uglovi svg { width: 100%; height: 100%; }
.karta__uglovi span:nth-child(1) { top: 0; left: 0; animation-delay: .3s; }
.karta__uglovi span:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); animation-delay: .38s; }
@keyframes ugaoUlaz { to { opacity: .3; } }

/* ---------- 6. KARTICA ---------- */
.karta {
  position: relative; isolation: isolate;
  --vuk: 0;                                   /* 0–1: koliko je kartica povučena */
  margin-top: clamp(14px, 4vw, 26px);
  background:
    radial-gradient(120% 68% at 50% -10%, color-mix(in srgb, var(--gold) 17%, transparent) 0%, transparent 62%),
    radial-gradient(95% 55% at 105% 100%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 60%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--surface) 92%, var(--gold)) 0%,
      var(--surface) 38%,
      var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 5.2vw, 32px) clamp(18px, 4.8vw, 28px) clamp(15px, 3.2vw, 19px);
  box-shadow:
    0 40px 80px -28px rgba(0,0,0,.62),
    0 14px 34px -16px rgba(0,0,0,.42),
    0 0 0 1px color-mix(in srgb, var(--gold) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  /* raste s dužinom poruke — visina je samo donji prag, nikad strop */
  min-height: min(56dvh, 520px);
  touch-action: pan-y;
  overflow: hidden;
  cursor: grab;
  animation: kartaIn .66s .04s var(--ease) both;
}
/* vraćanje u mirovanje kad potez ne pređe prag */
.karta.klizi  { transition: transform .34s var(--ease), opacity .34s var(--ease); }
/* prijelaz na drugi dan: kartica isklizne, pa nova uklizne s druge strane */
.karta.izlazi { transition: transform .22s var(--ease-soft), opacity .22s var(--ease-soft); }
.karta.ulazi  { transition: transform .46s var(--ease), opacity .46s var(--ease); }
.karta.vuce  { cursor: grabbing; }
.karta.vuce, .karta.vuce * { user-select: none; }
@keyframes kartaIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

:root[data-tema="svijetla"] .karta {
  box-shadow:
    0 36px 70px -30px rgba(19,39,29,.28),
    0 12px 28px -16px rgba(19,39,29,.16),
    0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* --- tekstura na samoj kartici (samo telefon) ---
   Ambijentalni uzorak stoji iza aplikacije, ali na telefonu kartica pokrije
   gotovo cijeli ekran, pa se od njega ne vidi ništa. Isti uzorak zato ide i
   na karticu — ali samo tu gdje nedostaje. Na širem ekranu kartica ne pokriva
   pozadinu, uzorak se vidi oko nje, i ovo bi bilo udvajanje istog motiva.

   Motiv je namjerno krupan (tri i po puta veći od ambijentalnog): sitan je
   djelovao nervozno i previše naglo pod tekstom.

   Ide na `::after`, ne `::before` — `::before` već nosi zlatnu nit oko ruba.
   `z-index: -1` u kartičinom stacking kontekstu (`isolation: isolate`) znači
   iznad njene pozadine, ispod cijelog sadržaja; a pošto je `::after` zadnji
   u redu, uzorak stoji i iznad `.karta__aura`, koja bi ga inače isprala. */
@media (max-width: 759.98px) {
  .karta::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: inherit;
    background: url("/assets/texture/texture.svg") repeat center / 780px auto;
    opacity: var(--uzorak-karta);
    filter: var(--zlato-filter);

    /* Maska je slojevita namjerno: tri mrlje plus jedan pad prema dnu. Slojevi
       se sabiraju (podrazumijevani `add`), pa se uzorak negdje nakupi a negdje
       skoro nestane — diše preko kartice umjesto da leži ravno po njoj. */
    -webkit-mask-image:
      radial-gradient(115% 62% at 14% 2%,  #000 0%, rgba(0,0,0,.42) 38%, transparent 72%),
      radial-gradient(85% 52% at 94% 26%,  rgba(0,0,0,.72) 0%, transparent 64%),
      radial-gradient(70% 46% at 26% 58%,  rgba(0,0,0,.34) 0%, transparent 74%),
      linear-gradient(177deg, #000 0%, rgba(0,0,0,.4) 48%, rgba(0,0,0,.1) 80%, transparent 98%);
            mask-image:
      radial-gradient(115% 62% at 14% 2%,  #000 0%, rgba(0,0,0,.42) 38%, transparent 72%),
      radial-gradient(85% 52% at 94% 26%,  rgba(0,0,0,.72) 0%, transparent 64%),
      radial-gradient(70% 46% at 26% 58%,  rgba(0,0,0,.34) 0%, transparent 74%),
      linear-gradient(177deg, #000 0%, rgba(0,0,0,.4) 48%, rgba(0,0,0,.1) 80%, transparent 98%);
  }
}

/* meki gradijentni oblaci unutar kartice — dišu, ali nikad ne smetaju tekstu */
.karta__aura {
  position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(58% 42% at 16% 6%,  color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%),
    radial-gradient(54% 40% at 88% 94%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 72%),
    radial-gradient(70% 50% at 50% 50%, color-mix(in srgb, var(--gold) 8%, transparent),  transparent 75%);
  opacity: .85;
  animation: auraDah 15s var(--ease-soft) infinite;
}
@keyframes auraDah {
  0%, 100% { opacity: .48; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.05); }
}

/* zlatna nit koja obilazi cijelu karticu */
.karta::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 2.5px; pointer-events: none;
  /* Dvije svijetle linije u istom gradijentu, razmaknute tačno 180deg — pa
     su, dok obilaze, uvijek dijagonalno jedna naspram druge. Jedan rotirajući
     gradijent to drži sam po sebi: nema drugog sloja koji bi se raspao. */
  background: conic-gradient(from var(--ugao),
    var(--nit-slabo)  0deg,
    var(--nit-slabo)   16deg,
    var(--nit-nula)    54deg,
    var(--nit-jako)   104deg,
    var(--nit-jako)   136deg,
    var(--nit-nula)   170deg,
    var(--nit-slabo)  177deg,
    var(--nit-slabo)  196deg,
    var(--nit-nula)   234deg,
    var(--nit-jako)   284deg,
    var(--nit-jako)   316deg,
    var(--nit-nula)   350deg,
    var(--nit-slabo)  357deg,
    var(--nit-slabo)  360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: nitObilazi 9s linear infinite;
}
@keyframes nitObilazi { to { --ugao: 360deg; } }


.karta__vrh { text-align: center; }

/* dan u sedmici — bez okvira, samo krupna verzalna riječ */
.karta__dan {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: clamp(10.5px, 2.8vw, 12px); letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; line-height: 1;
  animation: rise .55s var(--ease) both;
}
.karta__dan span { transform: translateX(.17em); }   /* letter-spacing ostavlja rep desno */

.karta__datum {
  font-family: var(--serif); font-size: clamp(21px, 5.4vw, 26px); font-weight: 400;
  line-height: 1.18; margin-top: 10px; letter-spacing: -.012em;
  background: linear-gradient(100deg, var(--ink) 18%, color-mix(in srgb, var(--gold) 62%, var(--ink)) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: rise .55s .05s var(--ease) both;
}
.karta__hidzri { font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: clamp(13.5px, 3.7vw, 15.5px); margin-top: 4px; animation: rise .55s .1s var(--ease) both; }

/* tijelo — prilagođeno dužim porukama */
.karta__telo {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: clamp(20px, 4.6vw, 30px) 0 clamp(16px, 3.4vw, 22px);
}

/* Navodnici više ne ovise o mjerenju redova: sidre se za uglove stupca
   citata, a veličina im je u `em` — pa rastu i smanjuju se zajedno s
   porukom i nikad ne „skaču“ dok se tekst ispisuje. */
.citat {
  position: relative; width: 100%; max-width: 40ch; margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 30px);
  font-size: clamp(19px, 4.9vw, 24px);
}
.navod {
  position: absolute; z-index: 0;
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: 2.9em;
  color: var(--navod); opacity: .22;
  user-select: none; pointer-events: none; white-space: pre;
  transition: opacity var(--t) var(--ease-soft);
}
.navod--o { top: -.34em; left: 0; }
.navod--z { bottom: -.62em; right: 0; }
@media (hover: hover) {
  .karta:hover .navod { opacity: .3; }
}

.karta__tekst {
  font-family: var(--serif);
  font-size: 1em;
  line-height: 1.64; font-weight: 400; letter-spacing: .004em;
  margin: 0; text-align: center; text-wrap: pretty; color: var(--ink);
}
/* duže poruke dobiju širi stupac i sitniji slog — kraće ostaju krupne */
.karta[data-duzina="srednje"]  .citat { font-size: clamp(17px, 4.3vw, 21px);   max-width: 42ch; }
.karta[data-duzina="dugo"]     .citat { font-size: clamp(15.5px, 3.9vw, 19px); max-width: 46ch; }
.karta[data-duzina="vrlodugo"] .citat { font-size: clamp(14.5px, 3.5vw, 17.5px); max-width: 50ch; }
.karta[data-duzina="dugo"]     .karta__tekst,
.karta[data-duzina="vrlodugo"] .karta__tekst { line-height: 1.7; }
.karta[data-duzina="dugo"]     .navod { font-size: 2.6em; opacity: .18; }
.karta[data-duzina="vrlodugo"] .navod { font-size: 2.3em; opacity: .16; }

.karta__tekst .w { display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(6px); }
.karta__tekst.reveal .w { animation: wordIn .5s var(--ease) forwards; }
@keyframes wordIn { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* knjiga */
.izvor {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: clamp(13px, 3.2vw, 16px) 0;
  border-top: 1px solid var(--line-soft);
  animation: rise .55s .48s var(--ease) both;
  transition: opacity var(--t-fast);
}
@media (hover: hover) {
  .izvor:hover { opacity: .82; }
}
.izvor:active { opacity: .66; }

/* poziv na akciju: natpis pa strelica, na kraju reda */
.izvor__cta {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--gold) 16%, transparent),
    color-mix(in srgb, var(--gold) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  color: var(--gold); font-size: 8px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-back), border-color var(--t-fast);
}
@media (hover: hover) {
  .izvor:hover .izvor__cta { transform: translateX(2px);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
}
.izvor__cta svg { width: 12px; height: 12px; flex: none; }
.izvor__cta-kratko { display: none; }

.izvor__cover {
  width: 56px; height: 84px; flex: none; object-fit: cover; border-radius: 4px;
  box-shadow: 0 10px 24px -9px rgba(0,0,0,.7), 0 0 0 1px var(--line),
              inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform var(--t) var(--ease);
}
@media (hover: hover) {
  .izvor:hover .izvor__cover { transform: translateY(-2px) rotate(-1.2deg); }
}
.izvor__tekst { flex: 1; min-width: 0; }
.izvor__nad { display: block; font-size: 8px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin-bottom: 5px; }
.izvor__naslov { display: -webkit-box; font-family: var(--serif); font-size: 18.5px; font-weight: 500;
  line-height: 1.26; color: var(--ink); overflow: hidden;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.izvor__tema {
  display: -webkit-box; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-top: 6px; line-height: 1.45;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.izvor__str { flex: none; display: flex; color: var(--ink-mute); }
.izvor__str svg { width: 13px; height: 13px; }

/* akcije unutar kartice */
.karta__akcije {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
  animation: rise .55s .54s var(--ease) both;
}
/* Sačuvaj / Dijeli / Kopiraj su glavne radnje na kartici, a stajale su u
   `--ink-mute` — istoj boji kojom se pišu sporedne oznake — pa su se jedva
   nazirale, u obje teme. Sada nose `--ink-soft` (tekst, ne fusnota), ikonica
   je deblja i za nijansu veća, a natpis ispod ostaje tiši da par ikona+riječ
   i dalje čita kao jedno. */
.akcija {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 4px 11px; color: var(--ink-soft);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-back);
}
.akcija::after {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 120%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%);
  transition: opacity var(--t) var(--ease-soft);
}
@media (hover: hover) {
  .akcija:hover::after { opacity: 1; }
}
.akcija + .akcija::before {
  content: ''; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--line-soft); z-index: 1;
}
/* Debljinu linije NE diramo odavde: `<symbol>` nosi vlastiti `stroke-width`,
   a njegova djeca nasljeđuju njega, ne vanjski `<svg>` — pravilo bi ovdje
   tiho bilo bez efekta. Deblje se postavlja na samom simbolu u index.html. */
.akcija svg { width: 19px; height: 19px; transition: transform var(--t) var(--ease-back); position: relative; z-index: 1; }
/* Natpis prati boju dugmeta (hover, `aria-pressed`) — otud `opacity`, a ne
   svoja boja: fiksna boja bi ostala siva i kad ikonica pozlati. */
.akcija span { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  opacity: .72; position: relative; z-index: 1; }
@media (hover: hover) {
  .akcija:hover { color: var(--gold); }
}
@media (hover: hover) {
  .akcija:hover svg { transform: translateY(-2px); }
}
.akcija:active { transform: scale(.93); }
.akcija[aria-pressed="true"] { color: var(--gold); }
.akcija[aria-pressed="true"] svg { transform: scale(1.1); }
.akcija.pulse svg { animation: pop .5s var(--ease-back); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1.1); } }
.iskra { position: fixed; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); pointer-events: none; z-index: 200; }

/* ---------- 7. SLIDER (prevlačenje kartice) ---------- */

/* povratak na današnju poruku — samo kad se gleda stariji dan */
.karta__danas {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--gold); font-weight: 700;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  animation: rise .34s var(--ease) both;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast) var(--ease-back);
}
@media (hover: hover) {
  .karta__danas:hover {
    background: color-mix(in srgb, var(--gold) 15%, transparent);
    border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  }
}
.karta__danas:active { transform: scale(.96); }

/* pokazivači smjera dok se kartica vuče kao slider */
.potez {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(6px, 2.4vw, 14px);
}
.potez__strana {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px; border-radius: var(--r-lg);
  color: var(--gold); opacity: 0; transform: scale(.82);
  transition: opacity .16s var(--ease-soft), transform .16s var(--ease-soft);
}
.potez__strana svg { width: 20px; height: 20px; }
.potez__strana i {
  font-style: normal; font-size: 7.5px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
}
.karta[data-smjer="ranije"]  .potez__strana--l,
.karta[data-smjer="kasnije"] .potez__strana--d {
  opacity: var(--vuk);
  transform: scale(calc(.82 + var(--vuk) * .18));
}
/* zlatni rub sa strane prema kojoj se vuče */
.potez::before, .potez::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  opacity: 0; transition: opacity .16s var(--ease-soft);
}
.potez::before { left: 0;  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 20%, transparent), transparent); }
.potez::after  { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--gold) 20%, transparent), transparent); }
.karta[data-smjer="ranije"]  .potez::before { opacity: calc(var(--vuk) * .9); }
.karta[data-smjer="kasnije"] .potez::after  { opacity: calc(var(--vuk) * .9); }

/* ---------- 8. SEKCIJE ---------- */
.sek { margin-top: clamp(30px, 8vw, 46px); }
.sek__nas { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.sek__nas h2 { font-family: var(--serif); font-size: 18px; font-weight: 500; margin: 0; }
.sek__nas i { flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--gold) 28%, transparent), transparent); }
.sek__link { font-size: 9px; font-weight: 700; color: var(--gold);
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }

/* ---------- 9. TRAKA KNJIGA ---------- */
/* Traka se pomjera sama, ali kroz `scrollLeft` — isti mehanizam kojim je
   pomjera i korisnik. Zato se njih dvoje ne bore: dodir samo pauzira
   kretanje, a ono se nastavlja kad korisnik prestane. Nema CSS animacije
   koja bi se „zaglavila“, pa radi i kad se PWA probudi u pozadini. */
.traka {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.traka::-webkit-scrollbar { display: none; }
.traka.vuce { cursor: grabbing; }
/* min-width: max-content pušta niz da se centrira kad stane u traku,
   a da i dalje može biti širi od nje i scrollati se */
.traka__vrpca { display: flex; justify-content: center; min-width: max-content; }
.traka__grupa { display: flex; gap: clamp(13px, 3vw, 18px); }
.knjiga { flex: none; width: clamp(102px, 26vw, 122px); }
.knjiga img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 4px;
  box-shadow: 0 16px 32px -18px rgba(0,0,0,.7), 0 0 0 1px var(--line);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
@media (hover: hover) {
  .knjiga:hover img {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 22px 40px -18px rgba(0,0,0,.8), 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
  }
}
.knjiga b { display: block; font-family: var(--serif); font-size: 12.5px; font-weight: 500;
  margin-top: 11px; line-height: 1.32; }
.knjiga span { display: block; font-size: 9px; color: var(--ink-mute); margin-top: 3px; line-height: 1.35; }
.traka.vuce .knjiga img { pointer-events: none; }

/* --- kanali autora, u dnu kartice --- */
.prati {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  border-top: 1px solid var(--line-soft);
  margin-top: 0; padding-top: 13px; padding-bottom: 2px;
  animation: rise .55s .6s var(--ease) both;
}
.veza {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; padding: 9px 8px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  color: var(--ink-soft);
  transition: color var(--t-fast), border-color var(--t-fast),
              background var(--t-fast), transform var(--t-fast) var(--ease-back);
}
.veza__ikona { flex: none; display: grid; place-items: center; color: var(--gold); }
.veza__ikona svg { width: 15px; height: 15px; }
.veza__ime {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
}
.veza__ime b {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.veza__ovjera { width: 13px; height: 13px; flex: none; color: var(--gold); --kvaka: var(--na-zlatu); }
@media (hover: hover) {
  .veza:hover {
    color: var(--ink); transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
  }
}
.veza:active { transform: scale(.97); }
.veza--bez { opacity: .5; cursor: default; }
@media (hover: hover) {
  .veza--bez:hover { transform: none; color: var(--ink-soft);
    border-color: color-mix(in srgb, var(--gold) 18%, transparent); }
}

@media (max-width: 460px) {
  .prati { gap: 5px; }
  .veza { flex-direction: column; gap: 5px; padding: 9px 4px; }
  .veza__ime { font-size: 8.5px; }
}

/* ---------- 10. MODALI ---------- */
.sloj { position: fixed; inset: 0; z-index: 100; display: none; }
.sloj.on { display: block; }
.sloj__zav { position: absolute; inset: 0; background: rgba(3,9,6,.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .28s var(--ease-soft) both; }
:root[data-tema="svijetla"] .sloj__zav { background: rgba(19,39,29,.34); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;                       /* centriranje odvojeno od transform-a */
  width: min(94vw, 440px); max-height: min(88dvh, 780px);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75);
  animation: modalIn .36s var(--ease) both;
}
@keyframes modalIn { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
.modal__rucka { display: none; }
.modal__nas {
  display: flex; align-items: center; gap: 12px;
  padding: 15px var(--mpad) 13px; border-bottom: 1px solid var(--line-soft);
}
.modal__nas h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; margin: 0; flex: 1;
  letter-spacing: .01em; }

/* ikona uz naslov, bez okvira */
.modal__ikona { flex: none; display: grid; place-items: center; color: var(--gold); }
.modal__ikona svg { width: 18px; height: 18px; }
.modal__telo { overflow-y: auto; overscroll-behavior: contain; padding: 18px var(--mpad) 22px; min-height: 0; }

/* detalj poruke: nema zaglavlja — samo poruka i tiho „x“ */
.modal--poruka { display: flex; flex-direction: column; }
.modal--poruka .modal__telo { flex: 1; padding-top: 30px; }
.modal__x {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-mute);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line-soft);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-back);
}
.modal__x svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .modal__x:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 34%, transparent); }
}
.modal__x:active { transform: scale(.9); }
.modal__pod { padding: 13px var(--mpad) calc(15px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft); }

/* mobitel: drawer odozdo */
@media (max-width: 599px) {
  .modal {
    left: 0; right: 0; top: auto; bottom: 0;
    translate: none;
    width: 100%; max-width: none; max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    animation: drawerIn .4s var(--ease) both;
  }
  @keyframes drawerIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal__rucka {
    display: block; width: 34px; height: 4px; border-radius: 999px;
    background: var(--line); margin: 9px auto 0;
  }
  .modal__nas { padding-top: 12px; }
}

/* ---------- 11. REDOVI ---------- */
.grupa { margin-top: 22px; }
.grupa--prva { margin-top: 0; }
.grupa__nas { font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin: 0 4px 9px; }

.red {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
  margin-bottom: 7px; width: 100%; text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.red:last-child { margin-bottom: 0; }
@media (hover: hover) {
  .red:hover { border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
}
.red--vrh { align-items: flex-start; }
.red__portret { width: 48px; height: 72px; flex: none; object-fit: cover;
  border-radius: 5px; box-shadow: 0 0 0 1px var(--line); }
.red__ikona { width: 31px; height: 31px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: color-mix(in srgb, var(--gold) 11%, transparent); color: var(--gold); }
.red__ikona svg { width: 15px; height: 15px; }
.red__telo { flex: 1; min-width: 0; }
.red__telo b { display: block; font-size: 13px; font-weight: 600; }
.red__telo span { display: block; font-size: 10.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.45; }
.red__kraj { flex: none; color: var(--ink-mute); display: flex; align-items: center; }
.red__kraj svg { width: 14px; height: 14px; }
.red__vise { display: inline-flex !important; align-items: center; gap: 5px;
  margin-top: 8px !important; color: var(--gold) !important;
  font-size: 8.5px !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.red__vise svg { width: 11px; height: 11px; }
.red[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* red koji briše podatke: prigušen dok ne bude dodirnut, crven u potvrdi */
.red--pazi .red__ikona { color: var(--ink-mute); background: color-mix(in srgb, var(--ink-mute) 14%, transparent); }
.red--pazi[data-potvrda] {
  border-color: color-mix(in srgb, #D9704F 55%, transparent);
  background: color-mix(in srgb, #D9704F 10%, var(--surface));
}
.red--pazi[data-potvrda] .red__telo b { color: #E3866A; }
.red--pazi[data-potvrda] .red__ikona { color: #E3866A; background: color-mix(in srgb, #D9704F 16%, transparent); }

.napomena { font-size: 10px; color: var(--ink-mute); line-height: 1.55; margin: 8px 5px 0; }
.napomena--sredina { text-align: center; margin: 22px auto 0; max-width: 300px; }
.verzija { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center; margin: 22px 0 0; font-weight: 600; }

.prekidac { width: 42px; height: 25px; border-radius: 999px; background: var(--line-soft);
  border: 1px solid var(--line); position: relative; flex: none;
  transition: background var(--t) var(--ease), border-color var(--t); }
.prekidac::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--ink-mute); transition: transform var(--t) var(--ease-back), background var(--t); }
.prekidac[aria-checked="true"] { background: color-mix(in srgb, var(--gold) 30%, transparent); border-color: var(--gold); }
.prekidac[aria-checked="true"]::after { transform: translateX(17px); background: var(--gold); }

input.mini {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink); font-size: 12.5px;
}
input.mini:focus { outline: none; border-color: var(--gold); }

.segment { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); }
.segment button {
  min-width: 34px; height: 27px; padding: 0 10px; border-radius: 999px;
  color: var(--ink-mute); display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-back);
}
.segment button svg { width: 14px; height: 14px; }
.segment button:active { transform: scale(.94); }
.segment button.on { background: var(--gold); color: var(--na-zlatu); }

/* ---------- 12. SAČUVANO ---------- */
.pretraga { position: relative; margin: clamp(14px, 4vw, 22px) 0 12px; }
.pretraga input {
  width: 100%; padding: 12px 16px 12px 40px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 13.5px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pretraga input::placeholder { color: var(--ink-mute); }
.pretraga input::-webkit-search-cancel-button { display: none; }
.pretraga input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow); }
.pretraga > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-mute); pointer-events: none; }
.pretraga__x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }

.stavka {
  display: flex; align-items: stretch; gap: 4px;
  border-radius: var(--r-md); border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
  opacity: 0; transform: translateY(10px);
}
.stavka.in { animation: rise .5s var(--ease) forwards; }
@media (hover: hover) {
  .stavka:hover { background: var(--surface); border-color: var(--line); }
}

/* Sačuvane stavke dobiju isti uzorak kao kartica i iz istog razloga: na
   telefonu ambijentalnog nema (vidi `.ambient__uzorak`), pa bi ekran zbirke
   ostao gola pozadina. Slabije nego na kartici — stavka je niska i tekst ide
   preko cijele širine, pa uzorak ovdje samo pridržava, ne ukrašava. */
@media (max-width: 759.98px) {
  .stavka { position: relative; isolation: isolate; overflow: hidden; }
  .stavka::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: inherit;
    background: url("/assets/texture/texture.svg") repeat center / 620px auto;
    opacity: calc(var(--uzorak-karta) * .62);
    filter: var(--zlato-filter);
    -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.45) 52%, transparent 92%);
            mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.45) 52%, transparent 92%);
  }
}
.stavka__glavno {
  flex: 1; min-width: 0; display: flex; gap: 13px; align-items: flex-start;
  text-align: left; padding: 13px 6px 13px 12px;
  transition: transform var(--t-fast) var(--ease);
}
.stavka__glavno:active { transform: scale(.99); }
.stavka__dat { flex: none; width: 40px; text-align: center; padding-top: 2px; }
.stavka__dat b { display: block; font-family: var(--serif); font-size: 20px; line-height: 1; font-weight: 500; }
.stavka__dat span { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 4px; font-weight: 700; }
.stavka__telo { min-width: 0; flex: 1; }
.stavka__tekst {
  font-family: var(--serif); font-size: 15px; line-height: 1.55; margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.stavka__meta { display: block; margin-top: 7px; font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); font-weight: 700; }
.stavka__ukloni {
  flex: none; width: 42px; display: grid; place-items: center; color: var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-back);
}
.stavka__ukloni svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .stavka__ukloni:hover { color: var(--ink-mute); }
}
.stavka__ukloni:active { transform: scale(.86); }

.prazno { text-align: center; padding: 50px 20px; }
.prazno svg { width: 28px; height: 28px; color: var(--gold); opacity: .4; margin: 0 auto 14px; }
.prazno h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; margin: 0 0 6px; }
.prazno p { color: var(--ink-mute); font-size: 12px; margin: 0 auto; max-width: 270px; line-height: 1.6; }

/* detalj poruke */
.mp__dat { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; text-align: center; }
.mp__hidzri { font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  font-size: 15px; text-align: center; margin-top: 5px; }
.mp__tekst { font-family: var(--serif); font-size: 20.5px; line-height: 1.64;
  text-align: center; margin: 20px 0 6px; text-wrap: pretty; }
.mp__izvor {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 0 0; margin-top: 17px; border-top: 1px solid var(--line-soft);
  transition: opacity var(--t-fast);
}
@media (hover: hover) {
  .mp__izvor:hover { opacity: .74; }
}
.mp__dugmad { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.mp__dugmad .btn { padding-inline: 16px; }
.mp__dugmad #mp-fav[aria-pressed="true"] { color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }

/* dugmad */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-back), opacity var(--t-fast);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:active { transform: scale(.97); }
.btn--zlatno { background: linear-gradient(135deg, var(--brand-gold-l), var(--brand-gold)); color: #11221A; }
.btn--obris { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.btn:disabled { opacity: .4; pointer-events: none; }

/* uputa za instalaciju */
.koraci { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.korak { display: flex; gap: 12px; align-items: flex-start; }
.korak__br {
  flex: none; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 13%, transparent); color: var(--gold);
  font-size: 10px; font-weight: 700; margin-top: 1px;
}
.korak p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.korak b { color: var(--ink); font-weight: 600; }

/* ---------- 13. DIJELJENJE ---------- */
.dijeli { display: grid; gap: 20px; }
.dijeli__grupa { display: grid; gap: 10px; }
.dijeli__nas { font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; }

.pregled { display: flex; justify-content: center; }
.pregled__okvir { border-radius: 10px; overflow: hidden; line-height: 0;
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.7), 0 0 0 1px var(--line); }
.pregled__okvir canvas { display: block; }

/* jedinstvena kartica za format i stil */
.d-mreza { display: grid; gap: 8px; }
.d-mreza--2 { grid-template-columns: repeat(2, 1fr); }
.d-mreza--3 { grid-template-columns: repeat(3, 1fr); }

.d-btn {
  display: grid; gap: 9px; justify-items: center; align-content: center;
  min-height: 82px; padding: 11px 6px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-mute);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast),
              transform var(--t-fast) var(--ease-back);
}
.d-btn__vizual { display: grid; place-items: center; height: 32px; }
.d-btn__ime { font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.1; text-align: center; }
.d-btn__ime small { display: block; font-size: 8px; font-weight: 600;
  letter-spacing: .08em; opacity: .6; margin-top: 3px; }
@media (hover: hover) {
  .d-btn:hover { border-color: color-mix(in srgb, var(--gold) 34%, transparent); }
}
.d-btn:active { transform: scale(.96); }
.d-btn[aria-pressed="true"] {
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
}
/* vizual formata: obris u pravom odnosu stranica */
.d-btn__okvir { border: 1.5px solid currentColor; border-radius: 2px; opacity: .85; }
/* vizual stila: kvadrat sa gradijentom i navodnikom */
.d-btn__uzorak {
  display: grid; place-items: center; width: 44px; height: 32px; border-radius: 7px;
  font-family: var(--serif); font-size: 17px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.dijeli-dugmad { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.dijeli-dugmad .btn--obris { padding-inline: 15px; }

/* ---------- 14. TOAST ---------- */
.toast-hold { position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  z-index: 150; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 17px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font-size: 12px; font-weight: 600; box-shadow: var(--shadow); max-width: min(92vw, 400px);
  animation: toastIn .38s var(--ease) both;
}
.toast.out { animation: toastOut .28s var(--ease-soft) forwards; }
.toast svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px) scale(.97); } }

/* ---------- 14b. UČITAVANJE ---------- */
/* Preko svega (i preko uvoda) dok se ne zna šta treba pokazati. Nestaje uz
   kratak fade čim `html` dobije klasu `ucitano` — vidi `pokazi()` u JS-u. */
.ucitavanje {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: var(--bg); transition: opacity .3s var(--ease-soft);
}
/* `visibility` se mijenja tek nakon fadea (0s .3s), pa krug prestane i da se
   vrti kad zavjesa padne — skriven element se ne animira ni ne crta. */
html.ucitano .ucitavanje {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-soft), visibility 0s .3s;
}
.ucitavanje__krug {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-top-color: var(--gold);
  animation: vrti .8s linear infinite;
}
/* Izuzet iz gašenja animacija dok `html` nema klasu `anim`: taj prekidač
   čeka da JS krene, a krug se vrti prije toga — inače prvo što korisnik
   vidi bude zamrznut luk. */
html:not(.anim) .ucitavanje__krug { animation: vrti .8s linear infinite !important; }
@keyframes vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ucitavanje__krug,
  html:not(.anim) .ucitavanje__krug { animation: none !important; opacity: .55; }
}

/* ---------- 15. UVOD ---------- */
.uvod { position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: none; place-items: center; padding: var(--pad); text-align: center;
  overflow-y: auto; }
.uvod.on { display: grid; }
.uvod__blok { animation: rise .5s var(--ease) both; width: 100%; max-width: 360px; margin: auto; }
.uvod__mark { width: 80px; height: 80px; margin: 0 auto; animation: markIn 1s var(--ease) both; }
@keyframes markIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
.uvod h1 { font-family: var(--serif); font-size: clamp(25px, 6.8vw, 31px); font-weight: 400; margin: 0 0 12px; }
.uvod p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; max-width: 320px; margin: 0 auto 26px; }
.uvod__sadrzaj:not(:empty) { margin: 0 0 26px; }
.uvod__tacke { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.uvod__tacke i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: all var(--t); }
.uvod__tacke i.on { background: var(--gold); width: 18px; border-radius: 999px; }

/* izbor teme u uvodu */
.tema-izbor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tema-opcija {
  display: grid; gap: 10px; justify-items: center; padding: 11px 6px 12px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-mute);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast),
              transform var(--t-fast) var(--ease-back);
}
.tema-opcija__vizual {
  width: 100%; max-width: 52px; aspect-ratio: 4 / 3; border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.tema-opcija__ime { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tema-opcija:active { transform: scale(.96); }
.tema-opcija[aria-pressed="true"] {
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
}

/* koraci instalacije u uvodu */
/* Zbijeno: tri kratka koraka ne traže prozračnost cijelog odjeljka — sitniji
   prored, manji broj i manji razmak, pa se sva tri čitaju kao jedna cjelina.

   Tekst MORA biti lijevo poravnat, uz broj, bez razmaka ispod. `.uvod p`
   ima istu specifičnost kao `.korak p` (jedna klasa + element), pa bi bez
   ove margine njena `margin: 0 auto 26px` pobijedila po redoslijedu u
   datoteci — auto lijevo/desno bi odgurnuo tekst od broja prema sredini
   reda, a 26px ispod udvostručio razmak između koraka. */
/* Maketa i koraci su dvije odvojene cjeline — slika pokazuje, tekst govori.
   Zbijeni jedno uz drugo čitaju se kao jedan blok, pa koraci dobiju zraka
   iznad sebe (razmak ide ovdje, ne na maketu: vodič u postavkama koristi
   istu maketu, a tamo je ispod nje dugmad, ne lista). */
.koraci--uvod { margin-top: 26px; gap: 6px; }
/* Broj se veže za PRVI red teksta, ne za sredinu cijelog koraka: kad se korak
   prelije u dva reda (npr. „Pokreni aplikaciju…“), `center` bi mu broj spustio
   na sredinu i on bi visio niže od brojeva jednorednih koraka. Otud
   `flex-start` plus negativni pomak koji ga centrira na taj prvi red:
   (17.5px red − 20px krug) / 2 = −1.25px. Jednoredni koraci izgledaju isto
   kao prije, viševrsni se poravnaju. */
.koraci--uvod .korak { gap: 9px; align-items: flex-start; }
.koraci--uvod .korak p { margin: 0; font-size: 12.5px; line-height: 1.4; text-align: left; }
.koraci--uvod .korak__br { width: 20px; height: 20px; font-size: 9.5px; margin-top: -1.25px; }
.korak__ik {
  display: inline-grid; place-items: center; vertical-align: -3px;
  width: 15px; height: 15px; color: var(--gold);
}
.korak__ik svg { width: 15px; height: 15px; }

/* dugme preko cijele širine (uvod) */
.btn--puni { width: 100%; }
.uvod__sadrzaj .btn--puni { margin-top: 18px; }

/* tiha druga akcija ispod glavnog dugmeta */
.uvod__preskoci {
  display: block; margin: 14px auto 0; padding: 4px 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-mute); transition: color var(--t-fast);
}
@media (hover: hover) {
  .uvod__preskoci:hover { color: var(--gold); }
}

/* red podsjetnika dok je zaključan do instalacije */
.red[data-zakljucan] .prekidac { opacity: .4; }
.red[data-zakljucan] .red__ikona { color: var(--ink-mute);
  background: color-mix(in srgb, var(--ink-mute) 14%, transparent); }
.uvod__nota { font-size: 12px !important; color: var(--ink-mute) !important;
  line-height: 1.6; margin: 0 auto 18px !important; }
.uvod__stanje {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto;
  padding: 9px 16px; border-radius: 999px;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
}
.uvod__stanje svg { width: 13px; height: 13px; }
.uvod__stanje--ok { color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, transparent); }
.uvod__stanje--pazi { color: var(--ink-mute); border: 1px solid var(--line); }

/* ---------- 16. NADOGRADNJA ----------
   Traka „nova verzija“ stoji fiksno na dnu: nadogradnja se često primijeti
   dok je korisnik već zaglibio u tekst, pa traka u toku dokumenta ostane
   iznad ekrana i nikad se ne vidi. Ostale fiksne stvari (toast, razvojna
   traka) se pomjeraju iznad nje. */
.nadogradnja {
  position: fixed; z-index: 90; left: 0; right: 0;      /* ispod modala (.sloj = 100) */
  bottom: calc(14px + env(safe-area-inset-bottom));
  padding: 0 var(--pad);
  animation: nadogradnjaUlaz .42s var(--ease) both;
}
@keyframes nadogradnjaUlaz { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nadogradnja__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px 11px 13px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  box-shadow: var(--shadow);
}
.nadogradnja__ik {
  width: 31px; height: 31px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.nadogradnja__ik svg { width: 15px; height: 15px; }
.nadogradnja__telo { flex: 1; min-width: 0; }
.nadogradnja__telo b { display: block; font-size: 13px; font-weight: 600; }
.nadogradnja__telo span { display: block; font-size: 10.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.45; }
.nadogradnja__btn { padding: 10px 16px; font-size: 10.5px; }
.nadogradnja__x { width: 30px; height: 30px; flex: none; }
.nadogradnja__x svg { width: 14px; height: 14px; }

/* ---------- 17. RAZVOJNA TRAKA ----------
   Vidi se samo na localhostu (<html data-razvoj>): pomjeranje dana
   lijevo/desno, uključujući dane u budućnosti, da se poruke mogu pregledati
   unaprijed. Na objavljenoj verziji ovog elementa nema. */
.razvoj[data-panel] { z-index: 160; }   /* dok je panel otvoren, iznad modala */
.razvoj {
  position: fixed; z-index: 88;                          /* ispod modala (.sloj = 100) */
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 4px;
  padding: 6px 7px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-family: var(--sans);
}
.razvoj__btn {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft);
  transition: color var(--t-fast), background var(--t-fast);
}
@media (hover: hover) {
  .razvoj__btn:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
}
.razvoj__btn:active { transform: scale(.92); }
.razvoj__btn svg { width: 13px; height: 13px; }
.razvoj__info {
  min-width: 190px; padding: 0 6px; text-align: center;
  font-size: 9px; line-height: 1.4; color: var(--ink-mute);
}
.razvoj__info b { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink); }
.razvoj__danas {
  padding: 0 9px 0 5px; font-size: 8.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  transition: opacity var(--t-fast);
}
.razvoj__danas[disabled] { opacity: .32; pointer-events: none; }
.razvoj__pwa { color: var(--ink-soft); padding: 0 4px 0 8px; }
.razvoj__pwa[aria-pressed="true"] { color: var(--gold); }
.razvoj__panel {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 236px;
  max-height: 62vh; overflow-y: auto; padding: 7px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; gap: 3px;
}
.razvoj__panel b { font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); padding: 4px 6px 2px; }
.razvoj__panel button {
  display: flex; align-items: baseline; gap: 6px; padding: 6px 7px; border-radius: 8px;
  font-size: 10px; color: var(--ink-soft); text-align: left; width: 100%;
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .razvoj__panel button:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--ink); }
}
.razvoj__panel button[aria-pressed="true"] { color: var(--gold); font-weight: 700; }
.razvoj__panel button i { font-size: 8.5px; color: var(--ink-mute); font-style: normal; }

/* Fiksne stvari na dnu se slažu jedna iznad druge, ne jedna preko druge.
   Stanje nosi <html data-razvoj> / <html data-nadogradnja> — atribut, a ne
   klasa, da se ne poklopi sa selektorom samog elementa (npr. `.razvoj`). */
html[data-razvoj] .nadogradnja { bottom: calc(68px + env(safe-area-inset-bottom)); }
html[data-razvoj] .toast-hold { bottom: calc(76px + env(safe-area-inset-bottom)); }
html[data-nadogradnja] .toast-hold { bottom: calc(96px + env(safe-area-inset-bottom)); }
html[data-razvoj][data-nadogradnja] .toast-hold { bottom: calc(150px + env(safe-area-inset-bottom)); }

/* ---------- 18. VODIČ ZA INSTALACIJU ----------
   Samo iPhone i Android — na računaru instalacije nema, pa nema ni makete.

   iOS ne dozvoljava da stranica sama doda aplikaciju na ekran, pa je jedino
   iskreno rješenje pokazati korisniku šta da dodirne. Umjesto spiska koraka,
   ovdje je maketa telefona u stanju u kojem će biti i korisnikov ekran:
   dijeljenje → lista → potvrda → ikona na ekranu. Maketa oponaša pravi
   sistem — iOS list ima red aplikacija i glif desno od natpisa, Chromeov
   meni visi ispod ⋮ sa ikonicom lijevo — jer se po tim detaljima ekran
   prepoznaje.

   Označeno mjesto nosi punu zlatnu konturu i oblačić sa strelicom, a
   oblačić je dijete cilja pa mu je pozicija tačna gdje god cilj bio.

   Sve je CSS i postojeće SVG ikone, bez ijedne nove biblioteke. Maketa je
   ukras (aria-hidden), pa korak nosi tekst — čitač ekrana i `prefers-
   reduced-motion` dobiju potpunu uputu bez animacije. Zato animacija nikad
   nije jedini nosilac informacije: statična maketa već pokazuje sve. */

.vodic { display: grid; gap: 15px; }
.vodic__tacke { display: flex; gap: 6px; justify-content: center; }
.vodic__tacke i { width: 5px; height: 5px; border-radius: 50%; background: var(--line);
  transition: width var(--t) var(--ease), background var(--t); }
.vodic__tacke i.on { background: var(--gold); width: 18px; border-radius: 999px; }

.vodic__scena { display: grid; place-items: center; padding: 6px 0 2px; }
.vodic__tekst { text-align: center; }
.vodic__brojac { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--gold); }
.vodic__naslov { display: block; font-family: var(--serif); font-size: 19px;
  font-weight: 500; margin-top: 6px; line-height: 1.25; }
.vodic__opis { margin: 7px auto 0; max-width: 300px; font-size: 12.5px;
  line-height: 1.6; color: var(--ink-soft); }
.vodic__opis b { color: var(--ink); font-weight: 600; }
.vodic__opis .korak__ik { vertical-align: -3px; }
.vodic__dodatno:empty { display: none; }
.vodic__dugmad { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.vodic__dugmad[data-sam="1"] { grid-template-columns: 1fr; }
.vodic__dugmad[data-sam="1"] #vodic-nazad { display: none; }
.vodic__dugmad .btn--obris { padding-inline: 15px; }

/* --- maketa telefona ---
   Kroma je u BOJAMA SISTEMA, ne aplikacije: iOS sheet je #1c1c1e sa bijelim
   tekstom i plavim akcentima, Chromeov meni je #292a2d — jer korisnik na
   svom ekranu traži tačno ono što mu pokazujemo. Unutra je naša stranica, u
   našim bojama, baš kako i izgleda na pravom screenshotu.

   Uvijek tamna varijanta: postoji na svakom uređaju, sjeda na obje naše teme
   i znači pola koda. Zlatna kontura i oblačić su NAŠA oznaka preko vjerne
   slike — zato i odskaču od sistemskih sivih. */
.mak {
  position: relative; width: var(--mak-w, 240px); aspect-ratio: 240 / 344; flex: none;
  border-radius: 30px; padding: 3px;
  background: linear-gradient(158deg, #52525a, #17171a);
  box-shadow: 0 24px 50px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
}
.mak__ekran {
  position: relative; height: 100%; border-radius: 27px; overflow: hidden;
  display: flex; flex-direction: column; background: #000;
}
.mak--and .mak__ekran { background: #202124; }
/* dynamic island na iPhoneu, kamera-oko na Androidu */
.mak__ostrvo { position: absolute; z-index: 7; top: 6px; left: 50%; translate: -50% 0;
  width: 56px; height: 16px; border-radius: 999px; background: #000; }
.mak__oko { position: absolute; z-index: 7; top: 5px; left: 50%; translate: -50% 0;
  width: 7px; height: 7px; border-radius: 50%; background: #000; }

/* statusna traka — sitnica po kojoj se ekran odmah čita kao telefonski */
/* Safari tinta statusnu traku bojom stranice — zato je ovdje boja naše
   stranice, a ne crna: tako se i dynamic island (crn) vidi na njoj. */
.mstatus { flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px 3px; font-size: 8px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.mak--ios .mstatus { background: #0f1e16; padding-bottom: 5px; }
.mstatus__d { display: flex; align-items: center; gap: 3px; }
.mstatus__d i { width: 9px; height: 7px; border-radius: 1px; background: rgba(255,255,255,.85); }
.mstatus__d i:last-of-type { width: 8px; }
.mstatus__d u { width: 15px; height: 7.5px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.55); position: relative; }
.mstatus__d u::after { content: ''; position: absolute; inset: 1px; width: 65%;
  border-radius: 1px; background: rgba(255,255,255,.85); }

/* naša stranica u malom — ovo je sadržaj, pa ostaje u našim bojama */
.mstrana { flex: 1; min-height: 0; padding: 9px; display: grid; gap: 6px;
  align-content: center; background: #0f1e16; }
.mstrana__nad { height: 4px; width: 38%; border-radius: 999px; margin: 0 auto 2px;
  background: rgba(198,169,104,.55); }
.mstrana__karta { border-radius: 10px; padding: 9px 8px; display: grid; gap: 5px;
  border: 1px solid rgba(198,169,104,.16); background: rgba(255,255,255,.03); }
.mstrana__karta i { height: 3px; border-radius: 999px; background: rgba(198,169,104,.22); }
.mstrana__karta i:nth-child(1) { width: 92%; }
.mstrana__karta i:nth-child(2) { width: 78%; }
.mstrana__karta i:nth-child(3) { width: 86%; }
.mstrana__karta i:nth-child(4) { width: 54%; }
.mstrana__izvor { display: flex; align-items: center; gap: 7px; padding: 7px 8px;
  border-radius: 10px; border: 1px solid rgba(198,169,104,.16); background: rgba(255,255,255,.03); }
.mstrana__izvor u { flex: none; width: 15px; height: 22px; border-radius: 2px;
  background: rgba(198,169,104,.3); }
.mstrana__izvor span { flex: 1; display: grid; gap: 3px; }
.mstrana__izvor i { display: block; height: 3px; border-radius: 999px; background: rgba(198,169,104,.22); }
.mstrana__izvor i:first-child { width: 62%; }
.mstrana__izvor i:last-child { width: 40%; background: rgba(198,169,104,.4); }

/* ---------- iPhone: Safari drži adresu i alatnu traku NA DNU ---------- */
.ios-dno { flex: none; padding: 6px 10px 8px;
  background: rgba(28,28,30,.97); border-top: .5px solid #38383a; }
.ios-polje { display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 21px; border-radius: 8px; background: #2c2c2e;
  font-size: 8px; color: rgba(235,235,245,.6); }
.ios-polje svg { width: 8px; height: 8px; color: #8e8e93; }
.ios-alat { display: flex; align-items: center; justify-content: space-between; padding: 6px 5px 0; }
/* u Safariju su ikonice alatne trake plave; nazad/naprijed su sive kad nema historije */
.ios-alat__ik { position: relative; width: 16px; height: 16px; color: #0a84ff; }
.ios-alat__ik svg { width: 16px; height: 16px; }
.ios-alat__ik:nth-child(1), .ios-alat__ik:nth-child(2) { color: #48484a; }

/* Minimalna traka preglednika ugrađenog u drugu aplikaciju (Instagram/FB) —
   ista na iOS-u i Androidu, pa je ovdje jedina definicija za oba slučaja. */
.ios-vrhtraka { flex: none; display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 7px; }
.ios-vrhtraka svg:first-child { width: 13px; height: 13px; color: rgba(255,255,255,.7); flex: none; }
.ios-vrhtraka__adr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 8px; color: rgba(255,255,255,.6); }
.ios-vrhtraka__adr svg { width: 9px; height: 9px; flex: none; color: rgba(255,255,255,.5); }
.ios-vrhtraka__meni { position: relative; flex: none; width: 15px; height: 15px; color: #fff; }
.ios-vrhtraka__meni svg { width: 15px; height: 15px; }

/* iOS lista dijeljenja */
.ios-sheet { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 5;
  border-radius: 13px; overflow: hidden; background: #1c1c1e;
  box-shadow: 0 -20px 40px -18px rgba(0,0,0,.9);
  animation: slojUlaz .5s var(--ease) both; }
@keyframes slojUlaz    { from { opacity: 0; transform: translateY(58%); } to { opacity: 1; transform: none; } }
@keyframes slojUlazVrh { from { opacity: 0; transform: translateY(-42%); } to { opacity: 1; transform: none; } }
.ios-sheet__ruc { display: block; width: 34px; height: 4px; border-radius: 999px;
  background: #48484a; margin: 6px auto 5px; }
.ios-sheet__zag { display: flex; align-items: center; gap: 8px; margin: 0 7px 8px;
  padding: 8px 9px; border-radius: 10px; background: #2c2c2e; }
.ios-sheet__zag img { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.ios-sheet__ime { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ios-sheet__ime b { font-size: 8.5px; color: #fff; font-weight: 600; }
.ios-sheet__ime span { font-size: 7.5px; color: #8e8e93; }
.ios-sheet__opcije { flex: none; font-size: 7.5px; color: #0a84ff; }
/* red aplikacija — po njemu se sheet prepoznaje na prvi pogled */
.ios-apps { display: flex; justify-content: space-between; padding: 0 11px 10px; }
.ios-app { display: grid; justify-items: center; gap: 3px; font-size: 6.5px; color: #fff; }
.ios-app__ik { width: 31px; height: 31px; border-radius: 50%; }
.ios-app__ik--airdrop { background: linear-gradient(#54a0ff, #0a5bd3); }
.ios-app__ik--poruke  { background: linear-gradient(#6ee06e, #17b34a); }
.ios-app__ik--mail    { background: linear-gradient(#57b0ff, #1878e0); }
.ios-app__ik--vise    { background: #3a3a3c; }
.ios-lista { margin: 0 7px 7px; border-radius: 10px; overflow: hidden; background: #2c2c2e; }
.ios-red { position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 8.5px; color: #fff; }
/* razdjelnik je uvučen s lijeve strane, kao u pravoj listi */
.ios-red + .ios-red::after { content: ''; position: absolute; left: 10px; right: 0; top: 0;
  height: .5px; background: #38383a; }
.ios-red span { flex: 1; }
.ios-red svg { width: 13px; height: 13px; color: #fff; flex: none; }
.ios-red--cilj { font-weight: 600; }

/* iOS potvrda „Na početni ekran“ */
/* Počinje ispod statusne trake i dynamic islanda — na pravom iPhoneu sheet
   nikad ne ide pod njih. */
.ios-potvrda { position: absolute; left: 4px; right: 4px; top: 28px; z-index: 5;
  border-radius: 13px; overflow: hidden; background: #1c1c1e;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.9);
  animation: slojUlazVrh .5s var(--ease) both; }
.ios-potvrda__vrh { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px; background: #2c2c2e; font-size: 8.5px; }
.ios-potvrda__vrh b { color: #fff; font-size: 9px; font-weight: 600; }
.ios-potvrda__tiho { color: #0a84ff; }
.ios-potvrda__ok { position: relative; color: #0a84ff; font-weight: 700; }
.ios-potvrda__telo { display: flex; align-items: center; gap: 10px; padding: 11px 10px 9px; }
.ios-potvrda__telo img { width: 42px; height: 42px; border-radius: 9px; flex: none; }
.ios-potvrda__polje { flex: 1; min-width: 0; display: grid; gap: 2px;
  padding: 6px 8px; border-radius: 7px; background: #2c2c2e; }
.ios-potvrda__polje b { font-size: 8.5px; color: #fff; font-weight: 600; }
.ios-potvrda__polje span { font-size: 7px; color: #8e8e93; }
.ios-potvrda__nota { padding: 0 10px 11px; font-size: 7px; line-height: 1.45; color: #8e8e93; }

/* ---------- Android: Chrome drži adresu na vrhu ---------- */
.and-traka { flex: none; display: flex; align-items: center; gap: 7px; padding: 3px 9px 8px; }
.and-polje { flex: 1; display: flex; align-items: center; gap: 5px; height: 22px;
  padding: 0 9px; border-radius: 999px; background: #303134;
  font-size: 8px; color: #bdc1c6; }
.and-polje svg { width: 9px; height: 9px; color: #9aa0a6; }
.and-tabovi { flex: none; width: 14px; height: 14px; display: grid; place-items: center;
  border: 1.5px solid #e8eaed; border-radius: 3px;
  font-size: 7px; font-weight: 700; color: #e8eaed; }
.and-meni-ik { position: relative; flex: none; width: 15px; height: 15px; color: #e8eaed; }
.and-meni-ik svg { width: 15px; height: 15px; }

/* Chromeov meni: red ikonica na vrhu, pa stavke — poravnat desno, ispod ⋮ */
/* Visi ispod alatne trake (statusna ~21px + traka ~33px), poravnat desno pod
   ⋮ — pa ⋮ i brojač kartica ostaju vidljivi, kao u pravom Chromeu. */
.and-meni { position: absolute; z-index: 5; top: 56px; right: 7px; width: 146px;
  padding: 4px 0; border-radius: 8px; overflow: hidden; background: #292a2d;
  box-shadow: 0 14px 30px -8px rgba(0,0,0,.85);
  animation: slojUlazVrh .4s var(--ease) both; }
.and-meni__vrh { display: flex; align-items: center; justify-content: space-between;
  padding: 4px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid #3c4043; }
.and-meni__vrh svg { width: 12px; height: 12px; color: #9aa0a6; }
.and-red { position: relative; display: flex; align-items: center; gap: 11px;
  padding: 7px 12px; font-size: 8.5px; color: #e8eaed; }
.and-red svg { width: 13px; height: 13px; color: #9aa0a6; flex: none; }
.and-red span { flex: 1; }
.and-red--cilj { font-weight: 700; }

/* Chromeov dijalog instalacije */
.and-dijalog { position: absolute; z-index: 5; left: 13px; right: 13px; top: 50%;
  translate: 0 -50%; padding: 14px; border-radius: 14px; background: #292a2d;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.9);
  animation: modalIn .36s var(--ease-back) both; }
.and-dijalog__vrh { display: flex; align-items: center; gap: 10px; }
.and-dijalog__vrh img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.and-dijalog__ime { display: grid; gap: 2px; }
.and-dijalog__ime b { font-size: 9px; color: #e8eaed; }
.and-dijalog__ime span { font-size: 7.5px; color: #9aa0a6; }
.and-dijalog__dug { display: flex; justify-content: flex-end; gap: 17px; margin-top: 15px;
  font-size: 8.5px; font-weight: 700; }
.and-dijalog__tiho { color: #9aa0a6; }
.and-dijalog__ok { position: relative; color: #8ab4f8; }

/* --- cilj: puna kontura, čita se i bez pokreta ---
   Prije je ovdje bio tanak prsten sa prozirnim krugom; na maketi te veličine
   se nije čitalo šta je označeno. */
.cilj { position: relative; z-index: 8; }
.cilj::before {
  content: ''; position: absolute; inset: -5px; border-radius: 9px; pointer-events: none;
  border: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  animation: ciljSjaj 2.2s var(--ease-soft) infinite;
}
.cilj--red::before   { inset: 0; border-radius: 7px; }
.cilj--tekst::before { inset: -3px -6px; border-radius: 999px; }
@keyframes ciljSjaj {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

/* --- oblačić: kaže na šta se pritiska ---
   Dijete je označenog cilja, pa mu je pozicija tačna gdje god cilj bio.
   `--dolje` stoji iznad cilja i pokazuje dolje, `--gore` obratno. */
.oblacic {
  position: absolute; z-index: 9; left: 50%; translate: -50% 0;
  padding: 3px 7px; border-radius: 7px; white-space: nowrap;
  font-size: 8px; font-weight: 700; line-height: 1.35; letter-spacing: .01em;
  color: #10201a; background: var(--gold);
  box-shadow: 0 5px 12px -4px rgba(0,0,0,.7);
  animation: oblacicUlaz .42s var(--ease-back) both;
}
.oblacic::after {
  content: ''; position: absolute; left: 50%; translate: -50% 0;
  width: 7px; height: 7px; background: var(--gold); rotate: 45deg; border-radius: 1px;
}
.oblacic--dolje { bottom: calc(100% + 10px); }
.oblacic--dolje::after { top: calc(100% - 3.5px); }
.oblacic--gore { top: calc(100% + 10px); }
.oblacic--gore::after { bottom: calc(100% - 3.5px); }
/* cilj u samom uglu ekrana — oblačić se poravna desno da ne izađe iz makete */
.oblacic--kraj { left: auto; right: -3px; translate: none; }
.oblacic--kraj::after { left: auto; right: 10px; translate: none; }
@keyframes oblacicUlaz { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }

/* --- ishod: ikona na početnom ekranu ---
   Ciklus, a ne jednokratni prelaz: korak traži da se dodirne potvrda, pa se
   maketa mora vraćati na nju. Kad je pokret isključen, sloj ostaje sklonjen
   i vidi se potvrda — koja i jeste uputa ovog koraka. */
.pocetni {
  position: absolute; inset: 0; z-index: 6; border-radius: 27px;
  padding: 36px 15px 15px; display: grid; align-content: start;
  grid-template-columns: repeat(4, 1fr); gap: 13px 11px;
  background: linear-gradient(165deg, #2d3c4d, #0f151c);
  opacity: 0;                       /* bez animacije ostaje sklonjen, a uputa vidljiva */
  animation: pocetniCiklus 5.6s var(--ease) infinite;
}
@keyframes pocetniCiklus {
  0%, 46%   { opacity: 0; }
  55%, 88%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}
.pocetni i { aspect-ratio: 1; border-radius: 8px; background: rgba(255,255,255,.1); }
.pocetni img { width: 100%; aspect-ratio: 1; border-radius: 8px;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.6);
  animation: ikonaSleti 5.6s var(--ease-back) infinite; }
@keyframes ikonaSleti {
  0%, 55%   { opacity: 0; transform: scale(.34); }
  64%, 100% { opacity: 1; transform: none; }
}
.pocetni b { grid-column: 1 / -1; text-align: center; font-size: 8px; font-weight: 600;
  color: rgba(255,255,255,.85); }

/* Maketa u koraku uvoda je malo manja — tamo dijeli prostor sa listom koraka. */
.uvod__scena { display: grid; place-items: center; --mak-w: 214px; margin-bottom: 4px; }

/* ---------- 19. RESPONZIVNO ---------- */
@media (min-width: 760px) {
  .karta { min-height: 520px; transition: box-shadow var(--t) var(--ease); }
  .karta:hover { box-shadow: 0 36px 82px -32px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.045); }
}

/* uži ekrani: poglavlje i naslov knjige ne smiju pojesti karticu */
@media (max-width: 520px) {
  .izvor { gap: 11px; }
  .izvor__cover { width: 48px; height: 72px; }
  .izvor__naslov { font-size: 16px; -webkit-line-clamp: 1; line-clamp: 1; }
  .izvor__tema {
    font-size: 9px; letter-spacing: .1em; margin-top: 4px; line-height: 1.35;
    -webkit-line-clamp: 1; line-clamp: 1;
  }
  .izvor__cta { padding: 5px 10px; }
  .izvor__cta-tekst { display: none; }
  .izvor__cta-kratko { display: inline; }
  .potez__strana i { display: none; }
  .knjiga { width: 96px; }
}
@media (max-width: 380px) {
  .izvor__tema { display: none; }
  .izvor__cta { padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .karta__tekst .w { opacity: 1; filter: none; transform: none; }
  .stavka { opacity: 1; transform: none; }
  .karta__uglovi span { opacity: .3; }
  .karta::before, .razdjelnik svg,
  .karta__aura,
  .ambient__zraka, .razdjelnik__znak { animation: none; }
}

/* --- sigurnosna mreža: sadržaj nikad ne ovisi o animaciji ---
   Dok JS ne potvrdi da je dokument vidljiv (klasa `anim` na <html>),
   nijedna animacija ne kreće i sve stoji u svom konačnom stanju. Bez toga
   bi kartica probuđena u pozadinskom PWA prozoru ostala na `opacity: 0`,
   jer zamrznuti timeline drži ulaznu animaciju na nultom frameu. */
html:not(.anim) *,
html:not(.anim) *::before,
html:not(.anim) *::after { animation: none !important; }
html:not(.anim) .karta__tekst .w { opacity: 1; filter: none; transform: none; }
html:not(.anim) .karta__uglovi span { opacity: .3; }
html:not(.anim) .stavka { opacity: 1; transform: none; }

/* ---------- 20. POMOĆNO ---------- */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hide { display: none !important; }