/* ===== Kalkulatori i Resursi u novom dizajnu: ide posle v3.css i nova.css (body.nova) ===== */

/* heroj stranice: kraći od početne, bez ilustracije */
.k-hero{padding-bottom:clamp(56px,7vw,96px)}
.k-hero h1{font-size:clamp(38px,5.4vw,72px);max-width:18ch}
.k-crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 22px;font:500 13px/1.4 var(--n-mono);color:#8e9bbb}
.k-crumbs a{color:#c6d0e6;text-decoration:none}
.k-crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.k-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;padding:0;list-style:none}
.k-hero-meta li{font:500 13px/1 var(--n-mono);color:#c6d0e6;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);border-radius:6px;padding:8px 10px}

/* uvod: tekst + primer */
.k-text p{color:var(--n-body);max-width:60ch}
.k-text p+p{margin-top:16px}
.k-ex{margin:32px 0 0;background:#fffbea;border-radius:6px 6px 18px 6px;padding:22px 24px;box-shadow:0 0 0 1px #f1e6b8;transform:rotate(-.6deg)}
.k-ex-k{display:block;font:500 13px/1 var(--n-mono);color:var(--n-blue);margin-bottom:10px}
.k-ex p{color:var(--n-ink);font-size:16.5px;max-width:none}

/* kalkulator: kartica */
.k-calc-sec{padding-top:clamp(56px,8vw,96px)}
.kk-warn{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;background:#fff;border-radius:16px;padding:20px 22px;margin-bottom:20px;box-shadow:0 0 0 1px var(--n-line)}
.kk-warn::before{content:"!";grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--n-hl);color:var(--n-night);font:800 17px/1 var(--fd)}
.kk-warn b{font:700 17px/1.3 var(--fd);color:var(--n-ink)}
.kk-warn p{font-size:15.5px;color:var(--n-body)}
.kk-card{background:#fff;border-radius:24px;padding:clamp(22px,4vw,44px);box-shadow:0 0 0 1px var(--n-line),var(--n-shadow)}
.kk-cur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.kk-lbl{font:500 13px/1 var(--n-mono);color:var(--n-muted)}
.kk-lbl-b{color:var(--n-blue)}
.kk-seg{display:inline-flex;border-radius:12px;padding:4px;background:var(--n-paper-2)}
.kk-seg button{font:600 14px var(--fb);border:0;background:none;color:var(--n-muted);padding:8px 16px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s}
.kk-seg button[aria-pressed="true"]{background:#fff;color:var(--n-ink);box-shadow:0 1px 3px rgba(13,23,48,.12)}
.kk-note{font-size:14px;color:var(--n-muted);margin-top:10px}
.kk-q{font-size:clamp(22px,2.4vw,28px);margin:36px 0 18px;letter-spacing:-.02em}
.kk-paths{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kk-path{text-align:left;font:inherit;color:inherit;background:#fff;border:0;border-radius:16px;padding:20px 22px;cursor:pointer;box-shadow:0 0 0 1.5px var(--n-line-2);transition:box-shadow .2s,background .2s,transform .3s var(--n-spring)}
.kk-path:hover{box-shadow:0 0 0 1.5px var(--n-blue);transform:translateY(-2px)}
.kk-path[aria-pressed="true"]{background:var(--n-blue-t);box-shadow:0 0 0 2px var(--n-blue)}
.kk-path .t{font:500 13px/1 var(--n-mono);color:var(--n-blue)}
.kk-path b{display:block;font:700 20px/1.25 var(--fd);letter-spacing:-.01em;margin-top:10px}
.kk-path span:last-child{display:block;font-size:15px;color:var(--n-body);margin-top:4px}
.kk-panel{border-top:1px solid var(--n-line);margin-top:32px;padding-top:32px}
.kk-panel h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;margin:10px 0 22px}
.kk-panel .kk-sub{margin:-12px 0 22px;color:var(--n-body)}
.kk-fields{display:grid;gap:20px}
.kk-fields.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kk-fields.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.nova .kk-fields .field{margin:0}
body.nova .field label{font:600 15px/1.35 var(--fb);color:var(--n-ink);margin-bottom:8px}
body.nova .field .hint{font-size:13.5px;line-height:1.45;color:var(--n-muted);margin-top:6px}
body.nova .field input{height:52px;border:0;border-radius:12px;padding:0 14px;font-size:17px;font-variant-numeric:tabular-nums;color:var(--n-ink);background:var(--n-paper);box-shadow:inset 0 0 0 1.5px var(--n-line);transition:box-shadow .2s,background .2s}
body.nova .field input:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--n-blue),0 0 0 4px rgba(43,96,232,.12)}
.kk-in{position:relative}
.kk-in input{padding-right:58px!important}
.kk-in .suf{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:500 13px var(--n-mono);color:var(--n-muted);pointer-events:none}
details.kk-mk{margin-top:24px;border-radius:16px;background:var(--n-paper);box-shadow:inset 0 0 0 1px var(--n-line)}
details.kk-mk summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.kk-mk summary::-webkit-details-marker{display:none}
details.kk-mk summary b{display:block;font:700 17px/1.3 var(--fd)}
details.kk-mk summary small{display:block;font-size:14.5px;color:var(--n-body);margin-top:4px}
details.kk-mk summary::after{content:"";flex-shrink:0;width:32px;height:32px;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b60e8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s var(--n-spring)}
details.kk-mk[open] summary::after{transform:rotate(45deg)}
details.kk-mk .in{padding:4px 20px 22px}
body.nova details.kk-mk .field input{background:#fff}
.kk-amber{font-size:14.5px;color:#7a4a00;background:#fdf0d3;border-radius:8px;padding:10px 12px;margin-bottom:16px}
.kk-small{font-size:13.5px;color:var(--n-muted);margin-top:14px}
.kk-neto{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.kk-neto .pill{background:#fff;border-radius:10px;padding:10px 14px;font-size:15px;box-shadow:inset 0 0 0 1px var(--n-line)}
.kk-neto .pill b{font-weight:700;font-variant-numeric:tabular-nums}
.kk-btn2{display:inline-flex;align-items:center;height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--n-blue-t);color:var(--n-blue);font:600 15px var(--fb);cursor:pointer;transition:background .2s,color .2s}
.kk-btn2:hover{background:var(--n-blue);color:#fff}
.kk-btn2:disabled{opacity:.5;cursor:not-allowed;background:var(--n-blue-t);color:var(--n-blue)}
.kk-go{margin-top:28px}
.kk-err{color:var(--n-bad);font-size:14.5px;margin-top:12px}

/* rezultati */
.kk-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
.kk-res.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kk-r{border-radius:16px;padding:20px;background:var(--n-paper);box-shadow:inset 0 0 0 1px var(--n-line)}
.kk-r .l{display:block;font:500 13px/1.35 var(--n-mono);color:var(--n-muted)}
.kk-v{display:block;font:800 clamp(28px,3vw,36px)/1.1 var(--fd);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:10px;color:var(--n-ink)}
.kk-v.pos{color:var(--n-ok)}.kk-v.neg{color:var(--n-bad)}
.kk-r p{font-size:14px;color:var(--n-body);margin-top:8px;line-height:1.5}
.kk-verdikt{margin-top:14px;border-radius:16px;padding:22px 24px;box-shadow:inset 0 0 0 1px var(--n-line)}
.kk-verdikt.pos{background:#e9f7ef;box-shadow:inset 0 0 0 1px #bfe6cf}
.kk-verdikt.neg{background:#fdeeee;box-shadow:inset 0 0 0 1px #f5c6c6}
.kk-verdikt.warn{background:#fdf5e3;box-shadow:inset 0 0 0 1px #f3dca6}
.kk-verdikt .lab{font:500 13px/1 var(--n-mono)}
.kk-verdikt .big{font:800 clamp(24px,3vw,34px)/1.15 var(--fd);letter-spacing:-.02em;margin-top:8px}
.kk-verdikt .big.sm{font-size:clamp(20px,2.4vw,24px)}
.kk-verdikt.pos .lab,.kk-verdikt.pos .big{color:#14633a}
.kk-verdikt.neg .lab,.kk-verdikt.neg .big{color:#a82a2a}
.kk-verdikt.warn .lab,.kk-verdikt.warn .big{color:#7a4a00}
.kk-verdikt p{font-size:15px;color:var(--n-body);margin-top:8px}
.kk-edu{margin-top:24px;padding-top:24px;border-top:1px solid var(--n-line);font-size:16px;color:var(--n-body)}
.kk-edu p{max-width:68ch}
.kk-edu p+p{margin-top:12px}
.kk-edu .ex{padding-left:16px;border-left:3px solid var(--n-hl);color:var(--n-body)}

/* tri broja: tamna kartica */
.kk-tri{position:relative;overflow:hidden;margin-top:20px;border-radius:24px;padding:clamp(24px,4vw,40px);color:#fff;background:radial-gradient(80% 90% at 100% 0%,rgba(43,96,232,.5),transparent 65%),var(--n-night)}
.kk-tri .kicker{font:500 13px/1 var(--n-mono);color:#9fb6ff}
.kk-tri h3{font-size:clamp(24px,2.6vw,32px);margin-top:10px;color:#fff;letter-spacing:-.02em}
.kk-tri .kk-res{margin-top:22px}
.kk-tri .kk-r{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kk-tri .kk-r .l{color:#9aa7c4}
.kk-tri .kk-v{color:#fff}.kk-tri .kk-v.pos{color:#7fe0a8}
.kk-tri .kk-r p{color:#9aa7c4}
.kk-tri>p{font-size:15.5px;color:#c6d0e6;margin-top:18px}
.kk-later{margin-top:14px;background:#fff;border-radius:16px;padding:22px 24px;box-shadow:0 0 0 1px var(--n-line)}
.kk-later b{display:block;font:700 18px/1.3 var(--fd);margin-bottom:8px}
.kk-later p{font-size:15.5px;color:var(--n-body);max-width:72ch}

/* završni poziv */
.k-final{position:relative;overflow:hidden;color:#fff;padding:clamp(64px,9vw,112px) 0;background:radial-gradient(60% 80% at 85% 20%,rgba(43,96,232,.4),transparent 70%),var(--n-night)}
.k-final::before{content:"";position:absolute;inset:0;background-image:var(--n-grain);opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.k-final .n-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.k-final h2{color:#fff;max-width:16ch}
.k-final p{margin-top:16px;color:#c6d0e6;max-width:46ch}
.k-final-cta{display:grid;gap:16px;justify-items:start}
.k-final-cta p{margin:0;font-size:15.5px}
.k-final-cta a:not(.n-btn){color:#fff;font-weight:600;text-underline-offset:3px}
.kk-disc{padding:28px 0 36px;font-size:13.5px;color:var(--n-muted);text-align:center;max-width:680px;margin:0 auto}

/* resursi: karte kalkulatora */
.k-free{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--fb);color:var(--n-ok)}
.k-free small{display:block;margin-top:6px;font:500 13px var(--n-mono);color:var(--n-muted)}
.k-gets{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.k-gets li{font:500 12.5px/1 var(--n-mono);background:var(--n-blue-t);color:var(--n-blue);border-radius:4px;padding:6px 8px}
.k-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.k-why li{background:#fff;border-radius:20px;padding:26px;box-shadow:0 0 0 1px var(--n-line)}
.k-why b{display:block;font:700 20px/1.25 var(--fd);letter-spacing:-.015em}
.k-why p{margin-top:10px;color:var(--n-body);font-size:16px}
.k-why-n{display:block;font:500 13px var(--n-mono);color:var(--n-blue);margin-bottom:14px}

@media (max-width:900px){
  .k-final .n-wrap{grid-template-columns:1fr}
  .k-why{grid-template-columns:1fr}
}
@media (max-width:760px){
  .kk-paths,.kk-fields.c3,.kk-fields.c2,.kk-res,.kk-res.c2{grid-template-columns:1fr}
  .kk-card{border-radius:20px}
  .k-final-cta .n-btn{width:100%}
}