/*
 * public_html/assets/css/hero-halaman.css
 * Hero bersama halaman publik "Arena" (app_klub/layout/_hero-halaman.php): klub, prestasi, sertifikat, kontak.
 * Dimuat SETELAH css/landing.css. Kedalaman dari lapisan CSS, SVG, transform 3D, dan judul kinetik per huruf.
 * Foto/logo raster diperbolehkan (keputusan 27 Sep 2026), mis. logo klub di motif lintasan ('logo').
 * Warna hanya dari token theme.css (--ya-arena-*, --ya-neon-*, --ya-krom-*, --ya-medali-*,
 * --ya-tinta-rgb, --ya-putih-rgb, --ya-surface-rgb, --ya-wa*), jadi ikut tema terang ("Arena siang") & gelap.
 *
 * Isi:
 *   1. Kerangka, latar berlapis, garis jersey
 *   2. Teks: jejak, kicker, judul kinetik, chip, CTA
 *   3. Panggung + motif: lintasan (klub), podium (prestasi), segel (sertifikat), sinyal (kontak)
 *   4. Kartu berlapis (slot_kartu) & kartu kontak
 *   5. Tombol Daftar header disembunyikan saat CTA hero terlihat
 *   6. Responsif, hemat daya, gerak dikurangi, warna paksa, cetak
 *
 * --ya-tx / --ya-ty (-1..1) diisi hero-halaman.js; --ya-mx / --ya-my (magnetic) diisi landing-bagian.js.
 * Tanpa JS nilainya 0: hero tetap utuh, animasi CSS tetap jalan.
 * Catatan urutan muat: theme.css dimuat SESUDAH file ini, jadi selektor di sini sengaja minimal 2 class.
 */

/* =====================================================================
   1. KERANGKA & LATAR
   ===================================================================== */
.ya-hh {
    --ya-tx: 0;
    --ya-ty: 0;
    --ya-hh-miring: clamp(2rem, 5vw, 4.25rem);
    position: relative; isolation: isolate;
    overflow: hidden; overflow: clip;
    color: var(--ya-arena-teks);
    padding: clamp(1rem, 3vw, 2.25rem) 0 calc(var(--ya-hh-miring) + 3rem);
}
/* Bagian pertama setelah hero tidak perlu jarak atas selebar jarak antarbagian landing */
.ya-hh + .ya-lp-bagian { padding-top: clamp(2.5rem, 6vw, 4rem); }

.ya-hh-latar {
    position: absolute; inset: 0; z-index: -2; overflow: hidden;
    background:
        radial-gradient(80% 70% at 4% -12%, rgba(var(--ya-neon-biru-rgb), .18), transparent 60%),
        radial-gradient(90% 80% at 96% 112%, rgba(var(--ya-neon-oranye-rgb), .14), transparent 58%),
        linear-gradient(165deg, var(--ya-arena-2) 0%, var(--ya-arena-1) 62%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ya-hh-miring)), 0 100%);
}
.ya-hh-aurora { position: absolute; inset: 0; }
.ya-hh-aurora::before,
.ya-hh-aurora::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; }
.ya-hh-aurora::before {
    width: 64vmax; height: 64vmax; left: -26vmax; top: -40vmax;
    background: radial-gradient(closest-side, rgba(var(--ya-neon-biru-rgb), .2), transparent);
    animation: ya-hh-aurora-a 17s ease-in-out infinite alternate;
}
.ya-hh-aurora::after {
    width: 56vmax; height: 56vmax; right: -22vmax; bottom: -36vmax;
    background: radial-gradient(closest-side, rgba(var(--ya-neon-oranye-rgb), .18), transparent);
    animation: ya-hh-aurora-b 22s ease-in-out infinite alternate;
}
@keyframes ya-hh-aurora-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.18); } }
@keyframes ya-hh-aurora-b { to { transform: translate3d(-12vw, -8vh, 0) scale(1.1); } }

.ya-hh-kisi {
    position: absolute; inset: 0;
    background-image: radial-gradient(var(--ya-arena-garis-halus) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 75% 45%, black, transparent 78%);
            mask-image: radial-gradient(ellipse 60% 60% at 75% 45%, black, transparent 78%);
}

/* Teks kontur raksasa berjalan pelan */
.ya-hh-pita {
    position: absolute; left: 0; top: 60%; width: 100%;
    transform: translateY(-50%) rotate(-6deg);
    translate: calc(var(--ya-tx) * -16px) calc(var(--ya-ty) * -8px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
}
.ya-hh-pita-jalan { display: flex; width: max-content; animation: ya-hh-pita 60s linear infinite; will-change: transform; }
.ya-hh-pita-jalan span {
    flex: none; padding-right: .3em;
    font-size: clamp(4.5rem, 13vw, 11rem); font-weight: 700; font-style: italic; line-height: 1.1;
    letter-spacing: -.05em; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1.5px var(--ya-arena-kontur);
}
@keyframes ya-hh-pita { to { transform: translateX(-50%); } }

/* Garis angin yang melesat */
.ya-hh-angin { position: absolute; inset: -10%; transform: rotate(-6deg); }
.ya-hh-angin i {
    position: absolute; left: 0; height: 1px; width: clamp(80px, 18vw, 260px);
    background: linear-gradient(90deg, transparent, rgba(var(--ya-neon-biru-rgb), .5) 70%, var(--ya-arena-teks));
    opacity: 0; transform: translateX(-100%);
    animation: ya-hh-angin 3.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
.ya-hh-angin i:nth-child(1) { top: 22%; animation-duration: 3.4s; animation-delay: .5s; }
.ya-hh-angin i:nth-child(2) { top: 38%; animation-duration: 4.4s; animation-delay: 2s; }
.ya-hh-angin i:nth-child(3) { top: 52%; animation-duration: 3.9s; animation-delay: 1.2s;
    background: linear-gradient(90deg, transparent, rgba(var(--ya-neon-oranye-rgb), .55) 70%, var(--ya-neon-oranye-terang)); }
.ya-hh-angin i:nth-child(4) { top: 68%; animation-duration: 5s; animation-delay: 2.8s; }
.ya-hh-angin i:nth-child(5) { top: 82%; animation-duration: 4.1s; animation-delay: .9s; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--ya-neon-oranye-rgb), .45) 70%, var(--ya-neon-oranye-terang)); }
@keyframes ya-hh-angin {
    0% { opacity: 0; transform: translateX(-100%); }
    12% { opacity: 1; }
    75% { opacity: .7; }
    100% { opacity: 0; transform: translateX(135vw); }
}

/* Garis jersey sejajar tepi miring */
.ya-hh-garis {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    animation: ya-hh-garis-masuk 1.1s cubic-bezier(.65, 0, .35, 1) .25s both;
}
.ya-hh-garis i { position: absolute; inset: 0; overflow: hidden; }
.ya-hh-garis i:nth-child(1) {
    background: var(--ya-lp-garis-oranye);
    clip-path: polygon(0 calc(100% - 12px), 100% calc(100% - var(--ya-hh-miring) - 12px), 100% calc(100% - var(--ya-hh-miring)), 0 100%);
}
.ya-hh-garis i:nth-child(2) {
    background: var(--ya-lp-garis-tengah);
    clip-path: polygon(0 calc(100% - 23px), 100% calc(100% - var(--ya-hh-miring) - 23px), 100% calc(100% - var(--ya-hh-miring) - 18px), 0 calc(100% - 18px));
}
.ya-hh-garis i:nth-child(3) {
    background: var(--ya-lp-garis-biru);
    clip-path: polygon(0 calc(100% - 30px), 100% calc(100% - var(--ya-hh-miring) - 30px), 100% calc(100% - var(--ya-hh-miring) - 28px), 0 calc(100% - 28px));
}
.ya-hh-garis i:nth-child(1)::after {   /* kilat yang sesekali menyapu garis oranye */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 16%;
    background: linear-gradient(90deg, transparent, rgba(var(--ya-putih-rgb), .8), transparent);
    transform: translateX(-100%);
    animation: ya-hh-kilat 6s ease-in-out 2s infinite;
}
@keyframes ya-hh-garis-masuk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ya-hh-kilat { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(640%); } }

@keyframes ya-hh-muncul { from { opacity: 0; transform: translateY(14px); } }
@keyframes ya-hh-pudar { from { opacity: 0; } }

/* =====================================================================
   2. TEKS
   ===================================================================== */
.ya-hh-isi {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto; padding: 0 1rem;
    display: grid; gap: 1.5rem;
}
@media (min-width: 768px) { .ya-hh-isi { padding: 0 1.5rem; } }
@media (min-width: 992px) {
    .ya-hh-isi {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        align-items: center; gap: 3rem;
        min-height: min(calc(100svh - 72px - 11rem), 440px);
    }
}
.ya-hh-teks { position: relative; z-index: 2; min-width: 0; }

/* Breadcrumb */
.ya-hh-jejak {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; margin: 0 0 .25rem;
    font-size: .8125rem; font-weight: 500; color: var(--ya-arena-teks-2);
    animation: ya-hh-muncul .6s ease both;
}
.ya-hh-jejak a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.ya-hh-jejak a:hover,
.ya-hh-jejak a:focus-visible { color: var(--ya-neon-biru-kuat); }
.ya-hh-jejak i { font-size: .625rem; opacity: .6; }
.ya-hh-jejak span { font-weight: 600; color: var(--ya-arena-teks); }

/* Kicker: pil kaca + titik berdenyut */
.ya-hh-kicker {
    display: inline-flex; align-items: center; gap: .625rem;
    margin: 0 0 1.125rem; padding: .375rem .875rem .375rem .625rem;
    border: 1px solid var(--ya-arena-kaca-border); border-radius: 999px;
    background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--ya-arena-teks-2);
    animation: ya-hh-muncul .7s ease .08s both;
}
.ya-hh-denyut { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ya-neon-oranye); }
.ya-hh-denyut::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ya-neon-oranye);
    animation: ya-hh-denyut 2.2s ease-out infinite;
}
@keyframes ya-hh-denyut { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

/* Judul kinetik. hero-halaman.js memecah tiap baris per huruf (.ya-hh-karakter, --i = urutan). Tanpa JS tampil utuh. */
.ya-hh-judul {
    margin: 0 0 1.125rem;
    font-size: clamp(2.375rem, 11vw, 4.75rem);
    font-weight: 700; font-style: italic; line-height: 1; letter-spacing: -.045em;
    color: var(--ya-arena-teks);
}
@media (min-width: 992px) { .ya-hh-judul { font-size: clamp(3.25rem, 5.4vw, 5rem); } }
.ya-hh-baris { display: block; width: max-content; max-width: 100%; padding: .02em .14em .06em 0; }
.ya-hh-kata { display: inline-block; white-space: nowrap; }
/* Ruang cat ekstra tiap huruf (padding), dinetralkan margin negatif yang sama supaya jarak huruf & baris tidak berubah.
   background-clip: text hanya mengecat di dalam kotak elemen, padahal huruf miring menjorok ke kanan-atas
   (kotak juga dipersempit letter-spacing negatif) dan badan huruf lebih tinggi dari line-height 1.
   Tanpa ini ujung huruf (l, d, t, g, y) terpotong. */
.ya-hh-karakter {
    display: inline-block;
    padding: .16em .24em .24em .08em;
    margin: -.16em -.24em -.24em -.08em;
    animation: ya-hh-huruf .9s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i, 0) * 28ms) both;
    transition: translate .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i, 0) * 14ms);
}
/* Tiap huruf melesat dari kanan: miring, melebar, lalu mengerem */
@keyframes ya-hh-huruf {
    from { opacity: 0; transform: translateX(.8em) skewX(-26deg) scaleX(1.4); }
    55% { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
    .ya-hh-judul:hover .ya-hh-karakter { translate: 0 -.08em; }
}

/* Baris 1: krom metalik + kilau yang merambat huruf demi huruf */
.ya-hh-baris--krom,
.ya-hh-baris--krom .ya-hh-karakter {
    background-image:
        linear-gradient(100deg, transparent 40%, rgba(var(--ya-putih-rgb), .9) 50%, transparent 60%),
        linear-gradient(180deg, var(--ya-krom-1) 0%, var(--ya-krom-1) 40%, var(--ya-krom-2) 55%,
                                var(--ya-krom-3) 56%, var(--ya-krom-2) 80%, var(--ya-krom-1) 100%);
    background-size: 300% 100%, 100% 100%;
    background-position: 150% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ya-hh-baris--krom:not(.is-pecah) { animation: ya-hh-kilau 7s ease-in-out 2s infinite; }
.ya-hh-baris--krom.is-pecah { background-image: none; }
.ya-hh-baris--krom .ya-hh-karakter {
    animation: ya-hh-huruf .9s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i, 0) * 28ms) both,
               ya-hh-kilau 7s ease-in-out calc(2s + var(--i, 0) * 45ms) infinite;
}
@keyframes ya-hh-kilau { 0% { background-position: 150% 0, 0 0; } 18%, 100% { background-position: -50% 0, 0 0; } }

