/* =========================================================
   LANGKAH KUDA — GLOBAL DESIGN SYSTEM FOUNDATION
   3X-B5-A2
   ========================================================= */

/* ---------------------------------------------------------
   1. CORE TOKENS
   --------------------------------------------------------- */

:root {
    --lk-brand-burgundy: #6f263d;
    --lk-brand-burgundy-deep: #4d1728;
    --lk-brand-burgundy-soft: #8a4057;

    --lk-brand-brown: #6b4a37;
    --lk-brand-brown-deep: #493126;

    --lk-brand-gold: #b8925f;
    --lk-brand-gold-soft: #d8c3a5;

    --lk-ink: #241f1c;
    --lk-ink-soft: #625a54;
    --lk-ink-muted: #837971;

    --lk-paper: #fbf8f3;
    --lk-paper-soft: #f5efe7;
    --lk-surface: #ffffff;
    --lk-surface-muted: #f8f4ee;

    --lk-border: rgba(68, 48, 37, 0.16);
    --lk-border-strong: rgba(68, 48, 37, 0.26);

    --lk-success: #43624c;
    --lk-warning: #8b652d;
    --lk-danger: #8c3c43;
    --lk-info: #53626c;

    --lk-link: var(--lk-brand-burgundy);
    --lk-link-hover: var(--lk-brand-burgundy-deep);

    --lk-radius-xs: 6px;
    --lk-radius-sm: 10px;
    --lk-radius-md: 16px;
    --lk-radius-lg: 22px;
    --lk-radius-xl: 30px;

    --lk-shadow-xs:
        0 1px 2px rgba(35, 25, 20, 0.05);

    --lk-shadow-sm:
        0 8px 24px rgba(47, 32, 24, 0.07);

    --lk-shadow-md:
        0 18px 44px rgba(47, 32, 24, 0.10);

    --lk-shadow-lg:
        0 30px 70px rgba(47, 32, 24, 0.13);

    --lk-focus-ring:
        0 0 0 3px rgba(111, 38, 61, 0.20);

    --lk-content-narrow: 720px;
    --lk-content-reading: 820px;
    --lk-content-wide: 1180px;
    --lk-content-max: 1320px;

    --lk-hero-min: 168px;
    --lk-hero-max: 300px;

    --lk-transition-fast: 160ms ease;
    --lk-transition-normal: 240ms ease;
}


/* ---------------------------------------------------------
   2. DARK THEME
   --------------------------------------------------------- */

html[data-theme="malam"] {
    --lk-ink: #f2ede7;
    --lk-ink-soft: #cec4bb;
    --lk-ink-muted: #a99d93;

    --lk-paper: #151210;
    --lk-paper-soft: #1b1714;
    --lk-surface: #211c18;
    --lk-surface-muted: #28211d;

    --lk-border: rgba(233, 218, 202, 0.13);
    --lk-border-strong: rgba(233, 218, 202, 0.22);

    --lk-link: #d9b58a;
    --lk-link-hover: #efd0aa;

    --lk-shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.20);

    --lk-shadow-sm:
        0 8px 24px rgba(0, 0, 0, 0.24);

    --lk-shadow-md:
        0 18px 44px rgba(0, 0, 0, 0.30);

    --lk-shadow-lg:
        0 30px 70px rgba(0, 0, 0, 0.38);
}


/* ---------------------------------------------------------
   3. GLOBAL TYPOGRAPHY / LINKS
   --------------------------------------------------------- */

body {
    color: var(--lk-ink);
    background: var(--lk-paper);
}

a {
    color: var(--lk-link);
    transition:
        color var(--lk-transition-fast),
        opacity var(--lk-transition-fast);
}

a:hover {
    color: var(--lk-link-hover);
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
):focus-visible {
    outline: none;
    box-shadow: var(--lk-focus-ring);
}


/* ---------------------------------------------------------
   4. SHARED CONTAINERS
   --------------------------------------------------------- */

.lk-container {
    width: min(
        calc(100% - 32px),
        var(--lk-content-max)
    );
    margin-inline: auto;
}

.lk-container-wide {
    width: min(
        calc(100% - 32px),
        var(--lk-content-wide)
    );
    margin-inline: auto;
}

.lk-reading-column {
    width: min(
        100%,
        var(--lk-content-reading)
    );
    margin-inline: auto;
}


/* ---------------------------------------------------------
   5. PREMIUM SURFACES
   --------------------------------------------------------- */

.lk-surface {
    background: var(--lk-surface);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-md);
    box-shadow: var(--lk-shadow-xs);
}

