/* ==========================================================================
   Karo Foundation — design system
   "Modern Karo Identity with Youthful Red"
   Loaded after Bootstrap 5.3. All public pages share these tokens + components.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Brand */
    --kf-red: #C62828;
    --kf-red-deep: #8E1B1B;
    --kf-red-bright: #EF4444;
    --kf-red-soft: #FEF2F2;
    --kf-red-tint: #FBE4E4;

    /* Neutrals */
    --kf-bg: #FAF9F6;          /* warm off-white page ground */
    --kf-surface: #FFFFFF;
    --kf-surface-alt: #F4F1EC; /* alternate section band */
    --kf-ink: #1F2937;
    --kf-ink-muted: #6B7280;
    --kf-ink-soft: #9CA3AF;
    --kf-border: #E5E7EB;
    --kf-night: #1A1214;       /* footer / overlays, warm near-black */

    /* Type */
    --kf-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kf-fs-xs: .75rem;
    --kf-fs-sm: .875rem;
    --kf-fs-base: 1rem;
    --kf-fs-lg: 1.125rem;
    --kf-fs-h4: 1.25rem;
    --kf-fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --kf-fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    --kf-fs-h1: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
    --kf-lh-tight: 1.15;
    --kf-lh-body: 1.65;

    /* Spacing (4px base) */
    --kf-space-1: .25rem;
    --kf-space-2: .5rem;
    --kf-space-3: .75rem;
    --kf-space-4: 1rem;
    --kf-space-5: 1.5rem;
    --kf-space-6: 2rem;
    --kf-space-7: 3rem;
    --kf-space-8: 4rem;
    --kf-section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    /* Shape */
    --kf-radius-sm: 6px;
    --kf-radius: 10px;
    --kf-radius-lg: 14px;
    --kf-radius-pill: 999px;

    /* Elevation — kept quiet on purpose */
    --kf-shadow-sm: 0 1px 2px rgba(31, 41, 55, .06);
    --kf-shadow: 0 1px 3px rgba(31, 41, 55, .06), 0 8px 24px -12px rgba(31, 41, 55, .14);
    --kf-shadow-lg: 0 18px 40px -18px rgba(31, 41, 55, .28);

    /* Layout */
    --kf-container: 1200px;
    --kf-container-narrow: 760px;
    --kf-nav-h: 72px;

    /* Motion */
    --kf-ease: cubic-bezier(.2, .7, .2, 1);
    --kf-dur: .2s;

    /* Bootstrap bridge */
    --bs-body-font-family: var(--kf-font);
    --bs-body-color: var(--kf-ink);
    --bs-body-bg: var(--kf-bg);
    --bs-link-color-rgb: 198, 40, 40;
    --bs-link-hover-color-rgb: 142, 27, 27;
    --bs-border-color: var(--kf-border);
    --bs-primary: #C62828;
    --bs-primary-rgb: 198, 40, 40;
    --bs-danger: #C62828;
    --bs-danger-rgb: 198, 40, 40;
}

/* ---------- 2. Base ---------- */
html { scroll-padding-top: calc(var(--kf-nav-h) + 16px); }

body {
    font-family: var(--kf-font);
    font-size: var(--kf-fs-base);
    line-height: var(--kf-lh-body);
    color: var(--kf-ink);
    background: var(--kf-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kf-font);
    color: var(--kf-ink);
    font-weight: 700;
    line-height: var(--kf-lh-tight);
    letter-spacing: -.015em;
    overflow-wrap: break-word; /* CMS titles like "Berneh,Kec.Berastagi,Kab." have no spaces */
}
p, li, dd, a { overflow-wrap: break-word; }

a { color: var(--kf-red); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--kf-dur) var(--kf-ease); }
a:hover { color: var(--kf-red-deep); }

img { max-width: 100%; height: auto; }

::selection { background: var(--kf-red-tint); color: var(--kf-red-deep); }

:focus-visible {
    outline: 2px solid var(--kf-red);
    outline-offset: 3px;
    border-radius: 4px;
}

.kf-skip {
    position: absolute; left: 1rem; top: -100px; z-index: 2000;
    background: var(--kf-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--kf-radius-sm);
    font-weight: 600; text-decoration: none;
}
.kf-skip:focus { top: 1rem; color: #fff; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* ---------- 3. Layout ---------- */
.kf-container {
    width: 100%;
    max-width: calc(var(--kf-container) + 2 * clamp(1rem, 4vw, 2rem));
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.kf-container--narrow { max-width: calc(var(--kf-container-narrow) + 2 * clamp(1rem, 4vw, 2rem)); }

.kf-section { padding-block: var(--kf-section-y); }
.kf-section--tight { padding-block: calc(var(--kf-section-y) * .6); }
.kf-section--alt { background: var(--kf-surface-alt); }
.kf-section--white { background: var(--kf-surface); }

.kf-section-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--kf-space-4) var(--kf-space-6);
    margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.kf-section-head__text { max-width: 640px; }

/* Eyebrow: small label with a short red rule — the recurring brand mark */
.kf-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: var(--kf-fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kf-red);
    margin-bottom: var(--kf-space-3);
}
.kf-eyebrow::before {
    content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}
.kf-eyebrow--light { color: #FCA5A5; }

.kf-title { font-size: var(--kf-fs-h2); margin: 0 0 var(--kf-space-3); }
.kf-title--sm { font-size: var(--kf-fs-h3); }
.kf-intro { font-size: clamp(1.125rem, 1rem + .45vw, 1.3rem); line-height: 1.65; font-weight: 500; color: var(--kf-ink); margin: 0 0 var(--kf-space-5); }
.kf-intro strong { color: var(--kf-red-deep); }
.kf-lead { font-size: var(--kf-fs-lg); color: var(--kf-ink-muted); margin: 0; line-height: 1.6; }
.kf-muted { color: var(--kf-ink-muted); }
.kf-accent { color: var(--kf-red); }
.kf-small { font-size: var(--kf-fs-sm); }

/* ---------- 4. Buttons ---------- */
.kf-btn {
    --_bg: var(--kf-red); --_fg: #fff; --_bd: var(--kf-red);
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .65rem 1.25rem;
    font: 600 var(--kf-fs-sm)/1.2 var(--kf-font); letter-spacing: .01em;
    color: var(--_fg); background: var(--_bg); border: 1.5px solid var(--_bd);
    border-radius: var(--kf-radius);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--kf-dur) var(--kf-ease), border-color var(--kf-dur) var(--kf-ease),
                color var(--kf-dur) var(--kf-ease), box-shadow var(--kf-dur) var(--kf-ease), transform var(--kf-dur) var(--kf-ease);
}
.kf-btn:hover { --_bg: var(--kf-red-deep); --_bd: var(--kf-red-deep); color: var(--_fg); }
.kf-btn:active { transform: translateY(1px); }
.kf-btn .bi { font-size: 1.05em; }

.kf-btn--lg { min-height: 52px; padding: .8rem 1.6rem; font-size: var(--kf-fs-base); }
.kf-btn--sm { min-height: 36px; padding: .4rem .85rem; font-size: var(--kf-fs-xs); }
.kf-btn--block { width: 100%; }

.kf-btn--secondary { --_bg: transparent; --_fg: var(--kf-ink); --_bd: var(--kf-border); }
.kf-btn--secondary:hover { --_bg: var(--kf-red-soft); --_fg: var(--kf-red-deep); --_bd: #F5C2C2; }

/* on dark imagery */
.kf-btn--ghost { --_bg: rgba(255,255,255,.08); --_fg: #fff; --_bd: rgba(255,255,255,.55); backdrop-filter: blur(2px); }
.kf-btn--ghost:hover { --_bg: #fff; --_fg: var(--kf-ink); --_bd: #fff; }

/* tertiary text link with arrow */
.kf-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 600; font-size: var(--kf-fs-sm); color: var(--kf-red); text-decoration: none;
}
.kf-link .bi { transition: transform var(--kf-dur) var(--kf-ease); }
.kf-link:hover { color: var(--kf-red-deep); }
.kf-link:hover .bi-arrow-right { transform: translateX(3px); }

.kf-icon-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--kf-radius); border: 1.5px solid var(--kf-border); background: var(--kf-surface);
    color: var(--kf-ink); cursor: pointer;
    transition: all var(--kf-dur) var(--kf-ease);
}
.kf-icon-btn:hover { border-color: var(--kf-red); color: var(--kf-red); background: var(--kf-red-soft); }