/* Baris 2: oranye neon + pendar + garis kecepatan */
.ya-hh-baris--aksen { position: relative; }
.ya-hh-baris--aksen,
.ya-hh-baris--aksen .ya-hh-karakter {
    background-image: linear-gradient(180deg, var(--ya-neon-oranye-terang) 0%, var(--ya-neon-oranye) 52%, var(--ya-neon-oranye-gelap) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ya-hh-baris--aksen.is-pecah { background-image: none; }
/* Pendar di pseudo-elemen: filter/text-shadow pada teks bergradasi memunculkan kotak gelap di Chrome */
.ya-hh-baris--aksen::before {
    content: ""; position: absolute; z-index: -1; left: -.25em; top: .05em; width: calc(100% + .5em); height: 1em;
    background: radial-gradient(closest-side, rgba(var(--ya-neon-oranye-rgb), .24), rgba(var(--ya-neon-oranye-rgb), 0));
    pointer-events: none;
    animation: ya-hh-pudar 1.2s ease .6s both;
}
.ya-hh-baris--aksen::after {
    content: ""; position: absolute; left: .04em; bottom: -.06em; width: calc(100% - .2em); height: .07em;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(var(--ya-neon-oranye-rgb), 0), var(--ya-neon-oranye) 30%, var(--ya-neon-biru));
    transform-origin: left center;
    animation: ya-hh-garis-bawah .9s cubic-bezier(.65, 0, .35, 1) .95s both;
}
@keyframes ya-hh-garis-bawah { from { transform: scaleX(0); opacity: 0; } 20% { opacity: 1; } }

.ya-hh-sub {
    max-width: 32rem; margin: 0 0 1.5rem;
    font-size: clamp(.9375rem, 2.4vw, 1.0625rem); line-height: 1.6; color: var(--ya-arena-teks-2);
    animation: ya-hh-muncul .8s ease .45s both;
}

/* Chip (divisi, jumlah medali) */
.ya-hh-chip-daftar { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ya-hh-chip {
    --ya-c: var(--ya-neon-biru);
    display: inline-flex; align-items: center; gap: .5rem; min-height: 40px;
    padding: .375rem .875rem; border-radius: 999px;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: .8125rem; font-weight: 600; color: var(--ya-arena-teks-2);
    animation: ya-hh-muncul .6s ease backwards;
}
.ya-hh-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ya-c); box-shadow: 0 0 10px var(--ya-c); }
.ya-hh-chip b { font-size: 1.0625rem; font-weight: 700; font-style: italic; font-variant-numeric: tabular-nums; color: var(--ya-arena-teks); }
.ya-hh-chip--emas { --ya-c: var(--ya-medali-emas); }
.ya-hh-chip--perak { --ya-c: var(--ya-medali-perak); }
.ya-hh-chip--perunggu { --ya-c: var(--ya-medali-perunggu); }
.ya-hh-chip:nth-child(1) { animation-delay: .55s; }
.ya-hh-chip:nth-child(2) { animation-delay: .62s; }
.ya-hh-chip:nth-child(3) { animation-delay: .69s; }
.ya-hh-chip:nth-child(4) { animation-delay: .76s; }
.ya-hh-chip:nth-child(n+5) { animation-delay: .83s; }

