/* ==========================================================
   MUFLIKHUN.ID
   FRONT ALIGNMENT V4

   Explicit visual decisions:
   - no desktop viewport frame
   - transparent navbar on hero
   - dark navbar after scroll
   - cinematic twinkling stars
   - breathing earth
   - shorter manifesto
   - readable process labels
   - safe six-column process
   - smooth dark-to-CTA transition
   - larger premium footer
   ========================================================== */


/* ==========================================================
   1. REMOVE DESKTOP VIEWPORT FRAME
   ========================================================== */

body::before {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   2. HEADER
   Transparent while hero is active.
   Dark/glass only once page is scrolled.
   ========================================================== */

.v5-nav {
    height: 86px;

    background:
        transparent !important;

    border-bottom-color:
        transparent !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    transition:
        background .38s ease,
        border-color .38s ease,
        box-shadow .38s ease,
        backdrop-filter .38s ease;
}

.v5-nav::before {
    display: none !important;
    content: none !important;
}

.v5-nav.is-scrolled {
    background:
        rgba(1,10,18,.90)
        !important;

    border-bottom:
        1px solid
        rgba(137,181,208,.14)
        !important;

    box-shadow:
        0 12px 34px
        rgba(0,0,0,.18)
        !important;

    backdrop-filter:
        blur(18px)
        saturate(1.12)
        !important;
}

.v5-mark {
    font-size: 45px;
}

.v5-brand strong {
    font-size: 13px;
}

.v5-brand small {
    font-size: 8px;
}

.v5-nav nav {
    gap: 37px;
}

.v5-nav nav a {
    font-size: 12px;
}


/* ==========================================================
   3. HERO STAR FIELD
   ========================================================== */

.hero-stars {
    overflow: hidden;
}

.hero-stars .twinkle-star {
    position: absolute;

    z-index: 3;

    width:
        var(--star-size);

    height:
        var(--star-size);

    border-radius: 50%;

    background:
        rgba(255,255,255,.94);

    opacity:
        var(--star-opacity);

    box-shadow:
        0 0
        calc(
            var(--star-size) * 2
        )
        rgba(177,222,255,.90),

        0 0
        calc(
            var(--star-size) * 5
        )
        rgba(95,180,240,.42),

        0 0
        calc(
            var(--star-size) * 9
        )
        rgba(67,145,211,.18);

    animation:
        muflikhun-star-twinkle
        var(--star-duration)
        ease-in-out
        var(--star-delay)
        infinite;
}

.hero-stars .twinkle-star.gold {
    background:
        #ffe4a2;

    box-shadow:
        0 0
        calc(
            var(--star-size) * 2
        )
        rgba(255,218,139,.94),

        0 0
        calc(
            var(--star-size) * 5
        )
        rgba(220,163,65,.42);
}

@keyframes
muflikhun-star-twinkle {

    0%,
    100% {
        opacity:
            calc(
                var(--star-opacity) * .34
            );

        transform:
            scale(.72);
    }

    42% {
        opacity:
            var(--star-opacity);

        transform:
            scale(1.08);
    }

    68% {
        opacity:
            calc(
                var(--star-opacity) * .62
            );

        transform:
            scale(.88);
    }

}


/* ==========================================================
   4. EARTH BREATHING
   ========================================================== */

.earth-stage img {
    transform-origin:
        center center;

    animation:
        muflikhun-earth-breathe
        8.5s
        cubic-bezier(
            .45,
            .05,
            .55,
            .95
        )
        infinite;

    will-change:
        transform,
        filter;
}

@keyframes
muflikhun-earth-breathe {

    0%,
    100% {
        transform:
            scale(1);

        filter:
            blur(.7px)
            saturate(.74)
            brightness(.73)
            contrast(1.03)
            drop-shadow(
                0 0 45px
                rgba(35,133,195,.26)
            );
    }

    50% {
        transform:
            scale(1.022);

        filter:
            blur(.45px)
            saturate(.80)
            brightness(.78)
            contrast(1.04)
            drop-shadow(
                0 0 70px
                rgba(47,155,219,.35)
            );
    }

}


/* ==========================================================
   5. MANIFESTO — SHORTER + SAFE
   ========================================================== */

@media (min-width: 761px) {

    .manifesto-v5 {
        min-height:
            535px !important;

        height:
            535px;

        background-position:
            center 49% !important;
    }

    .manifesto-inner {
        min-height:
            535px !important;

        height:
            535px;
    }

    .manifesto-copy {
        top:
            62px !important;
    }

    .manifesto-copy .section-label {
        margin-bottom:
            12px;

        font-size:
            11px !important;
    }

    .manifesto-copy h2 {
        max-width:
            610px;

        font-size:
            clamp(
                50px,
                3.7vw,
                65px
            )
            !important;

        line-height:
            .97 !important;
    }

    .manifesto-copy > strong {
        margin-top:
            13px;

        font-size:
            18px !important;
    }

    .manifesto-copy .button-dark {
        margin-top:
            18px;
    }

    .manifesto-side {
        top:
            67px !important;

        width:
            300px !important;

        font-size:
            17px !important;
    }

    /*
     * Existing arrow <b> nodes are removed visually.
     * Grid itself carries the process.
     */
    .process-v5 {
        left:
            50% !important;

        right:
            auto !important;

        bottom:
            24px !important;

        transform:
            translateX(-50%)
            !important;

        width:
            min(
                calc(100% - 100px),
                1000px
            )
            !important;

        display:
            grid !important;

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

        gap:
            23px !important;

        align-items:
            start !important;

        overflow:
            visible !important;
    }

    .process-v5::before {
        content: "";

        position: absolute;

        z-index: 0;

        left: 7%;
        right: 7%;
        top: 26px;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(220,179,98,.52)
                10%,
                rgba(220,179,98,.52)
                90%,
                transparent
            );
    }

    .process-v5 > b {
        display:
            none !important;
    }

    .process-v5 > div {
        position:
            relative;

        z-index:
            2;

        width:
            auto !important;

        min-width:
            0 !important;

        flex:
            none !important;
    }

    .process-v5 i {
        width:
            53px !important;

        height:
            53px !important;

        font-size:
            16px !important;
    }

    .process-v5 span {
        max-width:
            130px !important;

        color:
            rgba(241,244,244,.96)
            !important;

        font-size:
            11px !important;

        font-weight:
            500;

        line-height:
            1.32 !important;

        text-shadow:
            0 2px 8px
            rgba(0,0,0,.64);
    }

}


