/*
 * KabarLagi 3.7 — lapisan perbaikan akhir (dimuat paling belakang).
 *
 * 1. Tipografi heading yang proporsional (tidak raksasa lagi).
 * 2. Kotak komentar selalu terlihat (bug #comments display:none lama).
 * 3. Search bar flex — input lebar penuh, tombol proporsional, tanpa overlap.
 * 4. Toolbar pembaca (A− A A+ A++) rapi dengan flex + gap 10px.
 * 5. Ringkasan AI: padding lega 20px, line-height nyaman di layar kecil.
 * 6. Ikon sosial terpadu header/footer/drawer + ukuran konsisten.
 * 7. Proteksi konten (toast & dialog warning).
 * 8. Peta berita langsung + kartu sematkan postingan.
 * 9. Story: indikator jeda saat ditekan-tahan.
 */

/* =========================================================================
 * 1. TIPOGRAFI — judul artikel tidak lagi raksasa
 * ====================================================================== */

.single .single-post-title,
.entry-full .entry-title,
.single .entry-title,
body.kl-modern-ui .single-post-title,
.kl-single-skin-signature .single-post-title {
        font-size: clamp(22px, 3.4vw, 38px) !important;
        line-height: 1.28 !important;
        font-weight: 800 !important;
        letter-spacing: -0.015em !important;
        overflow-wrap: break-word;
}

.entry-sub-title,
.single .entry-sub-title {
        font-size: clamp(15px, 2.1vw, 19px) !important;
        line-height: 1.55 !important;
        font-weight: 500;
        color: #475569;
}

@media (max-width: 767px) {
        .single .single-post-title,
        .entry-full .entry-title,
        .single .entry-title,
        body.kl-modern-ui .single-post-title,
        .kl-single-skin-signature .single-post-title {
                font-size: clamp(20px, 6vw, 27px) !important;
                line-height: 1.3 !important;
        }
}

/* Hierarki konten artikel: H2/H3 turun satu tingkat dari judul, tidak menyaingi. */
.article-body h2:not(.wp-block-heading),
.entry-content h2 {
        font-size: clamp(19px, 2.6vw, 26px) !important;
        line-height: 1.35;
        font-weight: 700;
        margin-top: 1.6em;
        margin-bottom: .7em;
}

.article-body h3,
.entry-content h3 {
        font-size: clamp(17px, 2.2vw, 22px) !important;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 1.4em;
        margin-bottom: .6em;
}

/* Kicker/eyebrow home pakai teks kecil tebal, bukan heading raksasa. */
.kl-36-kicker,
.kl-kicker,
.kl-v4-kicker,
.kicker {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
}

/* =========================================================================
 * 2. KOMENTAR — area komentar selalu terlihat (trigger lama sudah dihapus)
 * ====================================================================== */

#comments.comments-area,
body.kl-modern-ui.single #comments.comments-area {
        display: block !important;
}

a.comments-trigger,
#comments-trigger,
.comments-trigger {
        display: none !important;
}

/* =========================================================================
 * 3. SEARCH BAR — flex di semua breakpoint, tanpa overlap
 * ====================================================================== */

.search-form,
.kl-v6-search-form,
.kl-search-form,
.widget_search .search-form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        position: static;
}

.search-form::before,
.kl-v6-search-form::before,
.kl-search-form::before {
        content: none !important;
        display: none !important;
}

.search-form .search-field,
.kl-v6-search-form input[type="search"],
.kl-search-form input[type="search"],
.search-form input[type="search"] {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0 14px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        color: #0f172a;
        box-sizing: border-box;
}

.search-form .search-submit,
.kl-v6-search-form .search-submit,
.kl-search-form .search-submit,
.widget_search .search-submit {
        position: static !important;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 46px;
        min-width: 84px;
        padding: 0 18px;
        border: 0;
        border-radius: 10px;
        background: var(--kl-v6-accent, #ff5a1f);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
}

.search-form .search-submit:hover,
.kl-v6-search-form .search-submit:hover {
        filter: brightness(.94);
}

@media (max-width: 640px) {
        .search-form,
        .kl-v6-search-form,
        .kl-search-form {
                gap: 8px;
        }

        .search-form .search-field,
        .kl-v6-search-form input[type="search"],
        .kl-search-form input[type="search"] {
                height: 48px;
        }

        .search-form .search-submit,
        .kl-v6-search-form .search-submit,
        .kl-search-form .search-submit {
                height: 48px;
                min-width: 72px;
                max-width: 34%;
                padding: 0 14px;
        }

        /* Grid lama v6 dimatikan supaya flex menang. */
        .kl-v6-search-form {
                display: flex !important;
                grid-template-columns: none !important;
        }
}

html.dark-mode .search-form .search-field,
html.kl-v6-dark .search-form .search-field,
html.dark-mode .kl-v6-search-form input[type="search"],
html.kl-v6-dark .kl-v6-search-form input[type="search"] {
        background: #0f172a;
        border-color: rgba(255, 255, 255, .14);
        color: #f8fafc;
}

/* =========================================================================
 * 4. TOOLBAR PEMBACA (A− / A / A+ / A++) + tombol Dengarkan
 * ====================================================================== */

.kl-v6-reader-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin: 18px 0 22px;
        padding: 10px 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
}