/* ---------- 5. Navigation ---------- */
.kf-nav {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(250, 249, 246, .92);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--kf-dur) var(--kf-ease), box-shadow var(--kf-dur) var(--kf-ease);
}
.kf-nav.is-scrolled { border-bottom-color: var(--kf-border); box-shadow: var(--kf-shadow-sm); }
.kf-nav::before { /* thin brand line */
    content: ""; display: block; height: 3px;
    background: linear-gradient(90deg, var(--kf-red-deep), var(--kf-red) 45%, var(--kf-red-bright));
}
.kf-nav .navbar { min-height: var(--kf-nav-h); padding-block: .5rem; }

.kf-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--kf-ink); margin-right: auto; }
.kf-brand img { width: 44px; height: 44px; object-fit: contain; }
.kf-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.kf-brand__name { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; color: var(--kf-ink); }
.kf-brand__tag { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--kf-red); margin-top: 3px; }
.kf-brand:hover .kf-brand__name { color: var(--kf-ink); }

.kf-nav .nav-link {
    position: relative;
    font-weight: 600; font-size: var(--kf-fs-sm);
    color: var(--kf-ink) !important;
    padding: .6rem .9rem !important;
    border-radius: var(--kf-radius-sm);
    transition: color var(--kf-dur) var(--kf-ease), background-color var(--kf-dur) var(--kf-ease);
}
.kf-nav .nav-link:hover, .kf-nav .nav-link:focus-visible { color: var(--kf-red) !important; }
.kf-nav .nav-link.active { color: var(--kf-red) !important; }

@media (min-width: 992px) {
    .kf-nav .nav-link::after {
        content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2px;
        background: var(--kf-red); border-radius: 2px;
        transform: scaleX(0); transform-origin: left; transition: transform var(--kf-dur) var(--kf-ease);
    }
    .kf-nav .nav-link.active::after { transform: scaleX(1); }
    .kf-nav .nav-link:hover::after { transform: scaleX(1); }
    .kf-nav .dropdown-toggle::after { display: none; }
}
.kf-nav .dropdown-toggle .bi-chevron-down { font-size: .7rem; margin-left: .2rem; transition: transform var(--kf-dur) var(--kf-ease); }
.kf-nav .dropdown-toggle.show .bi-chevron-down { transform: rotate(180deg); }

.kf-nav .dropdown-menu {
    border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg);
    box-shadow: var(--kf-shadow-lg); padding: .5rem; min-width: 280px; margin-top: .5rem !important;
}
.kf-nav .dropdown-item {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .65rem .75rem; border-radius: var(--kf-radius); white-space: normal;
    color: var(--kf-ink);
}
.kf-nav .dropdown-item .bi {
    flex: 0 0 34px; height: 34px; display: grid; place-items: center;
    background: var(--kf-red-soft); color: var(--kf-red); border-radius: var(--kf-radius-sm); font-size: 1rem;
}
.kf-nav .dropdown-item strong { display: block; font-size: var(--kf-fs-sm); font-weight: 600; }
.kf-nav .dropdown-item small { display: block; color: var(--kf-ink-muted); font-size: var(--kf-fs-xs); line-height: 1.4; }
.kf-nav .dropdown-item:hover, .kf-nav .dropdown-item:focus { background: var(--kf-red-soft); color: var(--kf-ink); }
.kf-nav .dropdown-item.active { background: var(--kf-red-soft); color: var(--kf-red-deep); }

.kf-nav__toggle {
    border: 1.5px solid var(--kf-border) !important; border-radius: var(--kf-radius) !important;
    width: 44px; height: 44px; padding: 0 !important; display: inline-grid; place-items: center;
    color: var(--kf-ink); font-size: 1.4rem; box-shadow: none !important;
}
.kf-nav__toggle:focus-visible { outline: 2px solid var(--kf-red); outline-offset: 2px; }
.kf-nav__toggle[aria-expanded="true"] .bi-list::before { content: "\F62A"; } /* bi-x-lg */

@media (max-width: 991.98px) {
    .kf-nav .navbar-collapse {
        margin-top: .5rem; padding: .5rem 0 1rem; border-top: 1px solid var(--kf-border);
        max-height: calc(100vh - var(--kf-nav-h)); overflow-y: auto;
    }
    .kf-nav .nav-link { padding: .8rem .25rem !important; font-size: var(--kf-fs-base); border-bottom: 1px solid var(--kf-border); border-radius: 0; }
    .kf-nav .dropdown-menu { box-shadow: none; border: 0; padding: 0 0 .5rem; margin: 0 !important; background: transparent; }
    .kf-nav .kf-nav__cta { margin-top: 1rem; width: 100%; }
}

