/* rijec.hr - maketa krunica v2 (09.11.2026., 3. krug: 1:1 precrtano iz Molitvenik aplikacije,
   ekran #e-krunica u svijetloj temi - kodogen.eu/molitvenik/#krunica, mv4tema=svijetla).
   Klase i vrijednosti (.mv-*, .kr-*) prepisane iz v4/assets/mv.css, svijetla paleta postavljena
   TRAJNO (bez html[data-tema] prekidaca, jer je rijec.hr uvijek svijetao). Scope: .rk-app. */
.rk-app{
  --mv-serif:'Instrument Serif',Georgia,serif; --mv-sans:'Inter Tight',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mv-bg:#f7f3ec; --mv-hero:#f7f3ec; --mv-card:#fbf8f2; --mv-card2:#fbf8f2; --mv-line:rgba(30,37,51,.08); --mv-edge:#e6dccb;
  --mv-ink:#1e2533; --mv-mut:rgba(30,37,51,.7); --mv-dim:rgba(30,37,51,.6);
  --mv-acc:#1d4e89; --mv-acc2:#143a68; --mv-btn:#1d4e89; --mv-btn-ink:#fbf8f2; --mv-zl:#b8985a;
  --t1:.75rem; --t2:.875rem; --t3:1rem; --t4:1.125rem; --s1:1.75rem; --s2:2.25rem;
  background:var(--mv-bg); color:var(--mv-mut); font-family:var(--mv-sans); font-size:var(--t3); line-height:1.5; font-weight:400;
}
.rk-app *,.rk-app *::before,.rk-app *::after{box-sizing:border-box}
.rk-app img{max-width:100%;display:block}
.rk-app a{color:inherit;text-decoration:none}
.rk-app [hidden]{display:none!important}
.rk-app h1,.rk-app h2,.rk-app h3{font-family:var(--mv-serif);font-weight:400;color:var(--mv-ink);margin:0}
.rk-app button{font:inherit}
.rk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rk-omot{max-width:720px;margin:0 auto;padding:0 18px}
.rk-sec{margin:40px 0 0}
.rk-sec:first-child{margin-top:8px}
.rk-sech{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 16px}
.rk-sech h2{font-size:var(--s2);line-height:1.15}

