/* Sembunyikan scrollbar untuk semua browser */
html,
body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    overflow-x: clip; /* Fixes sticky positioning bugs in modern browsers */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* Swiper Custom Pagination Dots */
.swiper-pagination-bullet {
    background-color: #007236 !important; /* Primary Brand Green */
    opacity: 0.3 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 9999px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.swiper-pagination-bullet:hover {
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    width: 24px !important;
    border-radius: 9999px !important;
}

/* Pixel Mouse Animations */
.pixel-mouse {
    animation: bounce-slow 3s infinite ease-in-out;
}

.pixel-wheel {
    animation: scroll-pixel 1.5s infinite;
}

@keyframes scroll-pixel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(8px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

@keyframes bounce-slow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(12px);
    }
}

.hero-title {
    font-size: 3rem;
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 5.6vw;
    }
}

.hero-bg {
    background-image: url("../assets/hero_bg.png");
}

.ornament-timeline-bg {
    background-image: url("../assets/ornament_timeline.png");
}

.ornament-menu-bg {
    background-image: url("../assets/ornament_menu.png");
}

#section-timeline {
    clip-path: url("#spikeClip");
    -webkit-clip-path: url("#spikeClip");
}

.timeline-story-image {
    width: 100%;
    height: auto;
}

@media (min-width: 1301px) {
    #section-timeline .timeline-container {
        width: max-content;
        padding-right: 100px;
    }

    #section-timeline .timeline-slide {
        width: auto;
    }

    #section-timeline .timeline-slide-layout {
        width: max-content;
        align-items: flex-end;
    }

    .timeline-story-image {
        width: auto;
        height: 400px;
    }

    .timeline-story-copy {
        flex: 0 0 500px;
        width: 500px;
    }

    #section-timeline .timeline-slide + .timeline-slide {
        margin-left: 100px;
    }

    #section-timeline .timeline-slide:not(:last-child) > div:last-child {
        width: calc(100% + 112px);
    }

    #section-timeline .timeline-dot {
        position: relative;
        z-index: 2;
    }

    #section-timeline .timeline-dot + div {
        margin-left: -0.625rem;
    }

    #section-timeline [id^="tl-line-"] {
        transform-origin: left center;
    }
}

@media (max-width: 1300px) {
    #section-timeline {
        min-height: 0 !important;
        padding-top: 8rem !important;
        overflow: visible !important;
        width: 100% !important;
    }

    #section-timeline .timeline-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        transform: none !important;
    }

    #section-timeline .timeline-slide {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        padding-left: 2.5rem !important;
    }

    #section-timeline .timeline-slide:not(:last-child) {
        padding-bottom: 100px !important;
    }

    #section-timeline .timeline-slide > div:first-child {
        flex-direction: column !important;
        width: 100% !important;
        align-items: flex-start !important;
    }

    #section-timeline .timeline-story-image,
    #section-timeline .timeline-story-copy {
        width: 100% !important;
    }

    #section-timeline .timeline-story-image {
        max-width: 300px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        height: auto !important;
    }

    #section-timeline .timeline-slide > div:last-child {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        margin-top: 0 !important;
        display: flex !important;
        width: 1.25rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #section-timeline .timeline-dot + div {
        width: 0.25rem !important;
        height: auto !important;
        flex: 1 1 0% !important;
    }
}

.bg-inner {
    clip-path: path("M115.506 0L123.64 28.2161L136.821 1.97512L139.632 31.2055L157.41 7.83322L154.802 37.0824L176.572 17.3748L168.634 45.6468L193.655 30.275L180.657 56.607L208.076 46.0944L190.461 69.5897L219.345 64.2943L197.713 84.1529L227.078 84.2551L202.165 99.8006L231.011 105.297L203.666 116L231.011 126.703L202.165 132.199L227.078 147.745L197.713 147.847L219.345 167.706L190.461 162.41L208.076 185.906L180.657 175.393L193.655 201.725L168.634 186.353L176.572 214.625L154.802 194.918L157.41 224.167L139.632 200.795L136.821 230.025L123.64 203.784L115.506 232L107.371 203.784L94.1909 230.025L91.3797 200.795L73.6018 224.167L76.2096 194.918L54.4397 214.625L62.3776 186.353L37.3572 201.725L50.3548 175.393L22.9359 185.906L40.5507 162.41L11.6669 167.706L33.2991 147.847L3.93408 147.745L28.847 132.199L0.000694275 126.703L27.3459 116L0.000694275 105.297L28.847 99.8006L3.93408 84.2551L33.2991 84.1529L11.6669 64.2943L40.5507 69.5897L22.9359 46.0944L50.3548 56.607L37.3572 30.275L62.3776 45.6468L54.4397 17.3748L76.2096 37.0824L73.6018 7.83322L91.3797 31.2055L94.1909 1.97512L107.371 28.2161L115.506 0Z");
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.float-mockup {
    animation: floatMockup 4s ease-in-out infinite;
}

@keyframes floatMockup {
    0%,
    100% {
        transform: translateY(0px) rotate(2deg);
    }
    50% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

.float-mascot {
    animation: floatMascot 3s ease-in-out infinite;
}

@keyframes floatMascot {
    0%,
    100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.03);
    }
}