/* ---------- 6. Hero (home) ---------- */
.kf-hero {
    position: relative; isolation: isolate;
    min-height: clamp(560px, 86vh, 820px);
    display: flex; align-items: flex-end;
    color: #fff; overflow: hidden;
    background: var(--kf-night);
}
.kf-hero__media, .kf-hero__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.kf-hero__media img { object-position: 50% 40%; }
.kf-hero::before { /* legibility scrim: dark at left/bottom, warm red bloom low-left */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(20, 12, 13, .82) 0%, rgba(20, 12, 13, .55) 42%, rgba(20, 12, 13, .08) 75%),
        linear-gradient(0deg, rgba(20, 12, 13, .7) 0%, rgba(20, 12, 13, 0) 45%),
        radial-gradient(120% 70% at 0% 100%, rgba(142, 27, 27, .55) 0%, rgba(142, 27, 27, 0) 60%);
}
.kf-hero__inner { width: 100%; padding-block: clamp(6rem, 12vh, 9rem) clamp(3.5rem, 8vh, 5.5rem); }
.kf-hero__content { max-width: 680px; }
.kf-hero__greeting {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: var(--kf-fs-sm); font-weight: 600; letter-spacing: .02em;
    padding: .4rem .9rem .4rem .45rem; border-radius: var(--kf-radius-pill);
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    margin-bottom: var(--kf-space-5);
}
.kf-hero__greeting span {
    background: var(--kf-red); color: #fff; font-weight: 700; font-size: var(--kf-fs-xs);
    padding: .2rem .6rem; border-radius: var(--kf-radius-pill); letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap; flex: 0 0 auto;
}
.kf-hero h1 {
    color: #fff; font-size: var(--kf-fs-h1); font-weight: 800; letter-spacing: -.025em; line-height: 1.06;
    margin: 0 0 var(--kf-space-5);
    text-wrap: balance;
}
.kf-hero h1 em { font-style: normal; color: #FCA5A5; }
.kf-hero__lead { font-size: clamp(1rem, .95rem + .3vw, 1.175rem); color: rgba(255,255,255,.86); max-width: 560px; margin: 0 0 var(--kf-space-6); }
.kf-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.kf-hero__meta {
    display: flex; flex-wrap: wrap; gap: var(--kf-space-5) var(--kf-space-7);
    margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: var(--kf-space-5);
    border-top: 1px solid rgba(255,255,255,.18);
    max-width: 680px;
}
.kf-hero__meta dt { font-size: var(--kf-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .2rem; }
.kf-hero__meta dd { margin: 0; font-weight: 600; font-size: var(--kf-fs-base); color: #fff; }

/* Photo credit chip — CC BY / BY-SA attribution, shown on the image */
.kf-credit {
    position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
    max-width: calc(100% - 1.5rem);
    font-size: .6875rem; line-height: 1.3; color: rgba(255,255,255,.85);
    background: rgba(20,12,13,.45); padding: .25rem .55rem; border-radius: var(--kf-radius-sm);
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kf-credit:hover, .kf-credit:focus-visible { color: #fff; background: rgba(20,12,13,.75); }
.kf-credit .bi { margin-right: .25rem; }

/* ---------- 7. Page hero (inner pages) ---------- */
.kf-page-hero {
    position: relative; isolation: isolate; overflow: hidden;
    color: #fff; background: var(--kf-night);
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
}
.kf-page-hero__media { position: absolute; inset: 0; z-index: -2; }
.kf-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.kf-page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(20,12,13,.85) 0%, rgba(20,12,13,.6) 50%, rgba(20,12,13,.3) 100%),
        radial-gradient(90% 120% at 0% 100%, rgba(142,27,27,.5) 0%, rgba(142,27,27,0) 60%);
}
.kf-page-hero--plain { background: var(--kf-night); }
.kf-page-hero--plain::before {
    background: radial-gradient(70% 140% at 0% 100%, rgba(142,27,27,.55) 0%, rgba(142,27,27,0) 65%);
}
/* Photo-backed hero: strong dark overlay so white text stays legible over any image. */
.kf-page-hero--photo::before {
    background:
        linear-gradient(90deg, rgba(20,12,13,.92) 0%, rgba(20,12,13,.74) 45%, rgba(20,12,13,.42) 100%),
        linear-gradient(0deg, rgba(20,12,13,.78) 0%, rgba(20,12,13,.12) 58%),
        radial-gradient(80% 130% at 0% 100%, rgba(142,27,27,.45) 0%, rgba(142,27,27,0) 65%);
}
.kf-page-hero--photo .kf-page-hero__media img { object-position: center 30%; }
.kf-page-hero h1 { color: #fff; font-size: var(--kf-fs-h2); font-weight: 800; margin: 0 0 var(--kf-space-3); max-width: 820px; text-wrap: balance; }
.kf-page-hero p { color: rgba(255,255,255,.82); font-size: var(--kf-fs-lg); max-width: 640px; margin: 0; }

.kf-breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 var(--kf-space-5); font-size: var(--kf-fs-sm); }
.kf-breadcrumb li { color: rgba(255,255,255,.6); display: inline-flex; align-items: center; gap: .4rem; }
.kf-breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,.35); }
.kf-breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.kf-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.kf-breadcrumb--light li { color: var(--kf-ink-muted); }
.kf-breadcrumb--light li + li::before { color: var(--kf-ink-soft); }
.kf-breadcrumb--light a { color: var(--kf-ink-muted); }
.kf-breadcrumb--light a:hover { color: var(--kf-red); }

/* ---------- 8. Cards ---------- */
.kf-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--kf-surface); border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg);
    overflow: hidden;
    transition: border-color var(--kf-dur) var(--kf-ease), box-shadow var(--kf-dur) var(--kf-ease), transform var(--kf-dur) var(--kf-ease);
}
.kf-card--hover:hover, .kf-card--hover:focus-within { border-color: #E9C9C9; box-shadow: var(--kf-shadow); transform: translateY(-2px); }
.kf-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kf-surface-alt); }
.kf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kf-ease); }
.kf-card--hover:hover .kf-card__media img { transform: scale(1.03); }
.kf-card__body { display: flex; flex-direction: column; gap: var(--kf-space-2); padding: var(--kf-space-5); flex: 1; }
.kf-card__title { font-size: var(--kf-fs-h4); font-weight: 700; line-height: 1.3; margin: 0; }
.kf-card__title a { color: var(--kf-ink); text-decoration: none; }
.kf-card__title a:hover { color: var(--kf-red); }
/* full-card click target without nesting links */
.kf-card__title a.kf-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kf-card__text { color: var(--kf-ink-muted); font-size: var(--kf-fs-sm); margin: 0; }
.kf-card__foot { margin-top: auto; padding-top: var(--kf-space-3); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.kf-panel { /* quiet content container */
    background: var(--kf-surface); border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.kf-panel--soft { background: var(--kf-red-soft); border-color: #F6D5D5; }

/* meta row: category + date */
.kf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: var(--kf-fs-xs); color: var(--kf-ink-muted); }
.kf-meta .bi { margin-right: .25rem; }
.kf-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--kf-red-deep); background: var(--kf-red-soft);
    padding: .25rem .55rem; border-radius: var(--kf-radius-sm); text-decoration: none; line-height: 1.2;
    position: relative; z-index: 2;
}
a.kf-tag:hover { background: var(--kf-red-tint); color: var(--kf-red-deep); }
.kf-tag--neutral { color: var(--kf-ink-muted); background: var(--kf-surface-alt); }
.kf-tag--on-dark { color: #fff; background: var(--kf-red); }

/* ---------- 9. Home — about ---------- */
.kf-about { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .kf-about { grid-template-columns: 1.05fr 1fr; } }

.kf-about__statement { font-size: var(--kf-fs-lg); line-height: 1.7; color: #3B4552; margin: 0 0 var(--kf-space-6); max-width: 560px; }
.kf-about__statement strong { color: var(--kf-ink); font-weight: 700; }

.kf-leader { display: flex; gap: var(--kf-space-4); align-items: center; padding: var(--kf-space-4); border-radius: var(--kf-radius-lg); background: var(--kf-surface); border: 1px solid var(--kf-border); }
.kf-leader img { width: 76px; height: 76px; border-radius: var(--kf-radius); object-fit: cover; object-position: top; background: var(--kf-surface-alt); flex: 0 0 auto; }
.kf-leader__name { font-weight: 700; margin: 0; line-height: 1.3; }
.kf-leader__role { font-size: var(--kf-fs-sm); color: var(--kf-ink-muted); margin: .15rem 0 0; }

.kf-vision { margin-top: var(--kf-space-5); }
.kf-vision h3 { font-size: var(--kf-fs-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kf-ink-muted); margin: 0 0 var(--kf-space-3); }
.kf-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.kf-checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.kf-checklist li::before {
    content: "\F26E"; font-family: "bootstrap-icons"; flex: 0 0 22px; height: 22px; margin-top: .1rem;
    display: grid; place-items: center; border-radius: 50%; font-size: .8rem;
    background: var(--kf-red-soft); color: var(--kf-red);
}

.kf-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kf-space-3); }
.kf-mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--kf-radius-lg); background: var(--kf-surface-alt); aspect-ratio: 4 / 5; }
.kf-mosaic figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) { .kf-mosaic figure:nth-child(even) { transform: translateY(2rem); } .kf-mosaic { padding-bottom: 2rem; } }

/* Mission grid */
.kf-mission { display: grid; gap: 1px; background: var(--kf-border); border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg); overflow: hidden; grid-template-columns: 1fr; }
@media (min-width: 576px) { .kf-mission { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .kf-mission { grid-template-columns: repeat(3, 1fr); } }
.kf-mission__item { background: var(--kf-surface); padding: var(--kf-space-5) var(--kf-space-5) var(--kf-space-6); display: flex; flex-direction: column; gap: var(--kf-space-3); }
.kf-mission__num { font-size: var(--kf-fs-xs); font-weight: 700; color: var(--kf-red); letter-spacing: .1em; }
.kf-mission__item .bi { font-size: 1.5rem; color: var(--kf-ink); }
.kf-mission__item p { margin: 0; font-weight: 600; line-height: 1.45; }

/* ---------- 10. News ---------- */
.kf-news-layout { display: grid; gap: var(--kf-space-5); grid-template-columns: 1fr; }
@media (min-width: 992px) { .kf-news-layout { grid-template-columns: 1.35fr 1fr; gap: var(--kf-space-6); } }

/* Lead story: image above text — CMS images often carry their own text, so nothing is overlaid */
.kf-feature { display: flex; flex-direction: column; color: var(--kf-ink); text-decoration: none; }
.kf-feature__media { aspect-ratio: 16 / 9; border-radius: var(--kf-radius-lg); overflow: hidden; background: var(--kf-surface-alt); }
.kf-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--kf-ease); }
.kf-feature:hover .kf-feature__media img { transform: scale(1.02); }
.kf-feature__body { padding-top: var(--kf-space-5); }
.kf-feature h2, .kf-feature h3 { font-size: var(--kf-fs-h3); font-weight: 700; line-height: 1.25; margin: .75rem 0 .6rem; text-wrap: balance; transition: color var(--kf-dur) var(--kf-ease); }
.kf-feature--lg h2 { font-size: var(--kf-fs-h2); }
.kf-feature p { color: var(--kf-ink-muted); margin: 0 0 .75rem; }
.kf-feature:hover h2, .kf-feature:hover h3 { color: var(--kf-red); }

