.read__tags-awal { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.read__tags-awal a { display: inline-block; font-size: 11px; font-weight: 600; color: var(--color-primary); text-transform: lowercase; }
.read__tags-awal a:hover { text-decoration: underline; }
.read__title { font-family: var(--font-heading); font-size: 28px; font-weight: 800; line-height: 1.25; color: var(--color-text); margin: 0 0 12px; letter-spacing: -0.5px; }
@media (max-width: 767px) { .read__title { font-size: 22px; line-height: 1.3; } }
.read__cta { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 10px; margin-bottom: 16px; gap: 5px; flex-wrap: wrap; }
.read__cta .read__date { flex-grow: 1; flex-basis: 0; color: var(--color-text-light); padding: 5px 10px; margin: 0; font-size: 11px; }
.read__date a { color: var(--color-primary); font-weight: 600; }
.read__ctaLink { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--color-primary); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 700; text-decoration: none; }
.read__ctaLink:hover { background: var(--color-primary-dark); color: #fff; }
.read__ctaLink img { width: 16px; height: 16px; }
.reaction { position: relative; padding-left: 10px; padding-right: 10px; margin-bottom: 16px; }
.reaction.-top { margin-top: 16px; }
.reaction.--new { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reaction.--new::-webkit-scrollbar { display: none; }
.reaction.--new .reactionList { display: flex; align-items: center; gap: 6px; justify-content: flex-start; min-width: 320px; }
.reaction.--new .button { background-color: #f5f5f5; border-radius: 30px; width: 40px; min-width: 40px; height: 40px; font-size: 10px; font-weight: 500; color: #4a4a4a; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; padding: 0; flex: none; }
.reaction.--new .button:hover { background: #e5e5e5; }
.reaction.--new .button.active { background: var(--color-primary); color: #fff; }
.reaction.--new .reactionTxt { font-size: 11px; font-weight: 700; }
.reaction.--new .total_comment { position: absolute; top: 2px; right: 2px; font-size: 9px; background: var(--color-primary); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.icoBase { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.icoLike { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.icoShare { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.59 13.51l6.83 3.98M15.41 6.51L8.59 10.49'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.59 13.51l6.83 3.98M15.41 6.51L8.59 10.49'/%3E%3C/svg%3E"); }
.icoComment { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.icoBookmark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.icoView { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icoGift { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3C/svg%3E"); }
.read__photo { position: relative; margin: 16px 0; border-radius: 8px; overflow: hidden; background: #f0f0f0; }
.read__photo img { display: block; width: 100%; height: auto; }
.read__photo-caption { font-size: 12px; color: var(--color-text-light); padding: 10px 12px; background: #f9f9f9; line-height: 1.5; border-left: 3px solid var(--color-primary); }
.photo__icon { position: absolute; right: 10px; top: 10px; z-index: 2; min-width: 115px; border-radius: 5px; color: #fff; font-size: 13px; line-height: 1; padding: 7px 10px; background: rgba(0, 0, 0, 0.6); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.read__content { font-size: 17px; line-height: 1.65; color: #2d2d2d; letter-spacing: -0.2px; }
.read__content p { margin: 0 0 1.2em; }
.read__content h2 { font-size: 22px; font-weight: 800; margin: 1.5em 0 0.6em; }
.read__content h3 { font-size: 18px; font-weight: 700; margin: 1.3em 0 0.5em; }
.read__content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }
.read__content blockquote { border-left: 4px solid var(--color-primary); padding: 12px 16px; margin: 1.2em 0; background: #f9f9f9; font-style: italic; color: #555; }
@media (max-width: 767px) { .read__content { font-size: 16px; line-height: 1.6; } }
.baca-juga { margin: 20px 0; padding: 14px 16px; background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); border-left: 4px solid var(--color-primary); border-radius: 6px; position: relative; }
.baca-juga::before { content: '🔗'; position: absolute; top: -10px; left: 12px; background: var(--color-primary); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.baca-juga__link { display: block; color: inherit; }
.baca-juga__label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-primary); margin-right: 6px; }
.baca-juga__title { font-size: 15px; font-weight: 700; color: #111; }
.ads-paralax { margin: 20px -15px; }
.kcm-track { background: #fafafa; padding: 30px 0 8px; min-height: 300px; text-align: center; position: relative; }
.kcm-track-sticky::before { content: "Advertisement"; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #c8ccce; }
.gate-kgplus { height: 50px; display: flex; justify-content: center; align-items: center; font-size: 12px; background: #fafafa; color: #666; font-weight: 700; }
.gate-kgplus a { color: var(--color-primary); text-decoration: underline; margin-left: 4px; }
.cardFooter { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; margin: 24px 0 16px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.cardFooter .reaction { display: flex; gap: 8px; margin: 0; padding: 0; }
.cardFooter .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; height: 32px; min-width: 32px; border: none; background: transparent; color: #4a4a4a; cursor: pointer; border-radius: 6px; font-size: 14px; font-weight: 600; }
.cardFooter .btn:hover { background: #f0f0f0; color: var(--color-primary); }
.cardFooter .btn.active { color: var(--color-primary); }
.cardFooter .btn[data-count]::after { content: attr(data-count); font-size: 12px; font-weight: 600; }
.iconBase { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.iconLike { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.iconVote { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
.iconView { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.artikel-terkait { margin: 30px 0; padding: 20px; background: #f9f9f9; border-radius: 8px; border-top: 3px solid var(--color-primary); }
.artikel-terkait__title { font-size: 18px; font-weight: 800; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 8px; color: #111; }
.artikel-terkait__title::before { content: ''; width: 4px; height: 20px; background: var(--color-primary); border-radius: 2px; }
.artikel-terkait__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.artikel-terkait__item { display: flex; gap: 10px; padding: 10px; background: #fff; border-radius: 6px; color: inherit; border: 1px solid #eee; }
.artikel-terkait__item:hover { border-color: var(--color-primary); }
.artikel-terkait__thumb { width: 70px; height: 70px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #f0f0f0; }
.artikel-terkait__thumb img { width: 100%; height: 100%; object-fit: cover; }
.artikel-terkait__content { min-width: 0; flex: 1; }
.artikel-terkait__item-title { font-size: 13px; font-weight: 700; line-height: 1.35; color: #111; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.artikel-terkait__date { font-size: 11px; color: #999; }
@media (max-width: 767px) { .artikel-terkait__grid { grid-template-columns: 1fr; } }
.sidebar-sticky .widget { position: sticky; top: 80px; }