/* Tombol */
.ya-hh-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; animation: ya-hh-muncul .8s ease .6s both; }
.ya-hh .ya-hh-cta,
.ya-hh .ya-hh-btn-kaca {
    --ya-mx: 0px;
    --ya-my: 0px;
    position: relative;
    min-height: 56px; padding: .875rem 1.5rem; border-radius: .75rem;
    font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
    transform: skewX(-10deg);                    /* miring seperti nomor punggung jersey */
    translate: var(--ya-mx) var(--ya-my);       /* tarikan magnetic dari landing-bagian.js */
    transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease,
                background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ya-hh .ya-hh-cta > *,
.ya-hh .ya-hh-btn-kaca > * { transform: skewX(10deg); }
.ya-hh .ya-hh-cta:active,
.ya-hh .ya-hh-btn-kaca:active { transform: skewX(-10deg) translateY(1px); }
.ya-hh .ya-hh-cta:focus-visible,
.ya-hh .ya-hh-btn-kaca:focus-visible { outline: 2px solid var(--ya-arena-teks); outline-offset: 3px; }

/* CTA utama (tetap btn-accent): cahaya oranye, kilau berkala, cincin berdenyut */
.ya-hh .ya-hh-cta { box-shadow: 0 14px 34px -12px rgba(var(--ya-neon-oranye-rgb), .9), inset 0 1px 0 rgba(var(--ya-putih-rgb), .3); }
.ya-hh .ya-hh-cta:hover,
.ya-hh .ya-hh-cta:focus-visible {
    box-shadow: 0 18px 46px -10px rgba(var(--ya-neon-oranye-rgb), 1),
                0 0 0 4px rgba(var(--ya-neon-oranye-rgb), .2),
                inset 0 1px 0 rgba(var(--ya-putih-rgb), .35);
}
.ya-hh .ya-hh-cta::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(var(--ya-putih-rgb), .5) 50%, transparent 68%) no-repeat;
    background-size: 250% 100%; background-position: 160% 0;
    animation: ya-hh-sapu 6.5s ease-in-out 2.4s infinite;
}
.ya-hh .ya-hh-cta:hover::before { animation: ya-hh-sapu-cepat .7s ease forwards; }
@keyframes ya-hh-sapu { 0% { background-position: 160% 0; } 16%, 100% { background-position: -60% 0; } }
@keyframes ya-hh-sapu-cepat { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.ya-hh .ya-hh-cta::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(var(--ya-neon-oranye-rgb), .75); opacity: 0;
    animation: ya-hh-cincin 3s cubic-bezier(.2, .6, .3, 1) 1.6s infinite;
}
@keyframes ya-hh-cincin { 0% { opacity: .8; transform: scale(1); } 65%, 100% { opacity: 0; transform: scale(1.1, 1.45); } }
.ya-hh .ya-hh-cta i { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ya-hh .ya-hh-cta:hover i { transform: skewX(10deg) translateX(4px); }

/* Tombol kedua: kaca, pinggiran biru menyala saat disentuh */
.ya-hh .ya-hh-btn-kaca {
    color: var(--ya-arena-teks);
    background-color: rgba(var(--ya-tinta-rgb), .06);
    border: 1px solid rgba(var(--ya-tinta-rgb), .24);
    box-shadow: inset 0 1px 0 rgba(var(--ya-putih-rgb), .08);
}
.ya-hh .ya-hh-btn-kaca:hover,
.ya-hh .ya-hh-btn-kaca:focus-visible,
.ya-hh .ya-hh-btn-kaca:active {
    color: var(--ya-arena-teks);
    background-color: rgba(var(--ya-neon-biru-rgb), .12);
    border-color: rgba(var(--ya-neon-biru-rgb), .8);
    box-shadow: 0 0 0 3px rgba(var(--ya-neon-biru-rgb), .16), 0 14px 34px -12px rgba(var(--ya-neon-biru-rgb), .85);
}

/* Tautan ketiga */
.ya-hh-tautan {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .75rem;
    font-size: .9375rem; font-weight: 600; color: var(--ya-arena-teks-2); text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
    transition: color .2s ease, background-size .3s ease;
    animation: ya-hh-muncul .8s ease .7s both;
}
.ya-hh-tautan:hover,
.ya-hh-tautan:focus-visible { color: var(--ya-arena-teks); background-size: 100% 1px; }
.ya-hh-tautan:focus-visible { outline: 2px solid var(--ya-arena-teks); outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
   3. PANGGUNG + MOTIF
   ===================================================================== */
.ya-hh-panggung {
    position: relative; z-index: 0;
    min-height: clamp(230px, 62vw, 360px); margin: 0 -1rem;
    animation: ya-hh-pudar 1.1s ease .1s both;
}
@media (min-width: 768px) { .ya-hh-panggung { margin: 0 -1.5rem; } }
@media (min-width: 992px) { .ya-hh-panggung { min-height: 420px; margin: 0 -1.5rem 0 0; } }
.ya-hh-panggung--slot { min-height: 0; margin: 0; padding: 1.75rem 0 1rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 992px) { .ya-hh-panggung--slot { min-height: 420px; margin: 0; padding: 2rem 0; } }
.ya-hh-dekor { position: absolute; inset: 0; pointer-events: none; perspective: 1000px; }

/* Condong mengikuti pointer (PC). Tanpa JS: diam di tengah. */
.ya-hh-condong {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(calc(var(--ya-ty) * 5deg)) rotateY(calc(var(--ya-tx) * -8deg));
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Motif lintasan (klub) ----------
   Satu putaran komet = --ya-hh-lap, mulai setelah --ya-hh-mulai, berjalan pada 0–80% putaran.
   Jeda kedip cone dihitung kira-kira dari panjang jejak di _hero-halaman.php. */
.ya-hh--lintasan { --ya-hh-lap: 4.5s; --ya-hh-mulai: 1.2s; }

.ya-hh-huruf {
    position: absolute; right: 4%; top: 50%;
    font-size: clamp(11rem, 46vw, 21rem); font-weight: 700; font-style: italic; line-height: .8; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 2px rgba(var(--ya-tinta-rgb), .13);
    translate: calc(var(--ya-tx) * -14px) calc(var(--ya-ty) * -8px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
    animation: ya-hh-melayang 9s ease-in-out infinite alternate;
    user-select: none;
}
@keyframes ya-hh-melayang { from { transform: translateY(-58%) rotate(0deg); } to { transform: translateY(-50%) rotate(-3deg); } }
.ya-hh-huruf::after {   /* kontur oranye yang menyapu huruf */
    content: attr(data-huruf); position: absolute; inset: 0;
    -webkit-text-stroke: 2px var(--ya-neon-oranye);
    clip-path: inset(0 100% 0 0);
    animation: ya-hh-sapu-kontur 6.5s cubic-bezier(.65, 0, .35, 1) 1.4s infinite;
}
/* ---------- Motif lintasan + logo klub ('logo' diisi, section mendapat .ya-hh--logo) ----------
   Lapisan (belakang → depan): piringan gelap + cincin berputar, orbit 3D, logo, kilau (dibatasi bentuk logo),
   kontur neon mengikuti tepi logo (filter SVG #ya-hh-logo-garis). Logo raster WAJIB berlatar transparan.
   Kontur menyapu masuk-keluar dengan dua transform berlawanan (jendela bergerak, isi diam),
   jadi filter SVG tidak digambar ulang tiap frame. Piringan selalu gelap di kedua tema
   karena logo klub dirancang di atas latar gelap. */
.ya-hh--logo .ya-hh-panggung { min-height: clamp(300px, 88vw, 420px); }
@media (min-width: 992px) { .ya-hh--logo .ya-hh-panggung { min-height: 460px; } }
.ya-hh--logo .ya-hh-lantai { top: 78%; width: 110%; }
@media (max-width: 991.98px) { .ya-hh--logo .ya-hh-lantai { top: 80%; width: 130%; } }

.ya-hh-logo {
    position: absolute; left: 50%; top: 43%;
    width: min(84%, 400px); aspect-ratio: 1;
    transform-style: preserve-3d;
    translate: calc(-50% + var(--ya-tx) * -12px) calc(-50% + var(--ya-ty) * -8px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
    animation: ya-hh-logo-masuk 1.3s cubic-bezier(.34, 1.4, .64, 1) .2s backwards;
}
@keyframes ya-hh-logo-masuk { from { opacity: 0; transform: translateY(-48px) scale(1.16) rotate(-8deg); } 55% { opacity: 1; } }
.ya-hh-logo-apung,
.ya-hh-logo-3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.ya-hh-logo-apung { animation: ya-hh-logo-apung 7s ease-in-out 1.5s infinite alternate; }
@keyframes ya-hh-logo-apung { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-12px) rotate(-1.5deg); } }
.ya-hh-logo-3d {
    transform: rotateX(calc(var(--ya-ty) * 10deg)) rotateY(calc(var(--ya-tx) * -14deg));
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

/* Piringan gelap + cincin cahaya berputar */
.ya-hh-logo-piring {
    position: absolute; left: 50%; top: 50%; width: 74%; aspect-ratio: 1; border-radius: 50%;
    translate: -50% -50%; transform: translateZ(-40px);
    background: radial-gradient(circle at 50% 32%, rgba(var(--ya-neon-biru-rgb), .3), transparent 62%), var(--ya-lp-logo-dasar);
    box-shadow: inset 0 0 0 1px rgba(var(--ya-neon-biru-rgb), .35),
                0 0 90px -12px rgba(var(--ya-neon-biru-rgb), .4),
                0 34px 70px -30px var(--ya-lp-bayangan);
}
.ya-hh-logo-piring::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%; padding: 2px;
    background: conic-gradient(from var(--ya-hh-sudut),
        rgba(var(--ya-neon-oranye-rgb), 0) 0deg, var(--ya-neon-oranye) 80deg, rgba(var(--ya-neon-oranye-rgb), 0) 150deg,
        rgba(var(--ya-neon-biru-rgb), 0) 180deg, var(--ya-neon-biru) 260deg, rgba(var(--ya-neon-biru-rgb), 0) 330deg);
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: ya-hh-sudut 8s linear infinite;
}

/* Orbit 3D: separuh depan lewat di depan logo, separuh belakang di belakangnya */
.ya-hh-logo-orbit {
    position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%;
    border: 1.5px solid rgba(var(--ya-neon-biru-rgb), .38);
    translate: -50% -50%;
    transform: translateZ(-6px) rotateX(74deg) rotateZ(0deg);
    animation: ya-hh-orbit 10s linear infinite;
}
.ya-hh-logo-orbit i,
.ya-hh-logo-orbit::after {
    content: ""; position: absolute; left: 50%; display: block;
    width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
}
.ya-hh-logo-orbit i { top: -6px; background: var(--ya-neon-oranye); box-shadow: 0 0 16px var(--ya-neon-oranye); }
.ya-hh-logo-orbit::after { bottom: -6px; background: var(--ya-neon-biru); box-shadow: 0 0 16px var(--ya-neon-biru); }
@keyframes ya-hh-orbit { to { transform: translateZ(-6px) rotateX(74deg) rotateZ(360deg); } }

/* Logo + kilau */
.ya-hh-logo-lapis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ya-hh-logo-dasar { transform: translateZ(0); filter: drop-shadow(0 16px 24px var(--ya-lp-bayangan)); }
.ya-hh-logo-kilau-lapis { transform: translateZ(1px); }
.ya-hh-logo-topeng { mask-type: alpha; }
.ya-hh-stop-kilau { stop-color: rgb(var(--ya-putih-rgb)); stop-opacity: .6; }
.ya-hh-stop-kilau.ya-hh-stop--habis { stop-opacity: 0; }
.ya-hh-logo-kilau { animation: ya-hh-logo-kilau 6.5s ease-in-out 3.9s infinite; }   /* lewat saat kontur penuh */
@keyframes ya-hh-logo-kilau { 0% { transform: translateX(0); } 22%, 100% { transform: translateX(170px); } }

/* Kontur neon: jendela (luar) bergeser, isi (dalam) bergeser berlawanan → kontur diam, tersapu masuk-keluar */
.ya-hh-logo-warna-garis { flood-color: var(--ya-neon-biru); }
.ya-hh-logo-kontur {
    position: absolute; inset: -6%; overflow: hidden;
    transform: translateZ(6px) translateX(-100%);
    animation: ya-hh-kontur-luar 6.5s cubic-bezier(.65, 0, .35, 1) 1.6s infinite;
}
.ya-hh-logo-kontur > span {
    position: absolute; inset: 0;
    transform: translateX(100%);
    animation: ya-hh-kontur-dalam 6.5s cubic-bezier(.65, 0, .35, 1) 1.6s infinite;
}
.ya-hh-logo-kontur svg { position: absolute; inset: 5.357%; width: 89.286%; height: 89.286%; overflow: visible; }
@keyframes ya-hh-kontur-luar {
    0% { transform: translateZ(6px) translateX(-100%); }
    35%, 55% { transform: translateZ(6px) translateX(0); }
    90%, 100% { transform: translateZ(6px) translateX(100%); }
}
@keyframes ya-hh-kontur-dalam {
    0% { transform: translateX(100%); }
    35%, 55% { transform: translateX(0); }
    90%, 100% { transform: translateX(-100%); }
}

.ya-hh-lantai {
    position: absolute; left: 50%; top: 58%; width: 118%; aspect-ratio: 8 / 3;
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-14deg);
    animation: ya-hh-lantai 1.8s cubic-bezier(.16, 1, .3, 1) .1s both;
}
@keyframes ya-hh-lantai { from { opacity: 0; transform: translate(-50%, -50%) rotateX(78deg) rotateZ(-42deg) scale(.82); } }
.ya-hh-lantai svg {
    display: block; width: 100%; height: 100%; overflow: visible;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 8%, black 88%, transparent);
}
.ya-hh-lajur { fill: none; stroke: rgba(var(--ya-tinta-rgb), .2); stroke-width: 2; stroke-dasharray: 16 12; }
.ya-hh-sumbu { fill: none; stroke: rgba(var(--ya-neon-biru-rgb), .28); stroke-width: 1.5; stroke-dasharray: 4 10; animation: ya-hh-alir 1.2s linear infinite; }
@keyframes ya-hh-alir { to { stroke-dashoffset: -14; } }
.ya-hh-stop-biru { stop-color: var(--ya-neon-biru); }
.ya-hh-stop-krom { stop-color: var(--ya-krom-1); }
.ya-hh-stop-oranye { stop-color: var(--ya-neon-oranye); }
.ya-hh-jejak,
.ya-hh-jejak-cahaya {
    fill: none; stroke: url(#ya-hh-gradasi); stroke-linecap: round;
    stroke-dasharray: 1000; stroke-dashoffset: 1000;
    animation: ya-hh-gores 1.4s cubic-bezier(.65, 0, .35, 1) .35s forwards;
}
.ya-hh-jejak { stroke-width: 3.5; }
.ya-hh-jejak-cahaya { stroke-width: 16; opacity: .16; }
@keyframes ya-hh-gores { to { stroke-dashoffset: 0; } }

/* Cone tampak atas: alas oranye, pita putih, puncak */
.ya-hh-cone-alas { fill: var(--ya-neon-oranye); }
.ya-hh-cone-pita { fill: none; stroke: rgb(var(--ya-putih-rgb)); stroke-width: 2.5; }
.ya-hh-cone-puncak { fill: var(--ya-neon-oranye-gelap); }
.ya-hh-cone-cincin {
    fill: none; stroke: var(--ya-neon-oranye-terang); stroke-width: 2.5; opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: ya-hh-cone var(--ya-hh-lap) ease-out infinite;
}
@keyframes ya-hh-cone { 0% { opacity: .95; transform: scale(.5); } 12%, 100% { opacity: 0; transform: scale(1.9); } }
.ya-hh-cones > :nth-child(1) .ya-hh-cone-cincin { animation-delay: 1.61s; }
.ya-hh-cones > :nth-child(2) .ya-hh-cone-cincin { animation-delay: 2.04s; }
.ya-hh-cones > :nth-child(3) .ya-hh-cone-cincin { animation-delay: 2.48s; }
.ya-hh-cones > :nth-child(4) .ya-hh-cone-cincin { animation-delay: 2.91s; }
.ya-hh-cones > :nth-child(5) .ya-hh-cone-cincin { animation-delay: 3.35s; }
.ya-hh-cones > :nth-child(6) .ya-hh-cone-cincin { animation-delay: 3.78s; }
.ya-hh-cones > :nth-child(7) .ya-hh-cone-cincin { animation-delay: 4.22s; }

/* Komet = skater yang melaju (ekor biru, pendar & kepala oranye) */
.ya-hh-komet { opacity: 0; animation: ya-hh-komet-tampak var(--ya-hh-lap) linear var(--ya-hh-mulai) infinite both; }
@keyframes ya-hh-komet-tampak { 0% { opacity: 0; } 2%, 78% { opacity: 1; } 80%, 100% { opacity: 0; } }
.ya-hh-komet use { fill: none; stroke-linecap: round; }
.ya-hh-komet-ekor {
    stroke: var(--ya-neon-biru); stroke-width: 12; stroke-opacity: .4; stroke-dasharray: 130 3000;
    animation: ya-hh-ekor var(--ya-hh-lap) linear var(--ya-hh-mulai) infinite both;
}
.ya-hh-komet-halo {
    stroke: var(--ya-neon-oranye); stroke-width: 26; stroke-opacity: .22; stroke-dasharray: 1 3000;
    animation: ya-hh-kepala var(--ya-hh-lap) linear var(--ya-hh-mulai) infinite both;
}
.ya-hh-komet-kepala {
    stroke: var(--ya-neon-oranye-terang); stroke-width: 9; stroke-dasharray: 1 3000;
    animation: ya-hh-kepala var(--ya-hh-lap) linear var(--ya-hh-mulai) infinite both;
}
@keyframes ya-hh-kepala { 0% { stroke-dashoffset: 0; } 80%, 100% { stroke-dashoffset: -1000; } }
@keyframes ya-hh-ekor { 0% { stroke-dashoffset: 130; } 80%, 100% { stroke-dashoffset: -870; } }

/* ---------- Motif podium (prestasi) ---------- */
.ya-hh--podium .ya-hh-panggung { min-height: clamp(260px, 76vw, 400px); }
@media (min-width: 992px) { .ya-hh--podium .ya-hh-panggung { min-height: 440px; } }
.ya-hh-podium { position: absolute; left: 50%; bottom: 2%; width: min(88%, 500px); translate: -50% 0; }
.ya-hh-podium svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--ya-font); }

