/* Landing alternatif: identitas kolam renang — garis lintasan, papan tulis tepi kolam, angka stopwatch. */
:root {
  --kolam-dalam: #0b2a36;
  --garis-lintasan: #0b5f78;
  --tali-merah: #d7263d;
  --spidol: #1848a8;
}
.lb { font-variant-numeric: tabular-nums; }
.lb h1, .lb h2, .lb .angka {
  font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, system-ui, sans-serif;
  font-weight: 700; letter-spacing: 0; line-height: 1.02;
}
.lb h1 { font-size: clamp(2.3rem, 7.4vw, 4.2rem); margin: 0 0 18px; overflow-wrap: break-word; }
.lb h2 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); margin: 0 0 14px; }
.lb .sub { font-size: 1.08rem; color: var(--teks-lemah); max-width: 34em; }

/* Tali lintasan sebagai pemisah */
.tali { height: 8px; border-radius: 4px; margin: 0;
  background: repeating-linear-gradient(90deg, var(--tali-merah) 0 18px, #fff 18px 36px, var(--biru) 36px 54px, #fff 54px 72px);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }

/* Hero: dasar kolam dilihat dari atas */
.lb-hero { position: relative; overflow: hidden; padding: 40px 0 48px;
  background-color: var(--air-100);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(11,95,120,.13) 118px 128px, transparent 128px 176px);
}
.lb-hero::after { /* ujung "T" garis lintasan di dinding kolam */
  content: ""; position: absolute; right: 3%; top: 0; bottom: 0; width: 10px; background: rgba(11,95,120,.10);
}
.lb-hero .wadah { position: relative; z-index: 1; display: grid; gap: 28px; }
.lb-hero .wadah > *, .lb-dua > * { min-width: 0; }
@media (min-width: 900px) { .lb-hero .wadah { grid-template-columns: 1.05fr .95fr; align-items: center; } }
.lb-hero .aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lb-hero .catatan-kecil { margin-top: 10px; font-size: .88rem; color: var(--teks-lemah); }

/* Papan tulis tepi kolam */
.papan {
  background: #fdfefe; color: #13262e; border-radius: 10px; padding: 18px 18px 14px;
  border: 10px solid #d9e2e6; box-shadow: 0 18px 40px rgba(11,42,54,.18);
  position: relative;
}
.papan::before { /* baki spidol */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -18px; height: 8px; border-radius: 0 0 6px 6px; background: #b9c6cc;
}
.papan .spidol { font-family: "Kalam", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: var(--spidol); }
.papan .judul-set { font-size: 1.05rem; color: var(--tali-merah); font-family: "Kalam", "Segoe Print", "Bradley Hand", cursive; }
.papan .set { font-size: 2.1rem; line-height: 1.1; margin: 2px 0 12px; }
.papan table { width: 100%; border-collapse: collapse; font-size: .92rem; }
@media (max-width: 480px) { .papan { padding: 14px 12px 12px; border-width: 7px; } .papan td { padding: 7px 3px; } .papan td.waktu { font-size: 1.1rem; } .papan th { font-size: .66rem; padding: 6px 3px; } }
.papan th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5d7680; background: none; padding: 6px 4px; border-bottom: 2px solid #e3eaed; }
.papan td { padding: 8px 4px; border-bottom: 1px dashed #dbe4e7; white-space: nowrap; }
.papan td.waktu { font-family: "Barlow Condensed", system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--kolam-dalam); }
.papan tr.anda td { background: #fff8e1; }
.papan .isi-anda { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 14px; padding-top: 12px; border-top: 2px solid #e3eaed; }
.papan .isi-anda label { font-size: .78rem; color: #5d7680; font-weight: 700; }
.papan .isi-anda input { width: 92px; padding: 8px 10px; font-family: "Barlow Condensed", system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; background: #fff; color: #13262e; border-color: #cfdadf; }
.papan .keterangan { font-size: .78rem; color: #5d7680; margin: 10px 0 0; }

/* Bagian umum */
.lb-bagian { padding: 56px 0; }
.lb-dua { display: grid; gap: 28px; }
@media (min-width: 900px) { .lb-dua { grid-template-columns: 1fr 1fr; align-items: center; } .lb-dua.balik > :first-child { order: 2; } }

/* Garis waktu musim */
.musim { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 16px; box-shadow: var(--bayang); }
.musim .batang { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 150px; }
.musim .batang div { border-radius: 3px 3px 0 0; min-height: 4px; position: relative; }
.musim .batang div.pulih { opacity: .55; }
.musim .batang div.lomba::after { content: "🏁"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: .9rem; }
.musim .sumbu { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 6px; font-size: .66rem; color: var(--teks-lemah); text-align: center; }
.musim .legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .8rem; color: var(--teks-lemah); }
.musim .legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; background: var(--w); vertical-align: -1px; }

/* Tiruan WhatsApp */
.wa { background: #e8ded2; border-radius: 16px; padding: 16px; max-width: 380px;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; }
.wa .gelembung { background: #d9fdd3; color: #111b21; border-radius: 10px 0 10px 10px; padding: 8px 10px 6px; margin-left: auto; max-width: 92%; font-size: .92rem; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.wa .pratinjau { background: #f0f7f4; border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; border-left: 3px solid var(--biru); }
.wa .pratinjau strong { display: block; font-size: .9rem; }
.wa .pratinjau span { font-size: .8rem; color: #54656f; }
.wa .jam { text-align: right; font-size: .68rem; color: #667781; margin-top: 2px; }
.wa .balas { background: #fff; color: #111b21; border-radius: 0 10px 10px 10px; padding: 8px 10px 6px; max-width: 80%; margin-top: 10px; font-size: .92rem; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
@media (prefers-color-scheme: dark) { .wa { filter: brightness(.92); } }

/* Daftar isi fitur, bukan kartu */
.fitur { display: grid; gap: 0 32px; }
@media (min-width: 720px) { .fitur { grid-template-columns: 1fr 1fr; } }
.fitur div { padding: 14px 0; border-bottom: 1px solid var(--garis); }
.fitur strong { display: block; font-size: 1.02rem; }
.fitur span { color: var(--teks-lemah); font-size: .94rem; }

/* Sumber */
.sumber { list-style: none; padding: 0; margin: 0; }
.sumber li { padding: 10px 0; border-bottom: 1px solid var(--garis); display: grid; grid-template-columns: 9.5rem 1fr; gap: 10px; font-size: .94rem; }
.sumber li b { color: var(--dalam); }
@media (max-width: 520px) { .sumber li { grid-template-columns: 1fr; gap: 0; } }

/* Harga sebagai tabel sederhana */
.harga-tabel { width: 100%; border-collapse: collapse; font-size: 1rem; }
.harga-tabel td { padding: 14px 6px; border-bottom: 1px solid var(--garis); white-space: normal; vertical-align: top; }
.harga-tabel td.angka { font-size: 1.5rem; text-align: right; white-space: nowrap; color: var(--dalam); }
.harga-tabel tr.pilihan td { background: var(--air-50); }
.harga-tabel small { display: block; color: var(--teks-lemah); font-size: .85rem; }

.lb-akhir { background: var(--kolam-dalam); color: #e3f4f8; padding: 56px 0; margin-top: 24px; }
.lb-akhir h2 { color: #fff; }
.lb-akhir p { color: #a9c7d0; }

/* Sebelum / sesudah */
.sebelum-sesudah { display: grid; gap: 10px; margin-top: 18px; }
.ss-baris { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.ss-baris .ss-topik { grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 719px) { .ss-sebelum, .ss-sesudah { font-size: .88rem; padding: 10px 12px; } }
@media (min-width: 720px) { .ss-baris { grid-template-columns: 9rem 1fr 1fr; align-items: stretch; } .ss-baris .ss-topik { grid-column: auto; margin-top: 0; } }
.ss-topik { font-weight: 800; color: var(--dalam); align-self: center; }
.ss-sebelum, .ss-sesudah { border-radius: 12px; padding: 12px 14px; font-size: .95rem; position: relative; }
.ss-sebelum { background: #fdecee; color: #6d1f28; }
.ss-sesudah { background: var(--hijau-latar); color: #0f5a3d; }
.ss-sebelum::before, .ss-sesudah::before { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; opacity: .8; }
.ss-sebelum::before { content: "Sebelum"; }
.ss-sesudah::before { content: "Sesudah"; }
@media (prefers-color-scheme: dark) { .ss-sebelum { background: #3a1a1f; color: #ffc9cf; } .ss-sesudah { color: #bff0d9; } }
.ss-kartu { display: grid; gap: 18px; align-items: center; margin-top: 26px; }
@media (min-width: 900px) { .ss-kartu { grid-template-columns: 1fr 1fr; } }
.ss-kartu img { width: 100%; max-width: 380px; border-radius: 18px; box-shadow: 0 18px 40px rgba(11,42,54,.18); display: block; margin: 0 auto; }

/* Social proof */
.bukti { display: grid; gap: 16px; }
.kisi-testimoni { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.testimoni { margin: 0; background: var(--kartu); border: 1px solid var(--garis); border-radius: 16px; padding: 16px; display: grid; gap: 8px; box-shadow: var(--bayang); }
.ts-baris span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ts-baris p { margin: 2px 0 0; }
.ts-sebelum span { color: #b3261e; }
.ts-sesudah span { color: var(--hijau); }
.testimoni figcaption { border-top: 1px solid var(--garis); padding-top: 8px; font-size: .9rem; }
.testimoni figcaption span { display: block; color: var(--teks-lemah); font-size: .82rem; }
.kisi-angka { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kisi-angka div { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 14px; }
.kisi-angka b { display: block; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 2.2rem; color: var(--biru-tua); line-height: 1.1; }
.kisi-angka span { font-size: .85rem; color: var(--teks-lemah); }
.perintis { background: var(--kuning-latar); border-radius: 16px; padding: 18px; }
.perintis h3 { margin: 10px 0 6px; }
.perintis p { margin: 0; }
.cta-akhir { display: grid; gap: 10px; }
@media (min-width: 720px) { .cta-akhir { grid-template-columns: auto auto; justify-content: start; } }

/* Perbandingan */
.bd-sel { display: flex; gap: 6px; align-items: flex-start; font-size: .86rem; line-height: 1.35; }
.bd-sel b { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; }
.bd-ya b { background: var(--hijau-latar); color: var(--hijau); }
.bd-sebagian b { background: var(--kuning-latar); color: var(--kuning); }
.bd-tidak b { background: #eef2f4; color: #7a8c93; }
.bd-tidak span { color: var(--teks-lemah); }
.bd-tabel { display: none; overflow-x: auto; border: 1px solid var(--garis); border-radius: 16px; background: var(--kartu); }
.bd-tabel table { border-collapse: collapse; width: 100%; }
.bd-tabel th, .bd-tabel td { padding: 10px; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; white-space: normal; }
.bd-tabel thead th { font-size: .8rem; text-transform: none; letter-spacing: 0; background: var(--air-50); color: var(--dalam); }
.bd-tabel tbody th { font-size: .9rem; color: var(--dalam); min-width: 11rem; background: none; text-transform: none; letter-spacing: 0; }
.bd-tabel .bd-kita { background: var(--air-100); }
.bd-tabel thead .bd-kita { background: var(--biru); color: #fff; }
@media (min-width: 900px) { .bd-tabel { display: block; } .bd-hp { display: none; } }
.bd-pilih { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.bd-pilih button { flex: 0 0 auto; border: 1px solid var(--garis); background: var(--air-0); color: var(--teks); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.bd-pilih button[aria-pressed="true"] { background: var(--dalam); color: #fff; border-color: var(--dalam); }
.bd-hp-isi { display: grid; gap: 8px; margin-top: 10px; }
.bd-hp-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; padding: 10px; }
.bd-hp-topik { grid-column: 1 / -1; font-weight: 800; color: var(--dalam); font-size: .92rem; }
.bd-hp-kolom { border-radius: 8px; padding: 6px 8px; }
.bd-hp-kolom small { display: block; font-size: .7rem; font-weight: 700; color: var(--teks-lemah); margin-bottom: 2px; }
.bd-hp-kolom.bd-kita { background: var(--air-100); }
/* v2.0: lencana versi dan jumlah atlet terdaftar di hero */
.lb-baru { display: inline-block; margin-bottom: 12px; text-decoration: none; }
.atlet-terdaftar { margin: 14px 0 0; font-size: .98rem; color: var(--teks-lemah); }
.atlet-terdaftar strong { color: var(--dalam, #06637c); font-size: 1.12rem; }