:root {
    --yr-green: #15803d;
    --yr-green-2: #16a34a;
    --yr-dark: #063826;
    --yr-soft: #ecfdf5;
    --yr-soft-2: #f7fbf8;
    --yr-gold: #f5b301;
    --yr-text: #102a1f;
    --yr-muted: #64748b;
    --yr-border: #e2e8f0;
    --yr-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
    --yr-radius: 28px;
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
    background: #ffffff;
    color: var(--yr-text);
}

body.yr-page .section,
body.yr-page section {
    scroll-margin-top: 92px;
}

/* ================= HEADER ================= */
body.yr-page .header {
    min-height: 86px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
}

body.yr-page .header .header-container {
    min-height: 86px;
}

body.yr-page .logo img {
    width: auto;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(21, 128, 61, 0.16));
}

body.yr-page .navmenu a {
    font-weight: 700;
    color: #1f2937;
}

body.yr-page .navmenu a:hover,
body.yr-page .navmenu .active {
    color: var(--yr-green);
}

/* ================= LOGIN BUTTON NAVBAR ================= */
body.yr-page .navmenu .yr-login-item {
    margin-left: 18px;
    display: flex;
    align-items: center;
}

body.yr-page .navmenu .yr-login-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 48px;
    min-width: 102px;
    padding: 0 22px !important;

    border-radius: 999px;
    border: 1px solid rgba(21, 128, 61, 0.28);
    background: rgba(255, 255, 255, 0.86);

    color: var(--yr-green) !important;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;

    box-shadow: 0 12px 28px rgba(21, 128, 61, 0.08);
    transition:
        transform 0.28s ease,
        background 0.28s ease,
        color 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

/* Matikan efek bawaan navmenu kalau ada */
body.yr-page .navmenu .yr-login-btn::before,
body.yr-page .navmenu .yr-login-btn::after {
    display: none !important;
    content: none !important;
}

body.yr-page .navmenu .yr-login-btn i {
    font-size: 15px;
    line-height: 1;
}

body.yr-page .navmenu .yr-login-btn:hover {
    background: linear-gradient(135deg, var(--yr-green), var(--yr-dark));
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(21, 128, 61, 0.22);
}

body.yr-page .navmenu .yr-login-btn:hover i,
body.yr-page .navmenu .yr-login-btn:hover span {
    color: #ffffff !important;
}

/* Saat header mengecil ketika scroll */
body.yr-page .header.yr-scrolled .yr-login-btn {
    height: 42px;
    min-width: 94px;
    padding: 0 18px !important;
    font-size: 14px;
}

/* Mobile */
@media (max-width: 1199.98px) {
    body.yr-page .navmenu .yr-login-item {
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
    }

    body.yr-page .navmenu .yr-login-btn {
        width: 100%;
        height: 46px;
    }
}

/* ================= LOGO BAR ================= */
.yr-logo-bar {
    position: relative;
    z-index: 4;
    margin-top: -58px;
}

.yr-logo-inner {
    width: min(760px, calc(100% - 30px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 18px 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
}

.yr-logo-inner img {
    height: 58px;
    width: auto;
    object-fit: contain;
}

/* ================= SECTION GLOBAL ================= */
.yr-section {
    position: relative;
    padding: 92px 0;
}

.yr-section-soft {
    background:
        radial-gradient(
            circle at top left,
            rgba(21, 128, 61, 0.08),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(245, 179, 1, 0.1),
            transparent 30%
        ),
        linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
}

.yr-section-title {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}

.yr-section-title span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(21, 128, 61, 0.1);
    color: var(--yr-green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.yr-section-title h2 {
    font-family: "Raleway", sans-serif;
    color: var(--yr-text);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.yr-section-title h2::after {
    content: "";
    display: block;
    width: 86px;
    height: 5px;
    border-radius: 999px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, var(--yr-green), var(--yr-gold));
}

.yr-section-title p {
    color: var(--yr-muted);
    font-size: 16px;
    line-height: 1.75;
    margin: 18px 0 0;
}

/* ================= LEMBAGA CARDS ================= */
.yr-lembaga {
    padding: 86px 0 92px;
    background: #ffffff;
}

.yr-lembaga-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.yr-lembaga-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border-radius: var(--yr-radius);
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: var(--yr-shadow);
    text-decoration: none !important;
    transition: 0.32s ease;
}

.yr-lembaga-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
}

.yr-lembaga-image {
    position: relative;
    height: 245px;
    overflow: hidden;
    background: #e2e8f0;
}

.yr-lembaga-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.5s ease;
}