.ya-hh-stop-sinar { stop-color: var(--ya-neon-biru); stop-opacity: .38; }
.ya-hh-stop-lantai { stop-color: var(--ya-neon-oranye); stop-opacity: .28; }
.ya-hh-stop--habis { stop-opacity: 0; }
.ya-hh-sinar { transform-box: view-box; transform-origin: 240px 350px; animation: ya-hh-sinar 7s ease-in-out infinite alternate; }
.ya-hh-sinar polygon { fill: url(#ya-hh-sinar-gradasi); animation: ya-hh-sinar-kedip 3.2s ease-in-out infinite alternate; }
.ya-hh-sinar polygon:nth-child(2) { animation-delay: -.8s; }
.ya-hh-sinar polygon:nth-child(3) { animation-delay: -1.6s; }
.ya-hh-sinar polygon:nth-child(4) { animation-delay: -2.4s; }
.ya-hh-sinar polygon:nth-child(5) { animation-delay: -1.2s; }
@keyframes ya-hh-sinar { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes ya-hh-sinar-kedip { from { opacity: .3; } to { opacity: 1; } }
.ya-hh-podium-bayang { fill: url(#ya-hh-lantai-gradasi); }

.ya-hh-podium-blok {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: ya-hh-naik 1s cubic-bezier(.16, 1, .3, 1) both;
}
.ya-hh-podium-blok--2 { animation-delay: .3s; }
.ya-hh-podium-blok--1 { animation-delay: .5s; }
.ya-hh-podium-blok--3 { animation-delay: .7s; }
@keyframes ya-hh-naik { from { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } }
.ya-hh-podium-depan { fill: var(--ya-arena-kartu); stroke: rgba(var(--ya-tinta-rgb), .16); stroke-width: 1.5; }
.ya-hh-podium-atas { fill: rgba(var(--ya-neon-biru-rgb), .16); stroke: rgba(var(--ya-neon-biru-rgb), .5); stroke-width: 1.5; stroke-linejoin: round; }
.ya-hh-podium-sisi { fill: rgba(var(--ya-tinta-rgb), .07); stroke: rgba(var(--ya-tinta-rgb), .14); stroke-width: 1.5; }
.ya-hh-podium-angka {
    fill: transparent; stroke: rgba(var(--ya-tinta-rgb), .35); stroke-width: 1.5;
    font-size: 58px; font-weight: 700; font-style: italic; letter-spacing: -.04em;
}
.ya-hh-podium-blok--1 .ya-hh-podium-angka { font-size: 76px; stroke: var(--ya-neon-oranye); }
.ya-hh-podium-blok--3 .ya-hh-podium-angka { font-size: 48px; }

.ya-hh-medali--emas { --ya-m-1: var(--ya-medali-emas); --ya-m-2: var(--ya-medali-emas-gelap); }
.ya-hh-medali--perak { --ya-m-1: var(--ya-medali-perak); --ya-m-2: var(--ya-medali-perak-gelap); }
.ya-hh-medali--perunggu { --ya-m-1: var(--ya-medali-perunggu); --ya-m-2: var(--ya-medali-perunggu-gelap); }
.ya-hh-medali { transform-box: fill-box; transform-origin: 50% 0; animation: ya-hh-medali-jatuh .9s cubic-bezier(.34, 1.56, .64, 1) both; }
.ya-hh-medali--perak { animation-delay: 1s; }
.ya-hh-medali--emas { animation-delay: 1.2s; }
.ya-hh-medali--perunggu { animation-delay: 1.4s; }
@keyframes ya-hh-medali-jatuh { from { opacity: 0; transform: translateY(-60px) rotate(-12deg); } }
.ya-hh-medali-ayun { transform-box: fill-box; transform-origin: 50% 0; animation: ya-hh-ayun 3.6s ease-in-out infinite alternate; }
.ya-hh-medali--emas .ya-hh-medali-ayun { animation-delay: -1.2s; }
.ya-hh-medali--perunggu .ya-hh-medali-ayun { animation-delay: -2.4s; }
@keyframes ya-hh-ayun { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-4px); } }
.ya-hh-medali-pita { fill: var(--ya-neon-biru); opacity: .85; }
.ya-hh-medali-luar { fill: var(--ya-m-2); }
.ya-hh-medali-dalam { fill: var(--ya-m-1); }
.ya-hh-medali-bintang { fill: var(--ya-m-2); }
.ya-hh-medali-kilap { fill: none; stroke: rgb(var(--ya-putih-rgb)); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: ya-hh-kilap 3.4s ease-in-out 2s infinite; }
@keyframes ya-hh-kilap { 0%, 100% { opacity: 0; } 20% { opacity: .9; } 40% { opacity: 0; } }
.ya-hh-kilau {
    fill: var(--ya-krom-1); opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: ya-hh-kilau-bintang 2.8s ease-in-out infinite;
}
.ya-hh-podium svg > g:nth-last-child(1) .ya-hh-kilau { animation-delay: 1.9s; }
.ya-hh-podium svg > g:nth-last-child(2) .ya-hh-kilau { animation-delay: .7s; }
.ya-hh-podium svg > g:nth-last-child(3) .ya-hh-kilau { animation-delay: 2.3s; }
.ya-hh-podium svg > g:nth-last-child(4) .ya-hh-kilau { animation-delay: 1.3s; }
.ya-hh-podium svg > g:nth-last-child(5) .ya-hh-kilau { animation-delay: .2s; }
@keyframes ya-hh-kilau-bintang { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- Motif segel (sertifikat) ---------- */
.ya-hh-segel {
    position: absolute; left: 50%; top: 50%; width: min(128%, 580px); aspect-ratio: 1;
    translate: calc(-50% + var(--ya-tx) * -14px) calc(-50% + var(--ya-ty) * -10px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
    animation: ya-hh-pudar 1.4s ease .2s both;
}
.ya-hh-segel svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--ya-font); }
.ya-hh-segel-putar,
.ya-hh-segel-balik { transform-box: view-box; transform-origin: 200px 200px; }
.ya-hh-segel-putar { animation: ya-hh-putar 48s linear infinite; }
.ya-hh-segel-balik { animation: ya-hh-putar 32s linear infinite reverse; }
@keyframes ya-hh-putar { to { transform: rotate(360deg); } }
.ya-hh-segel-cincin { fill: none; stroke: rgba(var(--ya-tinta-rgb), .16); stroke-width: 1.5; }
.ya-hh-segel-cincin--putus { stroke: rgba(var(--ya-neon-oranye-rgb), .55); stroke-width: 2.5; stroke-dasharray: 2 8; }
.ya-hh-segel-cincin--titik { stroke: rgba(var(--ya-neon-biru-rgb), .5); stroke-width: 3; stroke-dasharray: 1 6; stroke-linecap: round; }
.ya-hh-segel-guilloche { fill: none; stroke: rgba(var(--ya-neon-biru-rgb), .18); stroke-width: 1; }
.ya-hh-segel-teks { fill: rgba(var(--ya-tinta-rgb), .4); font-size: 14px; font-weight: 700; letter-spacing: .1em; }

/* ---------- Motif sinyal (kontak) ---------- */
.ya-hh-sinyal {
    position: absolute; left: 50%; top: 50%; width: min(118%, 540px); aspect-ratio: 1;
    translate: calc(-50% + var(--ya-tx) * -12px) calc(-50% + var(--ya-ty) * -8px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
}
.ya-hh-sinyal i {
    position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; border-radius: 50%;
    border: 1.5px solid rgba(var(--ya-neon-biru-rgb), .55); opacity: 0;
    animation: ya-hh-gelombang 4.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
.ya-hh-sinyal i:nth-child(2) { animation-delay: 1.2s; border-color: rgba(var(--ya-neon-oranye-rgb), .55); }
.ya-hh-sinyal i:nth-child(3) { animation-delay: 2.4s; }
.ya-hh-sinyal i:nth-child(4) { animation-delay: 3.6s; border-color: rgba(var(--ya-neon-oranye-rgb), .55); }
@keyframes ya-hh-gelombang { 0% { transform: scale(.35); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(2.9); opacity: 0; } }

.ya-hh-gelembung {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 5px;
    padding: .625rem .875rem; border-radius: 1.125rem 1.125rem 1.125rem .25rem;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px -22px var(--ya-lp-bayangan);
    animation: ya-hh-apung 5s ease-in-out infinite alternate;
}
.ya-hh-gelembung--ketik { top: -.25rem; right: 4%; }
.ya-hh-gelembung--ketik b {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ya-neon-biru-kuat);
    animation: ya-hh-ketik 1.2s ease-in-out infinite;
}
.ya-hh-gelembung--ketik b:nth-child(2) { animation-delay: .15s; }
.ya-hh-gelembung--ketik b:nth-child(3) { animation-delay: .3s; }
@keyframes ya-hh-ketik { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.ya-hh-gelembung--garis {
    bottom: -.25rem; left: 4%; flex-direction: column; align-items: flex-start; gap: 6px;
    border-radius: 1.125rem 1.125rem .25rem 1.125rem; animation-delay: -2.5s;
}
.ya-hh-gelembung--garis b { display: block; height: 5px; border-radius: 3px; }
.ya-hh-gelembung--garis b:nth-child(1) { width: 64px; background: rgba(var(--ya-tinta-rgb), .22); }
.ya-hh-gelembung--garis b:nth-child(2) { width: 40px; background: rgba(var(--ya-neon-oranye-rgb), .6); }
@keyframes ya-hh-apung { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ---------- Motif jalur (daftar.php: pilih klub) ----------
   Satu lajur per klub di lantai 3D. Lampu start menyala oranye ×3 lalu hijau (±1,9 s),
   setelah itu komet melaju di tiap lajur dengan kecepatan berbeda menuju garis finish. */
.ya-hh--jalur .ya-hh-panggung { min-height: clamp(260px, 72vw, 400px); }
@media (min-width: 992px) { .ya-hh--jalur .ya-hh-panggung { min-height: 420px; } }

.ya-hh-jalur {
    position: absolute; left: 50%; top: 58%; width: 112%; aspect-ratio: 800 / 340;
    transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-10deg);
    animation: ya-hh-jalur-masuk 1.6s cubic-bezier(.16, 1, .3, 1) .1s both;
}
@keyframes ya-hh-jalur-masuk { from { opacity: 0; transform: translate(-50%, -50%) rotateX(76deg) rotateZ(-30deg) scale(.85); } }
.ya-hh-jalur svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--ya-font); }
.ya-hh-jalur-alas { fill: rgba(var(--ya-tinta-rgb), .035); stroke: rgba(var(--ya-tinta-rgb), .16); stroke-width: 1.5; }
.ya-hh-jalur-batas {   /* marka lajur mengalir ke belakang: kesan melaju */
    fill: none; stroke: rgba(var(--ya-tinta-rgb), .2); stroke-width: 1.5; stroke-dasharray: 14 10;
    animation: ya-hh-marka 1s linear infinite;
}
@keyframes ya-hh-marka { to { stroke-dashoffset: 24; } }
.ya-hh-jalur-start { fill: none; stroke: var(--ya-arena-teks); stroke-width: 3; opacity: .55; }
.ya-hh-finish-a { fill: rgba(var(--ya-tinta-rgb), .08); }
.ya-hh-finish-b { fill: rgba(var(--ya-tinta-rgb), .55); }
.ya-hh-jalur-finish { animation: ya-hh-finish 2.4s ease-in-out infinite alternate; }
@keyframes ya-hh-finish { from { opacity: .55; } to { opacity: 1; } }
.ya-hh-jalur-label { fill: var(--ya-arena-teks-2); font-size: 17px; font-weight: 700; font-style: italic; letter-spacing: -.01em; }
.ya-hh-jalur-titik { fill: var(--ya-neon-biru); }

.ya-hh-jalur-komet {
    fill: none; stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 90 3000; stroke-dashoffset: 90;
    animation: ya-hh-balap 3s linear infinite both;
}
.ya-hh-jalur-komet--oranye { stroke: var(--ya-neon-oranye); }
.ya-hh-jalur-komet--biru { stroke: var(--ya-neon-biru); }
@keyframes ya-hh-balap { 0% { stroke-dashoffset: 90; } 70%, 100% { stroke-dashoffset: -1000; } }
.ya-hh-jalur-komet--1 { animation-duration: 2.9s; animation-delay: 2s; }
.ya-hh-jalur-komet--2 { animation-duration: 3.4s; animation-delay: 2.1s; }
.ya-hh-jalur-komet--3 { animation-duration: 2.6s; animation-delay: 2.05s; }
.ya-hh-jalur-komet--4 { animation-duration: 3.1s; animation-delay: 2.15s; }
.ya-hh-jalur-komet--5 { animation-duration: 3.7s; animation-delay: 2s; }
.ya-hh-jalur-komet--6 { animation-duration: 2.8s; animation-delay: 2.1s; }

/* Lampu start: oranye ×3 lalu hijau, teks "Siap" berganti "Gas!" */
.ya-hh-lampu {
    position: absolute; z-index: 3; top: 4%; left: 50%; translate: -50% 0;
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .875rem .5rem .625rem; border-radius: 999px;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px -22px var(--ya-lp-bayangan);
    animation: ya-hh-muncul .6s ease .2s both;
}
.ya-hh-lampu i {
    width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--ya-tinta-rgb), .14);
    animation: ya-hh-lampu-siap .15s ease forwards, ya-hh-lampu-hijau .3s ease 1.9s forwards;
}
.ya-hh-lampu i:nth-child(1) { animation-delay: .5s, 1.9s; }
.ya-hh-lampu i:nth-child(2) { animation-delay: .95s, 1.9s; }
.ya-hh-lampu i:nth-child(3) { animation-delay: 1.4s, 1.9s; }
@keyframes ya-hh-lampu-siap { to { background: var(--ya-neon-oranye); box-shadow: 0 0 12px var(--ya-neon-oranye); } }
@keyframes ya-hh-lampu-hijau { to { background: var(--ya-sukses); box-shadow: 0 0 14px var(--ya-sukses); } }
.ya-hh-lampu b {
    display: grid; min-width: 3.25em; margin-left: .125rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ya-arena-teks-2);
}
.ya-hh-lampu b span { grid-area: 1 / 1; }
.ya-hh-lampu b span:nth-child(1) { animation: ya-hh-lampu-hilang .2s ease 1.9s forwards; }
.ya-hh-lampu b span:nth-child(2) { opacity: 0; color: var(--ya-sukses-teks); animation: ya-hh-lampu-tampil .3s ease 1.9s forwards; }
@keyframes ya-hh-lampu-hilang { to { opacity: 0; } }
@keyframes ya-hh-lampu-tampil { to { opacity: 1; } }