/* ==========================================================
   6. DARK TRANSITION INTO FINAL CTA
   ========================================================== */

.final-v5 {
    position:
        relative;

    overflow:
        hidden;

    background-position:
        center 60% !important;
}

.final-v5::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            #03111d 0%,
            rgba(3,17,29,.90)
            7%,
            rgba(3,14,23,.40)
            28%,
            rgba(2,10,17,.27)
            55%,
            rgba(1,8,14,.78)
            100%
        )
        !important;

    pointer-events:
        none;
}

.final-copy {
    position:
        relative;

    z-index:
        2;
}

@media (min-width: 761px) {

    .final-v5 {
        min-height:
            195px !important;

        padding-top:
            29px !important;

        padding-bottom:
            29px !important;
    }

    .final-copy h2 {
        font-size:
            clamp(
                38px,
                2.85vw,
                47px
            )
            !important;
    }

}


/* ==========================================================
   7. FOOTER — MINIMAL PREMIUM BUT READABLE
   ========================================================== */

.footer-v5 {
    min-height:
        128px !important;

    padding-top:
        20px;

    padding-bottom:
        20px;
}

.footer-brand .v5-mark {
    font-size:
        39px !important;
}

.footer-brand strong {
    font-size:
        12px !important;

    letter-spacing:
        .17em;
}

.footer-brand small {
    font-size:
        8px !important;

    letter-spacing:
        .11em;
}

.footer-v5 nav {
    gap:
        30px !important;
}

.footer-v5 nav a {
    color:
        #a4b4c0;

    font-size:
        10px !important;

    transition:
        color .2s ease;
}

.footer-v5 nav a:hover {
    color:
        var(--gold2);
}

.footer-v5 > span {
    font-size:
        9px !important;
}


/* ==========================================================
   8. REDUCED MOTION
   ========================================================== */

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

    .hero-stars .twinkle-star,
    .earth-stage img {
        animation:
            none !important;
    }

}


/* ==========================================================
   9. DESKTOP WIDTH SAFETY
   ========================================================== */

@media (
    min-width: 761px
) and (
    max-width: 1366px
) {

    .process-v5 {
        width:
            min(
                calc(100% - 70px),
                900px
            )
            !important;

        gap:
            12px !important;
    }

    .process-v5 span {
        font-size:
            10px !important;
    }

    .manifesto-side {
        width:
            250px !important;

        font-size:
            15px !important;
    }

}


/* ==========================================================
   TRANSPARENT ADAPTIVE HEADER V5
   2026-09-08

   Header NEVER receives a filled background.
   Foreground color follows the section underneath.
   ========================================================== */


/* ----------------------------------------------------------
   HEADER ALWAYS TRANSPARENT
   ---------------------------------------------------------- */

