/* =================================================================
   BLOG WONDO — Modern Design System 2026
   Premium travel blog, youth-first, clean & confident

   Brand Blue  : #137eff  (primary)
   Blue Dark   : #0055cc  (hover)
   Blue Light  : #eaf3ff  (badge bg)
   Accent Cyan : #06b6d4  (gradient end)
   Dark Navy   : #0d1117  (header, footer)
   Body BG     : #f4f6f9
   Card BG     : #ffffff
   Text Dark   : #111827
   Text Body   : #374151
   Text Muted  : #6b7280
   Border      : #e5e7eb
   ================================================================= */

/* ── Skala font blog: 10 → 18 selisih 1px. Heading besar (section 18,
   headline clamp) dikecualikan. Teks sekartu/sebaris wajib naik satu
   tangga penuh, dilarang .5px agar tidak jomplang. ── */
:root {
    --wb-fs-2xs: 10px;
    --wb-fs-xs:  11px;
    --wb-fs-sm:  12px;
    --wb-fs-md:  13px;
    --wb-fs-lg:  14px;
    --wb-fs-xl:  15px;
    --wb-fs-2xl: 16px;
    --wb-fs-3xl: 17px;
    --wb-fs-4xl: 18px;

    /* Brand */
    --wb-blue:        #137eff;
    --wb-blue-dark:   #0055cc;
    --wb-blue-dim:    #eaf3ff;
    --wb-cyan:        #06b6d4;
    --wb-gradient:    linear-gradient(135deg, #137eff 0%, #06b6d4 100%);
    --wb-glow:        0 4px 20px rgba(19, 126, 255, 0.28);

    /* Neutrals */
    --wb-dark:        #0d1117;
    --wb-ink:         #111827;
    --wb-body:        #374151;
    --wb-muted:       #6b7280;
    --wb-border:      #e5e7eb;
    --wb-border-soft: #f3f4f6;
    --wb-bg:          #f4f6f9;
    --wb-white:       #ffffff;

    /* Radius */
    --wb-r-sm:  6px;
    --wb-r:     12px;
    --wb-r-md:  16px;
    --wb-r-lg:  20px;
    --wb-r-xl:  28px;

    /* Shadows */
    --wb-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --wb-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06);
    --wb-shadow:    0 2px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08);
    --wb-shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 24px 48px rgba(0,0,0,0.12);
    --wb-shadow-up: 0 -4px 20px rgba(0,0,0,0.06);

    /* Timing */
    --wb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --wb-dur:  0.28s;

    /* Typography */
    --wb-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, html {
    background: var(--wb-bg) !important;
    font-family: var(--wb-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: var(--wb-font) !important;
    color: var(--wb-ink) !important;
}

.container { max-width: 1200px !important; }

main.fix {
    background: var(--wb-bg) !important;
    min-height: 60vh;
}

/* ── Disable old wng-hero (replaced by editorial layout) ─────── */
.wng-hero-section { display: none !important; }
.wng-chip-strip    { display: none !important; }
.wng-cat-hero      { display: none !important; }

/* Disable conflicting old header inner elements */
.menu-area .menu-wrap,
.menu-area .menu-nav,
.menu-area > .container,
.menu-area > .container > .row,
.wng-header-actions { display: none !important; }

/* =================================================================
   HEADER  ── two-tier: dark top + white nav
   ================================================================= */

/* Reset the wng-header wrapper */
.wng-header,
.header-style-three,
.menu-area {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.wng-header {
    display: flex !important;
    flex-direction: column !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Top bar biru lama dihapus — header kini single nav (lihat .kps-navbar). */

/* ── Single nav bar: logo kiri, kategori tengah, aksi kanan ── */
.kps-navbar {
    background: var(--wb-white);
    height: 64px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--wb-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.kps-navbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
}

.kps-navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.kps-navbar-logo {
    height: 40px;
    width: auto;
    display: block;
}

.kps-nav-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.kps-package-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: var(--wb-gradient);
    border-radius: 999px;
    padding: 9px 16px;
    box-shadow: var(--wb-glow);
    font-family: var(--wb-font);
    white-space: nowrap;
    transition: opacity var(--wb-dur), transform var(--wb-dur);
}

.kps-package-btn:hover {
    opacity: 0.9;
    color: #fff;
    transform: translateY(-1px);
}

.kps-drawer-package {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 18px 12px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--wb-gradient);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    font-family: var(--wb-font);
    box-shadow: var(--wb-glow);
}

/* Category chips di tengah navbar */
.kps-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    flex: 1;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.kps-nav-links::-webkit-scrollbar { display: none; }

.kps-nav-links li {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.kps-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1.5px solid var(--wb-border);
    border-radius: 999px;
    background: var(--wb-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--wb-body);
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--wb-font);
    transition:
        background var(--wb-dur),
        border-color var(--wb-dur),
        color var(--wb-dur),
        transform var(--wb-dur);
}

.kps-nav-chip:hover {
    color: var(--wb-blue);
    border-color: var(--wb-blue);
    transform: translateY(-1px);
}

.kps-nav-chip.is-active {
    background: var(--wb-blue);
    border-color: var(--wb-blue);
    color: #fff;
    box-shadow: var(--wb-glow);
}

.kps-nav-chip-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12));
}

.kps-nav-chip.is-active .kps-nav-chip-icon {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) brightness(1.1);
}

/* =================================================================
   MODERN HEADER SEARCH (Wondo Brand Theme)
   ================================================================= */
.kps-nav-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.kps-search-form {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    height: 38px;
    width: 270px;
    padding: 0 4px 0 12px;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    position: relative;
    box-sizing: border-box;
}

.kps-search-form:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}

.kps-search-form:focus-within {
    width: 320px;
    background: #ffffff;
    border-color: var(--wb-blue);
    box-shadow: 0 0 0 3.5px rgba(19, 126, 255, 0.15), 0 4px 12px rgba(19, 126, 255, 0.08);
}

.kps-search-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.kps-search-form:focus-within .kps-search-icon-wrap {
    color: var(--wb-blue);
}

.kps-search-input {
    background: transparent !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
    height: 100% !important;
    outline: none !important;
    width: 100% !important;
    flex: 1 !important;
    color: var(--wb-ink) !important;
    font-family: var(--wb-font) !important;
    border-radius: 0 !important;
}

