/*
Theme Name: Berka Strategika
Theme URI: https://berkastrategika.or.id
Author: Berka Strategika
Author URI: https://berkastrategika.or.id
Description: Theme resmi Berka Strategika
Version: 1.0
License: GPL v2 or later
Text Domain: berkastrategika
*/

/* =========================================================
   RESET
========================================================= */
body {
    margin: 0;
    padding: 0;
}

/* =========================================================
   CUSTOM FONTS
========================================================= */
@font-face {
    font-family: 'GothamNarrowBold';
    src: url('fonts/GothamNarrow-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FertigoproRegular';
    src: url('fonts/Fertigopro-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.font-berka {
    font-family: 'GothamNarrowBold', sans-serif;
}

.font-strategika {
    font-family: 'FertigoproRegular', sans-serif;
}

/* =========================================================
   HERO ANIMATIONS
========================================================= */
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-animate {
    opacity: 0;
    animation: slideUpFade 1.2s ease-out forwards;
}

.hero-delay-0 {
    animation-delay: 0s;
}

.hero-delay-1 {
    animation-delay: 0.5s;
}

.hero-delay-2 {
    animation-delay: 1s;
}

.hero-delay-3 {
    animation-delay: 1.5s;
}

.hero-delay-4 {
    animation-delay: 1.8s;
}

/* =========================================================
   TYPOGRAPHY HELPERS
========================================================= */
.text-soft-shadow {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.85);
}

.menu-text-shadow {
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.svg-shadow {
    filter: drop-shadow(2px 2px 10px rgba(42, 41, 41, 0.85));
}

/* =========================================================
   STICKY HEADER
========================================================= */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(14, 58, 77, 0);
    box-shadow: none;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* =========================================================
   SWIPER — POLICY SLIDER
========================================================= */
#policy-slider-viewport.swiper {
    overflow: visible;
}

#policy-slider-viewport .swiper-wrapper {
    overflow: visible;
}

#policy-slider-viewport .swiper-slide {
    position: relative;
    height: auto;
}

/* Separator vertikal di sisi kanan setiap slide (kecuali terakhir) */
#policy-slider-viewport .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
}

#policy-slider-viewport .swiper-slide:last-child::after {
    display: none;
}

/* Global swiper overflow */
.swiper {
    overflow: visible;
}

.swiper-wrapper {
    overflow: visible;
}

.swiper-slide {
    position: relative;
    height: auto;
}

/* Default: tidak ada separator */
.swiper-slide::after {
    display: none;
}

/* Separator hanya untuk slide yang terlihat */
.swiper-slide.swiper-slide-visible::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
}

/* Jangan tampilkan separator di slide paling kanan yang visible */
.swiper-slide.swiper-slide-visible:last-of-type::after {
    display: none;
}

/* Slide content padding dari separator */
.slide-content {
    padding-right: 2rem;
}

/* =========================================================
   SWIPER — PAGINATION BULLETS
========================================================= */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
}

.swiper-pagination-bullet-active {
    width: 32px;
    background: #ffffff;
}

.swiper-pagination {
    text-align: left !important;
    padding-left: 0 !important;
}

/* Container bullets */
#policy-bullets {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 4rem;
    padding-left: 0.25rem;
}

/* =========================================================
   SWIPER — FORWARD BUTTON (Policy)
========================================================= */
#policy-forward {
    position: absolute;
    top: 90%;
    right: 0;
    transform: translateY(-50%) scale(1.5);
    width: 84px;
    height: 84px;
    color: #ffffff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
    z-index: 30;
}

#policy-forward:hover {
    transform: translateY(-50%) scale(1.6);
}

/* =========================================================
   SWIPER — FGD PAGINATION
========================================================= */
.fgdSwiper .swiper-pagination {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    text-align: right !important;
}

.fgdSwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
}

.fgdSwiper .swiper-pagination-bullet-active {
    background: #ffffff;
}

/* =========================================================
   SWIPER — PUBLIKASI
========================================================= */
.publikasiSwiper {
    padding-right: 0 !important;
}

.publikasiSwiper .swiper-wrapper {
    padding-right: 0 !important;
}

#publikasi-back {
    position: absolute;
    top: 50%;
    left: -70px;
    transform: translateY(-50%) scale(1.5);
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 30;
    transition: 0.3s ease;
}