.yr-lembaga-card:hover .yr-lembaga-image img {
    transform: scale(1.06);
}

.yr-lembaga-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(6, 56, 38, 0.82));
}

.yr-lembaga-logo {
    position: absolute;
    left: 20px;
    bottom: -30px;
    z-index: 2;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.yr-lembaga-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.yr-lembaga-body {
    flex: 1;
    padding: 48px 22px 24px;
}

.yr-lembaga-body h3 {
    color: var(--yr-text);
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 9px;
}

.yr-lembaga-body p {
    color: var(--yr-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 20px;
}

.yr-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--yr-green);
    font-weight: 900;
}

/* ================= ABOUT ================= */
.yr-about-card {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: 34px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: var(--yr-shadow);
}

.yr-about-text {
    height: 100%;
    padding: 8px 12px 8px 0;
}

.yr-about-text p {
    color: #334155;
    line-height: 1.95;
    font-size: 16px;
    text-align: justify;
}

.yr-check-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.yr-check-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--yr-text);
    font-weight: 700;
}

.yr-check-list i {
    color: var(--yr-green);
    font-size: 20px;
}

.yr-about-image {
    position: relative;
    height: 430px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
}

.yr-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yr-floating-note {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
    font-weight: 800;
    color: var(--yr-text);
}

/* ================= VISI MISI ================= */
.yr-vm-wrap {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
    align-items: stretch;
}

.yr-vision-card,
.yr-mission-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 34px;
    min-height: 100%;
    box-shadow: var(--yr-shadow);
}

.yr-vision-card {
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.18),
            transparent 36%
        ),
        linear-gradient(135deg, var(--yr-dark), var(--yr-green));
    color: #ffffff;
}

.yr-mission-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
}

.yr-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 20px;
}

.yr-mission-card .yr-card-icon {
    background: var(--yr-soft);
    color: var(--yr-green);
}

.yr-vision-card h3,
.yr-mission-card h3 {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 18px;
}

.yr-vision-card p {
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.yr-mission-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yr-mission-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #334155;
    line-height: 1.7;
}

.yr-mission-list span {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--yr-green), var(--yr-dark));
    color: #ffffff;
    font-weight: 900;
    font-size: 13px;
}

/* ================= VALUE CARDS ================= */
.yr-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.yr-value-card {
    height: 100%;
    padding: 28px 22px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    transition: 0.3s ease;
}

.yr-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);
}

.yr-value-card i {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--yr-soft);
    color: var(--yr-green);
    font-size: 27px;
    margin-bottom: 18px;
}

.yr-value-card h4 {
    color: var(--yr-text);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 900;
    margin-bottom: 12px;
}

.yr-value-card p {
    color: var(--yr-muted);
    line-height: 1.75;
    font-size: 14px;
    margin: 0;
}

/* ================= PROGRAM & DOKUMENTASI ================= */
.yr-program-card,
.yr-doc-card,
.yr-doc-list,
.yr-metric-card,
.yr-highlight-card {
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.yr-program-image,
.yr-doc-image {
    height: 290px;
    overflow: hidden;
    background: #e2e8f0;
}

.yr-program-image img,
.yr-doc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yr-program-body,
.yr-doc-body {
    padding: 24px;
}

.yr-program-body h3,
.yr-doc-body h4 {
    font-size: 23px;
    font-weight: 900;
    color: var(--yr-text);
    margin-bottom: 12px;
}

.yr-program-body p,
.yr-doc-body p {
    color: var(--yr-muted);
    line-height: 1.75;
}

.yr-program-small {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    margin-bottom: 16px;
}

.yr-program-small img {
    width: 100px;
    height: 84px;
    object-fit: cover;
    border-radius: 16px;
}

.yr-program-small h4 {
    font-size: 17px;
    font-weight: 900;
    color: var(--yr-text);
    margin: 0 0 5px;
}

.yr-program-small p {
    color: var(--yr-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.yr-arrow {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--yr-soft);
    color: var(--yr-green);
    text-decoration: none !important;
    font-size: 18px;
}

.yr-life-card {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--yr-shadow);
}

.yr-life-card img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
}