.v5-nav,
.v5-nav.is-scrolled {
    background:
        transparent !important;

    border-bottom-color:
        transparent !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;
}

.v5-nav::before,
.v5-nav.is-scrolled::before {
    display:
        none !important;

    content:
        none !important;
}


/* ----------------------------------------------------------
   SMOOTH COLOR TRANSITIONS
   ---------------------------------------------------------- */

.v5-brand,
.v5-brand *,
.v5-nav nav a,
.nav-pill,
.nav-pill *,
.v5-nav button,
.v5-nav button * {
    transition:
        color .30s ease,
        border-color .30s ease,
        text-shadow .30s ease,
        opacity .30s ease;
}


/* ==========================================================
   LIGHT FOREGROUND
   For dark/cinematic sections.
   ========================================================== */

.v5-nav[data-nav-theme="light"]
.v5-mark {
    color:
        #f5efe4 !important;

    text-shadow:
        0 2px 16px
        rgba(0,0,0,.30);
}

.v5-nav[data-nav-theme="light"]
.v5-brand strong {
    color:
        #f7f3ea !important;

    text-shadow:
        0 2px 13px
        rgba(0,0,0,.34);
}

.v5-nav[data-nav-theme="light"]
.v5-brand small {
    color:
        #e1b866 !important;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.40);
}

.v5-nav[data-nav-theme="light"]
nav a {
    color:
        rgba(245,248,250,.88)
        !important;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.45);
}

.v5-nav[data-nav-theme="light"]
nav a:hover {
    color:
        #ffffff !important;
}

.v5-nav[data-nav-theme="light"]
.nav-pill {
    color:
        #ffffff !important;

    border-color:
        rgba(234,197,124,.64)
        !important;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.45);
}


/* ==========================================================
   DARK FOREGROUND
   For warm/light editorial sections.
   ========================================================== */

.v5-nav[data-nav-theme="dark"]
.v5-mark {
    color:
        #06131d !important;

    text-shadow:
        0 1px 10px
        rgba(255,255,255,.30);
}

.v5-nav[data-nav-theme="dark"]
.v5-brand strong {
    color:
        #07141d !important;

    text-shadow:
        0 1px 9px
        rgba(255,255,255,.35);
}

.v5-nav[data-nav-theme="dark"]
.v5-brand small {
    color:
        #8f641f !important;

    text-shadow:
        0 1px 8px
        rgba(255,244,220,.50);
}

.v5-nav[data-nav-theme="dark"]
nav a {
    color:
        rgba(4,18,28,.86)
        !important;

    text-shadow:
        0 1px 9px
        rgba(255,255,255,.46);
}

.v5-nav[data-nav-theme="dark"]
nav a:hover {
    color:
        #000a11 !important;
}

.v5-nav[data-nav-theme="dark"]
.nav-pill {
    color:
        #06131d !important;

    border-color:
        rgba(42,37,28,.50)
        !important;

    text-shadow:
        0 1px 8px
        rgba(255,255,255,.38);
}


/* ==========================================================
   MIXED FOREGROUND
   Specifically for:
   Dari kode ke buku | CODE | BUSINESS | BOOKS | IDEAS

   Left logo sits above ivory.
   Central menu/right CTA sit above dark imagery.
   ========================================================== */

.v5-nav[data-nav-theme="mixed"]
.v5-mark {
    color:
        #07141d !important;

    text-shadow:
        0 1px 8px
        rgba(255,255,255,.38);
}

.v5-nav[data-nav-theme="mixed"]
.v5-brand strong {
    color:
        #07141d !important;

    text-shadow:
        0 1px 8px
        rgba(255,255,255,.40);
}

.v5-nav[data-nav-theme="mixed"]
.v5-brand small {
    color:
        #8d621e !important;
}

.v5-nav[data-nav-theme="mixed"]
nav a {
    color:
        rgba(255,255,255,.93)
        !important;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.58);
}

.v5-nav[data-nav-theme="mixed"]
nav a:hover {
    color:
        #ffffff !important;
}

.v5-nav[data-nav-theme="mixed"]
.nav-pill {
    color:
        #ffffff !important;

    border-color:
        rgba(236,198,123,.68)
        !important;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.56);
}


/* ==========================================================
   ACTIVE LINK DETAIL
   ========================================================== */

.v5-nav nav a {
    position:
        relative;
}

.v5-nav nav a::after {
    content: "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -10px;

    width:
        0;

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        currentColor;

    opacity:
        .62;

    transition:
        width .24s ease;
}

.v5-nav nav a:hover::after {
    width:
        100%;
}


/* ==========================================================
   MOBILE BUTTON SAFETY
   ========================================================== */

.v5-nav[data-nav-theme="light"]
button {
    color:
        #ffffff !important;
}

