/* =========================================================
   LANGKAH KUDA — PREMIUM WRITER DIRECTORY
   BAGIAN 2E-C3D-1
   ========================================================= */

.lk-writers-page {
    --writer-brown-deep: #2b1a16;
    --writer-brown: #493028;
    --writer-brown-soft: #76584c;
    --writer-red: #b7352f;
    --writer-red-dark: #8d2723;
    --writer-paper: #f8f1e5;
    --writer-card: #fffdf8;
    --writer-sand: #e8dcc8;
    --writer-line: rgba(73, 48, 40, .18);
    --writer-gold: #c49346;

    width: 100%;
    max-width: 1180px;
    margin: 28px auto 96px;
}


/* =========================================================
   HERO
   ========================================================= */

.lk-writers-hero {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: clamp(28px, 5vw, 62px);

    overflow: hidden;

    padding:
        clamp(38px, 6vw, 68px)
        clamp(28px, 6vw, 72px);

    color: #fffaf0;

    border:
        1px solid
        rgba(255, 255, 255, .12);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(196, 147, 70, .23),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            var(--writer-brown-deep) 0%,
            var(--writer-brown) 61%,
            #6a4439 100%
        );

    box-shadow:
        0 28px 68px
        rgba(43, 26, 22, .18);
}

.lk-writers-hero::before {
    position: absolute;
    z-index: -1;
    top: -128px;
    right: -94px;

    width: 390px;
    aspect-ratio: 1;

    content: "";

    border:
        1px solid
        rgba(255, 255, 255, .08);
    border-radius: 42%;

    background:
        linear-gradient(
            145deg,
            rgba(183, 53, 47, .42),
            rgba(183, 53, 47, .03)
        );

    transform: rotate(24deg);
}

.lk-writers-hero::after {
    position: absolute;
    z-index: -1;
    right: clamp(175px, 18vw, 260px);
    bottom: -54px;

    content: none !important;
    display: none !important;

    color: rgba(255, 250, 240, .055);

    font-family: Georgia, serif;
    font-size: clamp(170px, 23vw, 290px);
    line-height: 1;
}

.lk-writers-eyebrow,
.lk-writer-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--writer-red);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.lk-writers-eyebrow::before,
.lk-writer-label::before {
    width: 22px;
    height: 2px;

    content: "";

    background: currentColor;
}

.lk-writers-hero
.lk-writers-eyebrow {
    color: #e7bd72;
}

