/* SinarIlmu PDF Desain Ulang — tampilan berwarna, ramah kelas (terinspirasi proyek Instructables for Teachers) */
.spdd-root{--o:#f28c00;--y:#ffc400;--t:#00a99d;--b:#3b82f6;--p:#e6398a;--g:#22b573;--v:#7c4dff;--ink:#1b2a49;--mut:#5b6785;--line:#e6e9f2;--card:#fff;
  max-width:1100px;margin:0 auto;padding:10px 12px 44px;color:var(--ink);box-sizing:border-box;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5}
.spdd-root *{box-sizing:border-box}
.spdd-root button,.spdd-root input{font-family:inherit;font-size:inherit}
.spdd-root [hidden]{display:none!important}

/* hero */
.spdd-hero{position:relative;overflow:hidden;border-radius:22px;padding:34px 26px 24px;background:linear-gradient(135deg,#fff7e8 0%,#eefaf8 55%,#f3efff 100%);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.spdd-stripe{position:absolute;left:0;right:0;top:0;height:10px;display:flex}
.spdd-stripe i{flex:1}
.spdd-kicker{margin:0 0 6px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--o)}
.spdd-hero h2{margin:0 0 8px;font:800 clamp(1.5rem,4.6vw,2.3rem)/1.15 Georgia,"Times New Roman",serif;color:var(--ink)}
.spdd-lead{margin:0 0 18px;max-width:60ch;font-size:1rem;color:var(--mut)}
.spdd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.spdd-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:2px solid var(--c);font-size:.86rem;font-weight:600}
.spdd-steps b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-weight:800}

/* katalog */
.spdd-search{margin:18px 0 0}
.spdd-q{width:100%;min-height:46px;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:10px 18px;color:var(--ink);outline:none}
.spdd-q:focus{border-color:var(--b);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.spdd-list{display:grid;grid-template-columns:repeat(var(--spdd-cols,3),minmax(0,1fr));gap:16px;margin-top:20px}
.spdd-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 16px 16px;background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--c);overflow:hidden}
.spdd-stripe2{position:absolute;left:0;right:0;top:0;height:8px;display:flex}
.spdd-stripe2 i{flex:1}
.spdd-ico{align-self:flex-start;max-width:100%;padding:3px 10px;border-radius:999px;background:var(--c);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spdd-card h4{margin:2px 0 0;font:700 1.05rem/1.3 Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.spdd-by{margin:0;font:italic .84rem Georgia,"Times New Roman",serif;color:var(--c)}
.spdd-meta{margin:0;font-size:.76rem;color:var(--mut)}
.spdd-ex{margin:4px 0 0;font-size:.86rem;color:#34405f}
.spdd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.spdd-chip{padding:2px 10px;border-radius:999px;border:1.5px solid var(--c);background:#fff;font-size:.72rem;font-weight:700}
.spdd-acts{display:flex;gap:10px;margin-top:auto;padding-top:10px}
.spdd-acts .spdd-btn{flex:1;padding:9px 12px}
.spdd-msg{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:#fff7e8;border:1px solid #f5d79b;font-size:.8rem}
.spdd-empty{grid-column:1/-1;margin:0;padding:22px;text-align:center;border:2px dashed var(--line);border-radius:16px;color:var(--mut)}
.spdd-more-wrap{display:flex;justify-content:center;margin-top:20px}

/* tombol */
.spdd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border:2px solid var(--ink);border-radius:999px;background:var(--o);color:#fff;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,opacity .12s}
.spdd-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.spdd-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.spdd-btn:focus-visible{outline:3px solid var(--b);outline-offset:3px}
.spdd-btn:disabled{opacity:.6;cursor:progress;box-shadow:none}
.spdd-ghost{background:#fff;color:var(--ink)}
.spdd-note{margin:18px 0 0;font-size:.78rem;color:var(--mut)}
.spdd-err{padding:14px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:.9rem}

@media (max-width:900px){.spdd-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .spdd-hero{padding:28px 16px 18px;box-shadow:4px 4px 0 var(--ink)}
  .spdd-steps{grid-template-columns:1fr}
  .spdd-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.spdd-btn{transition:none}}

/* foto sampul proyek di kartu katalog */
.spdd-thumb{margin:6px 0 4px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#eef2f7;border:2px solid var(--ink)}
.spdd-thumb img{display:block;width:100%;height:100%;object-fit:cover}