html.dark-mode .kl-v6-reader-toolbar,
html.kl-v6-dark .kl-v6-reader-toolbar {
        background: #111824;
        border-color: rgba(255, 255, 255, .1);
}

.kl-reader-font-group {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
}

.kl-reader-control {
        min-width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: transform .12s ease, box-shadow .12s ease;
}

.kl-reader-control:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.kl-reader-control[aria-pressed="true"] {
        background: var(--kl-v6-accent, #ff5a1f);
        border-color: var(--kl-v6-accent, #ff5a1f);
        color: #fff;
}

.kl-reader-audio .kl-reader-audio-label {
        font-size: 15px;
        font-weight: 700;
}

html.dark-mode .kl-reader-control,
html.kl-v6-dark .kl-reader-control {
        background: #0f172a;
        border-color: rgba(255, 255, 255, .14);
        color: #f8fafc;
}

/* =========================================================================
 * 5. RINGKASAN AI — padding lega + keterbacaan di layar kecil
 * ====================================================================== */

.kl-ai-summary,
aside.kl-ai-summary.kl-ai-summary-ready {
        margin: 20px 0 26px;
        padding: 20px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        box-sizing: border-box;
}

.kl-ai-summary h2 {
        font-size: 18px !important;
        line-height: 1.35;
        font-weight: 800;
        margin: 0 0 4px;
}

.kl-ai-summary-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--kl-v6-accent, #ff5a1f);
        margin-bottom: 6px;
}

.kl-ai-summary-container {
        margin-top: 12px;
        padding: 16px 18px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
}

.kl-ai-summary-content {
        font-size: 16px;
        line-height: 1.75;
}

.kl-ai-summary-content ul,
.kl-ai-summary-local {
        padding-left: 20px;
        margin: 0;
}

.kl-ai-summary-content li {
        margin-bottom: 10px;
        line-height: 1.7;
}

.kl-ai-summary-note {
        margin: 14px 0 0;
        font-size: 12.5px;
        line-height: 1.6;
        color: #64748b;
}

.kl-ai-summary-native-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        padding: 9px 16px;
        font-weight: 700;
        font-size: 14px;
        background: #fff;
        color: #111827;
        transition: background .15s ease;
}

.kl-ai-summary-native-toggle:hover {
        background: #fff7ed;
}