.yr-life-content {
    padding: 32px;
    border-radius: 32px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.yr-life-content h3 {
    font-size: 32px;
    font-weight: 900;
    color: var(--yr-text);
    margin-bottom: 14px;
}

.yr-life-content p {
    color: var(--yr-muted);
    line-height: 1.85;
}

.yr-info-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.yr-info-item {
    padding: 18px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.yr-info-item i {
    color: var(--yr-green);
    font-size: 26px;
    margin-bottom: 10px;
}

.yr-info-item strong {
    display: block;
    color: var(--yr-text);
    margin-bottom: 5px;
}

.yr-doc-card {
    height: 100%;
}

.yr-doc-mini {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    margin-bottom: 14px;
}

.yr-doc-mini img {
    width: 92px;
    height: 82px;
    object-fit: cover;
    border-radius: 16px;
}

.yr-doc-mini h6 {
    font-weight: 900;
    color: var(--yr-text);
    margin-bottom: 5px;
}

.yr-doc-mini p {
    font-size: 13px;
    color: var(--yr-muted);
    line-height: 1.55;
    margin: 0;
}

/* ================= STATS ================= */
.yr-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.yr-metric-card {
    padding: 24px 18px;
    text-align: center;
}

.yr-metric-card i {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--yr-soft);
    color: var(--yr-green);
    font-size: 26px;
    margin-bottom: 14px;
}

.yr-metric-card strong {
    display: block;
    color: var(--yr-text);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}

.yr-metric-card h4 {
    color: var(--yr-text);
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 6px;
}

.yr-metric-card p {
    color: var(--yr-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.yr-highlight-card {
    padding: 34px;
    margin-top: 36px;
}

.yr-highlight-card h3 {
    color: var(--yr-text);
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 14px;
}

.yr-highlight-card p {
    color: var(--yr-muted);
    line-height: 1.8;
}

.yr-highlight-image {
    height: 330px;
    border-radius: 24px;
    overflow: hidden;
}

.yr-highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================= PENGURUS ================= */
#guru-staff {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(21, 128, 61, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 16%,
            rgba(245, 179, 1, 0.14),
            transparent 28%
        ),
        linear-gradient(180deg, #f8fcfa 0%, #ffffff 48%, #f4fbf7 100%);
}

#guru-staff::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(21, 128, 61, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 128, 61, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%
    );
    pointer-events: none;
}

#guru-staff .container {
    position: relative;
    z-index: 2;
}

.yr-pengurus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
    counter-reset: pengurusNumber;
}

.yr-pengurus-card {
    counter-increment: pengurusNumber;
    position: relative;
    isolation: isolate;
    min-height: 455px;
    padding: 18px 18px 24px;
    text-align: center;
    border-radius: 34px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96),
        rgba(255, 255, 255, 0.9)
    );
    border: 1px solid rgba(21, 128, 61, 0.13);
    box-shadow:
        0 26px 70px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    transition:
        transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.38s ease;
}

.yr-pengurus-card::before {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    top: -78px;
    height: 235px;
    z-index: -1;
    border-radius: 0 0 48% 48%;
    transform: rotate(-2deg);
    background:
        radial-gradient(
            circle at 28% 30%,
            rgba(255, 214, 64, 0.34),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 20%,
            rgba(255, 255, 255, 0.22),
            transparent 28%
        ),
        linear-gradient(135deg, #063826 0%, #15803d 58%, #16a34a 100%);
}

.yr-pengurus-card::after {
    content: "0" counter(pengurusNumber);
    position: absolute;
    top: 24px;
    right: 26px;
    z-index: 1;
    font-family: "Raleway", sans-serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: -0.04em;
}

.yr-pengurus-card:hover {
    transform: translateY(-12px);
    border-color: rgba(21, 128, 61, 0.28);
    box-shadow:
        0 34px 90px rgba(15, 23, 42, 0.16),
        0 18px 42px rgba(21, 128, 61, 0.13);
}

.yr-pengurus-photo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 310px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0 0 22px;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.42) 24%,
            transparent 50%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(236, 253, 245, 0.96) 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.65),
        0 18px 34px rgba(15, 23, 42, 0.08);
}

