/**
 * Halaman Nilai Karisma Kasih SINERGI.
 *
 * Digunakan untuk:
 * - Beriman
 * - Peduli
 * - Kolaborasi
 * - Visioner
 * - Simplisitas
 *
 * @package Sinergi
 */


/* ==========================================================
   1. VARIABEL DESAIN
   ========================================================== */

:root {
    --sinergi-value-green: #12691d;
    --sinergi-value-green-dark: #0a5514;
    --sinergi-value-green-light: #eaf3e7;
    --sinergi-value-green-soft: rgba(18, 105, 29, 0.08);

    --sinergi-value-text: #161b22;
    --sinergi-value-muted: #475467;
    --sinergi-value-border: rgba(18, 105, 29, 0.10);

    --sinergi-value-white: #ffffff;
    --sinergi-value-background: #f8faf7;

    --sinergi-value-card-radius: 26px;
    --sinergi-value-shadow:
        0 22px 60px rgba(16, 24, 40, 0.08);

    --sinergi-value-shadow-hover:
        0 30px 75px rgba(18, 105, 29, 0.13);

    --sinergi-value-transition:
        0.35s cubic-bezier(.2, .8, .2, 1);
}


/* ==========================================================
   2. RESET KHUSUS HALAMAN NILAI
   ========================================================== */

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body.sinergi-value-page {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    color: var(--sinergi-value-text);
    background:
        radial-gradient(
            circle at 12% 16%,
            rgba(18, 105, 29, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 22%,
            rgba(18, 105, 29, 0.04),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcfa 52%,
            #f4f8f2 100%
        );

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    overflow-x: hidden;
}

body.sinergi-value-page *,
body.sinergi-value-page *::before,
body.sinergi-value-page *::after {
    box-sizing: border-box;
}

body.sinergi-value-page img {
    max-width: 100%;
    height: auto;
}

body.sinergi-value-page a {
    color: inherit;
}


/* ==========================================================
   3. PEMBUNGKUS UTAMA
   ========================================================== */

.sinergi-value-layout {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100vh;

    display: grid;
    grid-template-rows: auto 1fr auto;

    padding:
        26px
        clamp(24px, 4vw, 70px)
        18px;

    overflow: hidden;
}


/* Lingkaran dekoratif besar di kiri atas */

.sinergi-value-layout::before {
    content: "";
    position: absolute;

    top: -310px;
    left: -220px;

    width: 760px;
    height: 760px;

    z-index: -2;
    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 70% 72%,
            rgba(18, 105, 29, 0.05),
            rgba(18, 105, 29, 0.015) 58%,
            transparent 70%
        );

    border:
        1px solid rgba(18, 105, 29, 0.035);
}


/* Bidang dekoratif bagian bawah kiri */

.sinergi-value-layout::after {
    content: "";
    position: absolute;

    left: -110px;
    bottom: 74px;

    width: 640px;
    height: 300px;

    z-index: -2;
    pointer-events: none;

    border-radius: 50% 70% 0 0;

    background:
        linear-gradient(
            145deg,
            rgba(18, 105, 29, 0.08),
            rgba(18, 105, 29, 0.015)
        );

    transform: rotate(7deg);
}


/* ==========================================================
   4. POLA TITIK DEKORATIF
   ========================================================== */

.sinergi-value-brand-panel::before {
    content: "";
    position: absolute;

    top: -3px;
    left: 0;

    width: 116px;
    height: 90px;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(18, 105, 29, 0.78) 2.7px,
            transparent 3.2px
        );

    background-size: 22px 22px;
    opacity: 0.75;
}


/* ==========================================================
   5. TOMBOL KEMBALI
   ========================================================== */

.sinergi-value-topbar {
    position: relative;
    z-index: 30;

    width: 100%;

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

    min-height: 46px;
    margin-bottom: 12px;
}

.sinergi-value-back-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 42px;
    padding: 9px 15px;

    color: var(--sinergi-value-green);
    background: transparent;

    border:
        1px solid transparent;
    border-radius: 12px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;

    transition:
        transform var(--sinergi-value-transition),
        color var(--sinergi-value-transition),
        background-color var(--sinergi-value-transition),
        border-color var(--sinergi-value-transition),
        box-shadow var(--sinergi-value-transition);
}

