/* =========================================================
   CLUB — tema disamakan dengan PTOP
   Sumber palet: aset/css/sportisulsel-theme-v2.css (dasbor PTOP,
   AdmPTOP, dtAtlet) dan index-modern.php (halaman login/publik).
   Nama variabel lama (--lapangan, --peluit, dst.) dipertahankan
   supaya markup/inline lain tetap jalan, hanya nilainya diganti.
   ========================================================= */
:root{
  /* palet PTOP v2 */
  --sp2-brand:#2563eb; --sp2-brand-dark:#1d4ed8; --sp2-accent:#22c55e; --sp2-amber:#f59e0b;
  --sp2-danger:#ef4444; --sp2-ink:#0f172a; --sp2-muted:#64748b; --sp2-bg:#f6f8fb; --sp2-border:#eef1f6;
  --navy-950:#0a0f1c; --navy-900:#0f172a; --navy-800:#131c31; --navy-700:#1e293b;
  --blue-400:#60a5fa; --slate-300:#cbd5e1; --slate-400:#94a3b8;

  /* alias lama -> nilai PTOP */
  --lapangan:var(--sp2-brand); --lapangan-gelap:var(--sp2-brand-dark);
  --kapur:#f8fafc; --putih:#FFFFFF;
  --tinta:var(--sp2-ink); --abu:var(--sp2-muted); --garis:#e2e8f0;
  --peluit:var(--sp2-amber);
  --merah:#dc2626; --biru:var(--sp2-brand); --hijau:#16a34a;
  --radius:14px; --radius-sm:10px;
  --bayang-sm:0 1px 3px rgba(15,23,42,.05);
  --bayang-md:0 8px 24px -6px rgba(15,23,42,.10);

  --judul:'Sora','Inter',system-ui,sans-serif;
  --teks:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--teks);font-size:15px;line-height:1.55;color:var(--tinta);background:var(--sp2-bg);-webkit-font-smoothing:antialiased}
