/*
 * assets/css/publik.css
 * Halaman publik Rodium (landing, ranking, profil). Memakai token theme.css saja.
 * Animasi khas: jalur slalom di hero, judul muncul per kata, podium naik, segmen geser, cone menyala saat digulir.
 */

.rd-wadah { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.rd-lompat { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: var(--rd-aksen); color: var(--rd-aksen-teks); padding: .5rem 1rem; border-radius: 999px; }

/* ================= HEADER ================= */
.rd-ph {
    position: sticky; top: 0; z-index: 1030; background: var(--rd-navy); color: var(--rd-navy-teks);
    transition: box-shadow .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
}
.rd-ph-isi { height: var(--rd-header-tinggi); display: flex; align-items: center; gap: 2rem; transition: height .25s ease; }
.rd-ph.is-gulir { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.rd-ph.is-gulir .rd-ph-isi { height: 3.75rem; }
.rd-ph.is-sembunyi { transform: translateY(-100%); }
.rd-ph .rd-logo { color: var(--rd-navy-teks); }
.rd-ph-menu { gap: 1.75rem; font-size: .95rem; font-weight: 500; }
.rd-ph-menu a { color: var(--rd-navy-redup); position: relative; padding: .4rem 0; transition: color var(--rd-transisi); }
.rd-ph-menu a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--rd-aksen);
    transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.rd-ph-menu a:hover, .rd-ph-menu a.is-aktif { color: var(--rd-navy-teks); }
.rd-ph-menu a:hover::after, .rd-ph-menu a.is-aktif::after { transform: scaleX(1); }
.rd-ph-aksi { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.rd-btn-ikon-navy { background: transparent; border-color: var(--rd-navy-garis); color: var(--rd-navy-teks); }
.rd-btn-ikon-navy:hover { background: var(--rd-navy-2); }

/* ================= HERO ================= */
.rd-hero { position: relative; background: var(--rd-navy); color: var(--rd-navy-teks); overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.rd-hero-cahaya {
    position: absolute; inset: -20% -10% auto auto; width: 60%; height: 120%; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--rd-aksen) 22%, transparent), transparent 70%);
    transform: translate3d(calc(var(--rd-tx, 0) * 24px), calc(var(--rd-ty, 0) * 18px), 0);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.rd-hero-isi { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(2rem, 5vw, 3.5rem); }
.rd-hero-teks { flex: 1 1 32rem; min-width: 0; }
.rd-chip-hero {
    display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .95rem; border-radius: 999px;
    background: var(--rd-navy-2); color: var(--rd-langit); font-size: .82rem; font-weight: 600;
    animation: rd-pudar-naik .6s .05s both;
}
.rd-titik-hidup { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rd-aksen); position: relative; }
.rd-titik-hidup::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rd-aksen); animation: rd-denyut 1.8s ease-out infinite; }
@keyframes rd-denyut { to { transform: scale(3); opacity: 0; } }

.rd-hero-judul { font-weight: 700; font-style: italic; font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; margin: 1.25rem 0 1.1rem; }
.rd-baris { display: block; }
.rd-aksen-teks { color: var(--rd-aksen); }
/* Judul per kata: tiap kata naik dari balik garis (dipecah publik.js) */
.rd-kata { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .06em .08em 0; margin: 0 -.06em -.08em 0; }
.rd-kata > span { display: inline-block; animation: rd-kata-naik .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i, 0) * 90ms); }
@keyframes rd-kata-naik { from { transform: translateY(105%) skewY(6deg); } }
.rd-hero-sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--rd-navy-redup); max-width: 34rem; margin: 0 0 1.6rem; animation: rd-pudar-naik .7s .55s both; }
@keyframes rd-pudar-naik { from { opacity: 0; transform: translateY(14px); } }

.rd-cari { position: relative; display: flex; gap: .5rem; max-width: 34rem; padding: .35rem; border-radius: 999px; background: var(--rd-permukaan); animation: rd-pudar-naik .7s .7s both; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.rd-cari-ikon { position: absolute; left: 1.25rem; top: 50%; translate: 0 -50%; color: var(--rd-teks-redup); }
.rd-cari-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--rd-teks); font: inherit; padding: 0 .75rem 0 2.6rem; min-height: 2.875rem; border-radius: 999px; }
.rd-cari-input:focus { outline: none; }
.rd-cari:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rd-aksen) 45%, transparent), 0 12px 30px rgba(0, 0, 0, .2); }
.rd-cari.is-goyang { animation: rd-goyang .4s; }
@keyframes rd-goyang { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.rd-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; animation: rd-pudar-naik .7s .85s both; }