.yr-pengurus-photo::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.38) 46%,
        transparent 70%
    );
    box-shadow:
        0 0 0 18px rgba(255, 255, 255, 0.12),
        0 0 0 36px rgba(245, 179, 1, 0.08);
    pointer-events: none;
}

.yr-pengurus-photo::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -18px;
    height: 72px;
    border-radius: 999px;
    background: radial-gradient(
        ellipse at center,
        rgba(6, 56, 38, 0.24),
        transparent 70%
    );
    filter: blur(18px);
    pointer-events: none;
}

.yr-pengurus-photo img {
    position: relative;
    z-index: 3;
    width: 112%;
    height: 112%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    transform: translateY(8px) scale(1.04);
    filter: drop-shadow(0 22px 28px rgba(15, 23, 42, 0.18)) saturate(1.03)
        contrast(1.02);
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.45s ease;
}

.yr-pengurus-card:hover .yr-pengurus-photo img {
    transform: translateY(0) scale(1.09);
    filter: drop-shadow(0 28px 34px rgba(15, 23, 42, 0.24)) saturate(1.08)
        contrast(1.04);
}

.yr-pengurus-card h3 {
    position: relative;
    z-index: 2;
    max-width: 92%;
    margin: 0 auto 12px;
    color: #0f2f23;
    font-family: "Raleway", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.yr-pengurus-card h3::after {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--yr-green), var(--yr-gold));
}

.yr-pengurus-card p {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(21, 128, 61, 0.12),
        rgba(245, 179, 1, 0.12)
    );
    border: 1px solid rgba(21, 128, 61, 0.15);
    color: #15803d;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    box-shadow: 0 10px 24px rgba(21, 128, 61, 0.08);
}

.yr-pengurus-card p::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--yr-green), var(--yr-gold));
    box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.1);
}

.yr-pengurus-card:nth-child(2n)::before {
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 214, 64, 0.32),
            transparent 32%
        ),
        radial-gradient(
            circle at 72% 18%,
            rgba(255, 255, 255, 0.2),
            transparent 28%
        ),
        linear-gradient(135deg, #05291d 0%, #0f6b3b 54%, #15803d 100%);
}

.yr-pengurus-card:nth-child(3n)::before {
    background:
        radial-gradient(
            circle at 25% 28%,
            rgba(245, 179, 1, 0.32),
            transparent 32%
        ),
        radial-gradient(
            circle at 74% 20%,
            rgba(255, 255, 255, 0.24),
            transparent 28%
        ),
        linear-gradient(135deg, #064e3b 0%, #15803d 58%, #22c55e 100%);
}

/* ================= FOOTER ================= */
.yr-footer {
    color: rgba(255, 255, 255, 0.78);
    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(245, 179, 1, 0.14),
            transparent 26%
        ),
        linear-gradient(135deg, #05291d, #0f3d2e);
    padding: 70px 0 24px;
}

.yr-footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 900;
    font-size: 22px;
    text-decoration: none;
}

.yr-footer-logo img {
    height: 62px;
    width: auto;
    object-fit: contain;
}

.yr-footer p {
    line-height: 1.8;
}

.yr-footer h4 {
    color: #ffffff;
    font-weight: 900;
    margin-bottom: 18px;
}

.yr-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yr-footer li {
    margin-bottom: 10px;
}

.yr-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: 0.25s ease;
}

.yr-footer a:hover {
    color: #ffffff;
}

.yr-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.yr-social a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.yr-copyright {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
    font-size: 14px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1199.98px) {
    .yr-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    body.yr-page .header,
    body.yr-page .header .header-container {
        min-height: 76px;
    }

    .yr-hero {
        min-height: 660px;
        background-position: center;
    }

    .yr-hero-content {
        padding: 90px 0 120px;
    }

    .yr-logo-bar {
        margin-top: -44px;
    }

    .yr-logo-inner {
        gap: 18px;
        padding: 14px 20px;
    }

    .yr-logo-inner img {
        height: 48px;
    }

    .yr-lembaga-grid,
    .yr-values-grid,
    .yr-pengurus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yr-vm-wrap {
        grid-template-columns: 1fr;
    }

    .yr-about-image,
    .yr-life-card img {
        height: 340px;
    }
}