.kps-search-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.kps-search-clear {
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    margin-right: 4px;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.kps-search-clear:hover {
    background: #cbd5e1;
    color: var(--wb-ink);
}

.kps-search-btn {
    background: linear-gradient(135deg, #137eff 0%, #06b6d4 100%);
    border: none;
    cursor: pointer;
    padding: 0 12px;
    height: 30px;
    border-radius: 999px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--wb-font);
    box-shadow: 0 2px 6px rgba(19, 126, 255, 0.25);
    flex-shrink: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.kps-search-btn:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 4px 10px rgba(19, 126, 255, 0.35);
    opacity: 0.95;
}

.kps-search-btn:active {
    transform: translateY(0);
}

/* Mobile Drawer Search */
.kps-drawer-search {
    padding: 12px 18px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.kps-drawer-search form {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    height: 38px;
    padding: 0 4px 0 12px;
    gap: 6px;
    color: #94a3b8;
    transition: border-color 0.2s, background 0.2s;
}

.kps-drawer-search form:focus-within {
    border-color: var(--wb-blue);
    background: #ffffff;
    color: var(--wb-blue);
    box-shadow: 0 0 0 3px rgba(19, 126, 255, 0.12);
}

.kps-drawer-search input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: var(--wb-font);
    color: var(--wb-ink);
    flex: 1;
    width: 100%;
}

.kps-drawer-search input::placeholder {
    color: #94a3b8;
}

.kps-drawer-search-clear {
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.kps-drawer-search button[type="submit"] {
    background: var(--wb-blue);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
    height: 30px;
    cursor: pointer;
    font-family: var(--wb-font);
    flex-shrink: 0;
}

/* Hamburger */
.kps-hamburger {
    background: none;
    border: 0;
    cursor: pointer;
    display: none;
    color: var(--wb-ink);
    padding: 8px;
    border-radius: var(--wb-r-sm);
    margin-right: 4px;
}

@media (max-width: 991.98px) {
    .kps-nav-links { display: none; }
    .kps-hamburger { display: flex; align-items: center; }
    .kps-nav-actions { display: none; }
    .kps-nav-search {
        flex: 1;
        max-width: 360px;
        margin-left: auto;
    }
    .kps-search-form {
        width: 100% !important;
    }
    .kps-search-form:focus-within {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .kps-navbar    { height: 56px; }
    .kps-navbar-inner { gap: 10px; padding: 0 14px; }
    .kps-navbar-logo { height: 34px; }
    .kps-nav-search {
        flex: 1;
        max-width: 100%;
        margin-left: 8px;
    }
    .kps-search-form {
        height: 36px;
        padding-left: 10px;
    }
    .kps-search-input {
        font-size: 12px !important;
        padding: 0 6px !important;
    }
    .kps-search-btn {
        height: 28px;
        padding: 0 10px;
        font-size: 11px;
    }
}

@media (max-width: 374.98px) {
    .kps-search-btn-text {
        display: none;
    }
    .kps-search-btn {
        padding: 0 8px;
    }
}

/* =================================================================
   SECTION HEADER  ── bold left-accent title
   ================================================================= */
.kps-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wb-border);
}

.kps-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--wb-ink);
    letter-spacing: -0.3px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--wb-font);
}

.kps-section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: var(--wb-gradient);
    border-radius: 2px;
    flex-shrink: 0;
}

.kps-view-all {
    font-size: 13px;
    font-weight: 700;
    color: var(--wb-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1.5px solid var(--wb-blue);
    border-radius: 999px;
    transition: all 0.2s var(--wb-ease);
    font-family: var(--wb-font);
}

.kps-view-all:hover {
    background: var(--wb-blue);
    color: #fff;
    box-shadow: var(--wb-glow);
}

/* Override legacy section heads too */
.wng-section-head .title,
.section-title h2.title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--wb-ink) !important;
    letter-spacing: -0.3px !important;
    text-transform: none !important;
}
.section-title h2.title::after {
    background: var(--wb-gradient) !important;
    height: 3px !important;
    width: 44px !important;
    border-radius: 2px !important;
}

/* =================================================================
   HOMEPAGE — editorial layout
   ================================================================= */

/* White editorial zone */
.kps-home-editorial {
    background: var(--wb-white);
    padding: 28px 0 0;
    border-bottom: 1px solid var(--wb-border);
}

/* ── Search bar ── */
.kps-home-search { margin-bottom: 24px; }

.kps-home-search form {
    display: flex;
    align-items: center;
    background: var(--wb-bg);
    border: 1.5px solid var(--wb-border);
    border-radius: 999px;
    height: 52px;
    max-width: 580px;
    overflow: hidden;
    transition: border-color var(--wb-dur), box-shadow var(--wb-dur), background var(--wb-dur);
    box-shadow: var(--wb-shadow-sm);
}

.kps-home-search form:focus-within {
    border-color: var(--wb-blue);
    background: var(--wb-white);
    box-shadow: 0 0 0 4px rgba(19,126,255,0.12), var(--wb-shadow-sm);
}

.kps-home-search input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 13px;
    padding: 0 22px;
    outline: none;
    color: var(--wb-ink);
    font-family: var(--wb-font);
}

.kps-home-search input::placeholder { color: var(--wb-muted); }

.kps-home-search button {
    background: var(--wb-gradient);
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    height: 40px;
    padding: 0 20px;
    margin: 6px 6px 6px 0;
    transition: opacity var(--wb-dur);
    box-shadow: var(--wb-glow);
    font-family: var(--wb-font);
}

.kps-home-search button:hover { opacity: 0.85; }

/* ── Headline grid: 1 besar + 2x2 seimbang ── */
.kps-headline-grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
    align-items: stretch;
}

.kps-headline-main-wrap {
    display: flex;
    min-width: 0;
}

.kps-headline-main-wrap .kps-headline-main {
    flex: 1;
}

@media (max-width: 1023px) { .kps-headline-grid { grid-template-columns: 1fr; } }

/* Main card */
.kps-headline-main {
    background: var(--wb-white);
    border-radius: var(--wb-r-md);
    overflow: hidden;
    border: 1px solid var(--wb-border);
    box-shadow: var(--wb-shadow-sm);
    transition: box-shadow var(--wb-dur), transform var(--wb-dur);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kps-headline-main:hover {
    box-shadow: var(--wb-shadow);
    transform: translateY(-2px);
}

.kps-headline-main-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.kps-headline-main-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--wb-ease);
}

.kps-headline-main:hover .kps-headline-main-thumb img { transform: scale(1.04); }

/* Subtle scrim at bottom of thumb */
.kps-headline-main-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(13,17,23,0.35) 100%);
    pointer-events: none;
}

.kps-headline-main-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.kps-headline-cat {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--wb-blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    background: var(--wb-blue-dim);
    padding: 3px 10px;
    border-radius: 999px;
    align-self: flex-start;
    transition: all 0.18s;
}

.kps-headline-cat:hover {
    background: var(--wb-blue);
    color: #fff;
}

.kps-headline-main-title {
    font-size: clamp(23px, 2.5vw, 30px);
    font-weight: 800;
    line-height: 1.42;
    letter-spacing: 0.01em;
    margin: 0 0 6px 0;
    color: var(--wb-ink);
    font-family: var(--wb-font);
}

