/* =========================================================
   PAGE 14 - KENAPA MEMILIH KAMI
   PT. MUSTIKA BERKAH SENTOSA

   Referensi visual:
   Page 14 Company Profile PDF

   Desktop:
   - judul mengikuti proporsi PDF
   - visual lingkaran besar terpotong kiri
   - IMPACT berada di kanan
   - enam item vertikal

   Mobile:
   - layout diadaptasi tanpa mengubah identitas desain
   ========================================================= */


/* =========================================================
   1. DASAR
   ========================================================= */

.company-why-choose-page .why-choose-page {
    position: relative;

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

    color: var(--company-navy);
    background: var(--company-white);
}


.company-why-choose-page .why-choose-container,
.company-why-choose-page .why-choose-navigation-container {
    position: relative;

    width: min(
        calc(100% - 48px),
        var(--company-container)
    );

    margin-inline: auto;
}


/* =========================================================
   2. MENU INDUSTRI TETAP AKTIF

   Page 14 masih merupakan lanjutan bagian Industri.
   ========================================================= */

.company-why-choose-page
.company-navigation
.navigation-link:nth-child(4) {
    color: var(--company-white);
}


/* =========================================================
   3. SECTION
   ========================================================= */

.company-why-choose-page .why-choose-content {
    position: relative;

    min-height: 960px;

    padding:
        calc(var(--company-header-height) + 72px)
        0
        95px;

    overflow: hidden;

    background: var(--company-white);
}


/* =========================================================
   4. JUDUL

   Sama dengan gaya typography page PDF:
   "Kenapa Memilih" regular
   "Kami" bold
   ========================================================= */

.company-why-choose-page .why-choose-heading {
    position: relative;
    z-index: 5;

    width: min(100%, 1080px);
}

.company-why-choose-page
.why-choose-heading h1 {
    margin: 0;

    color: #102b5a;

    font-family: "Montserrat", sans-serif;

    font-size:
        clamp(52px, 4.6vw, 70px);

    font-weight: 400;

    line-height: 1.06;

    letter-spacing: -0.045em;
}

.company-why-choose-page
.why-choose-heading h1 strong {
    font-weight: 800;
}


/* =========================================================
   5. LAYOUT UTAMA
   ========================================================= */

.company-why-choose-page .why-choose-layout {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(420px, 0.92fr)
        minmax(460px, 1fr);

    align-items: center;

    gap: 54px;

    width: 100%;

    margin-top: 66px;
}


/* =========================================================
   6. VISUAL LINGKARAN BESAR

   PDF menampilkan lingkaran yang keluar dari sisi kiri halaman.
   ========================================================= */

.company-why-choose-page .impact-main-visual {
    position: relative;

    width: 100%;
    height: 690px;

    min-width: 0;
}


/* ---------------------------------------------------------
   Outer thin blue line
   --------------------------------------------------------- */

.company-why-choose-page
.impact-main-visual
> .impact-circle-outer {
    position: absolute;

    top: 50%;
    left: -245px;

    width: 690px;
    height: 690px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #0d94df;

    padding: 2px;
}


/* ---------------------------------------------------------
   White gap
   --------------------------------------------------------- */

.company-why-choose-page
.impact-circle-gap-one {
    width: 100%;
    height: 100%;

    padding: 12px;

    border-radius: inherit;

    background: #ffffff;
}


/* ---------------------------------------------------------
   Bright blue ring
   --------------------------------------------------------- */

.company-why-choose-page
.impact-circle-blue {
    width: 100%;
    height: 100%;

    padding: 11px;

    border-radius: inherit;

    background: #098de0;
}


/* ---------------------------------------------------------
   White inner separator
   --------------------------------------------------------- */

.company-why-choose-page
.impact-circle-gap-two {
    width: 100%;
    height: 100%;

    padding: 12px;

    border-radius: inherit;

    background: #ffffff;
}


/* ---------------------------------------------------------
   Navy ring
   --------------------------------------------------------- */

.company-why-choose-page
.impact-circle-navy {
    width: 100%;
    height: 100%;

    padding: 23px;

    border-radius: inherit;

    background: #0d2b5d;
}