/* ---------- Motif tajuk (berita.php) ----------
   Tumpukan lembar koran berlapis miring (condong ikut pointer), baris judul yang "diketik", foto berkilau,
   dan pita judul terbaru berjalan di bawah. Di bawah 992px panggung disembunyikan supaya berita cepat terlihat. */
.ya-hh--tajuk .ya-hh-panggung { min-height: 440px; }
@media (max-width: 991.98px) { .ya-hh--tajuk .ya-hh-panggung { display: none; } }

.ya-hh-koran { position: absolute; left: 50%; top: 44%; width: min(72%, 380px); aspect-ratio: 4 / 5; translate: -50% -50%; transform-style: preserve-3d; }
.ya-hh-koran-lembar {
    position: absolute; inset: 0; border-radius: 1.25rem;
    border: 1px solid rgba(var(--ya-tinta-rgb), .12); background: var(--ya-arena-kartu);
    box-shadow: 0 40px 80px -40px var(--ya-lp-bayangan);
    animation: ya-hh-lembar-masuk 1s cubic-bezier(.16, 1, .3, 1) both;
}
.ya-hh-koran-lembar--3 { transform: translateZ(-60px) rotate(9deg) translate(34px, 10px); opacity: .5; animation-delay: .15s; }
.ya-hh-koran-lembar--2 { transform: translateZ(-30px) rotate(4deg) translate(16px, 4px); opacity: .78; animation-delay: .25s; }
.ya-hh-koran-lembar--1 {
    transform: rotate(-3deg); overflow: hidden;
    display: flex; flex-direction: column; gap: 5%; padding: 7%;
    animation-delay: .35s;
}
@keyframes ya-hh-lembar-masuk { from { opacity: 0; translate: 0 40px; } }

.ya-hh-koran-kepala {
    display: flex; align-items: baseline; gap: .5rem; padding-bottom: 4%;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--ya-neon-oranye) 0 40%, transparent 40% 43%, var(--ya-neon-biru) 43%) 1;
    font-style: italic; color: var(--ya-arena-teks);
}
.ya-hh-koran-kepala b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; }
.ya-hh-koran-kepala i { font-size: 1rem; font-weight: 700; color: var(--ya-neon-oranye); }
.ya-hh-koran-kepala em { margin-left: auto; font-size: .6875rem; font-style: normal; font-weight: 600; letter-spacing: .06em; color: var(--ya-arena-teks-2); }

.ya-hh-koran-foto {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .75rem;
    background: radial-gradient(60% 80% at 25% 30%, rgba(var(--ya-neon-oranye-rgb), .75), transparent 70%),
                radial-gradient(70% 90% at 80% 80%, rgba(var(--ya-neon-biru-rgb), .7), transparent 70%),
                var(--ya-arena-2);
}
.ya-hh-koran-foto::after {   /* kilau lewat */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(var(--ya-putih-rgb), .5) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%; background-position: 160% 0;
    animation: ya-hh-sapu 5s ease-in-out 1.6s infinite;
}

.ya-hh-koran-baris { display: grid; gap: .55rem; }
.ya-hh-koran-baris i {
    display: block; height: .5rem; border-radius: 99px; background: rgba(var(--ya-tinta-rgb), .14);
    transform-origin: left center; animation: ya-hh-ketik-baris .9s cubic-bezier(.65, 0, .35, 1) both;
}
.ya-hh-koran-baris i:nth-child(1) { height: .875rem; width: 94%; background: var(--ya-arena-teks); opacity: .85; animation-delay: .8s; }
.ya-hh-koran-baris i:nth-child(2) { height: .875rem; width: 62%; background: var(--ya-arena-teks); opacity: .85; animation-delay: .95s; }
.ya-hh-koran-baris i:nth-child(3) { width: 100%; margin-top: .25rem; animation-delay: 1.15s; }
.ya-hh-koran-baris i:nth-child(4) { width: 88%; animation-delay: 1.25s; }
.ya-hh-koran-baris i:nth-child(5) { width: 95%; animation-delay: 1.35s; }
.ya-hh-koran-baris i:nth-child(6) { width: 70%; animation-delay: 1.45s; }
@keyframes ya-hh-ketik-baris { from { transform: scaleX(0); } }

.ya-hh-koran-baru {
    position: absolute; top: -.75rem; right: -4%; z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .875rem .4rem .7rem; border-radius: 999px;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px -22px var(--ya-lp-bayangan);
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ya-arena-teks);
    transform: translateZ(40px) rotate(6deg);
    animation: ya-hh-stempel .7s cubic-bezier(.34, 1.56, .64, 1) 1.2s both;
}

/* Pita judul terbaru berjalan */
.ya-hh-ticker {
    position: absolute; left: 3%; right: 3%; bottom: 3%; z-index: 3; overflow: hidden;
    display: flex; align-items: center; gap: .75rem; padding: .45rem .5rem .45rem .45rem; border-radius: 999px;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px -22px var(--ya-lp-bayangan);
    -webkit-mask-image: linear-gradient(90deg, black 88%, transparent);
            mask-image: linear-gradient(90deg, black 88%, transparent);
    animation: ya-hh-muncul .7s ease .6s both;
}
.ya-hh-ticker b {
    flex: none; padding: .2rem .7rem; border-radius: 999px; background: var(--ya-neon-biru-kuat); color: rgb(var(--ya-putih-rgb));
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ya-hh-ticker-jalan { display: flex; width: max-content; animation: ya-hh-pita 45s linear infinite; will-change: transform; }
.ya-hh-ticker-jalan span { flex: none; white-space: pre; font-size: .8125rem; font-weight: 600; color: var(--ya-arena-teks); }

/* ---------- Motif produksi (jersey.php) ----------
   Sabuk berjalan bergaris jersey melewati 3 pos: Pesan & bayar (20%), Cetak (50%), Siap diambil (80%).
   Tiap jersey berjalan 9 s (translateX -16% → 104% dari lebar .ya-hh-ban, jersey selebar 15%), tiga jersey berjarak 3 s.
   Titik tengah jersey = translateX + 7,5%, jadi sampai di pos 1/2/3 pada 23,75% / 48,75% / 73,75% putaran
   (2,14 s / 4,39 s / 6,64 s). Denyut pos berulang tiap 3 s dan dimulai ±0,19 s lebih awal: 1,95 s / 1,2 s / 0,45 s.
   Polos → berwarna di 46–50% putaran (pos Cetak), cek muncul di 73–76% (pos akhir).
   Warna jersey dari token: seragam = navy, bebas = putih, limited = gelap + emas. */
.ya-hh--produksi .ya-hh-panggung { min-height: clamp(260px, 80vw, 380px); }
@media (min-width: 992px) { .ya-hh--produksi .ya-hh-panggung { min-height: 420px; } }

.ya-hh-pendar {
    position: absolute; left: 8%; right: 8%; top: 24%; height: 64%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--ya-neon-biru-rgb), .22), transparent);
    animation: ya-hh-pendar 5s ease-in-out infinite alternate;
}
@keyframes ya-hh-pendar { from { transform: scale(.94); opacity: .7; } to { transform: scale(1.04); opacity: 1; } }

.ya-hh-def { position: absolute; width: 0; height: 0; overflow: hidden; }
.ya-hh-lintas {
    position: absolute; inset: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.ya-hh-ban {
    position: absolute; left: -3%; right: -3%; top: 22%; height: 62%;
    transform: rotate(-7deg);
    animation: ya-hh-ban-masuk 1.2s cubic-bezier(.16, 1, .3, 1) .1s both;
}
@keyframes ya-hh-ban-masuk { from { opacity: 0; transform: rotate(-7deg) translateY(28px); } }

/* Sabuk: garis jersey di tepi atas, rol bergaris mengalir ke kanan */
.ya-hh-sabuk {
    position: absolute; left: 0; right: 0; bottom: 12%; height: 17%; overflow: hidden;
    border: 1px solid var(--ya-arena-kaca-border); border-radius: 12px;
    background: var(--ya-arena-kartu-atas);
    box-shadow: inset 0 -8px 0 rgba(var(--ya-tinta-rgb), .07), 0 22px 30px -18px var(--ya-lp-bayangan);
}
.ya-hh-sabuk::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 12px;
    background: linear-gradient(180deg,
        var(--ya-lp-garis-oranye) 0 4px, transparent 4px 6px,
        var(--ya-lp-garis-tengah) 6px 8px, transparent 8px 10px,
        var(--ya-lp-garis-biru) 10px 12px);
}
.ya-hh-sabuk-pola {   /* 28px per langkah = jarak garis, jadi putaran mulus */
    position: absolute; top: 12px; bottom: 0; left: -28px; right: 0;
    background: repeating-linear-gradient(90deg, rgba(var(--ya-tinta-rgb), .12) 0 2px, transparent 2px 28px);
    animation: ya-hh-sabuk .34s linear infinite;
}
@keyframes ya-hh-sabuk { to { transform: translateX(28px); } }