#publikasi-back:hover {
    transform: translateY(-50%) scale(1.1);
}

#publikasi-bullets {
    position: absolute;
    bottom: -50px;
    left: 0;
    display: flex;
    gap: 10px;
}

.publikasiSwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);
}

.publikasiSwiper .swiper-pagination-bullet-active {
    background: #ffffff;
}

/* =========================================================
   TIM KAMI — FADE ANIMATION
========================================================= */
.fade-item {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.fade-out {
    opacity: 0 !important;
    transform: translateY(8px);
}

/* =========================================================
   TIM KAMI — MODAL
========================================================= */
.modal-overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.modal-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* =========================================================
   RESPONSIVE — MOBILE (max-width: 768px)
========================================================= */
@media (max-width: 768px) {

    /* Hide policy forward button */
    #policy-forward {
        display: none;
    }

    /* Hero section */
    .relative.h-screen {
        min-height: 100vh;
    }

    /* Swiper pagination position */
    .mySwiper .swiper-pagination {
        bottom: 12px !important;
        left: 16px !important;
    }

    /* Publikasi slider */
    .publikasiSwiper {
        overflow: hidden;
    }

    /* Program & Layanan — grid ke 1 kolom */
    section.bg-\[\#0f3b4c\] .grid {
        grid-template-columns: 1fr !important;
    }

    section.bg-\[\#0f3b4c\] .grid>div {
        grid-column: span 1 !important;
        aspect-ratio: auto !important;
        padding: 40px 24px !important;
    }

    section.bg-\[\#0f3b4c\] .grid i {
        font-size: 40px !important;
        margin-bottom: 20px !important;
    }

    section.bg-\[\#0f3b4c\] .grid h3 {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    /* Footer grid ke 1 kolom */
    footer .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    footer .grid.grid-cols-4>div {
        width: 100%;
    }

    /* Section titles */
    section h2 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    section p.text-xl {
        font-size: 20px !important;
        line-height: 1.4 !important;
        font-weight: lighter;
    }
}

/* =========================================================
   RESPONSIVE — DESKTOP (min-width: 1024px)
========================================================= */
@media (min-width: 1024px) {

    .mySwiper {
        padding-bottom: 28px;
    }

    .mySwiper .swiper-pagination {
        bottom: 8px !important;
    }
}

/* ===== VIDEO PODCAST GRID ===== */

.vp-grid {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 15px;
}

/* video samping */
.vp-side {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 15px;
}

/* ===== MOBILE ===== */
@media (max-width:768px) {

    .vp-grid {
        grid-template-columns: 1fr;
    }

    .vp-side {
        grid-template-rows: none;
        grid-template-columns: 1fr;
    }

    .vp-side a {
        flex-direction: row;
        height: auto;
    }

    .vp-side a div:first-child {
        width: 40%;
        aspect-ratio: 16/9;
    }

}

/*
 * style-additions.css — Berka Strategika
 *
 * Tambahkan isi file ini ke style.css utama tema.
 * Berisi CSS yang sebelumnya ada sebagai inline <style> di template:
 *   - .podcast-tab-btn.active-tab  (dari front-page.php)
 *   - .berka-prose                 (dari page-publikasi-detil.php)
 */


/* =========================================================
   VIDEO & PODCAST TAB — active state
   Dipindahkan dari front-page.php
========================================================= */
.podcast-tab-btn.active-tab {
    color: #fff;
    border-bottom-color: #0069B9;
}


/* =========================================================
   BERKA PROSE — styling untuk konten artikel/publikasi
   Dipindahkan dari page-publikasi-detil.php
========================================================= */
.berka-prose {
    color: #374151;
    line-height: 1.8;
}

.berka-prose p {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    min-height: 1.6em;
}

.berka-prose h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #0e3a4d;
    margin: 2.5rem 0 1.25rem;
    line-height: 1.25;
}

.berka-prose h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: #0e3a4d;
    margin: 2rem 0 1rem;
}

.berka-prose h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0e3a4d;
    margin: 1.5rem 0 0.75rem;
}

.berka-prose ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.berka-prose ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.berka-prose li {
    margin-bottom: 0.5rem;
}

.berka-prose blockquote {
    border-left: 4px solid #0069B9;
    padding: 0.5rem 0 0.5rem 1.25rem;
    margin: 1.5rem 0;
    color: #555;
    font-style: italic;
}