.kps-headline-main-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s;
}

.kps-headline-main-title a:hover { color: var(--wb-blue); }

.kps-headline-main-excerpt {
    font-size: 13px;
    line-height: 1.65;
    color: var(--wb-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kps-headline-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--wb-muted);
    font-weight: 600;
    padding-top: 8px;
    border-top: 1px solid var(--wb-border-soft);
    font-family: var(--wb-font);
}

.kps-article-meta-sep { color: var(--wb-border); }

/* Side 2x2 grid — 4 kartu vertikal sama tinggi, seimbang lawan main card */
.kps-headline-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-content: stretch;
    min-width: 0;
}

.kps-headline-side .rv {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.kps-side-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: var(--wb-white);
    border-radius: var(--wb-r);
    text-decoration: none;
    border: 1px solid var(--wb-border);
    box-shadow: var(--wb-shadow-xs);
    transition: box-shadow var(--wb-dur), transform var(--wb-dur), border-color var(--wb-dur);
    overflow: hidden;
}

.kps-side-item:hover {
    box-shadow: var(--wb-shadow);
    transform: translateY(-2px);
    border-color: rgba(19,126,255,0.25);
}

.kps-side-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--wb-bg);
    flex-shrink: 0;
}

.kps-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--wb-ease);
}

.kps-side-item:hover .kps-side-thumb img { transform: scale(1.08); }

.kps-side-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 13px 13px;
}

.kps-side-cat {
    font-size: 12px;
    font-weight: 800;
    color: var(--wb-blue);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: block;
    font-family: var(--wb-font);
}

.kps-side-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: 0.01em;
    color: var(--wb-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    transition: color 0.18s;
    font-family: var(--wb-font);
}

.kps-side-item:hover .kps-side-title { color: var(--wb-blue); }

.kps-side-date {
    font-size: 12px;
    color: var(--wb-muted);
    margin-top: auto;
    font-family: var(--wb-font);
}

@media (max-width: 1023px) {
    .kps-headline-side { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .kps-headline-side { grid-template-columns: 1fr; }
}

/* Category chips live in the header now — see .kps-nav-chip. The former
   .kps-cat-strip / .kps-cat-chip block under "Artikel Terbaru" was removed
   when the homepage strip was dropped in favour of the header nav. */

/* =================================================================
   SPOTLIGHT KATEGORI (Desa + Gunung) — grid vertikal 4 kartu
   Beda dari Artikel Pilihan yang list horizontal.
   ================================================================= */
.kps-spotlight-section {
    padding: 8px 0 32px;
    background: var(--wb-bg);
}

.kps-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.kps-spotlight-grid .rv {
    display: flex;
    min-width: 0;
}

.kps-spotlight-grid .wng-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kps-spotlight-grid .wng-card-body {
    flex: 1;
}

@media (max-width: 1023px) {
    .kps-spotlight-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .kps-spotlight-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   ARTICLE LIST SECTION (homepage bottom)
   ================================================================= */
.kps-articles-section {
    padding: 32px 0 40px;
    background: var(--wb-bg);
}

/* Two-column layout: articles + sidebar */
.kps-content-cols {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1023px) { .kps-content-cols { grid-template-columns: 1fr; } }

/* Article list */
.kps-article-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kps-article-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--wb-white);
    border-radius: var(--wb-r);
    border: 1px solid var(--wb-border);
    text-decoration: none;
    box-shadow: var(--wb-shadow-xs);
    transition: box-shadow var(--wb-dur), transform var(--wb-dur), border-color var(--wb-dur);
    overflow: hidden;
}

.kps-article-item:hover {
    box-shadow: var(--wb-shadow);
    transform: translateY(-3px);
    border-color: rgba(19,126,255,0.2);
}

.kps-article-thumb {
    flex: 0 0 144px;
    height: 104px;
    overflow: hidden;
    border-radius: var(--wb-r-sm);
    background: var(--wb-bg);
    flex-shrink: 0;
}

.kps-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s var(--wb-ease);
}

.kps-article-item:hover .kps-article-thumb img { transform: scale(1.07); }

.kps-article-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kps-article-cat {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--wb-blue);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
    background: var(--wb-blue-dim);
    padding: 2px 9px;
    border-radius: 999px;
    align-self: flex-start;
    transition: all 0.18s;
    font-family: var(--wb-font);
}

.kps-article-cat:hover { background: var(--wb-blue); color: #fff; }

.kps-article-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.48;
    letter-spacing: 0.01em;
    color: var(--wb-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 5px 0;
    text-decoration: none;
    transition: color 0.18s;
    font-family: var(--wb-font);
}

.kps-article-item:hover .kps-article-title { color: var(--wb-blue); }

.kps-article-excerpt {
    font-size: 13px;
    line-height: 1.62;
    color: var(--wb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-family: var(--wb-font);
}

.kps-article-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--wb-muted);
    font-weight: 600;
    margin-top: auto;
    padding-top: 4px;
    font-family: var(--wb-font);
}

@media (max-width: 575px) {
    .kps-article-thumb { flex: 0 0 100px; height: 80px; }
    .kps-article-title { font-size: 15px; line-height: 1.45; }
}

/* =================================================================
   EXPLORE KATEGORI (homepage)
   ================================================================= */
/* =================================================================
   BREAKING NEWS TICKER
   ================================================================= */
@keyframes kps-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes kps-blink-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

.kps-breaking-bar {
    background: var(--wb-bg, #f8faff);
    border-top: 1px solid var(--wb-border, #e8edf5);
    border-bottom: 1px solid var(--wb-border, #e8edf5);
    padding: 0;
    overflow: hidden;
}

.kps-breaking-inner {
    display: flex;
    align-items: stretch;
    height: 46px;
    gap: 0;
}

.kps-breaking-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--wb-blue, #1a73e8) 0%, var(--wb-blue-dark, #0055cc) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 18px;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--wb-font, 'Plus Jakarta Sans', sans-serif);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    padding-right: 28px;
}

.kps-breaking-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    flex-shrink: 0;
    animation: kps-blink-dot 1.2s ease-in-out infinite;
}

.kps-breaking-track-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.kps-breaking-track-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, var(--wb-bg, #f8faff));
    pointer-events: none;
    z-index: 1;
}

.kps-breaking-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: kps-ticker 35s linear infinite;
    will-change: transform;
}

.kps-breaking-track:hover {
    animation-play-state: paused;
}

.kps-breaking-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 0 8px;
    transition: opacity 0.2s;
}

.kps-breaking-item:hover {
    opacity: 0.75;
}

