/* =========================================================
   POGAU — ESSAY
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.essay-page {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.essay-section-header {
    margin-bottom: 34px;
}

.essay-section-title {
    display: flex;
    align-items: baseline;
    gap: 28px;
}

.essay-section-title h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(48px, 5vw, 68px);

    line-height: .95;

    font-weight: 500;

    letter-spacing: -2px;
}

.essay-section-subtitle {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    color: #777;
}


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

.essay-hero {
    width: 100%;
    height: 100%;
    margin-bottom: 40px;
}

.essay-hero-card {
    position: relative;

    display: block;

    width: 100%;
    min-height: 440px;

    overflow: hidden;

    background: #111;

    color: #fff;

    text-decoration: none;
}

.essay-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.essay-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.essay-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.82) 34%,
            rgba(0,0,0,.42) 62%,
            rgba(0,0,0,.08) 100%
        );
}

.essay-hero-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 55%;
    min-height: 440px;

    padding: 48px;

    box-sizing: border-box;
}


/* =========================================================
   BADGE
   ========================================================= */

.essay-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 16px;

    padding: 7px 15px;

    background: #c92828;

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


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

.essay-hero-title {
    margin: 0 0 18px;

    font-family:
        "Libre Baskerville", Georgia, serif !important;

    font-size: clamp(38px, 4vw, 58px);

    line-height: .99;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.essay-hero-excerpt {
    max-width: 580px;

    margin: 0 0 22px;

    font-family:
        Georgia,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.55;

    color: rgba(255,255,255,.88);
}


/* =========================================================
   META
   ========================================================= */

.essay-meta {
    font-family:
        serif,
        Helvetica,
        sans-serif;

    font-size: 11px;

    line-height: 1.4;

    color: #777;
}

.essay-hero .essay-meta {
    color: rgba(255,255,255,.78);
}

.essay-meta-separator {
    margin: 0 5px;
}
/* =========================================================
   POGAU ESSAY
   ARTIKEL 2–6 — ZIG-ZAG FINAL
   FOTO BESAR + TIDAK TERPOTONG
   ========================================================= */

.essay-zig-list {
    display: flex;
    flex-direction: column;

    /* Jarak antar artikel seperti sketsa */
    gap: 58px;

    width: 100%;
}


/* =========================================================
   CARD
   ========================================================= */

.essay-zig-card {
    display: grid;

    /* Foto dibuat lebih dominan */
    grid-template-columns: 1.2fr 0.8fr;

    column-gap: 38px;

    align-items: start;

    width: 100%;

    border: none;
}


/* =========================================================
   FOTO
   ========================================================= */

.essay-zig-image {
    display: block;

    width: 100%;

    /* PENTING:
       Jangan pakai height tetap.
       Tinggi mengikuti foto asli.
    */
    height: auto;

    overflow: visible;

    background: transparent;
}


/* FOTO ASLI — TIDAK DIPOTONG */

.essay-zig-image img {
    display: block;

    width: 100%;

    /* Tinggi otomatis mengikuti rasio foto */
    height: auto;

    max-width: 100%;

    /* Jangan crop foto */
    object-fit: contain;

    object-position: center;

    transition: transform .35s ease;
}


/* Hover ringan */

.essay-zig-image:hover img {
    transform: scale(1.015);
}


/* =========================================================
   TEKS
   ========================================================= */

.essay-zig-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    /* Rata atas dengan foto */
    padding: 0;

    margin: 0;
}


/* =========================================================
   BADGE
   ========================================================= */

.essay-zig-content .essay-badge {
    margin: 0 0 14px;
}


/* =========================================================
   JUDUL
   ========================================================= */

.essay-zig-title {
    margin: 0 0 15px;

    font-family:  "Libre Baskerville", Georgia, serif;

    font-size: clamp(25px, 2.35vw, 34px);

    line-height: 1.08;

    font-weight: 700;
}

.essay-zig-title a {
    color: #111;

    text-decoration: none;
}

.essay-zig-title a:hover {
    color: #c91f2c;
}


/* =========================================================
   RINGKASAN
   ========================================================= */

.essay-zig-excerpt {
    margin: 0;

    font-family: Georgia, sans-serif;

    font-size: 14px;

    line-height: 1.6;

    color: #666;
}


/* =========================================================
   META
   ========================================================= */

.essay-zig-content .essay-meta {
    margin-top: 18px;

    padding-top: 0;
}


/* =========================================================
   ZIG-ZAG
   ========================================================= */


/* ---------------------------------------------------------
   ARTIKEL 2
   FOTO KIRI
   --------------------------------------------------------- */

.essay-zig-card:nth-child(odd) {
    grid-template-columns: 1.2fr 0.8fr;
}


/* ---------------------------------------------------------
   ARTIKEL 3
   FOTO KANAN
   --------------------------------------------------------- */

.essay-zig-card:nth-child(even) {
    grid-template-columns: 0.8fr 1.2fr;
}


/* FOTO pindah kanan */

.essay-zig-card:nth-child(even) .essay-zig-image {
    order: 2;
}


/* TEKS pindah kiri */

.essay-zig-card:nth-child(even) .essay-zig-content {
    order: 1;
}


/* =========================================================
   TANPA GARIS
   ========================================================= */

.essay-zig-card,
.essay-zig-list {
    border: none;
}


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

@media (max-width: 800px) {

    .essay-zig-list {
        gap: 42px;
    }

    .essay-zig-card,
    .essay-zig-card:nth-child(odd),
    .essay-zig-card:nth-child(even) {

        grid-template-columns: 1fr;

        display: grid;

        gap: 20px;
    }

    .essay-zig-card:nth-child(even) .essay-zig-image,
    .essay-zig-card:nth-child(even) .essay-zig-content {

        order: initial;
    }

    .essay-zig-image {
        width: 100%;
        height: auto;
    }

    .essay-zig-image img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }

    .essay-zig-title {
        font-size: 28px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .essay-zig-list {
        gap: 38px;
    }

    .essay-zig-card {
        gap: 16px;
    }

    .essay-zig-title {
        font-size: 25px;
        line-height: 1.12;
    }

    .essay-zig-excerpt {
        font-size: 14px;
    }
}

/* =========================================================
   GAP ZIG-ZAG ESSAY
   HANYA MENGATUR JARAK ANTAR ARTIKEL
   ========================================================= */
.essay-zigzag > .essay-zig-card {
    margin-bottom: 50px !important;
}

.essay-zigzag > .essay-zig-card:last-child {
    margin-bottom: 0 !important;
}

/* =========================================================
   PAGINATION ESSAY — COMPACT / BADGE SIZE
   ========================================================= */

.essay-page nav.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 55px !important;
    margin-bottom: 55px !important;
}

/* PAGE 1 OF 2 */
.essay-page nav.pagination .page-number {
    width: 110px !important;
    height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;

    border: 1px solid #111 !important;
    background: transparent !important;
}

/* OLDER POSTS */
.essay-page nav.pagination a.older-posts {
    width: 135px !important;
    height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;

    background: #111 !important;
    color: #fff !important;

    border: 1px solid #111 !important;
}