.berka-prose a {
    color: #0069B9;
    text-decoration: underline;
}

.berka-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}

.berka-prose strong {
    font-weight: 700;
    color: #0e3a4d;
}

.berka-prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.berka-prose th {
    background: #0e3a4d;
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
}

.berka-prose td {
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
}

.berka-prose tr:nth-child(even) td {
    background: #f8fafc;
}

.berka-prose figure {
    margin: 1.5rem 0;
}

.berka-prose figcaption {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

/* =========================================================
   INFORMASI AGENDA — page-informasi-agenda.php
   single-info_agenda.php
   Semua class agenda-* terdefinisi di sini.
========================================================= */

/* ── Hero ── */
.agenda-hero {
    min-height: 45vh;
    padding-top: 6rem;
    padding-bottom: 5rem;
}

@media (min-width: 1024px) {
    .agenda-hero {
        min-height: 65vh;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ── Live dot ── */
.agenda-live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #22c55e;
    animation: agenda-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

.agenda-live-dot-sm {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #22c55e;
    animation: agenda-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes agenda-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(1.3);
    }
}

/* ── Badge berlangsung (listing page) ── */
.agenda-badge-berlangsung {
    background-color: rgba(22, 163, 74, .9);
    color: #fff;
    letter-spacing: .06em;
    backdrop-filter: blur(4px);
}

/* ── Card berlangsung utama ── */
.agenda-berlangsung-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: box-shadow .3s;
}

.agenda-berlangsung-card:hover {
    box-shadow: 0 20px 40px rgba(14, 58, 77, .12);
}

/* ── Empty states ── */
.agenda-empty-berlangsung {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

/* ── Buttons ── */
.agenda-btn-primary {
    background-color: #0069B9;
    color: #fff;
    transition: background-color .2s, transform .15s;
}

.agenda-btn-primary:hover {
    background-color: #0057a0;
}

.agenda-btn-outline {
    border: 1.5px solid #0069B9;
    color: #0069B9;
    transition: background-color .2s, color .2s;
}

.agenda-btn-outline:hover {
    background-color: #0069B9;
    color: #fff;
}

.agenda-btn-ghost {
    border: 1.5px solid rgba(255, 255, 255, .5);
    color: #fff;
    transition: background-color .2s;
}

.agenda-btn-ghost:hover {
    background-color: rgba(255, 255, 255, .1);
}

/* ── Mendatang card grid ── */
.agenda-mendatang-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .3s, transform .3s;
    display: flex;
    flex-direction: column;
}

.agenda-mendatang-card:hover {
    box-shadow: 0 12px 32px rgba(14, 58, 77, .12);
    transform: translateY(-3px);
}

.agenda-card-thumb-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #0e3a4d;
}

.agenda-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.agenda-card-thumb-wrap:hover .agenda-card-thumb {
    transform: scale(1.05);
}

.agenda-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 60%);
}

.agenda-card-badge-mendatang {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #0069B9;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.agenda-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.agenda-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1c2d3a;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agenda-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.agenda-card-title a:hover {
    color: #0069B9;
}