.sinergi-value-back-link > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    line-height: 1;

    transition:
        transform var(--sinergi-value-transition);
}

.sinergi-value-back-link:hover,
.sinergi-value-back-link:focus-visible {
    color: var(--sinergi-value-green-dark);
    background: rgba(255, 255, 255, 0.90);

    border-color:
        rgba(18, 105, 29, 0.12);

    box-shadow:
        0 12px 28px rgba(16, 24, 40, 0.08);

    transform: translateY(-2px);
    outline: none;
}

.sinergi-value-back-link:hover > span:first-child,
.sinergi-value-back-link:focus-visible > span:first-child {
    transform: translateX(-4px);
}


/* ==========================================================
   6. AREA UTAMA DUA KOLOM
   ========================================================== */

.sinergi-value-main {
    position: relative;
    z-index: 5;

    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(330px, 38%)
        minmax(0, 62%);

    align-items: stretch;
    gap: clamp(34px, 5vw, 82px);

    padding:
        0
        clamp(6px, 1.2vw, 18px)
        22px;
}


/* ==========================================================
   7. PANEL IDENTITAS SINERGI
   ========================================================== */

.sinergi-value-brand-panel {
    position: relative;

    min-width: 0;
    min-height: 700px;

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

    padding:
        80px
        clamp(24px, 4vw, 52px)
        64px;

    text-align: center;
}


/* Logo Yayasan */

.sinergi-value-ypk-logo {
    position: relative;
    z-index: 4;

    display: block;

    width: clamp(116px, 10vw, 170px);
    max-height: 180px;

    margin:
        0
        auto
        14px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 14px rgba(16, 24, 40, 0.10)
        );

    animation:
        sinergiValueLogoEnter
        0.75s ease both;
}


/* Logo/simbol SINERGI */

.sinergi-value-brand-mark {
    position: relative;
    z-index: 4;

    display: block;

    width: clamp(105px, 9vw, 145px);
    max-height: 155px;

    margin:
        -3px
        auto
        -2px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 12px rgba(18, 105, 29, 0.13)
        );

    animation:
        sinergiValueMarkFloat
        4.2s ease-in-out infinite;
}


/* Judul SINERGI */

.sinergi-value-brand-title {
    position: relative;
    z-index: 4;

    margin:
        0
        0
        3px;

    color: var(--sinergi-value-green);

    font-size:
        clamp(54px, 5.3vw, 86px);

    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -3px;
}


/* Subtitle */

.sinergi-value-brand-subtitle {
    position: relative;
    z-index: 4;

    margin:
        8px
        0
        0;

    color: var(--sinergi-value-green);

    font-size:
        clamp(18px, 1.5vw, 25px);

    font-weight: 650;
    line-height: 1.25;
}


/* Garis pendek */

.sinergi-value-brand-divider {
    position: relative;
    z-index: 4;

    display: block;

    width: 46px;
    height: 3px;

    margin:
        28px
        auto
        22px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(18, 105, 29, 0.42),
            var(--sinergi-value-green),
            rgba(18, 105, 29, 0.42)
        );
}


/* Deskripsi SINERGI */

.sinergi-value-brand-description {
    position: relative;
    z-index: 4;

    width: min(100%, 420px);

    margin:
        0
        auto;

    color: #1f2937;

    font-size:
        clamp(15px, 1.2vw, 18px);

    font-weight: 520;
    line-height: 1.65;
}


/* Dekorasi seperti bidang meja/buku */

.sinergi-value-brand-panel::after {
    content: "";
    position: absolute;

    left: -80px;
    bottom: 4px;

    width: min(115%, 540px);
    height: 120px;

    z-index: -1;
    pointer-events: none;

    border-radius:
        55% 60% 16px 18px;

    background:
        linear-gradient(
            175deg,
            rgba(18, 105, 29, 0.21) 0%,
            rgba(18, 105, 29, 0.10) 36%,
            rgba(255, 255, 255, 0.80) 37%,
            rgba(255, 255, 255, 0.95) 62%,
            rgba(18, 105, 29, 0.10) 63%,
            rgba(18, 105, 29, 0.14) 100%
        );

    box-shadow:
        0 18px 36px rgba(16, 24, 40, 0.08);

    transform: rotate(-1.8deg);
}