.lk-writers-hero h1 {
    max-width: 760px;
    margin: 12px 0 17px;

    color: #fffaf0;

    font-family:
        var(--font-display),
        Georgia,
        serif;
    font-size:
        clamp(46px, 7vw, 78px);
    font-weight: 760;
    line-height: .94;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.lk-writers-hero p {
    max-width: 690px;
    margin: 0;

    color:
        rgba(255, 250, 240, .76);

    font-family:
        var(--font-body),
        Georgia,
        serif;
    font-size: 17px;
    line-height: 1.65;
}

.lk-writers-count {
    position: relative;

    display: grid;
    min-width: 148px;
    min-height: 142px;
    place-content: center;

    padding: 22px;

    border:
        1px solid
        rgba(255, 250, 240, .21);
    border-radius: 21px;

    background:
        rgba(255, 250, 240, .075);

    text-align: center;

    box-shadow:
        inset 0 1px
        rgba(255, 255, 255, .12);

    backdrop-filter: blur(12px);
}

.lk-writers-count::before {
    position: absolute;
    inset: 8px;

    content: "";

    border:
        1px solid
        rgba(255, 250, 240, .08);
    border-radius: 15px;
}

.lk-writers-count strong,
.lk-writers-count span {
    position: relative;
    display: block;
}

.lk-writers-count strong {
    color: #fffaf0;

    font-family:
        var(--font-display),
        Georgia,
        serif;
    font-size: 48px;
    line-height: 1;
}

.lk-writers-count span {
    margin-top: 8px;

    color:
        rgba(255, 250, 240, .68);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/* =========================================================
   SEARCH DESK
   ========================================================= */

.lk-writers-search {
    max-width: 920px;
    margin: 34px auto 46px;
    padding: 20px;

    border:
        1px solid
        var(--writer-line);
    border-radius: 19px;

    background:
        color-mix(
            in srgb,
            var(--writer-card) 96%,
            transparent
        );

    box-shadow:
        0 16px 40px
        rgba(73, 48, 40, .07);
}

.lk-writers-search > label {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 10px 3px;

    color: var(--writer-red);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lk-writers-search > label::before {
    width: 18px;
    height: 2px;

    content: "";

    background: currentColor;
}

.lk-writers-search > div {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 10px;
}

.lk-writers-search input {
    width: 100%;
    min-width: 0;
    min-height: 54px;

    padding: 13px 18px;

    color: var(--writer-brown-deep);

    border:
        1px solid
        rgba(73, 48, 40, .2);
    border-radius: 13px;

    background: var(--writer-card);

    outline: none;

    font-family:
        var(--font-body),
        Georgia,
        serif;
    font-size: 16px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.lk-writers-search input::placeholder {
    color:
        rgba(73, 48, 40, .52);
}

.lk-writers-search input:focus {
    border-color: var(--writer-red);

    box-shadow:
        0 0 0 4px
        rgba(183, 53, 47, .1);
}

.lk-writers-search button {
    display: inline-flex;
    min-width: 112px;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 21px;

    color: #fffaf0;

    border:
        1px solid
        var(--writer-red-dark);
    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            #c13e36,
            var(--writer-red)
        );

    cursor: pointer;

    box-shadow:
        0 8px 18px
        rgba(141, 39, 35, .17);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .03em;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.lk-writers-search button::after {
    content: "→";
    font-size: 14px;
}

.lk-writers-search button:hover,
.lk-writers-search button:focus-visible {
    background: var(--writer-brown-deep);

    box-shadow:
        0 11px 22px
        rgba(43, 26, 22, .2);

    transform: translateY(-2px);
}

.lk-writers-search > p {
    margin: 12px 4px 0;

    color: var(--writer-brown-soft);

    font-size: 12px;
}

.lk-writers-search > p a {
    color: var(--writer-red);
    font-weight: 800;
    text-underline-offset: 3px;
}


/* =========================================================
   DIRECTORY HEADING
   ========================================================= */

.lk-writers-directory-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;

    margin: 0 0 22px;
    padding: 0 2px 16px;

    border-bottom:
        1px solid
        var(--writer-line);
}

.lk-writers-directory-head span {
    color: var(--writer-red);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.lk-writers-directory-head h2 {
    margin: 6px 0 0;

    color: var(--writer-brown-deep);

    font-family:
        var(--font-display),
        Georgia,
        serif;
    font-size:
        clamp(27px, 4vw, 42px);
    line-height: 1;
    letter-spacing: -.035em;
}

.lk-writers-directory-head p {
    max-width: 390px;
    margin: 0;

    color: var(--writer-brown-soft);

    font-size: 14px;
    line-height: 1.55;
    text-align: right;
}


/* =========================================================
   WRITER GRID & CARDS
   ========================================================= */

.lk-writers-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 510px),
                1fr
            )
        );
    gap: 23px;
}