.kf-news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.kf-news-list li + li { border-top: 1px solid var(--kf-border); }
.kf-news-item { display: grid; grid-template-columns: 112px 1fr; gap: var(--kf-space-4); align-items: center; padding: var(--kf-space-4) 0; text-decoration: none; color: var(--kf-ink); }
.kf-news-list li:first-child .kf-news-item { padding-top: 0; }
.kf-news-item img { width: 112px; height: 80px; object-fit: cover; border-radius: var(--kf-radius); background: var(--kf-surface-alt); }
.kf-news-item h3 { font-size: var(--kf-fs-base); font-weight: 600; line-height: 1.4; margin: 0 0 .35rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kf-news-item:hover h3 { color: var(--kf-red); }

.kf-news-item--compact { grid-template-columns: 64px 1fr; gap: var(--kf-space-3); padding: var(--kf-space-3) 0; }
.kf-news-item--compact img { width: 64px; height: 56px; border-radius: var(--kf-radius-sm); }
.kf-news-item--compact h3 { font-size: var(--kf-fs-sm); -webkit-line-clamp: 2; margin: 0; }

/* Article list (budaya) — horizontal cards, first one larger */
.kf-articles { display: grid; gap: var(--kf-space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .kf-articles { grid-template-columns: repeat(2, 1fr); }
    .kf-article-row--lead { grid-column: 1 / -1; flex-direction: row; }
    .kf-article-row--lead .kf-card__media { flex: 0 0 52%; aspect-ratio: auto; min-height: 340px; }
    .kf-article-row--lead .kf-card__body { padding: var(--kf-space-6); justify-content: center; }
    .kf-article-row--lead .kf-card__title { font-size: var(--kf-fs-h3); }
    .kf-article-row--lead .kf-card__text { font-size: var(--kf-fs-base); }
}

/* ---------- 11. Heritage mosaic ---------- */
.kf-heritage { display: grid; gap: var(--kf-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .kf-heritage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
    .kf-heritage { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 270px; }
    .kf-heritage > .kf-tile { min-height: 0; }
    .kf-heritage > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
    .kf-heritage > :nth-child(2) { grid-column: span 5; }
    .kf-heritage > :nth-child(3) { grid-column: span 5; }
    .kf-heritage > :nth-child(4) { grid-column: span 6; }
    .kf-heritage > :nth-child(5) { grid-column: span 6; }
}
.kf-tile {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
    min-height: 300px; border-radius: var(--kf-radius-lg); color: #fff; background: var(--kf-night); text-decoration: none;
}
.kf-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--kf-ease); }
.kf-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,12,13,.92) 0%, rgba(20,12,13,.6) 32%, rgba(20,12,13,0) 70%); }
.kf-tile__body { padding: var(--kf-space-5); padding-right: 5.5rem; max-width: 560px; }
.kf-tile__kicker { font-size: var(--kf-fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FCA5A5; }
.kf-tile h3 { color: #fff; font-size: var(--kf-fs-h4); margin: .35rem 0 .35rem; }
.kf-tile p { color: rgba(255,255,255,.8); font-size: var(--kf-fs-sm); margin: 0; }
.kf-tile .kf-credit { top: .75rem; bottom: auto; }
a.kf-tile:hover > img { transform: scale(1.04); }
a.kf-tile:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.kf-tile__go { position: absolute; right: var(--kf-space-5); bottom: var(--kf-space-5); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); transition: background var(--kf-dur) var(--kf-ease); }
a.kf-tile:hover .kf-tile__go { background: var(--kf-red); border-color: var(--kf-red); }

/* ---------- 12. Gallery strip + lightbox ---------- */
.kf-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px);
    gap: var(--kf-space-4); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--kf-space-4); scrollbar-width: thin; scrollbar-color: var(--kf-red) transparent;
    overscroll-behavior-x: contain;
}
.kf-strip::-webkit-scrollbar { height: 6px; }
.kf-strip::-webkit-scrollbar-thumb { background: #E3B5B5; border-radius: 6px; }
.kf-strip__item {
    scroll-snap-align: start; position: relative; padding: 0; border: 0; background: var(--kf-surface-alt);
    border-radius: var(--kf-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; display: block;
}
.kf-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kf-ease), filter .3s; }
.kf-strip__item:hover img { transform: scale(1.04); }
.kf-strip__item:focus-visible { outline-offset: 2px; }

.kf-lightbox .modal-content { background: transparent; border: 0; }
.kf-lightbox .modal-body { padding: 0; position: relative; text-align: center; }
.kf-lightbox img { max-height: 82vh; width: auto; max-width: 100%; border-radius: var(--kf-radius); }
.kf-lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .75rem; color: rgba(255,255,255,.8); font-size: var(--kf-fs-sm); }
.kf-lightbox .kf-icon-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.kf-lightbox .kf-icon-btn:hover { background: #fff; color: var(--kf-ink); }
.modal-backdrop.show { opacity: .88; }

/* ---------- 13. Video & documents ---------- */
.kf-video { position: relative; aspect-ratio: 16 / 9; background: var(--kf-night); }
.kf-video iframe, .kf-video button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kf-video button { padding: 0; cursor: pointer; background: var(--kf-night); }
.kf-video button img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity var(--kf-dur); }
.kf-video button:hover img { opacity: 1; }
.kf-video__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: var(--kf-red); color: #fff; font-size: 1.6rem; box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transition: transform var(--kf-dur) var(--kf-ease), background var(--kf-dur);
}
.kf-video button:hover .kf-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--kf-red-bright); }

.kf-doc { display: grid; grid-template-columns: 96px 1fr; gap: var(--kf-space-4); align-items: center; padding: var(--kf-space-4); text-decoration: none; color: var(--kf-ink); }
.kf-doc__thumb { width: 96px; aspect-ratio: 3 / 4; border-radius: var(--kf-radius-sm); overflow: hidden; background: var(--kf-surface-alt); border: 1px solid var(--kf-border); display: grid; place-items: center; color: var(--kf-ink-soft); font-size: 2rem; }
.kf-doc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kf-doc h3 { font-size: var(--kf-fs-base); font-weight: 700; line-height: 1.35; margin: 0 0 .3rem; }
.kf-doc:hover h3 { color: var(--kf-red); }
.kf-doc__action { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: var(--kf-fs-sm); font-weight: 600; color: var(--kf-red); }

