/* =========================================================
   DOWNLOAD PAGE
   PT KROMO SAKTI MANDRAGUNA
   ========================================================= */


/* =========================================================
   DOWNLOAD HERO
   PT KROMO SAKTI MANDRAGUNA
   ========================================================= */

.download-hero {
    position: relative;

    min-height: 420px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-image:
        url("poster/download.png");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


/* =========================================================
   DECORATIVE CIRCLE
   ========================================================= */

.download-hero-pattern {
    position: absolute;

    width: 420px;
    height: 420px;

    right: -150px;
    top: -150px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            139,
            207,
            47,
            0.20
        );

    box-shadow:
        0 0 0 60px
        rgba(
            139,
            207,
            47,
            0.025
        ),

        0 0 0 120px
        rgba(
            139,
            207,
            47,
            0.015
        );

    pointer-events:
        none;

    z-index:
        1;
}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.download-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 18, 9, 0.90) 0%,
            rgba(4, 18, 9, 0.76) 32%,
            rgba(4, 18, 9, 0.43) 62%,
            rgba(4, 18, 9, 0.14) 100%
        );

    pointer-events:
        none;

    z-index:
        1;
}


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

.download-hero-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

    padding:
        65px 0;

    /*
     * Sedikit digeser ke kiri
     * supaya komposisi lebih seimbang
     * dengan poster.
     */
    margin-left:
        -20px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.download-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        12px;

    color:
        #b7e68e;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.download-eyebrow::before {
    content:
        "";

    width:
        30px;

    height:
        2px;

    background:
        #8bcf2f;
}


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

.download-hero h1 {
    max-width:
        720px;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            3.8rem
        );

    line-height:
        1.05;

    font-weight:
        700;

    letter-spacing:
        -0.04em;
}


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

.download-hero-content p {
    max-width:
        650px;

    margin:
        18px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        0.92rem;

    line-height:
        1.75;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .download-hero {
        min-height:
            380px;

        background-position:
            center center;
    }


    .download-hero-content {
        padding:
            55px 0;

        margin-left:
            0;
    }

}


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

@media (max-width: 600px) {

    .download-hero {
        min-height:
            340px;

        background-position:
            center center;
    }


    .download-hero-content {
        padding:
            45px 0;

        margin-left:
            0;
    }


    .download-hero h1 {
        font-size:
            2.25rem;
    }


    .download-hero-content p {
        font-size:
            0.82rem;
    }


    .download-eyebrow {
        font-size:
            0.62rem;
    }


    .download-hero-pattern {
        width:
            300px;

        height:
            300px;

        right:
            -160px;

        top:
            -130px;
    }

}


/* =========================================================
   DOCUMENT SECTION
   ========================================================= */

.download-section {
    padding:
        90px 0
        95px;

    background:
        #f7f9f7;
}


.download-section-header {
    max-width: 780px;

    margin-bottom: 45px;
}


.download-section-header h2 {
    margin: 0;

    color: #101713;

    font-size:
        clamp(
            2rem,
            4vw,
            3.3rem
        );

    line-height: 1.08;

    letter-spacing: -0.035em;
}


.download-section-header p {
    max-width: 680px;

    margin: 16px 0 0;

    color: #68716b;

    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   DOCUMENT GRID
   ========================================================= */

.download-documents {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 22px;
}


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

.download-document-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #dfe8e1;

    border-radius: 15px;

    box-shadow:
        0 10px 28px
        rgba(
            15,
            23,
            42,
            0.05
        );

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


.download-document-card:hover {
    transform:
        translateY(-5px);

    border-color:
        #b9d7bd;

    box-shadow:
        0 18px 38px
        rgba(
            15,
            23,
            42,
            0.08
        );
}


/* =========================================================
   PDF PREVIEW
   ========================================================= */

.download-document-preview {
    position: relative;

    height: 430px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #eef3ef,
            #e5ebe6
        );

    border-bottom:
        1px solid #e1e8e2;
}


.download-document-preview iframe {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    background: #ffffff;
}


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

.download-preview-badge {
    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 5;

    padding:
        7px 11px;

    border-radius: 999px;

    background:
        rgba(
            11,
            102,
            35,
            0.92
        );

    color: #ffffff;

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing:
        0.08em;

    backdrop-filter:
        blur(5px);
}


/* =========================================================
   PREVIEW OVERLAY
   ========================================================= */

.download-preview-overlay {
    position: absolute;

    right: 15px;
    bottom: 15px;

    z-index: 5;
}


.download-preview-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding:
        0 14px;

    border-radius: 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color: #168138;

    font-size: 0.76rem;

    font-weight: 700;

    box-shadow:
        0 5px 16px
        rgba(
            0,
            0,
            0,
            0.12
        );

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.download-preview-link:hover {
    transform:
        translateY(-2px);

    background:
        #168138;

    color:
        #ffffff;
}


