/* Ikuti + Simpan creator (profil publik) dan daftar "Tersimpan" di akun pembeli — lib/creatorsocial.php, assets/creator-social.js */
.cs-box, .cs-grid { --cs: var(--rose, #c2185b); --cs2: var(--rose2, #a3124c); }
.cs-stats { display: flex; justify-content: center; gap: 0; margin: 16px 0 14px; border: 1.5px solid var(--line2, #e5e7ee); border-radius: 14px; background: #fff; overflow: hidden; }
.cs-stat { flex: 1 1 0; padding: 10px 6px; text-align: center; }
.cs-stat + .cs-stat { border-left: 1.5px solid var(--line2, #e5e7ee); }
.cs-stat b { display: block; font-size: 20px; line-height: 1.15; font-weight: 800; color: var(--ink, #1f2328); font-variant-numeric: tabular-nums; }
.cs-stat span { display: block; margin-top: 2px; font-size: 12px; color: var(--dim, #6b7280); letter-spacing: .02em; }
.cs-stat b.cs-bump { animation: csBump .45s ease; }
.cs-actions { display: flex; gap: 8px; align-items: stretch; }
.cs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--cs); background: #fff; color: var(--cs);
    font: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
.cs-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cs-btn { text-decoration: none; }
.cs-btn:active { transform: scale(.95); }
.cs-btn:focus-visible { outline: 3px solid rgba(194, 24, 91, .35); outline-offset: 2px; }
.cs-btn[disabled] { opacity: .7; cursor: default; }
.cs-follow { flex: 1 1 auto; background: var(--cs); color: #fff; box-shadow: 0 6px 16px rgba(194, 24, 91, .28); }
.cs-follow:hover { background: var(--cs2); border-color: var(--cs2); }
.cs-follow .cs-on, .cs-follow .cs-off-hover { display: none; }
.cs-follow.is-on { background: #fff; color: var(--cs); box-shadow: none; }
.cs-follow.is-on .cs-off { display: none; }
.cs-follow.is-on .cs-on { display: inline-flex; align-items: center; gap: 8px; }
.cs-follow.is-on:not(.cs-nohover):hover { background: #fff1f4; }
.cs-follow.is-on:not(.cs-nohover):hover .cs-on { display: none; }
.cs-follow.is-on:not(.cs-nohover):hover .cs-off-hover { display: inline-flex; align-items: center; gap: 8px; }
.cs-off { display: inline-flex; align-items: center; gap: 8px; }
.cs-save { flex: 0 0 44px; width: 44px; padding: 0; }
.cs-save:hover { background: #fff1f4; }
.cs-save.is-on { background: var(--cs); color: #fff; }
.cs-save.is-on svg { fill: currentColor; animation: csPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.cs-follow.is-on .cs-on svg { animation: csPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.cs-self { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--soft, #f4f6fa); color: var(--muted, #5a6068); font-size: 13.5px; text-align: center; }
.cs-note { margin-top: 8px; min-height: 18px; font-size: 12.5px; color: var(--dim, #6b7280); text-align: center; }
/* percikan hati/bintang saat mengikuti / menyimpan */
.cs-spark { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none; z-index: 5; color: var(--cs); animation: csSpark .7s ease-out forwards; }
.cs-spark svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.cs-toast { position: fixed; left: 50%; bottom: 26px; z-index: 6000; transform: translate(-50%, 20px); max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 12px; background: #2a2233; color: #fff; font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.cs-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── daftar Tersimpan (akun pembeli) ── */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cs-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1.5px solid var(--border, #e5e7ee); border-radius: 16px; background: #fff; transition: box-shadow .2s, transform .2s, opacity .3s; }
.cs-card:hover { box-shadow: 0 10px 26px rgba(40, 20, 60, .1); transform: translateY(-2px); }
.cs-card.cs-gone { opacity: 0; transform: scale(.94); }
.cs-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cs-av { flex: none; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; background: var(--cs); overflow: hidden; }
.cs-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card-name { min-width: 0; }
.cs-card-name a { display: block; font-weight: 800; font-size: 16px; color: var(--ink, #1f2328); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-card-name a:hover { color: var(--cs); }
.cs-card-name small { display: block; margin-top: 2px; color: var(--dim, #6b7280); font-size: 12.5px; }
.cs-bio { margin: 0; flex: 1 1 auto; color: var(--muted, #5a6068); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-bio.cs-none { color: var(--dim, #9ca3af); font-style: italic; }
.cs-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cs-card-foot .cs-btn { height: 38px; font-size: 13.5px; padding: 0 14px; }
.cs-card-foot .cs-view { flex: 1 1 auto; }
.cs-unsave { flex: 0 0 38px; width: 38px; padding: 0; }
.cs-unsave svg { fill: currentColor; }
.cs-unsave:hover { background: #fff1f4; }

@keyframes csPop { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes csBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--cs); } 100% { transform: scale(1); } }
@keyframes csSpark { 0% { opacity: 1; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .cs-btn, .cs-card { transition: none; } .cs-save.is-on svg, .cs-follow.is-on .cs-on svg, .cs-stat b.cs-bump, .cs-spark { animation: none; } .cs-spark { display: none; } }