/* ---------- 14. Forms ---------- */
.kf-form .form-label { font-size: var(--kf-fs-sm); font-weight: 600; color: var(--kf-ink); margin-bottom: .4rem; }
.kf-form .form-control, .kf-form .form-select, .kf-input {
    min-height: 48px; border: 1.5px solid var(--kf-border); border-radius: var(--kf-radius);
    padding: .65rem .9rem; font-size: var(--kf-fs-base); color: var(--kf-ink); background-color: var(--kf-surface);
    transition: border-color var(--kf-dur), box-shadow var(--kf-dur);
}
.kf-form textarea.form-control { min-height: 140px; }
.kf-form .form-control::placeholder, .kf-input::placeholder { color: var(--kf-ink-soft); }
.kf-form .form-control:focus, .kf-form .form-select:focus, .kf-input:focus {
    border-color: var(--kf-red); box-shadow: 0 0 0 4px rgba(198, 40, 40, .12); outline: none;
}
.kf-search { position: relative; }
.kf-search .bi-search { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--kf-ink-soft); pointer-events: none; }
.kf-search .kf-input { padding-left: 2.75rem; width: 100%; }
.kf-search--lg .kf-input { min-height: 56px; padding-right: 3rem; font-size: var(--kf-fs-lg); }
.kf-search__clear {position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: var(--kf-ink-muted); border-radius: var(--kf-radius-sm); }
.kf-search__clear:hover { color: var(--kf-red); background: var(--kf-red-soft); }

/* alerts */
.kf-alert { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--kf-radius); font-size: var(--kf-fs-sm); border: 1px solid; margin-bottom: var(--kf-space-5); }
.kf-alert .bi { font-size: 1.1rem; line-height: 1.3; }
.kf-alert--success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.kf-alert--error { background: var(--kf-red-soft); border-color: #FECACA; color: var(--kf-red-deep); }
.kf-alert--info { background: #F8FAFC; border-color: var(--kf-border); color: var(--kf-ink); }

/* ---------- 15. Content layout with sidebar ---------- */
.kf-with-aside { display: grid; gap: var(--kf-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .kf-with-aside { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--kf-space-7); } }
.kf-aside { display: flex; flex-direction: column; gap: var(--kf-space-5); }
@media (min-width: 992px) { .kf-aside--sticky { position: sticky; top: calc(var(--kf-nav-h) + 24px); align-self: start; } }
.kf-widget { background: var(--kf-surface); border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg); padding: var(--kf-space-5); }
.kf-widget__title { font-size: var(--kf-fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kf-ink-muted); margin: 0 0 var(--kf-space-4); display: flex; align-items: center; gap: .5rem; }
.kf-widget__title::before { content: ""; width: 14px; height: 2px; background: var(--kf-red); }

.kf-ranked { list-style: none; padding: 0; margin: 0; counter-reset: rank; }
.kf-ranked li { counter-increment: rank; display: grid; grid-template-columns: 28px 1fr; gap: .5rem; padding: .6rem 0; border-top: 1px solid var(--kf-border); }
.kf-ranked li:first-child { border-top: 0; padding-top: 0; }
.kf-ranked li::before { content: counter(rank, decimal-leading-zero); font-weight: 700; font-size: var(--kf-fs-sm); color: var(--kf-red); line-height: 1.5; }
.kf-ranked a { color: var(--kf-ink); text-decoration: none; font-size: var(--kf-fs-sm); font-weight: 600; line-height: 1.45; }
.kf-ranked a:hover { color: var(--kf-red); }

.kf-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kf-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 38px;
    padding: .4rem .9rem; border-radius: var(--kf-radius-pill);
    border: 1.5px solid var(--kf-border); background: var(--kf-surface);
    font-size: var(--kf-fs-sm); font-weight: 600; color: var(--kf-ink); text-decoration: none;
    transition: all var(--kf-dur) var(--kf-ease);
}
.kf-chip:hover { border-color: #EBB8B8; color: var(--kf-red-deep); background: var(--kf-red-soft); }
.kf-chip.is-active, .kf-chip[aria-current="page"] { background: var(--kf-red); border-color: var(--kf-red); color: #fff; }
.kf-chip--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kf-chip--scroll::-webkit-scrollbar { display: none; }
.kf-chip--scroll .kf-chip { flex: 0 0 auto; }

/* pagination */
.kf-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; padding: 0; margin: var(--kf-space-7) 0 0; }
.kf-pagination a, .kf-pagination span {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .9rem;
    border: 1.5px solid var(--kf-border); border-radius: var(--kf-radius); background: var(--kf-surface);
    color: var(--kf-ink); font-weight: 600; font-size: var(--kf-fs-sm); text-decoration: none;
    transition: all var(--kf-dur) var(--kf-ease);
}
.kf-pagination a:hover { border-color: var(--kf-red); color: var(--kf-red); }
.kf-pagination [aria-current="page"] { background: var(--kf-red); border-color: var(--kf-red); color: #fff; }
.kf-pagination .is-disabled { color: var(--kf-ink-soft); background: transparent; pointer-events: none; }

/* empty / error states */
.kf-empty { text-align: center; padding: clamp(2.5rem, 2rem + 3vw, 4rem) var(--kf-space-5); border: 1.5px dashed #E4D9D9; border-radius: var(--kf-radius-lg); background: var(--kf-surface); }
.kf-empty .bi { font-size: 2rem; color: var(--kf-red); display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kf-red-soft); margin-bottom: var(--kf-space-4); }
.kf-empty h2, .kf-empty h3 { font-size: var(--kf-fs-h4); margin: 0 0 .5rem; }
.kf-empty p { color: var(--kf-ink-muted); margin: 0 auto var(--kf-space-5); max-width: 420px; }

/* ---------- 16. Article / prose ---------- */
.kf-article-head { margin-bottom: var(--kf-space-6); }
.kf-article-head h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: var(--kf-space-4) 0; text-wrap: balance; }
.kf-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; color: var(--kf-ink-muted); font-size: var(--kf-fs-sm); }
.kf-byline strong { color: var(--kf-ink); font-weight: 600; }
.kf-article-figure { margin: 0 0 var(--kf-space-6); border-radius: var(--kf-radius-lg); overflow: hidden; background: var(--kf-surface-alt); }
.kf-article-figure img { width: 100%; max-height: 560px; object-fit: cover; }

.kf-prose { font-size: 1.0625rem; line-height: 1.8; color: #2B3440; overflow-wrap: anywhere; }
.kf-prose > * + * { margin-top: 1.1em; }
.kf-prose p { margin: 0 0 1.1em; }
.kf-prose h2, .kf-prose h3, .kf-prose h4 { margin: 1.8em 0 .6em; line-height: 1.3; }
.kf-prose h2 { font-size: 1.5rem; } .kf-prose h3 { font-size: 1.25rem; }
.kf-prose img { border-radius: var(--kf-radius); height: auto !important; max-width: 100% !important; }
/* Google Docs paste wraps images in fixed-size spans */
.kf-prose [style*="width"] { max-width: 100% !important; height: auto !important; }
.kf-prose iframe, .kf-prose video { max-width: 100%; }
.kf-prose blockquote { border-left: 3px solid var(--kf-red); padding: .25rem 0 .25rem 1.25rem; margin: 1.5em 0; color: var(--kf-ink); font-size: 1.125rem; font-style: italic; }
.kf-prose ul, .kf-prose ol { padding-left: 1.4em; }
.kf-prose li { margin-bottom: .4em; }
.kf-prose table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.kf-prose td, .kf-prose th { border: 1px solid var(--kf-border); padding: .5rem .75rem; }
.kf-prose a { overflow-wrap: anywhere; }
/* CMS paste often carries inline fonts / sizes — keep the reading style consistent */
.kf-prose span, .kf-prose p, .kf-prose div, .kf-prose li, .kf-prose font { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit; }

.kf-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: var(--kf-space-4) 0; border-block: 1px solid var(--kf-border); margin-bottom: var(--kf-space-6); }
.kf-share__label { font-size: var(--kf-fs-sm); font-weight: 600; color: var(--kf-ink-muted); margin-right: .25rem; }
.kf-share a { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--kf-border); color: var(--kf-ink); text-decoration: none; transition: all var(--kf-dur) var(--kf-ease); }
.kf-share a:hover { border-color: var(--kf-red); background: var(--kf-red); color: #fff; }
.kf-share__views { margin-left: auto; font-size: var(--kf-fs-sm); color: var(--kf-ink-muted); display: inline-flex; align-items: center; gap: .35rem; }

/* comments */
.kf-comment { display: grid; grid-template-columns: 44px 1fr; gap: var(--kf-space-4); padding: var(--kf-space-5) 0; border-top: 1px solid var(--kf-border); }
.kf-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--kf-red-soft); color: var(--kf-red-deep); font-weight: 700; text-transform: uppercase; }
.kf-comment__name { font-weight: 700; margin: 0; }
.kf-comment__date { font-size: var(--kf-fs-xs); color: var(--kf-ink-muted); }
.kf-comment p { margin: .5rem 0 0; color: #2B3440; overflow-wrap: anywhere; }

/* ---------- 17. Timeline, facts, accordion ---------- */
.kf-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.kf-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--kf-red), var(--kf-red-tint)); }
.kf-timeline li { position: relative; padding: 0 0 var(--kf-space-6) var(--kf-space-7); }
.kf-timeline li:last-child { padding-bottom: 0; }
.kf-timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--kf-surface); border: 3px solid var(--kf-red); }
.kf-timeline time { display: block; font-weight: 800; font-size: var(--kf-fs-lg); color: var(--kf-red); margin-bottom: .25rem; }
.kf-timeline p { margin: 0; color: var(--kf-ink-muted); }