/* ---------------------------------------------------------
   Main image
   --------------------------------------------------------- */

.company-why-choose-page .impact-main-photo {
    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    border-radius: 50%;

    background: #dfe5e8;
}

.company-why-choose-page
.impact-main-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Sedikit ke kanan sesuai komposisi pekerja pada PDF.
     */
    object-position: 58% center;
}


/* =========================================================
   7. PANEL IMPACT
   ========================================================= */

.company-why-choose-page .impact-panel {
    position: relative;

    width: 100%;
    max-width: 510px;

    min-width: 0;

    justify-self: start;
}


/* =========================================================
   8. JUDUL IMPACT
   ========================================================= */

.company-why-choose-page .impact-title {
    display: inline-block;

    margin:
        0
        0
        22px;

    padding:
        0
        0
        3px;

    color: #0d2b5d;

    font-family: "Montserrat", sans-serif;

    font-size: 43px;
    font-style: italic;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.035em;

    border-bottom:
        4px solid #0d2b5d;
}


/* =========================================================
   9. ITEM IMPACT
   ========================================================= */

.company-why-choose-page .impact-item {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 22px;

    min-height: 112px;

    margin: 0;

    padding:
        18px
        0;

    border-bottom:
        1px solid rgba(16, 43, 90, 0.23);
}


/*
 * Item terakhir di PDF tidak membutuhkan separator setelahnya.
 */
.company-why-choose-page
.impact-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   10. THUMBNAIL BULAT
   ========================================================= */

.company-why-choose-page .impact-item-image {
    width: 76px;
    height: 76px;

    margin: 0;

    overflow: hidden;

    border-radius: 50%;

    background: #e8ecef;

    border:
        1px solid rgba(16, 43, 90, 0.12);
}