/* ---- kr-top: naslov + segmenti + izbor desetice (1:1 .kr-top/.kr-h/.kr-prek/.kr-izbor) ---- */
.kr-top{padding:18px 0 0}
.kr-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kr-h h1{font-size:var(--s2);line-height:1.1}
.kr-oznaka{font-size:var(--t1);color:var(--mv-acc);white-space:nowrap}
.kr-prek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.mv-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(30,37,51,.05);border:1px solid var(--mv-edge);margin:0}
.mv-seg.kr-sm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px}
.mv-seg button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-size:var(--t2);color:var(--mv-mut);cursor:pointer}
.mv-seg.kr-sm button{padding:7px 4px;font-size:var(--t1);min-width:0}
.mv-seg button.on{background:#1d4e89;color:#fff}
.kr-izbor{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px}
.kr-br{display:flex;gap:10px;justify-content:center}
.kr-br button{width:36px;height:36px;border-radius:999px;border:1px solid var(--mv-edge);background:#fff;color:var(--mv-mut);font-size:var(--t2);font-weight:500;cursor:pointer;padding:0;transition:all .3s}
.kr-br button.on{background:var(--mv-acc);border-color:var(--mv-acc);color:#fff}
.kr-otn{font-size:var(--t2);color:var(--mv-ink);text-align:center;min-height:1.5em}

/* ---- velika slika otajstva (1:1 dopuna Petrine odluke, svijetla tema): bleed-slika gore + overlap ---- */
.kr-hero-img{display:block;position:relative;height:38vh;min-height:230px;margin:6px -18px 0;background:var(--img,#e6dccb) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 97%);mask-image:linear-gradient(to bottom,#000 50%,transparent 97%)}
.kr-stage{margin-top:-16vh;position:relative;z-index:1}
.kr-stage .rosary-svg{max-height:56vh;width:auto;max-width:100%}
.kr-stage .kr-svg{display:flex;justify-content:center;max-width:none}
.kr-svg{position:relative;max-width:360px;margin:0 auto}
.rosary-svg{width:100%;height:auto;display:block;max-height:68vh;margin:0 auto}
.kr-svg.desetica{max-width:300px}
.kr-svg.desetica .kr-center{top:50%;width:62%}

.rosary-svg .bd{cursor:pointer}
.rosary-svg .bd .hit{fill:transparent}
.rosary-svg .bd .dot{fill:rgba(13,16,23,.1);stroke:rgba(13,16,23,.3);stroke-width:1;transition:fill .3s,stroke .3s,opacity .3s}
.rosary-svg .bd.cross rect{fill:rgba(13,16,23,.3);transition:fill .3s}
.rosary-svg .bd.done .dot{fill:#1d4e89;stroke:#1d4e89}
.rosary-svg .bd.done.cross rect{fill:#1d4e89}
.rosary-svg .bd.cur .dot{fill:#143a68;stroke:#143a68;filter:drop-shadow(0 0 5px rgba(29,78,137,.45))}
.rosary-svg .bd.cur{filter:drop-shadow(0 0 6px rgba(29,78,137,.4))}
.rosary-svg .bd.cur.cross rect{fill:#143a68}
.rosary-svg .bd.off{opacity:.3;pointer-events:none}
.rstring{stroke:rgba(184,152,90,.55);stroke-width:1;fill:none}
.kr-lbl{font-family:var(--mv-sans);font-size:9px;fill:rgba(26,26,28,.6)}
.kr-krug .bd .dot{stroke-width:1.5}
.kr-krug .bd.mali .dot{fill:rgba(13,16,23,.12);stroke:rgba(13,16,23,.32)}
.kr-krug .bd.mali.done .dot{fill:#1d4e89;stroke:#1d4e89}
.kr-krug .bd.mali.cur .dot{fill:#143a68;stroke:#143a68}

.kr-center{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);width:54%;text-align:center;pointer-events:none;z-index:1}
.kr-center,.kr-center *{color:var(--mv-ink)!important;text-shadow:none!important}
.kr-title{font-family:var(--mv-serif);font-size:var(--s2);line-height:1.05}
.kr-sub{font-size:var(--t1);color:var(--mv-mut);margin-top:8px}
.kr-slika{display:none} /* u svijetloj temi slika ide gore (kr-hero-img), ne u sredini petlje */

.kr-zona{position:relative;margin:0 -18px;padding:8px 18px 4px;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.kr-zona:focus-visible{outline:2px solid var(--mv-acc);outline-offset:-4px;border-radius:20px}
.kr-tap-uputa{text-align:center;font-size:var(--t1);color:var(--mv-dim);margin:2px 0 0}

/* ---- kontrole: natrag / Moli sa mnom / dalje ---- */
.kr-ctrl{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 4px}
.mv-ib{width:46px;height:46px;border-radius:999px;border:1px solid var(--mv-edge);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--mv-ink);padding:0;transition:border-color .3s,background .3s}
.mv-ib:hover{border-color:#b8985a}
.mv-ib svg.i{width:18px;height:18px}
.mv-btn8{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;border-radius:999px;border:1px solid transparent;padding:13px 24px;background:var(--mv-btn);cursor:pointer;transition:all .3s ease-in-out;font-weight:500;font-size:var(--t3);line-height:1.4}
.mv-btn8:hover{background:#143a68}
.mv-btn8 .tx{height:1.4em;overflow:hidden;display:block}
.mv-btn8 .tx span{display:block;white-space:nowrap;color:var(--mv-btn-ink)}
.kr-pi{position:relative;width:20px;height:20px;color:var(--mv-btn-ink)}
.kr-pi svg{position:absolute;inset:0;width:20px;height:20px;transition:opacity .3s}
.kr-pi .pa{opacity:0}
[data-kr=play].svira .kr-pi .pl{opacity:0}
[data-kr=play].svira .kr-pi .pa{opacity:1}

/* ---- statistika (Tvoja krunica), kao mv-card ---- */
.mv-card{position:relative;background:var(--mv-card);border:1px solid var(--mv-line);box-shadow:0 1px 2px rgba(30,37,51,.04),0 16px 34px -24px rgba(30,37,51,.22);border-radius:20px;padding:24px;min-width:0}
.rk-st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rk-st-n{display:block;font-family:var(--mv-serif);font-size:var(--s1);color:var(--mv-ink)}
.rk-st-l{display:block;font-size:var(--t1);color:var(--mv-dim);margin-top:2px}
.rk-st-bar{margin-top:12px;height:5px;border-radius:999px;background:var(--mv-edge);overflow:hidden}
.rk-st-bar i{display:block;height:100%;background:linear-gradient(90deg,#1d4e89,#3a6ea8);border-radius:999px}
.rk-st-dalje{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:var(--t2);color:var(--mv-acc);font-weight:500}

/* ---- brzina glasa ---- */
.kr-brz{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:28px 0 0}
.kr-brz span{width:100%;text-align:center;font-size:var(--t1);color:var(--mv-dim)}
.mv-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2d6c1;border-radius:999px;padding:7px 14px;font-size:var(--t2);color:#1e2533;background:#fff;cursor:pointer;transition:border-color .3s,color .3s}
.mv-pill:hover{border-color:#b8985a}
.mv-pill.on{background:rgba(29,78,137,.08);border-color:rgba(29,78,137,.35);color:#143a68}
.kr-brz .mv-pill,.kr-vrste .mv-pill{padding:6px 12px;font-size:var(--t1)}

/* ---- trenutna molitva: oznaka/naslov/brojac/tekst ---- */
.kr-dec{margin-top:26px;text-align:center;font-size:var(--t2);color:var(--mv-acc);min-height:1.5em}
.kr-pray{text-align:center;font-size:var(--s1);margin-top:4px}
.kr-cnt{text-align:center;font-size:var(--t1);color:var(--mv-dim);margin-top:4px}
.kr-text{white-space:pre-line;text-align:center;font-size:var(--t3);line-height:1.65;color:var(--mv-ink);margin:16px auto 0;max-width:36ch}
.kr-dno{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:20px}

/* ---- otajstva (dno) ---- */
.kr-vrste{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:26px 0 0}
.kr-vrste span{width:100%;text-align:center;font-size:var(--t1);color:var(--mv-dim)}

/* ---- info + poveznice (sadrzaj sa zive /krunica/, ispod aplikacijskog dijela) ---- */
.rk-info{background:var(--mv-card);border:1px solid var(--mv-line);border-radius:18px;padding:18px 20px 16px}
.rk-info summary{cursor:pointer;font-weight:500;font-size:var(--t3);color:var(--mv-ink)}
.rk-info p{font-size:var(--t2);line-height:1.6;color:var(--mv-mut);margin-top:10px}
.rk-donji{margin-top:20px;text-align:center;padding-bottom:4px}
.rk-donji a{font-size:var(--t2);color:var(--mv-mut);display:inline-flex;align-items:center;gap:6px;margin:0 10px}
.rk-donji a svg{width:14px;height:14px}
.rk-app .mv-foot{margin:28px 0 8px;text-align:center;font-size:var(--t1);color:var(--mv-dim)}

/* ---- mobilni zadani prikaz dodatnih desktop elemenata (da ne budu "slomljeni" prije 1024px) ---- */
.kr-top-in{position:relative;z-index:1}
.kr-myst-col{display:none}
.kr-myst-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.kr-myst-list button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;padding:10px 4px;cursor:pointer;border-radius:10px;transition:background .2s}
.kr-myst-list .br{font-family:var(--mv-serif);font-size:var(--s1);line-height:1;color:var(--mv-dim);min-width:26px;flex:none}
.kr-myst-list .nm{font-size:var(--t3);color:var(--mv-mut)}
.kr-myst-list button.on{background:rgba(29,78,137,.07)}
.kr-myst-list button.on .br,.kr-myst-list button.on .nm{color:#143a68;font-weight:500}
.kr-card-col{display:block}
.rk-link-card{display:flex;align-items:center;gap:6px}
.rk-link-card .ic{display:none}
.rk-link-card .txt{display:block}
.rk-link-card .txt b{font-weight:500}
.rk-link-card .txt .d{display:none} /* kratki opis se vidi tek na desktopu, da mobilna poveznica ostane sitna */


.kd-d{display:none} /* desktop dodaci (r9) - na mobitelu ne postoje vizualno */

/* =====================================================================
   DESKTOP (1024px+), r9 (09.11.2026.): po uzoru na NextSaaS/Nexas "ai-voice-generator"
   hero s badgeom i krupnom tipografijom + slika otajstva u okviru (nikad izvan viewporta),
   radni stol (krunica + player kartica s valnim oblikom), bento 4 otajstva, koraci 1-4,
   statistika u karticama, tamni CTA. Paleta Rijeci: tinta #16294a/#143a68, plava #1d4e89,
   zlatna #b8985a (tekst #8a6c2c), papir #f7f3ec/#fbf9f5. Mobitel (<1024px) netaknut. */
@media (min-width:1024px){
  .rk-app{--ink:#16294a;--ink2:#143a68;--pl:#1d4e89;--zl:#b8985a;--zlt:#8a6c2c;--pap:#f7f3ec;--pap2:#fbf9f5;--crta:rgba(22,41,74,.09);--rub:#e6dccb;
    --sjena:0 1px 2px rgba(22,41,74,.04),0 28px 56px -36px rgba(22,41,74,.30)}
  .rk-app.glavni{padding:0}
  .kd-d{display:block}
  .kd-wrap,.rk-omot{max-width:1280px;margin:0 auto;padding:0 56px}

  /* --- zajednicke komponente --- */
  .kd-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--rub);font-size:.8125rem;line-height:1.4;color:var(--ink);letter-spacing:.01em;margin:0 0 18px}
  .kd-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--zl);box-shadow:0 0 0 4px rgba(184,152,90,.18)}
  .rk-app .kd-h2{font-family:var(--mv-serif);font-weight:400;font-size:clamp(2.6rem,3.7vw,3.5rem);line-height:1.04;letter-spacing:-.01em;color:var(--ink);margin:0}
  .rk-app .kd-h2 em,.kd-hero-h em{font-style:italic;color:var(--zlt)}
  .kd-lead{font-size:1.0625rem;line-height:1.65;color:rgba(22,41,74,.72);margin:0;max-width:52ch}
  .kd-lead b{color:var(--ink);font-weight:500}
  .kd-sech{margin:0 0 48px}
  .kd-sech-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end}
  .kd-sech-split .kd-lead{justify-self:end}
  .kd-sech-c{text-align:center;display:flex;flex-direction:column;align-items:center}
  .kd-sech-c .kd-lead{margin-top:16px}
  .kd-btn{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 8px 0 26px;border-radius:999px;font-size:1rem;font-weight:500;line-height:1;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background .3s,border-color .3s,color .3s}
  .kd-btn .kd-btn-kr{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);transition:transform .3s}
  .kd-btn .kd-btn-kr svg{width:18px;height:18px}
  .kd-btn .kd-btn-kr.kr-pi svg{position:absolute;inset:11px;width:18px;height:18px}
  .kd-btn:hover .kd-btn-kr{transform:translateX(2px)}
  .kd-btn .tx{display:block;height:1.2em;overflow:hidden}
  .kd-btn .tx span{display:block;line-height:1.2}
  .kd-btn-p{background:var(--ink);color:#fff}
  .kd-btn-p:hover{background:var(--pl)}
  .kd-btn-s{background:#fff;color:var(--ink);border-color:var(--rub)}
  .kd-btn-s .kd-btn-kr{background:var(--pap)}
  .kd-btn-s:hover{border-color:var(--zl)}
  .kd-btn-z{background:var(--zl);color:var(--ink)}
  .kd-btn-z:hover{background:#c9ab70}

  /* valni oblik: siva podloga + zlatni sloj odrezan na napredak (--p iz kr2.js) */
  .kd-wave{position:relative;height:40px;--p:0}
  .kd-wave-b,.kd-wave-a{position:absolute;inset:0;display:flex;align-items:center;gap:3px}
  .kd-wave i{flex:1 1 0;min-width:2px;border-radius:3px;background:rgba(22,41,74,.16);transform-origin:center}
  .kd-wave-a i{background:var(--zl)}
  .kd-wave-a{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);transition:clip-path .5s ease}
  html.kr-svira .kd-wave i{animation:kdpuls 1.3s ease-in-out infinite;animation-delay:calc(var(--d) * -.18s)}
  @keyframes kdpuls{50%{transform:scaleY(.5)}}

  /* ===== HERO ===== */
  .kd-hero{position:relative;overflow:hidden;padding:148px 0 96px;
    background:radial-gradient(900px 560px at 88% 18%,rgba(184,152,90,.22),transparent 62%),radial-gradient(640px 460px at 0% 22%,rgba(29,78,137,.07),transparent 65%),var(--pap)}
  .kd-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px;align-items:center}
  .kd-hero-txt{min-width:0}
  .kd-hero-h{font-family:var(--mv-serif);font-weight:400;font-size:clamp(3.6rem,5.4vw,5.75rem);line-height:.98;letter-spacing:-.015em;color:var(--ink);margin:0 0 24px}
  .kd-hero-h em{display:inline-block}
  .kd-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
  .kd-hero-fakti{list-style:none;margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--crta);display:flex;flex-wrap:wrap;gap:14px 34px}
  .kd-hero-fakti li{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:rgba(22,41,74,.72)}
  .kd-hero-fakti svg{width:20px;height:20px;color:var(--zlt);flex:none}
  .kd-hero-fakti b{color:var(--ink);font-weight:500}
  .kd-hero-vis{position:relative;min-width:0}
  .kd-hero-vis::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:112%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:3px dotted rgba(184,152,90,.42);pointer-events:none}
  .kd-hero-okvir{position:relative;z-index:1;width:100%;height:min(calc(100vh - 240px),560px);min-height:380px;border-radius:32px;overflow:hidden;background:#e6dccb;box-shadow:0 2px 4px rgba(22,41,74,.06),0 40px 80px -40px rgba(22,41,74,.55);border:6px solid #fff}
  .kd-hero-img{position:absolute;inset:0;background:var(--img,#e6dccb) center/cover no-repeat;transition:background-image .6s}
  .kd-hero-okvir::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,32,.28) 0%,transparent 26%,transparent 60%,rgba(10,16,32,.42) 100%);pointer-events:none}
  .kd-hero-tag{position:absolute;z-index:2;top:18px;left:18px;max-width:calc(100% - 36px);padding:7px 14px;border-radius:999px;background:rgba(16,26,48,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(255,255,255,.18)}
  .kd-hero-chip{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,42%);align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:22px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -20px rgba(10,16,32,.55)}
  .kd-chip-play{position:relative;width:50px;height:50px;border-radius:50%;background:var(--ink);border:0;display:grid;place-items:center;cursor:pointer;transition:background .3s}
  .kd-chip-play:hover{background:var(--pl)}
  .kd-chip-play .kr-pi{color:#fff}
  .kd-chip-txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
  .kd-chip-txt b{font-weight:500;color:var(--ink);font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kd-chip-txt span{font-size:.75rem;color:rgba(22,41,74,.62)}
  .kd-wave-chip{height:34px}

  /* ===== RADNI STOL ===== */
  .rk-omot{padding-top:80px}
  .stranica-krunica .rh-footer{margin-top:0}
  .kr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);column-gap:28px;row-gap:0;align-items:stretch;
    grid-template-areas:"stage top" "stage card" "myst myst"}
  .rk-stat-wrap,.rk-info-wrap,.rk-app .mv-foot,.kr-mystat,.kr-izbor,.kr-top .kr-hero-img{display:none!important}

  .kr-stage{grid-area:stage;margin:0;position:relative;overflow:hidden;border-radius:32px;border:1px solid var(--crta);box-shadow:var(--sjena);
    background:radial-gradient(closest-side at 50% 42%,rgba(184,152,90,.14),transparent 85%),#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px 26px}
  .kr-zona{margin:0;padding:4px 8px 0;width:100%}
  .kr-svg{max-width:440px;width:100%}
  .kr-stage .rosary-svg{max-height:min(640px,calc(100vh - 150px));width:auto;max-width:100%}
  .kr-svg.desetica{max-width:440px}
  .kr-svg.desetica .rosary-svg{width:100%;height:auto}
  .kr-title{font-size:2.6rem}
  .kr-sub{font-size:.875rem;color:rgba(22,41,74,.62)}
  .kr-stage .rstring{stroke:var(--zl);stroke-width:1.4;stroke-opacity:.85}
  .kr-stage .bd .dot{fill:#fff;stroke:var(--pl);stroke-width:1.8;transform-box:fill-box;transform-origin:center;transition:fill .3s,stroke .3s,transform .3s}
  .kr-stage .bd.cross rect{fill:var(--pl)}
  .kr-stage .bd.done .dot{fill:var(--pl);stroke:var(--pl)}
  .kr-stage .bd.cur .dot{fill:var(--zl);stroke:var(--zlt);transform:scale(1.5);filter:drop-shadow(0 0 7px rgba(184,152,90,.7))}
  .kr-stage .bd.cur.cross rect{fill:var(--zlt)}
  .kr-stage .bd.cur{filter:drop-shadow(0 0 8px rgba(184,152,90,.55))}
  .kr-stage .bd.off .dot{opacity:.35}
  .kr-stage .kr-lbl{fill:rgba(22,41,74,.6);font-weight:600}
  .kr-tap-uputa{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 14px;border-radius:999px;background:var(--pap);font-size:.8125rem;color:rgba(22,41,74,.66)}
  .kd-ui{display:inline-flex}
  .kd-ui svg{width:16px;height:16px;color:var(--zlt)}

  /* player kartica = kr-top (glava) + kr-card-col (tijelo) */
  .kr-top{grid-area:top;padding:30px 34px 22px;margin:0;background:#fff;border:1px solid var(--crta);border-bottom:0;border-radius:32px 32px 0 0}
  .kr-top-in{position:static}
  .kd-mala{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(22,41,74,.55);margin:0 0 6px}
  .kr-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .kr-h h1{font-size:2.5rem;line-height:1.05;color:var(--ink)}
  .kr-oznaka{padding:5px 12px;border-radius:999px;background:rgba(29,78,137,.07);color:var(--ink2);font-size:.8125rem}
  .kr-prek{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
  .mv-seg.kr-sm{padding:4px;background:var(--pap);border-color:var(--rub)}
  .mv-seg.kr-sm button{padding:10px 8px;font-size:.875rem;color:rgba(22,41,74,.72);transition:background .3s,color .3s}
  .mv-seg button.on{background:var(--ink);color:#fff}

  .kr-card-col{grid-area:card;display:flex;flex-direction:column;background:#fff;border:1px solid var(--crta);border-top:1px dashed var(--rub);border-radius:0 0 32px 32px;padding:24px 34px 28px;box-shadow:var(--sjena);min-width:0}
  .kr-dec{margin:0;text-align:left;font-size:.875rem;color:var(--pl);display:flex;align-items:center;gap:8px}
  .kr-dec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--zl);flex:none}
  .kr-pray{text-align:left;font-size:2.15rem;line-height:1.1;margin-top:6px}
  .kr-cnt{text-align:left;font-size:.8125rem;color:rgba(22,41,74,.6)}
  .kr-text{text-align:left;max-width:none;margin:16px 0 0;padding:18px 22px;border-radius:20px;background:var(--pap);font-size:1rem;line-height:1.7;color:var(--ink);height:16.5em;overflow:auto;padding-bottom:30px;-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent);scrollbar-width:thin;scrollbar-color:rgba(184,152,90,.6) transparent}
  .kd-napredak{margin-top:20px}
  .kd-wave-player{height:42px}
  .kr-ctrl{justify-content:flex-start;gap:12px;margin:20px 0 0}
  .mv-ib{width:52px;height:52px;flex:none;border-color:var(--rub)}
  .kr-ctrl .mv-btn8{flex:1;min-width:0;padding:15px 26px;background:var(--ink);font-size:1rem}
  .kr-ctrl .mv-btn8:hover{background:var(--pl)}
  .kr-brz{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:center;gap:2px;margin:16px 0 0;padding:4px;border-radius:999px;background:var(--pap);border:1px solid var(--rub)}
  .kr-brz > span{width:auto;display:inline-flex;align-items:center;gap:6px;padding:0 12px 0 10px;font-size:.8125rem;color:rgba(22,41,74,.62);white-space:nowrap}
  .kr-brz .kd-ui{font-style:normal}
  .kr-brz .mv-pill{justify-content:center;border:0;background:transparent;padding:9px 6px;font-size:.875rem;color:rgba(22,41,74,.72);min-width:0;white-space:nowrap}
  .kr-brz .mv-pill.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(22,41,74,.08),0 4px 12px -6px rgba(22,41,74,.25)}
  .kr-dno{justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--crta)}
  .kr-dno button[data-kr=next]{display:none}
  .kr-dno .mv-pill{white-space:nowrap;border-color:var(--rub)}
  .kr-dno .mv-pill svg.i{width:15px;height:15px;flex:none}

  /* traka otajstava ispod radnog stola */
  .kr-myst-col{display:block;grid-area:myst;margin-top:28px;padding:24px 28px 28px;background:#fff;border:1px solid var(--crta);border-radius:32px;box-shadow:var(--sjena)}
  .kr-vrste{display:inline-flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;margin:0;padding:4px;border-radius:999px;background:var(--pap);border:1px solid var(--rub)}
  .kr-vrste[hidden]{display:none!important}
  .kr-vrste span{width:auto;padding:0 12px 0 10px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(22,41,74,.55)}
  .kr-vrste .mv-pill{border:0;background:transparent;padding:9px 18px;font-size:.875rem;color:rgba(22,41,74,.72)}
  .kr-vrste .mv-pill.on{background:var(--ink);color:#fff}
  .kr-myst-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 0}
  .kr-myst-list li{min-width:0}
  .kr-myst-list button{height:100%;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 18px 18px;border-radius:20px;background:var(--pap2);border:1px solid var(--crta);transition:background .3s,border-color .3s}
  .kr-myst-list button:hover{border-color:var(--zl)}
  .kr-myst-list .br{font-size:2rem;color:var(--zlt)}
  .kr-myst-list .nm{font-size:.9375rem;line-height:1.35;color:var(--ink)}
  .kr-myst-list button.on{background:var(--ink);border-color:var(--ink)}
  .kr-myst-list button.on .br{color:#e3c98f;font-weight:400}
  .kr-myst-list button.on .nm{color:#fff;font-weight:400}

  /* ===== SEKCIJE ===== */
  .rk-app .kd-sec{padding:120px 0;position:relative}
  .rk-app .kd-sec-svj{background:var(--pap2);border-top:1px solid var(--crta);border-bottom:1px solid var(--crta)}
  .rk-omot + .kd-sec{margin-top:120px}

  /* bento otajstava */
  .kd-bento{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:20px}
  .kd-ot{all:unset;box-sizing:border-box;display:flex;flex-direction:column;min-width:0;padding:12px;border-radius:30px;background:#fff;border:1px solid var(--crta);box-shadow:var(--sjena);cursor:pointer;
    transition:transform .35s,border-color .35s,box-shadow .35s}
  .kd-ot:hover{transform:translateY(-4px);border-color:rgba(184,152,90,.6)}
  .kd-ot:focus-visible{outline:2px solid var(--pl);outline-offset:3px}
  .kd-ot.on{border-color:var(--zl);box-shadow:0 0 0 3px rgba(184,152,90,.25),var(--sjena)}
  .kd-ot-0{grid-row:1 / 3}
  .kd-ot-3{grid-column:2 / 4;flex-direction:row;gap:8px}
  .kd-ot-okvir{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--rub)}
  .kd-ot-okvir img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;transition:transform .8s}
  .kd-ot:hover .kd-ot-okvir img{transform:scale(1.04)}
  .kd-ot-0 .kd-ot-okvir{aspect-ratio:auto;flex:1 1 auto;min-height:320px}
  .kd-ot-0 .kd-ot-tijelo{flex:0 0 auto}
  .kd-ot-3 .kd-ot-okvir{aspect-ratio:auto;flex:0 0 46%;min-height:250px}
  .kd-ot-dani{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.8125rem;color:var(--ink)}
  .kd-ot-danas{position:absolute;top:14px;right:14px;padding:6px 12px;border-radius:999px;background:var(--zl);color:var(--ink);font-size:.8125rem;font-weight:500}
  .kd-ot-tijelo{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:20px 14px 8px}
  .kd-ot-ime{font-family:var(--mv-serif);font-size:2rem;line-height:1.05;color:var(--ink)}
  .kd-ot-0 .kd-ot-ime{font-size:2.6rem}
  .kd-ot-popis{display:flex;flex-direction:column;gap:6px;margin:14px 0 18px}
  .kd-ot-popis span{display:flex;gap:10px;font-size:.875rem;line-height:1.4;color:rgba(22,41,74,.74)}
  .kd-ot-popis i{font-style:normal;font-family:var(--mv-serif);font-size:1.05rem;line-height:1.2;color:var(--zlt);min-width:12px}
  .kd-ot-go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--crta);font-size:.9375rem;font-weight:500;color:var(--ink)}
  .kd-ot-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pap);color:var(--ink);transition:background .3s,color .3s}
  .kd-ot-ic svg{width:17px;height:17px}
  .kd-ot:hover .kd-ot-ic,.kd-veza:hover .kd-ot-ic{background:var(--ink);color:#fff}

  /* koraci 1-4 */
  .kd-koraci{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .kd-korak{min-width:0;display:flex;flex-direction:column;padding:12px 12px 28px;border-radius:30px;background:#fff;border:1px solid var(--crta);box-shadow:var(--sjena)}
  .kd-korak-vis{display:grid;place-items:center;height:168px;border-radius:20px;background:radial-gradient(closest-side,rgba(184,152,90,.16),transparent),var(--pap)}
  .kd-korak-vis svg{width:78%;height:auto;max-height:140px}
  .kd-nit{fill:none;stroke:var(--zl);stroke-width:1.4}
  .kd-z{fill:#fff;stroke:var(--pl);stroke-width:1.6}
  .kd-z.on{fill:var(--pl)}
  .kd-z.cur{fill:var(--zl);stroke:var(--zlt);filter:drop-shadow(0 0 5px rgba(184,152,90,.6))}
  .kd-kr{fill:var(--pl)}
  .kd-lbl{font-family:var(--mv-sans);font-size:10px;fill:rgba(22,41,74,.6);letter-spacing:.04em}
  .kd-lbl-v{font-family:var(--mv-serif);font-size:17px;fill:var(--ink);letter-spacing:0}
  .kd-korak-br{display:grid;place-items:center;width:34px;height:34px;margin:22px 14px 0;border-radius:50%;border:1px solid var(--zl);font-family:var(--mv-serif);font-size:1.15rem;color:var(--zlt)}
  .rk-app .kd-korak h3{font-family:var(--mv-serif);font-weight:400;font-size:1.7rem;line-height:1.1;letter-spacing:0;color:var(--ink);margin:14px 14px 0}
  .kd-korak p{margin:10px 14px 0;font-size:.9375rem;line-height:1.65;color:rgba(22,41,74,.72)}
  .kd-proza{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:64px;padding-top:40px;border-top:1px solid var(--crta)}
  .rk-app .kd-proza h3{font-family:var(--mv-serif);font-weight:400;font-size:1.6rem;letter-spacing:0;color:var(--ink);margin:0 0 10px}
  .kd-proza p{margin:0;font-size:1rem;line-height:1.75;color:rgba(22,41,74,.74)}

  /* statistika */
  .kd-st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .kd-st-k{position:relative;overflow:hidden;min-width:0;padding:30px 28px 28px;border-radius:28px;background:#fff;border:1px solid var(--crta);box-shadow:var(--sjena);display:flex;flex-direction:column;gap:10px;min-height:190px;justify-content:flex-end}
  .kd-st-n{font-family:var(--mv-serif);font-size:4.2rem;line-height:.9;color:var(--ink)}
  .kd-st-l{font-size:.9375rem;color:rgba(22,41,74,.66)}
  .kd-st-ink{background:radial-gradient(120% 90% at 100% 0%,rgba(74,128,196,.45),transparent 60%),linear-gradient(160deg,var(--ink),var(--ink2));border-color:transparent}
  .kd-st-ink .kd-st-n{color:#fff}
  .kd-st-ink .kd-st-l{color:rgba(255,255,255,.76)}
  .kd-st-tj{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:20px;padding:24px 30px;border-radius:28px;background:#fff;border:1px solid var(--crta);box-shadow:var(--sjena)}
  .kd-st-tj > div{display:flex;flex-direction:column;gap:4px;min-width:0}
  .kd-st-tj b{font-weight:500;font-size:1.0625rem;color:var(--ink)}
  .kd-st-tj > div span{font-size:.9375rem;color:rgba(22,41,74,.66)}
  .kd-st-dani{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex:none}
  .kd-st-dani li{display:flex;flex-direction:column;align-items:center;gap:8px}
  .kd-st-dani i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rub);background:#fff}
  .kd-st-dani li.on i{background:var(--pl);border-color:var(--pl)}
  .kd-st-dani li.dan i{box-shadow:0 0 0 3px rgba(184,152,90,.35)}
  .kd-st-dani span{font-size:.75rem;color:rgba(22,41,74,.6)}

  /* CTA */
  .rk-app .kd-sec-cta{padding-top:120px}
  .kd-cta{position:relative;overflow:hidden;text-align:center;padding:88px 48px 0;border-radius:40px;color:#fff;
    background:radial-gradient(60% 55% at 50% 0%,rgba(90,140,205,.40),transparent 70%),linear-gradient(165deg,var(--ink) 0%,var(--ink2) 60%,var(--pl) 100%);display:flex;flex-direction:column;align-items:center}
  .kd-cta .kd-badge-t{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#f2e6c8}
  .rk-app .kd-cta .kd-h2{color:#fff;max-width:16ch;font-size:clamp(2.8rem,4.2vw,4rem)}
  .rk-app .kd-cta .kd-h2 em{color:#e3c98f}
  .kd-cta .kd-lead{color:rgba(255,255,255,.78);margin-top:18px}
  .kd-cta-btns{justify-content:center}
  .kd-wave-cta{width:100%;height:96px;margin-top:64px}
  .kd-wave-cta i{background:rgba(255,255,255,.12);border-radius:3px 3px 0 0}
  .kd-wave-cta .kd-wave-a i{background:rgba(227,201,143,.85)}
  .kd-wave-cta .kd-wave-b,.kd-wave-cta .kd-wave-a{align-items:flex-end}
  .kd-veze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
  .kd-veza{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px;border-radius:28px;background:#fff;border:1px solid var(--crta);box-shadow:var(--sjena);transition:border-color .3s,transform .3s}
  .kd-veza:hover{border-color:var(--zl);transform:translateY(-2px)}
  .kd-veza > span:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
  .kd-veza b{font-weight:500;font-size:1.125rem;color:var(--ink)}
  .kd-veza > span:first-child span{font-size:.875rem;color:rgba(22,41,74,.62)}

  /* animacije pri skrolu (samo uz html.kd-anim, koji se ne pali uz prefers-reduced-motion) */
  html.kd-anim .kd-rv{opacity:0;translate:0 28px;filter:blur(8px);transition:opacity .8s var(--dl,0s),translate .8s var(--dl,0s),filter .8s var(--dl,0s)}
  html.kd-anim .kd-ot.kd-rv{transition:opacity .8s var(--dl,0s),translate .8s var(--dl,0s),filter .8s var(--dl,0s),transform .35s,border-color .35s,box-shadow .35s}
  html.kd-anim .kd-rv.vidi{opacity:1;translate:0 0;filter:none}
  .kd-sech > div .kd-rv:nth-child(2){--dl:.08s}
  .kd-sech > .kd-lead.kd-rv,.kd-sech-c .kd-rv:nth-child(2){--dl:.08s}
  .kd-sech-c .kd-lead.kd-rv{--dl:.16s}
  .kd-hero-txt .kd-rv:nth-child(2){--dl:.08s}
  .kd-hero-txt .kd-rv:nth-child(3){--dl:.16s}
  .kd-hero-txt .kd-rv:nth-child(4){--dl:.24s}
  .kd-hero-txt .kd-rv:nth-child(5){--dl:.32s}
  .kd-hero-vis.kd-rv{--dl:.2s}
  .kd-ot-1,.kd-korak:nth-child(2){--dl:.08s}
  .kd-ot-2,.kd-korak:nth-child(3){--dl:.16s}
  .kd-ot-3,.kd-korak:nth-child(4){--dl:.24s}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  html.kr-svira .kd-wave i{animation:none}
  .kd-wave-a{transition:none}
  .kd-ot,.kd-ot-okvir img,.kd-veza{transition:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .kd-wrap,.rk-omot{padding:0 32px}
  .kd-hero-grid{gap:40px}
  .kd-hero-h{font-size:3.7rem}
  .kd-hero-chip{grid-template-columns:auto minmax(0,1fr)}
  .kd-wave-chip{display:none}
  .kr-top{padding:26px 26px 20px}
  .kr-card-col{padding:22px 26px 26px}
  .kr-h h1{font-size:2.1rem}
  .kr-pray{font-size:1.85rem}
  .kr-brz > span{padding:0 6px}
  .kr-brz .kd-ui{display:none}
  .kr-brz .mv-pill{font-size:.8125rem;padding:9px 2px}
  .kr-myst-list{gap:8px}
  .kr-myst-list button{padding:14px 14px 16px}
  .kr-myst-list .nm{font-size:.875rem}
  .kd-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kd-ot-0{grid-row:auto}
  .kd-ot-0 .kd-ot-okvir{flex:none;aspect-ratio:16/10;min-height:0}
  .kd-ot-3{grid-column:auto;flex-direction:column;gap:0}
  .kd-ot-3 .kd-ot-okvir{flex:none;aspect-ratio:16/10;min-height:0}
  .kd-ot-0 .kd-ot-ime{font-size:2rem}
  .kd-koraci{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kd-st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kd-st-tj{flex-direction:column;align-items:flex-start}
}