/* Kalkulator: paušal ili knjige */
.epk{margin:18px 0}
.epk-box{border:2px solid #0053C2;border-radius:16px;padding:26px;background:linear-gradient(160deg,#00224f 0%,#003272 45%,#0053C2 100%);color:#fff;box-shadow:0 18px 44px rgba(0,40,114,.28);box-sizing:border-box}
.epk-title{margin:0 0 10px;font-size:1.28rem;font-weight:800;color:#fff;text-align:left;line-height:1.3;padding:0;border:0}
.epk-podnaslov{margin:0 0 24px;max-width:760px;font-size:.95rem;line-height:1.65;color:#bcd2f2}

.epk-unos{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:22px}
.epk-sirok{grid-column:1 / -1}
.epk-polje>label{display:block;font-weight:600;font-size:.9rem;color:#dce7f9;margin-bottom:8px}
.epk-polje input[type=text]{width:100%;box-sizing:border-box;border:1px solid #fff;border-radius:9px;padding:12px 13px;font:inherit;font-size:15px;background:#fff;color:#13233f}
.epk-polje input[type=text]:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.38)}
.epk .pk-combo-in{background-color:#fff;border-color:#fff;color:#13233f}
.epk .pk-combo-pan{border-color:#fff;color:#13233f}
.epk .pk-combo-op{color:#13233f}
.epk .pk-combo-op:hover{background:#eef3fc;color:#003272}
.epk-cek{grid-column:1 / -1;display:flex;flex-direction:column;gap:9px}
.epk-cek label{display:flex;align-items:center;gap:9px;font-weight:400;font-size:.93rem;color:#dce7f9;margin:0}
.epk-cek input{width:auto;accent-color:#fff}

.epk-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-style:normal;font-weight:700;font-size:11.5px;cursor:help;margin-left:5px;vertical-align:middle}
.epk-tip{visibility:hidden;opacity:0;position:absolute;bottom:140%;left:50%;transform:translateX(-50%);background:#00204a;color:#fff;border-radius:10px;padding:10px 13px;width:230px;font-size:12.5px;font-weight:400;line-height:1.5;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:.15s;text-align:left}
.epk-info:hover .epk-tip,.epk-info:focus .epk-tip{visibility:visible;opacity:1}

.epk-upozorenje{background:rgba(255,196,84,.16);border:1px solid rgba(255,196,84,.5);border-radius:11px;padding:12px 15px;font-size:.92rem;line-height:1.6;color:#ffe6b8;margin-bottom:18px}

.epk-rezultat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.epk-kol{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:13px;padding:18px 16px;transition:.18s}
.epk-kol.epk-najbolji{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.epk-kol-ime{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#bcd2f2;margin-bottom:10px;line-height:1.35;min-height:2.4em}
.epk-iznos{font-size:1.6rem;font-weight:800;line-height:1.15;color:#fff}
.epk-god{font-size:.82rem;color:#a8c3ea;margin-bottom:12px}
.epk-detalj{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.2)}
.epk-detalj li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:.86rem}
.epk-detalj li span:first-child{color:#bcd2f2}
.epk-detalj li span:last-child{font-weight:600;text-align:right}

.epk-presuda{margin-top:18px;background:rgba(255,255,255,.14);border-radius:12px;padding:15px 17px;font-size:1rem;line-height:1.65;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.epk-nota{margin:16px 0 0;font-size:.8rem;color:#bfd0ea;line-height:1.65}

/* Česta pitanja ispod kalkulatora */
.epk-faq{margin:32px 0}
.epk-faq h2{font-size:1.25rem;color:#003272;margin:0 0 14px}
.epk-faq-st{border:1px solid #e2e7f0;border-radius:11px;padding:14px 16px;margin-bottom:10px;background:#fff}
.epk-faq-st summary{cursor:pointer;font-weight:600;color:#13233f;list-style:none}
.epk-faq-st summary::-webkit-details-marker{display:none}
.epk-faq-st summary:before{content:"+";color:#0053C2;font-weight:800;margin-right:9px}
.epk-faq-st[open] summary:before{content:"\2212"}
.epk-faq-st p{margin:11px 0 0;line-height:1.7;color:#445}

@media(max-width:820px){
 .epk-rezultat{grid-template-columns:1fr}
 .epk-kol-ime{min-height:0}
}
@media(max-width:640px){
 .epk-box{padding:20px}
 .epk-unos{grid-template-columns:1fr}
 .epk-iznos{font-size:1.45rem}
}

/* ================= LANDING: kalkulator gore, tekst i bok ispod =============
   .ept-tool-body daje 1600px, sto je predaleko za citanje. Omotac se suzava
   na 1240px, pa se ispod kalkulatora deli na tekst i bocnu kolonu. */
/* Omotac NE sme da bude uzi od heroja. H1 stoji u `.ept-in`, koji ide do
   --ept-max, pa bi svako suzavanje ovde odseklo kalkulator u odnosu na naslov
   iznad njega. Zato omotac nasledjuje punu sirinu iz `.ept-tool-body > *`,
   a citljivost se resava dole, ogranicenjem duzine reda unutar teksta. */
/* `overflow-x:clip` NE sme da se izgubi. Tooltipovi u kalkulatoru su siroki
   230px, apsolutno pozicionirani i `visibility:hidden`, sto i dalje siri
   oblast za horizontalni skrol. Klip, ne hidden, da se ne napravi skrol
   kontejner koji bi pokvario sidra iz sadrzaja. */
.epkwrap{width:100%;overflow-x:clip}
.epk,.epk-box,.epkbok-kartica,.epktoc-kutija,.epkuvod-cta{max-width:100%}
.epkwrap .epklead{font-size:1.12rem;color:#56657a;line-height:1.6;margin:0 0 26px;max-width:950px}
.epkmost{margin:26px 0 0;background:#f5f8fc;border:1px solid #e4eaf3;border-left:4px solid #0053C2;border-radius:12px;padding:16px 20px;color:#37445a;font-size:.97rem;line-height:1.7}

/* Dve kolone, ne cetiri celije. Ranija verzija je tekst pruzala preko dva
   reda (`grid-row:1 / span 2`), pa je grid njegovu visinu raspodelio na oba
   reda i prvi red narastao mnogo iznad visine sadrzaja. Rezultat je bila
   ogromna rupa izmedju sadrzaja stranice i prve kartice. Sada je desna strana
   jedan obican blok, a razmaci su normalne margine. */
.epkdole{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:60px;align-items:start;margin-top:38px}
.epkbokwrap{min-width:0}
.epktoc{margin-bottom:18px}
.epktekst{min-width:0;max-width:none}
.epktekst h2{font-size:1.4rem;color:#0B2447;margin:38px 0 14px;padding-left:15px;border-left:4px solid #0053C2;line-height:1.25}
.epktekst h2:first-child{margin-top:0}
.epktekst h3{font-size:1.13rem;color:#0B2447;margin:26px 0 10px;line-height:1.3}
.epktekst p{line-height:1.78;color:#37445a;margin:0 0 15px}
.epktekst ul,.epktekst ol{margin:0 0 15px;padding-left:22px;color:#37445a;line-height:1.75}
.epktekst li{margin:5px 0}
.epktekst a{color:#0053C2;font-weight:600}
.epktekst img{max-width:100%;height:auto;border-radius:12px;margin:18px 0}
.epktekst .epk-faq{max-width:none;margin:38px 0 0}
.epkdisc{margin:32px 0 0;background:#f5f8fc;border:1px solid #e4eaf3;border-left:4px solid #0053C2;border-radius:12px;padding:18px 20px;color:#5b6b80;font-size:.92rem;line-height:1.7}



/* ======================= UVOD: tekst levo, CTA desno ======================
   Desna kolona je iste sirine kao bocna kolona ispod (380px), pa se desni
   rubovi poklapaju kroz celu stranicu. */
.epkuvod{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:60px;align-items:start;margin:0 0 32px}
.epkuvod-tekst{min-width:0}
.epkuvod-tekst p{font-size:1.08rem;color:#4a586b;line-height:1.72;margin:0 0 14px;max-width:950px}
.epkuvod-tekst p:last-child{margin-bottom:0}
.epkuvod-tekst strong{color:#13233f}

.epkuvod-cta{min-width:0;border:1px solid #e2e7f0;border-radius:14px;padding:22px;background:#f8fafd;box-shadow:0 4px 16px rgba(0,40,114,.05)}
.epkuvod-cta .epkbok-naslov{margin-bottom:10px!important}
.epkuvod-cta p{margin:0 0 16px;font-size:.92rem;line-height:1.65;color:#5b6b80}
.epkuvod-dugme{display:inline-block;background:#0053C2;color:#fff;font-weight:700;font-size:.92rem;padding:12px 20px;border-radius:9px;text-decoration:none;line-height:1.3}
.epkuvod-dugme:hover{background:#003272;color:#fff}
.epkuvod-linkovi{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #e4eaf3}
.epkuvod-linkovi li{margin:7px 0}
.epkuvod-linkovi a{color:#0053C2;font-weight:600;font-size:.88rem;text-decoration:none}
.epkuvod-linkovi a:hover{text-decoration:underline}

/* Sadrzaj stranice. Na sirokom ekranu je otvoren i bez strelice, na uskom je
   <details> koji se sklapa. Stanje postavlja mali skript u futeru. */
.epktoc-kutija{border:1px solid #e2e7f0;border-radius:14px;padding:20px;background:#fff;box-shadow:0 4px 16px rgba(0,40,114,.05)}
.epktoc-naslov{cursor:default;list-style:none;margin:0 0 12px!important;display:block}
.epktoc-naslov::-webkit-details-marker{display:none}
.epktoc-lista{list-style:none;counter-reset:epktoc;margin:0;padding:0}
.epktoc-lista li{counter-increment:epktoc;padding:8px 0;border-bottom:1px solid #f0f3f8;line-height:1.5}
.epktoc-lista li:last-child{border-bottom:0;padding-bottom:0}
.epktoc-lista li:before{content:counter(epktoc) ".";color:#9fb4d4;font-weight:700;font-size:.82rem;margin-right:8px}
.epktoc-lista a{color:#13233f;font-weight:600;font-size:.92rem;text-decoration:none}
.epktoc-lista a:hover{color:#0053C2;text-decoration:underline}
.epktekst h2{scroll-margin-top:90px}

/* bocna kolona */
.epkbok{min-width:0}
.epktoc{min-width:0}

/* Duzina reda, ne sirina kolone. Kolona ide do ivice da bi tekst poceo tacno
   ispod H1, a red se lomi na 950px, isto kao desna kolona na /pausal-kalkulator/. */
.epktekst p,.epktekst ul,.epktekst ol,.epktekst h2,.epktekst h3{max-width:950px}
.epktekst .epk-faq p,.epktekst .epkdisc p,.epktekst .epk-faq summary{max-width:none}
.epkbok-kartica{border:1px solid #e2e7f0;border-radius:14px;padding:20px;background:#fff;margin-bottom:18px;box-shadow:0 4px 16px rgba(0,40,114,.05)}
.epkbok-naslov{font-size:.82rem!important;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#0053C2;margin:0 0 14px!important;padding:0!important;border:0!important;line-height:1.4}
.epkbok-brojke{margin:0}
.epkbok-red{padding:9px 0;border-bottom:1px solid #f0f3f8}
.epkbok-red:last-child{border-bottom:0;padding-bottom:0}
.epkbok-red dt{font-size:.86rem;color:#7a8699;margin:0 0 2px}
.epkbok-red dd{margin:0;display:flex;flex-direction:column;gap:1px}
.epkbok-red dd strong{font-size:1.02rem;color:#13233f;font-weight:700}
.epkbok-red dd span{font-size:.78rem;color:#8893a3;line-height:1.45}
.epkbok-nota{margin:14px 0 0;font-size:.78rem;color:#8893a3;line-height:1.5}

.epkbok-rokovi{list-style:none;margin:0;padding:0}
.epkbok-rokovi li{padding:11px 0;border-bottom:1px solid #f0f3f8;font-size:.88rem;color:#445;line-height:1.6}
.epkbok-rokovi li:last-child{border-bottom:0;padding-bottom:0}
.epkbok-datum{display:block;font-weight:700;color:#0053C2;font-size:.92rem;margin-bottom:3px}

.epkbok-alati{list-style:none;margin:0;padding:0}
.epkbok-alati li{padding:10px 0;border-bottom:1px solid #f0f3f8}
.epkbok-alati li:last-child{border-bottom:0;padding-bottom:0}
.epkbok-alati a{display:block;color:#0053C2;font-weight:600;font-size:.93rem;text-decoration:none}
.epkbok-alati a:hover{text-decoration:underline}
.epkbok-alati span{display:block;font-size:.78rem;color:#8893a3;margin-top:2px;line-height:1.45}

.epkbok-cta{background:linear-gradient(160deg,#00224f 0%,#003272 50%,#0053C2 100%);border-color:#0053C2;color:#fff}
.epkbok-cta .epkbok-naslov{color:#9fc2f0}
.epkbok-cta p{margin:0 0 15px;font-size:.9rem;line-height:1.65;color:#dce7f9}
.epkbok-dugme{display:inline-block;background:#fff;color:#003272;font-weight:700;font-size:.9rem;padding:11px 20px;border-radius:9px;text-decoration:none}
.epkbok-dugme:hover{background:#eef3fc;color:#003272}

@media(max-width:1040px){
 /* Redosled na uskom ekranu: sadrzaj, pa tekst, pa ostale kartice na dno.
    Desna strana je na sirokom ekranu jedan blok, pa se ovde razlaze. */
 .epkuvod{grid-template-columns:1fr;gap:26px;margin-bottom:26px}
 .epkdole{grid-template-columns:1fr;gap:0}
 /* `display:contents` izvuce sadrzaj i kartice iz omotaca, pa postanu direktna
    deca mreze i `order` moze da ih preredja oko teksta. */
 .epkbokwrap{display:contents}
 .epktoc{order:1;margin-bottom:28px}
 .epktekst{order:2}
 .epkbok{order:3;margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;align-items:start}
 .epktekst p,.epktekst ul,.epktekst ol,.epktekst h2,.epktekst h3{max-width:none}
 .epkbok-kartica{margin-bottom:0}
 .epktoc-naslov{cursor:pointer;position:relative;padding-right:26px}
 .epktoc-naslov:after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid #0053C2;border-bottom:2px solid #0053C2;transform:rotate(45deg);transition:.15s}
 .epktoc-kutija[open] .epktoc-naslov:after{transform:rotate(-135deg);margin-top:-2px}
 .epktoc-kutija:not([open]) .epktoc-naslov{margin-bottom:0!important}
}

/* Na uskom ekranu tooltip ne sme da visi sa strane. Ikonica prestaje da bude
   tacka oslonca, pa se oblacic razvuce po sirini samog polja. */
@media(max-width:700px){
 .epk-info{position:static}
 .epk-polje{position:relative}
 .epk-tip{left:0;right:0;width:auto;bottom:auto;top:calc(100% + 8px);transform:none;text-align:left}
 .epk-tip:after{left:22px;top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#00204a}
}