.agenda-card-excerpt {
    font-size: .8125rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.agenda-card-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.agenda-card-meta-item {
    font-size: .75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.agenda-card-meta-item i {
    color: #0069B9;
    font-size: 10px;
    width: 12px;
    text-align: center;
}

.agenda-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    margin-top: auto;
}

.agenda-card-detail-btn {
    font-size: .75rem;
    font-weight: 600;
    color: #0069B9;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap .2s;
}

.agenda-card-detail-btn:hover {
    gap: 8px;
}

.agenda-card-daftar-btn {
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background-color: #0069B9;
    padding: 4px 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    transition: background-color .2s;
}

.agenda-card-daftar-btn:hover {
    background-color: #0057a0;
}

/* ── Histori rows ── */
.agenda-histori-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 16px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.agenda-histori-row:hover {
    background-color: #fff;
    border-color: #0069B9;
    box-shadow: 0 4px 16px rgba(0, 105, 185, .08);
}

.agenda-histori-thumb-wrap {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    overflow: hidden;
    background: #e2e8f0;
}

@media (min-width: 640px) {
    .agenda-histori-thumb-wrap {
        width: 110px;
        height: 75px;
    }
}

.agenda-histori-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.agenda-histori-row:hover .agenda-histori-thumb {
    transform: scale(1.05);
}

.agenda-histori-body {
    flex: 1;
    min-width: 0;
}

.agenda-histori-badge-selesai {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4b5563;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 2px 8px;
    margin-bottom: 5px;
}

.agenda-histori-title {
    font-size: .9375rem;
    font-weight: 600;
    color: #1c2d3a;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.agenda-histori-row:hover .agenda-histori-title {
    color: #0069B9;
}

.agenda-histori-meta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.agenda-histori-meta {
    font-size: .6875rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
}

.agenda-histori-meta i {
    color: #0069B9;
    font-size: 9px;
}

.agenda-histori-arrow {
    flex-shrink: 0;
    color: #cbd5e1;
    font-size: 12px;
    transition: color .2s, transform .2s;
}

.agenda-histori-row:hover .agenda-histori-arrow {
    color: #0069B9;
    transform: translateX(3px);
}

/* ── Filter tabs ── */
.agenda-filter-btn {
    font-size: .75rem;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 6px 16px;
    cursor: pointer;
    transition: all .2s;
}

.agenda-filter-btn:hover {
    color: #0069B9;
    border-color: #0069B9;
}

.agenda-filter-active {
    color: #0069B9;
    background: rgba(0, 105, 185, .07);
    border-color: #0069B9;
}

/* =========================================================
   ANALISIS PAKAR — HERO STATS (selalu horizontal, tidak wrap)
========================================================= */
.analisis-hero-stats {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
}

.analisis-stat-item {
    flex: 1 1 0;
    min-width: 0;
}

.analisis-stat-divider {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: clamp(1rem, 4vw, 2.5rem);
}

/* Angka stat — ukuran adaptif agar tidak pecah di layar kecil */
.analisis-hero-stats #stat-tulisan,
.analisis-hero-stats #stat-kontributor,
.analisis-hero-stats #stat-topik {
    font-size: clamp(1.25rem, 5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
}

/* Label stat — sedikit lebih kecil di mobile agar cukup */
.analisis-hero-stats p.text-xs {
    font-size: clamp(0.55rem, 2vw, 0.75rem);
    white-space: nowrap;
}

/* =========================================================
   SINGLE INFO AGENDA
========================================================= */


/* ── Status badges (single hero) ── */
.agenda-single-badge-sedang-berlangsung {
    background-color: rgba(22, 163, 74, .9);
    color: #fff;
    letter-spacing: .06em;
}

.agenda-single-badge-mendatang {
    background-color: rgba(0, 105, 185, .9);
    color: #fff;
    letter-spacing: .06em;
}

.agenda-single-badge-selesai {
    background-color: rgba(75, 85, 99, .8);
    color: #fff;
    letter-spacing: .06em;
}

/* ── Prose content ── */
.agenda-single-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #374151;
}

.agenda-single-content h2,
.agenda-single-content h3,
.agenda-single-content h4 {
    color: #1c2d3a;
    font-weight: 600;
    margin-top: 2em;
    margin-bottom: .6em;
    line-height: 1.3;
}

.agenda-single-content h2 {
    font-size: 1.5rem;
}

.agenda-single-content h3 {
    font-size: 1.25rem;
}

.agenda-single-content p {
    margin-bottom: 0;
    padding-bottom: 1.25em;
    min-height: 1.6em;
}

.agenda-single-content ul,
.agenda-single-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25em;
}

.agenda-single-content li {
    margin-bottom: .4em;
}

.agenda-single-content a {
    color: #0069B9;
    text-decoration: underline;
}

.agenda-single-content blockquote {
    border-left: 3px solid #0069B9;
    padding-left: 1.25rem;
    color: #4b5563;
    font-style: italic;
    margin: 1.5em 0;
}

.agenda-single-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
}

/* ── Share buttons ── */
.agenda-share-btn {
    border: 1px solid #e2e8f0;
    color: #4b5563;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}

.agenda-share-btn:hover {
    background-color: #0069B9;
    color: #fff;
    border-color: #0069B9;
}

/* ── Terkait card ── */
.agenda-terkait-card {
    border: 1px solid #e2e8f0;
}

.agenda-terkait-card:hover {
    border-color: #0069B9;
}

/* =======================================================
   PROFIL PAKAR — artikel list (#pakar-list)
   Dirender via AJAX oleh main.js (renderCard)
======================================================= */

/* Item wrapper — flex row, thumbnail | konten */
#pakar-list a.group {
    align-items: flex-start;
}