/* Podium: kartu naik berurutan, tiap kartu sedikit melayang */
.rd-podium { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.rd-podium-kepala { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; color: var(--rd-navy-redup); padding: 0 .25rem; animation: rd-pudar-naik .6s .5s both; }
.rd-podium-kartu {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--rd-radius-kartu);
    background: var(--rd-navy-2); border: 1px solid var(--rd-navy-garis);
    animation: rd-podium-masuk .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.6s + var(--rd-urut) * 140ms);
    transition: transform .3s var(--rd-pegas), border-color .2s ease;
}
.rd-podium-kartu:hover { transform: translateX(-6px); border-color: var(--rd-aksen); }
.rd-podium-1 { margin-right: -.5rem; }
.rd-podium-2 { margin-right: 1rem; }
.rd-podium-3 { margin-right: 2.5rem; }
@keyframes rd-podium-masuk { from { opacity: 0; transform: translateX(40px) scale(.96); } }
.rd-podium-pos { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-style: italic; font-size: 1.6rem; }
.rd-podium-1 .rd-podium-pos { background: var(--rd-aksen); color: var(--rd-aksen-teks); }
.rd-podium-2 .rd-podium-pos { background: var(--rd-navy-teks); color: var(--rd-navy); }
.rd-podium-3 .rd-podium-pos { background: var(--rd-langit); color: var(--rd-navy); }
.rd-podium-nama { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-podium-nama strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rd-podium-nama small, .rd-podium-poin small { color: var(--rd-navy-redup); font-size: .8rem; }
.rd-podium-poin { text-align: right; line-height: 1.1; }
.rd-podium-poin b { display: block; font-size: 1.5rem; font-weight: 700; }

/* Jalur slalom */
.rd-jalur { position: relative; margin-top: clamp(2rem, 4vw, 3rem); height: clamp(80px, 11vw, 140px); }
.rd-jalur-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rd-jalur-dasar { fill: none; stroke: var(--rd-navy-garis); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rd-jalur-gores { fill: none; stroke: var(--rd-aksen); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: .55; vector-effect: non-scaling-stroke; animation: rd-gores 2.4s .9s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes rd-gores { to { stroke-dashoffset: 0; } }
.rd-cone { fill: var(--rd-aksen); transform-box: fill-box; transform-origin: 50% 100%; animation: rd-cone-tap 8s infinite; animation-delay: calc(var(--rd-c) * .755s + .6s); }
.rd-cone:nth-child(even) { fill: var(--rd-langit); }
@keyframes rd-cone-tap { 0% { transform: scale(1); } 2% { transform: scale(1.35) rotate(-8deg); filter: brightness(1.3); } 6%, 100% { transform: scale(1); } }
.rd-skater-cahaya { fill: var(--rd-aksen); opacity: .22; }
.rd-skater-titik { fill: var(--rd-navy-teks); stroke: var(--rd-aksen); stroke-width: 3; }
.rd-skater-ekor { fill: var(--rd-aksen); }
.rd-hero.is-diam .rd-cone, .rd-hero.is-diam .rd-titik-hidup::after { animation-play-state: paused; }

/* ================= ANGKA ================= */
.rd-angka-strip { background: var(--rd-permukaan); border-bottom: 1px solid var(--rd-garis); }
.rd-angka-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.rd-angka-grid > div { display: flex; flex-direction: column; }
.rd-angka-grid b { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 700; font-style: italic; letter-spacing: -.03em; line-height: 1.1; color: var(--rd-primary); }
.rd-angka-grid > div > span { color: var(--rd-teks-redup); font-size: .9rem; }

/* ================= BAGIAN ================= */
.rd-bagian { padding: clamp(3.5rem, 8vw, 5.5rem) 0; scroll-margin-top: 3.5rem; }
.rd-bagian-alt { background: var(--rd-permukaan); border-top: 1px solid var(--rd-garis); border-bottom: 1px solid var(--rd-garis); }
.rd-bagian-kepala { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.5rem; }
.rd-label-bagian { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-aksen-label); }
.rd-judul-bagian { font-size: clamp(2rem, 4.2vw, 2.75rem); margin: .25rem 0 .35rem; }
.rd-teks-bagian { color: var(--rd-teks-redup); margin: 0; max-width: 36rem; }

/* Segmen dengan penanda yang bergeser */
.rd-segmen { position: relative; display: inline-flex; padding: .3rem; border-radius: 999px; background: var(--rd-permukaan); border: 1px solid var(--rd-garis); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rd-segmen button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--rd-teks-redup); font: inherit; font-weight: 500; font-size: .9rem; padding: 0 1.1rem; min-height: 2.5rem; border-radius: 999px; white-space: nowrap; cursor: pointer; transition: color .25s ease; }
.rd-segmen button[aria-selected="true"] { color: var(--rd-navy-teks); font-weight: 600; }
.rd-segmen-geser { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0; width: 0; border-radius: 999px; background: var(--rd-navy); transition: transform .45s var(--rd-pegas), width .45s var(--rd-pegas); }
[data-bs-theme="dark"] .rd-segmen-geser { background: var(--rd-aksen); }
[data-bs-theme="dark"] .rd-segmen button[aria-selected="true"] { color: var(--rd-aksen-teks); }
.rd-segmen-kecil button { padding: 0 .95rem; }

.rd-filter { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.rd-chip-baris { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .15rem; margin: -.15rem; }
.rd-chip {
    flex: none; display: inline-flex; align-items: baseline; gap: .35rem; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px;
    border: 1px solid var(--rd-garis); background: var(--rd-permukaan); color: var(--rd-teks); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .3s var(--rd-pegas);
}
.rd-chip small { font-weight: 400; color: var(--rd-teks-redup); font-size: .75rem; }
.rd-chip:hover { border-color: var(--rd-teks-redup); }
.rd-chip:active { transform: scale(.95); }
.rd-chip.is-aktif { background: var(--rd-aksen-lembut); border-color: var(--rd-aksen); color: var(--rd-aksen-tua); }
.rd-chip.is-aktif small { color: var(--rd-aksen-tua); }

/* Daftar ranking (satu struktur untuk desktop & HP, baris bergeser saat filter berubah) */
.rd-ranking { overflow: hidden; }
.rd-ranking-kepala, .rd-baris-atlet { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, .8fr) 5rem 8rem; align-items: center; gap: 1rem; padding: 0 1.5rem; }
.rd-ranking-kepala { min-height: 3rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--rd-teks-redup); background: var(--rd-permukaan-2); border-bottom: 1px solid var(--rd-garis); }
.rd-ranking-daftar { list-style: none; margin: 0; padding: 0; position: relative; }
.rd-ranking-daftar > li { border-top: 1px solid var(--rd-garis-lembut); background: var(--rd-permukaan); position: relative; }
.rd-ranking-daftar > li:first-child { border-top: 0; }
.rd-baris-atlet { width: 100%; min-height: 4.25rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.rd-baris-atlet:hover { background: var(--rd-permukaan-2); }
.rd-baris-atlet:hover .rd-baris-nama strong { color: var(--rd-primary); }
.rd-baris-atlet:hover .rd-baris-panah { opacity: 1; transform: translateX(0); }
.rd-pos { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-style: italic; background: var(--rd-permukaan-2); border: 1px solid var(--rd-garis); }
.rd-pos-1 { background: var(--rd-aksen); color: var(--rd-aksen-teks); border-color: transparent; }
.rd-pos-2 { background: var(--rd-navy); color: var(--rd-navy-teks); border-color: transparent; }
[data-bs-theme="dark"] .rd-pos-2 { background: var(--rd-teks); color: var(--rd-bg); }
.rd-pos-3 { background: var(--rd-langit-lembut); color: var(--rd-navy); border-color: transparent; }
[data-bs-theme="dark"] .rd-pos-3 { color: var(--rd-teks); }
.rd-baris-nama { display: flex; flex-direction: column; min-width: 0; }
.rd-baris-nama strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; }
.rd-baris-nama small { color: var(--rd-teks-redup); font-size: .8rem; }
.rd-kol-klub { color: var(--rd-teks-redup); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-kol-hasil { color: var(--rd-teks-redup); font-size: .9rem; text-align: center; }
.rd-baris-poin { text-align: right; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.rd-baris-panah { color: var(--rd-aksen); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s ease; font-size: .85rem; }
.rd-baris-sorot { animation: rd-sorot 1.8s ease; }
@keyframes rd-sorot { 0%, 30% { background: var(--rd-aksen-lembut); } }
.rd-ranking-kosong { padding: 2.5rem 1.5rem; text-align: center; color: var(--rd-teks-redup); }

.rd-catatan-transisi { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 1rem; background: var(--rd-aksen-lembut); color: var(--rd-aksen-tua); font-size: .9rem; }
.rd-catatan-transisi i { margin-top: .2rem; }

/* ================= CARA KERJA ================= */
.rd-langkah {
    --rd-progres: 0;
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;
}
.rd-langkah::before, .rd-langkah::after { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 4px; border-radius: 4px; }
.rd-langkah::before { background: repeating-linear-gradient(90deg, var(--rd-garis) 0 10px, transparent 10px 18px); }
.rd-langkah::after { background: var(--rd-aksen); transform-origin: left; transform: scaleX(var(--rd-progres)); transition: transform .15s linear; }
.rd-langkah-item { position: relative; z-index: 1; }
.rd-langkah-cone {
    width: 2.8rem; height: 2.8rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--rd-permukaan); border: 2px solid var(--rd-garis); margin-bottom: 1rem;
    transition: background-color .3s ease, border-color .3s ease, transform .5s var(--rd-pegas);
}
.rd-langkah-cone svg { width: 1.3rem; height: 1.3rem; }
.rd-langkah-cone path, .rd-langkah-cone rect { fill: var(--rd-garis); transition: fill .3s ease; }
.rd-langkah-item.is-lewat .rd-langkah-cone { background: var(--rd-aksen); border-color: var(--rd-aksen); transform: scale(1.12) rotate(-6deg); }
.rd-langkah-item.is-lewat .rd-langkah-cone path, .rd-langkah-item.is-lewat .rd-langkah-cone rect { fill: var(--rd-aksen-teks); }
.rd-langkah-item h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; }
.rd-langkah-item p { color: var(--rd-teks-redup); font-size: .92rem; margin: 0; }

