/* ePuškice — /sistematski/ (Sistematski pregled prodavnice)
   Samo komponente kojih nema u site.css. Zavisi od tokens.css + site.css. */

/* hero: tekst gore, video desno, činjenice + CTA ispod (na mobilnom video između) */
.sp-hero .hero-grid{grid-template-columns:1fr 1fr;grid-template-areas:"top video" "bottom video";column-gap:56px;row-gap:0;align-items:start}
.sp-hero .copy-top{grid-area:top}
.sp-hero .copy-bottom{grid-area:bottom}
.sp-hero .sp-video{grid-area:video;align-self:center}
.sp-hero h1{font-size:clamp(36px,5.2vw,58px)}
.sp-hero .sub{margin-bottom:28px}
.sp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:470px;margin-bottom:28px}
.sp-fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center}
.sp-fact b{display:block;font:800 30px/1.05 var(--font-head);color:var(--hl)}
.sp-fact span{font-size:13px;color:var(--tx-mute)}

.sp-video{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:radial-gradient(500px 260px at 70% 0%,rgba(47,107,255,.35),transparent),linear-gradient(160deg,#1b2b4d,#0f1c3c);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--tx-soft);font-size:14.5px;font-weight:600}
.sp-video .play{width:74px;height:74px;border-radius:50%;background:var(--blue);display:grid;place-items:center;box-shadow:var(--glow)}
.sp-video .play svg{width:28px;height:28px;margin-left:3px}
.sp-video .dur{position:absolute;top:14px;left:14px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hl);background:rgba(255,226,122,.12);border:1px solid rgba(255,226,122,.3);border-radius:999px;padding:5px 11px}

/* demonstracija: 3 koraka sa „screenshotovima" tabele (svetli papir = izgleda kao Google tabela) */
.sp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sp-step{display:flex;flex-direction:column}
.sp-step h3{font-size:18px;line-height:1.3;margin-bottom:14px;min-height:2.6em}
.sp-step h3 .n{color:var(--hl)}
.sp-shot{flex:1;background:#fff;color:#1f2937;border-radius:14px;padding:16px;font-size:14px;min-height:190px;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.6)}
.sp-shot b,.sp-shot strong{color:#111827}
.sp-shot .t{font:800 15px var(--font-head);margin-bottom:8px;color:#111827}
.sp-shot ol{margin:0;padding-left:18px}
.sp-shot ol li{margin:5px 0}
.sp-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #E5E7EB}
.sp-row:last-child{border-bottom:0}
.sp-chip{font-weight:700;font-size:12.5px;padding:4px 9px;border-radius:6px;white-space:nowrap}
.sp-chip.ok{background:#DCFCE7;color:#166534}.sp-chip.pt{background:#FEF3C7;color:#92400E}.sp-chip.no{background:#FEE2E2;color:#991B1B}
.sp-pr{font-size:12px;font-weight:700;color:#B91C1C}
.sp-nalaz{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.sp-nalaz b{font:800 28px var(--font-head);background:#FEF3C7;color:#92400E;border-radius:8px;padding:4px 10px}
.sp-shot .m{color:#4B5563;font-size:14px}
.sp-example{font-size:12px;color:#6B7280;margin-top:10px}

/* probaj jednu proveru */
.sp-narrow{max-width:720px;margin:0 auto}
.sp-tabs{display:flex;gap:10px;margin:26px 0 14px}
.sp-tabs button{flex:1;font:700 15px var(--font);height:48px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--tx-soft);cursor:pointer;transition:background .15s ease,border-color .15s ease}
.sp-tabs button:hover{background:rgba(255,255,255,.08)}
.sp-tabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--glow)}
.sp-check{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:26px}
.sp-check h3{font-size:21px;margin-bottom:12px}
.sp-check p{color:var(--tx-soft);font-size:16px}
.sp-check .foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--tx-mute)}

/* šta proveravaš: delovi (accordion) */
details.sp-part{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
details.sp-part[open]{border-color:var(--line-2)}
details.sp-part summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;font:700 17px var(--font-head);color:#fff}
details.sp-part summary::-webkit-details-marker{display:none}
details.sp-part summary .n{font:800 13px var(--font);color:var(--blue-bright);background:var(--blue-tint);border:1px solid rgba(120,160,255,.3);border-radius:999px;padding:3px 11px;white-space:nowrap}
details.sp-part .in{padding:0 20px 20px}
details.sp-part .item{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:16px}
details.sp-part .item b{display:block;margin-bottom:5px}
details.sp-part .item p{font-size:15px;color:var(--tx-soft)}
.sp-note{font-size:15px;color:var(--tx-mute);margin-top:16px;text-align:center}

/* ko je sastavio */
.sp-authors .author{align-items:center}
.sp-authors .author p{margin:0}
.sp-authors .author .role{margin:3px 0 0}

/* cena: bez gornjeg sidra, lista sa kvačicama je u site.css (.price-list) */
.sp-price .price-body{padding-top:30px}
.sp-dfy{text-align:center;margin-top:26px;font-size:16px;color:var(--tx-soft)}
.sp-dfy a{color:var(--blue-bright);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sp-dfy a:hover{color:#fff}

@media (max-width:900px){
  .sp-hero .hero-grid{grid-template-columns:1fr;grid-template-areas:"top" "video" "bottom";row-gap:28px}
  .sp-steps{grid-template-columns:1fr}
  .sp-step h3{min-height:0}
  .sp-br{display:none}
  .sp-shot{min-height:0}
}
@media (max-width:720px){
  .sp-hero .hero-cta .btn{width:100%}
  .sp-tabs{gap:8px}
  .sp-tabs button{font-size:14px}
  .stickybar .btn{white-space:nowrap}
  .sp-long{display:none}
  .sticky-txt .st-p{white-space:nowrap}
}