.kps-breaking-cat {
    display: inline-block;
    background: var(--wb-blue-tint, #e8f0fe);
    color: var(--wb-blue, #1a73e8);
    font-size: 11px;
    font-weight: 700;
    padding: 2.5px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--wb-font, 'Plus Jakarta Sans', sans-serif);
}

.kps-breaking-title {
    color: var(--wb-text, #1e293b);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.015em;
    font-family: var(--wb-font, 'Plus Jakarta Sans', sans-serif);
    max-width: none;
}

.kps-breaking-sep {
    color: var(--wb-border, #cbd5e1);
    font-size: 13px;
    margin: 0 14px;
    flex-shrink: 0;
}

.kps-inline-banner-section {
    padding: 0 0 40px;
    background: var(--wb-bg);
}

.kps-explore-section {
    padding: 0 0 40px;
    background: var(--wb-bg);
}

.kps-explore-track {
    display: flex;
    gap: 54px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

/* Reveal renders a plain <div class="rv">, so THAT is the flex child — the
   card inside it was never width-locked and collapsed to its content. Pin the
   basis on the wrapper and let the card fill it. */
.kps-explore-track > .kps-explore-item {
    flex: 0 0 180px;
    width: 180px;
}

.kps-explore-track::-webkit-scrollbar { height: 4px; }
.kps-explore-track::-webkit-scrollbar-track { background: transparent; }
.kps-explore-track::-webkit-scrollbar-thumb { background: var(--wb-border); border-radius: 4px; }

.kps-explore-card {
    width: 220px;
    height: 300px;
    border-radius: var(--wb-r);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(135deg, var(--wb-dark) 0%, #1e3a8a 100%);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    transition: transform 0.3s var(--wb-ease), box-shadow 0.3s var(--wb-ease);
    box-shadow: var(--wb-shadow-sm);
}

.kps-explore-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--wb-shadow-md);
}

.kps-explore-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,17,23,0.85) 0%, rgba(13,17,23,0.05) 55%);
    z-index: 1;
}

.kps-explore-card-name {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 0 12px 3px;
    line-height: 1.2;
    letter-spacing: -0.2px;
    font-family: var(--wb-font);
}

.kps-explore-card-count {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 600;
    padding: 0 12px 12px;
    font-family: var(--wb-font);
}

@media (max-width: 767.98px) {
    .kps-explore-track > .kps-explore-item {
        flex: 0 0 152px;
        width: 152px;
    }

    .kps-explore-card {
        height: 112px;
    }
}

@media (max-width: 400px) {
    .kps-explore-track > .kps-explore-item {
        flex: 0 0 138px;
        width: 138px;
    }

    .kps-explore-card {
        height: 104px;
    }
}

/* =================================================================
   POST TAGS  (global override)
   ================================================================= */
.post-tag {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--wb-blue-dim) !important;
    color: var(--wb-blue) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    transition: all 0.18s !important;
    font-family: var(--wb-font) !important;
}

.post-tag:hover {
    background: var(--wb-blue) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* =================================================================
   CATEGORY PAGE — hero image + chips sticky + featured + grid
   ================================================================= */
.kps-cat-hero {
    position: relative;
    background: linear-gradient(135deg, #137eff 0%, #0055cc 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.kps-cat-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,17,23,0.55) 0%, rgba(13,17,23,0.78) 100%);
}

.kps-cat-hero-content {
    position: relative;
    z-index: 1;
    padding-top: 40px;
    padding-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kps-cat-hero-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    font-family: var(--wb-font);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 6px 14px;
    align-self: flex-start;
    backdrop-filter: blur(6px);
}

.kps-cat-hero-crumb a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.kps-cat-hero-crumb a:hover { color: #fff; text-decoration: underline; }

.kps-cat-hero-crumb .is-current { color: #fff; font-weight: 800; }

.kps-cat-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.kps-cat-hero-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 10px;
    font-family: var(--wb-font);
}

.kps-cat-hero-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.1;
    color: #fff !important;
    margin: 0;
    font-family: var(--wb-font);
}

.kps-cat-hero-count {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 8px 18px;
    border-radius: 999px;
    font-family: var(--wb-font);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

/* Chips sticky */
.kps-cat-chips {
    position: sticky;
    top: 64px;
    z-index: 900;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--wb-border);
}

.kps-cat-chips-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;
}

.kps-cat-chips-track::-webkit-scrollbar { display: none; }

.kps-cat-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--wb-body);
    text-decoration: none;
    background: var(--wb-white);
    border: 1.5px solid var(--wb-border);
    border-radius: 999px;
    padding: 7px 18px;
    font-family: var(--wb-font);
    transition: all 0.2s var(--wb-ease);
}

.kps-cat-chip:hover {
    color: var(--wb-blue);
    border-color: var(--wb-blue);
    transform: translateY(-1px);
}

.kps-cat-chip.is-active {
    background: var(--wb-blue);
    border-color: var(--wb-blue);
    color: #fff;
    box-shadow: var(--wb-glow);
}

/* Grid section — pola sama dengan homepage */
.kps-cat-grid-section {
    padding: 28px 0 48px;
    background: var(--wb-bg);
}

.kps-cat-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Featured: kartu horizontal besar */
.kps-cat-featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--wb-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-r-md);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--wb-shadow-sm);
    transition: box-shadow var(--wb-dur), transform var(--wb-dur);
}

.kps-cat-featured:hover {
    box-shadow: var(--wb-shadow);
    transform: translateY(-3px);
}

.kps-cat-featured-thumb {
    display: block;
    min-height: 260px;
    background: var(--wb-bg);
    overflow: hidden;
}

.kps-cat-featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--wb-ease);
}

.kps-cat-featured:hover .kps-cat-featured-thumb img { transform: scale(1.05); }

.kps-cat-featured-thumb-empty {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    background: linear-gradient(135deg, #137eff 0%, #06b6d4 100%);
}

.kps-cat-featured-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 24px 22px;
    min-width: 0;
}

.kps-cat-featured-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--wb-gradient);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--wb-font);
}

.kps-cat-featured-cat {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wb-blue);
    font-family: var(--wb-font);
}

.kps-cat-featured-title {
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: var(--wb-ink);
    font-family: var(--wb-font);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kps-cat-featured:hover .kps-cat-featured-title { color: var(--wb-blue); }

.kps-cat-featured-excerpt {
    font-size: 13px;
    line-height: 1.65;
    color: var(--wb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kps-cat-featured-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--wb-border-soft);
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--wb-muted);
    font-family: var(--wb-font);
}

.kps-cat-featured-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Grid 3 kolom equal-height */
.kps-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.kps-cat-grid .rv {
    display: flex;
    min-width: 0;
}

.kps-cat-grid .wng-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kps-cat-grid .wng-card-body { flex: 1; }

@media (max-width: 1023px) {
    .kps-cat-featured { grid-template-columns: 1fr; }
    .kps-cat-featured-thumb { min-height: 220px; }
    .kps-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .kps-cat-grid { grid-template-columns: 1fr; }
    .kps-cat-hero-content { padding-top: 30px; padding-bottom: 28px; }
}

