/* LK-R11-ARTICLE-NAV-REACTION-LOCAL
   Scope: serial chapter navigation + the inspiring reaction label only.
   Existing layout, dynamic links, buttons, counts and translations remain intact.
*/
.serial-chapter-navigation > .serial-nav-prev > a,
.serial-chapter-navigation > .serial-nav-center,
.serial-chapter-navigation > .serial-nav-next > a {
  position: relative;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.8,.25,1),
              box-shadow .28s ease,
              background-color .28s ease,
              color .28s ease;
}
.serial-chapter-navigation > .serial-nav-prev > a::after,
.serial-chapter-navigation > .serial-nav-center::after,
.serial-chapter-navigation > .serial-nav-next > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(197,142,83,.14) 51%, transparent 78%);
  opacity: 0;
  transition: opacity .28s ease;
}
.serial-chapter-navigation > .serial-nav-prev > a > span,
.serial-chapter-navigation > .serial-nav-prev > a > strong,
.serial-chapter-navigation > .serial-nav-center > span,
.serial-chapter-navigation > .serial-nav-center > strong,
.serial-chapter-navigation > .serial-nav-next > a > span,
.serial-chapter-navigation > .serial-nav-next > a > strong {
  position: relative;
  z-index: 1;
  transition: color .28s ease;
}
@media (hover: hover) and (pointer: fine) {
  .serial-chapter-navigation > .serial-nav-prev > a:hover,
  .serial-chapter-navigation > .serial-nav-center:hover,
  .serial-chapter-navigation > .serial-nav-next > a:hover {
    z-index: 2;
    transform: translateY(-3px);
    background-color: #fff7eb;
    box-shadow: inset 0 0 0 1px rgba(169,104,49,.33),
                0 10px 25px rgba(81,47,29,.14);
  }
  .serial-chapter-navigation > .serial-nav-prev > a:hover::after,
  .serial-chapter-navigation > .serial-nav-center:hover::after,
  .serial-chapter-navigation > .serial-nav-next > a:hover::after {
    opacity: 1;
  }
  .serial-chapter-navigation > .serial-nav-prev > a:hover > strong,
  .serial-chapter-navigation > .serial-nav-center:hover > strong,
  .serial-chapter-navigation > .serial-nav-next > a:hover > strong {
    color: #8a4827;
  }
}
.serial-chapter-navigation > .serial-nav-prev > a:focus-visible,
.serial-chapter-navigation > .serial-nav-center:focus-visible,
.serial-chapter-navigation > .serial-nav-next > a:focus-visible {
  outline: 3px solid #ac7040;
  outline-offset: -4px;
  z-index: 2;
}
/* Disabled previous/next are div.is-disabled, never animated as links. */

/* The Indonesian label is one word; keep the last letter on the same line.
   Other, longer translated reaction labels keep their original wrapping. */
.apresiasi-artikel .daftar-reaksi .tombol-reaksi[data-jenis="menginspirasi"] .label-reaksi {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  letter-spacing: 0 !important;
  font-size: clamp(.54rem, .78vw, .68rem) !important;
  line-height: 1.2;
  text-align: center;
}
html[data-theme="malam"] .serial-chapter-navigation > .serial-nav-prev > a:hover,
html[data-theme="malam"] .serial-chapter-navigation > .serial-nav-center:hover,
html[data-theme="malam"] .serial-chapter-navigation > .serial-nav-next > a:hover {
  background-color: #432d25;
  box-shadow: inset 0 0 0 1px rgba(237,183,121,.46),
              0 10px 25px rgba(0,0,0,.26);
}
html[data-theme="malam"] .serial-chapter-navigation > .serial-nav-prev > a:hover > strong,
html[data-theme="malam"] .serial-chapter-navigation > .serial-nav-center:hover > strong,
html[data-theme="malam"] .serial-chapter-navigation > .serial-nav-next > a:hover > strong {
  color: #ffd6a1;
}
@media (prefers-reduced-motion: reduce) {
  .serial-chapter-navigation > .serial-nav-prev > a,
  .serial-chapter-navigation > .serial-nav-center,
  .serial-chapter-navigation > .serial-nav-next > a,
  .serial-chapter-navigation > .serial-nav-prev > a::after,
  .serial-chapter-navigation > .serial-nav-center::after,
  .serial-chapter-navigation > .serial-nav-next > a::after,
  .serial-chapter-navigation > .serial-nav-item > a > strong,
  .serial-chapter-navigation > .serial-nav-center > strong {
    transition: none !important;
    animation: none !important;
  }
  .serial-chapter-navigation > .serial-nav-prev > a:hover,
  .serial-chapter-navigation > .serial-nav-center:hover,
  .serial-chapter-navigation > .serial-nav-next > a:hover {
    transform: none !important;
  }
}