/* Pos: label, lingkaran ikon berdenyut saat jersey lewat, sinar ke sabuk */
.ya-hh-pos {
    position: absolute; bottom: 29%; display: flex; flex-direction: column; align-items: center; gap: 6px;
    transform: translateX(-50%);
}
.ya-hh-pos--1 { left: 20%; --ya-hh-tunda: 1.95s; }
.ya-hh-pos--2 { left: 50%; --ya-hh-tunda: 1.2s; }
.ya-hh-pos--3 { left: 80%; --ya-hh-tunda: .45s; }
.ya-hh-pos-nama {
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: .75rem; font-weight: 700; color: var(--ya-arena-teks);
}
.ya-hh-pos-bulat {
    position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kartu);
    color: var(--ya-neon-biru-kuat); box-shadow: 0 10px 24px -12px var(--ya-lp-bayangan);
}
.ya-hh-pos--2 .ya-hh-pos-bulat { color: var(--ya-neon-oranye); }
.ya-hh-pos-bulat svg {
    position: relative; z-index: 1; width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ya-hh-pos-bulat::before {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--ya-neon-oranye); opacity: 0;
    animation: ya-hh-pos-denyut 3s ease-out var(--ya-hh-tunda) infinite;
}
.ya-hh-pos-bulat::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
    background: radial-gradient(closest-side, rgba(var(--ya-neon-oranye-rgb), .35), transparent);
    animation: ya-hh-pos-nyala 3s ease-out var(--ya-hh-tunda) infinite;
}
@keyframes ya-hh-pos-denyut { 0% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes ya-hh-pos-nyala { 0% { opacity: 1; } 40%, 100% { opacity: 0; } }
.ya-hh-pos-sinar { width: 2px; height: 118px; background: linear-gradient(180deg, rgba(var(--ya-tinta-rgb), .25), transparent); }
.ya-hh-pos--2 .ya-hh-pos-sinar {   /* sorot mesin cetak */
    width: 26px; opacity: .25;
    background: linear-gradient(180deg, rgba(var(--ya-neon-oranye-rgb), .4), transparent);
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
    animation: ya-hh-cetak 3s ease-out var(--ya-hh-tunda) infinite;
}
@keyframes ya-hh-cetak { 0% { opacity: 1; } 45%, 100% { opacity: .25; } }

/* Jersey yang berjalan */
.ya-hh-barang { position: absolute; left: 0; right: 0; bottom: 29%; height: 0; animation: ya-hh-bawa 9s linear infinite; will-change: transform; }
.ya-hh-barang--1 { --ya-hh-tunda: 0s; animation-delay: 0s; }
.ya-hh-barang--2 { --ya-hh-tunda: -3s; animation-delay: -3s; }
.ya-hh-barang--3 { --ya-hh-tunda: -6s; animation-delay: -6s; }
@keyframes ya-hh-bawa { from { transform: translateX(-16%); } to { transform: translateX(104%); } }
.ya-hh-baju { position: absolute; bottom: -2px; left: 0; width: 15%; }
.ya-hh-baju svg { display: block; width: 100%; height: auto; overflow: visible; }
.ya-hh-baju-polos { animation: ya-hh-polos 9s linear var(--ya-hh-tunda) infinite; }
.ya-hh-baju-polos use { fill: rgba(var(--ya-tinta-rgb), .05); stroke: var(--ya-arena-teks-2); stroke-width: 3; stroke-dasharray: 10 8; }
.ya-hh-baju-polos path { fill: none; stroke: var(--ya-arena-teks-2); stroke-width: 3; stroke-dasharray: 6 6; }
.ya-hh-baju-jadi { position: absolute; top: 0; left: 0; opacity: 0; animation: ya-hh-jadi 9s linear var(--ya-hh-tunda) infinite; }
@keyframes ya-hh-polos { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ya-hh-jadi { 0%, 46% { opacity: 0; } 50%, 100% { opacity: 1; } }

.ya-hh-baju-badan { fill: var(--ya-hh-j-badan); }
.ya-hh-baju-strip--1 { fill: var(--ya-hh-j-1); }
.ya-hh-baju-strip--2 { fill: var(--ya-hh-j-2); }
.ya-hh-baju-strip--3 { fill: var(--ya-hh-j-3); }
.ya-hh-baju-lengan { fill: none; stroke: var(--ya-hh-j-1); stroke-width: 8; }
.ya-hh-baju-leher { fill: none; stroke: var(--ya-hh-j-1); stroke-width: 7; stroke-linecap: round; }
.ya-hh-baju-tepi { fill: none; stroke: rgba(var(--ya-tinta-rgb), .25); stroke-width: 1.5; }
.ya-hh-stop-kilap { stop-color: rgb(var(--ya-putih-rgb)); stop-opacity: .22; }
.ya-hh-stop-kilap-habis { stop-color: rgb(var(--ya-putih-rgb)); stop-opacity: 0; }
.ya-hh-stop-bayang { stop-color: var(--ya-lp-bayangan); stop-opacity: .45; }
.ya-hh-stop-bayang-habis { stop-color: var(--ya-lp-bayangan); stop-opacity: 0; }
/* Seragam: navy + oranye/putih/biru. Bebas: putih + navy/oranye/biru. Limited: gelap di kedua tema (ubin logo) + emas. */
.ya-hh-baju--seragam { --ya-hh-j-badan: var(--ya-primary-gelap); --ya-hh-j-1: var(--ya-neon-oranye); --ya-hh-j-2: rgb(var(--ya-putih-rgb)); --ya-hh-j-3: var(--ya-neon-biru); }
.ya-hh-baju--bebas { --ya-hh-j-badan: rgb(var(--ya-putih-rgb)); --ya-hh-j-1: var(--ya-primary-gelap); --ya-hh-j-2: var(--ya-neon-oranye); --ya-hh-j-3: var(--ya-neon-biru); }
.ya-hh-baju--limited { --ya-hh-j-badan: var(--ya-lp-logo-dasar); --ya-hh-j-1: var(--ya-medali-emas); --ya-hh-j-2: rgb(var(--ya-putih-rgb)); --ya-hh-j-3: var(--ya-neon-oranye); }

.ya-hh-baju-cek {
    position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--ya-sukses); color: var(--ya-on-sukses); font-size: .875rem;
    box-shadow: 0 6px 14px -6px rgba(var(--ya-sukses-rgb), .9);
    opacity: 0; animation: ya-hh-cek 9s linear var(--ya-hh-tunda) infinite;
}
@keyframes ya-hh-cek { 0%, 73% { opacity: 0; transform: scale(.4); } 76%, 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 991.98px) {
    .ya-hh-ban { top: 26%; height: 60%; }
    .ya-hh-lintas {
        -webkit-mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent);
                mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent);
    }
    .ya-hh-pos-nama { padding: 3px 8px; font-size: .6875rem; }
    .ya-hh-pos-bulat { width: 46px; height: 46px; }
    .ya-hh-pos-bulat svg { width: 20px; height: 20px; }
    .ya-hh-pos-sinar { height: 76px; }
    .ya-hh-baju-cek { top: -6px; right: -6px; width: 22px; height: 22px; font-size: .6875rem; }
}

/* Gerak dikurangi: tiga jersey diam di tiga pos (polos → berwarna → berwarna + cek) */
@media (prefers-reduced-motion: reduce) {
    .ya-hh-pendar, .ya-hh-ban, .ya-hh-sabuk-pola, .ya-hh-barang, .ya-hh-baju-polos, .ya-hh-baju-jadi, .ya-hh-baju-cek,
    .ya-hh-pos-bulat::before, .ya-hh-pos-bulat::after, .ya-hh-pos--2 .ya-hh-pos-sinar { animation: none; }
    .ya-hh-barang--1 { transform: translateX(12.5%); }
    .ya-hh-barang--2 { transform: translateX(42.5%); }
    .ya-hh-barang--3 { transform: translateX(72.5%); }
    .ya-hh-barang--2 .ya-hh-baju-polos, .ya-hh-barang--3 .ya-hh-baju-polos { opacity: 0; }
    .ya-hh-barang--2 .ya-hh-baju-jadi, .ya-hh-barang--3 .ya-hh-baju-jadi, .ya-hh-barang--3 .ya-hh-baju-cek { opacity: 1; }
}

/* =====================================================================
   4. KARTU BERLAPIS & KARTU KONTAK
   ===================================================================== */
.ya-hh-slot { position: relative; z-index: 2; width: 100%; }

.ya-hh-tumpuk {
    --ya-hh-tilt: 1;
    position: relative; z-index: 2; width: 100%; max-width: 440px; margin: 0 auto;
    transform: perspective(1400px)
               rotateX(calc(var(--ya-ty) * -3deg * var(--ya-hh-tilt)))
               rotateY(calc(var(--ya-tx) * 4deg * var(--ya-hh-tilt)));
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.ya-hh-tumpuk:focus-within { --ya-hh-tilt: .3; }   /* saat mengisi form, miringnya diredam */

.ya-hh-lapis {
    position: absolute; inset: 0; border-radius: 1.625rem; pointer-events: none;
    border: 1px solid rgba(var(--ya-neon-biru-rgb), .3);
    background: linear-gradient(160deg, rgba(var(--ya-neon-biru-rgb), .16), rgba(var(--ya-neon-biru-rgb), .03) 60%);
    transform: rotate(-3.5deg) translate(-12px, 8px);
    animation: ya-hh-lapis-masuk .9s cubic-bezier(.16, 1, .3, 1) .5s both;
}
.ya-hh-lapis--2 { border: 0; background: none; transform: rotate(2.5deg) translate(12px, 12px); animation-delay: .62s; }
@property --ya-hh-sudut { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ya-hh-lapis--2::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--ya-hh-sudut),
        rgba(var(--ya-neon-oranye-rgb), 0) 0deg, var(--ya-neon-oranye) 70deg, rgba(var(--ya-neon-oranye-rgb), 0) 140deg,
        rgba(var(--ya-neon-biru-rgb), 0) 180deg, var(--ya-neon-biru) 250deg, rgba(var(--ya-neon-biru-rgb), 0) 320deg);
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: ya-hh-sudut 7s linear infinite;
}
@keyframes ya-hh-sudut { to { --ya-hh-sudut: 360deg; } }
@keyframes ya-hh-lapis-masuk { from { opacity: 0; transform: none; } }

.ya-hh-kartu {
    position: relative; z-index: 1; overflow: hidden;
    border-radius: 1.5rem; border: 1px solid rgba(var(--ya-tinta-rgb), .12);
    background: rgba(var(--ya-surface-rgb), .94); color: var(--ya-teks);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 44px 90px -42px var(--ya-lp-bayangan), 0 18px 40px -30px var(--ya-lp-bayangan);
    animation: ya-hh-kartu-masuk .9s cubic-bezier(.16, 1, .3, 1) .25s backwards;
}
@keyframes ya-hh-kartu-masuk { from { opacity: 0; transform: translateY(28px) scale(.97); } }
.ya-hh-kartu-isi { position: relative; z-index: 1; padding: 2rem 1.375rem 1.5rem; }
@media (min-width: 576px) { .ya-hh-kartu-isi { padding: 2.25rem 2.25rem 1.75rem; } }
.ya-hh-kartu-gerbang {   /* garis jersey di tepi atas kartu + sapuan cahaya */
    position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 5px; overflow: hidden;
    background: linear-gradient(90deg, var(--ya-neon-oranye) 0 38%, transparent 38% 41%, var(--ya-neon-biru) 41%);
}
.ya-hh-kartu-gerbang::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
    background: linear-gradient(90deg, transparent, rgba(var(--ya-putih-rgb), .95), transparent);
    transform: translateX(-100%);
    animation: ya-hh-pindai-atas 5.5s cubic-bezier(.4, 0, .2, 1) 1.5s infinite;
}
@keyframes ya-hh-pindai-atas { 0% { transform: translateX(-100%); } 14%, 100% { transform: translateX(340%); } }
/* Motif segel: garis pindai turun menyapu kartu seperti mesin verifikasi */
.ya-hh--segel .ya-hh-kartu::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(var(--ya-neon-biru-rgb), .07) 80%, rgba(var(--ya-neon-biru-rgb), .4) 100%);
    transform: translateY(-100%);
    animation: ya-hh-pindai 5.5s cubic-bezier(.45, 0, .55, 1) 1.6s infinite;
}
@keyframes ya-hh-pindai { 0% { transform: translateY(-100%); } 45%, 100% { transform: translateY(290%); } }

