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


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

.contact-hero {
    position: relative;

    min-height: 420px;

    display: flex;

    align-items: center;

    overflow: hidden;

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

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


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

.contact-hero-pattern {
    position: absolute;

    width: 400px;
    height: 400px;

    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
   ========================================================= */

.contact-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.42) 62%,
            rgba(4, 18, 9, 0.14) 100%
        );

    z-index: 1;

    pointer-events: none;
}


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

.contact-hero-content {
    position: relative;

    z-index: 2;

    max-width: 760px;

    padding:
        65px 0;

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


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

.contact-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;
}


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

    width: 30px;

    height: 2px;

    background:
        #8bcf2f;
}


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

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

    margin: 0;

    color: #ffffff;

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

    line-height: 1.05;

    letter-spacing: -0.04em;

    font-weight: 700;
}


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

.contact-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) {

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

        background-position:
            center center;
    }

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

        margin-left:
            0;
    }

}


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

@media (max-width: 600px) {

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

        background-position:
            center center;
    }

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

        margin-left:
            0;
    }

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

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

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

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

        height:
            300px;

        right:
            -160px;

        top:
            -130px;
    }

}
/* =========================================================
   MAIN CONTACT SECTION
   ========================================================= */

.contact-section {
    padding:
        85px 0
        90px;

    background:
        #f7f9f7;
}


.contact-section-header {
    max-width: 760px;

    margin-bottom: 42px;
}


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

    color: #101713;

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

    line-height: 1.08;

    letter-spacing:
        -0.035em;
}


.contact-section-header p {
    max-width: 650px;

    margin:
        16px 0 0;

    color: #68716b;

    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.contact-main-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 20px;

    align-items: stretch;
}


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

.contact-information {
    padding:
        32px;

    background:
        #ffffff;

    border:
        1px solid #dfe8e1;

    border-radius:
        15px;

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


.contact-card-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #168138;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.contact-card-label::before {
    content: "";

    width: 22px;

    height: 2px;

    background:
        #8bcf2f;
}


.contact-information-heading h3 {
    margin:
        0 0 12px;

    color: #17201a;

    font-size: 1.45rem;

    line-height: 1.25;

    letter-spacing:
        -0.02em;
}


.contact-information-heading p {
    margin: 0;

    color: #69736c;

    font-size: 0.82rem;

    line-height: 1.75;
}


/* =========================================================
   CONTACT LIST
   ========================================================= */

.contact-info-list {
    margin-top: 28px;

    border-top:
        1px solid #e5ece6;
}


.contact-info-item {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 14px;

    padding:
        17px 0;

    border-bottom:
        1px solid #e5ece6;
}


.contact-info-item-wide {
    align-items:
        start;
}


.contact-info-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    border:
        1px solid #d8e5da;

    border-radius: 8px;

    background:
        #f3f8f4;

    color: #168138;

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing:
        0.03em;
}