@media (max-width: 767.98px) {
    body.yr-page .logo img {
        height: 44px !important;
    }

    body.yr-page .navmenu .d-flex {
        margin-left: 0 !important;
        margin-top: 12px;
    }

    .yr-hero {
        min-height: 560px;
        background:
            linear-gradient(
                180deg,
                rgba(3, 49, 35, 0.88) 0%,
                rgba(3, 49, 35, 0.48) 58%,
                rgba(3, 49, 35, 0.22) 100%
            ),
            url("../assets/img/education/yayasan-mobile.jpeg") center top/cover
                no-repeat;
    }

    .yr-hero-content {
        padding: 70px 0 95px;
        text-align: center;
    }

    .yr-hero-text {
        font-size: 15px;
        line-height: 1.75;
    }

    .yr-hero-actions {
        justify-content: center;
    }

    .yr-btn-primary,
    .yr-btn-secondary {
        width: 100%;
    }

    .yr-hero-stats {
        grid-template-columns: 1fr;
    }

    .yr-logo-bar {
        display: none;
    }

    .yr-section,
    .yr-lembaga {
        padding: 56px 0;
    }

    .yr-lembaga-grid,
    .yr-values-grid,
    .yr-pengurus-grid,
    .yr-stats-grid,
    .yr-info-row {
        grid-template-columns: 1fr;
    }

    .yr-lembaga-image {
        height: 215px;
    }

    .yr-about-card,
    .yr-vision-card,
    .yr-mission-card,
    .yr-highlight-card {
        padding: 22px;
        border-radius: 24px;
    }

    .yr-about-text p {
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
    }

    .yr-about-image,
    .yr-life-card img,
    .yr-highlight-image {
        height: 260px;
    }

    .yr-program-small {
        grid-template-columns: 82px 1fr;
    }

    .yr-program-small .yr-arrow {
        grid-column: 1 / -1;
        width: 100%;
        border-radius: 14px;
    }
}

@media (max-width: 991.98px) {
    .yr-pengurus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .yr-pengurus-card {
        min-height: 430px;
    }

    .yr-pengurus-photo {
        height: 285px;
    }
}

@media (max-width: 767.98px) {
    .yr-pengurus-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .yr-pengurus-card {
        max-width: 430px;
        min-height: auto;
        margin: 0 auto;
        border-radius: 28px;
        padding: 16px 16px 22px;
    }

    .yr-pengurus-photo {
        height: 275px;
        border-radius: 24px;
    }

    .yr-pengurus-card h3 {
        font-size: 18px;
    }
}

/* ================= HERO PREMIUM SCHOOL LANDING ================= */
.yr-hero {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 92px 0 86px;
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(245, 179, 1, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 38%,
            rgba(34, 197, 94, 0.18),
            transparent 30%
        ),
        linear-gradient(115deg, #05291d 0%, #063826 44%, #2f5f4e 100%);
}

.yr-hero-bg-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    pointer-events: none;
}

.yr-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            90deg,
            rgba(3, 49, 35, 0.72) 0%,
            rgba(3, 49, 35, 0.34) 52%,
            rgba(255, 255, 255, 0.08) 100%
        ),
        radial-gradient(
            circle at 65% 70%,
            rgba(255, 212, 59, 0.16),
            transparent 26%
        );
    pointer-events: none;
}

.yr-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 6;
    height: 95px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 88%);
    pointer-events: none;
}

.yr-hero .container {
    position: relative;
    z-index: 8;
}

.yr-hero-content {
    max-width: 670px;
    color: #ffffff;
    position: relative;
}

.yr-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    margin-bottom: 22px;
}

.yr-hero h1 {
    font-family: "Raleway", sans-serif;
    font-size: clamp(46px, 5.5vw, 78px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #ffffff;
    margin: 0 0 22px;
    text-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.yr-hero h1 span {
    color: #ffd43b;
}

.yr-hero-text {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 22px;
}

.yr-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.yr-hero-features div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.17);
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.yr-hero-features i {
    color: #ffd43b;
    font-size: 16px;
}

.yr-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.yr-btn-primary,
.yr-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none !important;
    transition: 0.28s ease;
}