/* ==========================================================
   8. KARTU KONTEN NILAI
   ========================================================== */

.sinergi-value-content-card {
    position: relative;

    min-width: 0;
    min-height: 700px;

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

    padding:
        clamp(38px, 4.7vw, 72px)
        clamp(34px, 5vw, 76px)
        clamp(42px, 4vw, 65px);

    overflow: hidden;

    border:
        1px solid rgba(16, 24, 40, 0.05);

    border-radius:
        var(--sinergi-value-card-radius);

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

    box-shadow:
        var(--sinergi-value-shadow);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    animation:
        sinergiValueCardEnter
        0.7s ease both;

    transition:
        transform var(--sinergi-value-transition),
        box-shadow var(--sinergi-value-transition),
        border-color var(--sinergi-value-transition);
}

.sinergi-value-content-card:hover {
    border-color:
        rgba(18, 105, 29, 0.11);

    box-shadow:
        var(--sinergi-value-shadow-hover);

    transform:
        translateY(-3px);
}


/* Cahaya lembut dalam card */

.sinergi-value-content-card::before {
    content: "";
    position: absolute;

    top: -190px;
    right: -190px;

    width: 380px;
    height: 380px;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(18, 105, 29, 0.06),
            transparent 68%
        );
}


/* ==========================================================
   9. IKON DAN JUDUL NILAI
   ========================================================== */

.sinergi-value-heading {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin:
        0
        0
        clamp(35px, 4vw, 54px);

    text-align: center;
}

.sinergi-value-icon-wrapper {
    position: relative;

    width:
        clamp(104px, 8vw, 132px);

    height:
        clamp(104px, 8vw, 132px);

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

    overflow: hidden;

    margin-bottom: 15px;

    border:
        1px solid rgba(18, 105, 29, 0.07);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f6faf3,
            #e6efe2
        );

    box-shadow:
        0 14px 32px rgba(18, 105, 29, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.75);

    animation:
        sinergiValueIconFloat
        4.4s ease-in-out infinite;

    transition:
        transform var(--sinergi-value-transition),
        box-shadow var(--sinergi-value-transition);
}


/* Efek kilau ikon */

.sinergi-value-icon-wrapper::before {
    content: "";
    position: absolute;

    top: -35%;
    left: -85%;

    width: 40%;
    height: 175%;

    pointer-events: none;

    opacity: 0;

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

    transform: rotate(24deg);

    transition:
        left 0.7s ease,
        opacity 0.25s ease;
}

.sinergi-value-content-card:hover
.sinergi-value-icon-wrapper {
    transform:
        translateY(-4px)
        scale(1.05);

    box-shadow:
        0 20px 42px rgba(18, 105, 29, 0.16),
        0 0 0 8px rgba(18, 105, 29, 0.04);
}

.sinergi-value-content-card:hover
.sinergi-value-icon-wrapper::before {
    left: 140%;
    opacity: 1;
}


/* Gambar ikon */

.sinergi-value-icon {
    position: relative;
    z-index: 2;

    display: block;

    width:
        clamp(74px, 6vw, 96px);

    height:
        clamp(74px, 6vw, 96px);

    object-fit: contain;

    transition:
        transform var(--sinergi-value-transition),
        filter var(--sinergi-value-transition);
}

.sinergi-value-content-card:hover
.sinergi-value-icon {
    transform: scale(1.06);
    filter:
        saturate(1.08)
        contrast(1.04);
}


/* Judul nilai */

.sinergi-value-title {
    margin: 0;

    color: var(--sinergi-value-green);

    font-size:
        clamp(25px, 2.3vw, 38px);

    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -0.4px;
}


/* ==========================================================
   10. NARASI NILAI
   ========================================================== */

.sinergi-value-description {
    position: relative;
    z-index: 2;

    margin:
        0
        0
        clamp(30px, 3.4vw, 46px);
}

