/* Page-head inline <style> captured verbatim from live
   /blog/cara-implementasi-devops-strategi-tools.
   Blog-detail-specific rules only (table-of-contents, blog FAQ accordion,
   share popup/copy message, blockquote quotes, floating share + left banner,
   related-post hover, partnership band background, alp-blog-ad blend).
   Loaded via <link rel="stylesheet" precedence="page"> from app/blog/[slug]/page.tsx. */

#blog_share_popup.hidden {
  display: none;
}

.link-copied-message-blog {
    display: none;
}

.link-copied-message-blog.show {
    display: block;
}

  .blog-toc-wrapper::-webkit-scrollbar {
    display: none;
  }

  .blog-toc-wrapper {
    overflow-y: scroll;
    scrollbar-width: none;
  }

  .blog-toc {
    font-size: 16px;
    background-color: #fff;
  }
  .blog-toc.show-mobile {
    display: block;
  }
  .blog-toc .blog-toc-h3 {
    padding-left: 12px;
  }
  .blog-toc .blog-toc-h4 {
    padding-left: 24px;
  }
  .blog-toc .blog-toc-h5 {
    padding-left: 36px;
  }
  .blog-toc .blog-toc-h6 {
    padding-left: 48px;
  }
  .blog-toc-item:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .blog-faq-item {
    font-size: 24px;
    cursor: pointer;
    margin: 20px 0;
  }

  .blog-faq-item-expand {
    min-width: 24px;
    display: inline-block;
  }

  .blog-faq-subitem {
    display: none;
    padding-left: 24px;
  }

  .blog-faq-subitem.show {
    display: block;
  }

  .blog-faq-subitem h3 {
    font-size: 20px;
  }

  .blog-faq-subitem h4 {
    font-size: 18px;
  }

  .blog-faq-subitem p {
    font-size: 16px;
  }


.alp-blog-ad {
  background-blend-mode: multiply, normal, normal;
}

.rv-breadcrumb-title {
  text-overflow: ellipsis;
}

.rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg {
  width: 28px;
  height: 28px;
}
.rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon {
  transform: translateX(8px);
}
.rv-button-with-icon:not(.yellow) .rv-button-arrow-icon svg path {
  transition: fill 0.2s ease;
}
.rv-button-with-icon:not(.yellow):hover .rv-button-arrow-icon svg path {
  fill: #ffffff;
}

.rv-blog-single-content blockquote:before {
  content: '“';
  position: absolute;
  top: 20px;
  left: 35px;
  font-size: 36px;
  font-weight: 700;
}
.rv-blog-single-content blockquote:after {
  content: '”';
  position: absolute;
  bottom: 20px;
  right: 35px;
  font-size: 36px;
  font-weight: 700;
}

@media (max-width: 1279px) {
	.blog-left-floating-banner {
  	display: none !important;
  }
}

/* Live toggled these via jQuery fadeIn/fadeOut on scroll. We lay them out at
   their allowed breakpoints (banner >=1280 per the @media above; share bar
   everywhere except 767-1199) and fade opacity/visibility via .rv-floating-on,
   set by React (BlogDetailFloating) while scrolled between the first & last
   .rv-blog-single-author-share rows. */
.rv-blog-share-floating, .blog-left-floating-banner {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.rv-blog-share-floating.rv-floating-on, .blog-left-floating-banner.rv-floating-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s;
}
@media (min-width: 767px) and (max-width: 1199px) {
  .rv-blog-share-floating {
    display: none !important;
  }
}
@media (max-width: 374px) {
  .rv-blog-share-floating .rv-blog-share-link,
  .rv-blog-share-floating .rv-blog-share-link.vertical.whatsapp,
  .rv-blog-share-floating .rv-blog-share-separator-vertical {
    margin-right: 15px;
  }
}

.rv-blog-post-item .rv-blog-post-item-image-wrapper {
  overflow: hidden;
}
.rv-blog-post-item:hover .rv-blog-post-item-image-wrapper {
  border-color: #4cc7c3;
}
.rv-blog-post-item:hover .rv-blog-post-item-image {
  transform: scale(1.2);
}
.rv-blog-post-item:hover .rv-blog-post-item-title {
  color: #4a748B;
}

.partnership-section {
  background-color: #f4f9f9;
}

@media (max-width: 540px) {
  .whatsapp-chat-sticky {
    transition: bottom 0.4s ease;
  }
  .whatsapp-chat-sticky.blog-share-active {
    bottom: 140px;
  }
}

/* CMS-era normalization (not captured): Tiptap models list items as
   <li><p>…</p></li>, whereas the captured Webflow markup put inline text
   directly in <li>. The base `p{margin-bottom:10px}` would add a gap inside
   each item — strip it so DB-driven lists match the original inline look. */
.rv-blog-single-content li > p {
  margin: 0;
}