.yr-btn-primary {
    background: linear-gradient(135deg, #ffd43b, #f5b301);
    color: #123524 !important;
    box-shadow: 0 20px 42px rgba(245, 179, 1, 0.34);
}

.yr-btn-secondary {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(12px);
}

.yr-btn-primary:hover,
.yr-btn-secondary:hover {
    transform: translateY(-4px);
}

.yr-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 680px;
}

.yr-hero-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.yr-hero-stat i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #123524;
    background: linear-gradient(135deg, #ffd43b, #f5b301);
    font-size: 20px;
}

.yr-hero-stat strong {
    display: block;
    font-size: 25px;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 6px;
    font-weight: 900;
}

.yr-hero-stat span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

/* ================= HERO VISUAL PREMIUM ================= */
.yr-hero-visual {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yr-visual-card {
    position: relative;
    width: min(620px, 100%);
    height: 610px;
    border-radius: 46px;
    overflow: visible;
}

.yr-visual-card::before {
    content: "";
    position: absolute;
    inset: 34px 18px 38px;
    border-radius: 46px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.05)
        ),
        radial-gradient(
            circle at 52% 48%,
            rgba(255, 212, 59, 0.26),
            transparent 52%
        );
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 34px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

.yr-visual-circle {
    position: absolute;
    left: 50%;
    bottom: 80px;
    width: 510px;
    height: 510px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 214, 64, 0.3) 0%,
        rgba(255, 214, 64, 0.14) 44%,
        transparent 72%
    );
    z-index: 1;
}

.yr-visual-blob {
    position: absolute;
    left: 50%;
    bottom: 95px;
    width: 440px;
    height: 330px;
    transform: translateX(-50%);
    border-radius: 42% 58% 46% 54% / 52% 44% 56% 48%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    z-index: 2;
}

.yr-visual-ring {
    position: absolute;
    left: 50%;
    bottom: 98px;
    width: 480px;
    height: 480px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    z-index: 3;
}

.yr-student {
    position: absolute;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.26)) saturate(1.05)
        contrast(1.03);
    transition: 0.35s ease;
}

.yr-student-left {
    width: 280px;
    left: 7%;
    bottom: 78px;
    z-index: 5;
}

.yr-student-center {
    width: 360px;
    left: 50%;
    bottom: 63px;
    transform: translateX(-50%);
    z-index: 7;
}

.yr-student-right {
    width: 285px;
    right: 5%;
    bottom: 78px;
    z-index: 6;
}

.yr-student-left:hover {
    transform: translateY(-8px) rotate(-1deg);
}

.yr-student-center:hover {
    transform: translateX(-50%) translateY(-8px);
}

.yr-student-right:hover {
    transform: translateY(-8px) rotate(1deg);
}

.yr-ground-glow {
    position: absolute;
    left: 50%;
    bottom: 62px;
    z-index: 4;
    width: 520px;
    height: 95px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 219, 105, 0.38) 0%,
        rgba(255, 255, 255, 0.14) 46%,
        transparent 76%
    );
    filter: blur(15px);
    pointer-events: none;
}

.yr-soft-mist {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 8;
    width: 520px;
    height: 70px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.28) 42%,
        transparent 72%
    );
    filter: blur(10px);
}

.yr-floating-label {
    position: absolute;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f3d2e;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.74);
}

.yr-floating-label i {
    color: #15803d;
    font-size: 18px;
}

.yr-label-quran {
    left: 72px;
    top: 112px;
}

.yr-label-modern {
    right: 44px;
    top: 178px;
}

.yr-visual-note {
    position: absolute;
    left: 50%;
    bottom: 8px;
    z-index: 13;
    transform: translateX(-50%);
    width: min(390px, 82%);
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
}

.yr-visual-note i {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--yr-green), var(--yr-dark));
    font-size: 20px;
}