.contact-info-label {
    display: block;

    margin-bottom: 5px;

    color: #7a847d;

    font-size: 0.66rem;

    font-weight: 700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.contact-info-item a {
    color: #263129;

    font-size: 0.82rem;

    line-height: 1.6;

    transition:
        color 0.2s ease;
}


.contact-info-item a:hover {
    color:
        #168138;
}


.contact-info-item p {
    margin: 0;

    color: #59645c;

    font-size: 0.82rem;

    line-height: 1.7;
}


/* =========================================================
   APPLICATION LINKS
   ========================================================= */

.contact-app-links {
    margin-top: 27px;
}


.contact-app-grid {
    display: grid;

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

    gap: 9px;
}


.contact-app {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height:
        45px;

    padding:
        0 11px;

    border:
        1px solid #e1e9e3;

    border-radius:
        8px;

    background:
        #ffffff;

    color: #344039;

    font-size: 0.74rem;

    font-weight: 600;

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


.contact-app:hover {
    transform:
        translateY(-2px);

    border-color:
        #bdd2c1;

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


.contact-app-symbol {
    width: 27px;
    height: 27px;

    display: flex;

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

    flex-shrink: 0;

    border-radius:
        7px;

    font-size: 0.55rem;

    font-weight: 700;
}


.contact-app.whatsapp
.contact-app-symbol {
    background:
        #e7f7eb;

    color:
        #168138;
}


.contact-app.email
.contact-app-symbol {
    background:
        #f4edf4;

    color:
        #7b3f78;
}


.contact-app.instagram
.contact-app-symbol {
    background:
        #f7edf4;

    color:
        #b24275;
}


.contact-app.shopee
.contact-app-symbol {
    background:
        #fff0eb;

    color:
        #d65732;
}


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

.contact-form-card {
    padding:
        32px;

    background:
        #ffffff;

    border:
        1px solid #dfe8e1;

    border-radius:
        15px;

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


.contact-form-header h3 {
    margin:
        0 0 10px;

    color:
        #17201a;

    font-size:
        1.65rem;

    line-height:
        1.25;

    letter-spacing:
        -0.025em;
}


.contact-form-header p {
    max-width:
        600px;

    margin:
        0;

    color:
        #69736c;

    font-size:
        0.82rem;

    line-height:
        1.75;
}


/* =========================================================
   FORM
   ========================================================= */

.contact-form {
    display:
        grid;

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

    column-gap:
        14px;

    row-gap:
        14px;

    margin-top:
        27px;
}


.contact-form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.contact-form-group:nth-child(5),
.contact-form-group:nth-child(6),
.contact-form-notice,
.contact-form-submit {
    grid-column:
        1 / -1;
}


.contact-form-group label {
    color:
        #28332c;

    font-size:
        0.76rem;

    font-weight:
        600;
}


.contact-form-group label span {
    color:
        #c62828;
}


.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    width:
        100%;

    box-sizing:
        border-box;

    padding:
        11px 12px;

    border:
        1px solid #d6e0d8;

    border-radius:
        8px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #202920;

    font-family:
        inherit;

    font-size:
        0.8rem;

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


.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color:
        #9ca59f;
}


.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    border-color:
        #4caf50;

    box-shadow:
        0 0 0 3px
        rgba(
            76,
            175,
            80,
            0.10
        );
}


.contact-form-group select {
    cursor:
        pointer;
}


.contact-form-group textarea {
    min-height:
        135px;

    resize:
        vertical;
}


/* =========================================================
   NOTICE
   ========================================================= */

.contact-form-notice {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    padding:
        11px 12px;

    border:
        1px solid #dce9df;

    border-radius:
        8px;

    background:
        #f5f9f5;
}


.contact-form-notice span {
    width:
        21px;

    height:
        21px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #e3f2e5;

    color:
        #168138;

    font-size:
        0.65rem;

    font-weight:
        700;
}


.contact-form-notice p {
    margin:
        0;

    color:
        #6b756e;

    font-size:
        0.7rem;

    line-height:
        1.6;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.contact-form-submit {
    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 18px;

    border:
        1px solid #168138;

    border-radius:
        8px;

    background:
        #168138;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.8rem;

    font-weight:
        700;

    cursor:
        pointer;

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


.contact-form-submit:hover {
    background:
        #0b6623;

    transform:
        translateY(-2px);

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


/* =========================================================
   LOCATION
   ========================================================= */

.contact-location-section {
    padding:
        85px 0
        90px;

    background:
        #ffffff;
}


.contact-location-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 0.75fr);

    gap:
        18px;

    align-items:
        stretch;
}


.contact-location-map {
    min-height:
        410px;

    overflow:
        hidden;

    border:
        1px solid #dfe8e1;

    border-radius:
        14px;

    background:
        #e5ece6;

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


.contact-location-map iframe {
    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        410px;

    border:
        0;
}


.contact-location-card {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        34px;

    background:
        #f7f9f7;

    border:
        1px solid #dfe8e1;

    border-radius:
        14px;
}


.contact-location-card h3 {
    max-width:
        320px;

    margin:
        0 0 26px;

    color:
        #17201a;

    font-size:
        1.45rem;

    line-height:
        1.25;
}


.contact-location-detail {
    padding:
        17px 0;

    border-top:
        1px solid #dfe8e1;
}


.contact-location-detail span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #7a847d;

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.contact-location-detail p {
    margin:
        0;

    color:
        #59645c;

    font-size:
        0.81rem;

    line-height:
        1.7;
}


.contact-map-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        fit-content;

    min-height:
        44px;

    margin-top:
        18px;

    padding:
        0 17px;

    border:
        1px solid #168138;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #168138;

    font-size:
        0.77rem;

    font-weight:
        700;

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


.contact-map-button:hover {
    background:
        #168138;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


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

.contact-cta {
    padding:
        70px 0;

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


.contact-cta-inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


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

    color:
        #ffffff;

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

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}


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

    margin:
        14px 0 0;

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

    font-size:
        0.88rem;

    line-height:
        1.75;
}


.contact-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.8rem;

    font-weight:
        700;

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


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

    transform:
        translateY(-2px);

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


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

@media (max-width: 950px) {

    .contact-main-grid {
        grid-template-columns:
            1fr;
    }


    .contact-information,
    .contact-form-card {
        padding:
            28px;
    }


    .contact-location-grid {
        grid-template-columns:
            1fr;
    }


    .contact-location-map,
    .contact-location-map iframe {
        min-height:
            370px;
    }


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

        flex-direction:
            column;
    }

}


@media (max-width: 700px) {

    .contact-form {
        grid-template-columns:
            1fr;
    }


    .contact-form-group:nth-child(5),
    .contact-form-group:nth-child(6),
    .contact-form-notice,
    .contact-form-submit {
        grid-column:
            1;
    }

}


@media (max-width: 600px) {

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


    .contact-hero-content {
        padding:
            38px 0;
    }


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


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


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


    .contact-section,
    .contact-location-section {
        padding:
            55px 0
            60px;
    }


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


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


    .contact-information,
    .contact-form-card,
    .contact-location-card {
        padding:
            23px;
    }


    .contact-information-heading h3,
    .contact-form-header h3 {
        font-size:
            1.3rem;
    }


    .contact-app-grid {
        grid-template-columns:
            1fr;
    }


    .contact-location-map,
    .contact-location-map iframe {
        min-height:
            320px;
    }


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


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


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


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

}