/* Thumbnail: 7rem mobile → 8rem sm ke atas */
#pakar-list .flex-shrink-0.overflow-hidden.bg-gray-100 {
    width: 7rem;
    height: 7rem;
}

@media (min-width: 640px) {
    #pakar-list .flex-shrink-0.overflow-hidden.bg-gray-100 {
        width: 8rem;
        height: 8rem;
    }
}

/* Kolom konten: stretch penuh, author tetap di bawah */
#pakar-list a.group>.flex-1 {
    min-height: 7rem;
    display: flex;
    flex-direction: column;
}

/* Author row — foto & nama sejajar vertikal */
#pakar-list a.group .flex.items-center.gap-2.mt-3 {
    margin-top: auto;
}

/* =========================================================
   SINGLE PORTOFOLIO PROJECT — LINE CLAMP & SK FILTER
========================================================= */

/* Line clamp utilities — dipakai di kartu satuan kegiatan */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Filter button — state aktif */
.sk-filter-active {
    color: #0069B9 !important;
    border-color: #0069B9 !important;
    background: rgba(0, 105, 185, 0.05);
}

/* Kartu satuan kegiatan — transisi hide/show via JS */
.sk-card.sk-hidden {
    display: none;
}

/* =========================================================
   SINGLE PORTOFOLIO PROJECT — HERO META & LIVE DOT
   Meta menyamping (horizontal) di bawah judul hero.
========================================================= */

/* Row kontainer — items sejajar horizontal, wrap di mobile kecil */
.porto-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    row-gap: 0.5rem;
}

/* Tiap item meta */
.porto-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    padding-right: 1.25rem;
}

.porto-meta-item i {
    color: #5bc0f0;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Pembatas titik kecil antar item (via pseudo-element setelah setiap item kecuali terakhir) */
.porto-meta-item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    margin-left: 1.25rem;
}

/* Live dot — hero badge "Berlangsung" */
.porto-live-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #fff;
    animation: portoPulse 1.4s ease-in-out infinite;
}

/* Live dot kecil — di sidebar */
.porto-live-dot-sm {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #16a34a;
    animation: portoPulse 1.4s ease-in-out infinite;
}

@keyframes portoPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}

/* Prose body content project */
.porto-single-content {
    color: #374151;
    line-height: 1.8;
    font-size: 1rem;
}

.porto-single-content h2,
.porto-single-content h3,
.porto-single-content h4 {
    color: #1c2d3a;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.porto-single-content p {
    margin-bottom: 0;
    padding-bottom: 1.25rem;
    min-height: 1.6em;
}

.porto-single-content a {
    color: #0069B9;
    text-decoration: underline;
}

.porto-single-content ul,
.porto-single-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.porto-single-content li {
    margin-bottom: 0.4rem;
}

/* =========================================================
   BERKA CONTENT DEFAULTS
   ─────────────────────────────────────────────────────────
   Override terpadu untuk semua wrapper konten artikel di
   seluruh tema. Dicantumkan di akhir agar specificity-nya
   memenangkan override terhadap rule parsial di atas.

   Selector yang dicakup:
     .berka-prose           → page-publikasi-detil.php,
                               single-video_podcast.php
     .agenda-single-content → single-info_agenda.php,
                               single-satuan_kegiatan.php
     .porto-single-content  → single-portofolio_project.php
     .prose                 → single-analisis_pakar.php

   Masalah utama yang diselesaikan:
     1. Tailwind Preflight me-reset margin semua elemen → 0
     2. "Margin collapse" CSS menyebabkan margin-bottom
        berturutan antar block saling menelan satu sama lain
     3. <p></p> / <p><br></p> kosong tidak punya tinggi
   Solusi: ganti margin-bottom → padding-bottom (tidak
   collapse) + min-height pada elemen yang bisa kosong.
========================================================= */

/* ── Alias pendek untuk selector bersama ── */

/* ─── PARAGRAF ─────────────────────────────────────────── */
.berka-prose p,
.agenda-single-content p,
.porto-single-content p,
.prose p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1.4rem;
    min-height: 1.6em;
    line-height: 1.85;
}