/* ================= KLUB ================= */
.rd-klub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.rd-klub { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; color: var(--rd-teks); position: relative; overflow: hidden; }
.rd-klub:hover { color: var(--rd-teks); }
.rd-klub::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--rd-aksen); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.rd-klub:hover::after { transform: scaleX(1); }
.rd-klub-logo { flex: none; width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--rd-primary-lembut); color: var(--rd-primary); transition: transform .5s var(--rd-pegas); }
.rd-klub:hover .rd-klub-logo { transform: rotate(-10deg) scale(1.08); }
.rd-klub strong { display: block; font-weight: 600; }
.rd-klub small { color: var(--rd-teks-redup); font-size: .82rem; }
.rd-klub-tambah { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--rd-radius-kartu); border: 2px dashed var(--rd-garis); color: var(--rd-teks); transition: border-color .2s ease, background-color .2s ease; }
.rd-klub-tambah:hover { border-color: var(--rd-aksen); background: var(--rd-aksen-lembut); color: var(--rd-teks); }
.rd-klub-tambah i { width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--rd-aksen); color: var(--rd-aksen-teks); }
.rd-klub-tambah strong { display: block; }
.rd-klub-tambah small { color: var(--rd-teks-redup); }

/* ================= CTA ================= */
.rd-cta-wadah { padding-bottom: clamp(3.5rem, 8vw, 5.5rem); }
.rd-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.75rem, 5vw, 3rem); border-radius: var(--rd-radius-lapis); background: var(--rd-primary); color: var(--rd-primary-teks); }
[data-bs-theme="dark"] .rd-cta { background: var(--rd-navy-2); color: var(--rd-teks); border: 1px solid var(--rd-garis); }
.rd-cta h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0 0 .4rem; }
.rd-cta p { margin: 0; opacity: .85; max-width: 30rem; }
.rd-cta-aksi { position: relative; z-index: 1; }
.rd-cta-cone { position: absolute; right: 2rem; bottom: .9rem; display: flex; gap: 1.6rem; opacity: .5; pointer-events: none; }
.rd-cta-cone span { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid var(--rd-aksen); animation: rd-cone-gelombang 2.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .12s); }
.rd-cta-cone span:nth-child(2) { --n: 1; } .rd-cta-cone span:nth-child(3) { --n: 2; } .rd-cta-cone span:nth-child(4) { --n: 3; }
.rd-cta-cone span:nth-child(5) { --n: 4; } .rd-cta-cone span:nth-child(6) { --n: 5; } .rd-cta-cone span:nth-child(7) { --n: 6; }
@keyframes rd-cone-gelombang { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }

/* ================= FOOTER ================= */
.rd-footer { background: var(--rd-navy); color: var(--rd-navy-redup); padding: 2.75rem 0; font-size: .9rem; }
.rd-footer-isi { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.rd-footer .rd-logo-teks { color: var(--rd-navy-teks); font-size: 1.35rem; }
.rd-footer p { margin: .5rem 0 0; }
.rd-footer-menu { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.rd-footer-menu a { color: var(--rd-navy-redup); }
.rd-footer-menu a:hover { color: var(--rd-navy-teks); }

/* ================= NAVIGASI BAWAH (HP) ================= */
.rd-navbawah {
    position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index: 1035;
    height: 4.1rem; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    background: var(--rd-permukaan); border: 1px solid var(--rd-garis); border-radius: 1.4rem; box-shadow: var(--rd-bayang-angkat);
}
.rd-navbawah a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; height: 100%; color: var(--rd-teks-redup); font-size: .68rem; font-weight: 600; transition: color .25s ease; }
.rd-navbawah a i { font-size: 1.1rem; transition: transform .4s var(--rd-pegas); }
.rd-navbawah a.is-aktif { color: var(--rd-teks); }
.rd-navbawah a.is-aktif i { color: var(--rd-aksen); transform: translateY(-2px) scale(1.1); }
.rd-navbawah-penanda { position: absolute; z-index: 0; top: .45rem; bottom: .45rem; left: .35rem; width: calc((100% - .7rem) / 5); border-radius: 1rem; background: var(--rd-aksen-lembut); transform: translateX(calc(var(--rd-indeks, 0) * 100%)); transition: transform .45s var(--rd-pegas); }
@media (max-width: 991.98px) {
    .rd-publik { padding-bottom: 5.5rem; }
}

/* ================= RINCIAN POIN ================= */
.rd-rincian { --bs-offcanvas-width: min(28rem, 100vw); background: var(--rd-bg); color: var(--rd-teks); }
.rd-rincian .offcanvas-header { align-items: flex-start; border-bottom: 1px solid var(--rd-garis); background: var(--rd-permukaan); }
.rd-rincian-meta { color: var(--rd-teks-redup); font-size: .85rem; margin-top: .25rem; }
.rd-rincian-total { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.25rem; border-radius: var(--rd-radius-kartu); background: var(--rd-navy); color: var(--rd-navy-teks); margin-bottom: 1rem; }
.rd-rincian-total b { font-size: 2rem; font-style: italic; }
.rd-rincian-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.rd-rincian-item { background: var(--rd-permukaan); border: 1px solid var(--rd-garis); border-radius: 1rem; padding: 1rem 1.1rem; animation: rd-pudar-naik .5s both; animation-delay: calc(.15s + var(--rd-urut, 0) * 90ms); }
.rd-rincian-item-atas { display: flex; justify-content: space-between; gap: .75rem; font-weight: 600; }
.rd-rincian-item-bawah { font-size: .8rem; color: var(--rd-teks-redup); margin-top: .15rem; }
.rd-rincian-bar { height: .55rem; border-radius: 999px; background: var(--rd-garis-lembut); margin-top: .7rem; overflow: hidden; }
.rd-rincian-bar span { display: block; height: 100%; border-radius: 999px; background: var(--rd-aksen); width: 0; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.rd-rincian-item.is-separuh .rd-rincian-bar span { background: var(--rd-langit); }
.rd-rincian-rumus { color: var(--rd-teks-redup); font-size: .82rem; margin: 1.25rem 0 0; }

/* ================= RESPONSIF ================= */
@media (max-width: 767.98px) {
    .rd-ranking-kepala { display: none; }
    .rd-baris-atlet { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .75rem; padding: .7rem 1rem; }
    .rd-baris-atlet .rd-kol-klub, .rd-baris-atlet .rd-kol-hasil { display: none; }
    .rd-baris-panah { opacity: 1; transform: none; }
    .rd-langkah { grid-template-columns: 1fr; gap: 1.25rem; padding-left: 4rem; }
    .rd-langkah::before, .rd-langkah::after { left: 1.3rem; right: auto; top: .5rem; bottom: .5rem; width: 4px; height: auto; }
    .rd-langkah::before { background: repeating-linear-gradient(180deg, var(--rd-garis) 0 10px, transparent 10px 18px); }
    .rd-langkah::after { transform-origin: top; transform: scaleY(var(--rd-progres)); }
    .rd-langkah-cone { position: absolute; left: -4rem; top: -.2rem; margin: 0; }
    .rd-podium-1, .rd-podium-2, .rd-podium-3 { margin-right: 0; }
    .rd-cari .rd-btn { padding: 0 1.1rem; }
    .rd-filter { flex-direction: column; align-items: stretch; }
    .rd-segmen-kecil { align-self: flex-start; }
    .rd-bagian-kepala .rd-segmen { width: 100%; }
    .rd-bagian-kepala .rd-segmen button { flex: 1; padding: 0 .5rem; }
    .rd-hp-sembunyi { display: none; }
}
@media (max-width: 575.98px) {
    .rd-cta-cone { display: none; }
}

/* =====================================================================
   FASE 4 — halaman publik (beranda, ranking, atlet, klub, event)
   ===================================================================== */

/* Podium berupa tautan */
a.rd-podium-kartu { color: var(--rd-navy-teks); }
a.rd-podium-kartu:hover { color: var(--rd-navy-teks); }
.rd-podium-kosong .rd-podium-pos { background: var(--rd-navy); color: var(--rd-aksen); font-size: 1.2rem; }
.rd-podium-kosong .rd-podium-nama strong { white-space: normal; }

/* Avatar (sama dengan panel) */
.rd-avatar { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--rd-primary-lembut); color: var(--rd-primary); font-weight: 700; font-size: .8rem; font-style: normal; }
.rd-avatar-md { width: 2.9rem; height: 2.9rem; font-size: .95rem; }
.rd-avatar-xl { width: clamp(4.5rem, 12vw, 6.5rem); height: clamp(4.5rem, 12vw, 6.5rem); font-size: clamp(1.4rem, 3.5vw, 2rem); }
.rd-avatar-gambar { background: var(--rd-permukaan-2); border: 1px solid var(--rd-garis); }
.rd-avatar-gambar img { width: 100%; height: 100%; object-fit: cover; }

/* Segmen & chip berupa tautan */
.rd-segmen a { position: relative; z-index: 1; display: inline-flex; align-items: center; color: var(--rd-teks-redup); font-weight: 500; font-size: .9rem; padding: 0 1.1rem; min-height: 2.5rem; border-radius: 999px; white-space: nowrap; transition: color .25s ease; }
.rd-segmen a:hover { color: var(--rd-teks); }
.rd-segmen a.is-aktif { color: var(--rd-navy-teks); font-weight: 600; }
[data-bs-theme="dark"] .rd-segmen a.is-aktif { color: var(--rd-aksen-teks); }
.rd-segmen-kecil a { padding: 0 .95rem; }
.rd-segmen:not(.is-siap) a.is-aktif { background: var(--rd-navy); }
[data-bs-theme="dark"] .rd-segmen:not(.is-siap) a.is-aktif { background: var(--rd-aksen); }
a.rd-chip { align-items: center; color: var(--rd-teks); }
a.rd-chip:hover { color: var(--rd-teks); }
a.rd-chip.is-aktif { color: var(--rd-aksen-tua); }
.rd-filter-disiplin { margin-bottom: .75rem; }

/* Daftar ranking: avatar + nama, kolom poin per event (halaman Ranking) */
.rd-baris-atlet-nama { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.rd-ranking-blok.is-memuat [data-rd-ranking-isi] { opacity: .55; transition: opacity .2s ease; }
.rd-ranking-geser { overflow-x: auto; }
.rd-ranking-lengkap .rd-ranking-kepala, .rd-ranking-lengkap .rd-baris-atlet {
    grid-template-columns: 3.5rem minmax(13rem, 1.6fr) 4.5rem repeat(var(--rd-kol-event), minmax(6.5rem, 1fr)) 6.5rem;
    min-width: calc(31rem + var(--rd-kol-event) * 7.5rem);
}
.rd-kol-event { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.2; min-width: 0; }
.rd-ranking-kepala .rd-kol-event { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.rd-ranking-kepala .rd-kol-event small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.rd-kol-event b { font-weight: 600; }
.rd-kol-event small { color: var(--rd-teks-redup); font-size: .72rem; }
.rd-ranking-alat { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; color: var(--rd-teks-redup); }
.rd-ranking-alat strong { color: var(--rd-teks); }
.rd-ranking-semua { margin: 1rem 0 0; text-align: center; }
.rd-teks-redup { color: var(--rd-teks-redup); }

/* Kotak cari kecil (di tabel ranking, daftar klub) */
.rd-cari-kecil { position: relative; display: flex; align-items: center; min-width: min(100%, 18rem); margin: 0; }
.rd-cari-kecil i { position: absolute; left: 1rem; color: var(--rd-teks-redup); pointer-events: none; }
.rd-cari-kecil input { width: 100%; min-height: 2.75rem; border-radius: 999px; border: 1px solid var(--rd-garis); background: var(--rd-permukaan); color: var(--rd-teks); padding: 0 1rem 0 2.6rem; font: inherit; }
.rd-cari-kecil input:focus { outline: 0; border-color: var(--rd-aksen); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--rd-aksen) 25%, transparent); }

/* Saran pencarian atlet (hero & halaman Atlet) */
.rd-cari { z-index: 5; }
.rd-saran {
    position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 20; list-style: none; margin: 0; padding: .4rem;
    background: var(--rd-permukaan); color: var(--rd-teks); border: 1px solid var(--rd-garis); border-radius: 1.1rem; box-shadow: var(--rd-bayang-angkat);
    max-height: min(24rem, 60vh); overflow-y: auto; text-align: left;
}
.rd-saran a { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: .8rem; color: var(--rd-teks); min-height: 44px; }
.rd-saran a:hover, .rd-saran a.is-pilih { background: var(--rd-permukaan-2); color: var(--rd-teks); }
.rd-saran a span { display: flex; flex-direction: column; min-width: 0; }
.rd-saran strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-saran small { color: var(--rd-teks-redup); font-size: .78rem; }
.rd-saran-info { padding: .75rem; color: var(--rd-teks-redup); font-size: .88rem; }

/* Halaman publik umum */
.rd-halaman { padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(3rem, 7vw, 4.5rem); min-height: 60vh; }
.rd-wadah-sempit { max-width: 52rem; }
.rd-halaman-kepala { margin-bottom: 1.5rem; }
.rd-halaman-kepala-aksi { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.rd-judul-halaman { font-size: clamp(2rem, 4.6vw, 2.9rem); margin: .2rem 0 .4rem; }
.rd-remah-publik { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; font-size: .85rem; color: var(--rd-teks-redup); }
.rd-remah-publik li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.rd-remah-publik a { color: var(--rd-teks-redup); }
.rd-remah-publik a:hover { color: var(--rd-primary); }
.rd-subjudul { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .9rem; }
.rd-subjudul small { font-size: .85rem; font-weight: 500; color: var(--rd-teks-redup); margin-left: .35rem; }
.rd-kosong-publik { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.4rem; border-radius: var(--rd-radius-kartu); background: var(--rd-permukaan); border: 1px dashed var(--rd-garis); color: var(--rd-teks-redup); margin: 1rem 0 0; }
.rd-kosong-publik i { color: var(--rd-aksen); font-size: 1.1rem; }
.rd-catatan-kecil { color: var(--rd-teks-redup); font-size: .82rem; margin: .9rem 0 0; }
.rd-hasil-jumlah { color: var(--rd-teks-redup); font-size: .9rem; margin: 1.25rem 0 .6rem; }
.rd-cari-halaman { max-width: none; box-shadow: var(--rd-bayang); border: 1px solid var(--rd-garis); animation: none; }

/* Kartu atlet (hasil cari, atlet klub) */
.rd-daftar-atlet { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.rd-daftar-atlet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.rd-atlet-kartu { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; color: var(--rd-teks); min-height: 4rem; }
.rd-atlet-kartu:hover { color: var(--rd-teks); }
.rd-atlet-kartu:hover .rd-baris-panah { opacity: 1; transform: none; }
.rd-atlet-kartu-teks { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rd-atlet-kartu-teks strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-atlet-kartu-teks small { color: var(--rd-teks-redup); font-size: .8rem; }

/* Kepala profil (atlet & klub) */
.rd-profil-kepala { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); padding: clamp(1.1rem, 3vw, 1.75rem); flex-wrap: wrap; }
.rd-profil-teks { flex: 1 1 18rem; min-width: 0; }
.rd-profil-teks h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .3rem; overflow-wrap: anywhere; }
.rd-profil-id { color: var(--rd-teks-redup); margin: 0 0 .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.rd-profil-klub { display: inline-flex; align-items: center; gap: .6rem; color: var(--rd-teks); font-size: .95rem; }
.rd-profil-klub:hover { color: var(--rd-primary); }
.rd-profil-klub img { width: 1.75rem; height: 1.75rem; border-radius: 999px; object-fit: cover; border: 1px solid var(--rd-garis); }
.rd-profil-tautan { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; font-size: .92rem; }
.rd-profil-tautan a { display: inline-flex; align-items: center; gap: .4rem; }
.rd-profil-salin { align-self: flex-start; }

/* Posisi ranking atlet */
.rd-posisi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.rd-posisi-kartu { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.2rem; color: var(--rd-teks); }
.rd-posisi-kartu:hover { color: var(--rd-teks); }
.rd-posisi-disiplin { font-size: .8rem; font-weight: 600; color: var(--rd-teks-redup); text-transform: uppercase; letter-spacing: .06em; }
.rd-posisi-angka { font-size: 2rem; font-weight: 700; font-style: italic; line-height: 1.1; color: var(--rd-primary); }
.rd-posisi-angka small { font-size: .85rem; font-style: normal; font-weight: 500; color: var(--rd-teks-redup); }
.rd-posisi-poin { font-size: .88rem; color: var(--rd-teks-redup); }

/* Tabel publik (riwayat hasil) — kartu bertumpuk di HP */
.rd-tabel-publik-wadah { overflow: hidden; }
.rd-tabel-publik { width: 100%; border-collapse: collapse; }
.rd-tabel-publik th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--rd-teks-redup); background: var(--rd-permukaan-2); padding: .85rem 1rem; border-bottom: 1px solid var(--rd-garis); }
.rd-tabel-publik td { padding: .8rem 1rem; border-top: 1px solid var(--rd-garis-lembut); vertical-align: middle; }
.rd-tabel-publik td small { display: block; color: var(--rd-teks-redup); font-size: .78rem; }
.rd-tabel-publik td a { font-weight: 600; }
.rd-baris-redup td { color: var(--rd-teks-redup); }
.rd-baris-redup td strong { font-weight: 500; }

/* Klub */
.rd-klub-logo-gambar { background: var(--rd-permukaan); border: 1px solid var(--rd-garis); overflow: hidden; }
.rd-klub-logo-gambar img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.rd-klub-logo-besar { width: clamp(4.5rem, 12vw, 6.5rem); height: clamp(4.5rem, 12vw, 6.5rem); font-size: clamp(1.2rem, 3vw, 1.7rem); }
.rd-angka-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.rd-angka-mini > div { background: var(--rd-permukaan); border: 1px solid var(--rd-garis); border-radius: 1rem; padding: .9rem 1.1rem; display: flex; flex-direction: column; }
.rd-angka-mini b { font-size: 1.7rem; font-weight: 700; font-style: italic; color: var(--rd-primary); line-height: 1.1; }
.rd-angka-mini span { color: var(--rd-teks-redup); font-size: .82rem; }

/* Event */
.rd-event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.rd-event-kartu { display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.3rem; color: var(--rd-teks); }
.rd-event-kartu:hover { color: var(--rd-teks); }
.rd-event-kartu strong { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin-bottom: .25rem; }
.rd-event-jenis { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-aksen-label); }
.rd-event-meta { display: flex; align-items: center; gap: .5rem; color: var(--rd-teks-redup); font-size: .88rem; }
.rd-event-meta i { width: 1rem; text-align: center; }
.rd-event-angka { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--rd-garis-lembut); font-size: .85rem; font-weight: 600; color: var(--rd-primary); display: flex; justify-content: space-between; align-items: center; }
.rd-filter-pilih { display: flex; flex-wrap: wrap; gap: .5rem; }
.rd-filter-pilih .form-select { width: auto; min-width: 10rem; min-height: 2.75rem; border-radius: 999px; }
.rd-filter-pilih-event { margin: 1.25rem 0 0; }
.rd-info-event { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 1.5rem; padding: 1.1rem 1.4rem; margin: 0; }
.rd-info-event dt { font-size: .75rem; font-weight: 600; color: var(--rd-teks-redup); text-transform: uppercase; letter-spacing: .06em; }
.rd-info-event dd { margin: .15rem 0 0; font-weight: 600; }
.rd-kelas-publik { margin-top: 1.25rem; overflow: hidden; }
.rd-kelas-publik-kepala { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .95rem 1.25rem; background: var(--rd-permukaan-2); border-bottom: 1px solid var(--rd-garis); }
.rd-kelas-publik-kepala h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.rd-kelas-publik-kepala > span { color: var(--rd-teks-redup); font-size: .85rem; }
.rd-hasil-daftar { list-style: none; margin: 0; padding: 0; }
.rd-hasil-daftar li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .7rem 1.25rem; border-top: 1px solid var(--rd-garis-lembut); }
.rd-hasil-daftar li:first-child { border-top: 0; }
.rd-hasil-atlet { display: flex; align-items: center; gap: .75rem; min-width: 0; color: var(--rd-teks); }
.rd-hasil-atlet:hover { color: var(--rd-primary); }
.rd-hasil-poin { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.rd-hasil-poin b { font-size: 1.1rem; font-weight: 700; }
.rd-hasil-poin small { color: var(--rd-teks-redup); font-size: .75rem; }
.rd-pos-status { font-size: .72rem; font-style: normal; color: var(--rd-teks-redup); }

/* Menu HP (offcanvas bawah) */
.rd-menu-hp { --bs-offcanvas-height: auto; background: var(--rd-permukaan); color: var(--rd-teks); border-radius: 1.5rem 1.5rem 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.rd-menu-hp-daftar { display: flex; flex-direction: column; gap: .25rem; }
.rd-menu-hp-daftar a { display: flex; align-items: center; gap: .9rem; min-height: 3rem; padding: 0 .9rem; border-radius: .9rem; color: var(--rd-teks); font-weight: 500; }
.rd-menu-hp-daftar a i { width: 1.25rem; text-align: center; color: var(--rd-teks-redup); }
.rd-menu-hp-daftar a.is-aktif { background: var(--rd-aksen-lembut); color: var(--rd-aksen-tua); }
.rd-menu-hp-daftar a.is-aktif i { color: var(--rd-aksen); }
.rd-cta-jarak { padding-top: clamp(3.5rem, 8vw, 5.5rem); }

@media (min-width: 992px) {
    .rd-ph-aksi .rd-btn-ikon[href] { display: none; }
}
@media (max-width: 767.98px) {
    .rd-ranking-lengkap .rd-ranking-kepala { display: none; }
    .rd-ranking-lengkap .rd-baris-atlet { grid-template-columns: 2.75rem minmax(0, 1fr) auto; min-width: 0; }
    .rd-baris-atlet .rd-kol-event { display: none; }
    .rd-baris-atlet .rd-avatar { display: none; }
    .rd-filter-disiplin .rd-segmen { width: 100%; }
    .rd-filter-disiplin .rd-segmen a { flex: 1; justify-content: center; padding: 0 .5rem; font-size: .84rem; }
    .rd-ranking-alat .rd-cari-kecil { width: 100%; }
    .rd-angka-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-profil-salin { width: 100%; justify-content: center; }
    .rd-filter-pilih { width: 100%; }
    .rd-filter-pilih .form-select { flex: 1 1 9rem; min-width: 0; }
    .rd-halaman-kepala-aksi .rd-cari-kecil { width: 100%; }
    .rd-hasil-daftar li { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .6rem; padding: .65rem .9rem; }
    .rd-hasil-atlet .rd-avatar { display: none; }
    .rd-tabel-publik thead { display: none; }
    .rd-tabel-publik, .rd-tabel-publik tbody, .rd-tabel-publik tr, .rd-tabel-publik td { display: block; }
    .rd-tabel-publik tr { padding: .75rem 1rem; border-top: 1px solid var(--rd-garis); }
    .rd-tabel-publik tr:first-child { border-top: 0; }
    .rd-tabel-publik td { position: relative; border: 0; padding: .2rem 0 .2rem 36%; text-align: right !important; min-height: 1.6rem; }
    .rd-tabel-publik td::before { content: attr(data-label); position: absolute; left: 0; top: .25rem; width: 34%; text-align: left; color: var(--rd-teks-redup); font-size: .78rem; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
    .rd-ranking-blok.is-memuat [data-rd-ranking-isi] { transition: none; }
}
/* HP: baris chip & header tidak boleh melebarkan halaman */
.rd-chip-baris { min-width: 0; max-width: calc(100% + .3rem); }
@media (max-width: 575.98px) {
    .rd-ph-isi { gap: .75rem; }
    .rd-ph-aksi { gap: .4rem; }
    .rd-ph-aksi .rd-btn-sm { padding: 0 .85rem; }
}
.rd-ranking-kepala .rd-kol-klub, .rd-ranking-kepala .rd-kol-hasil { font-size: inherit; color: inherit; }

/* ================= CATATAN WAKTU SPEED SLALOM (T48) =================
   Disiplin ber-catatan waktu: kolom "Waktu terbaik" di ranking (ringkas: menggantikan kolom Hasil), waktu di
   hasil event, kartu posisi & riwayat profil. Waktu = detik, 3 desimal, gaya papan timing. */
.rd-ranking-waktu .rd-ranking-kepala, .rd-ranking-waktu .rd-baris-atlet { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, .7fr) 7rem 8rem; }
.rd-ranking-lengkap.rd-ranking-waktu .rd-ranking-kepala, .rd-ranking-lengkap.rd-ranking-waktu .rd-baris-atlet {
    grid-template-columns: 3.5rem minmax(13rem, 1.6fr) 4.5rem repeat(var(--rd-kol-event), minmax(6.5rem, 1fr)) 6.5rem 6.5rem;
    min-width: calc(38rem + var(--rd-kol-event) * 7.5rem);
}
.rd-kol-waktu { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-baris-atlet .rd-kol-waktu { font-weight: 600; }
.rd-kol-waktu i, .rd-baris-waktu i, .rd-rincian-waktu i, .rd-posisi-waktu i, .rd-hasil-waktu i { color: var(--rd-langit); margin-right: .35rem; font-size: .85em; }
.rd-baris-waktu { display: block; font-size: .75rem; color: var(--rd-teks-redup); font-variant-numeric: tabular-nums; }
.rd-rincian-waktu { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.25rem; margin: -.4rem 0 1rem; border-radius: var(--rd-radius-kartu); background: var(--rd-permukaan-2); border: 1px solid var(--rd-garis); }
.rd-rincian-waktu b { font-size: 1.35rem; font-style: italic; font-variant-numeric: tabular-nums; }
.rd-rincian-waktu small { color: var(--rd-teks-redup); font-weight: 500; font-style: normal; font-size: .75rem; }
.rd-posisi-waktu { display: block; font-size: .85rem; color: var(--rd-teks-redup); margin-top: .2rem; font-variant-numeric: tabular-nums; }
.rd-posisi-waktu b { color: var(--rd-teks); }
.rd-hasil-waktu { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.rd-hasil-waktu small { display: block; font-weight: 500; font-size: .7rem; color: var(--rd-teks-redup); }
.rd-waktu-sel { display: block; font-size: .75rem; color: var(--rd-teks-redup); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
    .rd-ranking-waktu .rd-baris-atlet, .rd-ranking-lengkap.rd-ranking-waktu .rd-baris-atlet { grid-template-columns: 2.75rem minmax(0, 1fr) auto; min-width: 0; }
    .rd-ranking-lengkap.rd-ranking-waktu .rd-ranking-kepala { display: none; }
    .rd-baris-atlet .rd-kol-waktu { display: none; }
}
.rd-hasil-daftar.rd-hasil-pakai-waktu li { grid-template-columns: 3rem minmax(0, 1fr) auto 4.5rem; }
@media (max-width: 767.98px) {
    .rd-hasil-daftar.rd-hasil-pakai-waktu li { grid-template-columns: 2.6rem minmax(0, 1fr) auto 3.6rem; }
}