.lk-surface-elevated {
    background: var(--lk-surface);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-lg);
    box-shadow: var(--lk-shadow-sm);
}

.lk-panel {
    background:
        linear-gradient(
            180deg,
            var(--lk-surface),
            var(--lk-surface-muted)
        );
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-lg);
    box-shadow: var(--lk-shadow-sm);
}


/* ---------------------------------------------------------
   6. HERO FOUNDATION
   Compact by default.
   --------------------------------------------------------- */

.lk-hero {
    position: relative;
    min-height: var(--lk-hero-min);
    max-height: var(--lk-hero-max);
    overflow: hidden;
    display: grid;
    align-items: center;
    background:
        linear-gradient(
            135deg,
            rgba(111, 38, 61, 0.97),
            rgba(73, 49, 38, 0.96)
        );
    color: #fff;
}

.lk-hero-inner {
    width: min(
        calc(100% - 32px),
        var(--lk-content-wide)
    );
    margin-inline: auto;
    padding-block:
        clamp(28px, 5vw, 54px);
}

.lk-hero-eyebrow {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--lk-brand-gold-soft);
}

.lk-hero h1,
.lk-page-title {
    margin: 0;
    font-size:
        clamp(2rem, 4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.lk-hero-description {
    width: min(
        100%,
        720px
    );
    margin: 14px 0 0;
    font-size:
        clamp(0.98rem, 1.5vw, 1.12rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
}


/* ---------------------------------------------------------
   7. BUTTON SYSTEM
   --------------------------------------------------------- */

.lk-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding:
        0.72rem 1.05rem;

    border:
        1px solid transparent;

    border-radius:
        var(--lk-radius-sm);

    font: inherit;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    transition:
        transform var(--lk-transition-fast),
        background var(--lk-transition-fast),
        border-color var(--lk-transition-fast),
        color var(--lk-transition-fast),
        box-shadow var(--lk-transition-fast);
}

.lk-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.lk-btn-primary {
    color: #fff;
    background:
        var(--lk-brand-burgundy);
    border-color:
        var(--lk-brand-burgundy);
    box-shadow:
        0 8px 18px rgba(111, 38, 61, 0.16);
}

.lk-btn-primary:hover {
    color: #fff;
    background:
        var(--lk-brand-burgundy-deep);
    border-color:
        var(--lk-brand-burgundy-deep);
}

.lk-btn-secondary {
    color:
        var(--lk-brand-burgundy-deep);
    background:
        var(--lk-paper-soft);
    border-color:
        var(--lk-border-strong);
}

.lk-btn-secondary:hover {
    color:
        var(--lk-brand-burgundy-deep);
    background:
        var(--lk-surface);
}

.lk-btn-ghost {
    color:
        var(--lk-ink);
    background:
        transparent;
    border-color:
        var(--lk-border);
}

.lk-btn-ghost:hover {
    color:
        var(--lk-brand-burgundy);
    border-color:
        var(--lk-brand-burgundy-soft);
}

.lk-btn-danger {
    color: #fff;
    background:
        var(--lk-danger);
    border-color:
        var(--lk-danger);
}


/* ---------------------------------------------------------
   8. BADGES / STATUS
   --------------------------------------------------------- */

.lk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 26px;
    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.75rem;
    line-height: 1;
    font-weight: 700;

    background:
        var(--lk-paper-soft);
    border:
        1px solid var(--lk-border);
    color:
        var(--lk-ink-soft);
}

.lk-badge-verified {
    color:
        var(--lk-brand-burgundy-deep);
    background:
        rgba(184, 146, 95, 0.12);
    border-color:
        rgba(184, 146, 95, 0.34);
}


/* ---------------------------------------------------------
   9. FORMS
   --------------------------------------------------------- */

.lk-field {
    display: grid;
    gap: 7px;
}

.lk-field-label {
    color:
        var(--lk-ink);
    font-size: 0.88rem;
    font-weight: 700;
}

.lk-input,
.lk-select,
.lk-textarea {
    width: 100%;
    color:
        var(--lk-ink);
    background:
        var(--lk-surface);
    border:
        1px solid var(--lk-border-strong);

    border-radius:
        var(--lk-radius-sm);

    padding:
        0.72rem 0.82rem;

    font: inherit;

    transition:
        border-color var(--lk-transition-fast),
        box-shadow var(--lk-transition-fast),
        background var(--lk-transition-fast);
}

.lk-input:focus,
.lk-select:focus,
.lk-textarea:focus {
    outline: none;
    border-color:
        var(--lk-brand-burgundy-soft);
    box-shadow:
        var(--lk-focus-ring);
}


/* ---------------------------------------------------------
   10. AUTHOR PORTRAIT FOUNDATION
   B5-A3 will consume this.
   --------------------------------------------------------- */

.lk-author-frame {
    position: relative;
    width: min(
        100%,
        260px
    );

    aspect-ratio: 4 / 5;

    padding: 7px;

    border-radius:
        var(--lk-radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(184, 146, 95, 0.92),
            rgba(111, 38, 61, 0.92)
        );

    box-shadow:
        var(--lk-shadow-md);
}

.lk-author-frame-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;

    border-radius:
        calc(
            var(--lk-radius-xl) - 6px
        );

    background:
        var(--lk-paper-soft);
    border:
        2px solid var(--lk-surface);
}