.kl-ai-summary-play {
        flex: 0 0 auto;
        color: var(--kl-v6-accent, #ff5a1f);
        transition: transform .18s ease;
}

.kl-ai-summary-details[open] .kl-ai-summary-play {
        transform: rotate(90deg);
}

@media (max-width: 640px) {
        .kl-ai-summary {
                padding: 20px 16px;
        }

        .kl-ai-summary-content {
                font-size: 15.5px;
                line-height: 1.8;
        }

        .kl-ai-summary-container {
                padding: 14px;
        }
}

html.dark-mode .kl-ai-summary,
html.kl-v6-dark .kl-ai-summary {
        background: #111824;
        border-color: rgba(255, 255, 255, .1);
}

html.dark-mode .kl-ai-summary-container,
html.kl-v6-dark .kl-ai-summary-container,
html.dark-mode .kl-ai-summary-native-toggle,
html.kl-v6-dark .kl-ai-summary-native-toggle {
        background: #0f172a;
        border-color: rgba(255, 255, 255, .14);
        color: #f8fafc;
}

/* =========================================================================
 * 6. SOSIAL TERPADU — ikon konsisten di header, footer, drawer
 * ====================================================================== */

.kl-social-unified {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.kl-social-unified li {
        margin: 0;
}

.kl-social-unified a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(15, 23, 42, .06);
        color: #334155;
        font-size: 17px;
        line-height: 1;
        transition: transform .14s ease, background .14s ease, color .14s ease;
}

.kl-social-unified a:hover,
.kl-social-unified a:focus-visible {
        transform: translateY(-2px);
        background: var(--kl-v6-accent, #ff5a1f);
        color: #fff;
}

.kl-social-unified a svg.kl-icon {
        width: 18px;
        height: 18px;
}

.kl-social-unified a .fa-brands {
        font-size: 17px;
}

/* Header utility bar: ikon sejajar rapi. */
.qlm-sharing-inline.kl-social-unified--header {
        gap: 8px;
}

.qlm-sharing-inline.kl-social-unified--header a {
        width: 34px;
        height: 34px;
        font-size: 15px;
        background: transparent;
        color: inherit;
}

/* Footer: lingkaran terang di latar gelap. */
.kl-social-unified--footer a {
        background: rgba(255, 255, 255, .1);
        color: #f8fafc;
}

.kl-social-unified--footer a:hover,
.kl-social-unified--footer a:focus-visible {
        background: var(--kl-v6-accent, #ff5a1f);
        color: #fff;
}

/* Perbaiki ikon sosial footer lama agar tidak "error" (ukuran & jarak seragam). */
.kl-v5-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 4px 8px 4px 0;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .08);
        color: #f8fafc;
        font-size: 14px;
        text-decoration: none;
        transition: background .15s ease;
}

.kl-v5-footer-social a:hover {
        background: var(--kl-v6-accent, #ff5a1f);
        color: #fff;
}

.kl-v5-footer-social .kl-v5-social-icon svg,
.kl-v5-footer-social .kl-v5-social-icon i {
        width: 16px;
        height: 16px;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
}

.kl-v5-footer-social .kl-v5-social-icon i::before {
        font-size: 15px;
}

/* Drawer mobile. */
.kl-social-unified--drawer {
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 0;
}

/* =========================================================================
 * 7. PROTEKSI KONTEN — toast & dialog peringatan
 * ====================================================================== */

.kl-protection-toast {
        position: fixed;
        left: 50%;
        bottom: 28px;
        transform: translate(-50%, 16px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        max-width: min(92vw, 420px);
        padding: 12px 18px;
        border-radius: 12px;
        background: #111827;
        color: #fff;
        font-size: 14px;
        line-height: 1.5;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease;
        z-index: 99999;
}

.kl-protection-toast.is-visible {
        opacity: 1;
        transform: translate(-50%, 0);
}

.kl-protection-warning {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(8, 9, 13, .62);
        backdrop-filter: blur(3px);
        z-index: 99998;
}

.kl-protection-warning__card {
        max-width: min(92vw, 400px);
        padding: 26px 24px;
        border-radius: 18px;
        background: #fff;
        color: #111827;
        text-align: center;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.kl-protection-warning__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
        border-radius: 50%;
        background: #fef2f2;
        color: #dc2626;
}

.kl-protection-warning__title {
        margin: 0 0 8px;
        font-size: 19px;
        font-weight: 800;
}

.kl-protection-warning__message {
        margin: 0 0 18px;
        font-size: 14.5px;
        line-height: 1.65;
        color: #475569;
}

.kl-protection-warning__close {
        padding: 10px 26px;
        border: 0;
        border-radius: 999px;
        background: #111827;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
}

/* =========================================================================
 * 8. PETA & SEMATKAN POSTINGAN
 * ====================================================================== */

.kabarlagi-map-embed {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 240px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
}

.kabarlagi-map-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
}

.kabarlagi-map-shortcode {
        margin: 22px 0;
}

.kabarlagi-map-shortcode figcaption {
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #64748b;
}

/* Kartu sematkan postingan. */
.kabarlagi-embed-post {
        margin: 24px 0;
}

.kabarlagi-embed-post__kicker {
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--kl-v6-accent, #ff5a1f);
}

.kabarlagi-embed-post__card {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: stretch;
        padding: 16px;
        border: 1px solid #e2e8f0;
        border-left: 4px solid var(--kl-v6-accent, #ff5a1f);
        border-radius: 14px;
        background: #fff;
        text-decoration: none;
        transition: box-shadow .16s ease, transform .16s ease;
}

.kabarlagi-embed-post__card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
        text-decoration: none;
}

.kabarlagi-embed-post__media {
        flex: 0 0 200px;
        max-width: 100%;
        border-radius: 10px;
        overflow: hidden;
}

.kabarlagi-embed-post__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.kabarlagi-embed-post__body {
        flex: 1 1 260px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        color: #111827;
}

.kabarlagi-embed-post__title {
        font-size: 17px;
        line-height: 1.4;
        font-weight: 700;
}

.kabarlagi-embed-post__excerpt {
        font-size: 14.5px;
        line-height: 1.6;
        color: #475569;
}

.kabarlagi-embed-post__meta {
        font-size: 12.5px;
        color: #94a3b8;
}

@media (max-width: 600px) {
        .kabarlagi-embed-post__media {
                flex-basis: 100%;
        }
}

html.dark-mode .kabarlagi-embed-post__card,
html.kl-v6-dark .kabarlagi-embed-post__card {
        background: #111824;
        border-color: rgba(255, 255, 255, .12);
}

html.dark-mode .kabarlagi-embed-post__body,
html.kl-v6-dark .kabarlagi-embed-post__body {
        color: #f8fafc;
}

/* =========================================================================
 * 9. STORY — indikator jeda (tahan layar) + progress halus
 * ====================================================================== */

.kl-36-story__dialog[data-holding="1"] .kl-36-story__shell {
        animation: kl36-hold-pulse .6s ease-in-out infinite alternate;
}

@keyframes kl36-hold-pulse {
        from { opacity: 1; }
        to { opacity: .92; }
}

.kl-36-story__hold-hint {
        position: absolute;
        left: 50%;
        bottom: 88px;
        transform: translateX(-50%) translateY(6px);
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
        z-index: 5;
}

.kl-36-story__dialog[data-holding="1"] .kl-36-story__hold-hint {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
}

.kl-36-story__progress .is-active i {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: #fff;
        animation: kl36-progress var(--kl36-duration, 5500ms) linear forwards;
}

.kl-36-story__progress .is-done i {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: #fff;
}

@keyframes kl36-progress {
        from { width: 0; }
        to { width: 100%; }
}

.kl-36-story.is-paused .kl-36-story__progress .is-active i {
        animation-play-state: paused;
        opacity: .45;
}

/* =========================================================================
 * 10. AUTHOR BOX — jarak lega & hierarki bersih
 * ====================================================================== */

.kl-v4-author-box {
        gap: 18px;
        padding: 20px;
        border-radius: 16px;
}

.kl-v4-author-box h3 {
        font-size: 18px !important;
        font-weight: 800;
}

.kl-v4-author-box p {
        font-size: 15px;
        line-height: 1.7;
}

.author-info .author-description p {
        line-height: 1.7;
}

/* =========================================================================
 * 11. WIDGET SETELAH POST — tata letak rapi
 * ====================================================================== */

.widget-area.after-post {
        margin: 26px 0;
        padding: 20px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
}

.widget-area.after-post .widget {
        margin-bottom: 18px;
}

.widget-area.after-post .widget:last-child {
        margin-bottom: 0;
}

html.dark-mode .widget-area.after-post,
html.kl-v6-dark .widget-area.after-post {
        background: #111824;
        border-color: rgba(255, 255, 255, .1);
}

/* =========================================================================
 * 12. EMBED LANGSUNG — pemutar video muncul seketika dalam wrapper rasio
 * ====================================================================== */

.kabarlagi-media-facade.is-direct {
        position: relative;
        aspect-ratio: var(--kabarlagi-embed-ratio, 16 / 9);
        width: 100%;
        margin: 22px 0;
        overflow: hidden;
        border-radius: 14px;
        background: #0b0f17;
}

.kabarlagi-media-facade.is-direct iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        position: absolute;
        inset: 0;
}

.kabarlagi-media-facade.is-direct .kabarlagi-media-facade__poster {
        display: none;
}

.kabarlagi-media-facade.is-direct figcaption {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 600;
        color: rgba(255, 255, 255, .92);
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .18s ease, transform .18s ease;
        z-index: 2;
        pointer-events: none;
}

.kabarlagi-media-facade.is-direct:hover figcaption,
.kabarlagi-media-facade.is-direct:focus-within figcaption {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
}

.kabarlagi-media-facade.is-direct figcaption a {
        color: inherit;
        text-decoration: none;
}

.kabarlagi-media-facade.is-direct--short,
.kabarlagi-media-facade--short.is-direct {
        max-width: min(100%, 420px);
        margin-inline: auto;
}