/* Tantangan Kilat — gaya bersama halaman /tantangan dan /tantangan/:kode.
 * Warna mapel lewat kelas .w-<warna> yang mengisi --c (utama), --c-muda, --c-tua. */
.ttg { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; --navy: #0F2A44; }
.w-emerald { --c: #10B981; --c-muda: #D1FAE5; --c-tua: #047857; --c-2: #34D399; }
.w-sky     { --c: #0EA5E9; --c-muda: #E0F2FE; --c-tua: #0369A1; --c-2: #38BDF8; }
.w-violet  { --c: #8B5CF6; --c-muda: #EDE9FE; --c-tua: #6D28D9; --c-2: #A78BFA; }
.w-amber   { --c: #F59E0B; --c-muda: #FEF3C7; --c-tua: #B45309; --c-2: #FBBF24; }
.w-rose    { --c: #F43F5E; --c-muda: #FFE4E6; --c-tua: #BE123C; --c-2: #FB7185; }

/* Latar langit malam dengan gumpalan warna yang bergerak pelan */
.ttg-langit { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #17406a 0%, #0F2A44 55%, #0b2035 100%); color: #fff; }
.ttg-blob { position: absolute; z-index: -1; border-radius: 9999px; filter: blur(60px); opacity: .55; animation: ttg-apung 14s ease-in-out infinite alternate; }
.ttg-blob.a { width: 340px; height: 340px; background: #22C55E; top: -120px; left: -80px; }
.ttg-blob.b { width: 300px; height: 300px; background: #8B5CF6; top: 40px; right: -90px; animation-delay: -5s; }
.ttg-blob.c { width: 260px; height: 260px; background: #0EA5E9; bottom: -140px; left: 35%; animation-delay: -9s; }
@keyframes ttg-apung { to { transform: translate(40px, 30px) scale(1.15); } }

/* Stiker yang melayang di hero */
.ttg-stiker { position: absolute; z-index: -1; padding: 6px 12px; border-radius: 14px; font-weight: 800; font-size: 15px; color: #0F2A44; background: #fff;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); animation: ttg-goyang 6s ease-in-out infinite; opacity: .92; }
@keyframes ttg-goyang { 0%, 100% { transform: translateY(0) rotate(var(--r, -6deg)); } 50% { transform: translateY(-10px) rotate(calc(var(--r, -6deg) * -1)); } }

.ttg-judul-garis { background: linear-gradient(90deg, #FACC15, #34D399); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Kartu mapel */
.ttg-mapel { position: relative; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 22px; background: #fff; border: 2px solid #EEF2F7;
  text-align: left; transition: transform .2s cubic-bezier(.2,1.4,.4,1), box-shadow .2s, border-color .2s; cursor: pointer; }
.ttg-mapel:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px var(--c); }
.ttg-mapel[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 18px 40px -18px var(--c); transform: translateY(-3px); }
.ttg-mapel .ikon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-size: 22px;
  background: linear-gradient(135deg, var(--c-2), var(--c-tua)); box-shadow: 0 10px 20px -10px var(--c); }
.ttg-mapel .cek { position: absolute; top: 50%; margin-top: -13px; right: 14px; width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--c); color: #fff; font-size: 12px; transform: scale(0); transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.ttg-mapel[aria-pressed="true"] .cek { transform: scale(1); }
@media (min-width: 640px) {
  .ttg-mapel { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 24px; }
  .ttg-mapel .ikon { width: 52px; height: 52px; border-radius: 16px; }
  .ttg-mapel .cek { top: 12px; margin-top: 0; right: 12px; }
}

/* Pil jenjang */
.ttg-pil { height: 42px; padding: 0 16px; border-radius: 9999px; font-weight: 700; font-size: 14px; color: #334155; background: #F1F5F9; border: 2px solid transparent;
  transition: all .18s; white-space: nowrap; }
.ttg-pil:hover { background: #E2E8F0; }
.ttg-pil[aria-pressed="true"] { background: var(--c-muda); color: var(--c-tua); border-color: var(--c); }

.ttg-tombol { position: relative; overflow: hidden; border-radius: 18px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c-2, #34D399), var(--c-tua, #047857));
  box-shadow: 0 16px 30px -14px var(--c, #10B981); transition: transform .15s, box-shadow .15s, opacity .15s; }
.ttg-tombol:hover { transform: translateY(-1px); box-shadow: 0 20px 36px -14px var(--c, #10B981); }
.ttg-tombol:active { transform: scale(.98); }
.ttg-tombol:disabled { opacity: .5; transform: none; }
.ttg-tombol::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%); animation: ttg-kilau 3.2s ease-in-out infinite; }
@keyframes ttg-kilau { 60%, 100% { transform: translateX(100%); } }

/* Pita "sedang ramai" berjalan */
.ttg-pita { display: flex; gap: 10px; width: max-content; animation: ttg-jalan 40s linear infinite; }
.ttg-pita:hover { animation-play-state: paused; }
@keyframes ttg-jalan { to { transform: translateX(-50%); } }
.ttg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9999px; background: #fff; border: 1px solid #EEF2F7; font-size: 13px; white-space: nowrap; }

.ttg-kartu { background: #fff; border: 1px solid #EEF2F7; border-radius: 28px; box-shadow: 0 30px 60px -40px rgba(15,42,68,.45); }
.ttg-masuk { animation: ttg-masuk .45s cubic-bezier(.2,1,.3,1) both; }
@keyframes ttg-masuk { from { opacity: 0; transform: translateY(14px); } }

/* Halaman main: cincin waktu, segmen kemajuan, opsi */
.ttg-cincin { transform: rotate(-90deg); }
.ttg-cincin circle { transition: stroke-dashoffset .25s linear, stroke .3s; }
.ttg-segmen { flex: 1; height: 8px; border-radius: 9999px; background: #E2E8F0; transition: background .3s; }
.ttg-segmen.isi { background: var(--c); }
.ttg-segmen.kini { background: linear-gradient(90deg, var(--c) 50%, #E2E8F0 50%); background-size: 200% 100%; animation: ttg-denyut 1.2s ease-in-out infinite; }
@keyframes ttg-denyut { 50% { background-position: 100% 0; } }
.ttg-opsi { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 20px; background: #fff; border: 2px solid #EEF2F7;
  text-align: left; font-size: 17px; color: #1E293B; transition: transform .12s, border-color .15s, background .15s, box-shadow .15s; }
.ttg-opsi:hover { border-color: var(--c); box-shadow: 0 10px 24px -18px var(--c); }
.ttg-opsi:active { transform: scale(.98); }
.ttg-opsi .huruf { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: var(--c-tua); background: var(--c-muda); }
.ttg-opsi.pilih { border-color: var(--c); background: var(--c-muda); transform: scale(.98); }
.ttg-opsi.pilih .huruf { background: var(--c); color: #fff; }
.ttg-geser { animation: ttg-geser .32s cubic-bezier(.2,1,.3,1) both; }
@keyframes ttg-geser { from { opacity: 0; transform: translateX(28px); } }
.ttg-angka { animation: ttg-angka .8s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ttg-angka { from { transform: scale(2.2); opacity: 0; } }

/* Podium papan duel */
.ttg-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; }
.ttg-podium .tiang { border-radius: 16px 16px 6px 6px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .ttg-blob, .ttg-stiker, .ttg-pita, .ttg-tombol::after, .ttg-segmen.kini, .ttg-masuk, .ttg-geser, .ttg-angka { animation: none !important; }
  .ttg-pita { width: auto; flex-wrap: wrap; }
}