.lk-author-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.lk-author-frame-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color:
        var(--lk-brand-burgundy);
    background:
        linear-gradient(
            145deg,
            var(--lk-paper-soft),
            var(--lk-surface)
        );

    font-size:
        clamp(2rem, 7vw, 4rem);
    font-weight: 800;
}

.lk-author-frame-verified {
    position: absolute;
    right: 12px;
    bottom: 12px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color:
        var(--lk-brand-burgundy-deep);
    background:
        var(--lk-brand-gold-soft);

    border:
        3px solid var(--lk-surface);

    box-shadow:
        var(--lk-shadow-sm);
}


/* ---------------------------------------------------------
   11. IDENTITY LIST / EXTERNAL PROFILES
   --------------------------------------------------------- */

.lk-identity-stack {
    display: grid;
    gap: 10px;
}

.lk-identity-link {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 42px;

    padding:
        9px 12px;

    border:
        1px solid var(--lk-border);

    border-radius:
        var(--lk-radius-sm);

    color:
        var(--lk-ink);

    background:
        var(--lk-surface);

    text-decoration: none;

    transition:
        transform var(--lk-transition-fast),
        border-color var(--lk-transition-fast),
        box-shadow var(--lk-transition-fast);
}

.lk-identity-link:hover {
    color:
        var(--lk-brand-burgundy);
    border-color:
        rgba(111, 38, 61, 0.34);
    box-shadow:
        var(--lk-shadow-sm);
    transform:
        translateY(-1px);
}


/* ---------------------------------------------------------
   12. LOGO TREATMENT
   --------------------------------------------------------- */