.kps-cat-pagination .pagination-wrap { margin-top: 8px; }

/* Empty state */
.kps-cat-empty {
    background: var(--wb-white);
    border: 1px dashed var(--wb-border);
    border-radius: var(--wb-r-md);
    padding: 48px 24px;
    text-align: center;
}

.kps-cat-empty-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--wb-ink);
    margin: 0 0 8px;
    font-family: var(--wb-font);
}

.kps-cat-empty-desc {
    font-size: 13px;
    color: var(--wb-muted);
    margin: 0 0 20px;
    font-family: var(--wb-font);
}

.kps-cat-empty-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: var(--wb-gradient);
    border-radius: 999px;
    padding: 10px 22px;
    box-shadow: var(--wb-glow);
    font-family: var(--wb-font);
}

/* Legacy: header/chips lama tidak dipakai lagi */
.kps-cat-header,
.wng-chips-bar-section,
.wng-filter-chip { display: none; }
.wng-cat-grid-section { padding: 24px 0 48px !important; }

/* ArticleGridCard — clean modern card */
.wng-grid-three {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

@media (max-width: 1023px) { .wng-grid-three { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 575px)  { .wng-grid-three { grid-template-columns: 1fr !important; } }

.wng-card {
    background: var(--wb-white) !important;
    border: 1px solid var(--wb-border) !important;
    border-radius: var(--wb-r-md) !important;
    box-shadow: var(--wb-shadow-sm) !important;
    overflow: hidden !important;
    transition: box-shadow var(--wb-dur), transform var(--wb-dur), border-color var(--wb-dur) !important;
}

.wng-card:hover {
    box-shadow: var(--wb-shadow) !important;
    transform: translateY(-4px) !important;
    border-color: rgba(19,126,255,0.2) !important;
}

.wng-card-thumb {
    height: 168px !important;
    overflow: hidden !important;
    display: block !important;
}

.wng-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s var(--wb-ease) !important;
}

.wng-card:hover .wng-card-thumb img { transform: scale(1.06) !important; }

.wng-card-body {
    padding: 14px 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.wng-card-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.48 !important;
    letter-spacing: 0.01em !important;
    font-family: var(--wb-font) !important;
}

.wng-card-title a {
    color: var(--wb-ink) !important;
    text-decoration: none !important;
    transition: color 0.18s !important;
}

.wng-card-title a:hover { color: var(--wb-blue) !important; }

.wng-card-meta {
    font-size: 12px !important;
    color: var(--wb-muted) !important;
    font-weight: 600 !important;
    font-family: var(--wb-font) !important;
}

/* =================================================================
   SIDEBAR
   ================================================================= */
.sidebar-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-widget {
    background: var(--wb-white) !important;
    border: 1px solid var(--wb-border) !important;
    border-radius: var(--wb-r-md) !important;
    box-shadow: var(--wb-shadow-sm) !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.sidebar-widget .widget-title {
    border-bottom: 1px solid var(--wb-border) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-widget .widget-title .title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--wb-ink) !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    border-bottom: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--wb-font) !important;
}

.sidebar-widget .widget-title .title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: var(--wb-gradient);
    border-radius: 2px;
    flex-shrink: 0;
}

.sidebar-widget .widget-title .title::after { display: none !important; }

/* Sidebar search */
.sidebar-search {
    padding: 16px 18px !important;
}

.sidebar-search form {
    display: flex !important;
    align-items: center !important;
    background: var(--wb-bg) !important;
    border: 1.5px solid var(--wb-border) !important;
    border-radius: 999px !important;
    height: 40px !important;
    overflow: hidden !important;
    transition: border-color var(--wb-dur), box-shadow var(--wb-dur) !important;
    margin: 0 !important;
}

.sidebar-search form:focus-within {
    border-color: var(--wb-blue) !important;
    box-shadow: 0 0 0 3px rgba(19,126,255,0.12) !important;
}

.sidebar-search form input {
    background: transparent !important;
    border: 0 !important;
    font-size: 12px !important;
    padding: 0 14px !important;
    height: 100% !important;
    outline: none !important;
    width: 100% !important;
    flex: 1 !important;
    color: var(--wb-ink) !important;
    font-family: var(--wb-font) !important;
    border-radius: 0 !important;
}

.sidebar-search form button {
    background: var(--wb-blue) !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 0 13px !important;
    height: 100% !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: auto !important;
    box-shadow: none !important;
    transition: background var(--wb-dur) !important;
}

.sidebar-search form button:hover { background: var(--wb-blue-dark) !important; }

/* Popular articles */
.popular-post-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding: 6px 0 !important;
    gap: 0 !important;
}

.popular-post-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--wb-border-soft) !important;
    transition: background 0.18s !important;
    text-decoration: none !important;
}

.popular-post-card:last-child { border-bottom: none !important; }

.popular-post-card:hover {
    background: var(--wb-bg) !important;
    transform: none !important;
}

.popular-thumb-wrap {
    width: 90px !important;
    height: 68px !important;
    flex-shrink: 0 !important;
    border-radius: var(--wb-r-sm) !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--wb-bg) !important;
}

.popular-thumb-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.popular-thumb-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.popular-post-card:hover .popular-thumb-link img {
    transform: scale(1.05) !important;
}

.popular-rank-badge {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    background: var(--wb-blue) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
    z-index: 3 !important;
    font-family: var(--wb-font) !important;
}