.kf-facts { margin: 0; display: grid; gap: 0; }
.kf-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--kf-border); font-size: var(--kf-fs-sm); }
.kf-facts div:first-child { border-top: 0; padding-top: 0; }
.kf-facts dt { font-weight: 500; color: var(--kf-ink-muted); }
.kf-facts dd { margin: 0; font-weight: 700; text-align: right; }

.kf-accordion .accordion-item { border: 1px solid var(--kf-border); border-radius: var(--kf-radius) !important; overflow: hidden; background: var(--kf-surface); }
.kf-accordion .accordion-item + .accordion-item { margin-top: .6rem; }
.kf-accordion .accordion-button {
    font-weight: 600; font-size: var(--kf-fs-base); color: var(--kf-ink); padding: 1.1rem 1.25rem; gap: 1rem; line-height: 1.4;
    background: var(--kf-surface); box-shadow: none !important;
}
.kf-accordion .accordion-button:not(.collapsed) { color: var(--kf-red-deep); background: var(--kf-red-soft); }
.kf-accordion .accordion-button::after {
    background-image: none; content: "\F4FE"; font-family: "bootstrap-icons"; font-size: 1.1rem;
    width: auto; height: auto; color: var(--kf-red); transform: none; transition: transform var(--kf-dur) var(--kf-ease);
}
.kf-accordion .accordion-button:not(.collapsed)::after { content: "\F2EA"; transform: none; }
.kf-accordion .accordion-button:focus-visible { outline: 2px solid var(--kf-red); outline-offset: -2px; }
.kf-accordion .accordion-body { padding: .25rem 1.25rem 1.25rem; color: #3B4552; background: var(--kf-red-soft); }
.kf-faq-group + .kf-faq-group { margin-top: var(--kf-space-7); }
.kf-faq-group__title { display: flex; align-items: center; gap: .6rem; font-size: var(--kf-fs-h4); margin: 0 0 var(--kf-space-4); }
.kf-faq-group__title .bi { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--kf-radius-sm); background: var(--kf-red-soft); color: var(--kf-red); font-size: 1rem; }
mark.kf-hl { background: #FDE68A; color: inherit; padding: 0 .1em; border-radius: 3px; }

/* numbered feature cards (kingdoms etc.) */
.kf-numcard { position: relative; padding: var(--kf-space-5); background: var(--kf-surface); border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg); height: 100%; }
.kf-numcard__num { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--kf-red-tint); letter-spacing: -.03em; -webkit-text-stroke: 1px #EBB8B8; }
.kf-numcard h3 { font-size: var(--kf-fs-h4); margin: var(--kf-space-4) 0 .35rem; }
.kf-numcard__origin { font-size: var(--kf-fs-sm); font-weight: 600; color: var(--kf-red); margin: 0 0 .6rem; }
.kf-numcard p:last-child { margin: 0; color: var(--kf-ink-muted); font-size: var(--kf-fs-sm); }

.kf-icon-feature { display: flex; gap: var(--kf-space-4); align-items: flex-start; }
.kf-icon-feature > .bi { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: var(--kf-radius); background: var(--kf-red-soft); color: var(--kf-red); font-size: 1.35rem; }
.kf-icon-feature h3 { font-size: var(--kf-fs-base); margin: 0 0 .25rem; }
.kf-icon-feature p { margin: 0; color: var(--kf-ink-muted); font-size: var(--kf-fs-sm); }

/* figure with credit */
.kf-figure { position: relative; margin: 0; border-radius: var(--kf-radius-lg); overflow: hidden; background: var(--kf-surface-alt); }
.kf-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* contact list */
.kf-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--kf-space-4); }
.kf-contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--kf-space-3); align-items: center; }
.kf-contact-list .bi { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--kf-radius); background: var(--kf-red-soft); color: var(--kf-red); font-size: 1.1rem; }
.kf-contact-list small { display: block; font-size: var(--kf-fs-xs); color: var(--kf-ink-muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kf-contact-list span, .kf-contact-list a { font-weight: 600; color: var(--kf-ink); overflow-wrap: anywhere; }
.kf-contact-list a { text-decoration: none; }
.kf-contact-list a:hover { color: var(--kf-red); }

.kf-map { border-radius: var(--kf-radius-lg); overflow: hidden; border: 1px solid var(--kf-border); background: var(--kf-surface-alt); }
.kf-map iframe { display: block; width: 100%; height: clamp(280px, 40vw, 420px); border: 0; }

/* CTA band */
.kf-cta {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--kf-radius-lg); padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    background: var(--kf-red-deep); color: #fff;
    display: flex; flex-wrap: wrap; gap: var(--kf-space-5); align-items: center; justify-content: space-between;
}
.kf-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 140% at 100% 0%, var(--kf-red) 0%, rgba(198,40,40,0) 60%); }
.kf-cta h2 { color: #fff; font-size: var(--kf-fs-h3); margin: 0 0 .4rem; }
.kf-cta p { color: rgba(255,255,255,.8); margin: 0; max-width: 520px; }
.kf-cta .kf-btn { --_bg: #fff; --_fg: var(--kf-red-deep); --_bd: #fff; }
.kf-cta .kf-btn:hover { --_bg: var(--kf-red-soft); --_bd: var(--kf-red-soft); }
.kf-cta .kf-btn--ghost { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,.5); }
.kf-cta .kf-btn--ghost:hover { --_bg: #fff; --_fg: var(--kf-red-deep); --_bd: #fff; }

/* ---------- 18. Footer ---------- */
.kf-footer { background: var(--kf-night); color: rgba(255,255,255,.72); font-size: var(--kf-fs-sm); margin-top: 0; }
.kf-footer::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--kf-red-deep), var(--kf-red) 45%, var(--kf-red-bright)); }
.kf-footer__main { display: grid; gap: var(--kf-space-7) var(--kf-space-6); padding-block: clamp(3rem, 2rem + 4vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .kf-footer__main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kf-footer__main { grid-template-columns: 1.4fr .8fr 1.1fr 1fr; } }
.kf-footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--kf-space-4); color: #fff; text-decoration: none; }
.kf-footer__brand img { width: 52px; height: 52px; object-fit: contain; }
.kf-footer__brand strong { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; display: block; line-height: 1.1; }
.kf-footer__brand small { color: #FCA5A5; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.kf-footer p { line-height: 1.7; margin: 0; }
.kf-footer h2 { color: #fff; font-size: var(--kf-fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--kf-space-4); }
.kf-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.kf-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.kf-footer a:hover { color: #fff; text-decoration: underline; }
.kf-footer__contact li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: start; }
.kf-footer__contact .bi { color: #FCA5A5; margin-top: .15rem; }
.kf-social { display: flex; gap: .5rem; margin-top: var(--kf-space-5); }
.kf-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 1rem; transition: all var(--kf-dur) var(--kf-ease); }
.kf-social a:hover { background: var(--kf-red); border-color: var(--kf-red); text-decoration: none; }
.kf-footer__apps { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--kf-space-4); }
.kf-footer__apps img { height: 40px; width: auto; border-radius: 6px; }
.kf-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--kf-space-5); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: var(--kf-fs-xs); color: rgba(255,255,255,.55); }
.kf-footer__bottom a { color: rgba(255,255,255,.7); }

