/* ==========================================================================
   Halaman single (detail berita)
   ========================================================================== */

.single {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 90px;
}
.single__main { flex: 1; min-width: 0; max-width: 1128px; }

/* ---------- Artikel ---------- */

.article__top {
    position: relative;
    padding: 32px 28px 0;
    isolation: isolate;
}
.article__top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 604px;
    border-radius: var(--radius);
    background: var(--gray);
    z-index: -1;
}
.article__title {
    padding-inline: 4px;
    font-size: 36px;
    font-weight: 500;
    line-height: 42px;
}
.article__image {
    width: 100%;
    height: 598px;
    margin-top: 32px;
    border-radius: var(--radius);
    object-fit: cover;
}
.article__meta {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 30px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .25px;
    color: var(--black-75);
}
.article__meta li { display: flex; align-items: center; gap: 8px; }
.article__meta i { color: var(--black-50); }

.article__body { margin-top: 50px; padding: 0 31px 0 29px; }
.article__heading {
    font-size: 20px;
    font-weight: 500;
    line-height: 23px;
}
.article__heading:not(:first-child) { margin-top: 40px; }
.article__text {
    margin-top: 15px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .25px;
    color: var(--black-75);
    text-align: justify;
}
.article__figure {
    width: 872px;
    max-width: 100%;
    height: 486px;
    margin: 40px auto 0;
    border-radius: var(--radius);
    object-fit: cover;
}

/* ---------- Tombol kecil abu-abu (Share, Reply, dll.) ---------- */

.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius);
    background: var(--gray);
    font-size: 12px;
    font-weight: 500;
    color: var(--black-75);
    transition: color .2s;
}
.chip-btn i { font-size: 14px; color: var(--black-50); transition: color .2s; }
.chip-btn:hover,
.chip-btn:hover i,
.chip-btn.is-active,
.chip-btn.is-active i { color: var(--primary); }

/* ---------- Komentar ---------- */

.comments { margin-top: 70px; }
.comments__list { display: flex; flex-direction: column; gap: 40px; margin-top: 30px; }
.comment {
    padding: 20px;
    border-radius: var(--radius);
    background: var(--gray);
}
.comment__head { display: flex; align-items: center; gap: 10px; }
.comment__avatar { width: 44px; height: 44px; border-radius: var(--radius); object-fit: cover; }
.comment__meta { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.comment__name { font-size: 16px; font-weight: 500; }
.comment__date { font-size: 12px; line-height: 18px; letter-spacing: .25px; color: var(--black-75); }
.comment__reply { background: var(--white); }
.comment__text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .25px;
    color: var(--black-75);
}
.comment__replies {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0 0 60px;
}
.comment--reply { background: var(--white); box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); }

/* ---------- Form komentar ---------- */

.add-comment { margin-top: 60px; }
.add-comment__form { margin-top: 30px; }
.add-comment__user {
    display: inline-flex;
    align-items: center;
    gap: 19px;
    width: 276px;
    height: 82px;
    padding: 12px 21px;
    border-radius: var(--radius);
    background: var(--gray);
    font-size: 16px;
    font-weight: 500;
}
.add-comment__user img { width: 58px; height: 58px; border-radius: var(--radius); object-fit: cover; }
.add-comment__label {
    display: block;
    margin-top: 13px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}
.add-comment__textarea {
    display: block;
    width: 100%;
    height: 168px;
    margin-top: 10px;
    padding: 16px;
    border: 0;
    border-radius: var(--radius);
    background: var(--gray);
    resize: vertical;
    font: 400 14px/20px var(--font);
    color: var(--black);
    outline: 2px solid transparent;
    transition: outline-color .2s;
}
.add-comment__textarea:focus { outline-color: rgba(248, 21, 57, .3); }
.add-comment__textarea::placeholder { color: var(--black-50); }
.add-comment__actions { display: flex; gap: 24px; margin-top: 20px; }