.lk-logo-mark {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.lk-logo-mark-small {
    max-height: 40px;
}

.lk-logo-mark-medium {
    max-height: 64px;
}

.lk-logo-mark-large {
    max-height: 96px;
}


/* ---------------------------------------------------------
   13. LEGACY BOOTSTRAP COLOR NORMALIZATION
   Only visual normalization; semantics unchanged.
   --------------------------------------------------------- */

.btn-primary {
    --bs-btn-bg:
        var(--lk-brand-burgundy);
    --bs-btn-border-color:
        var(--lk-brand-burgundy);
    --bs-btn-hover-bg:
        var(--lk-brand-burgundy-deep);
    --bs-btn-hover-border-color:
        var(--lk-brand-burgundy-deep);
    --bs-btn-active-bg:
        var(--lk-brand-burgundy-deep);
    --bs-btn-active-border-color:
        var(--lk-brand-burgundy-deep);
}

.text-primary {
    color:
        var(--lk-brand-burgundy) !important;
}

.border-primary {
    border-color:
        var(--lk-brand-burgundy-soft) !important;
}

.bg-primary {
    background-color:
        var(--lk-brand-burgundy) !important;
}


/* ---------------------------------------------------------
   14. REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ---------------------------------------------------------
   15. RESPONSIVE FOUNDATION
   --------------------------------------------------------- */

@media (
    max-width: 768px
) {
    :root {
        --lk-hero-min: 148px;
        --lk-hero-max: 260px;
    }

    .lk-container,
    .lk-container-wide,
    .lk-hero-inner {
        width:
            min(
                calc(100% - 24px),
                var(--lk-content-max)
            );
    }

    .lk-hero-inner {
        padding-block:
            26px;
    }

    .lk-hero h1,
    .lk-page-title {
        font-size:
            clamp(
                1.85rem,
                9vw,
                2.65rem
            );
    }

    .lk-author-frame {
        width:
            min(
                72vw,
                220px
            );
    }
}


/* ---------------------------------------------------------
   16. PRINT SAFETY
   --------------------------------------------------------- */

@media print {
    .lk-btn,
    .lk-badge {
        box-shadow: none !important;
    }

    .lk-hero {
        min-height: auto;
        max-height: none;
        color: #000;
        background: #fff;
    }
}

/* =========================================================
   LANGKAH KUDA — GLOBAL VISUAL CONTRACT 3X-B5-B2
   Official palette + compact premium institutional surfaces
   ========================================================= */

:root {
    /*
     * The official brand family.
     *
     * Do not introduce page-specific "primary blue",
     * generic SaaS purple, or parallel red/gold palettes.
     */
    --lk-brand-burgundy:
        #6f263d;

    --lk-brand-burgundy-deep:
        #4d1728;

    --lk-brand-burgundy-soft:
        #8a4057;

    --lk-brand-brown:
        #6b4a37;

    --lk-brand-brown-deep:
        #493126;

    --lk-brand-gold:
        #b8925f;

    --lk-brand-gold-soft:
        #d8c3a5;

    --lk-brand-espresso:
        #2f211c;

    --lk-brand-ivory:
        #f8f3eb;

    --lk-brand-paper:
        #fffdf9;

    --lk-brand-ink:
        #211916;

    --lk-brand-muted:
        #78665c;

    --lk-brand-line:
        rgba(73, 49, 38, .16);

    --lk-brand-line-strong:
        rgba(73, 49, 38, .27);

    /*
     * Institutional hero contract.
     * Intentionally compact:
     * premium ≠ enormous.
     */
    --lk-hero-pad-block:
        clamp(32px, 4vw, 48px);

    --lk-hero-pad-inline:
        clamp(24px, 5vw, 58px);

    --lk-hero-title:
        clamp(38px, 5.25vw, 60px);

    --lk-hero-radius:
        22px;

    --lk-hero-gap:
        clamp(22px, 4vw, 38px);

    --lk-hero-symbol:
        clamp(104px, 11vw, 124px);

    --lk-card-radius:
        18px;

    --lk-button-radius:
        11px;
}


/*
 * Semantic aliases.
 * Future institutional pages should consume these rather
 * than inventing their own red/gold family.
 */
.lk-brand-surface {
    color:
        var(--lk-brand-brown);

    background:
        var(--lk-brand-paper);
}

.lk-brand-accent {
    color:
        var(--lk-brand-burgundy);
}

.lk-brand-rule {
    border-color:
        var(--lk-brand-line);
}


/*
 * Bootstrap / legacy generic-primary containment.
 * Existing markup may still say "primary"; visually it must
 * remain Langkah Kuda.
 */
.btn-primary {
    --bs-btn-bg:
        var(--lk-brand-burgundy);

    --bs-btn-border-color:
        var(--lk-brand-burgundy);

    --bs-btn-hover-bg:
        var(--lk-brand-burgundy-deep);

    --bs-btn-hover-border-color:
        var(--lk-brand-burgundy-deep);

    --bs-btn-active-bg:
        var(--lk-brand-burgundy-deep);

    --bs-btn-active-border-color:
        var(--lk-brand-burgundy-deep);
}

.text-primary {
    color:
        var(--lk-brand-burgundy)
        !important;
}

.border-primary {
    border-color:
        var(--lk-brand-burgundy-soft)
        !important;
}

.bg-primary {
    background:
        var(--lk-brand-burgundy)
        !important;
}



/* =========================================================
   3X-B5-B4-C-FIX2
   LEGACY RECOMMENDATION / CONTENT CARD BRAND NORMALIZATION
   ========================================================= */

/*
Sebagian card rekomendasi lama masih memakai
navy/blue sebagai cover placeholder.

Gunakan keluarga warna Langkah Kuda.
*/

:is(
    .recommendation-card,
    .recommend-card,
    .recommended-card,
    .lk-recommendation-card,
    .lk-recommend-card,
    .article-card,
    .content-card
)
:is(
    .card-cover,
    .card-media,
    .article-cover,
    .recommendation-cover,
    .placeholder-cover,
    .media-placeholder
) {
    background:
        linear-gradient(
            145deg,
            #4d1728,
            #6b4a37 68%,
            #8a6751
        ) !important;

    color:
        #fffaf2 !important;
}


/*
Tangkap komponen card LK yang memiliki media block
tanpa mengubah gambar asli.
*/

:is(
    .lk-recommendation-card,
    .lk-recommend-card,
    .lk-related-card,
    .lk-reading-card
)
:is(
    .media,
    .cover,
    .thumb,
    .thumbnail
):not(:has(img)) {
    background:
        linear-gradient(
            145deg,
            #4d1728,
            #6b4a37
        ) !important;
}


/*
Badge dan aksen link lama.
*/

:is(
    .lk-recommendation-card,
    .lk-recommend-card,
    .lk-related-card,
    .lk-reading-card
)
:is(
    .badge,
    .label,
    .eyebrow
) {
    color:
        #6f263d;
}


:is(
    .lk-recommendation-card,
    .lk-recommend-card,
    .lk-related-card,
    .lk-reading-card
)
a {
    color:
        #4d1728;
}


/*
Focus tetap terlihat tanpa memakai blue default.
*/

:is(
    .lk-recommendation-card,
    .lk-recommend-card,
    .lk-related-card,
    .lk-reading-card
)
a:focus-visible {
    outline:
        2px solid #b8925f;

    outline-offset:
        3px;
}


/* ---------------------------------------------------------
   P22-B5 — LANGKAH KUDA SIGNATURE AVATAR
   One canonical 1:1 public identity surface.
   --------------------------------------------------------- */

.lk-avatar-signature {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 22%;
    isolation: isolate;
    line-height: 1;
    background: transparent !important;
    color: var(--lk-brand-burgundy-deep);
}

.lk-avatar-signature > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: inherit;
    background: transparent;
}

