/* =========================================================
   LANGKAH KUDA — PREMIUM COLLAPSIBLE DISCUSSION 3C-3A
   ========================================================= */

.lk-comment-premium {
  position: relative;
  max-width: 820px;
  margin: clamp(56px, 8vw, 96px) auto 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 94% 2%,
      color-mix(
        in srgb,
        var(--accent) 13%,
        transparent
      ),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--surface) 96%,
        var(--accent) 4%
      ),
      var(--surface)
    );
  box-shadow:
    0 26px 70px
    color-mix(
      in srgb,
      var(--ink) 12%,
      transparent
    ),
    inset 0 1px 0
    color-mix(
      in srgb,
      #fff 72%,
      transparent
    );
}

.lk-comment-premium::before {
  position: absolute;
  inset: 0 auto auto 34px;
  width: 74px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--accent);
  content: "";
}

.lk-comment-premium-head {
  align-items: center;
  margin: 0;
  padding: clamp(24px, 4vw, 36px);
  border:
    1px solid
    color-mix(
      in srgb,
      var(--ink) 10%,
      transparent
    );
  border-radius: 30px;
}

.lk-comment-heading-copy {
  min-width: 0;
}

.lk-comment-heading-copy h2 {
  margin: 7px 0 8px;
  font-size: clamp(27px, 4vw, 42px);
  line-height: 1.02;
}

.lk-comment-heading-copy p {
  max-width: 49ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.58;
}

.lk-comment-head-actions {
  display: grid;
  justify-items: end;
  gap: 11px;
  min-width: min(100%, 260px);
}

.lk-comment-panel-toggle {
  display: grid;
  grid-template-columns:
    37px
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 12px 15px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--ink) 14%,
      transparent
    );
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      var(--ink),
      color-mix(
        in srgb,
        var(--ink) 86%,
        var(--accent)
      )
    );
  color: var(--bg);
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 11px 26px
    color-mix(
      in srgb,
      var(--ink) 18%,
      transparent
    );
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.lk-comment-panel-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow:
    0 16px 34px
    color-mix(
      in srgb,
      var(--ink) 24%,
      transparent
    );
}

.lk-comment-panel-toggle:focus-visible,
.lk-replies-toggle:focus-visible,
.lk-comment-close-bottom:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--accent) 35%,
      transparent
    );
  outline-offset: 3px;
}

.lk-comment-toggle-icon {
  position: relative;
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border:
    1px solid
    color-mix(
      in srgb,
      #fff 20%,
      transparent
    );
  border-radius: 50%;
  background:
    color-mix(
      in srgb,
      #fff 9%,
      transparent
    );
}

.lk-comment-toggle-icon::before,
.lk-comment-toggle-icon::after,
.lk-comment-toggle-icon span {
  position: absolute;
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.lk-comment-toggle-icon::before {
  top: 11px;
  width: 15px;
}

.lk-comment-toggle-icon span {
  top: 17px;
  width: 12px;
}

.lk-comment-toggle-icon::after {
  top: 23px;
  width: 8px;
}

.lk-comment-toggle-copy {
  min-width: 0;
}

.lk-comment-toggle-copy strong,
.lk-comment-toggle-copy small {
  display: block;
}

.lk-comment-toggle-copy strong {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lk-comment-toggle-copy small {
  margin-top: 3px;
  opacity: .64;
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.lk-comment-toggle-count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  margin-right: 5px;
  padding: 0 6px;
  place-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-family: var(--font-mono);
  font-size: 9px;
}

.lk-comment-toggle-chevron {
  color: var(--accent);
  font-size: 18px;
  transition: transform .25s ease;
}

.lk-comment-panel-toggle[aria-expanded="true"]
.lk-comment-toggle-chevron {
  transform: rotate(180deg);
}

.lk-comment-panel-body {
  overflow: hidden;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--ink) 10%,
      transparent
    );
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background:
    color-mix(
      in srgb,
      var(--bg) 58%,
      var(--surface)
    );
  will-change:
    height,
    opacity;
}

.lk-comment-panel-body[hidden] {
  display: none;
}

.lk-comment-panel-inner {
  padding: clamp(20px, 4vw, 34px);
}