/* Paragraf kosong <p></p> */
.berka-prose p:empty,
.agenda-single-content p:empty,
.porto-single-content p:empty,
.prose p:empty {
    min-height: 1.4em;
    padding-bottom: 0.75rem;
}

/* <p><br></p> — Classic Editor line break */
.berka-prose p>br:only-child,
.agenda-single-content p>br:only-child,
.porto-single-content p>br:only-child,
.prose p>br:only-child {
    display: block;
    height: 0.5rem;
}

/* Paragraf terakhir — hapus ruang sisa di bawah */
.berka-prose p:last-child,
.agenda-single-content p:last-child,
.porto-single-content p:last-child,
.prose p:last-child {
    padding-bottom: 0;
}

/* ─── HEADINGS ─────────────────────────────────────────── */
.berka-prose h1,
.berka-prose h2,
.berka-prose h3,
.berka-prose h4,
.berka-prose h5,
.berka-prose h6,
.agenda-single-content h1,
.agenda-single-content h2,
.agenda-single-content h3,
.agenda-single-content h4,
.agenda-single-content h5,
.agenda-single-content h6,
.porto-single-content h1,
.porto-single-content h2,
.porto-single-content h3,
.porto-single-content h4,
.porto-single-content h5,
.porto-single-content h6,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2rem;
    padding-bottom: 0.75rem;
    color: #1c2d3a;
    font-weight: 600;
    line-height: 1.3;
}

.berka-prose h1,
.agenda-single-content h1,
.porto-single-content h1,
.prose h1 {
    font-size: 2rem;
}

.berka-prose h2,
.agenda-single-content h2,
.porto-single-content h2,
.prose h2 {
    font-size: 1.75rem;
}

.berka-prose h3,
.agenda-single-content h3,
.porto-single-content h3,
.prose h3 {
    font-size: 1.375rem;
}

.berka-prose h4,
.agenda-single-content h4,
.porto-single-content h4,
.prose h4 {
    font-size: 1.125rem;
}

.berka-prose h5,
.agenda-single-content h5,
.porto-single-content h5,
.prose h5 {
    font-size: 1rem;
}

.berka-prose h6,
.agenda-single-content h6,
.porto-single-content h6,
.prose h6 {
    font-size: 0.9rem;
    color: #4b5563;
}

/* Heading pertama tidak perlu padding-top */
.berka-prose> :is(h1, h2, h3, h4, h5, h6):first-child,
.agenda-single-content> :is(h1, h2, h3, h4, h5, h6):first-child,
.porto-single-content> :is(h1, h2, h3, h4, h5, h6):first-child,
.prose> :is(h1, h2, h3, h4, h5, h6):first-child {
    padding-top: 0;
}

/* ─── UNORDERED LIST ────────────────────────────────────── */
.berka-prose ul,
.agenda-single-content ul,
.porto-single-content ul,
.prose ul {
    list-style: disc;
    padding-left: 1.6rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1.4rem;
}

/* Nested ul */
.berka-prose ul ul,
.agenda-single-content ul ul,
.porto-single-content ul ul,
.prose ul ul {
    list-style: circle;
    padding-bottom: 0.25rem;
}

.berka-prose ul ul ul,
.agenda-single-content ul ul ul,
.porto-single-content ul ul ul,
.prose ul ul ul {
    list-style: square;
}

/* ─── ORDERED LIST ──────────────────────────────────────── */
.berka-prose ol,
.agenda-single-content ol,
.porto-single-content ol,
.prose ol {
    list-style: decimal;
    padding-left: 1.6rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 1.4rem;
}

.berka-prose ol ol,
.agenda-single-content ol ol,
.porto-single-content ol ol,
.prose ol ol {
    list-style: lower-alpha;
    padding-bottom: 0.25rem;
}

.berka-prose ol ol ol,
.agenda-single-content ol ol ol,
.porto-single-content ol ol ol,
.prose ol ol ol {
    list-style: lower-roman;
}

/* ─── LIST ITEM ─────────────────────────────────────────── */
.berka-prose li,
.agenda-single-content li,
.porto-single-content li,
.prose li {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0.45rem;
    line-height: 1.75;
    color: #374151;
}