/* ---------- 19. Modal ---------- */
.kf-modal .modal-content { border: 0; border-radius: var(--kf-radius-lg); box-shadow: var(--kf-shadow-lg); }
.kf-modal .modal-header { border: 0; padding: var(--kf-space-5) var(--kf-space-5) 0; align-items: flex-start; }
.kf-modal .modal-title { font-size: var(--kf-fs-h4); font-weight: 700; }
.kf-modal .modal-body { padding: var(--kf-space-4) var(--kf-space-5) var(--kf-space-5); }
.kf-follow { display: grid; gap: .5rem; margin: var(--kf-space-4) 0 var(--kf-space-5); }
.kf-follow a { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1.5px solid var(--kf-border); border-radius: var(--kf-radius); color: var(--kf-ink); text-decoration: none; font-weight: 600; transition: all var(--kf-dur) var(--kf-ease); }
.kf-follow a .bi { font-size: 1.15rem; }
.kf-follow a .bi-box-arrow-up-right { margin-left: auto; font-size: .85rem; color: var(--kf-ink-soft); }
.kf-follow a:hover { border-color: var(--kf-red); background: var(--kf-red-soft); color: var(--kf-red-deep); }

/* ---------- 20. Utilities ---------- */
.kf-stack > * + * { margin-top: var(--kf-space-5); }
.kf-grid { display: grid; gap: var(--kf-space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kf-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.kf-divider { border: 0; border-top: 1px solid var(--kf-border); margin: var(--kf-space-7) 0; opacity: 1; }

/* ---------- 20b. Karo Hub (professional directory) ---------- */
.kf-hub-toolbar { display: grid; gap: var(--kf-space-3); grid-template-columns: 1fr; margin-bottom: var(--kf-space-6); }
@media (min-width: 720px) { .kf-hub-toolbar { grid-template-columns: 1fr auto auto; align-items: center; } }
.kf-hub-toolbar .kf-search { min-width: 0; }
.kf-hub-select { min-height: 48px; border: 1.5px solid var(--kf-border); border-radius: var(--kf-radius); padding: .65rem .9rem; font-size: var(--kf-fs-base); background: var(--kf-surface); color: var(--kf-ink); }
.kf-hub-select:focus { border-color: var(--kf-red); box-shadow: 0 0 0 4px rgba(198,40,40,.12); outline: none; }

.kf-hub-count { font-size: var(--kf-fs-sm); color: var(--kf-ink-muted); margin-bottom: var(--kf-space-4); }

.kf-hub-grid { display: grid; gap: var(--kf-space-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .kf-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .kf-hub-grid { grid-template-columns: repeat(3, 1fr); } }

.kf-hub-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--kf-surface); border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg);
    overflow: hidden; transition: border-color var(--kf-dur) var(--kf-ease), box-shadow var(--kf-dur) var(--kf-ease), transform var(--kf-dur) var(--kf-ease);
}
.kf-hub-card:hover, .kf-hub-card:focus-within { border-color: #E9C9C9; box-shadow: var(--kf-shadow); transform: translateY(-2px); }
.kf-hub-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--kf-surface-alt); }
.kf-hub-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kf-ease); }
.kf-hub-card:hover .kf-hub-card__media img { transform: scale(1.03); }
.kf-hub-card__field { position: absolute; left: .75rem; top: .75rem; z-index: 2; }
.kf-hub-card__body { display: flex; flex-direction: column; gap: var(--kf-space-2); padding: var(--kf-space-5); flex: 1; }
.kf-hub-card__name { font-size: var(--kf-fs-h4); font-weight: 700; line-height: 1.25; margin: 0; }
.kf-hub-card__name a { color: var(--kf-ink); text-decoration: none; }
.kf-hub-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kf-hub-card:hover .kf-hub-card__name a { color: var(--kf-red); }
.kf-hub-card__role { font-size: var(--kf-fs-sm); color: var(--kf-ink-muted); margin: 0; }
.kf-hub-card__role b { color: var(--kf-ink); font-weight: 600; }
.kf-hub-card__bio { font-size: var(--kf-fs-sm); color: #4B5563; margin: .25rem 0 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kf-hub-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: var(--kf-space-3); }
.kf-hub-card__foot { display: flex; align-items: center; justify-content: flex-end; padding-top: var(--kf-space-3); }
.kf-hub-card__foot .kf-link { position: relative; z-index: 2; }

/* Detail page */
.kf-hub-profile { display: grid; gap: var(--kf-space-7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .kf-hub-profile { grid-template-columns: 300px 1fr; align-items: start; } }
.kf-hub-aside { position: static; }
@media (min-width: 900px) { .kf-hub-aside { position: sticky; top: calc(var(--kf-nav-h) + 24px); } }
.kf-hub-portrait { aspect-ratio: 1 / 1; border-radius: var(--kf-radius-lg); overflow: hidden; background: var(--kf-surface-alt); border: 1px solid var(--kf-border); margin-bottom: var(--kf-space-5); }
.kf-hub-portrait img { width: 100%; height: 100%; object-fit: cover; }
.kf-hub-links { display: grid; gap: .5rem; margin-top: var(--kf-space-4); }
.kf-hub-links a { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border: 1.5px solid var(--kf-border); border-radius: var(--kf-radius); color: var(--kf-ink); text-decoration: none; font-weight: 600; font-size: var(--kf-fs-sm); transition: all var(--kf-dur) var(--kf-ease); }
.kf-hub-links a:hover { border-color: var(--kf-red); background: var(--kf-red-soft); color: var(--kf-red-deep); }
.kf-hub-links .bi { font-size: 1.1rem; }
.kf-hub-links a .bi-box-arrow-up-right { margin-left: auto; font-size: .8rem; color: var(--kf-ink-soft); }

.kf-hub-section { margin-bottom: var(--kf-space-7); }
.kf-hub-section > h2 { font-size: var(--kf-fs-h4); margin: 0 0 var(--kf-space-4); display: flex; align-items: center; gap: .6rem; }
.kf-hub-section > h2 .bi { color: var(--kf-red); }
.kf-hub-timeline { list-style: none; margin: 0; padding: 0; }
.kf-hub-timeline li { position: relative; padding: 0 0 var(--kf-space-5) var(--kf-space-5); border-left: 2px solid var(--kf-border); }
.kf-hub-timeline li:last-child { padding-bottom: 0; }
.kf-hub-timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--kf-surface); border: 3px solid var(--kf-red); }
.kf-hub-timeline h3 { font-size: var(--kf-fs-base); margin: 0; }
.kf-hub-timeline .kf-hub-tl-org { font-size: var(--kf-fs-sm); color: var(--kf-red); font-weight: 600; }
.kf-hub-timeline .kf-hub-tl-period { font-size: var(--kf-fs-xs); color: var(--kf-ink-muted); margin: .1rem 0 .4rem; }
.kf-hub-timeline p { margin: 0; color: #4B5563; font-size: var(--kf-fs-sm); }

/* Submission form */
.kf-form-section { margin-bottom: var(--kf-space-6); }
.kf-form-section__head { margin-bottom: var(--kf-space-4); padding-bottom: var(--kf-space-3); border-bottom: 1px solid var(--kf-border); }
.kf-form-section__head h2 { font-size: var(--kf-fs-h4); margin: 0 0 .15rem; }
.kf-form-section__head p { margin: 0; color: var(--kf-ink-muted); font-size: var(--kf-fs-sm); }
.kf-req { color: var(--kf-red); font-weight: 700; }
.kf-repeat-row { position: relative; border: 1px solid var(--kf-border); border-radius: var(--kf-radius); padding: var(--kf-space-4); margin-bottom: var(--kf-space-3); background: var(--kf-surface); }
.kf-repeat-remove { position: absolute; right: .5rem; top: .5rem; border: 0; background: transparent; color: var(--kf-ink-soft); width: 32px; height: 32px; border-radius: var(--kf-radius-sm); cursor: pointer; }
.kf-repeat-remove:hover { color: var(--kf-red); background: var(--kf-red-soft); }
.kf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 20c. Satu Aspirasi (community complaints) ---------- */
/* Section header (shared, defined here) */
.kf-section__head { max-width: 720px; margin: 0 0 var(--kf-space-6); }
.kf-section__head h2 { font-size: var(--kf-fs-h2); margin: .25rem 0 var(--kf-space-3); }

/* Privacy notice */
.kf-notice {
    display: flex; gap: var(--kf-space-4); align-items: flex-start;
    background: var(--kf-red-soft); border: 1px solid var(--kf-red-tint);
    border-left: 4px solid var(--kf-red); border-radius: var(--kf-radius);
    padding: var(--kf-space-4) var(--kf-space-5); color: #5B2525;
    font-size: var(--kf-fs-sm); line-height: 1.6; margin-bottom: var(--kf-space-5);
}
.kf-notice .bi { font-size: 1.4rem; color: var(--kf-red); line-height: 1.3; flex: none; }
.kf-notice strong { color: var(--kf-red-deep); }

/* Hero actions */
.kf-asp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--kf-space-3); }