/*
 * The compiled Tailwind sheet forces the header/overlay navigation to
 * var(--font-sans) ("Noto Sans") via a two-ID base rule. Mirror the selectors
 * here (custom.css loads afterwards, same specificity) to restore Figtree.
 * --font-sans itself must stay as-is: faq-section.blade.php still uses it.
 */
#inline-nav #nav-links,
#inline-nav .menu-link,
#menu-overlay .menu-link,
.menu-toggle-btn .menu-text {
    font-family: var(--font-body);
}

/*
 * Floating WhatsApp button. Hand-written rather than Tailwind utilities:
 * md:bottom-6, md:right-6, md:w-28 and z-[140] are not in the compiled sheet,
 * which is built in the esteler77-web-html repo, not here.
 * z-index 140 keeps it above the footer (50) and below the menu overlay (150).
 */
.floating-wa {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 140;
    display: block;
    width: 5rem;
    transition: transform 0.3s ease;
}

.floating-wa:hover {
    transform: scale(1.1);
}

.floating-wa img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .floating-wa {
        right: 1.5rem;
        bottom: 1.5rem;
        width: 7rem;
    }
}

/*
 * Google's reCAPTCHA v3 badge is fixed bottom-right, same corner as the
 * floating WhatsApp button, and overlaps it. v3 runs invisibly regardless
 * of the badge, so hiding it is supported by Google's terms as long as the
 * required attribution text is shown near the form it protects — see the
 * notice under the submit button in contact-form-section.blade.php.
 */
.grecaptcha-badge {
    visibility: hidden;
}

/*
 * The hero bowl is bottom-anchored inside a 100vh container, so its top edge
 * lands at 108vh (xl: 112vh) minus its own height. #inline-nav is fixed at
 * top-8 with min-h-16, so its bottom edge sits at 6rem. Capping the height
 * keeps the bowl clear of the nav at every viewport, and the 0.9 scale is the
 * "perkecil sedikit" the UAT review asked for on top of that. This stylesheet
 * loads before main.js runs, so GSAP's first render decomposes this transform
 * and recomposes it each scroll frame — after that first paint, GSAP owns the
 * inline transform and this rule's translateX/scale values are effectively
 * dead; change the bowl's on-scroll transform in main.js, not here.
 *
 * Do NOT add translateX(-50%) here, and do not restore the Tailwind
 * `-translate-x-1/2` this rule cancels. Horizontal centring is done by
 * layout (left/right 0 + margin-inline auto), NOT by a transform, and that
 * is deliberate: GSAP resolves a percentage translate into pixels once, at
 * first paint, and never recomputes it. Centring the bowl with
 * `-translate-x-1/2` therefore went stale the moment the viewport changed
 * width — resize the window or rotate a phone and the bowl drifted off
 * centre by half the difference. Layout-based centring is recomputed on
 * every resize, so it cannot go stale. This rule should only ever set
 * `scale(...)` in `transform`.
 */
.hero-section .es-main {
    max-height: calc(108vh - 7.5rem);
    transform: scale(0.9);
    translate: none;
    left: 0;
    right: 0;
    margin-inline: auto;
}

/*
 * The cap here is deliberately vh-based rather than `max-height: 100%`. A
 * percentage max-height needs a *definite* height on the containing block
 * (.main-img-wrapper) to resolve against, and .main-img-wrapper never has
 * one at the base or xl breakpoint — .es-main only ever sets `max-height`
 * there, never `height`, so per CSS2.1 the percentage computes to `none`
 * and the cap silently stops working. Mirroring .es-main's own
 * calc(108vh - 7.5rem) / calc(112vh - 7.5rem) values keeps this rule
 * binding at every breakpoint regardless of the wrapper's height.
 *
 * `max-width: 100%` is load-bearing, not decorative — do not remove it.
 * Without it, once the height cap binds the image's `width: auto` sizes
 * from its own intrinsic aspect ratio instead of the wrapper's Tailwind
 * widths (w-[81vw], xl:w-[38vw]), so the bowl silently reverts to
 * intrinsic-driven sizing instead of viewport-proportional sizing —
 * confirmed by measurement: 651px (intrinsic 723 x 0.9 scale) instead of
 * the designed 534px (38vw x 0.9 scale) at a 1560px viewport.
 */
.hero-section .main-img-wrapper img {
    max-height: calc(108vh - 7.5rem);
    width: auto;
    max-width: 100%;
}

@media (min-width: 1280px) {
    .hero-section .es-main {
        max-height: calc(112vh - 7.5rem);
    }

    .hero-section .main-img-wrapper img {
        max-height: calc(112vh - 7.5rem);
    }
}

/*
 * Hero rich text (Hero 2 Section). Tailwind preflight zeroes <p> margins, so
 * multi-paragraph CKEditor content would otherwise run together as one block.
 * Spacing lives here rather than as a utility class on the wrapper: the
 * frontend Tailwind build is prebuilt from the static design repo and never
 * scans these Blade views, so a newly-invented utility would not exist in it.
 */
.hero-rich-text p + p {
    margin-top: 0.75em;
}

/* Language switch target with no translation of this page or item: shown, not clickable. */
.lang-btn-unavailable {
    cursor: not-allowed;
    opacity: 0.5;
}