.v5-nav[data-nav-theme="dark"]
button {
    color:
        #07141d !important;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .v5-brand,
    .v5-brand *,
    .v5-nav nav a,
    .nav-pill,
    .nav-pill * {
        transition:
            none !important;
    }

}


/* ==========================================================
   HOME V5 — SCALE REFINEMENT V6B
   ========================================================== */


/* ==========================================================
   EARTH
   Less dominant + clearly breathing
   ========================================================== */

.earth-stage {
    opacity:
        .60 !important;
}

.earth-stage img {
    /*
     * Filter stays absolutely static.
     * Only scale moves, avoiding shimmer/vibration.
     */
    filter:
        blur(.75px)
        saturate(.74)
        brightness(.72)
        contrast(1.03)
        drop-shadow(
            0 0 48px
            rgba(47,151,211,.27)
        )
        !important;

    animation:
        muflikhun-earth-breathe-v6b
        11s
        cubic-bezier(
            .37,
            0,
            .63,
            1
        )
        infinite
        !important;

    transform-origin:
        center center;

    will-change:
        transform;
}

.earth-aura {
    animation:
        muflikhun-earth-aura-v6b
        11s
        cubic-bezier(
            .37,
            0,
            .63,
            1
        )
        infinite
        !important;
}

@keyframes
muflikhun-earth-breathe-v6b {

    0%,
    100% {
        transform:
            scale(.965);
    }

    50% {
        transform:
            scale(1.045);
    }

}

@keyframes
muflikhun-earth-aura-v6b {

    0%,
    100% {
        opacity:
            .34;

        transform:
            scale(.96);
    }

    50% {
        opacity:
            .66;

        transform:
            scale(1.055);
    }

}


/* ==========================================================
   DARI KODE KE BUKU
   Reduce vertical height and normalize heading hierarchy
   ========================================================== */

@media (min-width: 761px) {

    .worlds-v5 {
        height:
            340px !important;

        min-height:
            340px !important;
    }

    .world-intro {
        height:
            340px !important;

        min-height:
            340px !important;

        padding:
            38px 34px
            !important;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            flex-start;
    }

    /*
     * Intro title is only slightly larger than CODE/BUSINESS/etc.
     */
    .world-intro h2 {
        max-width:
            270px;

        margin:
            0;

        font-size:
            39px !important;

        font-weight:
            600 !important;

        line-height:
            1.02 !important;

        letter-spacing:
            -.025em;
    }

    .world-intro p {
        max-width:
            295px;

        margin-top:
            20px !important;

        font-size:
            13px !important;

        line-height:
            1.58 !important;
    }

    .world-intro .button-dark {
        margin-top:
            21px;
    }

    .world-card {
        height:
            340px !important;

        min-height:
            340px !important;
    }

    .world-card > div {
        padding:
            36px 28px
            !important;
    }

    .world-card strong {
        font-size:
            35px !important;

        font-weight:
            600 !important;

        line-height:
            1 !important;
    }

    .world-card span {
        max-width:
            220px;

        margin-top:
            10px !important;

        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }

}


/* 1366-ish desktop */
@media
(
    min-width: 761px
)
and
(
    max-width: 1366px
) {

    .worlds-v5,
    .world-intro,
    .world-card {
        height:
            310px !important;

        min-height:
            310px !important;
    }

    .world-intro {
        padding:
            32px 27px
            !important;
    }

    .world-intro h2 {
        font-size:
            34px !important;
    }

    .world-card strong {
        font-size:
            32px !important;
    }

}


/* Accessibility */
@media
(
    prefers-reduced-motion:
    reduce
) {

    .earth-stage img,
    .earth-aura {
        animation:
            none !important;
    }

}


/* ==========================================================
   HEADER MENU TYPOGRAPHY V7
   Desktop hierarchy refinement
   ========================================================== */

@media (min-width: 761px) {

    .v5-nav nav {
        gap:
            38px !important;
    }

    .v5-nav nav a {
        font-size:
            14px !important;

        font-weight:
            600 !important;

        line-height:
            1 !important;

        letter-spacing:
            .018em !important;
    }

    .nav-pill {
        min-height:
            46px !important;

        padding:
            0 23px !important;

        font-size:
            12px !important;

        font-weight:
            600 !important;

        letter-spacing:
            .015em;
    }

}


/*
 * Slightly tighter spacing on standard laptop widths
 * while preserving the new readable font size.
 */
@media
(
    min-width: 761px
)
and
(
    max-width: 1366px
) {

    .v5-nav nav {
        gap:
            28px !important;
    }

    .v5-nav nav a {
        font-size:
            13px !important;
    }

}