/* PulseHeart — tombol Suka (port dari React Bits). Warna mengikuti tema situs. */
.pulse-heart {
  --ph-size: 24px;
  --ph-corner: 32px;
  --ph-pill: #eaf0fa;
  --ph-idle: #7b8aa3;
  --ph-liked: #ff4d6d;
  --ph-text: #0b2545;
  --ph-roll: 350ms;
  --ph-stroke: 1.5px;
  --ph-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ph-corner);
  background: none;
  color: var(--ph-text);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  transition: transform 160ms var(--ph-ease-out);
}
:root[data-theme="dark"] .pulse-heart,
.cswap-card .pulse-heart,
.ccar-card .pulse-heart {
  --ph-pill: #232326;
  --ph-idle: #8b8b93;
  --ph-text: #f5f5f5;
}
.pulse-heart[data-pressed] { transform: scale(0.97); }
.pulse-heart:focus-visible { outline: 2px solid color-mix(in srgb, var(--ph-liked) 60%, transparent); outline-offset: 3px; }
.pulse-heart:disabled { opacity: 0.55; cursor: default; }

.pulse-heart__pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ph-size) * 0.25);
  padding: calc(var(--ph-size) * 0.3);
  padding-inline-end: calc(var(--ph-size) * 0.4);
  border-radius: var(--ph-corner);
  background: var(--ph-pill);
  transform-origin: center;
}

.pulse-heart__heart {
  display: block;
  width: var(--ph-size);
  height: var(--ph-size);
  color: var(--ph-idle);
  transform-origin: center;
  transition: color 160ms ease;
}
.pulse-heart__heart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ph-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pulse-heart[data-liked="true"] .pulse-heart__heart svg { fill: currentColor; }
.pulse-heart[data-liked="true"] .pulse-heart__heart { color: var(--ph-liked); }
.pulse-heart[data-running] .pulse-heart__heart,
.pulse-heart[data-instant] .pulse-heart__heart { transition: none; }

@media (hover: hover) and (pointer: fine) {
  .pulse-heart:not([data-liked="true"]):not(:disabled):hover .pulse-heart__heart {
    color: color-mix(in srgb, var(--ph-idle) 45%, var(--ph-liked));
  }
}

/* Angka dibuat tidak lebih kecil dari 12px supaya tetap terbaca di kartu kecil */
.pulse-heart__count {
  display: inline-flex;
  font-family: var(--font-body, inherit);
  font-size: max(12px, calc(var(--ph-size) * 0.5));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.1px;
  font-variant-numeric: tabular-nums;
  color: var(--ph-text);
}
.pulse-heart__count > span { display: block; height: 1em; }
.pulse-heart__slot { position: relative; overflow: hidden; }
.pulse-heart__roll { display: flex; flex-direction: column; transition: transform var(--ph-roll) var(--ph-ease-out); }
.pulse-heart__roll > span { display: block; height: 1em; line-height: 1; }

.pulse-heart__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (pointer: coarse) { .pulse-heart { min-width: 44px; min-height: 44px; } }
@media (prefers-contrast: more) {
  .pulse-heart__pill { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph-text) 25%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-heart { transition: none; }
  .pulse-heart__heart { transition: color 200ms ease; }
  .pulse-heart__roll { transition: none; }
}

/* Konteks pemakaian */
.sosmed-meta .pulse-heart { margin: -4px -4px -4px 0; }
.sosmed-like-wrap .pulse-heart { margin-left: -2px; }