/* =========================================================
   DOCUMENT CONTENT
   ========================================================= */

.download-document-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        25px 27px 27px;
}


.download-document-number {
    display: block;

    margin-bottom: 10px;

    color: #8bcf2f;

    font-size: 0.73rem;

    font-weight: 700;

    letter-spacing:
        0.12em;
}


.download-document-content h3 {
    margin: 0;

    color: #17201a;

    font-size: 1.35rem;

    line-height: 1.25;

    letter-spacing:
        -0.02em;
}


.download-document-content p {
    max-width: 500px;

    margin:
        10px 0 20px;

    color: #69736c;

    font-size: 0.82rem;

    line-height: 1.75;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.download-document-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: auto;

    padding-top:
        18px;

    border-top:
        1px solid #e6ece7;
}


.download-view-button,
.download-file-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding:
        0 16px;

    border-radius: 7px;

    font-size: 0.78rem;

    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.download-view-button {
    border:
        1px solid #cbd9ce;

    background:
        #ffffff;

    color: #3f4b43;
}


.download-view-button:hover {
    border-color:
        #168138;

    color:
        #168138;

    transform:
        translateY(-2px);
}


.download-file-button {
    gap: 8px;

    border:
        1px solid #168138;

    background:
        #168138;

    color:
        #ffffff;
}


.download-file-button:hover {
    border-color:
        #0b6623;

    background:
        #0b6623;

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(
            11,
            102,
            35,
            0.18
        );
}


.download-file-button span {
    font-size: 1rem;

    line-height: 1;
}


/* =========================================================
   NOTE
   ========================================================= */

.download-note {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    padding:
        15px 17px;

    background:
        #ffffff;

    border:
        1px solid #e0e8e2;

    border-radius:
        10px;
}


.download-note-icon {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #e8f5e9;

    color: #168138;

    font-size: 0.72rem;

    font-weight: 700;
}


.download-note p {
    margin: 0;

    color: #69736c;

    font-size: 0.76rem;

    line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.download-cta {
    padding:
        70px 0;

    background:
        linear-gradient(
            120deg,
            #0a2913,
            #176f2d
        );
}


.download-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.download-cta-inner h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    line-height: 1.08;

    letter-spacing:
        -0.035em;
}


.download-cta-inner p {
    max-width: 650px;

    margin:
        14px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size: 0.9rem;

    line-height: 1.75;
}


.download-cta-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    min-height: 48px;

    padding:
        0 21px;

    border-radius: 8px;

    background: #ffffff;

    color: #0b6623;

    font-size: 0.82rem;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.download-cta-button:hover {
    color: #0b6623;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(
            0,
            0,
            0,
            0.14
        );
}


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

@media (max-width: 900px) {

    .download-documents {
        grid-template-columns:
            1fr;
    }


    .download-document-preview {
        height: 460px;
    }


    .download-cta-inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media (max-width: 768px) {

    .download-hero {
        min-height: 270px;
    }


    .download-hero-content {
        padding:
            40px 0;
    }


    .download-hero h1 {
        font-size:
            clamp(
                2rem,
                8vw,
                2.8rem
            );
    }


    .download-section {
        padding:
            65px 0
            70px;
    }


    .download-section-header h2 {
        font-size:
            2.35rem;
    }


    .download-document-preview {
        height: 420px;
    }

}


@media (max-width: 600px) {

    .download-hero {
        min-height: 240px;
    }


    .download-hero-content {
        padding:
            35px 0;
    }


    .download-hero h1 {
        font-size:
            2rem;
    }


    .download-hero-content p {
        font-size:
            0.8rem;
    }


    .download-eyebrow {
        font-size:
            0.62rem;
    }


    .download-section {
        padding:
            55px 0
            60px;
    }


    .download-section-header {
        margin-bottom:
            32px;
    }


    .download-section-header h2 {
        font-size:
            2.1rem;
    }


    .download-section-header p {
        font-size:
            0.82rem;
    }


    .download-document-preview {
        height: 360px;
    }


    .download-document-content {
        padding:
            22px 21px 23px;
    }


    .download-document-content h3 {
        font-size:
            1.18rem;
    }


    .download-document-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .download-view-button,
    .download-file-button {
        width:
            100%;
    }


    .download-note {
        align-items:
            flex-start;
    }


    .download-cta {
        padding:
            55px 0;
    }


    .download-cta-inner h2 {
        font-size:
            2.05rem;
    }


    .download-cta-inner p {
        font-size:
            0.82rem;
    }


    .download-cta-button {
        width:
            100%;
    }

}