.berka-prose li:last-child,
.agenda-single-content li:last-child,
.porto-single-content li:last-child,
.prose li:last-child {
    padding-bottom: 0;
}

/* List di dalam li (nested) tidak beri padding bawah berlebih */
.berka-prose li>ul,
.berka-prose li>ol,
.agenda-single-content li>ul,
.agenda-single-content li>ol,
.porto-single-content li>ul,
.porto-single-content li>ol,
.prose li>ul,
.prose li>ol {
    padding-bottom: 0;
    margin-top: 0.35rem;
}

/* ─── BLOCKQUOTE ────────────────────────────────────────── */
.berka-prose blockquote,
.agenda-single-content blockquote,
.porto-single-content blockquote,
.prose blockquote {
    margin: 0;
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    margin-bottom: 1.4rem;
    margin-top: 0.25rem;
    border-left: 4px solid #0069B9;
    background: #f0f7ff;
    color: #0e3a4d;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

.berka-prose blockquote p,
.agenda-single-content blockquote p,
.porto-single-content blockquote p,
.prose blockquote p {
    padding-bottom: 0 !important;
    min-height: unset !important;
}

/* ─── HORIZONTAL RULE ───────────────────────────────────── */
.berka-prose hr,
.agenda-single-content hr,
.porto-single-content hr,
.prose hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0;
    padding-bottom: 1.75rem;
}

/* ─── IMAGES & FIGURE ───────────────────────────────────── */
.berka-prose img,
.agenda-single-content img,
.porto-single-content img,
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin-bottom: 1.4rem;
}

.berka-prose figure,
.agenda-single-content figure,
.porto-single-content figure,
.prose figure {
    margin: 0;
    padding-bottom: 1.75rem;
}

.berka-prose figure img,
.agenda-single-content figure img,
.porto-single-content figure img,
.prose figure img {
    margin-bottom: 0;
}

.berka-prose figcaption,
.agenda-single-content figcaption,
.porto-single-content figcaption,
.prose figcaption {
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    padding-top: 0.5rem;
    font-style: italic;
}

/* ─── INLINE FORMATTING ─────────────────────────────────── */
.berka-prose strong,
.agenda-single-content strong,
.porto-single-content strong,
.prose strong {
    font-weight: 700;
    color: #1c2d3a;
}

.berka-prose em,
.agenda-single-content em,
.porto-single-content em,
.prose em {
    font-style: italic;
    color: inherit;
}

.berka-prose a,
.agenda-single-content a,
.porto-single-content a,
.prose a {
    color: #0069B9;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.berka-prose a:hover,
.agenda-single-content a:hover,
.porto-single-content a:hover,
.prose a:hover {
    color: #0e3a4d;
}

/* ─── INLINE CODE & PRE ─────────────────────────────────── */
.berka-prose code,
.agenda-single-content code,
.porto-single-content code,
.prose code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
    background: #f1f5f9;
    color: #0e3a4d;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    border: 1px solid #e2e8f0;
    word-break: break-word;
}

.berka-prose pre,
.agenda-single-content pre,
.porto-single-content pre,
.prose pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0;
    padding-bottom: 1.4rem;
    font-size: 0.875rem;
    line-height: 1.7;
}

.berka-prose pre code,
.agenda-single-content pre code,
.porto-single-content pre code,
.prose pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ─── TABLE ─────────────────────────────────────────────── */
.berka-prose table,
.agenda-single-content table,
.porto-single-content table,
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.75rem;
    font-size: 0.95rem;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.berka-prose thead,
.agenda-single-content thead,
.porto-single-content thead,
.prose thead {
    background: #0e3a4d;
}

.berka-prose th,
.agenda-single-content th,
.porto-single-content th,
.prose th {
    color: #fff;
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    border: none;
}

.berka-prose td,
.agenda-single-content td,
.porto-single-content td,
.prose td {
    padding: 9px 16px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
    color: #374151;
}

.berka-prose tr:last-child td,
.agenda-single-content tr:last-child td,
.porto-single-content tr:last-child td,
.prose tr:last-child td {
    border-bottom: none;
}

.berka-prose tr:nth-child(even) td,
.agenda-single-content tr:nth-child(even) td,
.porto-single-content tr:nth-child(even) td,
.prose tr:nth-child(even) td {
    background: #f8fafc;
}