/* Stempel centang di pojok kartu sertifikat */
.ya-hh-stempel {
    position: absolute; z-index: 3; top: -16px; right: -6px; width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.25rem;
    background: linear-gradient(140deg, var(--ya-neon-biru), var(--ya-neon-biru-kuat));
    color: rgb(var(--ya-putih-rgb));
    box-shadow: 0 12px 28px -10px rgba(var(--ya-neon-biru-rgb), .9);
    transform: rotate(-12deg);
    animation: ya-hh-stempel .7s cubic-bezier(.34, 1.56, .64, 1) 1.1s both;
}
.ya-hh-stempel::before {
    content: ""; position: absolute; inset: -7px; border-radius: 50%;
    border: 2px dashed rgba(var(--ya-neon-biru-rgb), .6);
    animation: ya-hh-putar 12s linear infinite;
}
@keyframes ya-hh-stempel { from { opacity: 0; transform: rotate(-40deg) scale(1.8); } }

/* Kartu kontak WhatsApp (slot kontak.php) */
.ya-hh-kontak { display: grid; gap: .875rem; width: 100%; max-width: 440px; margin: 0 auto; }
.ya-hh-kontak-kartu {
    --ya-mx: 0px;
    --ya-my: 0px;
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1rem; min-height: 88px;
    padding: 1rem 1.125rem; border-radius: 1.25rem;
    border: 1px solid rgba(var(--ya-tinta-rgb), .12);
    background: rgba(var(--ya-surface-rgb), .9);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    color: var(--ya-arena-teks); text-decoration: none;
    box-shadow: 0 30px 60px -36px var(--ya-lp-bayangan);
    translate: var(--ya-mx) var(--ya-my);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), translate .35s cubic-bezier(.2, .7, .2, 1),
                border-color .25s ease, box-shadow .3s ease;
    animation: ya-hh-kartu-masuk .9s cubic-bezier(.16, 1, .3, 1) backwards;
}
.ya-hh-kontak-kartu:nth-child(1) { animation-delay: .35s; }
.ya-hh-kontak-kartu:nth-child(2) { animation-delay: .5s; }
@media (min-width: 576px) {   /* kartu berlapis miring, lurus saat disentuh */
    .ya-hh-kontak-kartu:nth-child(1) { transform: rotate(-2deg) translateX(-1rem); }
    .ya-hh-kontak-kartu:nth-child(2) { transform: rotate(1.5deg) translateX(1.25rem); }
}
.ya-hh-kontak-kartu::before {   /* kilau yang lewat saat disentuh */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(var(--ya-wa-rgb), .14) 50%, transparent 70%);
    transform: translateX(-110%); transition: transform .7s ease;
}
.ya-hh-kontak-kartu:hover,
.ya-hh-kontak-kartu:focus-visible {
    color: var(--ya-arena-teks); transform: rotate(0deg) translateY(-4px);
    border-color: rgba(var(--ya-wa-rgb), .6);
    box-shadow: 0 34px 70px -34px rgba(var(--ya-wa-rgb), .45);
}
.ya-hh-kontak-kartu:hover::before { transform: translateX(110%); }
.ya-hh-kontak-kartu:focus-visible { outline: 2px solid var(--ya-arena-teks); outline-offset: 3px; }
.ya-hh-kontak-ikon {
    position: relative; flex: none; width: 54px; height: 54px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.5rem;
    color: var(--ya-wa); background: rgba(var(--ya-wa-rgb), .14);
}
.ya-hh-kontak-ikon::after {
    content: ""; position: absolute; inset: -4px; border-radius: 19px;
    border: 1.5px solid rgba(var(--ya-wa-rgb), .5); opacity: 0;
    animation: ya-hh-cincin-ikon 2.6s ease-out infinite;
}
.ya-hh-kontak-kartu:nth-child(2) .ya-hh-kontak-ikon::after { animation-delay: 1.3s; }
@keyframes ya-hh-cincin-ikon { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.ya-hh-kontak-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ya-hh-kontak-teks small { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ya-neon-biru-kuat); }
.ya-hh-kontak-teks b { font-size: 1.25rem; font-weight: 700; font-style: italic; letter-spacing: -.02em; }
.ya-hh-kontak-teks span { font-size: .8125rem; color: var(--ya-arena-teks-2); }
.ya-hh-kontak-panah { flex: none; color: var(--ya-arena-teks-2); transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .2s ease; }
.ya-hh-kontak-kartu:hover .ya-hh-kontak-panah { transform: translateX(4px); color: var(--ya-wa); }

/* =====================================================================
   5. SATU CTA ORANYE PER LAYAR
   Selama CTA hero terlihat (body.ya-hh-cta-terlihat dari hero-halaman.js), tombol Daftar di header disembunyikan.
   ===================================================================== */
[data-ya-daftar-header] { transition: opacity .25s ease, visibility .25s ease; }
.ya-hh-cta-terlihat [data-ya-daftar-header] { opacity: 0; visibility: hidden; pointer-events: none; }

/* =====================================================================
   6. RESPONSIF, HEMAT DAYA, GERAK DIKURANGI, WARNA PAKSA, CETAK
   ===================================================================== */
@media (max-width: 991.98px) {
    .ya-hh-angin i:nth-child(n+4) { display: none; }   /* cukup 3 garis angin di HP */
    .ya-hh-lantai { top: 60%; width: 132%; }
    .ya-hh-huruf { font-size: clamp(9rem, 44vw, 16rem); }
}
@media (max-width: 575.98px) {
    .ya-hh-aksi { gap: .625rem; }
    .ya-hh-aksi > .btn { flex: 1 1 auto; }
    .ya-hh .ya-hh-cta,
    .ya-hh .ya-hh-btn-kaca { min-height: 52px; padding: .75rem 1.125rem; }
    .ya-hh-chip { min-height: 36px; padding: .3125rem .75rem; }
}

/* Hero keluar layar / tab tersembunyi: hero-halaman.js memasang class ini */
.ya-hh--diam *,
.ya-hh--diam *::before,
.ya-hh--diam *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .ya-hh-angin,
    .ya-hh-komet,
    .ya-hh .ya-hh-cta::after { display: none; }
    .ya-hh-pita-jalan,
    .ya-hh-ticker-jalan,
    .ya-hh-aurora::before,
    .ya-hh-aurora::after { animation: none; }
    .ya-hh-condong, .ya-hh-pita, .ya-hh-huruf, .ya-hh-segel, .ya-hh-sinyal, .ya-hh-tumpuk,
    .ya-hh-karakter, .ya-hh-logo, .ya-hh-logo-3d { transition: none; }
}

@media (forced-colors: active) {
    .ya-hh-baris--krom, .ya-hh-baris--krom .ya-hh-karakter,
    .ya-hh-baris--aksen, .ya-hh-baris--aksen .ya-hh-karakter { background: none; -webkit-text-fill-color: currentColor; }
    .ya-hh-dekor { display: none; }
}

@media print {
    .ya-hh-latar, .ya-hh-garis, .ya-hh-dekor, .ya-hh-lapis, .ya-hh-stempel { display: none !important; }
    .ya-hh { color: var(--ya-teks); padding: 1rem 0; }
    .ya-hh-baris--krom, .ya-hh-baris--krom .ya-hh-karakter,
    .ya-hh-baris--aksen, .ya-hh-baris--aksen .ya-hh-karakter { background: none; -webkit-text-fill-color: currentColor; }
}


/* =====================================================================
   7. MOTIF PIALA (kejuaraan.php) — 6 Okt 2026
   Piala garis krom (teks plat dari $hero['piala']) di atas lintasan oval, dua lampu sorot berayun, konfeti,
   kartu juara bermedali ($hero['juara'], maks. 2) dan tiket event ($hero['tiket'], gaya tiket opsi C kanvas).
   Tiket memakai mask (sobekan) di lapisan dalam, bayangan dari drop-shadow di lapisan luar (box-shadow ikut terpotong mask).
   ===================================================================== */
.ya-hh--piala .ya-hh-panggung { min-height: clamp(400px, 112vw, 470px); }
@media (min-width: 992px) { .ya-hh--piala .ya-hh-panggung { min-height: 480px; } }

.ya-hh-sorot {
    position: absolute; top: -18%; width: 52%; height: 118%; transform-origin: 50% 0;
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
}
.ya-hh-sorot--oranye { left: 4%; background: linear-gradient(to bottom, rgba(var(--ya-neon-oranye-rgb), .34), transparent 80%); animation: ya-hh-sorot-kiri 7s ease-in-out infinite alternate; }
.ya-hh-sorot--biru { right: 2%; background: linear-gradient(to bottom, rgba(var(--ya-neon-biru-rgb), .3), transparent 80%); animation: ya-hh-sorot-kanan 8s ease-in-out infinite alternate; }
@keyframes ya-hh-sorot-kiri { from { transform: rotate(-20deg); } to { transform: rotate(6deg); } }
@keyframes ya-hh-sorot-kanan { from { transform: rotate(18deg); } to { transform: rotate(-6deg); } }

.ya-hh-konfeti { position: absolute; inset: -12% 0 0; overflow: hidden; }
.ya-hh-konfeti i {
    position: absolute; top: -20px; width: 7px; height: 13px; border-radius: 2px; opacity: 0;
    animation: ya-hh-konfeti 6s linear infinite;
}
.ya-hh-konfeti i:nth-child(3n+1) { background: var(--ya-neon-oranye); }
.ya-hh-konfeti i:nth-child(3n+2) { background: var(--ya-neon-biru); }
.ya-hh-konfeti i:nth-child(3n) { background: var(--ya-medali-emas); }
.ya-hh-konfeti i:nth-child(1) { left: 8%; animation-delay: -.3s; }
.ya-hh-konfeti i:nth-child(2) { left: 16%; animation-delay: -2.1s; animation-duration: 5.2s; }
.ya-hh-konfeti i:nth-child(3) { left: 23%; animation-delay: -4.4s; }
.ya-hh-konfeti i:nth-child(4) { left: 31%; animation-delay: -1.2s; animation-duration: 7s; }
.ya-hh-konfeti i:nth-child(5) { left: 38%; animation-delay: -3.3s; animation-duration: 5.6s; }
.ya-hh-konfeti i:nth-child(6) { left: 45%; animation-delay: -5.1s; }
.ya-hh-konfeti i:nth-child(7) { left: 52%; animation-delay: -.9s; animation-duration: 6.6s; }
.ya-hh-konfeti i:nth-child(8) { left: 59%; animation-delay: -2.7s; animation-duration: 5.4s; }
.ya-hh-konfeti i:nth-child(9) { left: 66%; animation-delay: -4.8s; }
.ya-hh-konfeti i:nth-child(10) { left: 73%; animation-delay: -1.6s; animation-duration: 7.2s; }
.ya-hh-konfeti i:nth-child(11) { left: 80%; animation-delay: -3.9s; animation-duration: 5.8s; }
.ya-hh-konfeti i:nth-child(12) { left: 86%; animation-delay: -.5s; }
.ya-hh-konfeti i:nth-child(13) { left: 92%; animation-delay: -2.4s; animation-duration: 6.4s; }
.ya-hh-konfeti i:nth-child(14) { left: 97%; animation-delay: -5.6s; animation-duration: 5.1s; }
@keyframes ya-hh-konfeti {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translateY(560px) rotate(540deg); }
}