.lk-comment-panel-inner > .komentar {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--ink) 10%,
      transparent
    );
  border-radius: 22px;
  background:
    color-mix(
      in srgb,
      var(--surface) 96%,
      var(--accent) 4%
    );
  box-shadow:
    0 9px 25px
    color-mix(
      in srgb,
      var(--ink) 6%,
      transparent
    );
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.lk-comment-panel-inner > .komentar:hover {
  transform: translateY(-1px);
  border-color:
    color-mix(
      in srgb,
      var(--accent) 33%,
      var(--line)
    );
  box-shadow:
    0 15px 32px
    color-mix(
      in srgb,
      var(--ink) 9%,
      transparent
    );
}

.avatar-komentar {
  overflow: hidden;
  border:
    2px solid
    color-mix(
      in srgb,
      var(--accent) 44%,
      var(--ink)
    );
  background:
    linear-gradient(
      145deg,
      var(--ink),
      color-mix(
        in srgb,
        var(--ink) 82%,
        var(--accent)
      )
    );
  box-shadow:
    0 7px 16px
    color-mix(
      in srgb,
      var(--ink) 15%,
      transparent
    );
}

.avatar-komentar img,
.avatar-komentar > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
}

.avatar-komentar img {
  object-fit: cover;
  object-position: center;
}

.lk-replies-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 14px 0 0 54px;
  padding: 7px 11px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 27%,
      var(--line)
    );
  border-radius: 999px;
  background:
    color-mix(
      in srgb,
      var(--accent) 7%,
      var(--surface)
    );
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.lk-replies-toggle:hover {
  transform: translateY(-1px);
  background: var(--accent);
  color: var(--accent-ink, #fff);
}

.lk-replies-toggle::before {
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  transform:
    translateY(-2px)
    rotate(45deg);
  transition: transform .2s ease;
}

.lk-replies-toggle[aria-expanded="true"]::before {
  transform:
    translateY(2px)
    rotate(225deg);
}

.daftar-balasan[data-comment-replies] {
  overflow: hidden;
  will-change:
    height,
    opacity;
}

.daftar-balasan[data-comment-replies][hidden] {
  display: none;
}

.komentar-balasan {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--ink) 8%,
      transparent
    );
  border-radius: 17px;
  box-shadow: none;
}

.lk-comment-panel-footer {
  display: flex;
  justify-content: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--ink) 10%,
      transparent
    );
}

.lk-comment-close-bottom {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.lk-comment-close-bottom:hover {
  background: var(--ink);
  color: var(--bg);
}

.lk-comment-premium .form-komentar {
  border-radius: 22px;
  box-shadow:
    0 12px 30px
    color-mix(
      in srgb,
      var(--ink) 9%,
      transparent
    );
}

.lk-comment-premium .komentar-kosong,
.lk-comment-premium .ajakan-masuk {
  border-radius: 20px;
  background: var(--surface);
}

@media (max-width: 760px) {
  .lk-comment-premium-head {
    align-items: stretch;
    flex-direction: column;
  }

  .lk-comment-head-actions {
    justify-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .lk-comment-head-actions
  .tautan-notifikasi {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .lk-comment-premium {
    border-radius: 23px;
  }

  .lk-comment-premium::before {
    left: 22px;
  }

  .lk-comment-premium-head {
    padding: 23px 17px;
    border-radius: 23px;
  }

  .lk-comment-heading-copy h2 {
    font-size: 29px;
  }

  .lk-comment-heading-copy p {
    font-size: 12px;
  }

  .lk-comment-panel-toggle {
    min-height: 70px;
    border-radius: 16px;
  }

  .lk-comment-toggle-copy strong {
    font-size: 14px;
  }

  .lk-comment-panel-body {
    border-radius: 0 0 23px 23px;
  }

  .lk-comment-panel-inner {
    padding: 16px 12px 21px;
  }

  .lk-comment-panel-inner > .komentar {
    padding: 17px 14px;
    border-radius: 18px;
  }

  .lk-replies-toggle {
    margin-left: 0;
  }

  .daftar-balasan {
    margin-left: 5px;
    padding-left: 9px;
  }
}

html[data-theme="malam"]
.lk-comment-premium {
  box-shadow:
    0 27px 72px
    rgba(0, 0, 0, .34),
    inset 0 1px 0
    rgba(255, 255, 255, .04);
}

html[data-theme="malam"]
.lk-comment-panel-toggle {
  background:
    linear-gradient(
      135deg,
      #2b1a16,
      #4d1728
    );
}

html[data-theme="malam"]
.lk-comment-panel-body {
  background:
    color-mix(
      in srgb,
      var(--bg) 88%,
      #2b1a16
    );
}

@media (prefers-reduced-motion: reduce) {
  .lk-comment-premium *,
  .lk-comment-premium *::before,
  .lk-comment-premium *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}