.popular-rank-badge.rank-1 { background: linear-gradient(135deg, #137eff, #06b6d4) !important; }
.popular-rank-badge.rank-2 { background: linear-gradient(135deg, #64748b, #475569) !important; }
.popular-rank-badge.rank-3 { background: linear-gradient(135deg, #f59e0b, #f97316) !important; }

.popular-content-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.popular-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.48 !important;
    letter-spacing: 0.01em !important;
    color: var(--wb-ink) !important;
    margin: 0 !important;
    font-family: var(--wb-font) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.popular-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.18s !important;
}

.popular-post-card:hover .popular-title a { color: var(--wb-blue) !important; }

.popular-meta {
    font-size: 12px !important;
    color: var(--wb-muted) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-family: var(--wb-font) !important;
}

.popular-meta svg {
    flex-shrink: 0 !important;
}

.popular-meta span {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
}

/* =================================================================
   SIDEBAR POPULER — RESPONSIVE
   ================================================================= */

/* Tablet & Foldable (600px - 1023px): Sidebar full width, kartu 2 kolom rapi */
@media (min-width: 600px) and (max-width: 1023.98px) {
    .sidebar-wrap {
        transform: none !important;
        padding: 0 !important;
        margin-top: 24px !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .popular-post-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 20px !important;
        row-gap: 0 !important;
        padding: 10px 18px !important;
    }

    .popular-post-card {
        padding: 12px 6px !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .popular-thumb-wrap {
        width: 86px !important;
        height: 64px !important;
    }

    .popular-title {
        font-size: 13px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 2 !important;
    }

    .popular-meta {
        font-size: 12px !important;
    }
}

@media (max-width: 599.98px) {
    .sidebar-wrap {
        transform: none !important;
        padding: 0 !important;
        margin-top: 20px !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .popular-post-wrap {
        display: flex !important;
        flex-direction: column !important;
        padding: 4px 0 !important;
        gap: 0 !important;
    }

    .popular-post-card {
        padding: 11px 14px !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .popular-thumb-wrap {
        width: 80px !important;
        height: 60px !important;
    }

    .popular-title {
        font-size: 12px !important;
        line-height: 1.38 !important;
        -webkit-line-clamp: 2 !important;
    }

    .popular-meta {
        font-size: 11px !important;
    }

    .wb-sidebar-cta {
        padding: 20px 18px 22px !important;
    }

    .wb-sidebar-cta-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Small Mobile (< 400px) */
@media (max-width: 399.98px) {
    .popular-post-card {
        padding: 9px 10px !important;
        gap: 10px !important;
    }

    .popular-thumb-wrap {
        width: 72px !important;
        height: 54px !important;
    }

    .popular-title {
        font-size: 12px !important;
    }
}

/* Sidebar Wondo promo banner */
.sidebar-banner-card {
    border-radius: var(--wb-r) !important;
    overflow: hidden !important;
    border: 1px solid var(--wb-border) !important;
    box-shadow: var(--wb-shadow-sm) !important;
}

.default-wondo-banner {
    background: linear-gradient(150deg, #0b3f9e 0%, #137eff 55%, #06b6d4 135%) !important;
    border: none !important;
    box-shadow: var(--wb-glow) !important;
}

/* =================================================================
   ARTICLE DETAIL
   ================================================================= */

/* Disable old full-bleed hero */
.wng-article-hero {
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

.wng-article-hero::before { display: none !important; }

/* Article page background */
.blog-details-area {
    background: var(--wb-bg) !important;
    padding-top: 28px !important;
    padding-bottom: 60px !important;
}

/* Main article card */
.blog-details-wrap {
    background: var(--wb-white) !important;
    border-radius: var(--wb-r-md) !important;
    border: 1px solid var(--wb-border) !important;
    box-shadow: var(--wb-shadow-sm) !important;
    overflow: hidden !important;
}

.blog-details-content {
    padding: 28px 32px 32px !important;
}

@media (max-width: 575px) { .blog-details-content { padding: 20px 18px !important; } }

/* Article cover image */
.kps-article-cover {
    width: 100%;
    max-height: 490px;
    object-fit: cover;
    display: block;
    border-radius: var(--wb-r);
    margin-bottom: 24px;
}

/* Article main title */
.article-main-title {
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: var(--wb-ink) !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
    font-family: var(--wb-font) !important;
}

/* Meta row */
.blog-post-meta ul.list-wrap li {
    font-size: 13px !important;
    color: var(--wb-muted) !important;
    font-weight: 600 !important;
    font-family: var(--wb-font) !important;
}

.author-meta-link {
    color: var(--wb-ink) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.author-meta-link:hover { color: var(--wb-blue) !important; }

/* Article body typography */
.article-reading-body {
    font-family: var(--wb-font) !important;
    font-size: 16px !important;
    line-height: 1.88 !important;
    color: var(--wb-body) !important;
    max-width: none !important;
}

.article-reading-body p { margin-bottom: 1.4em; }

.article-reading-body h2 {
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-top: 2em !important;
    margin-bottom: 0.6em !important;
    color: var(--wb-ink) !important;
    letter-spacing: -0.4px !important;
    font-family: var(--wb-font) !important;
}

.article-reading-body h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-top: 1.7em !important;
    margin-bottom: 0.5em !important;
    color: var(--wb-ink) !important;
    font-family: var(--wb-font) !important;
}

.article-reading-body blockquote {
    border: none !important;
    border-left: 4px solid var(--wb-blue) !important;
    background: var(--wb-blue-dim) !important;
    padding: 16px 22px !important;
    margin: 2em 0 !important;
    border-radius: 0 var(--wb-r) var(--wb-r) 0 !important;
    font-size: 15px !important;
    color: var(--wb-ink) !important;
    font-style: italic !important;
}

.article-reading-body blockquote::before { display: none !important; }

.article-reading-body a {
    color: var(--wb-blue) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(19,126,255,0.4) !important;
    text-underline-offset: 3px !important;
}

.article-reading-body img {
    border-radius: var(--wb-r) !important;
    box-shadow: var(--wb-shadow) !important;
    max-width: 100% !important;
}

/* Share rail */
.wng-share-rail .share-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    box-shadow: var(--wb-shadow-xs) !important;
}

/* Mobile share bar */
.wng-share-bar-mobile {
    background: var(--wb-bg) !important;
    border: 1px solid var(--wb-border) !important;
    border-radius: var(--wb-r) !important;
    padding: 12px 16px !important;
    margin-bottom: 18px !important;
}

/* Tags */
.tag-pill {
    background: var(--wb-bg) !important;
    border: 1.5px solid var(--wb-border) !important;
    border-radius: 999px !important;
    color: var(--wb-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 5px 13px !important;
    text-decoration: none !important;
    transition: all 0.18s !important;
    font-family: var(--wb-font) !important;
}

.tag-pill:hover {
    background: var(--wb-blue) !important;
    color: #fff !important;
    border-color: var(--wb-blue) !important;
    box-shadow: 0 3px 10px rgba(19,126,255,0.25) !important;
}

/* Reading progress bar */
.reading-progress-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: var(--wb-gradient) !important;
    z-index: 9999 !important;
    transition: width 0.1s !important;
}

/* Article source */
.article-source-card {
    background: var(--wb-bg) !important;
    border: 1px solid var(--wb-border) !important;
    border-radius: var(--wb-r-sm) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--wb-muted) !important;
    font-family: var(--wb-font) !important;
}

/* Image caption */
.image-caption-box {
    font-size: 12px !important;
    color: var(--wb-muted) !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 8px 0 !important;
    border-top: 1px solid var(--wb-border-soft) !important;
    font-family: var(--wb-font) !important;
}

/* Related articles */
.related-articles-full-wrap { margin-top: 36px !important; }

.related-articles-grid-four {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 991px) { .related-articles-grid-four { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 575px) { .related-articles-grid-four { grid-template-columns: 1fr !important; } }

.related-card-three {
    background: var(--wb-white) !important;
    border: 1px solid var(--wb-border) !important;
    border-radius: var(--wb-r) !important;
    overflow: hidden !important;
    box-shadow: var(--wb-shadow-xs) !important;
    transition: box-shadow var(--wb-dur), transform var(--wb-dur) !important;
}

.related-card-three:hover {
    box-shadow: var(--wb-shadow) !important;
    transform: translateY(-4px) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
    background: var(--wb-blue) !important;
    border-color: var(--wb-blue) !important;
    box-shadow: 0 4px 10px rgba(19,126,255,0.3) !important;
}

.pagination .page-item .page-link:hover {
    border-color: var(--wb-blue) !important;
    color: var(--wb-blue) !important;
}

.pagination .page-link {
    border-radius: var(--wb-r-sm) !important;
    font-weight: 600 !important;
    font-family: var(--wb-font) !important;
}

/* Article page buttons */
.article-page-btn.active {
    background: var(--wb-blue) !important;
    border-color: var(--wb-blue) !important;
    color: #fff !important;
}

.article-page-btn:hover { border-color: var(--wb-blue) !important; color: var(--wb-blue) !important; }
.btn-primary-next { background: var(--wb-blue) !important; color: #fff !important; border-color: var(--wb-blue) !important; }

/* =================================================================
   PACKAGE CARDS
   ================================================================= */
.article-packages-wrap {
    background: var(--wb-blue-dim) !important;
    border: 1px solid rgba(19,126,255,0.15) !important;
    border-radius: var(--wb-r-md) !important;
    padding: 22px 24px 24px !important;
}

.article-packages-title { color: var(--wb-ink) !important; font-family: var(--wb-font) !important; }
.article-packages-sub { color: var(--wb-muted) !important; font-family: var(--wb-font) !important; }

.article-packages-icon {
    background: var(--wb-gradient) !important;
    border-radius: var(--wb-r-sm) !important;
    width: 44px !important;
    height: 44px !important;
}

.article-package-card {
    border-radius: var(--wb-r) !important;
    border: 1px solid var(--wb-border) !important;
    box-shadow: var(--wb-shadow-sm) !important;
    transition: box-shadow var(--wb-dur), transform var(--wb-dur) !important;
}

.article-package-card:hover {
    box-shadow: var(--wb-shadow) !important;
    transform: translateY(-4px) !important;
}

/* Paket sold out tidak bisa dipesan, jadi jangan lift seperti tombol aktif.
   Butuh !important untuk mengalahkan .article-package-card:hover dan
   .lift:hover di file ini. */
.article-package-card.is-sold-out,
.article-package-card.is-sold-out:hover {
    transform: none !important;
    box-shadow: var(--wb-shadow-sm) !important;
}

.article-package-card.is-sold-out .article-package-cta {
    color: var(--wb-muted) !important;
}

.article-package-card.is-sold-out .article-package-soldout {
    color: #dc2626 !important;
}

.article-package-soldout-badge {
    background: rgba(15, 23, 42, 0.86) !important;
    color: #fff !important;
    font-family: var(--wb-font) !important;
}

.article-package-cta {
    color: var(--wb-blue) !important;
    font-weight: 800 !important;
    font-family: var(--wb-font) !important;
}

.article-package-price strong { color: var(--wb-blue) !important; }
.article-package-price { color: var(--wb-muted) !important; }
.article-package-rate { color: #f59e0b !important; }
.article-package-location { color: var(--wb-muted) !important; }

/* Sidebar banner stack. The wide promo grid pins banner images to a fixed
   height, which crops badly in a 330px column — here the intrinsic ratio from
   the width/height attributes decides the box, exactly as in the grid. */
.wng-banner-stack-item .wng-promo-card img {
    height: auto !important;
    object-fit: initial !important;
}

.wng-banner-stack-item .wng-promo-card {
    border-radius: var(--wb-r-md) !important;
}

/* =================================================================
   PROMO BANNERS
   Card chrome lives in the single definition at the end of this file.
   Earlier copies here pinned `img` to a fixed 155px/170px height with
   object-fit: cover, which cropped every banner whose uploaded aspect ratio
   differed from that box. The height is now the image's own ratio.
   ================================================================= */

/* =================================================================
   FOOTER
   ================================================================= */
.wng-footer {
    background-image: url('/blog/images/footer/wondo-blog.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-top: none !important;
    padding: 52px 0 0 !important;
    margin-top: 0 !important;
    position: relative !important;
}

.wng-footer::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(5, 60, 160, 0.55) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.wng-footer .container {
    position: relative !important;
    z-index: 1 !important;
}

.wng-footer-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

.wng-footer-logo-img {
    height: 52px !important;
    width: 52px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.wng-footer-lockup {
    display: inline-flex !important;
    flex-direction: column !important;
    line-height: 1.25 !important;
    gap: 4px !important;
}

.wng-footer-lockup strong {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    font-family: var(--wb-font, 'Plus Jakarta Sans', sans-serif) !important;
    display: block !important;
}

.wng-footer-desc {
    color: rgba(255,255,255,0.82) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    font-family: var(--wb-font) !important;
}

.wng-footer-heading {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.25) !important;
    font-family: var(--wb-font) !important;
}

.wng-footer-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

.wng-footer-links a {
    color: rgba(255,255,255,0.82) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.18s !important;
    font-family: var(--wb-font) !important;
}

.wng-footer-links a:hover { color: #fff !important; }

.wng-footer-social { display: flex !important; gap: 8px !important; }

.wng-social-dot {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: background 0.2s, color 0.2s !important;
}

.wng-social-dot:hover {
    background: var(--wb-blue) !important;
    color: #fff !important;
}

.wng-footer-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    color: var(--wb-blue-dark) !important;
    border-radius: 999px !important;
    padding: 11px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: var(--wb-glow) !important;
    transition: opacity 0.2s, transform 0.2s !important;
    font-family: var(--wb-font) !important;
}

.wng-footer-cta:hover {
    opacity: 0.92 !important;
    transform: translateY(-2px) !important;
    color: var(--wb-blue-dark) !important;
}

.wng-social-dot:hover {
    background: #fff !important;
    color: var(--wb-blue-dark) !important;
}

.wng-footer-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.25) !important;
    padding: 18px 0 22px !important;
    margin-top: 40px !important;
    color: rgba(255,255,255,0.82) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: var(--wb-font) !important;
}

.wng-footer-bottom p { margin: 0 !important; }
.wng-footer-tagline { color: rgba(255,255,255,0.82) !important; }

/* =================================================================
   POPUP IKLAN GLOBAL — modal sekali per sesi, satu-satunya slot popup
   ================================================================= */
.kps-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(13, 17, 23, 0.65);
    backdrop-filter: blur(4px);
    animation: kps-popup-fade 0.25s ease;
}

.kps-popup-card {
    position: relative;
    max-width: 500px;
    width: 100%;
    border-radius: var(--wb-r-md);
    overflow: hidden;
    background: var(--wb-white);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    animation: kps-popup-pop 0.3s var(--wb-ease);
}

.kps-popup-card a { display: block; }

.kps-popup-card img {
    display: block;
    width: 100%;
    height: auto;
}

.kps-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(13, 17, 23, 0.6);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 1;
}

.kps-popup-close:hover { background: rgba(13, 17, 23, 0.85); }

@keyframes kps-popup-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kps-popup-pop {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* =================================================================
   SCROLL TO TOP
   ================================================================= */
.scroll-top {
    background: var(--wb-gradient) !important;
    border-radius: 50% !important;
    box-shadow: var(--wb-glow) !important;
    width: 40px !important;
    height: 40px !important;
    right: 22px !important;
    bottom: 22px !important;
    transition: transform 0.25s var(--wb-ease), box-shadow 0.25s !important;
}

.scroll-top:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(19,126,255,0.45) !important;
}

/* =================================================================
   MOBILE DRAWER
   ================================================================= */
.mobile-menu .navigation li a:hover {
    color: var(--wb-blue) !important;
    background: var(--wb-blue-dim) !important;
}

/* =================================================================
   UTILITY OVERRIDES
   ================================================================= */

/* lift hover — consistent with our system */
.lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--wb-shadow-md) !important;
}

/* Empty state */
.wng-empty-state {
    border: 1.5px dashed var(--wb-border) !important;
    border-radius: var(--wb-r) !important;
    color: var(--wb-muted) !important;
    background: var(--wb-white) !important;
    padding: 48px 20px !important;
    text-align: center !important;
}

/* Hover on breadcrumb in article detail */
.kps-cat-breadcrumb a:hover { color: var(--wb-blue) !important; }

/* =================================================================
   SIDEBAR CTA (Wondo promotion, di dalam sidebar)
   ================================================================= */
.wb-sidebar-cta {
    background: linear-gradient(145deg, #0d1b40 0%, #137eff 55%, #06b6d4 100%);
    border-radius: var(--wb-r-md);
    padding: 22px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.wb-sidebar-cta::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}

.wb-sidebar-cta-tag {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--wb-font);
}

.wb-sidebar-cta-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff !important;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.3px;
    font-family: var(--wb-font);
}

.wb-sidebar-cta-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin: 0;
    font-family: var(--wb-font);
}

.wb-sidebar-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--wb-blue);
    font-size: 13px;
    font-weight: 800;
    border-radius: 999px;
    padding: 8px 16px;
    text-decoration: none;
    align-self: flex-start;
    margin-top: 4px;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-family: var(--wb-font);
}

.wb-sidebar-cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--wb-blue-dark);
}

/* =================================================================
   BANNER PROMO SECTION (terpisah dari sidebar)
   Grid card: thumbnail kiri + teks kanan
   ================================================================= */
.wb-banner-section {
    padding: 0 0 40px;
    background: var(--wb-bg);
}

/* Grid: max 3 kolom di desktop */
.wb-banner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 991.98px) {
    .wb-banner-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .wb-banner-grid { grid-template-columns: 1fr; }
}

