.kdp{
  --ink: #141617;
  --night: #1a1828;
  --night-2: #1d1c2a;
  --night-3: #232133;
  --paper: #ffffff;
  --tint: #f8f7ff;
  --accent: #a78bfa;
  --accent-mid: #8b5cf6;
  --accent-strong: #6d4ad8;
  --muted: #5f5e6b;
  --rule: #e5e7eb;
  --naslov: Epilogue, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tekst: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-kontrola: 6px;
  --r-kartica: 12px;
  --sjena: 0 20px 60px rgba(0, 0, 0, .3);
}.kdp{
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}.kdp h1,.kdp h2,.kdp dt,.kdp dd,.kdp p,.kdp ul,.kdp li,.kdp figure,.kdp figcaption{
  margin: 0; padding: 0; font-family: var(--tekst);
}.kdp h1,.kdp h2{ font-family: var(--naslov); }.kdp ul{ list-style: none; }.kdp a{ text-decoration: none; }.kdp button,.kdp input{ font-family: var(--tekst); }.kdp img{ max-width: 100%; }.kdp .wrap{ width: min(1240px, 100% - 48px); margin-inline: auto; }.kdp .skip{
  position: absolute; left: -9999px;
  background: var(--accent-strong); color: #fff;
  padding: 12px 16px; border-radius: var(--r-kontrola); z-index: 100;
}.kdp .skip:focus{ left: 16px; top: 16px; }.kdp .vizualno-skriveno{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}.kdp .hero{
  background: var(--night);
  color: var(--paper);
  
  padding: 96px 0 64px;
  position: relative;
  overflow: hidden;
}.kdp .hero::after{
  content: ""; position: absolute; inset: auto -10% -60% 40%;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(167, 139, 250, .28), transparent 65%);
  pointer-events: none;
}.kdp .hero .wrap{ position: relative; z-index: 1; }.kdp .oznaka{
  font-size: 11px !important; line-height: 1.6 !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); margin-bottom: 16px;
}.kdp .hero h1{
  font-family: var(--naslov);
  font-size: clamp(34px, 5.6vw, 57.6px) !important;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: 24px;
  
  color: var(--paper);
}.kdp .hero h1 em{ font-style: normal; color: var(--accent); }.kdp .uvod{
  font-size: 17px !important; line-height: 1.6 !important;
  color: #c9c6d8;
  max-width: 56ch;
}.kdp .brojke{
  display: flex; flex-wrap: wrap; gap: 48px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}.kdp .brojke dt{
  font-family: var(--naslov);
  font-size: 32px; font-weight: 800; color: var(--paper);
}.kdp .brojke dd{
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: #8f8ba6; margin-top: 4px;
}.kdp .filtri{
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  align-items: center; justify-content: space-between;
  padding: 24px 0 20px;
  position: sticky; top: var(--kdp-nav, 0px); z-index: 20;
  
  background: var(--paper);
  box-shadow: 0 1px 0 var(--rule);
}.kdp .filtri-red{ display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }.kdp .cip{
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--muted); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}.kdp .cip:hover{ border-color: var(--accent); color: var(--ink); }.kdp .cip[aria-pressed="true"]{
  background: var(--night); border-color: var(--night);
  color: var(--paper); font-weight: 700;
}.kdp .cip .n{ opacity: .55; margin-left: 6px; font-variant-numeric: tabular-nums; }.kdp .tražilica{
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: var(--r-kontrola);
  padding: 8px 12px; background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}.kdp .tražilica:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .18);
}.kdp .tražilica svg{
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round;
}.kdp .tražilica input{
  font: inherit; font-size: 14px; border: 0; outline: 0;
  min-width: 220px; color: var(--ink); background: none;
}.kdp .mreza{
  list-style: none;
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  padding-bottom: 96px;
}.kdp .kartica{
  border: 1px solid var(--rule);
  border-radius: var(--r-kartica);
  overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}.kdp .kartica:hover,.kdp .kartica:focus-within{
  transform: translateY(-4px);
  border-color: var(--night);
  box-shadow: 0 18px 40px rgba(20, 22, 23, .16);
}.kdp .okvir{ background: var(--night-2); padding: 10px 10px 0; }.kdp .traka{ display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }.kdp .traka span{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--night-3); flex: none;
}.kdp .traka i{
  font-style: normal; font-size: 11px; color: #6f6b85;
  margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}.kdp .staklo{
  position: relative; overflow: hidden;
  aspect-ratio: 1440 / 900;
  background: var(--night-3);
  border-radius: 4px 4px 0 0;
}.kdp .staklo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: 50% 0%;
}.kdp .staklo img.duga{
  transition: object-position .9s cubic-bezier(.33, 0, .2, 1);
}.kdp .kartica.klizi:hover .staklo img.duga,.kdp .kartica.klizi:focus-within .staklo img.duga{
  object-position: 50% 100%;
  transition-duration: 4s;
}.kdp .lupa{
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(20, 22, 23, .72); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s, background .2s;
}.kdp .kartica:hover .lupa,.kdp .lupa:focus-visible{ opacity: 1; }.kdp .lupa:hover{ background: var(--accent-strong); }.kdp .lupa svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }.kdp .telo{ padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }.kdp .telo h2{
  font-family: var(--naslov); font-size: 22px !important; font-weight: 700;
  line-height: 1.25; color: var(--ink); margin: 0;
}.kdp .telo p{ font-size: 15px !important; line-height: 1.6 !important; color: var(--muted); flex: 1; margin: 0; }.kdp .podnozje{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
}.kdp .znak{
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent-strong);
  background: var(--tint); padding: 4px 10px; border-radius: 999px;
}.kdp .veza{
  font-size: 14px; font-weight: 700; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}.kdp .veza:hover{ color: var(--accent-strong); }.kdp .veza:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }.kdp .prazno{ text-align: center; color: var(--muted); padding: 64px 0 96px; font-size: 16px !important; line-height: 1.6 !important; }.kdp .lb{
  
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(20, 22, 23, .88);
  display: grid; place-items: center; padding: 24px;
}.kdp .lb[hidden]{ display: none !important; }.kdp .lb-okvir{
  width: min(1100px, 100%); max-height: 92vh;
  background: var(--night-2); border-radius: var(--r-kartica);
  box-shadow: var(--sjena); overflow: hidden;
  display: flex; flex-direction: column;
}.kdp .lb-traka{ display: flex; align-items: center; gap: 6px; padding: 12px 14px; }.kdp .lb-traka span{ width: 10px; height: 10px; border-radius: 50%; background: var(--night-3); }.kdp .lb-traka i{ font-style: normal; font-size: 12px; color: #6f6b85; margin-left: 10px; }.kdp .lb-scroll{ overflow-y: auto; background: #fff; flex: 1; }.kdp .lb-scroll img{ width: 100%; display: block; }.kdp .lb-okvir figcaption{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px; background: var(--night-2); color: #fff;
}.kdp .lb-okvir figcaption strong{ font-family: var(--naslov); font-size: 17px; display: block; }.kdp .lb-okvir figcaption span{ font-size: 14px; color: #9c98b3; }.kdp #lb-link{
  font-size: 14px; font-weight: 700; color: var(--night);
  background: var(--accent); padding: 10px 16px;
  border-radius: var(--r-kontrola); text-decoration: none; white-space: nowrap;
}.kdp #lb-link:hover{ background: var(--paper); }.kdp .lb-x{
  position: absolute; top: 20px; right: 24px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}.kdp .lb-x:hover{ background: var(--accent-strong); }.kdp .noga{
  border-top: 1px solid var(--rule);
  padding: 32px 0; color: var(--muted); font-size: 14px;
}.kdp .noga p{ font-size: 14px !important; line-height: 1.6 !important; }@media (max-width: 700px) {.kdp .hero{ padding: 64px 0 48px; }.kdp .brojke{ gap: 32px; }.kdp .filtri{ position: static; padding-top: 24px; }.kdp .tražilica{ width: 100%; }.kdp .tražilica input{ min-width: 0; width: 100%; }.kdp .mreza{ grid-template-columns: 1fr; gap: 24px; }.kdp .lb{ padding: 0; }.kdp .lb-okvir{ max-height: 100vh; border-radius: 0; }.kdp .lb-okvir figcaption{ flex-direction: column; align-items: flex-start; }
}@media (prefers-reduced-motion: reduce) {.kdp *,.kdp *::before,.kdp *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }.kdp .staklo img.duga{ transition: none; }.kdp .kartica.klizi:hover .staklo img.duga,.kdp .kartica.klizi:focus-within .staklo img.duga{ object-position: 50% 0%; }
}