:root {
    --red: #d4182c;
    --navy: #0f2d54;
    --bg: #ffffff;
    --surface: #ffffff;
    --ink: #0f2d54;
    --ink-soft: #5a6b85;
    --line: #e3e7ef;
    --accent: #c4162a;
    --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --nav-h: 76px;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    color-scheme: light;
}

html {
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 92px);
    scroll-behavior: smooth;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    background: #e81f32;
    z-index: 10;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

h1,
h2,
h3,
h4,
p,
ul,
dl,
dd {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

.wrap {
    width: min(1080px, 100% - 3rem);
    margin-inline: auto;
}

/* Logo */

.logos {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    flex-shrink: 0;
}

.logos .set {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.logos .by {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    margin-inline: 0.1rem;
}

.logos img {
    display: block;
    height: 20px;
    width: auto;
}

/* Navigasi */

/* GLOBAL RESPONSIVE SAFETY GUARDS (WITHOUT BREAKING POSITION: STICKY) */

html,
body {
    margin: 0;

    padding: 0;

    width: 100%;

    position: relative;
}

body.nav-open {
    touch-action: none;
    overscroll-behavior: contain;
}

/* Navigasi */

.nav {
    position: sticky;

    top: env(safe-area-inset-top, 0px);

    z-index: 990;

    background: #e81f32;

    color: #fff;

    box-shadow: 0 2px 14px rgba(232, 31, 50, 0.18);

    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: var(--nav-h, 72px);
    width: 100% !important;
    max-width: 1440px !important;
    padding-inline: clamp(1rem, 2.5vw, 2.5rem) !important;
    margin-inline: auto;
    box-sizing: border-box;
}

.brand {
    font-weight: 700;

    letter-spacing: -0.02em;

    text-decoration: none;

    white-space: nowrap;

    color: #ffffff;
}

/* Desktop Navigation Actions */

.nav-desktop-actions {
    display: flex;

    align-items: center;

    gap: 1.5rem;
}

.nav-desktop-actions nav {
    max-width: 100%;
    min-width: 0;
}

.nav .wrap ul {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.25vw, 1.35rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-desktop-actions li a {
    text-decoration: none;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    padding: 0.4rem 0.2rem;
    font-weight: 600;
    transition: color 0.18s ease;
}

.nav-link-register {
    background: #FFFFFF !important;
    color: #EC1D2F !important;
    font-weight: 800 !important;
    font-size: 0.84rem !important;
    padding: 0.35rem 0.95rem !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    margin-left: 0.2rem;
}

.nav-link-register:hover {
    background: #FFF5F5 !important;
    color: #C01423 !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
}

.nav li a:hover {
    color: #fff;

    text-decoration: underline;

    text-underline-offset: 6px;
}

/* Mobile Actions Bar (hidden by default on desktop) */

.nav-mobile-bar {
    display: none;

    align-items: center;

    gap: 0.65rem;
}

/* Animated Hamburger Button */

.nav-toggle {
    display: none;

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

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

    border-radius: 8px;

    width: 40px;

    height: 40px;

    padding: 0;

    cursor: pointer;

    align-items: center;

    justify-content: center;

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

    touch-action: manipulation;
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.22);

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

.nav-toggle-icon {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 20px;

    height: 14px;

    position: relative;
}

.nav-toggle-icon .bar {
    display: block;

    width: 100%;

    height: 2px;

    background: #ffffff;

    border-radius: 2px;

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

.nav-toggle.open .bar-1 {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.open .bar-2 {
    opacity: 0;
}

.nav-toggle.open .bar-3 {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Drawer Backdrop */

.mobile-drawer-backdrop {
    display: none;

    position: fixed;

    inset: 0;

    background: rgba(10, 24, 45, 0.65);

    backdrop-filter: blur(5px);

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

    z-index: 998;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;
}

.mobile-drawer-backdrop.active {
    opacity: 1;

    pointer-events: auto;
}

/* Mobile Slide-in Drawer */

.mobile-drawer {
    display: none;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    width: min(350px, 86vw);

    background: #0e2e54;

    color: #ffffff;

    z-index: 999;

    transform: translateX(100%);

    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);

    flex-direction: column;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}

.mobile-drawer.active {
    transform: translateX(0);
}

.drawer-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1.25rem 1.4rem;

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

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

.drawer-header-brand {
    display: flex;

    flex-direction: column;
}

.drawer-title {
    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: -0.02em;

    color: #ffffff;
}

.drawer-sub {
    font-size: 0.72rem;

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

    font-weight: 500;

    margin-top: 2px;
}

.drawer-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
    flex-shrink: 0;
}
.drawer-close svg {
    display: block;
    margin: auto;
}

.drawer-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.drawer-body {
    flex: 1;
    padding: 1.1rem 1rem !important;
    overflow-y: auto;
    width: 100% !important;
    box-sizing: border-box !important;
}

.drawer-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.drawer-nav-list li {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.drawer-nav-item,
.drawer-nav-list .drawer-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 1.05rem !important;
    padding: 0.9rem 1.15rem !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.drawer-nav-item:hover,
.drawer-nav-item:active {
    background: rgba(236, 29, 47, 0.22) !important;
    border-color: rgba(236, 29, 47, 0.5) !important;
    transform: translateX(2px) !important;
}

.drawer-item-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(236, 29, 47, 0.16) !important;
    border: 1px solid rgba(236, 29, 47, 0.28) !important;
    color: #ff6575 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.drawer-item-icon svg {
    display: block !important;
    margin: auto !important;
    flex-shrink: 0 !important;
}

.drawer-item-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.18rem !important;
}

.drawer-item-title {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drawer-item-sub {
    font-size: 0.76rem !important;
    color: rgba(255, 255, 255, 0.62) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drawer-arrow {
    color: rgba(255, 255, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.drawer-nav-item-cta {
    background: linear-gradient(135deg, rgba(236, 29, 47, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border: 1px solid rgba(236, 29, 47, 0.5) !important;
}

.drawer-icon-cta {
    background: #EC1D2F !important;
    border-color: #EC1D2F !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(236, 29, 47, 0.35) !important;
}

.drawer-footer {
    padding: 1.25rem 1.4rem;

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

    background: rgba(0, 0, 0, 0.18);
}

.drawer-partner-strip {
    display: flex;

    flex-direction: column;

    gap: 0.65rem;
}

.partner-label {
    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

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

    font-weight: 600;
}

.partner-logos-row {
    display: flex;

    align-items: center;

    gap: 1rem;
}

.partner-logos-row img {
    height: 18px;

    width: auto;

    opacity: 0.88;
}

/* Layar pertama: hero + fakta mengisi sisa tinggi viewport di bawah header */

.first {
    display: flex;

    flex-direction: column;

    min-height: calc(100vh - var(--nav-h, 76px));

    min-height: calc(100svh - var(--nav-h, 76px));

    position: relative;

    background: #ffffff;
}

.first .hero {
    flex: 1;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background: #ffffff;
}

.hero-rings-decor {
    position: absolute;

    top: 0;

    right: 0;

    width: clamp(380px, 52vw, 830px);

    pointer-events: none;

    z-index: 1;

    user-select: none;

    opacity: 0.95;

    transition: transform 0.3s ease;
}

.hero-rings-decor img {
    width: 100%;

    height: auto;

    display: block;
}

.hero-wrap {
    position: relative;

    z-index: 2;

    width: min(1120px, 100% - 3rem);

    padding-block: clamp(2rem, 5vh, 4rem) clamp(1.75rem, 4vh, 3rem);

    display: flex;

    flex-direction: column;
}

/* Poster Logos Strip */

.hero-poster-logos {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    margin-bottom: clamp(0.85rem, 1.8vh, 1.5rem);
}

.poster-logos-left {
    display: flex;

    align-items: center;

    gap: clamp(0.85rem, 1.8vw, 1.8rem);

    flex-wrap: wrap;
}

.hero-logo {
    object-fit: contain;

    transition: transform 0.25s ease;
}

.hero-logo:hover {
    transform: translateY(-2px);
}

.hero-logo.logo-telu {
    height: clamp(24px, 2.7vw, 34px);

    width: auto;
}

.hero-logo.logo-btp {
    height: clamp(21px, 2.4vw, 30px);

    width: auto;
}

.hero-logo.logo-sdm {
    height: clamp(18px, 2vw, 25px);

    width: auto;
}

.poster-logos-right {
    display: flex;

    align-items: center;
}

.hero-logo.logo-anniversary {
    height: clamp(48px, 5.4vw, 68px);

    width: auto;

    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

/* Brand Wordmark */

.hero-brand {
    margin-bottom: clamp(0.5rem, 1.2vh, 0.9rem);
}

.hero-brand-img {
    height: clamp(22px, 2.6vw, 32px);

    width: auto;

    display: block;
}

/* Headline */

.hero-headline {
    font-size: clamp(3.2rem, 6.2vw, 5.8rem);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.04em;

    color: #0e2e54;

    margin-bottom: clamp(1.2rem, 2.2vh, 1.8rem);

    max-width: 13ch;
}

.hero-headline .hl-line {
    display: block;
    opacity: 0;
    transform: translateY(14px);
    animation: hlIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards, hlPulse 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.28s + 0.15s), calc(var(--i) * 0.35s + 2.4s);
}

.hero-brand-img {
    animation: hlBrandIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: left center;
}

@keyframes hlIn { to { opacity: 1; transform: translateY(0); } }
@keyframes hlPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes hlBrandIn { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .hero-headline .hl-line, .hero-brand-img { animation: none; opacity: 1; transform: none; }
}

.hero-headline .hl-bold {
    font-weight: 800;

    color: #0e2e54;
}

.hero-headline .hl-light {
    font-weight: 400;

    color: #0e2e54;
}

.hero-desc {
    margin-top: 0;

    margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);

    max-width: 52ch;

    font-size: clamp(1rem, 1.8vw, 1.15rem);

    line-height: 1.6;

    color: var(--ink-soft);
}

.hero .cta {
    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem;
}

.btn {
    display: inline-flex;

    align-items: center;

    min-height: 48px;

    padding: 0.65rem 1.5rem;

    font: inherit;

    font-weight: 600;

    font-size: 0.97rem;

    text-decoration: none;

    border-radius: 6px;

    border: 1.5px solid transparent;
}

.btn-red {
    background: var(--red);

    color: #fff;

    box-shadow: 0 4px 14px rgba(228, 27, 45, 0.28);

    transition: all 0.25s ease;
}

.btn-red:hover {
    background: #b8132a;

    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(228, 27, 45, 0.38);
}

.btn-white {
    background: var(--red);
    color: #fff;
}

.btn-white:hover {
    background: #b8132a;
}

.btn-line {
    border-color: var(--line);
    color: var(--ink);
}

.btn-line:hover {
    background: var(--surface);
}

.btn-dark {
    background: var(--red);
    color: #fff;
}

.btn-dark:hover {
    background: #b8132a;
}

@media (max-width: 640px) {
    .hero-poster-logos {
        flex-direction: row;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 1.8rem;
    }

    .poster-logos-left {
        gap: 0.6rem;
    }

    .hero-logo-divider {
        display: none;
    }

    .hero-rings-decor {
        width: 90vw;

        opacity: 0.75;
    }
}

.facts {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.facts .wrap {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .facts .wrap {
        grid-template-columns: 1fr 1.2fr 1.2fr;
    }
}

.fact {
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
}

.fact:first-child {
    border-top: 0;
}

@media (min-width: 760px) {
    .fact {
        border-top: 0;
        border-left: 1px solid var(--line);
        padding: clamp(0.9rem, 2.5vh, 1.75rem) 0 clamp(0.9rem, 2.5vh, 1.75rem)
            1.75rem;
    }
    .fact:first-child {
        border-left: 0;
        padding-left: 0;
    }
}

.fact small {
    display: block;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.fact strong {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}

/* Seksi */

section {
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.split {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 280px 1fr;
        gap: 4rem;
    }
}

.split h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.split .intro {
    margin-top: 0.9rem;
    color: var(--ink-soft);
    max-width: 34ch;
}

.rule {
    border-top: 1px solid var(--line);
}

/* Rangkaian Acara (Fit 1 Layar Clean Section with Left-Aligned Poster Layout & Asymmetric Graphic Balance) */

.section-rangkaian {
    position: relative;

    min-height: calc(100vh - var(--nav-h, 76px));

    min-height: calc(100svh - var(--nav-h, 76px));

    padding-block: clamp(2rem, 4vh, 3.2rem) clamp(2.5rem, 5vh, 3.8rem);

    background: #ffffff;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;
}

.rangkaian-stage {
    position: relative;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;

    background: transparent;
}

/* Background Concentric Rings Decor (Echoing Poster & Hero from Right Side) */

.rangkaian-rings-decor {
    position: absolute;

    top: 50%;

    right: -5%;

    transform: translateY(-50%);

    width: clamp(520px, 58vw, 880px);

    pointer-events: none;

    z-index: 1;

    user-select: none;

    opacity: 0.72;

    transition: transform 0.3s ease;
}

.rangkaian-rings-decor img {
    width: 100%;

    height: auto;

    display: block;
}

.rangkaian-wrap {
    position: relative;

    z-index: 2;

    width: min(1160px, 100% - 3rem);

    margin-inline: auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    box-sizing: border-box;
}

/* Header Section (Rata Kiri, Tipografi Kuat & Berwibawa) */

.rangkaian-header {
    text-align: left;

    max-width: 680px;

    margin: 0 0 clamp(1.2rem, 2.5vh, 1.8rem) 0;

    flex-shrink: 0;
}

.rangkaian-header h2 {
    font-size: clamp(2.3rem, 3.8vw, 3.2rem);

    font-weight: 800;

    letter-spacing: -0.035em;

    color: #0e2e54;

    line-height: 1.1;

    margin: 0 0 0.4rem;

    text-align: left;
}

.rangkaian-header .intro {
    color: var(--ink-soft);

    font-size: clamp(0.95rem, 1.25vw, 1.12rem);

    line-height: 1.45;

    max-width: 54ch;

    margin: 0;

    text-align: left;
}

/* Showcase Grid of 5 Event Tiles (Rata Kiri) */

.pillars-showcase {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: clamp(14px, 2vh, 20px);

    width: 100%;

    flex-shrink: 0;

    box-sizing: border-box;
}

/* Row 1: 3 cards rata kiri */

.pillars-row-top {
    display: flex;

    align-items: stretch;

    justify-content: flex-start;

    gap: clamp(14px, 1.8vw, 22px);

    width: 100%;
}

/* Row 2: 2 cards rata kiri (sejajar persis di bawah card 1 & card 2) */

.pillars-row-bottom {
    display: flex;

    align-items: stretch;

    justify-content: flex-start;

    gap: clamp(14px, 1.8vw, 22px);

    width: 100%;
}

/* Pillar Card Tile (2-Column Balanced Design: Text on Left, Big Icon on Right) */

.pillar-card {
    position: relative;

    width: clamp(300px, 23.5vw, 350px);

    min-height: clamp(195px, 22vh, 228px);

    height: auto;

    background: var(--card-bg, #ffffff);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 8px 24px rgba(14, 46, 84, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.04);

    box-sizing: border-box;

    display: grid;

    grid-template-columns: 1fr 122px;

    gap: 0.85rem;

    align-items: center;

    padding: clamp(1.15rem, 1.4vw, 1.35rem);

    cursor: pointer;

    flex-shrink: 0;

    opacity: 0;

    transform: translateY(22px);

    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        opacity 0.45s ease;

    transition-delay: calc(var(--delay, 0) * 0.08s);
}

.pillar-card.is-revealed,
.section-rangkaian.no-scrolly .pillar-card {
    opacity: 1 !important;

    transform: none !important;
}

.pillar-card:hover {
    transform: translateY(-5px) scale(1.02) !important;

    box-shadow: 0 18px 40px var(--card-glow, rgba(14, 46, 84, 0.22));
}

/* Light Tile Theme (Panel Discussion, Pitching) */

.pillar-card.card-light {
    color: #0e2e54;

    border: 1px solid rgba(14, 46, 84, 0.09);
}

.pillar-card.card-light .pillar-title {
    color: #0e2e54;
}

.pillar-card.card-light .pillar-desc {
    color: rgba(14, 46, 84, 0.85);
}

/* Dark Tile Theme (Business Matching, Demo Day, Bazaar) */

.pillar-card.card-dark {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.14);
}

.pillar-card.card-dark .pillar-title {
    color: #ffffff;
}

.pillar-card.card-dark .pillar-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* Left Column: Title on top, description below */

.pillar-card-content {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    gap: 0.45rem;

    height: 100%;
}

.pillar-title {
    font-size: clamp(1.08rem, 1.25vw, 1.25rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    text-transform: uppercase;

    line-height: 1.1;

    margin: 0;

    pointer-events: none;
}

.pillar-desc {
    font-size: clamp(0.72rem, 0.8vw, 0.8rem);

    line-height: 1.36;

    margin: 0;

    font-weight: 500;

    pointer-events: none;
}

/* Right Column: Icon centered and unclipped */

.pillar-card-visual {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 122px;

    height: 100%;

    pointer-events: none;
}

.pillar-vector-img {
    max-width: 100%;

    max-height: 100%;

    height: clamp(68px, 8.5vh, 88px);

    max-width: 90px;

    width: auto;

    object-fit: contain;

    display: block;

    opacity: 0.95;

    transition: transform 0.35s ease;
}

.pillar-vector-img.pillar-card-img {
    width: 122px;
    height: auto;
    max-width: 100%;
    max-height: none;
    border-radius: 10px;
    opacity: 1;
    box-shadow: 0 6px 16px rgba(14, 46, 84, 0.18);
}

.pillar-card:hover .pillar-vector-img {
    transform: scale(1.08);
}

/* Responsive Media Queries Mobile */

@media (max-width: 900px) {
    .section-rangkaian {
        min-height: auto !important;

        height: auto !important;

        padding-block: 2.5rem 2rem !important;
    }

    .rangkaian-stage {
        position: relative !important;

        top: 0 !important;

        height: auto !important;

        max-height: none !important;

        overflow: visible !important;
    }

    .rangkaian-rings-decor {
        display: none;
    }

    .rangkaian-wrap {
        width: calc(100% - 2rem) !important;

        max-width: 100% !important;

        align-items: stretch !important;
    }

    .rangkaian-header {
        text-align: left !important;

        margin-bottom: 1.25rem !important;
    }

    .rangkaian-header h2 {
        font-size: 2.1rem !important;
    }

    .rangkaian-header .intro {
        font-size: 0.92rem !important;
    }

    .pillars-showcase {
        max-height: none !important;

        gap: 0.9rem !important;

        width: 100% !important;
    }

    .pillars-row-top,
    .pillars-row-bottom {
        flex-direction: column !important;

        gap: 0.9rem !important;

        width: 100% !important;
    }

    .pillar-card {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 145px !important;

        grid-template-columns: 1fr 118px !important;

        gap: 0.75rem !important;

        padding: 1.1rem 1.15rem !important;

        opacity: 1 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }

    .pillar-title {
        font-size: 1.15rem !important;

        line-height: 1.12 !important;

        margin-bottom: 0.35rem !important;
    }

    .pillar-desc {
        font-size: 0.78rem !important;

        line-height: 1.35 !important;
    }

    .pillar-card-visual {
        width: 118px !important;

        height: 100% !important;

        justify-content: flex-end !important;
    }

    .pillar-vector-img {
        height: 70px !important;

        max-width: 82px !important;

        width: auto !important;

        object-fit: contain !important;
    }

    .pillar-vector-img.pillar-card-img {
        width: 118px !important;
        max-width: 118px !important;
        height: auto !important;
    }
}

/* Rundown section top padding fine-tune */

#rundown {
    padding-top: clamp(2.5rem, 5vh, 4rem);
}

/* Rundown (Scrollytelling Interactive Timeline) */

.timeline-container {
    position: relative;

    padding-left: 2rem;
}

.timeline-track-line {
    position: absolute;

    top: 12px;

    bottom: 24px;

    left: 7px;

    width: 2px;

    background: #e3e7ef;

    border-radius: 2px;
}

.timeline-track-progress {
    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 0%;

    background: linear-gradient(180deg, #d4182c 0%, #f5b301 100%);

    border-radius: 2px;

    transition: height 0.1s linear;

    box-shadow: 0 0 8px rgba(212, 24, 44, 0.4);
}

.timeline-group {
    margin-top: 2.2rem;

    margin-bottom: 0.8rem;

    position: relative;
}

.timeline-group:first-child {
    margin-top: 0;
}

.timeline-group-node {
    position: absolute;

    left: -2rem;

    top: 8px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #0f2d54;

    border: 3px solid #fff;

    box-shadow: 0 0 0 2px #0f2d54;

    z-index: 2;

    transition: all 0.3s;
}

.timeline-group.is-passed .timeline-group-node {
    background: #d4182c;

    box-shadow: 0 0 0 2px #d4182c;
}

.timeline-group-header {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.6rem 1rem;
}

.timeline-group-title {
    font-size: 1.08rem;

    font-weight: 700;

    color: var(--navy);

    letter-spacing: -0.01em;
}

.timeline-group-time {
    font-size: 0.78rem;

    font-weight: 700;

    padding: 3px 10px;

    border-radius: 999px;

    background: rgba(15, 45, 84, 0.08);

    color: var(--navy);

    font-variant-numeric: tabular-nums;
}

.timeline-row {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 1.1rem;

    padding: 0.85rem 1rem;

    margin-bottom: 0.5rem;

    border-radius: 10px;

    background: #ffffff;

    border: 1px solid transparent;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    opacity: 0;

    transform: translateX(18px);
}

.timeline-row.is-revealed {
    opacity: 1;

    transform: translateX(0);
}

.timeline-row:hover {
    background: #f8fafc;

    border-color: #e2e8f0;

    box-shadow: 0 4px 14px rgba(15, 45, 84, 0.04);
}

.timeline-row-node {
    position: absolute;

    left: -2rem;

    top: 1.2rem;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #fff;

    border: 2px solid #c2d1ea;

    z-index: 2;

    transition: all 0.25s ease;
}

.timeline-row.is-passed .timeline-row-node {
    border-color: #d4182c;

    background: #d4182c;

    box-shadow: 0 0 0 3px rgba(212, 24, 44, 0.15);
}

.timeline-time {
    flex-shrink: 0;

    width: 7.4rem;

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--navy);

    font-variant-numeric: tabular-nums;

    padding: 4px 8px;

    background: #f1f5f9;

    border-radius: 6px;

    text-align: center;

    transition: background 0.2s;
}

.timeline-content {
    flex: 1;

    min-width: 0;
}

.timeline-header-line {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.5rem 0.75rem;
}

.timeline-title {
    font-size: 1rem;

    font-weight: 600;

    color: var(--ink);

    line-height: 1.4;

    margin: 0;
}

.timeline-badge {
    display: inline-block;

    font-size: 0.72rem;

    font-weight: 700;

    padding: 2px 8px;

    border-radius: 5px;

    background: rgba(212, 24, 44, 0.08);

    color: var(--accent);

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.partner-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-top: 0.5rem;
}

.partner-tag {
    display: inline-flex;

    align-items: center;

    font-size: 0.78rem;

    font-weight: 600;

    padding: 3px 9px;

    background: #eef2f6;

    color: #334155;

    border-radius: 6px;

    border: 1px solid #e2e8f0;
}

.partner-tag::before {
    content: "•";

    margin-right: 5px;

    color: var(--accent);
}

/* LIVE Status Highlight */

.timeline-row.live {
    border-color: rgba(212, 24, 44, 0.3);

    background: #fff8f8;

    box-shadow: 0 4px 20px rgba(212, 24, 44, 0.1);
}

.timeline-row.live .timeline-row-node {
    border-color: #d4182c;

    background: #d4182c;

    box-shadow: 0 0 0 5px rgba(212, 24, 44, 0.25);

    animation: pulse-live 1.8s infinite;
}

.timeline-row.live .timeline-time {
    background: #d4182c;

    color: #fff;
}

.live-pill {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    background: #d4182c;

    color: #fff;

    font-size: 0.72rem;

    font-weight: 700;

    padding: 2px 8px;

    border-radius: 999px;

    animation: pulse-live 1.8s infinite;
}

.live-pill::before {
    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #fff;
}

@keyframes pulse-live {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 600px) {
    .timeline-container {
        padding-left: 1.5rem;
    }

    .timeline-track-line {
        left: 4px;
    }

    .timeline-group-node {
        left: -1.5rem;
        width: 14px;
        height: 14px;
    }

    .timeline-row-node {
        left: -1.5rem;
        width: 10px;
        height: 10px;
    }

    .timeline-row {
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.75rem 0.8rem;
    }

    .timeline-time {
        width: auto;
        font-size: 0.82rem;
    }
}

/* Awarding (Prestigious Innovation Honors with Parallax Scroll Physics & Animated Stage Elements) */

.section-awarding {
    --t: 0;

    position: relative;

    overflow: hidden;

    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 50%, #ffffff 100%);

    padding-block: clamp(3.8rem, 7vh, 6rem);

    border-top: 1px solid var(--line);
}

/* Ambient Floating Parallax Orbs & Dust */

.award-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;
}

.award-o1 {
    width: 44vmin;

    height: 44vmin;

    left: -12vmin;

    top: 12%;

    background: radial-gradient(
        circle,
        rgba(245, 179, 1, 0.08) 0%,
        transparent 70%
    );

    translate: 0 calc(var(--t) * var(--d) * -0.45px);
}

.award-o2 {
    width: 52vmin;

    height: 52vmin;

    right: -16vmin;

    bottom: 8%;

    background: radial-gradient(
        circle,
        rgba(14, 46, 84, 0.06) 0%,
        transparent 70%
    );

    translate: 0 calc(var(--t) * var(--d) * -0.35px);
}

.award-dust {
    translate: calc(var(--t) * var(--d) * -0.22px)
        calc(var(--t) * var(--d) * -0.55px);
}

.awarding-wrap {
    position: relative;

    z-index: 2;

    width: min(1180px, 100% - 3rem);

    margin-inline: auto;

    display: grid;

    grid-template-columns: minmax(320px, 410px) 1fr;

    gap: clamp(2rem, 4vw, 4.2rem);

    align-items: start;
}

/* Left Column: Header, Live Animated Stage & Schedule */

.awarding-intro-col {
    display: flex;

    flex-direction: column;

    gap: 1.25rem;
}

.awarding-kicker {
    display: inline-block;

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #d4182c;
}

.awarding-header h2 {
    font-size: clamp(2.3rem, 3.8vw, 3.2rem);

    font-weight: 800;

    letter-spacing: -0.035em;

    color: #0e2e54;

    line-height: 1.08;

    margin: 0.25rem 0 0.65rem;
}

.awarding-header .intro {
    font-size: clamp(0.95rem, 1.2vw, 1.08rem);

    color: var(--ink-soft);

    line-height: 1.5;

    margin: 0 0 1rem;
}

.awarding-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.15rem;
    background: #fff4d6;
    color: #8a5a00;
    border: 1px solid rgba(245, 179, 1, 0.45);
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.35;
    width: fit-content;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.1);
}

.awarding-time-pill .awarding-time-icon {
    flex-shrink: 0;
    color: #b37d00;
}

.awarding-time-pill .awarding-time-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}

.awarding-time-pill .awarding-time-row {
    font-weight: 700;
    color: #7a4e00;
    font-size: 0.86rem;
    white-space: nowrap;
}

.awarding-time-pill .awarding-location-row {
    font-weight: 500;
    color: #8a5a00;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Live Interactive Awarding Stage Visual */

.awarding-stage-visual {
    position: relative;

    width: 100%;

    max-width: 420px;

    background: radial-gradient(
        circle at 50% 90%,
        rgba(245, 179, 1, 0.12) 0%,
        rgba(14, 46, 84, 0.04) 60%,
        transparent 100%
    );

    border: 1px solid rgba(14, 46, 84, 0.08);

    border-radius: 18px;

    padding: 0.65rem 0.5rem 0.2rem;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(14, 46, 84, 0.04);
}

.awarding-svg {
    display: block;

    width: 100%;

    height: auto;

    overflow: visible;
}

/* SVG Elements Animated tied to scroll --t and keyframes */

.section-awarding .a6-beam1 {
    rotate: calc((var(--t) - 0.45) * 34deg);

    transform-origin: 270px 10px;

    transform-box: fill-box;
}

.section-awarding .a6-beam2 {
    rotate: calc((var(--t) - 0.45) * -34deg);

    transform-origin: 270px 10px;

    transform-box: fill-box;
}

.section-awarding .aw-beam-center {
    animation: pulse-award-beam 3.2s ease-in-out infinite alternate;
}

.section-awarding .a6-trophy {
    opacity: clamp(0.3, calc(var(--t) * 2.2), 1);

    translate: 0 calc((1 - clamp(0, calc(var(--t) * 1.8), 1)) * 48px);

    transition: transform 0.15s ease-out;
}

.section-awarding .a6-star {
    opacity: clamp(0.25, calc((var(--t) - var(--dl, 0.15)) * 4), 1);

    scale: calc(
        0.4 + clamp(0, calc((var(--t) - var(--dl, 0.15)) * 3), 1) * 0.6
    );

    transform-box: fill-box;

    transform-origin: center;

    animation: twinkle-award-star 2.8s ease-in-out infinite alternate;

    animation-delay: calc(var(--i) * 0.45s);
}

.section-awarding .a6-conf {
    translate: 0 calc(var(--t) * var(--v) * 0.75px);

    rotate: calc(var(--t) * var(--r) * 1deg);

    transform-box: fill-box;

    transform-origin: center;
}

@keyframes twinkle-award-star {
    0% {
        filter: drop-shadow(0 0 2px rgba(245, 179, 1, 0.4));
    }

    100% {
        filter: drop-shadow(0 0 8px rgba(245, 179, 1, 0.95));
    }
}

@keyframes pulse-award-beam {
    0% {
        opacity: 0.16;
    }

    100% {
        opacity: 0.32;
    }
}

.awarding-note-box {
    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    padding: 0.85rem 1.1rem;

    background: #f8fafd;

    border: 1px solid #e3e7ef;

    border-radius: 12px;

    font-size: 0.85rem;

    color: #5a6b85;
}

.awarding-note-box svg {
    flex-shrink: 0;

    margin-top: 1px;
}

.awarding-note-box p {
    margin: 0;

    line-height: 1.45;
}

/* Right Column: 4 Prestigious Award Cards */

.awarding-cards-col {
    width: 100%;
}

.award-cards-grid {
    display: grid;

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

    gap: clamp(14px, 1.8vw, 20px);

    width: 100%;
}

.award-card {
    position: relative;

    background: #ffffff;

    border: 1.5px solid #e5eaf2;

    border-radius: 16px;

    padding: clamp(1.2rem, 1.6vw, 1.5rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.95rem;

    box-shadow:
        0 4px 16px rgba(14, 46, 84, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.02);

    cursor: pointer;

    overflow: hidden;

    opacity: 0;

    transform: translateY(32px);

    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        opacity 0.5s ease;

    transition-delay: calc(var(--delay, 0) * 0.1s);
}

.award-card.is-revealed {
    opacity: 1 !important;

    transform: translateY(0) !important;
}

.award-card:hover {
    transform: translateY(-6px) scale(1.015) !important;

    box-shadow:
        0 18px 40px rgba(14, 46, 84, 0.12),
        0 0 0 1.5px rgba(245, 179, 1, 0.5) !important;

    border-color: #f5b301 !important;
}

.award-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;
}

.award-number-badge {
    display: flex;

    align-items: center;

    gap: 0.65rem;
}

.award-num {
    font-size: 1.35rem;

    font-weight: 800;

    color: #0e2e54;

    letter-spacing: -0.02em;
}

.award-icon-emblem {
    width: 36px;

    height: 36px;

    border-radius: 10px;

    background: #eef3fa;

    color: #0e2e54;

    display: grid;

    place-items: center;

    transition: all 0.3s ease;
}

.award-card:hover .award-icon-emblem {
    background: #0e2e54;

    color: #f5b301;

    transform: scale(1.08) rotate(4deg);
}

.award-card.award-card-indiv .award-icon-emblem {
    background: #fdecee;

    color: #d4182c;
}

.award-card.award-card-indiv:hover .award-icon-emblem {
    background: #d4182c;

    color: #ffffff;
}

.award-tags {
    display: flex;

    align-items: center;

    gap: 0.4rem;
}

.tag-category {
    font-weight: 800;

    font-size: 0.72rem;

    padding: 4px 9px;

    border-radius: 6px;

    letter-spacing: 0.04em;
}

.tag-category.tag-coe {
    background: #0e2e54;

    color: #ffffff;
}

.tag-category.tag-indiv {
    background: #d4182c;

    color: #ffffff;
}

.tag-quota {
    display: inline-flex;

    align-items: center;

    gap: 3.5px;

    background: #fff4d6;

    color: #8a5a00;

    font-weight: 800;

    font-size: 0.72rem;

    padding: 4px 9px;

    border-radius: 6px;

    border: 1px solid rgba(245, 179, 1, 0.4);
}

.award-card-body {
    flex: 1;
}

.award-title {
    font-size: clamp(1.12rem, 1.35vw, 1.3rem);

    font-weight: 800;

    color: #0e2e54;

    letter-spacing: -0.025em;

    line-height: 1.15;

    margin: 0 0 0.35rem;
}

.award-desc {
    font-size: clamp(0.78rem, 0.88vw, 0.84rem);

    color: #5a6b85;

    line-height: 1.45;

    margin: 0;
}

.award-card-footer {
    border-top: 1px solid #edf1f7;

    padding-top: 0.7rem;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.award-recipient-label {
    color: #8c9bae;

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}

.award-recipient-val {
    color: #0e2e54;

    font-size: 0.82rem;

    font-weight: 700;
}

/* Responsive Media Queries for Awarding */

@media (max-width: 960px) {
    .awarding-wrap {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .awarding-stage-visual {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .section-awarding {
        padding-block: 2.8rem 3.5rem;
    }

    .award-cards-grid {
        grid-template-columns: 1fr;

        gap: 1rem;
    }

    .award-card {
        padding: 1.15rem;
    }

    .award-title {
        font-size: 1.18rem;
    }
}

/* Lokasi */

/* Mitra & Partner */
.section-partners {
    padding: 3.5rem 0;
    text-align: center;
}

.section-partners h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.section-partners .intro {
    margin: 0.7rem auto 0;
    color: var(--ink-soft);
}

.partners-grid {
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}

.partners-grid li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.partners-grid img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (min-width: 640px) {
    .partners-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
    .partners-grid { grid-template-columns: repeat(6, 1fr); }
    .partners-grid li { height: 110px; }
}

.venue dl {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 1.75rem;
}

.venue dt {
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.venue dd {
    font-weight: 600;
    margin-top: 0.1rem;
}

.venue-layout {
    display: block;
    margin-bottom: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.85rem;
    text-decoration: none;
}

.venue-layout img {
    display: block;
    width: 100%;
    height: auto;
}

.venue-layout span {
    display: block;
    padding: 0.55rem 0.9rem;
    background: #fff;
}

.map {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.map iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

.venue .btn {
    margin-top: 1.25rem;
}

/* QR */

.qr {
    border-top: 1px solid var(--line);
}

.qr p.lead {
    color: var(--ink-soft);
    max-width: 48ch;
    margin-bottom: 1.5rem;
}

/* ========================================================







   SECTION PANITIA (ORGANIZING COMMITTEE & COLLABORATORS)







   Theme Mint Green (#E6F4EE) - 100% Matching Chapter 6 & Site Design







   Authentic character avatars, Plus Jakarta Sans, zero AI slop







   ======================================================== */

.section-panitia {
    --bg: #e6f4ee;

    --ink: #0f2d54;

    --soft: #4f6a66;

    --a: #0f2d54;

    --b: #d4182c;

    --y: #f5b301;

    --w: #ffffff;

    --d: #bfddd0;

    --tint: rgba(15, 45, 84, 0.06);

    --t: 0;

    position: relative;

    overflow: hidden;

    background: var(--bg);

    color: var(--ink);

    padding: clamp(4rem, 7vw, 6rem) 0;

    border-top: 1px solid var(--d);
}

/* Ambient Floating Parallax Orbs (Identical to Chapter 6) */

.panitia-orb {
    position: absolute;

    border-radius: 50%;

    background: var(--tint);

    pointer-events: none;

    translate: 0 calc(var(--t, 0) * var(--d, 40) * -1px);
}

.panitia-orb.p-o1 {
    width: 44vmin;

    height: 44vmin;

    left: -10vmin;

    top: 15%;
}

.panitia-orb.p-o2 {
    width: 32vmin;

    height: 32vmin;

    right: 5%;

    top: 10%;
}

.panitia-orb.p-o3 {
    width: 50vmin;

    height: 50vmin;

    right: -15vmin;

    bottom: 5%;
}

.panitia-dust {
    translate: calc(var(--t, 0) * var(--d, 20) * -0.3px)
        calc(var(--t, 0) * var(--d, 20) * -0.8px);
}

.panitia-wrap {
    position: relative;

    z-index: 2;

    width: min(1140px, 100% - 3rem);

    margin-inline: auto;
}

/* Top Split: Text & Authentic Character Animation Stage */

.panitia-hero-split {
    display: grid;

    grid-template-columns: 1fr;

    gap: 2.5rem;

    align-items: center;

    margin-bottom: 2.75rem;
}

@media (min-width: 920px) {
    .panitia-hero-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);

        gap: 3.5rem;
    }
}

.panitia-text-col {
    display: flex;

    flex-direction: column;

    gap: 0.85rem;
}

.panitia-kicker {
    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: var(--b);

    margin: 0;
}

.panitia-title {
    font-size: clamp(2rem, 3.8vw, 3.2rem);

    font-weight: 300;

    letter-spacing: -0.04em;

    line-height: 1.08;

    color: var(--ink);

    margin: 0;
}

.panitia-body {
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);

    color: var(--soft);

    line-height: 1.6;

    max-width: 44ch;

    margin: 0;
}

/* Beats List (Site Scrollytelling Pattern) */

.panitia-beats {
    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    margin: 0.6rem 0 1.25rem;

    padding: 0;

    list-style: none;
}

.panitia-beats li {
    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    font-size: 0.95rem;

    color: var(--ink);

    line-height: 1.55;
}

.panitia-beats .beat-bullet {
    flex: none;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #d4182c;

    margin-top: 0.45rem;
}

.panitia-beats .beat-text {
    flex: 1;
}

.panitia-beats .beat-text strong {
    font-weight: 700;

    color: #0f2d54;

    margin-right: 0.35rem;
}

/* Clean Editorial Search Box */

.panitia-finder {
    margin-top: 0.5rem;
}

.panitia-finder label {
    display: block;

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--ink);

    margin-bottom: 0.4rem;
}

.panitia-search-input-box {
    position: relative;

    display: flex;

    align-items: center;

    max-width: 400px;
}

.panitia-search-input-box .search-icon {
    position: absolute;

    left: 14px;

    color: #7e978f;

    pointer-events: none;
}

.panitia-search-input-box input {
    width: 100%;

    min-height: 46px;

    padding: 0.55rem 2.5rem 0.55rem 2.6rem;

    font: inherit;

    font-size: 0.92rem;

    color: var(--ink);

    background: #ffffff;

    border: 1.5px solid #cfe4dc;

    border-radius: 999px;

    box-shadow: 0 2px 8px rgba(15, 45, 84, 0.04);

    transition: all 0.22s ease;
}

.panitia-search-input-box input::placeholder {
    color: #7e978f;
}

.panitia-search-input-box input:focus {
    outline: none;

    border-color: var(--b);

    box-shadow: 0 0 0 3px rgba(212, 24, 44, 0.12);
}

.panitia-search-input-box .btn-clear-search {
    position: absolute;

    right: 12px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: #cfe4dc;

    border: none;

    color: var(--ink);

    font-size: 14px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;
}

/* Hand-Crafted Character Animation Stage (Matching Chapters 6, 7 & 8) */

.panitia-art-stage {
    position: relative;

    background: #ffffff;

    border: 1.5px solid #cfe4dc;

    border-radius: 20px;

    padding: 1rem 1.25rem;

    box-shadow: 0 8px 24px rgba(15, 45, 84, 0.06);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.panitia-art-stage:hover {
    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(15, 45, 84, 0.09);
}

.panitia-svg {
    display: block;

    width: 100%;

    height: auto;
}

.panitia-svg .a5-bubble {
    --p: clamp(0.85, calc((var(--t, 0) - var(--dl, 0) + 0.4) * 3), 1);

    opacity: var(--p);

    transform: translateY(calc((1 - var(--p)) * 8px));

    transform-box: fill-box;

    transform-origin: bottom center;

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

.panitia-art-stage .fa {
    fill: #d4182c;
}

.panitia-art-stage .fb {
    fill: #0f2d54;
}

.panitia-art-stage .fy {
    fill: #f5b301;
}

.panitia-art-stage .fw {
    fill: #ffffff;
}

.panitia-art-stage .fd {
    fill: #bfddd0;
}

.panitia-art-stage .fk {
    fill: #f2c9a5;
}

.panitia-art-stage .tx {
    font-family: var(--font);
    font-weight: 700;
}

/* ========================================================







   STRUKTUR ORGANISASI PANITIA TELUNOVATION 2026 (HIERARCHY TREE)







   Authentic organizational chart with connecting branches, 







   executive tiers, support wings, & operational divisions







   ======================================================== */

/* ==========================================







   CHAPTER 6: STRUKTUR ORGANISASI (BAGAN RESMI TELUNOVATION 2026)







   ========================================== */

.org-section-header {
    text-align: center;

    max-width: 760px;

    margin: 3.5rem auto 2.5rem;

    padding: 0 1rem;
}

.org-kicker {
    display: inline-block;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    color: #d4182c;

    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.org-section-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);

    font-weight: 800;

    color: #0f2d54;

    letter-spacing: -0.02em;

    margin: 0 0 0.5rem;
}

.org-hint {
    font-size: 0.95rem;

    color: #5a6b85;

    margin: 0;
}

/* Search input feedback pill */

.org-search-feedback {
    margin-top: 0.65rem;

    font-size: 0.8rem;

    font-weight: 600;

    color: #0f2d54;

    background: #e8f5ee;

    border: 1px solid #97c4b4;

    padding: 0.35rem 0.85rem;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    box-shadow: 0 2px 6px rgba(15, 45, 84, 0.04);
}

.org-search-feedback strong {
    font-weight: 800;

    color: #d4182c;
}

/* ==========================================







   ORGANIZATIONAL TREE & SEAMLESS CONNECTORS







   ========================================== */

.org-canvas-wrap {
    width: 100%;

    padding: 0 0.5rem 3.5rem;

    position: relative;
}

.org-tree-canvas {
    width: 100%;

    max-width: 1200px;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-inline: auto;

    position: relative;

    padding: 0 1rem;
}

/* Vertical Stems & Connectors */

.org-connector-v {
    width: 20px;

    height: 32px;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    margin: 0 auto;
}

.org-connector-v .connector-line {
    width: 2px;

    height: 100%;

    background: #97c4b4;
}

.org-connector-v .connector-dot {
    position: absolute;

    bottom: -2px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #0f2d54;
}

/* SVG Vector Branch Lines (100% Continuous, Never Disconnected) */

.org-branch-wrap {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;
}

.branch-to-support,
.branch-from-support {
    max-width: 760px;

    height: 36px;
}

.branch-to-divisions {
    max-width: 1140px;

    height: 36px;
}

.branch-svg {
    width: 100%;

    height: 100%;

    display: block;
}

/* Central Hub: Divisi Pelaksana (Connected seamlessly top and bottom) */

.org-hub-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto;

    position: relative;

    z-index: 2;
}

.hub-pill {
    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    background: #0f2d54;

    color: #ffffff;

    padding: 0.42rem 1.25rem;

    border-radius: 999px;

    box-shadow: 0 4px 14px rgba(15, 45, 84, 0.16);

    border: 2px solid #ffffff;

    white-space: nowrap;
}

/* Org Tier Base */

.org-tier {
    width: 100%;

    display: flex;

    justify-content: center;

    position: relative;
}

/* Org Node Card Base */

.org-node {
    background: #ffffff;

    border: 1.5px solid #cfe4dc;

    border-radius: 14px;

    box-shadow: 0 4px 16px rgba(15, 45, 84, 0.05);

    position: relative;

    transition: all 0.22s ease;
}

.org-node:hover {
    transform: translateY(-2px);

    border-color: #97c4b4;

    box-shadow: 0 8px 22px rgba(15, 45, 84, 0.09);
}

.node-badge {
    display: inline-block;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    padding: 0.32rem 0.8rem;

    border-radius: 999px;

    margin-bottom: 0.75rem;
}

.badge-sc {
    background: #0f2d54;

    color: #ffffff;
}

.badge-lead {
    background: #d4182c;

    color: #ffffff;
}

.badge-wing {
    background: #ebf3f0;

    color: #0f2d54;

    border: 1px solid #cfe4dc;
}

/* TIER 1: STEERING COMMITTEE (PENGARAH) */

.node-sc {
    width: min(720px, 100%);

    padding: 1.35rem 1.75rem;

    text-align: center;

    border-color: #97c4b4;

    background: linear-gradient(180deg, #ffffff 0%, #f9fcfa 100%);
}

.sc-pj-box {
    background: #f4f9f6;

    border: 1px solid #d5e8df;

    border-radius: 10px;

    padding: 0.75rem 1.1rem;

    margin-bottom: 0.95rem;

    text-align: left;

    transition: all 0.2s ease;
}

.sc-pj-box .role-caption {
    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 0.74rem;

    font-weight: 800;

    color: #d4182c;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.sc-pj-box .org-tag {
    background: #ebf3f0;

    color: #4f6a66;

    padding: 0.14rem 0.55rem;

    border-radius: 4px;

    font-size: 0.7rem;

    font-weight: 700;
}

.sc-pj-box .pj-name {
    display: block;

    font-size: 1.12rem;

    color: #0f2d54;

    font-weight: 700;

    margin-top: 0.25rem;
}

.sc-members-block {
    text-align: left;
}

.sc-label {
    display: block;

    font-size: 0.74rem;

    font-weight: 800;

    text-transform: uppercase;

    color: #5a6b85;

    letter-spacing: 0.06em;

    margin-bottom: 0.5rem;
}

.sc-chips-grid {
    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;
}

.sc-member-chip {
    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    background: #ffffff;

    border: 1px solid #d5e8df;

    border-radius: 999px;

    padding: 0.28rem 0.75rem;

    font-size: 0.84rem;

    font-weight: 600;

    color: #0f2d54;

    transition: all 0.18s ease;
}

.sc-chip-dot {
    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #d4182c;
}

/* TIER 2: EXECUTIVE LEADS (KETUA & WAKIL) */

.node-lead {
    width: min(580px, 100%);

    padding: 1.25rem 1.6rem;

    text-align: center;

    border-color: #d4182c;

    background: #ffffff;
}

.leads-duo-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;
}

.lead-officer {
    background: #f4f9f6;

    border: 1px solid #d5e8df;

    border-radius: 10px;

    padding: 0.75rem 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    text-align: left;

    transition: all 0.2s ease;
}

.officer-role {
    font-size: 0.72rem;

    font-weight: 800;

    color: #d4182c;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.officer-name {
    font-size: 1.05rem;

    font-weight: 700;

    color: #0f2d54;
}

/* TIER 3: SUPPORT OFFICES (SEKRETARIAT & KEUANGAN) */

.tier-support {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

    max-width: 760px;

    width: 100%;

    margin: 0 auto;

    position: relative;
}

.node-wing {
    width: 100%;

    max-width: 100%;

    padding: 1.25rem 1.4rem;
}

.koor-compact {
    background: #f4f9f6;

    border: 1px solid #d5e8df;

    border-radius: 9px;

    padding: 0.65rem 0.85rem;

    display: flex;

    flex-direction: column;

    gap: 0.2rem;

    margin-bottom: 0.75rem;

    transition: all 0.2s ease;
}

.koor-compact small {
    font-size: 0.7rem;

    font-weight: 800;

    color: #d4182c;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.koor-compact strong {
    font-size: 0.98rem;

    font-weight: 700;

    color: #0f2d54;
}

.wing-members-list {
    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0.35rem;
}

.wing-members-list li {
    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.88rem;

    color: #0f2d54;

    padding: 0.25rem 0.4rem;

    border-radius: 6px;

    transition: all 0.18s ease;
}

.wing-members-list li .dot,
.div-members-list li .dot,
.mini-names li .dot {
    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #d4182c;

    flex-shrink: 0;
}

/* TIER 4: OPERATIONAL DIVISIONS (SPACIOUS 3-COLUMN GRID) */

.tier-operational {
    width: 100%;

    max-width: 1140px;

    margin: 0 auto;
}

.org-divisions-row {
    display: grid;

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

    gap: 1.5rem;

    width: 100%;

    max-width: 1140px;

    margin: 0 auto;

    position: relative;
}

.node-div {
    position: relative;

    padding: 1.35rem 1.4rem;

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

    background: #ffffff;

    border: 1.5px solid #cfe4dc;

    border-radius: 14px;

    box-shadow: 0 4px 16px rgba(15, 45, 84, 0.05);

    transition: all 0.22s ease;
}

.div-node-top {
    display: flex;

    align-items: center;

    gap: 0.55rem;

    border-bottom: 1.5px solid #ebf3f0;

    padding-bottom: 0.65rem;
}

.div-index {
    font-size: 0.75rem;

    font-weight: 800;

    color: #d4182c;

    background: #fce8ea;

    padding: 0.2rem 0.55rem;

    border-radius: 6px;
}

.div-name {
    font-size: 1.05rem;

    font-weight: 800;

    color: #0f2d54;

    margin: 0;

    line-height: 1.25;
}

/* Sub-divisions (e.g. Program BDI & TTIP) */

.sub-div-boxes {
    display: flex;

    flex-direction: column;

    gap: 0.75rem;
}

.sub-unit {
    background: #f9fcfa;

    border: 1px solid #e2efe9;

    border-radius: 9px;

    padding: 0.65rem 0.85rem;

    display: flex;

    flex-direction: column;

    gap: 0.4rem;
}

.sub-label {
    font-size: 0.72rem;

    font-weight: 800;

    color: #d4182c;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.koor-mini {
    font-size: 0.86rem;

    color: #0f2d54;
}

.koor-mini small {
    color: #5a6b85;

    font-weight: 600;
}

.koor-mini b {
    font-weight: 700;
}

.mini-names {
    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0.25rem;
}

.mini-names li {
    display: flex;

    align-items: center;

    gap: 0.45rem;

    font-size: 0.84rem;

    color: #0f2d54;
}

/* Div Members List */

.div-members-list {
    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0.35rem;
}

.div-members-list li {
    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.88rem;

    font-weight: 600;

    color: #0f2d54;

    padding: 0.22rem 0.4rem;

    border-radius: 6px;

    transition: all 0.18s ease;
}

.div-members-list li .tag {
    margin-left: auto;

    font-size: 0.68rem;

    font-weight: 700;

    background: #ebf3f0;

    color: #4f6a66;

    padding: 0.12rem 0.45rem;

    border-radius: 4px;

    white-space: nowrap;
}

/* ==========================================







   LIVE SEARCH HIGHLIGHTS IN ORG TREE







   ========================================== */

.hit {
    background: #fff3cd !important;

    border-color: #f5b301 !important;

    color: #8a3b00 !important;

    font-weight: 800 !important;

    box-shadow: 0 0 10px rgba(245, 179, 1, 0.45);

    animation: hitPulse 1.2s infinite alternate ease-in-out;
}

@keyframes hitPulse {
    0% {
        box-shadow: 0 0 4px rgba(245, 179, 1, 0.3);
    }

    100% {
        box-shadow: 0 0 12px rgba(245, 179, 1, 0.7);
    }
}

.node-has-hit {
    border-color: #d4182c !important;

    box-shadow: 0 0 20px rgba(212, 24, 44, 0.22) !important;

    transform: translateY(-2px);
}

.node-dimmed {
    opacity: 0.35;

    filter: grayscale(0.25);

    transition:
        opacity 0.2s ease,
        filter 0.2s ease;
}

/* Responsive adjustments */

@media (max-width: 992px) {
    .org-tree-canvas {
        width: 100% !important;

        max-width: 100% !important;

        padding-inline: 0.75rem !important;
    }

    .node-sc,
    .node-lead,
    .node-wing,
    .node-div {
        width: 100% !important;

        max-width: 480px !important;

        margin-inline: auto !important;

        box-sizing: border-box !important;
    }

    .leads-duo-grid {
        grid-template-columns: 1fr !important;

        gap: 0.75rem !important;
    }

    .tier-support {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        width: 100% !important;

        gap: 0 !important;
    }

    /* Mengubah pembungkus cabang horizontal menjadi garis vertikal bersambung di mobile */

    .org-branch-wrap {
        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        width: 20px !important;

        height: 28px !important;

        margin: 0 auto !important;

        position: relative !important;
    }

    .org-branch-wrap .branch-svg {
        display: none !important;
    }

    .org-branch-wrap::before {
        content: "" !important;

        width: 2px !important;

        height: 100% !important;

        background: #97c4b4 !important;

        display: block !important;
    }

    .org-branch-wrap::after {
        content: "" !important;

        position: absolute !important;

        bottom: -2px !important;

        width: 7px !important;

        height: 7px !important;

        border-radius: 50% !important;

        background: #0f2d54 !important;

        display: block !important;
    }

    /* Konektor vertikal di antara Sekretariat & Keuangan di Tier 3 */
    .node-wing.wing-left {
        margin-bottom: 0 !important;
        position: relative !important;
    }
    .node-wing.wing-left::after {
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        height: 1.85rem !important;
        background: #97c4b4 !important;
        margin: 0 !important;
        z-index: 2 !important;
    }
    .node-wing.wing-left::before {
        content: "" !important;
        position: absolute !important;
        top: calc(100% + 1.85rem) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        background: #0f2d54 !important;
        margin: 0 !important;
        z-index: 3 !important;
    }

    .node-wing.wing-right {
        margin-top: 1.85rem !important;
    }

    /* Central Hub: Divisi Pelaksana */

    .org-hub-divider {
        margin: 0 auto !important;
    }

    /* Baris divisi 01 s/d 06 */

    .org-divisions-row {
        grid-template-columns: 1fr !important;

        gap: 1.15rem !important;

        width: 100% !important;

        max-width: 480px !important;

        margin-inline: auto !important;
    }
}

@media (max-width: 640px) {
    .org-divisions-row {
        grid-template-columns: 1fr;

        gap: 1rem;
    }

    .node-sc,
    .node-lead {
        width: 100%;

        padding: 1.15rem 1rem;
    }

    .leads-duo-grid {
        grid-template-columns: 1fr;

        gap: 0.65rem;
    }
}

/* Footer */

footer {
    background: var(--bg);
    color: var(--ink);
    padding-block: 3.5rem;
    border-top: 1px solid var(--line);
}

footer .wrap {
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

footer h2 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

footer p,
footer a {
    color: var(--ink-soft);
}

footer a:hover {
    color: var(--ink);
}

footer ul {
    display: grid;
    gap: 0.5rem;
}

footer .fine {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* Scrollytelling parallax. Semua gerakan dihitung dari --t (0..1) per bab, diisi oleh Scrolly.tsx. */

.scrolly {
    --nav: var(--nav-h, 76px);
}

section.sc-chap {
    --t: 0.5;
    position: relative;
    height: 320vh;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
}

.sc-chap.th1 {
    --bg: #0f2d54;
    --ink: #fff;
    --soft: rgba(255, 255, 255, 0.74);
    --a: #e81f32;
    --b: #fff;
    --y: #f5b301;
    --w: #fff;
    --d: #0a2140;
    --bd: #1b4a85;
    --tint: rgba(255, 255, 255, 0.07);
}

.sc-chap.th2 {
    --bg: #fff4d6;
    --ink: #0f2d54;
    --soft: #5a6b85;
    --a: #d4182c;
    --b: #0f2d54;
    --y: #f5b301;
    --w: #fff;
    --d: #ebcb78;
    --tint: rgba(245, 179, 1, 0.18);
}

.sc-chap.th3 {
    --bg: #fdecee;
    --ink: #0f2d54;
    --soft: #5a6b85;
    --a: #d4182c;
    --b: #0f2d54;
    --y: #f5b301;
    --w: #fff;
    --d: #f3c3ca;
    --tint: rgba(212, 24, 44, 0.09);
}

.sc-chap.th4 {
    --bg: #e7eef9;
    --ink: #0f2d54;
    --soft: #5a6b85;
    --a: #d4182c;
    --b: #0f2d54;
    --y: #f5b301;
    --w: #fff;
    --d: #c2d1ea;
    --tint: rgba(15, 45, 84, 0.08);
}

.sc-chap.th5 {
    --bg: #d4182c;
    --ink: #fff;
    --soft: rgba(255, 255, 255, 0.85);
    --a: #0f2d54;
    --b: #0f2d54;
    --y: #f5b301;
    --w: #fff;
    --d: #a9111f;
    --tint: rgba(255, 255, 255, 0.1);
}

.sc-chap.th6 {
    --bg: #e6f4ee;
    --ink: #0f2d54;
    --soft: #4f6a66;
    --a: #0f2d54;
    --b: #d4182c;
    --y: #f5b301;
    --w: #fff;
    --d: #bfddd0;
    --tint: rgba(15, 45, 84, 0.07);
}

.sc-chap.th7 {
    --bg: #091b33;
    --ink: #fff;
    --soft: rgba(255, 255, 255, 0.74);
    --a: #e81f32;
    --b: #fff;
    --y: #f5b301;
    --w: #fff;
    --d: #0f2d54;
    --tint: rgba(245, 179, 1, 0.12);
}

.sc-chap.th8 {
    --bg: #f7f1e6;
    --ink: #0f2d54;
    --soft: #5a6b85;
    --a: #d4182c;
    --b: #0f2d54;
    --y: #f5b301;
    --w: #fff;
    --d: #e5d9c3;
    --tint: rgba(212, 24, 44, 0.08);
}

.sc-stage {
    position: sticky;
    top: var(--nav);
    height: calc(100vh - var(--nav));
    height: calc(100svh - var(--nav));
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sc-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    height: 100%;
    padding-block: 1rem;
}

.sc-art {
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    height: 100%;
    max-height: 40vh;
}

.sc-art svg {
    height: 100%;
    width: auto;
    max-width: 100%;
    overflow: visible;
}

.sc-text {
    grid-row: 2;
    align-self: start;
    opacity: min(
        clamp(0, calc((var(--t) + 0.06) * 10), 1),
        clamp(0, calc((1.04 - var(--t)) * 10), 1)
    );
    translate: 0 calc((0.5 - var(--t)) * 36px);
}

@media (min-width: 860px) {
    .sc-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        grid-template-rows: 1fr;
        gap: clamp(1.5rem, 4vw, 4rem);
        padding-block: 1.5rem;
    }

    .sc-art {
        grid-row: auto;
        grid-column: 2;
        max-height: min(66vh, 560px);
        align-self: center;
    }

    .sc-text {
        grid-row: auto;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }
}

.sc-kicker {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--y);
}

.sc-chap.lt .sc-kicker {
    color: var(--a);
}

.sc-chap.th6 .sc-kicker {
    color: var(--b);
}

.sc-text h2 {
    margin-top: 0.6rem;
    font-size: clamp(1.9rem, min(5vw, 8vh), 3.6rem);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1.06;
    color: var(--ink);
}

.sc-body {
    margin-top: clamp(0.7rem, 2vh, 1.25rem);
    max-width: 42ch;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--soft);
}

.sc-note {
    margin-top: 0.75rem;
    max-width: 42ch;
    font-weight: 600;
    color: var(--ink);
}

.sc-hint {
    margin-top: clamp(1rem, 3vh, 2rem);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--soft);
}

.sc-text .cta {
    display: flex;
    margin-top: clamp(1rem, 3vh, 1.75rem);
}

.sc-chap.th5 .btn-white {
    background: #fff;
    color: var(--red);
}

.sc-chap.th5 .btn-white:hover {
    background: #f6e3e5;
}

/* Lapisan latar: makin jauh angka --d, makin cepat bergeser */

.sc-orb {
    position: absolute;
    border-radius: 50%;
    background: var(--tint);
    translate: 0 calc(var(--t) * var(--d) * -1px);
}

.sc-o1 {
    width: 38vmin;
    height: 38vmin;
    left: -8vmin;
    top: 58%;
}

.sc-o2 {
    width: 22vmin;
    height: 22vmin;
    right: 12%;
    top: 4%;
}

.sc-o3 {
    width: 56vmin;
    height: 56vmin;
    right: -18vmin;
    top: 46%;
}

.sc-num {
    position: absolute;
    right: 4%;
    bottom: -0.15em;
    font-size: clamp(9rem, 30vmin, 24rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--tint);
    translate: 0 calc(var(--t) * -160px);
    user-select: none;
}

/* Kelas pewarna SVG */

.sc-art .fa {
    fill: var(--a);
}
.sc-art .fb {
    fill: var(--b);
}
.sc-art .fy {
    fill: var(--y);
}

.sc-art .fw {
    fill: var(--w);
}
.sc-art .fd {
    fill: var(--d);
}
.sc-art .fbg {
    fill: var(--bg);
}

.sc-art .fbd {
    fill: var(--bd, var(--d));
}
.sc-art .fi {
    fill: var(--ink);
}

.sc-art .fs {
    fill: var(--soft);
    opacity: 0.45;
}
.sc-art .fk {
    fill: #f2c9a5;
}

.sc-art .so {
    fill: none;
    stroke: var(--w);
    stroke-opacity: 0.28;
    stroke-width: 2;
}

.sc-art .si {
    stroke: var(--ink);
    stroke-width: 2.5;
}

.sc-art .sd {
    fill: none;
    stroke: var(--d);
    stroke-width: 4;
    stroke-linecap: round;
}

.sc-art .sa {
    stroke: var(--a);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-art .sb {
    stroke: var(--b);
    stroke-width: 12;
    stroke-linecap: round;
}

.sc-art .sw {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-art .sy {
    stroke: var(--y);
    stroke-width: 6;
    stroke-linecap: round;
}

.sc-art .tx {
    font-family: var(--font);
    font-weight: 700;
}

.sc-art .rot {
    transform-box: view-box;
    transform-origin: 300px 240px;
}

/* Gerakan tiap adegan (a0..a7) */

.a0-cloud1 {
    translate: calc(var(--t) * 90px) 0;
}

.a0-cloud2 {
    translate: calc(var(--t) * -60px) 0;
}

.a0-trees {
    translate: calc(var(--t) * -50px) 0;
}

.a0-win {
    opacity: calc(0.25 + var(--t) * 0.75);
}

.a0-walk {
    translate: calc(var(--t) * 215px) 0;
}

.a1-bunting {
    rotate: calc((var(--t) - 0.5) * 5deg);
    transform-origin: 300px 50px;
    transform-box: view-box;
}

.a1-tag {
    translate: 0 calc(var(--t) * -70px);
    rotate: calc((var(--t) - 0.5) * -16deg);
    transform-box: fill-box;
    transform-origin: center;
}

.a1-walk {
    translate: calc(var(--t) * 380px) 0;
}

.a2-scan {
    translate: 0 calc(clamp(0, calc(var(--t) * 2.2), 1) * 74px);
}

.a2-chip {
    opacity: clamp(0, calc((var(--t) - 0.12) * 8), 1);
}

.a2-stamp {
    --p: clamp(0, calc((var(--t) - 0.1 - var(--i) * 0.09) * 8), 1);
    opacity: var(--p);
    scale: calc(0.4 + var(--p) * 0.6);
    transform-box: fill-box;
    transform-origin: center;
}

.a2-lid {
    translate: 0 calc(clamp(0, calc((var(--t) - 0.72) * 6), 1) * -56px);
    rotate: calc(clamp(0, calc((var(--t) - 0.72) * 6), 1) * -14deg);
    transform-box: fill-box;
    transform-origin: left bottom;
}

.a2-burst {
    opacity: clamp(0, calc((var(--t) - 0.74) * 6), 1);
    translate: 0 calc(clamp(0, calc((var(--t) - 0.72) * 3), 1) * -26px);
}

.a3-glow {
    opacity: calc(0.08 + var(--t) * 0.3);
    scale: calc(0.7 + var(--t) * 0.4);
    transform-box: fill-box;
    transform-origin: center;
}

.a3-gear {
    rotate: calc(var(--t) * 420deg);
    transform-box: fill-box;
    transform-origin: center;
}

.a3-crowd,
.a4-crowd {
    translate: 0 calc(var(--t) * -10px);
}

.a4-spot {
    opacity: calc(0.1 + var(--t) * 0.25);
}

.a4-dot {
    --p: clamp(0, calc(var(--t) * 5.6 - var(--i)), 1);
    opacity: calc(0.3 + var(--p) * 0.7);
    scale: calc(0.9 + var(--p) * 0.25);
    transform-box: fill-box;
    transform-origin: center;
}

.a4-line {
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - clamp(0, calc(var(--t) * 1.3), 1));
}

.a4-coin {
    opacity: clamp(0, calc((var(--t) - 0.7) * 6), 1);
}

.a5-s1 {
    opacity: clamp(0, calc((0.48 - var(--t)) * 20), 1);
}

.a5-s2 {
    opacity: clamp(0, calc((var(--t) - 0.52) * 20), 1);
}

.a5-bubble {
    --p: clamp(0, calc((var(--t) - var(--dl)) * 5), 1);
    opacity: var(--p);
    scale: calc(0.5 + var(--p) * 0.5);
    transform-box: fill-box;
    transform-origin: bottom center;
}

.a6-beam1 {
    rotate: calc((var(--t) - 0.5) * 34deg);
    transform-origin: 300px 0;
    transform-box: view-box;
}

.a6-beam2 {
    rotate: calc((var(--t) - 0.5) * -34deg);
    transform-origin: 300px 0;
    transform-box: view-box;
}

.a6-trophy {
    opacity: clamp(0, calc(var(--t) * 7), 1);
    translate: 0 calc((1 - clamp(0, calc(var(--t) * 2), 1)) * 110px);
}

.a6-star {
    --p: clamp(0, calc((var(--t) - 0.18 - var(--i) * 0.13) * 6), 1);
    opacity: var(--p);
    scale: calc(0.3 + var(--p) * 0.7);
    transform-box: fill-box;
    transform-origin: center;
}

.a6-conf {
    translate: 0 calc(var(--t) * var(--v) * 1px);
    rotate: calc(var(--t) * var(--r) * 1deg);
    transform-box: fill-box;
    transform-origin: center;
}

.a7-l {
    translate: calc(clamp(0, calc(var(--t) * 1.8 - 0.1), 1) * 140px - 70px) 0;
}

.a7-r {
    translate: calc((1 - clamp(0, calc(var(--t) * 1.8 - 0.1), 1)) * 30px) 0;
}

.a7-spark {
    opacity: clamp(0, calc((var(--t) - 0.55) * 6), 1);
}

/* Lapisan debu: titik kecil di kedalaman berbeda */

.sc-dust {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--s) * 1px);
    height: calc(var(--s) * 1px);
    border-radius: 50%;
    background: var(--tint);
    filter: brightness(1.3);
    translate: calc(var(--t) * var(--d) * -0.35px)
        calc(var(--t) * var(--d) * -1px);
    pointer-events: none;
}

.sc-art svg {
    scale: calc(0.93 + var(--t) * 0.09);
}

.sc-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: calc(var(--t) * 100%);
    background: var(--y);
    opacity: 0.9;
    z-index: 2;
}

.sc-beats {
    margin-top: clamp(0.8rem, 2.4vh, 1.5rem);
    display: grid;
    gap: 0.5rem;
    max-width: 34ch;
}

.sc-beats li {
    --p: clamp(0, calc((var(--t) - 0.12 - var(--k) * 0.16) * 7), 1);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
    opacity: var(--p);
    translate: calc((1 - var(--p)) * -24px) 0;
}

.sc-beats li::before {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--y);
}

.sc-chap.lt .sc-beats li::before {
    background: var(--a);
}

.sc-rail,
.sc-rail li {
    list-style: none;
    margin-block: 0;
}

.sc-rail li::marker {
    content: "";
}

.sc-rail {
    position: fixed;
    z-index: 15;
    right: 12px;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    gap: 4px;
    padding: 8px 5px;
    border-radius: 999px;
    background: rgba(9, 27, 51, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.sc-rail[data-show="1"] {
    opacity: 1;
    pointer-events: auto;
}

.sc-rail a {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}

.sc-rail a span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition:
        transform 0.2s,
        background 0.2s;
}

.sc-rail li.on a span {
    background: var(--y, #f5b301);
    transform: scale(1.6);
}

.sc-rail li.on a span {
    background: #f5b301;
}

@media (max-width: 768px) {
    .sc-rail {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    section.sc-chap {
        height: auto;
    }

    .sc-beats li {
        opacity: 1 !important;
    }

    .sc-rail {
        display: none;
    }

    .sc-stage {
        position: relative;
        height: auto;
        min-height: calc(100svh - var(--nav));
    }

    .sc-text,
    .sc-orb,
    .sc-dust,
    .sc-beats li,
    .sc-num,
    .sc-art,
    .sc-art * {
        translate: none !important;
        rotate: none !important;
        scale: none !important;
    }
}

/* Language Switcher di Navbar */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 0.75rem;
}

.lang-switch-telu {
    display: inline-flex;

    align-items: center;

    gap: 2px;

    background: rgba(0, 0, 0, 0.18);

    border-radius: 999px;

    padding: 3px;

    flex-shrink: 0;
}

.lang-switch-telu a {
    display: inline-block;

    padding: 5px 12px;

    border-radius: 999px;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.5px;

    color: rgba(255, 255, 255, 0.8) !important;

    text-decoration: none !important;

    transition: all 0.2s ease;

    line-height: 1.2;
}

.lang-switch-telu a.active {
    background: #fff;

    color: #d4182c !important;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.lang-switch-telu a:hover:not(.active) {
    color: #fff !important;

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

/* ==========================================================================







   MOBILE & TABLET RESPONSIVE SYSTEM (FOR NAVBAR, HERO, AND SCROLL FLOW)







   ========================================================================== */

@media (max-width: 899px) {
    :root {
        --nav-h: 60px;
    }

    /* Pacing & penyelarasan scrollytelling: Konten persis di tengah vertikal & proporsional */

    section.sc-chap {
        height: 200vh !important;
    }

    .sc-stage {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        height: calc(100vh - var(--nav-h, 60px)) !important;

        height: calc(100svh - var(--nav-h, 60px)) !important;

        padding-block: 0 !important;
    }

    .sc-grid {
        height: auto !important;

        max-height: calc(100% - 20px) !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: clamp(0.6rem, 2vh, 1.15rem) !important;

        width: min(480px, calc(100% - 2.5rem)) !important;

        margin: auto !important;

        padding: 0 !important;
    }

    .sc-art {
        order: 1 !important;

        width: 100% !important;

        max-height: 26vh !important;

        height: auto !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        flex-shrink: 0 !important;
    }

    .sc-art svg {
        max-height: 26vh !important;

        width: auto !important;

        max-width: 88% !important;

        display: block !important;
    }

    .sc-text {
        order: 2 !important;

        width: 100% !important;

        max-width: 100% !important;

        align-self: auto !important;

        text-align: left !important;

        translate: none !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
    }

    .sc-kicker {
        margin-bottom: 0.15rem !important;
    }

    .sc-text h2 {
        font-size: clamp(1.55rem, 5.2vw, 2.05rem) !important;

        line-height: 1.15 !important;

        margin: 0.2rem 0 0.4rem !important;
    }

    .sc-body {
        font-size: 0.92rem !important;

        line-height: 1.45 !important;

        margin-bottom: 0.45rem !important;
    }

    .sc-beats {
        margin-top: 0.35rem !important;

        gap: 0.35rem !important;

        max-width: 100% !important;
    }

    .sc-beats li {
        font-size: 0.88rem !important;
    }

    .sc-hint {
        margin-top: 0.5rem !important;
    }

    .nav {
        overflow-x: visible !important;
    }

    .nav .wrap {
        min-height: 60px !important;

        height: 60px !important;

        padding-inline: 1rem !important;

        flex-wrap: nowrap !important;

        gap: 0.5rem !important;
    }

    .nav-desktop-actions {
        display: none !important;
    }

    .nav-mobile-bar {
        display: flex !important;
    }

    .nav-toggle {
        display: flex !important;
    }

    .mobile-drawer-backdrop {
        display: block !important;
    }

    .mobile-drawer {
        display: flex !important;
    }

    .logos {
        gap: 0.5rem !important;
    }

    .logos img {
        height: 16px !important;
    }

    .lang-switch-mobile {
        padding: 2px 3px !important;
    }

    .lang-switch-mobile a {
        padding: 3px 8px !important;

        font-size: 0.78rem !important;

        font-weight: 700 !important;
    }
}

@media (max-width: 640px) {
    .logos .set {
        display: none !important;
    }

    .logos .by {
        display: none !important;
    }

    .brand {
        font-size: 1.08rem !important;
    }

    .hero-wrap {
        padding-block: 1.4rem 1rem !important;

        width: calc(100% - 2rem) !important;
    }

    .hero-headline {
        font-size: clamp(1.95rem, 6.5vw, 2.45rem) !important;

        line-height: 1.15 !important;

        margin-bottom: 0.85rem !important;
    }

    .hero-desc {
        font-size: 0.95rem !important;

        line-height: 1.5 !important;

        margin-bottom: 1.25rem !important;
    }

    .hero-actions {
        gap: 0.65rem !important;
    }

    .hero-actions .btn {
        padding: 0.72rem 1.15rem !important;

        font-size: 0.9rem !important;
    }

    .fact {
        padding: 0.85rem 0 !important;
    }

    .fact small {
        font-size: 0.8rem !important;
    }

    .fact strong {
        font-size: 1rem !important;
    }
}

/* Ensure no horizontal bleed in scrollytelling */

section.sc-chap {
    overflow-x: clip !important;
}

.sc-stage {
    overflow: hidden !important;
}

/* ==========================================================================
   TELUNOVATION SHOWCASE & DIRECTORY STYLES (STARTUP & UMKM) - V3 REFINED
   Mood Board Editorial Design System (#FFFFFF, #EC1D2F, #2F39F1, #0E2E54)
   Zero AI-Slop, Zero Emojis, High-End Dropdown Filter & Active Chips
   ========================================================================== */

/* 1. Global Reset & Body for Showcase */
.showcase-body {
    background-color: #F8FAFC;
    color: #0E2E54;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

body.modal-open {
    /* Kept clean without breaking position:sticky on scrollytelling container */
    user-select: none;
}

/* 2. Sticky Navbar */
.showcase-nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #EC1D2F;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.showcase-nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.showcase-nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-showcase-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.25s ease;
}

.btn-showcase-back:hover {
    background: #FFFFFF;
    color: #EC1D2F;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-showcase-back .back-text-mobile {
    display: none;
}

/* 3. Hero Section (Crisp #FFFFFF Canvas with Wave Arcs) */
.showcase-hero {
    position: relative;
    background: #FFFFFF;
    padding: 4.5rem 0 3.5rem;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid #E2E8F0;
}

.showcase-hero-waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-waves-svg {
    width: 100%;
    height: 100%;
}

.showcase-hero-content {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
}

/* Editorial Eyebrow (Clean, authoritative, no AI slop bubble) */
.showcase-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 1rem;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
}

.showcase-hero-eyebrow .eyebrow-brand {
    color: #EC1D2F;
    font-weight: 900;
}

.showcase-hero-eyebrow .eyebrow-sep {
    color: #CBD5E1;
}

.showcase-hero-eyebrow .eyebrow-label {
    color: #0E2E54;
    letter-spacing: 0.08em;
}

.showcase-hero-title {
    font-size: clamp(2.3rem, 5vw, 3.8rem);
    font-weight: 900;
    color: #0E2E54;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.showcase-hero-title .accent-red {
    color: #EC1D2F;
}

.showcase-hero-title .accent-blue {
    color: #2F39F1;
}

.showcase-hero-subtitle {
    font-size: 1.12rem;
    color: #475569;
    max-width: 680px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

/* Stat Cards (Sleek Minimalist SVG Vector Icons, ZERO Emojis) */
.showcase-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 840px;
    margin: 0 auto;
}

.showcase-stat-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    box-shadow: 0 4px 16px rgba(14, 46, 84, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.showcase-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5px;
}

.showcase-stat-card.stat-blue::before { background: #2F39F1; }
.showcase-stat-card.stat-red::before { background: #EC1D2F; }
.showcase-stat-card.stat-navy::before { background: #0E2E54; }

.showcase-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(14, 46, 84, 0.08);
}

.stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.showcase-stat-card:hover .stat-icon-wrap {
    transform: scale(1.08);
}

.stat-icon-wrap.icon-blue {
    background: rgba(47, 57, 241, 0.08);
    color: #2F39F1;
}

.stat-icon-wrap.icon-red {
    background: rgba(236, 29, 47, 0.08);
    color: #EC1D2F;
}

.stat-icon-wrap.icon-navy {
    background: rgba(14, 46, 84, 0.08);
    color: #0E2E54;
}

.showcase-stat-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    box-shadow: 0 4px 16px rgba(14, 46, 84, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 96px;
}

.stat-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
}

.stat-number {
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    min-width: 2.2ch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-blue .stat-number { color: #2F39F1; }
.stat-red .stat-number { color: #EC1D2F; }
.stat-navy .stat-number { color: #0E2E54; }

.stat-meta {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0E2E54;
    line-height: 1.25;
}

.stat-desc {
    font-size: 0.76rem;
    color: #64748B;
    line-height: 1.35;
}

/* 4. Directory Main & High-End Control Bar */
.showcase-main {
    padding: 2.5rem 0 4.5rem;
}

.showcase-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.showcase-search-box-wrap {
    flex: 1;
    max-width: 420px;
}

.showcase-secondary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #EDF2F7;
    flex-wrap: wrap;
}

.secondary-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Segmented Tabs (Clean, professional, count pill, zero emojis) */
.showcase-tabs {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 4px;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(14, 46, 84, 0.03);
}

.tab-label-short {
    display: none !important;
}

.showcase-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.15rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.showcase-tab:hover {
    color: #0E2E54;
}

.showcase-tab.is-active {
    background: #2F39F1;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(47, 57, 241, 0.25);
}

.showcase-tab[data-filter="umkm"].is-active {
    background: #EC1D2F;
    box-shadow: 0 4px 12px rgba(236, 29, 47, 0.25);
}

.tab-count {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 9999px;
}

.showcase-tab.is-active .tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* Filter Tools (Sektor Dropdown + Search Input) */
.showcase-filter-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 580px;
    justify-content: flex-end;
}

/* Sektor Dropdown (Vastly superior UX) */
.sector-select-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 9999px;
    padding: 0 0.85rem;
    height: 42px;
    box-shadow: 0 2px 8px rgba(14, 46, 84, 0.03);
    transition: all 0.25s ease;
    min-width: 210px;
}

.sector-select-box:focus-within,
.sector-select-box:hover {
    border-color: #2F39F1;
    box-shadow: 0 0 0 3px rgba(47, 57, 241, 0.12);
}

.select-prefix-icon {
    color: #2F39F1;
    margin-right: 0.45rem;
    flex-shrink: 0;
}

.sector-dropdown {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.86rem;
    font-weight: 600;
    color: #0E2E54;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25rem;
}

.select-chevron-icon {
    position: absolute;
    right: 0.85rem;
    color: #64748B;
    pointer-events: none;
    flex-shrink: 0;
}

/* Search Box */
.search-input-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 9999px;
    padding: 0 0.95rem;
    height: 42px;
    box-shadow: 0 2px 8px rgba(14, 46, 84, 0.03);
    transition: all 0.25s ease;
    flex: 1;
    min-width: 220px;
}

.search-input-box:focus-within {
    border-color: #2F39F1;
    box-shadow: 0 0 0 3px rgba(47, 57, 241, 0.12);
}

.search-box-icon {
    color: #94A3B8;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.search-input-field {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.88rem;
    color: #0E2E54;
    font-family: inherit;
}

.search-input-field::placeholder {
    color: #94A3B8;
}

.search-clear-btn {
    background: #E2E8F0;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: #475569;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.4rem;
}

.search-clear-btn:hover {
    background: #CBD5E1;
    color: #0E2E54;
}

/* Active Chips & Counter Bar */
.showcase-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #EDF2F7;
    flex-wrap: wrap;
}

.showcase-results-counter {
    font-size: 0.88rem;
    color: #64748B;
}

.counter-num {
    color: #0E2E54;
    font-weight: 800;
}

.active-chips-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.active-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(47, 57, 241, 0.08);
    border: 1px solid rgba(47, 57, 241, 0.2);
    color: #2F39F1;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
}

.chip-remove-btn {
    background: none;
    border: none;
    color: #2F39F1;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.chip-remove-btn:hover {
    opacity: 1;
}

.btn-clear-all-chips {
    background: none;
    border: none;
    color: #EC1D2F;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0 0.25rem;
}

.btn-clear-all-chips:hover {
    color: #C81525;
}

/* 5. Directory Cards Grid (Clean Editorial Style, ZERO Emojis) */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.showcase-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(14, 46, 84, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.showcase-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-color, #2F39F1);
    box-shadow: 0 16px 32px -4px rgba(14, 46, 84, 0.12), 0 0 0 1.5px var(--accent-color, #2F39F1);
}

.showcase-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* Category Pill Badges (Editorial Minimalist, ZERO Emojis) */
.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.32rem 0.68rem;
    border-radius: 7px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.badge-glyph {
    flex-shrink: 0;
}

.badge-startup {
    background: rgba(47, 57, 241, 0.08);
    color: #2F39F1;
    border: 1px solid rgba(47, 57, 241, 0.22);
    box-shadow: 0 1px 3px rgba(47, 57, 241, 0.04);
}

.showcase-card:hover .badge-startup {
    background: #2F39F1;
    color: #FFFFFF;
    border-color: #2F39F1;
    box-shadow: 0 4px 12px rgba(47, 57, 241, 0.25);
}

.badge-umkm {
    background: rgba(236, 29, 47, 0.08);
    color: #EC1D2F;
    border: 1px solid rgba(236, 29, 47, 0.22);
    box-shadow: 0 1px 3px rgba(236, 29, 47, 0.04);
}

.showcase-card:hover .badge-umkm {
    background: #EC1D2F;
    color: #FFFFFF;
    border-color: #EC1D2F;
    box-shadow: 0 4px 12px rgba(236, 29, 47, 0.25);
}

.card-number {
    font-size: 0.74rem;
    font-weight: 800;
    color: #64748B;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 0.25rem 0.55rem;
    border-radius: 7px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Dedicated Brand Logo Stage */
.card-logo-stage {
    width: 100%;
    height: 110px;
    background: #F8FAFC;
    border: 1px solid #EEF2F6;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    position: relative;
    margin-bottom: 1.15rem;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.showcase-card:hover .card-logo-stage {
    background: #F1F5F9;
    border-color: #E2E8F0;
}

.card-brand-logo {
    max-width: 100%;
    max-height: 85px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(14, 46, 84, 0.06));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-card:hover .card-brand-logo {
    transform: scale(1.06);
}

/* Card Body */
.showcase-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    font-size: 1.22rem;
    font-weight: 800;
    color: #0E2E54;
    margin: 0 0 0.45rem;
    line-height: 1.28;
    cursor: pointer;
    transition: color 0.2s ease;
    letter-spacing: -0.01em;
}

.showcase-card:hover .card-title {
    color: var(--accent-color, #2F39F1);
}

.card-sector-tag {
    display: inline-flex;
    align-items: center;
    background: #F1F5F9;
    color: #0E2E54;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    width: fit-content;
    margin-bottom: 0.75rem;
}

.card-desc-snippet {
    color: #64748B;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    flex-grow: 1;
}

/* Card Footer: Action Button Only */
.showcase-card-footer {
    padding-top: 0.75rem;
    border-top: 1px solid #F1F5F9;
    margin-top: auto;
}

.btn-card-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.72rem 1.1rem;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #0E2E54;
    font-weight: 700;
    font-size: 0.88rem;
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-card-detail:hover {
    background: var(--accent-color, #2F39F1);
    color: #FFFFFF;
    border-color: var(--accent-color, #2F39F1);
    box-shadow: 0 4px 14px rgba(47, 57, 241, 0.25);
    transform: translateY(-1px);
}

.btn-card-detail svg {
    transition: transform 0.25s ease;
}

.btn-card-detail:hover svg {
    transform: translateX(3px);
}

/* 6. Empty State */
.showcase-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    background: #FFFFFF;
    border: 1px dashed #CBD5E1;
    border-radius: 20px;
    max-width: 580px;
    margin: 2rem auto;
}

.empty-icon-wrap {
    width: 64px;
    height: 64px;
    background: #F1F5F9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: #94A3B8;
}

.empty-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0E2E54;
    margin-bottom: 0.5rem;
}

.empty-hint {
    color: #64748B;
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}

.btn-reset-filters {
    background: #0E2E54;
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset-filters:hover {
    background: #2F39F1;
}

/* 7. Interactive Detail Modal (Zero Emojis, Authentic Design) */
.showcase-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 46, 84, 0.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    touch-action: none;
}

.modal-window {
    position: relative;
    background: #FFFFFF;
    border-radius: 24px;
    max-width: 660px;
    width: 92%;
    max-height: 88vh;
    box-shadow: 0 25px 60px -15px rgba(14, 46, 84, 0.35);
    border: 1px solid rgba(226, 232, 240, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    transform: scale(0.95) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-modal.is-open .modal-window {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #F1F5F9;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #E2E8F0;
    color: #EC1D2F;
}

.modal-header {
    padding: 2rem 2rem 1.25rem;
    border-bottom: 1px solid #F1F5F9;
    background: #FFFFFF;
}

.modal-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.modal-sector-pill {
    background: #F1F5F9;
    color: #0E2E54;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
}

.modal-logo-stage {
    width: 100%;
    height: 120px;
    background: #F8FAFC;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    margin-bottom: 1.25rem;
}

.modal-logo-img {
    max-width: 100%;
    max-height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(14, 46, 84, 0.08));
}

.modal-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0E2E54;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.modal-scroll-body {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex-grow: 1;
}

.modal-section-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
}

.modal-desc-content {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

/* Pitch Deck Section with Google Drive Button */
.modal-deck-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #F1F5F9;
}

.modal-deck-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.deck-file-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.deck-file-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0E2E54;
    word-break: break-all;
}

.btn-deck-drive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #EC1D2F;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(236, 29, 47, 0.25);
    width: fit-content;
}

.btn-deck-drive:hover {
    background: #C81525;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(236, 29, 47, 0.35);
}

.modal-footer {
    padding: 1rem 2rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: flex-end;
    background: #FFFFFF;
}

.btn-modal-dismiss {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #475569;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-dismiss:hover {
    background: #E2E8F0;
    color: #0E2E54;
}

/* 8. Showcase Footer */
.showcase-footer {
    background: #0E2E54;
    color: #FFFFFF;
    padding: 2.5rem 0;
    margin-top: 4rem;
}

.showcase-footer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-brand {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.footer-desc {
    color: #94A3B8;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.footer-link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.footer-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* 9. Responsive Adjustments */
@media (max-width: 1024px) {
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .showcase-control-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .showcase-filter-tools {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .showcase-nav .wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .showcase-nav .logos .set {
        display: none !important;
    }

    .btn-showcase-back .back-text-full {
        display: none;
    }

    .btn-showcase-back .back-text-mobile {
        display: inline;
    }

    .showcase-hero {
        padding: 2.75rem 1rem 2rem;
    }

    .showcase-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .showcase-control-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .showcase-search-box-wrap {
        width: 100%;
        max-width: 100%;
    }

    .showcase-secondary-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .secondary-left {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .sector-select-box {
        width: 100%;
        min-width: 100%;
    }

    .showcase-results-counter {
        text-align: left;
    }

    .showcase-tabs {
        width: 100%;
        display: flex;
    }

    .showcase-tab {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.25rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .tab-label-full {
        display: none !important;
    }

    .tab-label-short {
        display: inline !important;
    }

    .showcase-filter-tools {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .sector-select-box,
    .search-input-box {
        width: 100%;
        min-width: 100%;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .modal-window {
        max-height: 92vh;
        border-radius: 20px;
    }

    .modal-header {
        padding: 1.5rem 1.25rem 1rem;
    }

    .modal-scroll-body {
        padding: 1.25rem;
    }

    .modal-footer {
        padding: 0.85rem 1.25rem;
    }

    .btn-deck-drive {
        width: 100%;
    }

    .showcase-footer-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
}


/* ==========================================================================
   REGISTRATION SCROLLYTELLING ANIMATION & MODAL COMPONENT
   ========================================================================== */

/* 1. Registration Scrollytelling Parallax Animation (scene === 'register') */
.a0-tablet {
    translate: 0 calc(clamp(0, calc(var(--t) * 1.2), 1) * 15px);
    transform-box: fill-box;
    transform-origin: center;
}

.a0-pen {
    translate: calc(var(--t) * 35px) calc(var(--t) * 65px);
    transform-box: fill-box;
    transform-origin: center;
    transition: translate 0.1s linear;
}

.a0-check {
    --p: clamp(0, calc((var(--t) - 0.08 - var(--i) * 0.12) * 8), 1);
    opacity: var(--p);
    scale: calc(0.3 + var(--p) * 0.7);
    transform-box: fill-box;
    transform-origin: center;
}

.a0-pass {
    translate: 0 calc(clamp(0, calc(var(--t) * 1.4), 1) * 18px);
    rotate: calc((1 - var(--t)) * -3deg);
    transform-box: fill-box;
    transform-origin: top center;
}

.a0-stamp {
    --s: clamp(0, calc((var(--t) - 0.48) * 5), 1);
    opacity: var(--s);
    scale: calc(2.2 - var(--s) * 1.2);
    rotate: calc(-12deg + var(--s) * 4deg);
    transform-box: fill-box;
    transform-origin: center;
}

.a0-burst {
    opacity: clamp(0, calc((var(--t) - 0.65) * 5), 1);
    scale: calc(0.5 + clamp(0, calc((var(--t) - 0.65) * 5), 1) * 0.5);
    transform-box: fill-box;
    transform-origin: center;
}

/* 2. Registration Modal Dialog */
.register-modal .modal-window {
    max-width: 660px;
    width: 92%;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 25px 60px rgba(14, 46, 84, 0.22);
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.reg-modal-header {
    padding: 2rem 2rem 1.25rem;
    border-bottom: 1px solid #EDF2F7;
    text-align: left;
}

.reg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #EC1D2F;
    margin-bottom: 0.5rem;
}

.reg-eyebrow .eyebrow-sep {
    color: #CBD5E1;
}

.reg-eyebrow .eyebrow-label {
    color: #0E2E54;
}

.reg-modal-title {
    font-size: 1.55rem;
    font-weight: 900;
    color: #0E2E54;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.reg-modal-subtitle {
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.45;
    margin: 0;
}

.reg-form-body {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reg-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.reg-section-label {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0E2E54;
    line-height: 1.3;
}

.reg-section-hint {
    font-size: 0.8rem;
    color: #64748B;
    margin-top: -0.3rem;
}

.required-star {
    color: #EC1D2F;
}

.optional-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94A3B8;
}

/* 3. Category Radio Cards (4 Cards Grid) */
.reg-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.category-radio-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.category-radio-card input {
    display: none;
}

.category-radio-box {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    margin-top: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.category-radio-box::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EC1D2F;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.category-radio-card.is-active {
    border-color: #EC1D2F;
    background: rgba(236, 29, 47, 0.03);
    box-shadow: 0 2px 8px rgba(236, 29, 47, 0.08);
}

.category-radio-card.is-active .category-radio-box {
    border-color: #EC1D2F;
}

.category-radio-card.is-active .category-radio-box::after {
    opacity: 1;
    transform: scale(1);
}

.category-info {
    display: flex;
    flex-direction: column;
}

.category-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0E2E54;
    line-height: 1.2;
}

.category-desc {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.3;
    margin-top: 2px;
}

/* 4. Form Fields & Inputs */
.reg-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.reg-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.reg-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0E2E54;
}

.reg-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    font-family: inherit;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    color: #0E2E54;
    outline: none;
    transition: all 0.2s ease;
}

.reg-input:focus {
    background: #FFFFFF;
    border-color: #EC1D2F;
    box-shadow: 0 0 0 3px rgba(236, 29, 47, 0.12);
}

/* 5. Session Checkboxes List */
.reg-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reg-session-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reg-session-item input {
    display: none;
}

.reg-checkbox-custom {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.reg-checkbox-custom::after {
    content: "✓";
    font-size: 13px;
    font-weight: 900;
    color: #FFFFFF;
    display: none;
}

.reg-session-item:has(input:checked) {
    border-color: #2F39F1;
    background: rgba(47, 57, 241, 0.03);
}

.reg-session-item:has(input:checked) .reg-checkbox-custom {
    background: #2F39F1;
    border-color: #2F39F1;
}

.reg-session-item:has(input:checked) .reg-checkbox-custom::after {
    display: block;
}

.session-info {
    display: flex;
    flex-direction: column;
}

.session-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0E2E54;
}

.session-time {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 1px;
}

/* 6. Survey Options */
.reg-survey-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reg-survey-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    cursor: pointer;
    font-size: 0.85rem;
    color: #0E2E54;
    transition: all 0.2s ease;
}

.reg-survey-card input {
    display: none;
}

.survey-radio-box {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.survey-radio-box::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0E2E54;
    display: none;
}

.reg-survey-card:has(input:checked) {
    border-color: #0E2E54;
    background: #FFFFFF;
}

.reg-survey-card:has(input:checked) .survey-radio-box {
    border-color: #0E2E54;
}

.reg-survey-card:has(input:checked) .survey-radio-box::after {
    display: block;
}

.survey-other-input-wrap {
    margin-top: 0.35rem;
    padding-left: 1.5rem;
}

/* 7. Footer & Actions */
.reg-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #EDF2F7;
}

.btn-submit-registration {
    width: 100%;
    padding: 0.95rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #FFFFFF;
    background: #EC1D2F;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(236, 29, 47, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
}

.btn-submit-registration:hover:not(:disabled) {
    background: #D4182C;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 29, 47, 0.35);
}

.btn-submit-registration:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.spin-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.reg-privacy-note {
    font-size: 0.76rem;
    color: #94A3B8;
    text-align: center;
    margin: 0;
}

.reg-error-alert {
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
}

/* 8. Success Confirmation Card - Perfectly Centered & Balanced */
.reg-success-card {
    padding: 2.75rem 2rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.success-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    flex-shrink: 0;
}

.success-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #0E2E54;
    line-height: 1.25;
    text-align: center;
    margin: 0 0 0.5rem;
    width: 100%;
}

.success-message {
    font-size: 0.9rem;
    color: #64748B;
    line-height: 1.5;
    max-width: 460px;
    text-align: center;
    margin: 0 auto 1.5rem;
    width: 100%;
}

.success-message strong {
    color: #0E2E54;
}

.success-summary-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.15rem 1.35rem;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0 auto 1.75rem;
    text-align: left;
    box-shadow: 0 4px 16px rgba(14, 46, 84, 0.04);
    box-sizing: border-box;
}

.summary-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.55rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px dashed #CBD5E1;
}

.summary-box-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #64748B;
}

.summary-status-pill {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #059669;
    background: #ECFDF5;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    border: 1px solid #A7F3D0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.84rem;
}

.summary-label {
    color: #64748B;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.summary-val {
    color: #0E2E54;
    font-weight: 700;
    text-align: right;
    line-height: 1.35;
}

.success-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.btn-success-done {
    padding: 0.85rem 2.25rem;
    font-size: 0.92rem;
    font-weight: 800;
    border-radius: 12px;
    background: #EC1D2F;
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 16px rgba(236, 29, 47, 0.28);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-success-done:hover {
    background: #D4182C;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 29, 47, 0.35);
}

/* Mobile responsive for Registration Modal - Sleek & Compact */
@media (max-width: 640px) {
    .showcase-modal {
        padding: 0.75rem;
    }

    .register-modal .modal-window {
        width: 96%;
        max-height: 88vh;
        border-radius: 20px;
    }

    .reg-modal-header {
        padding: 1.15rem 1.15rem 0.75rem;
    }

    .modal-close-btn {
        top: 0.85rem;
        right: 0.85rem;
        width: 32px;
        height: 32px;
    }

    .reg-eyebrow {
        font-size: 0.68rem;
        margin-bottom: 0.35rem;
    }

    .reg-modal-title {
        font-size: 1.22rem;
        margin-bottom: 0.3rem;
    }

    .reg-modal-subtitle {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .reg-form-body {
        padding: 0.95rem 1.15rem 1.15rem;
        gap: 1.15rem;
    }

    .reg-form-section {
        gap: 0.5rem;
    }

    .reg-section-label {
        font-size: 0.84rem;
    }

    /* 2x2 compact chips for category on mobile */
    .reg-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .category-radio-card {
        padding: 0.55rem 0.65rem;
        gap: 0.5rem;
        border-radius: 10px;
        align-items: center;
    }

    .category-radio-box {
        width: 15px;
        height: 15px;
        margin-top: 0;
    }

    .category-radio-box::after {
        width: 7px;
        height: 7px;
    }

    .category-title {
        font-size: 0.8rem;
        line-height: 1.15;
    }

    .category-desc {
        display: none; /* Hide long subtitle on mobile to keep card ultra-compact */
    }

    .reg-fields-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .reg-field-group {
        gap: 0.25rem;
    }

    .reg-label {
        font-size: 0.78rem;
    }

    .reg-input {
        padding: 0.55rem 0.75rem;
        font-size: 0.84rem;
        border-radius: 8px;
    }

    .reg-sessions-list {
        gap: 0.45rem;
    }

    .reg-session-item {
        padding: 0.55rem 0.75rem;
        gap: 0.65rem;
        border-radius: 10px;
    }

    .reg-checkbox-custom {
        width: 17px;
        height: 17px;
        border-radius: 5px;
    }

    .session-name {
        font-size: 0.8rem;
    }

    .session-time {
        font-size: 0.7rem;
    }

    .reg-survey-options {
        gap: 0.4rem;
    }

    .reg-survey-card {
        padding: 0.5rem 0.7rem;
        font-size: 0.78rem;
        border-radius: 8px;
    }

    .btn-submit-registration {
        padding: 0.78rem 1.25rem;
        font-size: 0.88rem;
        border-radius: 10px;
    }

    .reg-privacy-note {
        font-size: 0.72rem;
    }

    .reg-success-card {
        padding: 2rem 1.25rem;
    }

    .success-icon-wrap {
        width: 64px;
        height: 64px;
        margin-bottom: 1rem;
    }

    .success-title {
        font-size: 1.25rem;
    }

    .success-message {
        font-size: 0.84rem;
        margin-bottom: 1.25rem;
    }

    .success-summary-box {
        padding: 1rem 1.15rem;
        gap: 0.6rem;
        margin-bottom: 1.5rem;
    }

    .summary-row {
        font-size: 0.78rem;
    }
}

.drawer-nav-item-cta {
    background: linear-gradient(135deg, rgba(236, 29, 47, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border: 1px solid rgba(236, 29, 47, 0.45) !important;
}

.drawer-icon-cta {
    background: #EC1D2F !important;
    border-color: #EC1D2F !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(236, 29, 47, 0.35);
}


/* ===== Mobile drawer: tema putih (seragam dengan landing) ===== */
.mobile-drawer { background: #ffffff; color: #0e2e54; box-shadow: -12px 0 40px rgba(14, 46, 84, 0.18); }
.drawer-header { border-bottom: 1px solid rgba(14, 46, 84, 0.1); background: #ffffff; }
.drawer-title { color: #0e2e54; }
.drawer-sub { color: rgba(14, 46, 84, 0.6); }
.drawer-close { background: rgba(14, 46, 84, 0.06); border: 1px solid rgba(14, 46, 84, 0.14); color: #0e2e54; }
.drawer-close:hover { background: rgba(14, 46, 84, 0.12); }
.drawer-nav-item, .drawer-nav-list .drawer-nav-item { color: #0e2e54 !important; background: #f6f8fb !important; border: 1px solid rgba(14, 46, 84, 0.08) !important; }
.drawer-nav-item:hover, .drawer-nav-item:active { background: rgba(236, 29, 47, 0.08) !important; border-color: rgba(236, 29, 47, 0.4) !important; }
.drawer-item-title { color: #0e2e54 !important; }
.drawer-item-sub { color: rgba(14, 46, 84, 0.6) !important; }
.drawer-item-icon { background: rgba(236, 29, 47, 0.1) !important; border: 1px solid rgba(236, 29, 47, 0.22) !important; color: #ec1d2f !important; }
.drawer-arrow { color: rgba(14, 46, 84, 0.35) !important; }
.drawer-nav-item-cta { background: linear-gradient(135deg, rgba(236, 29, 47, 0.12) 0%, #ffffff 100%) !important; border: 1px solid rgba(236, 29, 47, 0.45) !important; }
.drawer-footer { border-top: 1px solid rgba(14, 46, 84, 0.1); background: #f6f8fb; }
.partner-label { color: rgba(14, 46, 84, 0.55); }
.partner-logos-row img { opacity: 1; }
.mobile-drawer-backdrop { background: rgba(14, 46, 84, 0.35); }


/* ===== Kartu agenda: gambar langsung, tanpa kotak di belakang ===== */
.pillar-card,
.pillar-card.card-light,
.pillar-card.card-dark {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    grid-template-columns: 150px 1fr !important;
    gap: 0.9rem !important;
    padding: 0 !important;
    min-height: 0 !important;
    align-items: center !important;
    color: #0e2e54;
}
.pillar-card:hover { box-shadow: none !important; }
.pillar-card .pillar-card-visual {
    width: 150px !important;
    height: auto !important;
    justify-content: flex-start !important;
}
.pillar-vector-img.pillar-card-img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(14, 46, 84, 0.22);
}
.pillar-card .pillar-title {
    position: absolute !important;
    width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pillar-card .pillar-desc,
.pillar-card.card-dark .pillar-desc,
.pillar-card.card-light .pillar-desc {
    color: rgba(14, 46, 84, 0.88) !important;
}
.pillar-card .pillar-card-content { height: auto; justify-content: center; }
.pillar-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ec1d2f;
    text-decoration: none;
    pointer-events: auto;
}
.pillar-more-btn:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .pillar-card,
    .pillar-card.card-light,
    .pillar-card.card-dark { grid-template-columns: 132px 1fr !important; padding: 0 !important; }
    .pillar-card .pillar-card-visual,
    .pillar-vector-img.pillar-card-img { width: 132px !important; max-width: 132px !important; }
}

.pillar-card .pillar-card-visual { grid-column: 1; grid-row: 1; }
.pillar-card .pillar-card-content { grid-column: 2; grid-row: 1; }


/* ===== Header hero ala poster: terpusat, wordmark besar + tagline italic ===== */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: clamp(0.5rem, 3vh, 2.5rem);
}
.hero-brand {
    --bh: clamp(34px, 5.6vw, 88px);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: calc(var(--bh) * 0.28);
    margin-bottom: clamp(1.2rem, 4vh, 3rem);
}
.hero-brand-img {
    height: var(--bh);
    width: auto;
    max-width: none;
    align-self: auto;
}
.hero-brand-year {
    font-size: calc(var(--bh) * 1.12);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.9;
    color: #161616;
    animation: hlBrandIn 0.9s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-headline {
    font-size: clamp(1.6rem, 3.5vw, 3.3rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: none;
    margin-inline: auto;
}
.hero-headline .hl-bold { font-weight: 800; }
.hero-headline .hl-light { font-weight: 400; }
.hero-desc { margin-inline: auto; }
.hero .cta { justify-content: center; }
@media (max-width: 640px) {
    .hero-brand { --bh: 6.6vw; }
    .hero-headline {
        font-size: clamp(1.3rem, 6vw, 1.7rem) !important;
        line-height: 1.2 !important;
    }
}


/* ===== Penyesuaian: logo brand sudah memuat "2026", jarak lebih lega ===== */
.hero-brand-year { display: none; }
.hero-brand {
    display: block;
    margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem);
}
.hero-brand-img {
    height: auto !important;
    width: clamp(290px, 52vw, 780px);
    max-width: 100%;
    margin-inline: auto;
}
.hero-wrap { padding-block: clamp(2.2rem, 6vh, 4.5rem) clamp(2.5rem, 6vh, 4rem); }
.hero-poster-logos { margin-bottom: clamp(1.2rem, 3.5vh, 2.8rem); }
.hero-content { margin-top: clamp(1rem, 4vh, 3rem); }
.hero-headline { margin-bottom: clamp(1.4rem, 3.2vh, 2.2rem); }
.hero-desc { margin-bottom: clamp(1.8rem, 4.5vh, 2.8rem); }
.first .facts { margin-top: clamp(1.2rem, 4vh, 2.8rem); }
@media (max-width: 640px) {
    .hero-brand-img { width: min(100%, 360px); }
}

/* Warna tagline: navy brand #0e2e54 */
.hero-headline,
.hero-headline .hl-line,
.hero-headline .hl-bold,
.hero-headline .hl-light {
    color: #0e2e54 !important;
}

/* ===== Jarak: ruang putih di atas bar fakta dipendekkan, bar fakta diberi ruang napas ===== */
.first {
    min-height: 0 !important;
}
.first .hero {
    flex: 0 0 auto;
}
.hero-wrap {
    padding-block: clamp(2rem, 5vh, 3.5rem) clamp(0.9rem, 2vh, 1.5rem) !important;
}
.hero-desc {
    margin-bottom: clamp(1.4rem, 3vh, 2rem);
}
.first .facts {
    margin-top: 0 !important;
}
.facts .fact {
    padding-block: clamp(1.8rem, 3.6vh, 2.6rem);
}

/* ===== Animasi header: slide in ke kanan (dari kiri) bergantian ===== */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

.hero-poster-logos,
.hero-brand-img,
.hero-headline .hl-line,
.hero-desc,
.hero .cta {
    opacity: 0;
    animation: slideInRight 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.hero-poster-logos { animation-delay: 0s !important; }
.hero-brand-img { animation-delay: 0.15s !important; transform-origin: center; }
.hero-headline .hl-line { animation-delay: calc(0.4s + var(--i) * 0.18s) !important; }
.hero-desc { animation-delay: 0.8s !important; }
.hero .cta { animation-delay: 0.95s !important; }

@media (prefers-reduced-motion: reduce) {
    .hero-poster-logos,
    .hero-brand-img,
    .hero-headline .hl-line,
    .hero-desc,
    .hero .cta {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* ===== Hero setinggi satu layar penuh; bar fakta turun ke bawah (di luar layar pertama) ===== */
.first .hero {
    flex: 0 0 auto;
    min-height: calc(100vh - var(--nav-h, 76px));
    min-height: calc(100svh - var(--nav-h, 76px));
    align-items: center;
}


/* ===== Strip logo di tengah atas hero + header sedikit lebih besar ===== */
.hero-poster-logos {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: clamp(1rem, 2.4vw, 2.2rem) !important;
}
.poster-logos-left {
    justify-content: center;
}
.hero-brand-img {
    width: clamp(310px, 60vw, 900px);
}
.hero-headline {
    font-size: clamp(1.8rem, 4vw, 3.8rem);
}
@media (max-width: 640px) {
    .hero-brand-img { width: min(100%, 400px); }
    .hero-headline { font-size: clamp(1.45rem, 6.6vw, 1.9rem) !important; }
}

/* ===== Agenda Kegiatan: kartu ala poster (gambar di atas, teks & tombol di bawah) ===== */
.pillars-showcase {
    --pg: clamp(22px, 2.6vw, 36px);
    width: 100%;
    max-width: 1120px;
    gap: clamp(28px, 4vw, 48px) !important;
    align-items: stretch !important;
}
.pillars-row-top,
.pillars-row-bottom {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: var(--pg) !important;
    width: 100% !important;
    flex-wrap: wrap;
}
.pillar-card,
.pillar-card.card-light,
.pillar-card.card-dark {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.1rem !important;
    width: calc((100% - 2 * var(--pg)) / 3) !important;
    max-width: 360px !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    cursor: default;
}
.pillar-card .pillar-card-visual {
    order: -1;
    width: 100% !important;
    height: auto !important;
    justify-content: center !important;
    pointer-events: auto;
}
.pillar-vector-img.pillar-card-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(14, 46, 84, 0.2);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.pillar-card:hover {
    transform: none !important;
}
.pillar-card:hover .pillar-vector-img.pillar-card-img {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(14, 46, 84, 0.28);
}
.pillar-card .pillar-card-content {
    height: auto;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding-inline: 0.25rem;
}
.pillar-card .pillar-desc,
.pillar-card.card-dark .pillar-desc,
.pillar-card.card-light .pillar-desc {
    font-size: clamp(0.86rem, 0.95vw, 0.95rem) !important;
    line-height: 1.6 !important;
    color: rgba(14, 46, 84, 0.82) !important;
}
.pillar-more-btn {
    align-self: center;
    padding: 0.55rem 1.15rem;
    border: 1.5px solid #0e2e54;
    border-radius: 999px;
    font-size: 0.82rem;
    color: #0e2e54;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pillar-more-btn:hover {
    background: #0e2e54;
    color: #ffffff;
    text-decoration: none;
}
.pillar-more-btn svg { transition: transform 0.25s ease; }
.pillar-more-btn:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
    .pillars-row-top,
    .pillars-row-bottom { flex-direction: column; align-items: center !important; }
    .pillar-card,
    .pillar-card.card-light,
    .pillar-card.card-dark {
        width: 100% !important;
        max-width: 440px !important;
    }
    .pillar-card .pillar-card-visual,
    .pillar-vector-img.pillar-card-img { width: 100% !important; max-width: 100% !important; }
}

/* Jarak logo 35 Tahun dari tiga logo lainnya (hero) */
.hero-poster-logos .poster-logos-right {
    margin-left: clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 640px) {
    .hero-poster-logos .poster-logos-right { margin-left: 0; margin-top: 0.4rem; }
}

/* Agenda: kotak berwarna, teks kiri, ikon tone-on-tone kanan (ikon dipakai sebagai mask sehingga menyatu dengan warna kotak) */
.section-rangkaian.section-rangkaian-compact {
    /* tinggi disamakan dengan halaman bab (sc-stage) */
    min-height: calc(100vh - var(--nav-h, 76px));
    min-height: calc(100svh - var(--nav-h, 76px));
    padding-block: clamp(1.8rem, 4vh, 2.8rem);
    justify-content: center;
}
.section-rangkaian-compact .rangkaian-wrap { align-items: stretch; width: min(1040px, 100% - 3rem); }
.section-rangkaian-compact .rangkaian-header { margin: 0 0 1.1rem; max-width: none; }
.section-rangkaian-compact .rangkaian-header h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 0.2rem; }
.section-rangkaian-compact .rangkaian-header .intro { font-size: 0.9rem; }
.ag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.ag-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    transition: transform 0.15s;
}
.ag-card:hover { transform: translateY(-2px); }
.ag-card:last-child { grid-column: 1 / -1; }
.ag-card img { width: 100%; height: auto; display: block; }
.ag-card:last-child img { max-width: 50%; margin: 0 auto; }

/* Bab TEEM: teks lebih panjang, dipadatkan agar tombol tidak tenggelam di bawah layar */
#cerita-bazar .sc-text h2 { font-size: clamp(1.7rem, min(3.8vw, 6.2vh), 2.8rem); }
#cerita-bazar .sc-body { max-width: 54ch; font-size: clamp(0.92rem, 1.35vw, 1.05rem); margin-top: 0.6rem; }
#cerita-bazar .sc-beats { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; column-gap: 1.6rem; row-gap: 0.35rem; max-width: 54ch; margin-top: 0.8rem; }
#cerita-bazar .sc-beats li { font-size: 0.9rem; }
#cerita-bazar .sc-text .cta { margin-top: 1rem; }

/* Pop-up poster diskusi panel */
.poster-modal .poster-modal-window {
    width: auto;
    max-width: min(92vw, 640px);
    max-height: 92vh;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    align-items: center;
}
.poster-modal .poster-modal-window img {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 25px 60px -15px rgba(14, 46, 84, 0.5);
}
.poster-modal .modal-close-btn { top: -0.7rem; right: -0.7rem; background: #fff; box-shadow: 0 4px 12px rgba(14, 46, 84, 0.3); }

/* Bab diskusi panel: SVG + tombol "Lihat Poster" di tengah bawah SVG */
.sc-art .sc-panel-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    height: 100%;
    max-height: inherit;
    min-height: 0;
}
/* SVG mengikuti rasio viewBox & menyusut sesuai ruang (tombol ~3rem disisihkan) */
.sc-art .sc-panel-art svg {
    flex: 0 1 auto;
    min-height: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100% - 3.8rem);
}
.sc-art .sc-panel-art .sc-poster-btn { flex: none; }

@media (max-width: 859px) {
    /* mobile: .sc-art tingginya auto (maks 26vh), jadi beri ruang untuk SVG + tombol */
    .sc-art:has(.sc-panel-art) { max-height: 38vh !important; }
    .sc-art .sc-panel-art { height: auto; }
    .sc-art .sc-panel-art svg {
        max-height: 26vh !important;
        max-width: 88% !important;
    }
}

/* Logo mitra & partner di atas hero */
.hero-partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: clamp(1.4rem, 4vh, 2.4rem);
}

.hero-partners-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.hero-partners-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.6rem;
}

.hero-partners-row li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 96px;
    padding: 0.35rem 0.8rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.hero-partners-row img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 640px) {
    .hero-partners-row li { width: 84px; height: 34px; }
}

/* ===== Hero sedikit diperkecil & naik supaya logo mitra terlihat tanpa scroll ===== */
.hero-wrap {
    padding-block: clamp(1rem, 2.5vh, 1.8rem) clamp(0.9rem, 2vh, 1.5rem) !important;
}
.hero-poster-logos { margin-bottom: clamp(0.5rem, 1.6vh, 1.2rem); }
.hero-content { margin-top: clamp(0.3rem, 1.5vh, 1rem); }
.hero-brand-img { width: clamp(260px, 48vw, 700px); }
.hero-headline {
    font-size: clamp(1.5rem, 3.2vw, 3rem);
    margin-bottom: clamp(0.8rem, 2vh, 1.4rem);
}
.hero-desc {
    font-size: clamp(0.88rem, 1.4vw, 1rem);
    margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
.hero-partners { margin-top: clamp(1rem, 2.6vh, 1.7rem); }
@media (max-width: 640px) {
    .hero-brand-img { width: min(100%, 320px); }
    .hero-headline { font-size: clamp(1.3rem, 5.8vw, 1.65rem) !important; }
}

/* ===== Rapikan tipografi hero (anti-slop): tracking longgar, label biasa ===== */
.hero-headline { letter-spacing: -0.015em; text-wrap: balance; }
.hero-desc { text-wrap: pretty; }
.hero-partners-label {
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
}

/* ===== Hero 2 kolom: konten rata kiri + kotak Agenda Kegiatan di kanan ===== */
.hero-wrap { width: min(1368px, 100% - 3rem); }
.hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}
.hero-main { min-width: 0; }

/* Rata kiri */
.hero-main .hero-poster-logos { justify-content: flex-start !important; }
.hero-main .poster-logos-left { justify-content: flex-start; }
.hero-main .hero-poster-logos .poster-logos-right { margin-left: clamp(2.5rem, 7vw, 7rem); }
.hero-main .hero-poster-logos { margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem); }
.hero-main .hero-content { align-items: flex-start; text-align: left; }
.hero-main .hero-brand-img { margin-inline: 0; transform-origin: left center !important; }
.hero-main .hero-headline { margin-inline: 0; }
.hero-main .hero-desc { margin-inline: 0; }
.hero-main .cta { justify-content: flex-start !important; }
.hero-main .hero-partners { align-items: flex-start; }
.hero-main .hero-partners-row { justify-content: flex-start; max-width: 760px; }

/* Konten kiri hero sedikit dibesarkan (~15%) */
.hero-main .hero-logo.logo-telu { height: clamp(26px, 3.1vw, 39px); }
.hero-main .hero-logo.logo-btp { height: clamp(23px, 2.8vw, 35px); }
.hero-main .hero-logo.logo-sdm { height: clamp(20px, 2.3vw, 29px); }
.hero-main .hero-logo.logo-anniversary { height: clamp(52px, 6.2vw, 78px); }
.hero-main .hero-brand-img { width: clamp(280px, 52vw, 800px); }
.hero-main .hero-headline { font-size: clamp(1.6rem, 3.6vw, 3.45rem); }
.hero-main .hero-desc { font-size: clamp(0.95rem, 1.5vw, 1.15rem); }
.hero-main .cta .btn { min-height: 54px; padding: 0.75rem 1.75rem; font-size: 1.08rem; }
.hero-main .hero-partners-label { font-size: 0.95rem; }
.hero-main .hero-partners-row li { width: 110px; height: 44px; }
@media (max-width: 640px) {
    .hero-main .hero-brand-img { width: min(100%, 340px); }
    .hero-main .hero-headline { font-size: clamp(1.4rem, 6.2vw, 1.8rem) !important; }
    .hero-main .cta .btn { min-height: 48px; padding: 0.65rem 1.3rem; font-size: 1rem; }
    .hero-main .hero-partners-row li { width: 90px; height: 38px; }
}

/* Kotak agenda */
.hero-agenda { width: 100%; }
.hero-agenda-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 0.9rem;
    text-align: center;
}
.hero-agenda-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: center;
}
.hero-agenda-col { display: flex; flex-direction: column; gap: 28px; }

.hero-agenda-card {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-agenda-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14, 46, 84, 0.15); }
.hero-agenda-card img { width: 100%; height: auto; display: block; }

/* Tablet & HP: satu kolom, agenda di bawah konten */
@media (max-width: 960px) {
    .hero-split { grid-template-columns: 1fr; gap: 1.8rem; }
    .hero-agenda { max-width: 480px; }
}

/* ===== Animasi kotak agenda: slide in dari kanan, bergantian =====
   Pakai properti `translate` (bukan transform) agar efek hover tetap jalan */
@keyframes agendaSlideInLeft {
    from { opacity: 0; translate: 60px 0; }
    to { opacity: 1; translate: 0 0; }
}
.hero-agenda-card {
    opacity: 0;
    animation: agendaSlideInLeft 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-agenda-col:last-child  .hero-agenda-card:nth-child(1) { animation-delay: 0.3s; }
.hero-agenda-col:first-child .hero-agenda-card:nth-child(1) { animation-delay: 0.45s; }
.hero-agenda-col:last-child  .hero-agenda-card:nth-child(2) { animation-delay: 0.6s; }
.hero-agenda-col:first-child .hero-agenda-card:nth-child(2) { animation-delay: 0.75s; }
.hero-agenda-col:last-child  .hero-agenda-card:nth-child(3) { animation-delay: 0.9s; }
@media (prefers-reduced-motion: reduce) {
    .hero-agenda-card { animation: none; opacity: 1; }
}

/* Strategic Partners ikut slide in dari kiri setelah tombol CTA */
.hero-partners {
    opacity: 0;
    animation: slideInRight 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
}
@media (prefers-reduced-motion: reduce) {
    .hero-partners { animation: none; opacity: 1; }
}

/* Isi hero (logo, judul, tagline, tombol, partner, kartu agenda) diperkecil ~8% di desktop */
@media (min-width: 1001px) {
    .hero-main { zoom: 0.92; }
    .hero-split { grid-template-columns: minmax(0, 1fr) 384px; }
}

/* Deskripsi hero dihapus: tinggi blok kiri dijaga sama dengan sebelumnya agar proporsi atas-bawah tetap */
@media (min-width: 1001px) {
    .hero-main .hero-poster-logos { padding-bottom: 22px; }
    .hero-main .hero-headline { padding-bottom: 32px; }
    .hero-main .hero-partners { padding-top: 22px; }
}

.reg-rundown-link {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.4rem 0.9rem;
    border: 1.5px solid #0e2e54;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0e2e54;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.reg-rundown-link:hover { background: #0e2e54; color: #fff; }