/* =========================================================
   PAGE 07 - PRINSIP LAYANAN & BRAND PERSONALITY
   PT. MUSTIKA BERKAH SENTOSA
   ========================================================= */


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

.company-principles-page .principles-page {
    position: relative;

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

    overflow-x: clip;

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

.company-principles-page .principles-container,
.company-principles-page .principles-media-container,
.company-principles-page .principles-navigation-container {
    position: relative;

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

    margin-inline: auto;
}


/* =========================================================
   2. MENU AKTIF
   ========================================================= */

.company-principles-page
.company-navigation
.navigation-link:nth-child(2) {
    color: var(--company-white);
}

.company-principles-page
.company-navigation
.navigation-link:nth-child(2)::after {
    width: 100%;
}


/* =========================================================
   3. ORNAMEN TITIK BULAT ATAS
   ========================================================= */

.company-principles-page .principles-dot-circle {
    position: absolute;
    z-index: 2;

    display: block;

    width: 74px;
    height: 74px;

    pointer-events: none;

    border-radius: 50%;

    background-image:
        radial-gradient(
            circle,
            rgba(7, 63, 86, 0.84) 1.5px,
            transparent 1.6px
        );

    background-size: 8px 8px;
}

.company-principles-page .principles-dot-circle-one {
    top:
        calc(var(--company-header-height) + 50px);

    left: max(
        10%,
        calc((100% - var(--company-container)) / 2 + 22px)
    );
}

.company-principles-page .principles-dot-circle-two {
    top:
        calc(var(--company-header-height) + 50px);

    left: max(
        17%,
        calc((100% - var(--company-container)) / 2 + 112px)
    );
}


/* =========================================================
   4. SECTION UTAMA
   ========================================================= */

.company-principles-page .principles-profile-section {
    position: relative;
    z-index: 3;

    overflow: hidden;

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

.company-principles-page .principles-service-section {
    padding-top:
        calc(var(--company-header-height) + 125px);

    padding-bottom: 75px;
}

.company-principles-page .principles-brand-section {
    padding: 55px 0 70px;
}


/* =========================================================
   5. LAYOUT EMBLEM DAN CONTENT
   Emblem diperkecil dan digeser ke kanan.
   ========================================================= */

.company-principles-page .principles-profile-layout {
    display: grid;

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

    align-items: center;

    column-gap: 68px;
}


/* =========================================================
   6. EMBLEM BESAR KIRI
   ========================================================= */

.company-principles-page .principles-emblem-stage {
    position: relative;

    width: 100%;
    height: 470px;

    margin: 0;
}

.company-principles-page .principles-emblem-frame {
    position: absolute;

    top: 50%;
    right: 0;

    width: 480px;
    height: 480px;

    padding: 22px;

    overflow: hidden;

    background: var(--company-white);

    border:
        16px solid #102b5a;

    border-radius: 50%;

    box-shadow:
        13px 0 0 #1595e0,
        26px 0 0 var(--company-white);

    transform:
        translate(-165px, -50%);
}

.company-principles-page
.principles-emblem-frame img {
    display: block;

    width: 100%;
    height: 100%;

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

    border-radius: 50%;
}


/* =========================================================
   7. CONTENT KANAN
   ========================================================= */

.company-principles-page .principles-profile-content {
    position: relative;
    z-index: 4;

    min-width: 0;
}

.company-principles-page .principles-profile-title {
    margin: 0 0 45px;

    color: var(--company-navy);

    font-family: "Montserrat", sans-serif;
    font-size: clamp(55px, 4.8vw, 74px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.05em;
}

.company-principles-page
.principles-profile-title strong {
    font-weight: 800;
}


/* =========================================================
   8. GRID NILAI
   ========================================================= */

.company-principles-page .principles-value-grid {
    display: grid;

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

    column-gap: 62px;
    row-gap: 0;
}

.company-principles-page .principles-value-item {
    min-height: 118px;

    padding: 20px 0;

    display: grid;

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

    align-items: start;

    gap: 17px;

    border-bottom:
        1px solid rgba(7, 63, 86, 0.27);
}


/* =========================================================
   9. IKON NILAI
   ========================================================= */

.company-principles-page .principles-value-icon {
    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #123267;
}

.company-principles-page
.principles-value-icon svg {
    width: 100%;
    height: 100%;

    overflow: visible;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.company-principles-page
.principles-value-icon
.icon-accent-fill {
    color: #1595e0;

    fill: #1595e0;
    stroke: #1595e0;
}

.company-principles-page
.principles-value-icon
.icon-accent-soft {
    fill: rgba(21, 149, 224, 0.1);
    stroke: #1595e0;
}

.company-principles-page
.principles-value-icon
.icon-cursor {
    fill: var(--company-white);
    stroke: #123267;
}

.company-principles-page
.principles-value-copy h2,
.company-principles-page
.principles-value-copy h3 {
    margin: 0;

    color: #102b5a;

    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.company-principles-page
.principles-value-copy p {
    margin: 3px 0 0;

    color: #102b5a;

    font-size: 17px;
    line-height: 1.42;
}


/* =========================================================
   10. ORNAMEN TITIK BRAND
   ========================================================= */

.company-principles-page .principles-brand-dot-pattern {
    position: absolute;

    top: 70px;
    right: max(
        4%,
        calc((100% - var(--company-container)) / 2 - 48px)
    );
    z-index: 1;

    width: 82px;
    height: 82px;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(10, 114, 152, 0.68) 1.4px,
            transparent 1.5px
        );

    background-size: 8px 8px;

    opacity: 0.28;
}


/* =========================================================
   11. GAMBAR BAWAH
   ========================================================= */

.company-principles-page .principles-media-band {
    position: relative;
    z-index: 3;

    min-height: 330px;

    background:
        linear-gradient(
            to bottom,
            var(--company-white) 0,
            var(--company-white) 74px,
            var(--company-navy) 74px,
            var(--company-navy) 100%
        );
}

.company-principles-page .principles-media-container {
    display: grid;

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

    align-items: stretch;

    gap: 34px;

    padding-bottom: 74px;
}

.company-principles-page .principles-media-card {
    position: relative;
    z-index: 4;

    width: 100%;

    margin: 0;

    overflow: hidden;

    background: var(--company-soft);

    border:
        6px solid var(--company-white);

    border-radius: 27px;

    box-shadow:
        0 18px 38px rgba(4, 43, 60, 0.18);
}

.company-principles-page
.principles-media-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.company-principles-page .principles-media-wide {
    aspect-ratio: 3.2 / 1;
}

.company-principles-page
.principles-media-wide img {
    object-position: center 58%;
}

.company-principles-page .principles-media-small {
    aspect-ratio: 1.12 / 1;
}

.company-principles-page
.principles-media-small img {
    object-position: center;
}


/* =========================================================
   12. TITIK PADA BIDANG BIRU
   ========================================================= */

.company-principles-page .principles-media-dots {
    position: absolute;

    left: max(
        4%,
        calc((100% - var(--company-container)) / 2 - 58px)
    );

    bottom: 60px;
    z-index: 2;

    width: 76px;
    height: 76px;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.82) 1.35px,
            transparent 1.45px
        );

    background-size: 8px 8px;

    opacity: 0.22;
}


/* =========================================================
   13. NAVIGASI NAVY
   ========================================================= */

.company-principles-page .principles-navigation-band {
    position: relative;
    z-index: 4;

    padding: 28px 0 38px;

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

    border-top:
        1px solid rgba(255, 255, 255, 0.1);
}

.company-principles-page .principles-page-navigation {
    width: 100%;

    margin: 0;
    padding: 0;

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

    gap: 24px;
}

.company-principles-page
.principles-page-navigation
.director-page-link {
    width: auto;
    min-width: 190px;
    max-width: 280px;
    min-height: 62px;

    margin: 0;
    padding: 10px 14px;

    display: inline-flex;
    align-items: center;

    gap: 12px;

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

    border:
        1px solid rgba(255, 255, 255, 0.28);

    border-radius: 12px;

    box-shadow: none;

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

.company-principles-page
.principles-page-navigation
.director-page-link:hover,
.company-principles-page
.principles-page-navigation
.director-page-link:focus-visible {
    color: var(--company-white);

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

    border-color:
        rgba(255, 255, 255, 0.48);
}

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

    justify-content: flex-end;

    text-align: right;
}

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

    margin-bottom: 2px;

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

    font-size: 8px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

    color: var(--company-white);

    font-size: 11px;
    line-height: 1.35;
}

.company-principles-page
.principles-page-navigation
.director-page-arrow {
    color: var(--company-white);

    font-size: 19px;
    line-height: 1;
}


/* =========================================================
   14. ANIMASI
   ========================================================= */

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

    transform: translateY(22px);

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

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

    transform: translateY(0);
}


