/*

 * Nova Theme - Single Post

 * @package Nova

 */



/* ==========================================================================

   LAYOUT: Content + Sidebar Grid

   ========================================================================== */



.single-container {

    max-width: var(--container-width, 1200px);

    margin: 0 auto;

    padding: 0 var(--container-padding, 16px);

}



/* Reduce gap between header and single post content —

   DO NOT override .site-content padding-top here, it controls header clearance */

.single .single-container {

    margin-top: 0px;

}



.single-content-area {

    min-width: 0;

}



.single-sidebar {

    position: sticky;

    top: 50px;

    padding-top:10px;

}



/* ==========================================================================

   BREADCRUMBS

   ========================================================================== */



.single-breadcrumbs {

    display: flex;

    align-items: center;

    gap: 2px;

    padding: 12px 0;

    font-family: var(--single-typo-breadcrumb-font, inherit);

    font-size: var(--single-typo-breadcrumb-size-desktop, 15px);

    font-weight: var(--single-typo-breadcrumb-weight, 600);

    line-height: var(--single-typo-breadcrumb-lh, 1);

    color: #4b5563;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}



.single-breadcrumbs > span {

    display: inline-flex;

    align-items: center;

}



.single-breadcrumbs a {

    color: #4b5563;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    font-weight: 700; /* Ikuti pengaturan customizer dari .single-breadcrumbs parent */

    gap: 4px;

    font-size: 14px; /* Ikuti pengaturan customizer dari parent */

    transition: color .2s;

    line-height: 0;

}



.single-breadcrumbs a:hover {

    color: var(--color-primary, #1d5281);

}



.single-breadcrumbs svg {

    width: 19px;

    height: 19px;

    display: block;

}



.breadcrumb-sep {

    color: #9ca3af;

    flex-shrink: 0;

    width: 14px;

    height: 14px;

    display: block;

}



.screen-reader-text {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    white-space: nowrap;

}



/* ==========================================================================

   POST HEADER

   ========================================================================== */



.single-header {

    margin: 5px 0px;

}



.single-category-badge {

    display: inline-block;

    padding: 3px 10px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    color: var(--color-primary, #1d5281);

    background: rgba(37, 99, 235, 0.08);

    border-radius: 4px;

    text-decoration: none;

    margin-bottom: 10px;

    transition: background .2s, color .2s;

}



.single-category-badge:hover {

    background: var(--color-primary, #1d5281);

    color: #fff;

}



.single-title {

    font-family: var(--single-typo-title-font, inherit);

    font-size: var(--single-typo-title-size-desktop, 28px);

    font-weight: var(--single-typo-title-weight, 700);

    line-height: var(--single-typo-title-lh, 1.3);

    color: var(--color-text, #111827);

    margin: 0 0 12px;

    letter-spacing: -0.3px;

}



.single-excerpt {

    font-family: var(--typo-meta-font, inherit);

    font-size: var(--typo-meta-size-desktop, 16px);

    line-height: var(--typo-meta-lh, 1.6);

    color: #4b5563;

    margin: 0 0 16px;



    /* SEO Display Limit */

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* ==========================================================================

   AUTHOR & SHARE ROW

   ========================================================================== */



.single-meta-row {

    font-family: var(--typo-meta-font, inherit);

    line-height: var(--typo-meta-lh, 1.5);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 10px 0;

    margin-bottom: 20px;

}



.single-author-info {

    display: flex;

    align-items: center;

    gap: 10px;

}



.single-author-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow: 0 2px 8px rgba(0,0,0,.1);

}



.single-author-text {

    display: flex;

    flex-direction: column;

}



.single-author-name {

    font-size: var(--typo-meta-size-desktop, 14px);

    font-weight: var(--typo-meta-weight, 600);

    color: var(--color-text, #111827);

    text-decoration: none;

    transition: color .2s;

}



.single-author-name:hover {

    color: var(--color-primary, #1d5281);

}



.single-pub-date {

    font-size: 0.75em; /* Always slightly smaller than author name */

    color: #575757;

}



/* Share Button — YouTube-style */

.single-share-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    width: auto;

    height: auto;

    padding: 6px 10px;

    border-radius: 25px;

    background: #fff;

    border: 1px solid #d1d5db;

    color: var(--color-text-secondary);

    transition: all var(--transition-fast);

    cursor: pointer;

    font-size: 10px;

    font-weight: 600;

}



.single-share-btn:hover {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



.single-share-btn:active {

    transform: scale(.95);

}



.single-share-btn.shared {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



.share-label {

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;

}



/* ==========================================================================

   FEATURED IMAGE

   ========================================================================== */



.single-featured-image {

    margin: 0 0 20px;

    border-radius: 8px;

    overflow: hidden;

}



.single-featured-image img {

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

}



.single-image-caption {

    font-size: 12px;

    line-height: 1.2;

    color: #4e4e4e;

    padding: 8px 0px;

    font-style: italic;

    text-align: left;

}



/* ==========================================================================

   POST CONTENT TYPOGRAPHY

   ========================================================================== */



.single-entry-content {

    font-family: var(--single-typo-article-font, var(--font-sans));

    font-weight: var(--single-typo-article-weight, 400);

    font-size: var(--single-typo-article-size-desktop, 16px);

    line-height: var(--single-typo-article-lh, 1.8);

    color: var(--color-text, #374151);

    word-wrap: break-word;

    overflow-wrap: break-word;

}



/* --- Paragraphs --- */

.single-entry-content p {

    margin: 0 0 1.5em;

}



/* Add top margin for paragraphs that come after certain elements

   (useful for Google AdSense auto-placed ads and other injected content) */

.single-entry-content p + p,

.single-entry-content .google-auto-placed + p,

.single-entry-content .ap_container + p,

.single-entry-content div[style*="text-align: center"] + p {

    margin-top: 1.5em;

}



/* Ensure Google AdSense auto-placed ads have proper spacing */

.single-entry-content .google-auto-placed,

.single-entry-content .ap_container {

    margin: 1.5em 0;

    clear: both;

}



/* --- Subheadings Hierarchy --- */

.single-entry-content h2,

.single-entry-content h3,

.single-entry-content h4,

.single-entry-content h5,

.single-entry-content h6 {

    font-family: var(--typo-title-font, inherit);

}



.single-entry-content h2 {

    font-size: 24px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.3px;

    margin: 2em 0 0.7em;

    color: var(--color-text, #111827);

    padding-bottom: 8px;

    border-bottom: 1px solid var(--color-border, #e5e7eb);

}



.single-entry-content h3 {

    font-size: 20px;

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -0.2px;

    margin: 1.8em 0 0.6em;

    color: var(--color-text, #111827);

}



.single-entry-content h4 {

    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;

    margin: 1.5em 0 0.5em;

    color: var(--color-text, #1f2937);

}



.single-entry-content h5 {

    font-size: 15px;

    font-weight: 700;

    line-height: 1.45;

    margin: 1.4em 0 1.4em;

    color: var(--color-text, #374151);

}



.single-entry-content h6 {

    font-size: 14px;

    font-weight: 700;

    line-height: 1.45;

    margin: 1.3em 0 0.4em;

    color: var(--color-text-secondary, #6b7280);

}



/* --- Images & Figures --- */

.single-entry-content img {

    max-width: 100%;

    height: auto;

    border-radius: 6px;

}



.single-entry-content figure {

    margin: 1.8em 0;

}



.single-entry-content figure img {

    margin-bottom: 0;

}



.single-entry-content figcaption {

    font-size: 13px;

    color: #595959;

    text-align: center;

    margin-top: 8px;

    font-style: italic;

    line-height: 1.5;

}



/* --- Blockquote --- */

.single-entry-content blockquote {

    position: relative;

    margin: 2em 0;

    padding: 20px 24px 20px 28px;

    border-left: 4px solid var(--color-primary, #1d5281);

    background: var(--color-bg-alt, #f8fafc);

    border-radius: 0 8px 8px 0;

    font-style: italic;

    color: var(--color-text, #374151);

    font-size: 1.05em;

    line-height: 1.7;

}



.single-entry-content blockquote p:first-child {

    margin-top: 0;

}



.single-entry-content blockquote p:last-child {

    margin-bottom: 0;

}



.single-entry-content blockquote cite {

    display: block;

    margin-top: 10px;

    font-size: 0.85em;

    font-style: normal;

    font-weight: 600;

    color: var(--color-text, #374151);

}



/* --- Lists --- */

.single-entry-content ul,

.single-entry-content ol {

    padding-left: 1.8em;

    margin: 0 0 1.5em;

}



.single-entry-content ul {

    list-style-type: disc;

}



.single-entry-content ol {

    list-style-type: decimal;

}



.single-entry-content li {

    margin-bottom: 0.5em;

    line-height: 1.7;

}



.single-entry-content li > ul,

.single-entry-content li > ol {

    margin-top: 0.4em;

    margin-bottom: 0;

}



.single-entry-content ul ul {

    list-style-type: circle;

}



.single-entry-content ul ul ul {

    list-style-type: square;

}



/* --- Code Blocks --- */

.single-entry-content pre {

    background: #1e293b;

    color: #e2e8f0;

    padding: 20px 24px;

    border-radius: 8px;

    overflow-x: auto;

    font-size: 14px;

    line-height: 1.65;

    margin: 1.8em 0;

    border: 1px solid #334155;

}



.single-entry-content code {

    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;

    font-size: 0.88em;

    background: #f1f5f9;

    padding: 2px 7px;

    border-radius: 4px;

    color: #be185d;

}



.single-entry-content pre code {

    background: transparent;

    padding: 0;

    color: inherit;

    font-size: inherit;

}



/* --- Tables --- */

.single-entry-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 1.8em 0;

    font-size: 15px;

    border: 1px solid var(--color-border, #e5e7eb);

    overflow: hidden;

}



.single-entry-content th,

.single-entry-content td {

    padding: 12px 16px;

    border: 1px solid var(--color-border, #e5e7eb);

    text-align: left;

}



.single-entry-content th {

    background: var(--color-bg-alt, #f9fafb);

    font-weight: 700;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    color: var(--color-text, #374151);

}



.single-entry-content tr:nth-child(even) {

    background: rgba(0, 0, 0, 0.015);

}



.single-entry-content tr:hover {

    background: rgba(0, 0, 0, 0.03);

}



/* Table responsive wrapper (for overflow) */

.single-entry-content .wp-block-table {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    margin: 1.8em 0;

}



.single-entry-content .wp-block-table table {

    margin: 0;

}



/* --- Links --- */

.single-entry-content a {

    color: color-mix(in srgb, var(--color-primary, #0e4f88) 90%, black 7%);

    text-decoration: none;

    text-underline-offset: 3px;

    text-decoration-thickness: 1.5px;

    text-decoration-skip-ink: auto;

    transition: color 0.2s ease, text-decoration-color 0.2s ease;

    font-weight: 500;

}



.single-entry-content a:hover {

    color: var(--color-primary-hover, #c53030);

    text-decoration: underline;

    text-decoration-thickness: 2px;

    text-decoration-color: currentColor;

}



/* --- Horizontal Rule / Separator --- */

.single-entry-content hr,

.single-entry-content .wp-block-separator {

    border: none;

    height: 1px;

    background: var(--color-border, #e5e7eb);

    margin: 2.5em 0;

}



.single-entry-content .wp-block-separator.is-style-dots {

    background: none;

    text-align: center;

    height: auto;

}



.single-entry-content .wp-block-separator.is-style-dots::before {

    content: '···';

    font-size: 24px;

    letter-spacing: 12px;

    color: var(--color-text-muted, #9ca3af);

}



/* --- Responsive Embeds (YouTube, Video, Social Media) --- */

.single-entry-content iframe,

.single-entry-content embed,

.single-entry-content object,

.single-entry-content video {

    max-width: 100%;

    border-radius: 8px;

}



/* WordPress embed wrapper — 16:9 responsive */

.single-entry-content .wp-block-embed,

.single-entry-content .wp-block-video {

    margin: 1.8em 0;

}



.single-entry-content .wp-block-embed__wrapper {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 */

    height: 0;

    overflow: hidden;

    border-radius: 8px;

}



.single-entry-content .wp-block-embed__wrapper iframe,

.single-entry-content .wp-block-embed__wrapper video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

    border-radius: 8px;

}



/* Social embeds (Twitter/X, Instagram, Facebook) — centered */

.single-entry-content .wp-block-embed-twitter,

.single-entry-content .wp-block-embed-instagram,

.single-entry-content .wp-block-embed-facebook,

.single-entry-content .wp-block-embed-tiktok {

    margin: 2em 0;

}



.single-entry-content .wp-block-embed-twitter .wp-block-embed__wrapper,

.single-entry-content .wp-block-embed-instagram .wp-block-embed__wrapper,

.single-entry-content .wp-block-embed-facebook .wp-block-embed__wrapper,

.single-entry-content .wp-block-embed-tiktok .wp-block-embed__wrapper {

    padding-bottom: 0;

    height: auto;

    display: flex;

    justify-content: center;

}



.single-entry-content .wp-block-embed-twitter .wp-block-embed__wrapper iframe,

.single-entry-content .wp-block-embed-instagram .wp-block-embed__wrapper iframe,

.single-entry-content .wp-block-embed-facebook .wp-block-embed__wrapper iframe,

.single-entry-content .wp-block-embed-tiktok .wp-block-embed__wrapper iframe {

    position: static;

    width: auto;

    height: auto;

    max-width: 100%;

}



/* Legacy oEmbed wrapping */

.single-entry-content .embed-responsive,

.single-entry-content .video-container,

.single-entry-content .wp-video {

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

    margin: 1.8em 0;

    border-radius: 8px;

}



.single-entry-content .embed-responsive iframe,

.single-entry-content .video-container iframe,

.single-entry-content .wp-video video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



/* --- WP Gallery --- */

.single-entry-content .wp-block-gallery {

    margin: 1.8em 0;

}



.single-entry-content .wp-block-gallery img {

    border-radius: 6px;

}



/* --- WP Buttons --- */

.single-entry-content .wp-block-button__link {

    border-radius: 6px;

    transition: opacity 0.2s ease, transform 0.2s ease;

}



.single-entry-content .wp-block-button__link:hover {

    opacity: 0.9;

    text-decoration: none;

}



.page-links {

    font-weight: 600;

    margin: 24px 0;

    display: flex;

    gap: 8px;

    align-items: center;

}



/* ==========================================================================

   BACA JUGA (ALSO READ)

   ========================================================================== */



.nova-also-read {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 14px 16px 14px 20px;

    margin: 1.6em 0;

    background: color-mix(in srgb, var(--color-primary, #0e4f88) 6%, transparent);

    border: 1px solid color-mix(in srgb, var(--color-primary, #0e4f88) 20%, transparent);

    border-radius: 0 8px 8px 0;

}



.nova-also-read__label {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    font-family: var(--typo-title-font, inherit);

    font-size: 17px;

    margin-bottom: 7px;

    margin-top: 5px;

    font-weight: 800;

    /* text-transform: uppercase; */

    /* letter-spacing: 0.6px; */

    color: var(--color-primary, #0e4f88);

    line-height: 1;

}



.nova-also-read__label::before {

    content: '';

    position: absolute;

    left: -21px;

    top: 45%;

    transform: translateY(-50%);

    width: 4px;

    border-top-right-radius: 20px;

    border-bottom-right-radius: 20px;

    height: 150%;

    background-color: var(--color-primary, #0e4f88);

}



.nova-also-read__link {

    font-family: var(--typo-title-font, inherit);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.5;

    color: var(--color-text, #111827) !important;

    text-decoration: none;

    transition: color 0.2s ease;

}



.nova-also-read__link:hover {

    color: var(--color-primary, #0e4f88);

    text-decoration: underline;

    text-underline-offset: 3px;

}



/* Dark mode */

[data-theme="dark"] .nova-also-read {

    background: color-mix(in srgb, var(--color-primary) 10%, transparent);

    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);

    border-left-color: var(--color-primary);

}



[data-theme="dark"] .nova-also-read__link {

    color: var(--color-text);

}



/* Responsive */

@media (max-width: 500px) {

    .nova-also-read {

        padding: 12px 14px 12px 16px;

    }



    .nova-also-read__label::before {

        left: -16px;

    }



    .nova-also-read__link {

        font-size: 14px;

    }

}



/* ==========================================================================

   TAGS CLOUD

   ========================================================================== */



.single-tags-section {

    display: flex;

    align-items: center;

    gap: 8px 10px;

    margin: 28px 0 32px;

    padding-top: 30px;

    border-top: 1px solid var(--color-border, #e5e7eb);

    flex-wrap: wrap;

}



.single-tags-label {

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-section-heading-size-desktop, 20px);

    font-weight: var(--typo-section-heading-weight, 700);

    line-height: var(--typo-section-heading-lh, 1.2);

    color: var(--color-text, #111827);

    white-space: nowrap;

    flex-shrink: 0;

}



.single-tags-cloud {

    display: contents;

}



.single-tag-pill {

    display: inline-block;

    padding: 5px 14px;

    font-size: 13px;

    font-weight: 500;

    color: #4b5563;

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    text-decoration: none;

    transition: all .2s;

}



.single-tag-pill:hover {

    background: var(--color-primary, #1d5281);

    color: #fff;

    border-color: var(--color-primary, #1d5281);

}



/* ==========================================================================

   FOLLOW STRIP WIDGET

   ========================================================================== */



.Nova-follow-strip {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 28px 0 32px;

    padding: 16px 20px;

    background: var(--color-bg-alt, #f9fafb);

    border: 1px solid var(--color-primary-hover, #e5e7eb);

    border-radius: 8px;

    flex-wrap: wrap;

}



.Nova-follow-strip__label {

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-section-heading-size-desktop, 18px);

    font-weight: var(--typo-section-heading-weight, 700);

    line-height: var(--typo-section-heading-lh, 1.2);

    color: var(--color-text, #111827);

    margin: 0;

    white-space: nowrap;

    flex-shrink: 0;

}



.Nova-follow-strip__btns {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    flex: 1;

}



.Nova-follow-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 16px;

    font-size: 13px;

    font-weight: 500;

    color: #030303;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    text-decoration: none;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.Nova-follow-btn:hover {

    background: var(--color-primary, #1d5281);

    color: #ffffff;

    border-color: var(--color-primary, #1d5281);

    transform: translateY(-1px);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.Nova-follow-btn__icon {

    flex-shrink: 0;

    display: block;

}



.Nova-follow-btn span {

    line-height: 1.4;

}



/* ==========================================================================

   HEADING STYLE DECORATIONS (mirrors home-layout.css for single page)

   Applied via .heading-style-{variant} on parent (.single-sidebar, .related-posts-section)

   ========================================================================== */



.single-sidebar .widget-title {

    position: relative;

    display: inline-block;

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-widget-title-size-desktop, var(--typo-section-heading-size-desktop, 20px));

    font-weight: var(--typo-section-heading-weight, 700);

    line-height: var(--typo-section-heading-lh, 1.2);

    color: var(--color-text, #111827);

    margin: 0 0 16px;

}



.related-posts-section .section-heading {

    position: relative;

    display: inline-block;

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-section-heading-size-desktop, 20px);

    font-weight: var(--typo-section-heading-weight, 700);

    line-height: var(--typo-section-heading-lh, 1.4);

    color: var(--color-text, #111827);

    margin: 0 0 20px;

}



/* --- 1. Underline --- */

.heading-style-underline .widget-title,

.heading-style-underline .section-heading {

    padding-bottom: 10px;

}



.heading-style-underline .widget-title::after,

.heading-style-underline .section-heading::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 5px;

    width: 45px;

    height: 3px;

    background: var(--color-primary);

    border-radius: 2px;

}



/* --- 2. Dot --- */

.heading-style-dot .widget-title,

.heading-style-dot .section-heading {

    padding-left: 16px;

}



.heading-style-dot .widget-title::before,

.heading-style-dot .section-heading::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 8px;

    height: 8px;

    background: var(--color-primary);

    border-radius: 50%;

}



/* --- 3. Border Left --- */

.heading-style-border-left .widget-title,

.heading-style-border-left .section-heading {

    padding-left: 14px;

    border-left: 4px solid var(--color-primary);

}



/* --- 4. Highlight --- */

.heading-style-highlight .widget-title,

.heading-style-highlight .section-heading {

    padding: 6px 14px;

    background: var(--color-primary);

    color: #ffffff;

    border-radius: 4px;

    letter-spacing: 0;

}



/* --- 5. Double Line --- */

.heading-style-double-line .widget-title,

.heading-style-double-line .section-heading {

    padding: 8px 0;

    border-top: 2px solid var(--color-primary);

    border-bottom: 2px solid var(--color-primary);

    display: block;

}





/* ==========================================================================

   RELATED POSTS (CLEAN - NO CARD STYLE)

   ========================================================================== */



.related-posts-section {

    margin-top: 30px;

    padding-top: 28px;

    border-top: 1px solid #e5e7eb;

}



.related-posts-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;                    /* Slightly larger gap tanpa border */

}



.related-post-card {

    text-decoration: none;

    color: inherit;

    display: flex;

    flex-direction: column;

    background: transparent;      /* Hapus white bg */

    border: none;                 /* Hapus border */

    border-radius: 0;             /* Hapus rounded corners */

}



.related-post-card:hover {

    opacity: 1;                   /* Hilangkan opacity hover */

    transform: none;

    box-shadow: none;

}



.related-post-card:hover .related-post-title {

    color: var(--color-link-hover, #cb0b0b);

}



.related-post-thumb {

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #f3f4f6;

    border-radius: 6px;           /* Optional: rounded corner di thumbnail saja */

}



.related-post-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.related-post-thumb--placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d1d5db;

}



.related-post-title {

    font-family: var(--typo-title-font, inherit);

    font-size: var(--related-fs-d, 16px);

    font-weight: var(--typo-title-weight, 700);

    line-height: var(--typo-title-lh, 1.4);

    color: var(--color-link, #1a1a2e);

    word-break: break-word;

    margin: 12px 0 0 0;           /* HANYA margin-top, tak ada sisi kiri kanan */

    padding: 0;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}





/* ==========================================================================

   POST PAGINATION (<!--nextpage--> breaks)

   ========================================================================== */



.post-pagination {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 30px 0 30px;

    flex-wrap: wrap;

}



.post-page-number,

.post-page-all {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    font-size: 14px;

    font-weight: 600 !important;

    text-decoration: none !important;

    border-radius: 50%;

    border: none;

    color: var(--color-text, #1f2937);

    background: #f3f4f6;

    transition: all .25s ease;

}



.post-page-number:hover,

.post-page-all:hover {

    background: var(--color-primary, #1d5281);

    color: #fff !important;

    text-decoration: none !important;

    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);

}



.post-page-number.current {

    background: var(--color-primary, #1d5281);

    color: #fff;

    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);

    pointer-events: none;

}



.post-page-all {

    color: color-mix(in srgb, var(--color-primary, #1d5281) 90%, black 50%) !important;

    width: auto;

    padding: 0 16px;

    border-radius: 19px;

    font-size: 13px;

    letter-spacing: 0.5px;

}



.post-page-all:hover {

    opacity: 0.85;

}





.Nova-infinite-sentry {

    display: flex;

    justify-content: center;

    padding: 32px 0;

}



.Nova-spinner {

    animation: Nova-spin 0.8s linear infinite;

}



@keyframes Nova-spin {

    from { transform: rotate(0deg); }

    to   { transform: rotate(360deg); }

}



/* ==========================================================================

   INFINITE SCROLL POSTS

   ========================================================================== */



.Nova-next-post-entry {

    margin-top: 24px;

    /* Removed padding-top and border-top to avoid double lines with the new separator */

}





/* ==========================================================================

   RESPONSIVE

   ========================================================================== */



@media (max-width: 900px) {



    .single-sidebar {

        position: static;

    }



    .single-sidebar {

        top: 50px;

        padding-top: 30px;

    }



    .single-title {

        font-size: 22px;

    }



    .related-posts-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }



    .related-post-title {

        font-size: var(--related-fs-m, 14px);

        margin: 10px 0 0 0;       /* No horizontal margin di mobile juga */

    }



    .related-posts-section .section-heading {

        font-size: var(--typo-section-heading-size-mobile, 18px);

    }



    .single-tags-label {

        font-size: var(--typo-section-heading-size-mobile, 18px);

    }

}





@media (max-width: 500px) {

    .single-breadcrumbs {

        font-size: var(--single-typo-breadcrumb-size-mobile, 13px);

    }



    .single-title {

        font-size: var(--single-typo-title-size-mobile, 22px);

    }



    .single-excerpt {

        font-size: var(--typo-meta-size-mobile, 15px);

    }



    .single-entry-content {

        font-size: var(--single-typo-article-size-mobile, 15px);

    }



    .single-entry-content h2 {

        font-size: 20px;

        margin: 1.6em 0 0.5em;

    }



    .single-entry-content h3 {

        font-size: 18px;

    }



    .single-entry-content h4 {

        font-size: 16px;

    }



    .single-entry-content blockquote {

        padding: 16px 18px 16px 22px;

        font-size: 1em;

    }



    .single-entry-content table {

        font-size: 14px;

    }



    .single-entry-content th,

    .single-entry-content td {

        padding: 8px 12px;

    }



    .related-posts-grid {

        grid-template-columns: 1fr 1fr;

        gap: 16px;

    }



    .related-post-card.is-featured {

        grid-column: 1 / -1;

    }



    .related-post-card.is-featured .related-post-title {

        font-size: calc(var(--related-fs-m, 14px) + 2px);

        display: block;

        -webkit-line-clamp: unset;

        line-clamp: unset;

        overflow: visible;

    }



    .related-post-card.hide-on-mobile {

        display: none;

    }



    .single-meta-row {

        flex-wrap: wrap;

    }



    .single-author-name {

        font-size: var(--typo-meta-size-mobile, 14px);

    }



    /* Follow Strip - Mobile */

    .Nova-follow-strip {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        padding: 14px 16px;

    }



    .Nova-follow-strip__label {

        font-size: 16px;

    }



    .Nova-follow-strip__btns {

        width: 100%;

        flex-direction: column;

        gap: 8px;

    }



    .Nova-follow-btn {

        width: 100%;

        justify-content: center;

        padding: 10px 16px;

        font-size: 14px;

    }



    .nova-also-read__label::before {

        left: -17px;

        top: 45%;

}

}



.site-main {

    padding-bottom: 30px;

}



/* ==========================================================================

   DARK MODE

   ========================================================================== */



[data-theme="dark"] .single-breadcrumbs,

[data-theme="dark"] .single-breadcrumbs a {

    color: var(--color-text-secondary);

}



[data-theme="dark"] .single-breadcrumbs a:hover {

    color: var(--color-primary);

}



[data-theme="dark"] .breadcrumb-sep {

    color: var(--color-text-muted);

}



[data-theme="dark"] .single-title {

    color: var(--color-text);

}



[data-theme="dark"] .single-excerpt {

    color: var(--color-text-secondary);

}



[data-theme="dark"] .single-author-name {

    color: var(--color-text);

}



[data-theme="dark"] .single-author-name:hover {

    color: var(--color-primary);

}



[data-theme="dark"] .single-pub-date {

    color: var(--color-text-muted);

}



[data-theme="dark"] .single-share-btn {

    background: var(--color-surface);

    border-color: var(--color-border);

    color: var(--color-text);

}



[data-theme="dark"] .single-share-btn:hover {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



[data-theme="dark"] .single-share-btn.shared {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



[data-theme="dark"] .single-featured-image {

    background: none;

}



[data-theme="dark"] .single-image-caption {

    color: var(--color-text-muted);

    background: none;

}



[data-theme="dark"] .single-entry-content {

    color: var(--color-text);

}



[data-theme="dark"] .single-entry-content h2,

[data-theme="dark"] .single-entry-content h3,

[data-theme="dark"] .single-entry-content h4,

[data-theme="dark"] .single-entry-content h5 {

    color: var(--color-text);

}



[data-theme="dark"] .single-entry-content h2 {

    border-bottom-color: var(--color-border);

}



[data-theme="dark"] .single-entry-content h6 {

    color: var(--color-text-muted);

}



[data-theme="dark"] .single-entry-content blockquote {

    background: var(--color-surface);

    border-left-color: var(--color-primary);

    color: var(--color-text-secondary);

}



[data-theme="dark"] .single-entry-content blockquote cite {

    color: var(--color-text);

}



[data-theme="dark"] .single-entry-content code {

    background: var(--color-surface);

    color: #f472b6;

}



[data-theme="dark"] .single-entry-content pre {

    background: #0f172a;

    border-color: var(--color-border);

}



[data-theme="dark"] .single-entry-content a {

    color: var(--color-primary);

    text-decoration-color: currentColor;

    font-weight: 500;

}



[data-theme="dark"] .single-entry-content a:hover {

    color: var(--color-primary-hover);

    text-decoration-thickness: 2px;

}



[data-theme="dark"] .single-entry-content th {

    background: var(--color-surface);

    color: var(--color-text);

}



[data-theme="dark"] .single-entry-content th,

[data-theme="dark"] .single-entry-content td {

    border-color: var(--color-border);

}



[data-theme="dark"] .single-entry-content table {

    border-color: var(--color-border);

}



[data-theme="dark"] .single-entry-content tr:nth-child(even) {

    background: rgba(255, 255, 255, 0.02);

}



[data-theme="dark"] .single-entry-content tr:hover {

    background: rgba(255, 255, 255, 0.04);

}



[data-theme="dark"] .single-entry-content hr,

[data-theme="dark"] .single-entry-content .wp-block-separator {

    background: var(--color-border);

}



[data-theme="dark"] .single-entry-content figcaption {

    color: var(--color-text-muted);

}



[data-theme="dark"] .single-tags-section {

    border-top-color: var(--color-border);

}



[data-theme="dark"] .single-tags-label {

    color: var(--color-text);

}



[data-theme="dark"] .single-tag-pill {

    color: var(--color-text-secondary);

    background: var(--color-surface);

    border-color: var(--color-border);

}



[data-theme="dark"] .single-tag-pill:hover {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



/* Follow Strip - Dark Mode */

[data-theme="dark"] .Nova-follow-strip {

    background: var(--color-surface, #1e293b);

    border-color: var(--color-border, #334155);

}



[data-theme="dark"] .Nova-follow-strip__label {

    color: var(--color-text, #e2e8f0);

}



[data-theme="dark"] .Nova-follow-btn {

    background: var(--color-bg-alt, #1e293b);

    color: var(--color-text-secondary, #94a3b8);

    border-color: var(--color-border, #334155);

}



[data-theme="dark"] .Nova-follow-btn:hover {

    background: var(--color-primary, #f87171);

    color: #ffffff;

    border-color: var(--color-primary, #f87171);

}



[data-theme="dark"] .related-posts-section {

    border-top-color: var(--color-border);

}



[data-theme="dark"] .related-posts-title {

    color: var(--color-text);

}



[data-theme="dark"] .related-post-card:hover {

    box-shadow: none;

}



[data-theme="dark"] .related-post-card:hover .related-post-title {

    color: var(--color-link-hover, #cb0b0b);

}



[data-theme="dark"] .related-post-thumb {

    background: var(--color-bg-alt);

}



[data-theme="dark"] .related-post-thumb--placeholder {

    color: var(--color-text-muted);

}



[data-theme="dark"] .related-post-title {

    color: var(--color-link, #1a1a2e);

}



[data-theme="dark"] .post-page-number,

[data-theme="dark"] .post-page-all {

    background: var(--color-surface);

    color: var(--color-text);

}



[data-theme="dark"] .post-page-number:hover,

[data-theme="dark"] .post-page-all:hover {

    background: var(--color-primary);

    color: #fff;

    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.25);

}



[data-theme="dark"] .post-page-number.current {

    background: var(--color-primary);

    color: #fff;

    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.3);

}



/* ==========================================================================

   INFINITE SCROLL

   ========================================================================== */



.Nova-infinite-separator {

    display: flex;

    align-items: center;

    text-align: center;

    margin: 35px 0;

    color: var(--color-text); /* Higher contrast than muted */

    font-family: var(--font-sans);

    font-weight: 700;

    font-size: 13px;

    letter-spacing: 1.5px;

    text-transform: uppercase;



    /* Animation base */

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}



.Nova-infinite-separator::before,

.Nova-infinite-separator::after {

    content: '';

    flex: 1;

    border-bottom: 1px solid var(--color-border);

}



.Nova-infinite-separator::before {

    margin-right: 24px;

}



.Nova-infinite-separator::after {

    margin-left: 24px;

}



.Nova-next-post-entry {

    opacity: 0;

    transform: translateY(40px);

    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}



.Nova-infinite-separator.is-revealed,

.Nova-next-post-entry.is-revealed {

    opacity: 1;

    transform: translateY(0);

}



[data-theme="dark"] .Nova-infinite-separator::before,

[data-theme="dark"] .Nova-infinite-separator::after {

    border-color: var(--color-border);

}