.sinergi-value-description p {
    margin: 0;

    color: var(--sinergi-value-text);

    font-size:
        clamp(18px, 1.55vw, 25px);

    font-weight: 430;
    line-height: 1.72;

    text-align: justify;
    text-justify: inter-word;

    letter-spacing: 0.01em;
}


/* ==========================================================
   11. INTI NILAI
   ========================================================== */

.sinergi-value-points {
    position: relative;
    z-index: 2;
}

.sinergi-value-points h2 {
    margin:
        0
        0
        15px;

    color: var(--sinergi-value-text);

    font-size:
        clamp(21px, 1.8vw, 29px);

    font-weight: 520;
    line-height: 1.3;
}

.sinergi-value-points ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sinergi-value-points li {
    position: relative;

    margin:
        0
        0
        13px;

    padding-left: 39px;

    color: var(--sinergi-value-text);

    font-size:
        clamp(17px, 1.42vw, 23px);

    font-weight: 430;
    line-height: 1.55;
}

.sinergi-value-points li:last-child {
    margin-bottom: 0;
}

.sinergi-value-points li::before {
    content: "";

    position: absolute;

    top: 0.7em;
    left: 8px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--sinergi-value-green);

    box-shadow:
        0 0 0 5px rgba(18, 105, 29, 0.07);

    transform:
        translateY(-50%);
}


/* ==========================================================
   12. FOOTER
   ========================================================== */

.sinergi-value-footer {
    position: relative;
    z-index: 20;

    width: 100%;

    margin-top: 0;
    padding:
        10px
        clamp(18px, 3vw, 38px)
        8px;

    overflow: hidden;

    border:
        1px solid rgba(16, 24, 40, 0.04);

    border-radius:
        28px 28px 0 0;

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

    box-shadow:
        0 -8px 30px rgba(16, 24, 40, 0.035);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.sinergi-value-footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap:
        8px 28px;

    padding:
        4px
        0
        10px;

    border-bottom:
        1px solid rgba(16, 24, 40, 0.07);
}

.sinergi-value-footer-socials a {
    position: relative;

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

    min-height: 34px;
    padding: 5px 10px;

    color: #273142;

    border-radius: 10px;

    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;

    transition:
        color var(--sinergi-value-transition),
        background-color var(--sinergi-value-transition),
        transform var(--sinergi-value-transition),
        box-shadow var(--sinergi-value-transition);
}

.sinergi-value-footer-socials a:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -15px;

    width: 1px;
    height: 20px;

    background:
        rgba(16, 24, 40, 0.13);

    transform:
        translateY(-50%);
}

.sinergi-value-footer-socials a:hover,
.sinergi-value-footer-socials a:focus-visible {
    color: var(--sinergi-value-green);

    background:
        rgba(18, 105, 29, 0.055);

    box-shadow:
        0 8px 20px rgba(16, 24, 40, 0.06);

    transform:
        translateY(-2px);

    outline: none;
}

.sinergi-value-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding-top: 8px;
}

.sinergi-value-footer-bottom p {
    margin: 0;

    color: #344054;

    font-size: 10px;
    font-weight: 550;
    line-height: 1.4;
}

.sinergi-value-footer-bottom p:last-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;
}


/* ==========================================================
   13. ADMIN BAR WORDPRESS
   ========================================================== */

body.admin-bar.sinergi-value-page {
    min-height:
        calc(100vh - 32px);
}

body.admin-bar.sinergi-value-page
.sinergi-value-layout {
    min-height:
        calc(100vh - 32px);

    padding-top: 42px;
}


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

@keyframes sinergiValueCardEnter {
    from {
        opacity: 0;
        transform:
            translateY(22px)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes sinergiValueLogoEnter {
    from {
        opacity: 0;
        transform:
            translateY(-14px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes sinergiValueIconFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-6px);
    }
}

@keyframes sinergiValueMarkFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }
}


/* ==========================================================
   15. LAPTOP DENGAN TINGGI LAYAR TERBATAS
   ========================================================== */