/* Individual banner card */
.wb-banner-card {
    display: flex;
    flex-direction: column;
    background: var(--wb-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-r-md);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--wb-shadow-sm);
    transition: box-shadow var(--wb-dur), transform var(--wb-dur), border-color var(--wb-dur);
}

.wb-banner-card:hover {
    box-shadow: var(--wb-shadow);
    transform: translateY(-4px);
    border-color: rgba(19,126,255,0.2);
}

/* Thumbnail — 16:9 */
.wb-banner-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--wb-bg);
}

.wb-banner-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--wb-ease);
}

.wb-banner-card:hover .wb-banner-thumb img {
    transform: scale(1.05);
}

.wb-banner-thumb-empty {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--wb-blue-dim), #dbeafe);
    display: block;
}

/* Body */
.wb-banner-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.wb-banner-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--wb-blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--wb-blue-dim);
    padding: 2px 8px;
    border-radius: 999px;
    align-self: flex-start;
    font-family: var(--wb-font);
}

.wb-banner-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--wb-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--wb-font);
}

.wb-banner-card:hover .wb-banner-title { color: var(--wb-blue); }

.wb-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wb-blue);
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--wb-border-soft);
    text-decoration: none;
    font-family: var(--wb-font);
}

.wb-banner-card:hover .wb-banner-cta {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =================================================================
   FALLBACK WONDO PROMO CARD (saat tidak ada banner dari admin)
   ================================================================= */
.wb-wondo-promo-card {
    background: linear-gradient(135deg, #0d1b40 0%, #0e44b8 45%, #137eff 75%, #06b6d4 100%);
    border-radius: var(--wb-r-lg);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(19,126,255,0.3);
}

/* Decorative circles */
.wb-wondo-promo-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.wb-wondo-promo-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: 120px;
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
}

.wb-wondo-promo-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
    max-width: 540px;
}