.lk-avatar-signature.is-original,
.lk-avatar-signature.is-fallback {
    padding: clamp(2px, 4%, 6px);
    background:
        linear-gradient(
            145deg,
            #6f263d 0%,
            #b58b58 48%,
            #f0d8ae 100%
        ) !important;
    box-shadow:
        0 6px 18px rgba(54, 32, 20, .16),
        inset 0 0 0 1px rgba(255, 248, 235, .44);
}

.lk-avatar-signature.is-original > img {
    border:
        clamp(1px, 1.5%, 3px)
        solid #f8ead0;
    border-radius: 18%;
}

.lk-avatar-signature-initials {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    box-sizing: border-box;
    border:
        clamp(1px, 1.5%, 3px)
        solid #f8ead0;
    border-radius: 18%;
    color: #fff8eb;
    background:
        radial-gradient(
            circle at 72% 20%,
            rgba(246, 232, 205, .17),
            transparent 28%
        ),
        repeating-linear-gradient(
            116deg,
            rgba(255, 255, 255, .025) 0 1px,
            transparent 1px 5px
        ),
        linear-gradient(
            145deg,
            #362014 0%,
            #5b3922 56%,
            #7e5231 100%
        );
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, .22);
}

.lk-avatar-signature--compact
.lk-avatar-signature-initials {
    font-size: .78rem;
}

.lk-avatar-signature--standard
.lk-avatar-signature-initials {
    font-size: 1.08rem;
}

.lk-avatar-signature--hero
.lk-avatar-signature-initials {
    font-size:
        clamp(
            2rem,
            7vw,
            4rem
        );
}

.lk-avatar-signature-role-badge {
    position: absolute;
    right: 5%;
    bottom: 5%;
    z-index: 2;
    display: grid;
    width: 24%;
    min-width: 11px;
    max-width: 34px;
    aspect-ratio: 1 / 1;
    place-items: center;
    box-sizing: border-box;
    border:
        1px solid
        rgba(255, 248, 235, .88);
    border-radius: 50%;
    color: #fff8eb;
    background: #b58b58;
    box-shadow:
        0 2px 7px rgba(54, 32, 20, .28);
    font-size:
        clamp(
            .48rem,
            42%,
            .92rem
        );
    font-weight: 900;
}

.lk-avatar-role--penulis
.lk-avatar-signature-role-badge {
    background: #b98f56;
}

.lk-avatar-role--kontributor
.lk-avatar-signature-role-badge {
    background: #976037;
}

.lk-avatar-role--redaksi
.lk-avatar-signature-role-badge {
    background: #6f263d;
}

.lk-avatar-role--pembaca
.lk-avatar-signature-role-badge {
    background: #8d6845;
}

/* Converted host wrappers must not add a second visual frame. */
.lk-avatar-host {
    overflow: visible;
}

.lk-avatar-host::after {
    display: none !important;
    content: none !important;
}

.lk-avatar-host > .lk-avatar-signature,
.lk-avatar-host
.lk-author-frame-inner
> .lk-avatar-signature {
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .lk-avatar-signature,
    .lk-avatar-signature > img {
        transition: none !important;
        animation: none !important;
    }
}