@media
(max-width: 1500px),
(max-height: 850px) {

    .sinergi-value-layout {
        padding-top: 18px;
    }

    .sinergi-value-main {
        gap: clamp(28px, 4vw, 58px);
    }

    .sinergi-value-brand-panel,
    .sinergi-value-content-card {
        min-height: 610px;
    }

    .sinergi-value-brand-panel {
        padding-top: 60px;
        padding-bottom: 48px;
    }

    .sinergi-value-ypk-logo {
        width: clamp(105px, 9vw, 145px);
        max-height: 150px;
    }

    .sinergi-value-brand-mark {
        width: clamp(94px, 8vw, 125px);
        max-height: 130px;
    }

    .sinergi-value-brand-title {
        font-size:
            clamp(48px, 4.8vw, 72px);
    }

    .sinergi-value-content-card {
        padding:
            clamp(31px, 3.7vw, 52px)
            clamp(31px, 4vw, 56px)
            38px;
    }

    .sinergi-value-heading {
        margin-bottom:
            clamp(27px, 3vw, 40px);
    }

    .sinergi-value-icon-wrapper {
        width:
            clamp(94px, 7vw, 116px);

        height:
            clamp(94px, 7vw, 116px);
    }

    .sinergi-value-icon {
        width:
            clamp(68px, 5.3vw, 84px);

        height:
            clamp(68px, 5.3vw, 84px);
    }

    .sinergi-value-description {
        margin-bottom:
            clamp(25px, 2.8vw, 36px);
    }

    .sinergi-value-description p {
        font-size:
            clamp(17px, 1.4vw, 22px);
    }

    .sinergi-value-points li {
        font-size:
            clamp(16px, 1.3vw, 20px);
    }
}


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

@media (max-width: 1024px) {

    .sinergi-value-layout {
        padding:
            22px
            24px
            16px;
    }

    .sinergi-value-main {
        grid-template-columns:
            minmax(270px, 34%)
            minmax(0, 66%);

        gap: 24px;
    }

    .sinergi-value-brand-panel {
        min-height: 600px;

        padding:
            72px
            18px
            50px;
    }

    .sinergi-value-brand-panel::before {
        width: 92px;
        height: 72px;
        background-size: 18px 18px;
    }

    .sinergi-value-brand-title {
        letter-spacing: -2px;
    }

    .sinergi-value-brand-description {
        font-size: 15px;
    }

    .sinergi-value-content-card {
        min-height: 600px;

        padding:
            38px
            32px
            36px;
    }

    .sinergi-value-description p {
        text-align: left;
        line-height: 1.65;
    }

    .sinergi-value-footer-bottom {
        align-items: flex-start;
    }
}


/* ==========================================================
   17. TABLET POTRET DAN SMARTPHONE
   ========================================================== */