.rate {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 4px 0 14px;
    border-radius: var(--radius);
    background: var(--gray);
}
.rate__title { font-size: 16px; font-weight: 500; text-transform: capitalize; }
.rate__items { display: flex; align-items: center; }
.rate__icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: var(--black-50);
    transition: color .2s, transform .2s;
}
.rate__icon:hover { transform: scale(1.1); }
.rate__icon[data-rate="1"]:hover, .rate__icon[data-rate="1"].is-active { color: #e53935; }
.rate__icon[data-rate="2"]:hover, .rate__icon[data-rate="2"].is-active { color: #fb8c00; }
.rate__icon[data-rate="3"]:hover, .rate__icon[data-rate="3"].is-active { color: #fbc02d; }
.rate__icon[data-rate="4"]:hover, .rate__icon[data-rate="4"].is-active { color: #7cb342; }
.rate__good {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 98px;
    height: 40px;
    margin-left: 5px;
    border-radius: var(--radius);
    background: var(--white);
    font-size: 14px;
    font-weight: 500;
    color: var(--black-75);
    transition: background .2s, color .2s;
}
.rate__good.is-active { background: #2ec05a; color: var(--white); }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    width: 161px;
    height: 48px;
    border-radius: var(--radius);
    background: linear-gradient(248deg, #f45c9f 5.6%, #ff7563 73.6%);
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    transition: filter .2s;
}
.btn-primary:hover { filter: brightness(1.05) saturate(1.1); }

/* ---------- Sidebar ---------- */

.sidebar {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.sidebar__actions { display: flex; justify-content: flex-end; gap: 10px; }

.author-card {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 117px;
    padding: 15px 20px 15px 15px;
    border-radius: var(--radius);
    background: var(--gray);
}
.author-card img { width: 87px; height: 87px; border-radius: var(--radius); object-fit: cover; }
.author-card__name { flex: 1; font-size: 16px; font-weight: 500; }
.author-card__role { font-size: 12px; line-height: 18px; color: var(--black-75); }

.sidebar__tags,
.top-post {
    padding: 20px 15px;
    border-radius: var(--radius);
    background: var(--gray);
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; }
.tag-chip {
    font-size: 12px;
    line-height: 14px;
    color: var(--black-75);
    transition: color .2s;
}
.tag-chip::before { content: '#'; }
.tag-chip:hover { color: var(--primary); }

.top-post__list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.mini-post { display: flex; gap: 12px; height: 87px; }
.mini-post img { width: 87px; height: 87px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.mini-post__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.mini-post__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}
.mini-post:hover .mini-post__title { color: var(--primary); }
.mini-post__date { font-size: 12px; line-height: 18px; letter-spacing: .25px; color: var(--black-75); }

.ad-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 180px;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-align: center;
}
.ad-banner::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); transition: background .2s; }
.ad-banner:hover::before { background: rgba(0, 0, 0, .1); }
.ad-banner__title { position: relative; font-size: 20px; font-weight: 500; line-height: 23px; }
.ad-banner__subtitle { position: relative; font-size: 12px; line-height: 14px; }

/* ---------- Related posts ---------- */

.related-posts { margin-top: 70px; margin-bottom: 12px; }

/* ---------- Responsif ---------- */

@media (max-width: 1200px) {
    .single { flex-direction: column; }
    .single__main { max-width: none; width: 100%; }
    .sidebar { flex-basis: auto; width: 100%; }
    .article__image { height: auto; aspect-ratio: 1072 / 598; }
    .article__figure { height: auto; aspect-ratio: 872 / 486; }
}
@media (max-width: 800px) {
    .article__title { font-size: 26px; line-height: 32px; }
    .article__meta { flex-wrap: wrap; gap: 16px; }
    .add-comment__actions { flex-direction: column; }
    .rate { height: auto; flex-wrap: wrap; padding: 8px 14px; }
    .comment__replies { margin-left: 16px; }
}