/* Reference-number confirmation box */
.kf-asp-ref {
    display: grid; gap: .35rem; text-align: center; max-width: 440px;
    margin: 0 auto var(--kf-space-5); padding: var(--kf-space-5);
    border: 1.5px dashed #E4D9D9; border-radius: var(--kf-radius-lg); background: var(--kf-red-soft);
}
.kf-asp-ref__label { font-size: var(--kf-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--kf-ink-muted); }
.kf-asp-ref__code { font-size: var(--kf-fs-h3); font-weight: 800; letter-spacing: .12em; color: var(--kf-red-deep); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.kf-asp-ref__hint { font-size: var(--kf-fs-xs); color: var(--kf-ink-muted); }

/* Status chip */
.kf-asp-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--kf-fs-xs); font-weight: 600; padding: .25rem .6rem; border-radius: var(--kf-radius-pill); }
.kf-asp-chip--pub { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }

/* Follow-up grid + cards */
.kf-asp-grid { display: grid; gap: var(--kf-space-5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .kf-asp-grid { grid-template-columns: repeat(2, 1fr); } }
.kf-asp-card {
    display: flex; flex-direction: column; gap: var(--kf-space-2); height: 100%;
    background: var(--kf-surface); border: 1px solid var(--kf-border); border-radius: var(--kf-radius-lg);
    padding: var(--kf-space-5); transition: border-color var(--kf-dur) var(--kf-ease), box-shadow var(--kf-dur) var(--kf-ease), transform var(--kf-dur) var(--kf-ease);
}
.kf-asp-card:hover, .kf-asp-card:focus-within { border-color: #E9C9C9; box-shadow: var(--kf-shadow); transform: translateY(-2px); }
.kf-asp-card__top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kf-asp-card__title { font-size: var(--kf-fs-h4); line-height: 1.3; margin: .2rem 0 0; }
.kf-asp-card__title a { color: var(--kf-ink); text-decoration: none; }
.kf-asp-card__title a:hover { color: var(--kf-red); }
.kf-asp-card__summary { font-size: var(--kf-fs-sm); color: #4B5563; margin: 0; line-height: 1.55; }
.kf-asp-card__actions { display: flex; gap: .45rem; font-size: var(--kf-fs-sm); color: #047857; margin: 0; }
.kf-asp-card__actions .bi { flex: none; margin-top: .15rem; }
.kf-asp-card__foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--kf-space-3); border-top: 1px solid var(--kf-border); }
.kf-asp-card__date { font-size: var(--kf-fs-xs); color: var(--kf-ink-muted); display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

/* Detail page */
.kf-asp-detail__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: var(--kf-space-3); }
.kf-asp-detail__dates { font-size: var(--kf-fs-sm); color: var(--kf-ink-muted); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: var(--kf-space-5); }
.kf-asp-detail__figure { margin: 0 0 var(--kf-space-6); border-radius: var(--kf-radius-lg); overflow: hidden; border: 1px solid var(--kf-border); }
.kf-asp-detail__figure img { width: 100%; height: auto; display: block; }
.kf-asp-prose { color: #374151; line-height: var(--kf-lh-body); }
.kf-asp-detail__foot { display: flex; flex-wrap: wrap; gap: var(--kf-space-3); margin-top: var(--kf-space-7); padding-top: var(--kf-space-5); border-top: 1px solid var(--kf-border); }

/* Submission form — anonymous toggle */
.kf-asp-anon { background: var(--kf-surface-alt); border-radius: var(--kf-radius); padding: var(--kf-space-4); margin-bottom: var(--kf-space-4); }

/* ---------- 20d. Welcome campaign popup ---------- */
.kf-noscroll { overflow: hidden; }
.kf-campaign { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: var(--kf-space-4); }
.kf-campaign[hidden] { display: none; }
.kf-campaign__backdrop { position: absolute; inset: 0; background: rgba(16,10,11,.62); opacity: 0; transition: opacity var(--kf-dur) var(--kf-ease); backdrop-filter: blur(2px); }
.kf-campaign.is-open .kf-campaign__backdrop { opacity: 1; }
.kf-campaign__dialog {
    position: relative; z-index: 1; width: 100%; max-width: 480px; background: var(--kf-surface);
    border-radius: var(--kf-radius-lg); overflow: hidden; box-shadow: var(--kf-shadow-lg);
    transform: translateY(16px) scale(.97); opacity: 0;
    transition: transform .28s var(--kf-ease), opacity .28s var(--kf-ease);
    max-height: calc(100vh - 2 * var(--kf-space-4)); overflow-y: auto;
}
.kf-campaign.is-open .kf-campaign__dialog { transform: none; opacity: 1; }
.kf-campaign__close {
    position: absolute; right: .6rem; top: .6rem; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: rgba(16,10,11,.45); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--kf-dur) var(--kf-ease);
}
.kf-campaign__close:hover { background: rgba(16,10,11,.75); }
.kf-campaign__media { aspect-ratio: 16 / 9; background: var(--kf-surface-alt); }
.kf-campaign__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kf-campaign__media--placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--kf-red) 0%, var(--kf-red-deep) 100%); }
.kf-campaign__media--placeholder .bi { font-size: 3.5rem; color: rgba(255,255,255,.9); }
.kf-campaign__body { padding: var(--kf-space-6); text-align: center; }
.kf-campaign__body h2 { font-size: var(--kf-fs-h3); margin: .25rem 0 var(--kf-space-3); }
.kf-campaign__body p { color: var(--kf-ink-muted); line-height: 1.6; margin: 0 0 var(--kf-space-5); }
.kf-campaign__body .kf-btn { width: 100%; justify-content: center; }
/* image-only variant: a plain poster, no text, no button */
.kf-campaign--image .kf-campaign__dialog { width: auto; max-width: min(460px, 92vw); max-height: 92vh; line-height: 0; }
.kf-campaign--image .kf-campaign__imglink { display: block; }
.kf-campaign--image img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
    .kf-campaign__dialog, .kf-campaign__backdrop { transition: none; }
}

/* ---------- 21. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .kf-card--hover:hover { transform: none; }
}