@media (max-width: 820px) {

    body.sinergi-value-page {
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f6faf4 100%
            );
    }

    .sinergi-value-layout {
        display: block;

        min-height: 100vh;

        padding:
            14px
            16px
            14px;
    }

    .sinergi-value-topbar {
        min-height: 40px;
        margin-bottom: 8px;
    }

    .sinergi-value-back-link {
        min-height: 38px;
        padding: 7px 11px;
        font-size: 13px;
    }

    .sinergi-value-main {
        display: flex;
        flex-direction: column;

        gap: 20px;

        padding:
            0
            0
            18px;
    }

    .sinergi-value-brand-panel {
        min-height: auto;

        padding:
            42px
            20px
            36px;

        border:
            1px solid rgba(18, 105, 29, 0.07);

        border-radius: 24px;

        background:
            rgba(255, 255, 255, 0.66);
    }

    .sinergi-value-brand-panel::before {
        top: 12px;
        left: 14px;
    }

    .sinergi-value-brand-panel::after {
        left: -15%;
        bottom: -22px;

        width: 75%;
        height: 80px;

        opacity: 0.7;
    }

    .sinergi-value-ypk-logo {
        width: 100px;
        margin-bottom: 7px;
    }

    .sinergi-value-brand-mark {
        width: 90px;
        margin-bottom: 0;
    }

    .sinergi-value-brand-title {
        font-size: 54px;
        letter-spacing: -2px;
    }

    .sinergi-value-brand-subtitle {
        font-size: 18px;
    }

    .sinergi-value-brand-divider {
        margin:
            20px
            auto
            16px;
    }

    .sinergi-value-brand-description {
        max-width: 430px;
        font-size: 15px;
        line-height: 1.55;
    }

    .sinergi-value-content-card {
        min-height: auto;

        padding:
            35px
            27px
            38px;

        border-radius: 24px;
    }

    .sinergi-value-heading {
        margin-bottom: 28px;
    }

    .sinergi-value-icon-wrapper {
        width: 100px;
        height: 100px;
    }

    .sinergi-value-icon {
        width: 74px;
        height: 74px;
    }

    .sinergi-value-title {
        font-size: 28px;
    }

    .sinergi-value-description p {
        font-size: 17px;
        text-align: left;
        line-height: 1.68;
    }

    .sinergi-value-points h2 {
        font-size: 21px;
    }

    .sinergi-value-points li {
        padding-left: 31px;
        font-size: 16px;
        line-height: 1.55;
    }

    .sinergi-value-points li::before {
        left: 6px;
        width: 8px;
        height: 8px;
    }

    .sinergi-value-footer {
        border-radius: 22px;
    }

    .sinergi-value-footer-socials {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 12px;

        scrollbar-width: thin;
    }

    .sinergi-value-footer-socials a {
        flex: 0 0 auto;
    }

    .sinergi-value-footer-bottom {
        flex-direction: column;
        gap: 7px;
    }

    .sinergi-value-footer-bottom p:last-child {
        white-space: normal;
    }

    body.admin-bar.sinergi-value-page
    .sinergi-value-layout {
        padding-top: 60px;
    }
}


/* ==========================================================
   18. SMARTPHONE KECIL
   ========================================================== */

@media (max-width: 520px) {

    .sinergi-value-layout {
        padding:
            10px
            10px
            12px;
    }

    .sinergi-value-topbar {
        margin-bottom: 6px;
    }

    .sinergi-value-brand-panel {
        padding:
            38px
            15px
            30px;
    }

    .sinergi-value-brand-panel::before {
        width: 72px;
        height: 58px;
        background-size: 15px 15px;
    }

    .sinergi-value-ypk-logo {
        width: 88px;
    }

    .sinergi-value-brand-mark {
        width: 78px;
    }

    .sinergi-value-brand-title {
        font-size: 46px;
    }

    .sinergi-value-brand-subtitle {
        font-size: 16px;
    }

    .sinergi-value-brand-description {
        font-size: 14px;
    }

    .sinergi-value-content-card {
        padding:
            30px
            20px
            32px;

        border-radius: 21px;
    }

    .sinergi-value-heading {
        margin-bottom: 24px;
    }

    .sinergi-value-icon-wrapper {
        width: 90px;
        height: 90px;
    }

    .sinergi-value-icon {
        width: 66px;
        height: 66px;
    }

    .sinergi-value-title {
        font-size: 25px;
    }

    .sinergi-value-description {
        margin-bottom: 26px;
    }

    .sinergi-value-description p {
        font-size: 16px;
        line-height: 1.65;
    }

    .sinergi-value-points h2 {
        margin-bottom: 13px;
        font-size: 20px;
    }

    .sinergi-value-points li {
        margin-bottom: 11px;

        padding-left: 28px;

        font-size: 15px;
    }

    .sinergi-value-footer {
        padding:
            8px
            12px
            7px;
    }

    .sinergi-value-footer-socials {
        gap: 7px 15px;
    }

    .sinergi-value-footer-socials a {
        padding: 5px 7px;
        font-size: 11px;
    }

    .sinergi-value-footer-socials
    a:not(:last-child)::after {
        right: -8px;
        height: 16px;
    }

    .sinergi-value-footer-bottom p {
        font-size: 9px;
    }
}


/* ==========================================================
   19. AKSESIBILITAS: KURANGI ANIMASI
   ========================================================== */

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

    html {
        scroll-behavior: auto;
    }

    .sinergi-value-content-card,
    .sinergi-value-ypk-logo,
    .sinergi-value-brand-mark,
    .sinergi-value-icon-wrapper {
        animation: none !important;
    }

    .sinergi-value-content-card,
    .sinergi-value-back-link,
    .sinergi-value-icon-wrapper,
    .sinergi-value-icon,
    .sinergi-value-footer-socials a {
        transition: none !important;
    }
}