/* Lintasan oval di bawah piala: cincin luar menyala, cincin dalam putus-putus mengalir */
.ya-hh-piala-lantai { position: absolute; left: 50%; bottom: 19%; width: min(80%, 430px); height: auto; translate: -50% 0; overflow: visible; }
.ya-hh-oval-luar {
    fill: rgba(var(--ya-neon-oranye-rgb), .06); stroke: rgba(var(--ya-tinta-rgb), .18); stroke-width: 2;
    filter: drop-shadow(0 0 14px rgba(var(--ya-neon-oranye-rgb), .45));
}
.ya-hh-oval-dalam { fill: none; stroke: rgba(var(--ya-neon-biru-rgb), .5); stroke-width: 2; stroke-dasharray: 2 3; animation: ya-hh-oval-alir 6s linear infinite; }
@keyframes ya-hh-oval-alir { to { stroke-dashoffset: -100; } }


/* Cone slalom di tepi lintasan: belakang (di lapisan lantai, di belakang piala) dan depan (lapisan setelah piala).
   Cone depan berdenyut bergantian kiri → kanan seperti sedang dilewati skater. Nama kelas ya-hh-pc-* supaya
   tidak bentrok dengan cone motif lintasan (ya-hh-cone-*). */
.ya-hh-piala-lantai--depan { pointer-events: none; }
.ya-hh-pc-badan { fill: var(--ya-neon-oranye); }
.ya-hh-pc-strip { fill: rgb(var(--ya-putih-rgb)); }
.ya-hh-pc-bayang { fill: rgba(var(--ya-neon-oranye-rgb), .35); }
.ya-hh-pc--belakang { opacity: .55; }
.ya-hh-pc-denyut {
    fill: none; stroke: var(--ya-neon-oranye-terang); stroke-width: 2; opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: ya-hh-pc-denyut 4.2s ease-out infinite;
}
.ya-hh-piala-lantai--depan > g:nth-of-type(1) .ya-hh-pc-denyut { animation-delay: .2s; }
.ya-hh-piala-lantai--depan > g:nth-of-type(2) .ya-hh-pc-denyut { animation-delay: .7s; }
.ya-hh-piala-lantai--depan > g:nth-of-type(3) .ya-hh-pc-denyut { animation-delay: 1.2s; }
.ya-hh-piala-lantai--depan > g:nth-of-type(4) .ya-hh-pc-denyut { animation-delay: 1.7s; }
.ya-hh-piala-lantai--depan > g:nth-of-type(5) .ya-hh-pc-denyut { animation-delay: 2.2s; }
.ya-hh-piala-lantai--depan > g:nth-of-type(6) .ya-hh-pc-denyut { animation-delay: 2.7s; }
@keyframes ya-hh-pc-denyut { 0% { opacity: .9; transform: scale(.5); } 16%, 100% { opacity: 0; transform: scale(1.8); } }

/* Piala */
.ya-hh-piala {
    position: absolute; left: 50%; bottom: 33%; width: clamp(140px, 36vw, 190px);
    translate: calc(-50% + var(--ya-tx) * -10px) calc(var(--ya-ty) * -6px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
    animation: ya-hh-piala-masuk 1.2s cubic-bezier(.34, 1.4, .64, 1) .2s backwards;
}
@keyframes ya-hh-piala-masuk { from { opacity: 0; transform: translateY(-40px) scale(1.12); } 55% { opacity: 1; } }
.ya-hh-piala-apung { animation: ya-hh-piala-apung 6s ease-in-out 1.4s infinite alternate; }
@keyframes ya-hh-piala-apung { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.ya-hh-piala svg {
    display: block; width: 100%; height: auto; overflow: visible; font-family: var(--ya-font);
    filter: drop-shadow(0 24px 34px rgba(var(--ya-neon-oranye-rgb), .32));
}
.ya-hh-stop-piala-1 { stop-color: var(--ya-krom-1); }
.ya-hh-stop-piala-2 { stop-color: var(--ya-neon-oranye-terang); }
.ya-hh-stop-piala-3 { stop-color: var(--ya-neon-oranye-gelap); }
.ya-hh-stop-piala-isi { stop-color: var(--ya-neon-oranye); stop-opacity: .35; }
.ya-hh-stop-piala-isi.ya-hh-stop--habis { stop-opacity: .04; }
.ya-hh-piala-mangkuk { fill: url(#ya-hh-piala-isi); stroke: url(#ya-hh-piala-krom); stroke-width: 5; stroke-linejoin: round; }
.ya-hh-piala-garis { fill: none; stroke: url(#ya-hh-piala-krom); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ya-hh-piala-bintang { fill: var(--ya-krom-1); opacity: .85; }
.ya-hh-piala-plat { fill: var(--ya-arena-kartu); stroke: url(#ya-hh-piala-krom); stroke-width: 5; }
.ya-hh-piala-teks { fill: var(--ya-neon-oranye); font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: .18em; }
.ya-hh-piala-sub { fill: var(--ya-arena-teks-2); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; }

/* Kartu juara bermedali */
/* Satu baris di atas piala (rata kanan), supaya tidak menimpa mangkuk piala di panggung yang sempit */
.ya-hh-juara-baris {
    position: absolute; z-index: 3; top: .25rem; left: 0; right: 0;
    display: flex; justify-content: flex-end; align-items: flex-start; gap: .625rem;
    translate: calc(var(--ya-tx) * -18px) calc(var(--ya-ty) * -10px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
}
.ya-hh-juara {
    position: relative; display: flex; align-items: center; gap: .75rem; flex: 0 1 260px; min-width: 0;
    padding: .625rem .875rem .625rem .625rem; border-radius: 1rem;
    border: 1px solid var(--ya-arena-kaca-border); background: var(--ya-arena-kaca);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px -24px var(--ya-lp-bayangan);
    animation: ya-hh-apung 6s ease-in-out infinite alternate;
}
.ya-hh-juara--2 { animation-delay: -2.5s; }
.ya-hh-juara svg { flex: none; width: 34px; height: 41px; overflow: visible; }
.ya-hh-juara-teks { min-width: 0; line-height: 1.25; }
.ya-hh-juara-teks small {
    display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ya-arena-teks-2);
}
.ya-hh-juara-teks b { display: block; font-size: .875rem; font-weight: 700; color: var(--ya-arena-teks); }
.ya-hh-juara-teks span { display: block; font-size: .75rem; color: var(--ya-arena-teks-2); }

/* Tiket event */
.ya-hh-tiket {
    position: absolute; z-index: 2; left: 0; bottom: 0; width: min(300px, 64%);
    transform: rotate(-5deg);
    translate: calc(var(--ya-tx) * -14px) calc(var(--ya-ty) * -8px);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1);
    filter: drop-shadow(0 26px 30px var(--ya-lp-bayangan));
    animation: ya-hh-tiket-masuk 1s cubic-bezier(.16, 1, .3, 1) .5s backwards;
}
@keyframes ya-hh-tiket-masuk { from { opacity: 0; transform: rotate(-12deg) translateY(30px); } }
.ya-hh-tiket-isi {
    display: grid; grid-template-columns: 92px minmax(0, 1fr);
    border-radius: 1.125rem; border: 1px solid var(--ya-arena-kaca-border);
    background: linear-gradient(160deg, var(--ya-arena-kartu-atas), var(--ya-arena-kartu));
    -webkit-mask: radial-gradient(circle 10px at 92px 0, transparent 97%, black) top / 100% 51% no-repeat,
                  radial-gradient(circle 10px at 92px 100%, transparent 97%, black) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 10px at 92px 0, transparent 97%, black) top / 100% 51% no-repeat,
                  radial-gradient(circle 10px at 92px 100%, transparent 97%, black) bottom / 100% 51% no-repeat;
}
.ya-hh-tiket-sobek { display: grid; place-items: center; padding: .75rem; }
.ya-hh-tiket-logo {
    display: grid; place-items: center; width: 68px; height: 68px; overflow: hidden; border-radius: 14px;
    background: var(--ya-lp-logo-dasar); box-shadow: inset 0 0 0 1px rgba(var(--ya-putih-rgb), .08);
}
.ya-hh-tiket-logo img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.ya-hh-tiket-logo b {
    font-size: 1rem; font-weight: 800; font-style: italic; line-height: .95; text-align: center;
    background: linear-gradient(180deg, var(--ya-neon-oranye-terang), var(--ya-neon-oranye) 50%, var(--ya-neon-biru));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ya-hh-tiket-badan { position: relative; min-width: 0; padding: .875rem 1rem; border-left: 2px dashed rgba(var(--ya-tinta-rgb), .18); }
.ya-hh-tiket-status { display: inline-flex; padding: .2rem .55rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; }
.ya-hh-tiket--hasil .ya-hh-tiket-status { color: var(--ya-sukses-teks); background: rgba(var(--ya-sukses-rgb), .14); }
.ya-hh-tiket--akan_datang .ya-hh-tiket-status { color: var(--ya-neon-biru-kuat); background: rgba(var(--ya-neon-biru-rgb), .14); }
.ya-hh-tiket--berlangsung .ya-hh-tiket-status { color: var(--ya-medali-emas-teks); background: rgba(var(--ya-tinta-rgb), .07); }
.ya-hh-tiket--selesai .ya-hh-tiket-status { color: var(--ya-arena-teks-2); background: rgba(var(--ya-tinta-rgb), .07); }
.ya-hh-tiket-nama {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: .375rem 0 .25rem; font-size: .9375rem; font-weight: 700; font-style: italic; line-height: 1.25; color: var(--ya-arena-teks);
}
.ya-hh-tiket-info { display: block; font-size: .75rem; color: var(--ya-arena-teks-2); }
.ya-hh-tiket-kode {
    display: block; width: 92px; height: 14px; margin-top: .5rem; opacity: .45;
    background: repeating-linear-gradient(90deg, rgba(var(--ya-tinta-rgb), .7) 0 2px, transparent 2px 5px, rgba(var(--ya-tinta-rgb), .7) 5px 6px, transparent 6px 10px);
}
.ya-hh-tiket-stempel {
    position: absolute; right: -8px; top: -22px; display: grid; place-items: center; width: 70px; height: 70px; padding: 8px;
    border-radius: 50%; border: 3px double var(--ya-neon-oranye); color: var(--ya-neon-oranye);
    font-size: .5625rem; font-weight: 800; letter-spacing: .08em; line-height: 1.15; text-align: center; text-transform: uppercase;
    transform: rotate(-14deg);
    animation: ya-hh-stempel .7s cubic-bezier(.34, 1.56, .64, 1) 1.4s both;
}

@media (max-width: 991.98px) {
    .ya-hh-piala { bottom: 36%; }
    .ya-hh-piala-lantai { bottom: 26%; }
    .ya-hh-tiket { left: 50%; bottom: 0; width: min(320px, 92%); translate: -50% 0; transform: rotate(-3deg); }
}
@media (max-width: 575.98px) {
    .ya-hh-juara--2 { display: none; }
    .ya-hh-juara { flex-basis: 280px; }
}
@media (prefers-reduced-motion: reduce) {
    .ya-hh-konfeti { display: none; }
    .ya-hh-sorot, .ya-hh-oval-dalam, .ya-hh-piala, .ya-hh-piala-apung, .ya-hh-juara, .ya-hh-tiket, .ya-hh-tiket-stempel,
    .ya-hh-pc-denyut { animation: none; }
    .ya-hh-piala, .ya-hh-juara, .ya-hh-tiket { transition: none; }
}