.lk-writer-card {
    position: relative;

    display: grid;
    grid-template-columns:
        190px
        minmax(0, 1fr);
    min-width: 0;
    min-height: 320px;

    overflow: hidden;

    border:
        1px solid
        var(--writer-line);
    border-top:
        4px solid
        var(--writer-red);
    border-radius: 21px;

    background: var(--writer-card);

    box-shadow:
        0 17px 42px
        rgba(73, 48, 40, .075);

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.lk-writer-card:hover {
    border-color:
        rgba(183, 53, 47, .34);

    box-shadow:
        0 25px 54px
        rgba(73, 48, 40, .13);

    transform: translateY(-4px);
}

.lk-writer-photo {
    position: relative;

    min-height: 100%;
    overflow: hidden;

    border-right:
        1px solid
        var(--writer-line);

    background:
        linear-gradient(
            145deg,
            var(--writer-brown-deep),
            var(--writer-brown)
        );
}

.lk-writer-photo::after {
    position: absolute;
    right: 12px;
    bottom: 10px;

    content: "LK";

    color:
        rgba(255, 250, 240, .62);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.lk-writer-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition:
        filter .28s ease,
        transform .45s ease;
}

.lk-writer-card:hover
.lk-writer-photo img {
    transform: scale(1.025);
}

.lk-writer-photo > span {
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;

    color: #e7bd72;

    font-family:
        var(--font-display),
        Georgia,
        serif;
    font-size: 52px;
    font-weight: 850;
}

.lk-writer-body {
    display: flex;
    min-width: 0;
    flex-direction: column;

    padding: 25px 26px 22px;
}

.lk-writer-body h2 {
    margin: 9px 0 9px;

    color: var(--writer-brown-deep);

    font-family:
        var(--font-display),
        Georgia,
        serif;
    font-size:
        clamp(27px, 2.35vw, 35px);
    font-weight: 760;
    line-height: 1.01;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.lk-writer-body h2 a {
    color: inherit;

    text-decoration: none;

    transition: color .18s ease;
}

.lk-writer-body h2 a:hover,
.lk-writer-body h2 a:focus-visible {
    color: var(--writer-red);
}

.lk-writer-profession {
    margin: 0;

    color: var(--writer-brown-soft);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .015em;
}

.lk-writer-bio {
    margin: 17px 0 0;

    color:
        color-mix(
            in srgb,
            var(--writer-brown) 77%,
            transparent
        );

    font-size: 14px;
    line-height: 1.58;
}

.lk-writer-expertise {
    margin: 17px 0 0;
    padding: 12px 13px;

    color: var(--writer-brown);

    border-left:
        3px solid
        var(--writer-red);

    background:
        color-mix(
            in srgb,
            var(--writer-sand) 62%,
            transparent
        );

    font-size: 12px;
    line-height: 1.55;
}

.lk-writer-expertise strong {
    display: block;

    margin-bottom: 3px;

    color: var(--writer-red);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 8px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.lk-writer-body footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-top: auto;
    padding-top: 20px;

    border-top:
        1px solid
        var(--writer-line);

    font-size: 10px;
}

.lk-writer-body footer span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;

    padding: 6px 8px;

    color: var(--writer-brown-soft);

    border:
        1px solid
        var(--writer-line);
    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--writer-paper) 72%,
            transparent
        );
}

.lk-writer-body footer span b {
    color: var(--writer-brown-deep);
    font-size: 12px;
}

.lk-writer-body footer > a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;

    margin-left: auto;
    padding: 7px 12px;

    color: #fffaf0;

    border-radius: 9px;

    background: var(--writer-red);

    font-family:
        var(--font-mono),
        monospace;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .02em;
    text-decoration: none;

    transition:
        background .18s ease,
        transform .18s ease;
}

.lk-writer-body footer > a:hover,
.lk-writer-body footer > a:focus-visible {
    background: var(--writer-brown-deep);
    transform: translateX(2px);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.lk-writers-empty {
    grid-column: 1 / -1;

    padding: 62px 26px;

    color: var(--writer-brown);

    border:
        1px dashed
        rgba(73, 48, 40, .27);
    border-radius: 22px;

    background:
        color-mix(
            in srgb,
            var(--writer-card) 80%,
            transparent
        );

    text-align: center;
}

.lk-writers-empty > span {
    color: var(--writer-red);
    font-size: 58px;
}

.lk-writers-empty h2 {
    margin: 7px 0;

    font-family:
        var(--font-display),
        Georgia,
        serif;
    font-size: 31px;
}

.lk-writers-empty p {
    margin: 0 0 22px;
    color: var(--writer-brown-soft);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="malam"]
.lk-writers-page {
    --writer-brown-deep: #f5ecde;
    --writer-brown: #e1d3c2;
    --writer-brown-soft: #b7a798;
    --writer-red: #df6259;
    --writer-red-dark: #c24740;
    --writer-paper: #171b21;
    --writer-card: #1e242c;
    --writer-sand: #302b29;
    --writer-line: rgba(255, 245, 232, .13);
    --writer-gold: #deb568;
}

html[data-theme="malam"]
.lk-writers-hero {
    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(222, 181, 104, .17),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #211713,
            #38251f 60%,
            #54342d
        );
}