/* ==========================================================
   20. MODE CETAK
   ========================================================== */

@media print {

    body.sinergi-value-page {
        background: #ffffff !important;
    }

    .sinergi-value-layout {
        display: block;

        min-height: auto;

        padding: 0;
    }

    .sinergi-value-topbar,
    .sinergi-value-footer {
        display: none !important;
    }

    .sinergi-value-main {
        display: block;
        padding: 0;
    }

    .sinergi-value-brand-panel {
        min-height: auto;
        padding: 20px;
    }

    .sinergi-value-brand-panel::before,
    .sinergi-value-brand-panel::after,
    .sinergi-value-layout::before,
    .sinergi-value-layout::after {
        display: none;
    }

    .sinergi-value-content-card {
        min-height: auto;

        padding: 25px;

        border: 1px solid #dddddd;
        box-shadow: none;
    }
}
/* ==========================================================
   21. PENYEMPURNAAN PANEL KIRI
   ========================================================== */

/*
 * Logo YPK sudah dihapus dari PHP.
 * Posisi simbol SINERGI disesuaikan agar panel tetap seimbang.
 */
.sinergi-value-brand-mark {
    width: clamp(135px, 11vw, 185px);
    max-height: 190px;
    margin: 0 auto 14px;
}

.sinergi-value-brand-panel {
    justify-content: center;
}


/* ==========================================================
   22. FOOTER MEDIA SOSIAL DENGAN IKON
   ========================================================== */

.sinergi-value-footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;

    width: 100%;

    gap: 8px;

    padding: 4px 0 10px;

    overflow-x: auto;
    overflow-y: hidden;

    border-bottom:
        1px solid rgba(16, 24, 40, 0.07);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(18, 105, 29, 0.25)
        transparent;
}

.sinergi-value-footer-socials::-webkit-scrollbar {
    height: 5px;
}

.sinergi-value-footer-socials::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background:
        rgba(18, 105, 29, 0.25);
}

.sinergi-value-social-link {
    position: relative;

    flex: 0 0 auto;

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

    gap: 8px;

    min-width: max-content;
    min-height: 40px;

    padding: 5px 9px;

    overflow: hidden;

    color: #172033;

    border-radius: 12px;

    text-decoration: none;

    transition:
        color var(--sinergi-value-transition),
        transform var(--sinergi-value-transition),
        background-color var(--sinergi-value-transition),
        box-shadow var(--sinergi-value-transition);
}

.sinergi-value-social-link::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(18, 105, 29, 0.11),
            rgba(255, 255, 255, 0)
        );

    transition:
        opacity var(--sinergi-value-transition);
}

.sinergi-value-social-link:hover,
.sinergi-value-social-link:focus-visible {
    color: var(--sinergi-value-green);

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

    box-shadow:
        0 10px 24px rgba(16, 24, 40, 0.10);

    transform:
        translateY(-4px);

    outline: none;
}

.sinergi-value-social-link:hover::before,
.sinergi-value-social-link:focus-visible::before {
    opacity: 1;
}


/* Pembungkus ikon */

.sinergi-value-social-icon-wrapper {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;

    width: 33px;
    height: 33px;

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

    overflow: hidden;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 7px 16px rgba(16, 24, 40, 0.10),
        inset 0 0 0 1px rgba(18, 105, 29, 0.07);

    animation:
        sinergiValueSocialFloat
        4s ease-in-out infinite;

    transition:
        transform var(--sinergi-value-transition),
        box-shadow var(--sinergi-value-transition);
}


/* Gambar ikon */

.sinergi-value-social-icon {
    position: relative;
    z-index: 2;

    display: block;

    width: 26px;
    height: 26px;

    max-width: none;

    object-fit: contain;

    transition:
        transform var(--sinergi-value-transition),
        filter var(--sinergi-value-transition);
}


/* Label media sosial */

.sinergi-value-social-label {
    position: relative;
    z-index: 2;

    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;

    white-space: nowrap;
}