a{color:var(--sp2-brand)}
a:hover{color:var(--sp2-brand-dark)}
h1,h2,h3{font-family:var(--judul);font-weight:700;line-height:1.2;margin:0 0 .5rem;letter-spacing:-.01em}
h2{font-size:1.3rem} h3{font-size:1.08rem}
:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:2px}
small{color:var(--abu)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Kerangka dasbor (meniru sidebar AdminLTE + theme v2) ---------- */
.kerangka{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.samping{background:var(--navy-900);color:#c2c7d0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}
.samping .identitas{display:flex;gap:.75rem;align-items:center;padding:1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.samping .identitas strong{display:block;font-family:var(--judul);font-size:1.02rem;line-height:1.2;color:#fff}
.samping .identitas small{color:var(--slate-400)}
.logo-club{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--putih);flex:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.logo-club.kosong{display:grid;place-items:center;background:linear-gradient(135deg,var(--sp2-brand),var(--sp2-brand-dark));color:#fff;font-family:var(--judul);font-size:1.25rem;font-weight:700}
.menu{display:flex;flex-direction:column;padding:.6rem 0;flex:1;overflow:auto}
.menu a{color:#c2c7d0;text-decoration:none;padding:.6rem .9rem;margin:2px 8px;border-radius:9px;font-weight:500;transition:background .15s ease,transform .15s ease,color .15s}
.menu a:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px)}
.menu a.aktif{background:linear-gradient(135deg,var(--sp2-brand),var(--sp2-brand-dark));color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(37,99,235,.35)}
.pengguna{padding:1rem 1.1rem;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;color:#fff}
.pengguna small{color:var(--slate-400)}
.pengguna .keluar{color:#f87171;margin-top:.5rem;font-weight:600;text-decoration:none}
.pengguna .keluar:hover{color:#fca5a5}
.isi{min-width:0}
.atas{display:flex;align-items:center;gap:.75rem;padding:1rem 2rem;border-bottom:1px solid var(--sp2-border);background:rgba(255,255,255,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.atas h1{font-size:1.35rem;margin:0}
.tombol-menu{display:none;background:none;border:1px solid var(--garis);border-radius:9px;font-size:1.2rem;padding:.2rem .6rem;cursor:pointer;color:var(--tinta)}
.konten{padding:1.5rem 2rem 3rem;max-width:1200px}
.pita{padding:.8rem 2rem;font-weight:500}
.pita.peringatan{background:#fffbeb;border-bottom:1px solid #fde68a;color:#92400e}

@media (max-width:900px){
  .kerangka{grid-template-columns:1fr}
  .samping{position:fixed;inset:0 auto 0 0;width:270px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .samping.buka{transform:none;box-shadow:0 0 0 100vmax rgba(15,23,42,.45)}
  .tombol-menu{display:block}
  .atas{padding:.8rem 1rem}
  .konten{padding:1rem}
}

/* ---------- Komponen (setara .card / .info-box / .btn PTOP) ---------- */
.panel{background:var(--putih);border:0;border-radius:var(--radius);padding:1.25rem;margin-bottom:1.25rem;box-shadow:var(--bayang-sm);transition:box-shadow .2s}
.panel:hover{box-shadow:var(--bayang-md)}
.panel > h2:first-child,.panel > h3:first-child{margin-top:0}
.baris-judul{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}
.baris-judul h2,.baris-judul h3{margin:0}
.angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.25rem}
.angka div{background:var(--putih);border:1px solid var(--sp2-border);border-left:4px solid var(--sp2-brand);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--bayang-sm);transition:transform .18s,box-shadow .18s}
.angka div:hover{transform:translateY(-3px);box-shadow:0 16px 32px -8px rgba(37,99,235,.18)}
.angka b{display:block;font-family:var(--mono);font-weight:600;font-size:1.75rem;line-height:1.1;color:var(--tinta)}
.angka span{color:var(--abu);font-size:.9rem}
.angka div.perhatian{border-left-color:var(--sp2-amber)}
.angka div.bahaya{border-left-color:var(--sp2-danger)}

.tabel-bungkus{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:.6rem .65rem;border-bottom:1px solid var(--sp2-border);vertical-align:top}
th{background:#f8fafc;font-weight:700;color:var(--abu);white-space:nowrap;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--sp2-border)}
tbody tr{transition:background .12s}
tbody tr:hover{background:#f1f5fb}
tr:last-child td{border-bottom:0}
td.aksi{white-space:nowrap;text-align:right}
.kosong-info{color:var(--abu);padding:1rem 0}

.lencana{display:inline-block;padding:.15rem .65rem;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;letter-spacing:.2px}
.lencana.hijau{background:#dcfce7;color:#166534}
.lencana.kuning{background:#fef3c7;color:#92400e}
.lencana.biru{background:#dbeafe;color:#1e40af}
.lencana.merah{background:#fee2e2;color:#991b1b}
.lencana.abu{background:#f1f5f9;color:#475569}

.tombol{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border:1px solid var(--sp2-brand);background:var(--sp2-brand);color:#fff;
  font:600 .92rem var(--teks);padding:.55rem 1rem;border-radius:9px;cursor:pointer;text-decoration:none;line-height:1.2;transition:transform .1s,box-shadow .15s,background .15s}
.tombol:hover{background:var(--sp2-brand-dark);border-color:var(--sp2-brand-dark);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.3)}
.tombol:active{transform:scale(.97)}
.tombol.kedua{background:var(--putih);color:var(--sp2-brand);border-color:#bfdbfe}
.tombol.kedua:hover{background:#eff6ff;color:var(--sp2-brand-dark);box-shadow:none}
.tombol.bahaya{background:var(--putih);color:var(--merah);border-color:#fecaca}
.tombol.bahaya:hover{background:#fef2f2;box-shadow:none}
.tombol.kecil{padding:.3rem .65rem;font-size:.82rem}
.tombol.peluit{background:var(--sp2-amber);border-color:var(--sp2-amber);color:#1a1a1a}
.tombol.peluit:hover{background:#fbbf24;border-color:#fbbf24;color:#1a1a1a;box-shadow:0 6px 16px rgba(245,158,11,.3)}
.tombol[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}

form .isian{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.isian label{font-weight:600;font-size:.9rem}
.isian .bantu{font-size:.83rem;color:var(--abu)}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=time],input[type=tel],input[type=url],input[type=search],select,textarea{
  font:inherit;padding:.55rem .75rem;border:1px solid #dbe2ec;border-radius:9px;background:var(--putih);color:var(--tinta);width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--sp2-brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea{min-height:96px;resize:vertical}
.kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}
.centang{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.7rem}
.centang input{margin-top:.3rem;width:18px;height:18px;flex:none;accent-color:var(--sp2-brand)}

.subtab{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:2px solid var(--sp2-border);margin-bottom:1.25rem}
.subtab a{padding:.55rem 1rem;text-decoration:none;color:var(--abu);font-weight:600;border-bottom:3px solid transparent;margin-bottom:-2px}
.subtab a:hover{color:var(--tinta)}
.subtab a.aktif{color:var(--sp2-brand);border-bottom-color:var(--sp2-brand)}

dialog{border:0;border-radius:var(--radius);padding:0;max-width:560px;width:calc(100% - 2rem);box-shadow:0 24px 48px -12px rgba(15,23,42,.25)}
dialog::backdrop{background:rgba(15,23,42,.55)}
dialog form{padding:1.25rem}
dialog .kaki{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}

.toast{position:fixed;right:1rem;bottom:1rem;background:var(--navy-900);color:#fff;padding:.8rem 1.1rem;border-radius:10px;max-width:360px;box-shadow:var(--bayang-md);
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:100}
.toast.tampil{opacity:1;transform:none}
.toast.gagal{background:var(--merah)}

/* Kartu pelatih (pilihan atlet) */
.pelatih-kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.kartu-pelatih{border:2px solid var(--garis);border-radius:var(--radius);padding:1rem;background:var(--putih);display:flex;flex-direction:column;gap:.4rem;cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
.kartu-pelatih:hover{border-color:#bfdbfe}
.kartu-pelatih input{position:absolute;opacity:0}
.kartu-pelatih:has(input:checked){border-color:var(--sp2-brand);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.kartu-pelatih:has(input:focus-visible){outline:3px solid rgba(37,99,235,.45);outline-offset:2px}
.kartu-pelatih.penuh{opacity:.55;cursor:not-allowed}
.kartu-pelatih .foto{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#e2e8f0}
.kartu-pelatih .nama{font-family:var(--judul);font-size:1.05rem;font-weight:700;line-height:1.2}
.kartu-pelatih .sekarang{position:absolute;top:.6rem;right:.6rem}

/* Jadwal */
.hari-blok{margin-bottom:1rem}
.hari-blok h3{border-bottom:2px solid var(--sp2-brand);padding-bottom:.25rem}
.sesi{display:grid;grid-template-columns:120px 1fr auto;gap:.75rem;align-items:start;padding:.7rem 0;border-bottom:1px dashed var(--garis)}
.sesi:last-child{border-bottom:0}
.sesi .jam{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--sp2-brand)}
@media (max-width:600px){.sesi{grid-template-columns:1fr}}

.pesan{padding:.7rem .9rem;border-radius:10px;margin-bottom:1rem}
.pesan.gagal{background:#fee2e2;color:#991b1b}
.pesan.sukses{background:#dcfce7;color:#166534}
.pesan.info{background:#eff6ff;color:#1e3a8a}
.bagian{border-top:1px solid var(--garis);padding-top:1.1rem;margin-top:1.1rem}
.bagian h2{font-size:1.12rem}
.rincian{width:100%;margin:.5rem 0 1rem}
.rincian td{padding:.35rem 0;border:0}
.rincian tr:hover{background:transparent}
.rincian td:last-child{text-align:right;font-family:var(--mono)}
.rincian tr.total td{border-top:2px solid var(--tinta);font-weight:700;font-size:1.05rem;padding-top:.6rem}
.metode{border:1px solid var(--garis);border-radius:var(--radius-sm);padding:.9rem 1rem;margin-bottom:.7rem}
.metode .nomor{font-family:var(--mono);font-size:1.25rem;font-weight:600;letter-spacing:.02em}
.metode img.qris{max-width:260px;width:100%;display:block;margin:.5rem 0;border:1px solid var(--garis);border-radius:8px;background:#fff}

/* ---------- Halaman publik (login, daftar, bayar) — gaya index-modern.php ---------- */
body.publik{min-height:100vh;color:#f8fafc;
  background:
    repeating-linear-gradient(90deg,rgba(96,165,250,.05) 0 2px,transparent 2px 90px),
    radial-gradient(ellipse at 50% -10%,rgba(37,99,235,.32),transparent 60%),
    var(--navy-950);
  background-attachment:fixed}
.publik-bingkai{max-width:760px;margin:0 auto;padding:2.5rem 1.25rem 3rem}
.publik-bingkai.sempit{max-width:520px}
.publik-kepala{display:flex;gap:.8rem;align-items:center;color:#f8fafc;margin-bottom:1.25rem}
.publik-kepala strong{display:block;font-family:var(--judul);font-size:1.45rem;line-height:1.15}
.publik-kepala small{color:var(--slate-400)}
.lembar{background:var(--navy-800);border:1px solid var(--navy-700);border-radius:16px;padding:2rem;color:#f8fafc}
.lembar h1{font-size:1.7rem}
.lembar a{color:var(--blue-400)}
.lembar a:hover{color:#93c5fd}
.lembar small,.lembar .bantu,.publik .isian .bantu{color:var(--slate-400)}
.lembar p{color:var(--slate-300)}
.lembar strong{color:#fff}
/* input gelap seperti form login PTOP */
.publik input[type=text],.publik input[type=password],.publik input[type=email],.publik input[type=number],.publik input[type=date],
.publik input[type=time],.publik input[type=tel],.publik input[type=url],.publik input[type=search],.publik select,.publik textarea{
  background:var(--navy-900);border-color:var(--navy-700);color:#f8fafc}
.publik input::placeholder,.publik textarea::placeholder{color:#64748b}
.publik input:focus,.publik select:focus,.publik textarea:focus{border-color:var(--sp2-brand);box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.publik input[type=file]{color:var(--slate-300)}
.publik .bagian{border-top-color:var(--navy-700)}
.publik details summary{cursor:pointer;color:var(--blue-400)}
.publik .tombol.kedua{background:rgba(255,255,255,.04);color:#f8fafc;border-color:var(--navy-700)}
.publik .tombol.kedua:hover{border-color:var(--sp2-brand);background:rgba(37,99,235,.12);color:#fff}
.publik .tombol.bahaya{background:transparent}
.publik .pesan.gagal{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.35)}
.publik .pesan.sukses{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.35)}
.publik .pesan.info{background:rgba(37,99,235,.12);color:#bfdbfe;border:1px solid rgba(37,99,235,.35)}
.publik .lencana.hijau{background:rgba(34,197,94,.16);color:#86efac}
.publik .lencana.kuning{background:rgba(245,158,11,.16);color:#fcd34d}
.publik .lencana.biru{background:rgba(37,99,235,.2);color:#bfdbfe}
.publik .lencana.merah{background:rgba(239,68,68,.16);color:#fca5a5}
.publik .lencana.abu{background:rgba(148,163,184,.16);color:var(--slate-300)}
.publik .kartu-pelatih{background:var(--navy-900);border-color:var(--navy-700);color:#f8fafc}
.publik .kartu-pelatih:hover{border-color:rgba(96,165,250,.5)}
.publik .kartu-pelatih:has(input:checked){border-color:var(--sp2-brand);box-shadow:0 0 0 3px rgba(37,99,235,.3)}
.publik .kartu-pelatih .foto{background:var(--navy-700)}
.publik .metode{border-color:var(--navy-700);background:var(--navy-900)}
.publik .metode img.qris{border-color:var(--navy-700)}
.publik .rincian tr.total td{border-top-color:var(--slate-300)}
.publik th{background:var(--navy-900);color:var(--slate-400);border-bottom-color:var(--navy-700)}
.publik td{border-bottom-color:var(--navy-700)}
.publik tbody tr:hover{background:rgba(255,255,255,.03)}
.publik .rincian tr:hover{background:transparent}
.tab-login{display:flex;gap:8px;background:var(--navy-900);padding:6px;border-radius:11px;margin-bottom:1.4rem}
.tab-login button{flex:1;font:600 .85rem var(--teks);padding:.65rem .3rem;border:0;border-radius:8px;background:transparent;color:var(--slate-400);cursor:pointer;transition:all .15s}
.tab-login button:hover{color:#fff}
.tab-login button[aria-selected=true]{background:var(--sp2-brand);color:#fff}
.tautan-bawah{text-align:center;margin-top:1rem;color:var(--slate-400)}
.tautan-bawah a{color:var(--blue-400);font-weight:600}

/* Elemen yang disaring per cabang olahraga */
[hidden] { display: none !important; }
.pilih-cabor { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.pilih-cabor .kartu-pelatih .nama { font-size: 1rem; }
.cabor-lencana { display: inline-block; background: #dbeafe; color: #1e40af; border-radius: 99px; padding: .05rem .5rem; font-size: .76rem; font-weight: 600; margin: .1rem .15rem 0 0; }
.publik .cabor-lencana { background: rgba(37,99,235,.2); color: #bfdbfe; }

/* Fitur atlet PTOP */
.fitur-ptop{list-style:none;margin:.4rem 0 1rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.fitur-ptop li{border:1px solid var(--sp2-border);border-radius:var(--radius-sm);padding:.7rem .8rem;background:var(--putih);box-shadow:var(--bayang-sm)}
.fitur-ptop b{display:block;font-family:var(--judul);font-size:.95rem;color:var(--sp2-brand)}
.fitur-ptop span{font-size:.85rem;color:var(--abu)}
.menu form{margin:0;display:flex;flex-direction:column}
.menu .tombol-menu-ptop{color:#fbbf24;text-align:left;font:inherit;font-weight:600;padding:.6rem .9rem;margin:2px 8px;border:1px solid rgba(245,158,11,.35);border-radius:9px;background:rgba(245,158,11,.08);cursor:pointer;transition:background .15s}
.menu .tombol-menu-ptop:hover{background:rgba(245,158,11,.18);color:#fcd34d}

/* Logo club besar di halaman pendaftaran atlet */
.publik-kepala.logo-besar{flex-direction:column;text-align:center;gap:.9rem;margin-bottom:1.6rem}
.publik-kepala.logo-besar .logo-club{width:140px;height:140px;border:4px solid var(--navy-700);box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 6px rgba(37,99,235,.15);object-fit:contain;padding:6px;background:#fff}
.publik-kepala.logo-besar .logo-club.kosong{font-size:4rem;padding:0}
.publik-kepala.logo-besar strong{font-size:1.8rem}
.publik-kepala.logo-besar small{font-size:.95rem}
@media (max-width:560px){
  .lembar{padding:1.4rem}
  .publik-kepala.logo-besar .logo-club{width:108px;height:108px;border-width:3px}
  .publik-kepala.logo-besar strong{font-size:1.5rem}
}

/* Scrollbar tipis seperti PTOP */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.samping ::-webkit-scrollbar-thumb{background:#334155}

/* ---------- Setting > Tampilan login ---------- */
.tema-galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem;margin-bottom:.9rem}
.tema-gambar-item{position:relative;display:flex;flex-direction:column;gap:.35rem;cursor:pointer}
.tema-gambar-item img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--garis)}
.tema-gambar-item:has(input:checked) img{opacity:.35;outline:3px solid var(--merah);outline-offset:-3px}
.tema-pilih-anim{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem;margin-bottom:1rem}
.tema-anim-kartu{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:.7rem;border:1.5px solid var(--garis);border-radius:12px;cursor:pointer;background:var(--putih);transition:border-color .15s,box-shadow .15s}
.tema-anim-kartu:hover{border-color:#93c5fd}
.tema-anim-kartu:has(input:checked){border-color:var(--sp2-brand);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.tema-anim-kartu input{position:absolute;top:.95rem;right:.95rem;z-index:2;width:18px;height:18px;accent-color:var(--sp2-brand)}
.tema-anim-kartu small{font-size:.8rem;line-height:1.35}
.tema-anim-kartu em{color:var(--sp2-amber);font-style:normal;font-weight:600}
.tema-swatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--garis);cursor:pointer;padding:0}
.tema-swatch:hover{transform:scale(1.12)}
/* contoh animasi mini */
.tema-anim-contoh{position:relative;display:block;height:62px;border-radius:8px;overflow:hidden;background:#0f172a}
.tema-anim-contoh i{position:absolute;display:block}
.contoh-kenburns i:first-child,.contoh-parallax i:first-child,.contoh-statis i:first-child{inset:0;background:linear-gradient(135deg,#1e3a8a,#0ea5e9 45%,#f59e0b 46%,#b45309)}
.contoh-kenburns i:first-child{animation:cthZoom 4s ease-in-out infinite alternate}
.contoh-parallax i:first-child{inset:-10px;animation:cthGeser 3s ease-in-out infinite alternate}
@keyframes cthZoom{to{transform:scale(1.35) translate(-8%,-6%)}}
@keyframes cthGeser{0%{transform:translate(-8px,-4px)}100%{transform:translate(8px,4px)}}
.contoh-slideshow i{inset:0;opacity:0;animation:cthSlide 6s infinite}
.contoh-slideshow i:nth-child(1){background:linear-gradient(135deg,#1e3a8a,#0ea5e9)}
.contoh-slideshow i:nth-child(2){background:linear-gradient(135deg,#7c2d12,#f59e0b);animation-delay:2s}
.contoh-slideshow i:nth-child(3){background:linear-gradient(135deg,#14532d,#22c55e);animation-delay:4s}
@keyframes cthSlide{0%,40%{opacity:1}33%{opacity:1}45%,100%{opacity:0}}
.contoh-partikel i{width:5px;height:5px;border-radius:50%;background:#60a5fa;box-shadow:0 0 8px #60a5fa,40px 18px 0 #60a5fa,85px -6px 0 #60a5fa,120px 22px 0 #60a5fa;animation:cthApung 3s ease-in-out infinite alternate}
.contoh-partikel i:nth-child(1){left:10px;top:14px}
.contoh-partikel i:nth-child(2){left:25px;top:40px;animation-delay:1s}
.contoh-partikel i:nth-child(3){left:60px;top:26px;animation-delay:2s}
@keyframes cthApung{to{transform:translate(10px,-8px)}}
.contoh-aurora i{filter:blur(14px);width:70px;height:70px;border-radius:50%;background:#2563eb;left:5%;top:-10px;animation:cthAur 4s ease-in-out infinite alternate}
.contoh-aurora i:nth-child(2){background:#22c55e;left:45%;top:10px;animation-delay:1.3s}
.contoh-aurora i:nth-child(3){background:#f59e0b;left:70%;top:-20px;animation-delay:2.6s}
@keyframes cthAur{to{transform:translate(25px,12px) scale(1.2)}}
.contoh-garis i{height:2px;width:60px;left:-60px;background:linear-gradient(90deg,transparent,#60a5fa,#fff);animation:cthLesat 1.4s linear infinite;transform:rotate(-12deg)}
.contoh-garis i:nth-child(1){top:14px}
.contoh-garis i:nth-child(2){top:30px;animation-delay:.5s}
.contoh-garis i:nth-child(3){top:46px;animation-delay:.9s}
@keyframes cthLesat{to{left:110%}}

/* =========================================================
   FITUR v2: presensi, kartu anggota, rapor, profil publik
   ========================================================= */
/* Pintasan beranda */
.pintasan{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}
.pintasan a{display:flex;flex-direction:column;gap:.2rem;padding:.8rem;border:1px solid var(--garis);border-radius:12px;text-decoration:none;color:var(--tinta);transition:border-color .15s,transform .15s}
.pintasan a:hover{border-color:var(--sp2-brand);transform:translateY(-2px)}
.pintasan b{font-family:var(--mono);font-size:1.35rem}
.pintasan span{font-size:.85rem;color:var(--abu)}

/* Pemindai QR */
.pemindai{position:relative;background:#0f172a;border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}
.pemindai video{width:100%;height:100%;object-fit:cover}
.bingkai-pindai{position:absolute;width:62%;aspect-ratio:1;border:3px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:0 0 0 999px rgba(15,23,42,.35)}
.info-kamera{position:absolute;bottom:.5rem;left:0;right:0;text-align:center;color:#fff;font-size:.85rem;margin:0;text-shadow:0 1px 4px #000}
.hasil-pindai{border-radius:12px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.3rem;border:2px solid}
.hasil-pindai p{margin:0}
.hasil-pindai strong{font-size:1.15rem}
.hasil-pindai .lencana{align-self:flex-start}
.hasil-pindai.ok{background:#f0fdf4;border-color:#22c55e}
.hasil-pindai.sudah{background:#eff6ff;border-color:#60a5fa}
.hasil-pindai.gagal{background:#fef2f2;border-color:#ef4444}
.daftar-hadir{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.daftar-hadir li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem 0;border-bottom:1px dashed var(--garis)}
.daftar-hadir li > span:first-child{display:flex;flex-direction:column}

/* Kartu anggota (ukuran ID-1 / KTP) */
.kartu-anggota{width:100%;max-width:430px;aspect-ratio:85.6/54;border-radius:16px;color:#fff;display:grid;grid-template-columns:1fr auto;gap:.6rem;padding:1rem 1.1rem;
  background:radial-gradient(circle at 110% -10%,rgba(255,255,255,.25),transparent 45%),linear-gradient(135deg,var(--k1),var(--k2));
  box-shadow:0 14px 30px -10px rgba(15,23,42,.45);position:relative;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact;container-type:inline-size}
.kartu-anggota::after{content:"";position:absolute;right:-30px;bottom:-40px;width:170px;height:170px;border-radius:50%;border:26px solid rgba(255,255,255,.08)}
.kartu-kiri{display:flex;flex-direction:column;min-width:0;z-index:1}
.kartu-kepala{display:flex;gap:.5rem;align-items:center}
.kartu-kepala strong{display:block;font-family:var(--judul);font-size:clamp(.8rem,3.6cqi,1rem);line-height:1.15}
.kartu-kepala small{color:rgba(255,255,255,.8);font-size:clamp(.55rem,2.3cqi,.68rem);letter-spacing:.12em;font-weight:700}
.kartu-logo{width:34px;height:34px;border-radius:50%;background:#fff;object-fit:contain;flex:none}
.kartu-logo.kosong{display:grid;place-items:center;color:var(--k1);font-weight:800}
.kartu-nama{font-family:var(--judul);font-weight:700;font-size:clamp(.95rem,5cqi,1.35rem);margin-top:auto;line-height:1.15;overflow-wrap:anywhere}
.kartu-detail{display:flex;flex-direction:column;font-size:clamp(.6rem,2.6cqi,.78rem);color:rgba(255,255,255,.92);margin:.2rem 0 .35rem}
.kartu-kaki{display:flex;flex-direction:column;gap:.15rem}
.kartu-kaki small{color:rgba(255,255,255,.85);font-size:clamp(.55rem,2.3cqi,.7rem)}
.kartu-status{align-self:flex-start;font-size:clamp(.55rem,2.3cqi,.7rem);font-weight:700;padding:.1rem .5rem;border-radius:99px;background:rgba(255,255,255,.22)}
.kartu-status.s-aktif{background:#22c55e}.kartu-status.s-tunggakan{background:#f59e0b;color:#1a1a1a}.kartu-status.s-nonaktif,.kartu-status.s-berhenti{background:#ef4444}
.kartu-qr{align-self:center;background:#fff;padding:6px;border-radius:10px;z-index:1;width:clamp(96px,30cqi,132px)}
.kartu-qr canvas,.kartu-qr img{display:block;width:100%!important;height:auto!important}

/* Halaman cetak (kartu massal, rapor, laporan) */
.alat-cetak{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;padding:.8rem 1.2rem;background:#fff;border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:5}
.alat-cetak span{color:var(--abu);font-size:.85rem;flex:1;min-width:200px}
.halaman-cetak .lembar-kartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(85.6mm,1fr));gap:6mm;padding:1.2rem;max-width:210mm;margin:0 auto}
.halaman-cetak .kartu-anggota{width:85.6mm;height:54mm;max-width:none;aspect-ratio:auto;border-radius:3.2mm;box-shadow:none;outline:1px dashed #cbd5e1;outline-offset:1mm;break-inside:avoid;padding:3.5mm 4mm}
.halaman-rapor{background:#e2e8f0}
.rapor{max-width:210mm;margin:1.2rem auto;background:#fff;padding:14mm 14mm 10mm;box-shadow:0 10px 30px rgba(15,23,42,.12);color:#0f172a}
.rapor-kepala{display:flex;gap:.8rem;align-items:center;border-bottom:3px solid var(--rw);padding-bottom:.8rem;margin-bottom:1rem}
.rapor-kepala img{width:58px;height:58px;object-fit:contain}
.rapor-kepala strong{display:block;font-family:var(--judul);font-size:1.25rem}
.rapor-kepala small{color:#475569}
.rapor-judul{margin-left:auto;text-align:right}
.rapor-judul b{display:block;color:var(--rw);letter-spacing:.06em;font-size:.95rem}
.rapor-identitas{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem 1rem;background:#f8fafc;border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem}
.rapor-identitas small{display:block;color:#64748b;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.rapor-identitas b{font-size:.95rem}
.rapor-nilai{display:grid;grid-template-columns:280px 1fr;gap:1rem;align-items:center;margin-bottom:1rem}
.rapor table{width:100%;border-collapse:collapse;font-size:.88rem}
.rapor th,.rapor td{padding:.4rem .5rem;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}
.rapor th{background:#f1f5f9;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#475569}
.rapor .kanan{text-align:right}
.rapor tr.rata td{font-weight:600;background:#f8fafc}
.bintang{color:#f59e0b;letter-spacing:1px;white-space:nowrap}.bintang i{color:#cbd5e1;font-style:normal}
.naik{color:#16a34a;font-weight:700}.turun{color:#dc2626;font-weight:700}.tetap{color:#94a3b8}
.rapor-catatan{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.rapor-catatan > div{border:1px solid #e2e8f0;border-radius:10px;padding:.7rem .9rem}
.rapor h3{font-size:.95rem;color:var(--rw);margin:0 0 .4rem}
.rapor-tes{margin-bottom:1rem}
.rapor-kaki{display:flex;justify-content:space-between;align-items:flex-end;margin-top:1.5rem;color:#475569}
.rapor-kaki.dua-ttd{justify-content:space-around}
.ttd{display:flex;flex-direction:column;align-items:center;min-width:180px}
.ttd span{height:56px}
.ttd b{border-top:1px solid #0f172a;padding-top:.2rem;min-width:170px;text-align:center}
@media (max-width:700px){.rapor{padding:6mm;margin:0}.rapor-identitas{grid-template-columns:1fr 1fr}.rapor-nilai,.rapor-catatan{grid-template-columns:1fr}.rapor-radar{text-align:center}}
@media print{
  @page{size:A4;margin:10mm}
  .alat-cetak,.samping,.atas,.tombol,.pita,.subtab,#toast,body.dasbor .panel:not(:has(.kartu-anggota)),body.dasbor .panel:has(.kartu-anggota) > :not(.kartu-anggota){display:none!important}
  body.dasbor .kerangka{display:block}body.dasbor .konten{padding:0}body.dasbor .panel{box-shadow:none;padding:0}
  .halaman-rapor{background:#fff}.rapor{box-shadow:none;margin:0;padding:0;max-width:none}
  .halaman-cetak .lembar-kartu{padding:0;gap:4mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Profil publik club & pelatih */
.publik .lembar + .lembar,.publik .pesan + .lembar{margin-top:1rem}
.publik .lembar h2{font-size:1.25rem}
.profil-aksi{padding:1.2rem 1.5rem}
.tombol-baris{display:flex;gap:.6rem;flex-wrap:wrap}
.tombol-baris .tombol{flex:1;min-width:160px}
.sosmed{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.sosmed a{padding:.3rem .8rem;border-radius:99px;border:1px solid var(--navy-700);text-decoration:none;font-weight:600;font-size:.85rem}
.kisi-kartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}
.kartu-mini{background:var(--navy-900);border:1px solid var(--navy-700);border-radius:12px;padding:.8rem;display:flex;flex-direction:column;gap:.2rem}
.kartu-mini.harga strong{font-family:var(--mono);font-size:1.25rem;color:#fff}
.kisi-pelatih{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.kartu-pelatih-publik{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;padding:1rem .8rem;border-radius:14px;background:var(--navy-900);border:1px solid var(--navy-700);text-decoration:none;color:#f8fafc!important;transition:transform .15s,border-color .15s}
.kartu-pelatih-publik:hover{transform:translateY(-3px);border-color:var(--sp2-brand)}
.kartu-pelatih-publik img,.foto-kosong{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:.3rem;border:3px solid var(--sp2-brand)}
.foto-kosong{display:grid;place-items:center;background:linear-gradient(135deg,var(--sp2-brand),var(--sp2-brand-dark));font:700 2.2rem var(--judul);color:#fff}
.foto-kosong.besar{width:140px;height:140px;font-size:3rem}
.kartu-pelatih-publik small{color:var(--slate-400)}
.kartu-pelatih-publik .spes{color:var(--slate-300)}
.kartu-pelatih-publik em{font-style:normal;color:var(--blue-400);font-size:.85rem;margin-top:.3rem}
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}
.galeri img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.peta{margin:1rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--navy-700)}
.peta iframe{width:100%;height:280px;border:0;display:block}
.profil-pelatih .pp-kepala{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.profil-pelatih .pp-kepala img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid var(--sp2-brand);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.profil-pelatih h1{margin:0 0 .2rem}
.profil-pelatih .pp-kepala p{margin:.15rem 0}
.pp-jabatan{color:var(--blue-400)!important;font-weight:600}
.pp-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin-bottom:1rem}
.pp-angka div{background:var(--navy-900);border:1px solid var(--navy-700);border-radius:12px;padding:.7rem;text-align:center}
.pp-angka b{display:block;font-family:var(--mono);font-size:1.4rem;color:#fff}
.pp-angka span{font-size:.78rem;color:var(--slate-400)}
.pp-ptop{border-left:3px solid #22c55e;padding-left:.7rem}
.kisi-dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.daftar-pp{margin:0;padding-left:1.1rem;color:var(--slate-300)}
.daftar-pp li{margin:.3rem 0}
.bertema .kartu-mini,.bertema .kartu-pelatih-publik,.bertema .pp-angka div{background:rgba(10,15,28,.55)}

/* ===================== Fitur v3: pengingat WhatsApp & sinkron PTOP */
.teks-merah{color:var(--merah)}
pre.kode{background:var(--navy-900);color:#e2e8f0;padding:.7rem .9rem;border-radius:var(--radius-sm);overflow-x:auto;font-family:var(--mono);font-size:.82rem}
.pilihan-gw{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:1rem}
.kartu-pilih{display:flex;gap:.6rem;align-items:flex-start;border:1.5px solid var(--garis);border-radius:var(--radius-sm);padding:.75rem .85rem;cursor:pointer;background:#fff}
.kartu-pilih:has(input:checked){border-color:var(--sp2-brand);background:#eff6ff}
.kartu-pilih input{margin-top:.25rem;accent-color:var(--sp2-brand)}
.kartu-pilih small{display:block;color:var(--abu);font-size:.8rem;line-height:1.4;margin-top:.15rem}
.blok-wa{border:1px solid var(--garis);border-radius:var(--radius-sm);padding:.75rem .85rem;margin-bottom:.7rem;background:#fff}
.blok-wa textarea{width:100%;margin-top:.5rem;font-size:.88rem;line-height:1.45}
.isian-hari{font-size:.85rem;color:var(--abu);white-space:nowrap}
.isian-hari input{width:4.2rem;padding:.3rem .4rem;margin-right:.2rem}
.wa-gelembung{background:#dcf8c6;color:#111b21;border-radius:10px 10px 10px 2px;padding:.6rem .75rem;margin-top:.4rem;font-size:.86rem;line-height:1.45;max-width:420px;box-shadow:0 1px 1px rgba(0,0,0,.08);word-break:break-word}
.tabel-wa details summary{cursor:pointer;color:var(--tinta);font-size:.86rem}
.wa-tombol{background:#16a34a !important;border-color:#16a34a !important;color:#fff !important}
tr.wa-terkirim{opacity:.55}
tr.wa-gagal td{background:#fef2f2}
.sinkron-ptop{border-left:4px solid var(--sp2-brand)}
/* dialog informasi server (password sementara) */
pre.info-teks{background:#f1f5f9;border:1px dashed #94a3b8;border-radius:10px;padding:.8rem 1rem;font:600 1.05rem/1.6 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;user-select:all}
.permintaan-reset{border-left:4px solid #f59e0b}