.yr-visual-note strong {
    display: block;
    color: var(--yr-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

.yr-visual-note span {
    display: block;
    color: var(--yr-muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

/* Logo bar agar lebih elegan */
.yr-logo-bar {
    position: relative;
    z-index: 20;
    margin-top: -32px;
}

.yr-logo-inner {
    width: min(760px, calc(100% - 30px));
    padding: 16px 30px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
}

/* ================= HERO RESPONSIVE PREMIUM ================= */
@media (max-width: 1199.98px) {
    .yr-hero {
        min-height: 730px;
        padding: 80px 0 78px;
    }

    .yr-visual-card {
        height: 560px;
    }

    .yr-student-left {
        width: 245px;
        left: 5%;
    }

    .yr-student-center {
        width: 315px;
    }

    .yr-student-right {
        width: 250px;
        right: 3%;
    }

    .yr-visual-circle {
        width: 455px;
        height: 455px;
    }

    .yr-visual-ring {
        width: 430px;
        height: 430px;
    }
}

@media (max-width: 991.98px) {
    .yr-hero {
        min-height: auto;
        padding: 76px 0 58px;
        text-align: center;
    }

    .yr-hero-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .yr-hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .yr-hero-features,
    .yr-hero-actions {
        justify-content: center;
    }

    .yr-hero-stats {
        margin: 0 auto;
    }

    .yr-hero-visual {
        min-height: 500px;
        margin-top: 26px;
    }

    .yr-visual-card {
        height: 500px;
    }

    .yr-student-left {
        width: 205px;
        left: 13%;
        bottom: 72px;
    }

    .yr-student-center {
        width: 265px;
        bottom: 58px;
    }

    .yr-student-right {
        width: 210px;
        right: 12%;
        bottom: 72px;
    }

    .yr-label-quran {
        left: 14%;
        top: 62px;
    }

    .yr-label-modern {
        right: 14%;
        top: 118px;
    }

    .yr-visual-note {
        bottom: 2px;
    }

    .yr-logo-bar {
        margin-top: -22px;
    }
}

@media (max-width: 767.98px) {
    .yr-hero {
        padding: 62px 0 44px;
    }

    .yr-hero h1 {
        font-size: 39px;
    }

    .yr-hero-text {
        font-size: 15px;
        line-height: 1.75;
    }

    .yr-hero-features {
        display: none;
    }

    .yr-btn-primary,
    .yr-btn-secondary {
        width: 100%;
        max-width: 290px;
    }

    .yr-hero-stats {
        grid-template-columns: 1fr;
        max-width: 300px;
    }

    .yr-hero-stat {
        text-align: left;
    }

    .yr-hero-visual {
        min-height: 370px;
        margin-top: 18px;
    }

    .yr-visual-card {
        height: 370px;
    }

    .yr-visual-card::before {
        inset: 28px 8px 34px;
        border-radius: 34px;
    }

    .yr-visual-circle {
        bottom: 54px;
        width: 305px;
        height: 305px;
    }

    .yr-visual-blob {
        bottom: 62px;
        width: 275px;
        height: 205px;
    }

    .yr-visual-ring {
        bottom: 58px;
        width: 288px;
        height: 288px;
    }

    .yr-student-left {
        width: 122px;
        left: 3%;
        bottom: 58px;
    }

    .yr-student-center {
        width: 178px;
        bottom: 48px;
    }

    .yr-student-right {
        width: 125px;
        right: 2%;
        bottom: 58px;
    }

    .yr-ground-glow {
        bottom: 44px;
        width: 280px;
        height: 62px;
    }

    .yr-soft-mist {
        bottom: 20px;
        width: 295px;
        height: 50px;
    }

    .yr-floating-label,
    .yr-visual-note {
        display: none;
    }

    .yr-logo-bar {
        display: none;
    }
}

/* ==================================================
   PROFESSIONAL SCROLL ANIMATION
================================================== */

/* Progress bar di atas halaman */
#yr-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    z-index: 10050;
    background: linear-gradient(90deg, var(--yr-green), var(--yr-gold));
    box-shadow: 0 0 16px rgba(245, 179, 1, 0.55);
    transition: width 0.08s linear;
}

/* Header berubah saat halaman discroll */
body.yr-page .header {
    transition:
        min-height 0.32s ease,
        background 0.32s ease,
        box-shadow 0.32s ease,
        border-color 0.32s ease,
        transform 0.32s ease;
}

body.yr-page .header .header-container {
    transition: min-height 0.32s ease;
}

body.yr-page .logo img {
    transition:
        height 0.32s ease,
        transform 0.32s ease,
        filter 0.32s ease;
}

body.yr-page .navmenu a {
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

body.yr-page .header.yr-scrolled {
    min-height: 68px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(21, 128, 61, 0.16) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
}

body.yr-page .header.yr-scrolled .header-container {
    min-height: 68px !important;
}

body.yr-page .header.yr-scrolled .logo img {
    height: 46px !important;
    transform: translateY(-1px) scale(0.96);
    filter: drop-shadow(0 8px 18px rgba(21, 128, 61, 0.2));
}

body.yr-page .header.yr-scrolled .navmenu a {
    transform: translateY(-1px);
}

/* Reveal animation umum */
.yr-reveal {
    opacity: 0;
    transform: translate3d(0, 46px, 0) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--yr-delay, 0ms);
    will-change: opacity, transform, filter;
}

.yr-reveal.yr-show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Variasi arah animasi */
.yr-reveal[data-yr-anim="fade-up"] {
    transform: translate3d(0, 52px, 0) scale(0.985);
}

.yr-reveal[data-yr-anim="fade-down"] {
    transform: translate3d(0, -42px, 0) scale(0.985);
}

.yr-reveal[data-yr-anim="fade-left"] {
    transform: translate3d(54px, 0, 0) scale(0.985);
}

.yr-reveal[data-yr-anim="fade-right"] {
    transform: translate3d(-54px, 0, 0) scale(0.985);
}

.yr-reveal[data-yr-anim="zoom"] {
    transform: translate3d(0, 22px, 0) scale(0.92);
}

.yr-reveal[data-yr-anim="flip-soft"] {
    transform: perspective(900px) rotateX(8deg) translateY(42px) scale(0.97);
    transform-origin: top center;
}

/* Ketika tampil */
.yr-reveal.yr-show[data-yr-anim],
.yr-reveal.yr-show[data-yr-anim="fade-up"],
.yr-reveal.yr-show[data-yr-anim="fade-down"],
.yr-reveal.yr-show[data-yr-anim="fade-left"],
.yr-reveal.yr-show[data-yr-anim="fade-right"],
.yr-reveal.yr-show[data-yr-anim="zoom"],
.yr-reveal.yr-show[data-yr-anim="flip-soft"] {
    transform: translate3d(0, 0, 0) scale(1);
}

/* Card terasa lebih hidup saat masuk viewport */
.yr-lembaga-card,
.yr-value-card,
.yr-program-card,
.yr-program-small,
.yr-doc-card,
.yr-doc-mini,
.yr-metric-card,
.yr-highlight-card,
.yr-pengurus-card,
.yr-about-card,
.yr-vision-card,
.yr-mission-card,
.yr-life-content {
    backface-visibility: hidden;
}

/* Efek glow halus saat card sudah muncul */
.yr-reveal.yr-show.yr-lembaga-card,
.yr-reveal.yr-show.yr-value-card,
.yr-reveal.yr-show.yr-metric-card {
    animation: yrSoftGlow 1.25s ease both;
}

@keyframes yrSoftGlow {
    0% {
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }
    45% {
        box-shadow: 0 26px 70px rgba(21, 128, 61, 0.14);
    }
    100% {
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    }
}

/* Hero parallax halus */
.yr-hero-content,
.yr-hero-visual,
.yr-logo-bar {
    will-change: transform;
}

/* Tombol scroll top lebih profesional */
#scroll-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.9);
    transition: 0.3s ease;
}

#scroll-top.yr-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Mobile dibuat lebih ringan */
@media (max-width: 767.98px) {
    .yr-reveal {
        transform: translate3d(0, 32px, 0) scale(0.99);
        filter: blur(4px);
        transition-duration: 0.65s;
    }

    .yr-reveal[data-yr-anim="fade-left"],
    .yr-reveal[data-yr-anim="fade-right"] {
        transform: translate3d(0, 34px, 0) scale(0.99);
    }
}

/* Menghormati user yang mematikan motion */
@media (prefers-reduced-motion: reduce) {
    html,
    body {
        scroll-behavior: auto;
    }

    .yr-reveal,
    .yr-reveal.yr-show,
    body.yr-page .header,
    body.yr-page .logo img,
    #scroll-top,
    #yr-scroll-progress {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}