/* G5 — gaya ArtCraft: grid hitam bersudut tajam, garis berkongsi; hover: garis warna solid menyapu dari kiri di atas
   kad + isi (tangkapan app sebenar) membesar dan terangkat. Kad tidak dipaut (tiada klik). Setiap baris sama tinggi. */
.sp-page p.sl-lede{margin:16px 0 0;max-width:62ch;color:var(--copy)}
.slm-grid{display:flex;flex-direction:column;margin-top:44px;background:#0c0c0d;box-shadow:0 0 0 1px #262628}
.slm-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch}
.slm-row+.slm-row{border-top:1px solid #262628}
.slm-card{position:relative;display:flex;flex-direction:column;background:#0c0c0d;color:#f2f2f2;border-radius:0;cursor:default}
.slm-card+.slm-card{border-inline-start:1px solid #262628}
.slm-card.s2{grid-column:span 2}.slm-card.s3{grid-column:span 3}.slm-card.s4{grid-column:span 4}.slm-card.s6{grid-column:span 6}
.slm-line{position:absolute;inset-inline:0;top:-1px;z-index:3;height:2px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html[dir=rtl] .slm-line{transform-origin:right}
.slm-card:hover .slm-line{transform:scaleX(1)}
.c-emerald{--c:#10b981}.c-amber{--c:#f59e0b}.c-blue{--c:#3b82f6}.c-green{--c:#22c55e}.c-yellow{--c:#eab308}.c-orange{--c:#f97316}
.c-violet{--c:#8b5cf6}.c-teal{--c:#14b8a6}.c-lime{--c:#84cc16}.c-pink{--c:#ec4899}.c-indigo{--c:#6366f1}.c-red{--c:#ef4444}.c-cyan{--c:#06b6d4}
.slm-art{position:relative;margin:14px 14px 0;overflow:hidden}
.slm-art img{display:block;width:100%;height:auto;transform-origin:center top;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1)}
.slm-card:hover .slm-art img{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px -14px rgba(0,0,0,.9)}
.slm-art.cut{height:var(--h)}
.slm-art.cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(rgba(12,12,13,0),#0c0c0d 88%);pointer-events:none}
.slm-txt{padding:18px 22px 24px;margin-top:auto}
.sp-page .slm-txt h3{margin:0 0 6px;font:600 17px/1.3 var(--font-display);color:#f5f5f7;transition:color .3s}
.sp-page .slm-txt p{margin:0;font-size:14px;line-height:1.55;color:#8e8e93;transition:color .3s}
.slm-card:hover .slm-txt p{color:#c7c7cc}
@media(max-width:760px){.slm-row{grid-template-columns:minmax(0,1fr)}.slm-card.s2,.slm-card.s3,.slm-card.s4,.slm-card.s6{grid-column:auto}.slm-card+.slm-card{border-inline-start:0;border-top:1px solid #262628}.slm-art.cut{height:auto}.slm-art.cut::after{display:none}}
/* kad teks bawah: 90 kegunaan Space mengalir dengan titik pemisah */
.slm-uses .slm-txt{padding:34px 34px 40px}
.sp-page .slm-uses .slm-txt h3{margin:0 0 18px;font:500 clamp(22px,2vw,28px)/1.25 var(--font-display);letter-spacing:-.02em;color:#f5f5f7}
.sp-page .slm-uses p.slm-uselist{margin:0;max-width:none;font-size:17px;line-height:1.85;color:#8e8e93}
.slm-uselist span{display:inline-block;white-space:nowrap;transition:color .25s}
.slm-uselist span:hover{color:#f5f5f7}
.slm-uselist span:not(:last-child)::after{content:"·";margin-inline:12px;color:#48484a}
.c-rainbow .slm-line{background:linear-gradient(90deg,#10b981,#3b82f6,#8b5cf6,#ec4899,#f97316,#eab308)}
@media(max-width:760px){.slm-uses .slm-txt{padding:24px 20px 28px}.sp-page .slm-uses p.slm-uselist{font-size:15.5px;line-height:1.8}}
/* kad kegunaan: senarai tenang bergaya footer — lajur ikut kategori, tiada gerakan */
.slm-uses .slm-txt{padding:34px 34px 4px}
.slm-uses .slm-txt{padding:34px 34px 40px}
.slc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 32px;padding:22px 34px 40px}
.q0{--q:#3b82f6}.q1{--q:#10b981}.q2{--q:#f59e0b}.q3{--q:#8b5cf6}.q4{--q:#f97316}.q5{--q:#ec4899}.q6{--q:#14b8a6}.q7{--q:#eab308}
.sp-page .slc h4{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 13px/1.3 var(--font);color:#f5f5f7}
.slc h4 i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--q)}
.slc ul{list-style:none;margin:0;padding:0}
.slc li{padding:3px 0;font-size:13px;line-height:1.5;color:#8e8e93;transition:color .2s}
.slc li:hover{color:#e5e5ea}
@media(max-width:900px){.slc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.slc{grid-template-columns:minmax(0,1fr);gap:26px;padding:16px 20px 30px}}