/* Efek hover ikon */

.sinergi-value-social-link:hover
.sinergi-value-social-icon-wrapper,
.sinergi-value-social-link:focus-visible
.sinergi-value-social-icon-wrapper {
    transform:
        scale(1.12)
        rotate(-4deg);

    box-shadow:
        0 12px 25px rgba(18, 105, 29, 0.17),
        0 0 0 5px rgba(18, 105, 29, 0.05);
}

.sinergi-value-social-link:hover
.sinergi-value-social-icon,
.sinergi-value-social-link:focus-visible
.sinergi-value-social-icon {
    transform: scale(1.08);

    filter:
        saturate(1.10)
        contrast(1.04);
}


/* Garis pemisah */

.sinergi-value-social-divider {
    flex: 0 0 auto;

    display: inline-block;

    width: 1px;
    height: 24px;

    margin: 0 2px;

    background:
        rgba(16, 24, 40, 0.13);
}


/* Animasi ikon */

@keyframes sinergiValueSocialFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}


/* Waktu animasi berbeda */

.sinergi-value-social-link:nth-of-type(1)
.sinergi-value-social-icon-wrapper {
    animation-delay: 0s;
}

.sinergi-value-social-link:nth-of-type(2)
.sinergi-value-social-icon-wrapper {
    animation-delay: 0.25s;
}

.sinergi-value-social-link:nth-of-type(3)
.sinergi-value-social-icon-wrapper {
    animation-delay: 0.5s;
}

.sinergi-value-social-link:nth-of-type(4)
.sinergi-value-social-icon-wrapper {
    animation-delay: 0.75s;
}

.sinergi-value-social-link:nth-of-type(5)
.sinergi-value-social-icon-wrapper {
    animation-delay: 1s;
}


/* Informasi keamanan footer */

.sinergi-value-footer-security {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sinergi-value-security-divider {
    display: inline-block;

    width: 1px;
    height: 16px;

    background:
        rgba(16, 24, 40, 0.17);
}


/* ==========================================================
   23. RESPONSIF MEDIA SOSIAL
   ========================================================== */

@media (max-width: 1100px) {

    .sinergi-value-footer-socials {
        justify-content: flex-start;
    }

    .sinergi-value-social-link {
        padding: 5px 7px;
        gap: 6px;
    }

    .sinergi-value-social-label {
        font-size: 10px;
    }
}

@media (max-width: 820px) {

    .sinergi-value-brand-mark {
        width: 120px;
        max-height: 130px;
        margin-bottom: 9px;
    }

    .sinergi-value-footer-socials {
        flex-wrap: nowrap;
        justify-content: flex-start;

        padding-bottom: 11px;
    }

    .sinergi-value-social-link {
        min-height: 36px;
        padding: 4px 6px;
    }

    .sinergi-value-social-icon-wrapper {
        width: 30px;
        height: 30px;
    }

    .sinergi-value-social-icon {
        width: 23px;
        height: 23px;
    }

    .sinergi-value-social-label {
        font-size: 9.5px;
    }

    .sinergi-value-social-divider {
        height: 21px;
    }
}

@media (max-width: 520px) {

    .sinergi-value-brand-mark {
        width: 104px;
        max-height: 112px;
    }

    .sinergi-value-social-link {
        min-height: 34px;
        gap: 5px;
        padding: 3px 5px;
    }

    .sinergi-value-social-icon-wrapper {
        width: 28px;
        height: 28px;
    }

    .sinergi-value-social-icon {
        width: 21px;
        height: 21px;
    }

    .sinergi-value-social-label {
        font-size: 8.5px;
    }

    .sinergi-value-social-divider {
        height: 19px;
        margin: 0;
    }

    .sinergi-value-footer-security {
        flex-wrap: wrap;
        gap: 7px;
    }
}


/* Menghormati preferensi pengurangan animasi */

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

    .sinergi-value-social-icon-wrapper {
        animation: none !important;
    }

    .sinergi-value-social-link,
    .sinergi-value-social-icon-wrapper,
    .sinergi-value-social-icon {
        transition: none !important;
    }
}