html[data-theme="malam"]
.lk-writers-search,
html[data-theme="malam"]
.lk-writer-card,
html[data-theme="malam"]
.lk-writers-empty {
    background: var(--writer-card);
}

html[data-theme="malam"]
.lk-writers-search input {
    color: var(--writer-brown-deep);
    background: #151a20;
}

html[data-theme="malam"]
.lk-writer-expertise {
    background:
        rgba(223, 98, 89, .075);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .lk-writers-hero {
        padding:
            44px
            36px;
    }

    .lk-writers-hero h1 {
        font-size:
            clamp(48px, 8vw, 66px);
    }

    .lk-writer-card {
        grid-template-columns:
            175px
            minmax(0, 1fr);
    }

    .lk-writers-directory-head {
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .lk-writers-page {
        margin-top: 18px;
        margin-bottom: 70px;
    }

    .lk-writers-hero {
        grid-template-columns: 1fr;
        gap: 25px;

        padding: 34px 25px;

        border-radius: 23px;
    }

    .lk-writers-hero::after {
        right: -20px;
        bottom: -38px;
        font-size: 190px;
    }

    .lk-writers-count {
        display: flex;
        width: 100%;
        min-height: 0;
        align-items: center;
        justify-content: space-between;

        padding: 16px 19px;

        text-align: left;
    }

    .lk-writers-count strong {
        font-size: 38px;
    }

    .lk-writers-count span {
        margin-top: 0;
    }

    .lk-writers-search {
        margin: 24px auto 38px;
        padding: 16px;
    }

    .lk-writers-search > div {
        grid-template-columns: 1fr;
    }

    .lk-writers-search button {
        width: 100%;
    }

    .lk-writers-directory-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .lk-writers-directory-head p {
        max-width: 520px;
        text-align: left;
    }

    .lk-writer-card {
        grid-template-columns:
            155px
            minmax(0, 1fr);
    }

    .lk-writer-body {
        padding: 22px 20px;
    }
}

@media (max-width: 560px) {
    .lk-writers-hero h1 {
        font-size: 45px;
    }

    .lk-writers-hero p {
        font-size: 15px;
    }

    .lk-writer-card {
        grid-template-columns: 1fr;
    }

    .lk-writer-photo {
        min-height: 0;
        aspect-ratio: 16 / 10;

        border-right: 0;
        border-bottom:
            1px solid
            var(--writer-line);
    }

    .lk-writer-body h2 {
        font-size:
            clamp(28px, 8vw, 36px);
    }
}

@media (max-width: 390px) {
    .lk-writers-hero {
        padding: 30px 20px;
    }

    .lk-writers-hero h1 {
        font-size: 40px;
    }

    .lk-writers-search {
        padding: 13px;
    }

    .lk-writer-body {
        padding: 20px 17px;
    }

    .lk-writer-body footer > a {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lk-writer-card,
    .lk-writer-photo img,
    .lk-writer-body h2 a,
    .lk-writer-body footer > a,
    .lk-writers-search button {
        transition: none !important;
    }
}


/* =========================================================
   3X-B5-A3-B
   PREMIUM WRITER DIRECTORY — DESIGN SYSTEM ALIGNMENT
   ========================================================= */

.lk-writers-page {
    --writer-espresso:
        var(--lk-ink);

    --writer-brown:
        var(--lk-ink-soft);

    --writer-brown-soft:
        var(--lk-ink-muted);

    --writer-red:
        var(--lk-brand-burgundy);

    --writer-red-dark:
        var(--lk-brand-burgundy-deep);

    --writer-paper:
        var(--lk-paper);

    --writer-card:
        var(--lk-surface);

    --writer-sand:
        var(--lk-paper-soft);

    --writer-line:
        var(--lk-border);

    --writer-gold:
        var(--lk-brand-gold);
}


.lk-writers-hero {
    min-height: 0;

    padding:
        clamp(
            24px,
            4vw,
            38px
        );

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

    border-top:
        3px solid
        var(--lk-brand-burgundy);

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

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(184, 146, 95, .09),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            var(--lk-surface),
            var(--lk-paper-soft)
        );

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


.lk-writer-card {
    overflow: visible;

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

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

    background:
        var(--lk-surface);

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

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


.lk-writer-card:hover {
    transform:
        translateY(-3px);

    border-color:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            25%,
            var(--lk-border)
        );

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


.lk-writer-photo.lk-author-frame {
    width:
        min(
            calc(100% - 30px),
            176px
        );

    height: auto;

    aspect-ratio: 4 / 5;

    margin:
        22px auto 8px;

    padding: 5px;

    border: 0;

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

    background:
        linear-gradient(
            145deg,
            var(--lk-brand-gold),
            var(--lk-brand-burgundy)
        );

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


.lk-writer-photo
.lk-author-frame-inner {
    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

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

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

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


.lk-writer-photo
.lk-author-frame-inner img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.lk-writer-photo
.lk-author-frame-placeholder {
    display: grid;

    width: 100%;
    height: 100%;

    place-items: center;

    color:
        var(--lk-brand-burgundy);

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

    font-size:
        clamp(
            2rem,
            6vw,
            3.6rem
        );

    font-weight: 800;
}


.lk-writer-photo
.lk-author-frame-verified {
    width: 30px;
    height: 30px;

    right: 8px;
    bottom: 8px;

    font-size: .76rem;
}


.lk-writer-body {
    padding:
        14px 20px 20px;
}


.lk-writer-label {
    color:
        var(--lk-brand-burgundy);

    letter-spacing: .08em;
}


.lk-writer-body h2 {
    margin-top: 8px;

    color:
        var(--lk-ink);

    line-height: 1.08;

    letter-spacing:
        -.025em;
}


.lk-writer-profession {
    color:
        var(--lk-ink-soft);

    line-height: 1.55;
}


.lk-writer-expertise {
    padding:
        9px 11px;

    border-left:
        3px solid
        var(--lk-brand-burgundy);

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

    background:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            4%,
            var(--lk-surface)
        );
}


.lk-writer-expertise strong {
    color:
        var(--lk-brand-burgundy);
}


.lk-writer-card footer {
    border-top:
        1px solid
        var(--lk-border);
}


html[data-theme="malam"]
.lk-writers-hero,
html[data-theme="malam"]
.lk-writer-card {
    background:
        var(--lk-surface);

    border-color:
        var(--lk-border);
}


@media (
    max-width: 560px
) {
    .lk-writers-hero {
        padding:
            22px 18px;
    }

    .lk-writer-photo.lk-author-frame {
        width:
            min(
                58vw,
                164px
            );
    }
}

/* P22-B5 — retire the visible 4:5 frame without breaking old selectors. */
.lk-writer-photo.lk-author-frame.lk-avatar-host {
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: var(--lk-radius-xl);
    background: transparent;
    box-shadow: none;
}

.lk-writer-photo.lk-avatar-host
.lk-author-frame-inner {
    width: 100%;
    height: 100%;
    overflow: visible;
    border: 0;
    border-radius: inherit;
    background: transparent;
}

.lk-writer-photo.lk-avatar-host
.lk-author-frame-inner img {
    transform: none;
}