.company-why-choose-page
.impact-item-image img {
    display: block;

    width: 100%;
    height: 100%;

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


/* =========================================================
   11. TEKS IMPACT
   ========================================================= */

.company-why-choose-page .impact-item-copy {
    min-width: 0;
}

.company-why-choose-page
.impact-item-copy h3 {
    margin:
        0
        0
        4px;

    color: #102b5a;

    font-family: "Poppins", sans-serif;

    font-size: 19px;
    font-weight: 500;

    line-height: 1.25;
}

.company-why-choose-page
.impact-item-copy p {
    margin: 0;

    color: #6d7178;

    font-family: "Poppins", sans-serif;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.35;
}


/* =========================================================
   12. NAVIGASI BAWAH
   ========================================================= */

.company-why-choose-page
.why-choose-navigation-band {
    position: relative;
    z-index: 5;

    padding:
        25px
        0
        34px;

    background: var(--company-white);

    border-top:
        1px solid rgba(7, 63, 86, 0.09);
}


.company-why-choose-page
.why-choose-page-navigation {
    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;

    align-items: stretch;
    justify-content: space-between;

    gap: 24px;
}


.company-why-choose-page
.why-choose-page-navigation
.director-page-link {
    width: auto;

    min-width: 190px;
    max-width: 290px;
    min-height: 62px;

    margin: 0;

    padding:
        10px
        14px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--company-navy);
    background: transparent;

    border:
        1px solid rgba(7, 63, 86, 0.25);

    border-radius: 12px;

    box-shadow: none;

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


.company-why-choose-page
.why-choose-page-navigation
.director-page-link:hover,
.company-why-choose-page
.why-choose-page-navigation
.director-page-link:focus-visible {
    color: var(--company-navy);

    background:
        rgba(7, 63, 86, 0.05);

    border-color:
        rgba(7, 63, 86, 0.45);
}


.company-why-choose-page
.why-choose-page-navigation
.director-page-link-next {
    margin-left: auto;

    justify-content: flex-end;

    text-align: right;
}


.company-why-choose-page
.why-choose-page-navigation
.director-page-link small {
    display: block;

    margin-bottom: 2px;

    color:
        rgba(7, 63, 86, 0.58);

    font-size: 8px;

    line-height: 1.2;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.company-why-choose-page
.why-choose-page-navigation
.director-page-link strong {
    display: block;

    color: var(--company-navy);

    font-size: 11px;

    line-height: 1.35;
}


.company-why-choose-page
.why-choose-page-navigation
.director-page-arrow {
    color: var(--company-navy);

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   13. ANIMASI
   Menggunakan sistem yang sama seperti page sebelumnya.
   ========================================================= */

.company-why-choose-page .reveal-on-scroll {
    opacity: 0;

    transform: translateY(22px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.company-why-choose-page
.reveal-on-scroll.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   14. LAPTOP
   ========================================================= */

@media (max-width: 1180px) {

    .company-why-choose-page .why-choose-container,
    .company-why-choose-page
    .why-choose-navigation-container {
        width: min(
            calc(100% - 42px),
            1120px
        );
    }


    .company-why-choose-page .why-choose-layout {
        grid-template-columns:
            minmax(380px, 0.88fr)
            minmax(430px, 1fr);

        gap: 42px;
    }


    .company-why-choose-page .impact-main-visual {
        height: 620px;
    }


    .company-why-choose-page
    .impact-main-visual
    > .impact-circle-outer {
        left: -225px;

        width: 620px;
        height: 620px;
    }


    .company-why-choose-page .impact-panel {
        max-width: 490px;
    }


    .company-why-choose-page .impact-item {
        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap: 18px;

        min-height: 104px;
    }


    .company-why-choose-page
    .impact-item-image {
        width: 70px;
        height: 70px;
    }
}


/* =========================================================
   15. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .company-why-choose-page .why-choose-container,
    .company-why-choose-page
    .why-choose-navigation-container {
        width: min(
            calc(100% - 32px),
            780px
        );
    }


    .company-why-choose-page .why-choose-content {
        min-height: auto;

        padding:
            calc(var(--company-header-height) + 58px)
            0
            80px;
    }


    .company-why-choose-page
    .why-choose-heading h1 {
        font-size: 52px;
    }


    .company-why-choose-page .why-choose-layout {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(350px, 1fr);

        gap: 28px;

        margin-top: 52px;
    }


    .company-why-choose-page .impact-main-visual {
        height: 520px;
    }


    .company-why-choose-page
    .impact-main-visual
    > .impact-circle-outer {
        left: -210px;

        width: 520px;
        height: 520px;
    }


    .company-why-choose-page
    .impact-circle-gap-one {
        padding: 9px;
    }

    .company-why-choose-page
    .impact-circle-blue {
        padding: 8px;
    }

    .company-why-choose-page
    .impact-circle-gap-two {
        padding: 9px;
    }

    .company-why-choose-page
    .impact-circle-navy {
        padding: 17px;
    }


    .company-why-choose-page .impact-title {
        margin-bottom: 15px;

        font-size: 35px;
    }


    .company-why-choose-page .impact-item {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 15px;

        min-height: 88px;

        padding:
            13px
            0;
    }


    .company-why-choose-page
    .impact-item-image {
        width: 58px;
        height: 58px;
    }


    .company-why-choose-page
    .impact-item-copy h3 {
        font-size: 16px;
    }


    .company-why-choose-page
    .impact-item-copy p {
        font-size: 13px;
    }
}


/* =========================================================
   16. MOBILE

   PDF tidak dipaksakan menjadi layout desktop mini.
   Visual lingkaran tetap dipertahankan tetapi diposisikan
   penuh agar nyaman dibaca.
   ========================================================= */

@media (max-width: 680px) {

    .company-why-choose-page .why-choose-container,
    .company-why-choose-page
    .why-choose-navigation-container {
        width: min(
            calc(100% - 26px),
            520px
        );
    }


    .company-why-choose-page .why-choose-content {
        padding:
            calc(var(--company-header-height) + 39px)
            0
            58px;
    }


    .company-why-choose-page
    .why-choose-heading h1 {
        font-size:
            clamp(37px, 10vw, 47px);

        line-height: 1.08;
    }


    .company-why-choose-page .why-choose-layout {
        display: block;

        width: 100%;

        margin-top: 38px;
    }


    /* Visual */

    .company-why-choose-page .impact-main-visual {
        width: 100%;
        height: auto;

        margin-bottom: 40px;
    }


    .company-why-choose-page
    .impact-main-visual
    > .impact-circle-outer {
        position: relative;

        top: auto;
        left: 50%;

        width: min(92vw, 430px);
        height: min(92vw, 430px);

        transform: translateX(-50%);
    }


    .company-why-choose-page
    .impact-circle-gap-one {
        padding: 7px;
    }

    .company-why-choose-page
    .impact-circle-blue {
        padding: 7px;
    }

    .company-why-choose-page
    .impact-circle-gap-two {
        padding: 7px;
    }

    .company-why-choose-page
    .impact-circle-navy {
        padding: 15px;
    }


    /* Impact */

    .company-why-choose-page .impact-panel {
        width: 100%;
        max-width: none;
    }


    .company-why-choose-page .impact-title {
        margin-bottom: 12px;

        font-size: 34px;
    }


    .company-why-choose-page .impact-item {
        grid-template-columns:
            64px
            minmax(0, 1fr);

        gap: 16px;

        min-height: 94px;

        padding:
            14px
            0;
    }


    .company-why-choose-page
    .impact-item-image {
        width: 64px;
        height: 64px;
    }


    .company-why-choose-page
    .impact-item-copy h3 {
        font-size: 16px;
    }


    .company-why-choose-page
    .impact-item-copy p {
        font-size: 13px;
    }


    /* Navigasi */

    .company-why-choose-page
    .why-choose-navigation-band {
        padding:
            20px
            0
            28px;
    }


    .company-why-choose-page
    .why-choose-page-navigation {
        flex-direction: row;

        align-items: stretch;

        flex-wrap: nowrap;

        gap: 12px;
    }


    .company-why-choose-page
    .why-choose-page-navigation
    .director-page-link {
        width: auto;

        min-width: 118px;

        max-width:
            calc(50% - 6px);

        min-height: 56px;

        margin: 0;

        padding:
            9px
            11px;

        flex: 0 1 auto;

        gap: 8px;
    }


    .company-why-choose-page
    .why-choose-page-navigation
    .director-page-link:first-child {
        margin-right: auto;

        justify-content: flex-start;

        text-align: left;
    }


    .company-why-choose-page
    .why-choose-page-navigation
    .director-page-link:last-child {
        margin-left: auto;

        justify-content: flex-end;

        text-align: right;
    }


    .company-why-choose-page
    .why-choose-page-navigation
    .director-page-link small {
        font-size: 7px;
    }


    .company-why-choose-page
    .why-choose-page-navigation
    .director-page-link strong {
        font-size: 10px;

        white-space: normal;

        overflow-wrap: anywhere;
    }


    .company-why-choose-page
    .why-choose-page-navigation
    .director-page-arrow {
        font-size: 17px;
    }
}


/* =========================================================
   17. MOBILE KECIL
   ========================================================= */

@media (max-width: 430px) {

    .company-why-choose-page
    .why-choose-heading h1 {
        font-size: 35px;
    }


    .company-why-choose-page
    .impact-main-visual
    > .impact-circle-outer {
        width: min(90vw, 370px);
        height: min(90vw, 370px);
    }


    .company-why-choose-page .impact-title {
        font-size: 31px;
    }


    .company-why-choose-page .impact-item {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 13px;
    }


    .company-why-choose-page
    .impact-item-image {
        width: 58px;
        height: 58px;
    }


    .company-why-choose-page
    .impact-item-copy h3 {
        font-size: 14px;
    }


    .company-why-choose-page
    .impact-item-copy p {
        font-size: 12px;
    }


    .company-why-choose-page
    .why-choose-page-navigation {
        gap: 10px;
    }


    .company-why-choose-page
    .why-choose-page-navigation
    .director-page-link {
        min-width: 105px;

        max-width:
            calc(50% - 5px);

        padding:
            8px
            9px;
    }
}


/* =========================================================
   18. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .company-why-choose-page
    .reveal-on-scroll,
    .company-why-choose-page
    .reveal-on-scroll.is-visible {
        opacity: 1;

        transform: none;

        transition: none;
    }
}