/* =========================================================
   15. LAPTOP
   ========================================================= */

@media (max-width: 1180px) {

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

    .company-principles-page
    .principles-profile-layout {
        grid-template-columns:
            400px
            minmax(0, 1fr);

        column-gap: 52px;
    }

    .company-principles-page
    .principles-emblem-stage {
        height: 420px;
    }

    .company-principles-page
    .principles-emblem-frame {
        width: 430px;
        height: 430px;

        padding: 20px;

        transform:
            translate(-150px, -50%);
    }

    .company-principles-page
    .principles-value-grid {
        column-gap: 38px;
    }

    .company-principles-page
    .principles-value-copy h2,
    .company-principles-page
    .principles-value-copy h3 {
        font-size: 17px;
    }

    .company-principles-page
    .principles-value-copy p {
        font-size: 15px;
    }

    .company-principles-page
    .principles-media-container {
        grid-template-columns:
            minmax(0, 1fr)
            220px;

        gap: 30px;
    }
}


/* =========================================================
   16. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .company-principles-page .principles-container,
    .company-principles-page .principles-media-container,
    .company-principles-page .principles-navigation-container {
        width: min(
            calc(100% - 32px),
            760px
        );
    }

    .company-principles-page
    .principles-service-section {
        padding-top:
            calc(var(--company-header-height) + 105px);
    }

    .company-principles-page
    .principles-profile-layout {
        grid-template-columns:
            300px
            minmax(0, 1fr);

        column-gap: 36px;
    }

    .company-principles-page
    .principles-emblem-stage {
        height: 350px;
    }

    .company-principles-page
    .principles-emblem-frame {
        width: 345px;
        height: 345px;

        padding: 16px;

        border-width: 12px;

        box-shadow:
            10px 0 0 #1595e0,
            20px 0 0 var(--company-white);

        transform:
            translate(-110px, -50%);
    }

    .company-principles-page
    .principles-profile-title {
        margin-bottom: 28px;

        font-size: 48px;
    }

    .company-principles-page
    .principles-value-grid {
        column-gap: 24px;
    }

    .company-principles-page
    .principles-value-item {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 12px;
    }

    .company-principles-page
    .principles-value-icon {
        width: 39px;
        height: 39px;
    }

    .company-principles-page
    .principles-value-copy h2,
    .company-principles-page
    .principles-value-copy h3 {
        font-size: 15px;
    }

    .company-principles-page
    .principles-value-copy p {
        font-size: 13px;
    }

    .company-principles-page
    .principles-media-container {
        grid-template-columns:
            minmax(0, 1fr)
            190px;

        gap: 22px;
    }
}


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

@media (max-width: 680px) {

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


    /* =====================================================
       ORNAMEN TITIK MOBILE
       ===================================================== */

    .company-principles-page
    .principles-dot-circle {
        display: block;

        width: 52px;
        height: 52px;

        background-size: 6px 6px;

        opacity: 0.3;
    }

    .company-principles-page
    .principles-dot-circle-one {
        top:
            calc(var(--company-header-height) + 20px);

        right: 20px;
        left: auto;
    }

    .company-principles-page
    .principles-dot-circle-two {
        top:
            calc(var(--company-header-height) + 78px);

        right: 60px;
        left: auto;
    }

    .company-principles-page
    .principles-brand-dot-pattern {
        display: block;

        top: 18px;
        right: 16px;

        width: 52px;
        height: 52px;

        background-size: 6px 6px;

        opacity: 0.22;
    }


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

    .company-principles-page
    .principles-service-section {
        padding-top:
            calc(var(--company-header-height) + 55px);

        padding-bottom: 55px;
    }

    .company-principles-page
    .principles-brand-section {
        padding:
            42px
            0
            56px;
    }


    /* =====================================================
       EMBLEM KIRI DAN CONTENT KANAN
       ===================================================== */

    .company-principles-page
    .principles-profile-layout {
        display: grid;

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

        align-items: start;

        column-gap: 34px;
    }

    .company-principles-page
    .principles-emblem-stage {
        height: auto;
        min-height: 460px;
    }

    .company-principles-page
    .principles-emblem-frame {
        top: 70px;
        right: auto;
        left: 0;

        width: 210px;
        height: 210px;

        padding: 11px;

        border-width: 9px;

        box-shadow:
            7px 0 0 #1595e0,
            14px 0 0 var(--company-white);

        transform:
            translateX(-108px);
    }

    .company-principles-page
    .principles-profile-title {
        margin:
            0
            0
            24px;

        font-size:
            clamp(36px, 10vw, 46px);

        line-height: 1.03;
    }

    .company-principles-page
    .principles-value-grid {
        grid-template-columns: 1fr;
    }

    .company-principles-page
    .principles-value-item {
        min-height: 0;

        padding:
            15px
            0;

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

        gap: 11px;
    }

    .company-principles-page
    .principles-value-icon {
        width: 37px;
        height: 37px;
    }

    .company-principles-page
    .principles-value-icon svg {
        stroke-width: 2.9;
    }

    .company-principles-page
    .principles-value-copy h2,
    .company-principles-page
    .principles-value-copy h3 {
        font-size: 14px;

        overflow-wrap: anywhere;
    }

    .company-principles-page
    .principles-value-copy p {
        font-size: 12px;
        line-height: 1.45;
    }


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

    .company-principles-page
    .principles-media-band {
        min-height: auto;

        padding-bottom: 42px;

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

    .company-principles-page
    .principles-media-container {
        grid-template-columns: 1fr;

        gap: 18px;

        padding-bottom: 0;

        transform:
            translateY(-28px);
    }

    .company-principles-page
    .principles-media-wide,
    .company-principles-page
    .principles-media-small {
        width: 100%;

        aspect-ratio: 2.05 / 1;
    }

    .company-principles-page
    .principles-media-card {
        border-width: 5px;

        border-radius: 19px;
    }

    .company-principles-page
    .principles-media-dots {
        display: block;

        left: 15px;
        bottom: 22px;

        width: 52px;
        height: 52px;

        background-size: 6px 6px;

        opacity: 0.24;
    }


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

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

    .company-principles-page
    .principles-page-navigation {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: nowrap;

        gap: 12px;
    }

    .company-principles-page
    .principles-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;

        font-size: 10px;
    }

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

        justify-content: flex-start;

        text-align: left;
    }

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

        justify-content: flex-end;

        text-align: right;
    }

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

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

        white-space: normal;
        overflow-wrap: anywhere;
    }

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


/* =========================================================
   18. MOBILE KECIL
   ========================================================= */

@media (max-width: 430px) {

    .company-principles-page
    .principles-profile-layout {
        grid-template-columns:
            98px
            minmax(0, 1fr);

        column-gap: 28px;
    }

    .company-principles-page
    .principles-emblem-frame {
        width: 190px;
        height: 190px;

        transform:
            translateX(-98px);
    }

    .company-principles-page
    .principles-profile-title {
        font-size: 36px;
    }

    .company-principles-page
    .principles-value-item {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 9px;
    }

    .company-principles-page
    .principles-value-icon {
        width: 33px;
        height: 33px;
    }

    .company-principles-page
    .principles-value-copy h2,
    .company-principles-page
    .principles-value-copy h3 {
        font-size: 12.5px;
    }

    .company-principles-page
    .principles-value-copy p {
        font-size: 11px;
    }

    .company-principles-page
    .principles-page-navigation
    .director-page-link {
        min-width: 105px;
        max-width:
            calc(50% - 5px);

        padding:
            8px
            9px;
    }

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


/* =========================================================
   19. REDUCED MOTION
   ========================================================= */

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

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

        transform: none;

        transition: none;
    }
}