.wb-wondo-promo-tag {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--wb-font);
}

.wb-wondo-promo-title {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.5px;
    font-family: var(--wb-font);
}

.wb-wondo-promo-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    line-height: 1.65;
    margin: 0;
    font-family: var(--wb-font);
}

.wb-wondo-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--wb-blue);
    font-size: 13px;
    font-weight: 800;
    border-radius: 999px;
    padding: 12px 24px;
    text-decoration: none;
    align-self: flex-start;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    margin-top: 4px;
    font-family: var(--wb-font);
}

.wb-wondo-promo-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: var(--wb-blue-dark);
}

/* Emoji visual sebelah kanan */
.wb-wondo-promo-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 36px;
    line-height: 1;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    opacity: 0.85;
}

@media (max-width: 767.98px) {
    .wb-wondo-promo-card {
        flex-direction: column;
        padding: 28px 24px;
    }
    .wb-wondo-promo-visual {
        flex-direction: row;
        font-size: 28px;
    }
}

/* =================================================================
   PROMO BANNER CARD — single source of truth
   This file loads last, so this block wins over every earlier definition
   (there were three, disagreeing on radius and image height). Banners come
   in mixed aspect ratios — 2.83 wide, 1.50, and 0.50 portrait in the live
   set — so the image keeps its intrinsic proportions and is never cropped.
   ================================================================= */
.wng-promo-section { padding: 0 0 12px !important; }

.wng-promo-card {
    border-radius: var(--wb-r-md) !important;
    box-shadow: var(--wb-shadow-sm) !important;
    border: 1px solid var(--wb-border) !important;
    overflow: hidden !important;
    display: block !important;
    transition: box-shadow var(--wb-dur), transform var(--wb-dur) !important;
}

.wng-promo-card:hover {
    box-shadow: var(--wb-shadow) !important;
    transform: translateY(-3px) !important;
}

.wng-promo-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
    border-radius: 0 !important;
    display: block !important;
}