/* ============================================================
   TEMA LANGIT — laman utama Smart KAFA
   Diambil daripada smart_kafa_redesign.html yang user beri.

   EMPAT TANDA TANGAN BENTUK, dan setiap satu ada kerjanya:

     1. BAYANG KERAS `0 Npx 0` di bawah setiap benda, berpasangan
        dengan bayang lembut yang jauh. Bayang keras itulah yang
        menjadikan butang nampak setebal butang sebenar; bayang
        kabur sahaja nampak lembik.
     2. Sudut bulat BESAR, dan hero sengaja tak sama rata
        (48px 80px 31px 36px) supaya ia nampak dilukis tangan
        dan bukan kotak.
     3. Nunito berat 900 ke 1000. Tajuk besar kuning dengan
        garis luar oren dan bayang keras ungu.
     4. Kad menu berwarna pekat dengan ikon besar di penjuru.

   WARNA DITETAPKAN SENDIRI, BUKAN DIAMBIL DARI TEMA SISTEM.
   Laman utama ini terbuka kepada sesiapa dan kebanyakan ibu
   bapa membukanya sekali sahaja. Ia mesti kelihatan sama pada
   setiap telefon, jadi ia tak mengikut mod malam. Peraturan
   yang sama seperti kertas trial UPKK dalam trial.css.
   ============================================================ */

:root{
  /* ---- asas ---- */
  --lg-navy:#142553;
  --lg-navy2:#17347c;
  --lg-biru:#0646dc;
  --lg-kuning:#ffde35;
  --lg-kuning2:#e8a423;

  /* ---- bayang tanda tangan ---- */
  --lg-byg:0 9px 0 rgba(11,38,121,.12), 0 14px 24px rgba(16,45,115,.17);
  --lg-byg-kad:0 7px 0 #c7e2ff, 0 10px 25px rgba(48,112,175,.5);

  /* ---- kad menu berwarna ---- */
  --lg-ungu:linear-gradient(135deg,#d675ff 0%,#792dff 44%,#441bd0 100%);
  --lg-hijau:linear-gradient(135deg,#68ed79,#00ae7c 68%,#008d76);
  --lg-oren:linear-gradient(135deg,#ffdd48,#ff9422 56%,#ff642a);
  --lg-cyan:linear-gradient(135deg,#61e7fe,#0799fb 60%,#006be8);
  --lg-pink:linear-gradient(135deg,#ff86b7,#f63a8b 57%,#c80b72);
  --lg-indigo:linear-gradient(135deg,#7996e6,#263d95 58%,#12245b);
}

/* ============================================================
   ASAS
   ============================================================ */
body{
  background:
    radial-gradient(ellipse 60% 40% at 45% 3%, #c4efff 0%, transparent 85%),
    linear-gradient(160deg,#39a9fe 0%,#86d9ff 23%,#f6f6ff 48%,#d5e5ff 78%,#b5c8ff 100%)
    !important;
  background-attachment:fixed !important;
  color:var(--lg-navy) !important;
  font-family:'Nunito','Arial Rounded MT Bold',system-ui,sans-serif !important;
}

h1,h2,h3,.tajuk,.btn,.btn-besar,.kad h3,.lang h3,.baru-k b,.uls-nama{
  font-family:'Nunito',system-ui,sans-serif !important;
  font-weight:1000 !important;
  letter-spacing:-.9px;
}

/* Seksyen tak membawa warnanya sendiri; latar langit itulah
   yang menyatukan halaman. Jalur selang-seli dibuat dengan
   putih lut cahaya supaya gradien di bawahnya masih nampak. */
.sec{background:transparent !important}
.sec-lain{background:rgba(255,255,255,.42) !important}

.tajuk{
  color:var(--lg-navy) !important;
  font-size:clamp(26px,5.4vw,40px) !important;
  text-shadow:0 2px 0 #fff, 0 3px 6px rgba(20,37,83,.14) !important;
}
.tajuk-kecil{
  color:var(--lg-biru) !important;font-weight:1000 !important;
  letter-spacing:.14em !important;font-size:.76rem !important;
  text-shadow:none !important;
}
.sub{color:var(--lg-navy2) !important;font-weight:800 !important;opacity:.92}

/* ============================================================
   JALUR ATAS
   ============================================================ */
.nav,.nav.tenggelam{
  background:rgba(253,253,255,.94) !important;
  border:1px solid #fff !important;
  border-radius:45px !important;
  box-shadow:0 0 15px rgba(183,195,224,.9), 0 6px 0 rgba(199,226,255,.6) !important;
  backdrop-filter:blur(8px);
}
.nav-logo b{color:var(--lg-navy) !important;font-weight:1000 !important}
.nav-menu a{color:#203985 !important;font-weight:900 !important;border-radius:34px !important}
.nav-menu a:hover,.nav-menu a.on{
  background:linear-gradient(#8a8cff,#4324e3) !important;color:#fff !important;
  box-shadow:0 4px 0 #3120ac !important;
}
@media(max-width:860px){
  .nav-menu{background:#fdfdff !important;border:1px solid #fff !important;
            border-radius:26px !important;box-shadow:var(--lg-byg) !important}
}
.nav-burger{
  color:#203985 !important;background:#fff !important;
  border:1.8px solid #fff !important;border-radius:50% !important;
  box-shadow:0 4px 0 #c7e2ff !important;
}

/* ============================================================
   BUTANG
   ------------------------------------------------------------
   Semuanya pil penuh dengan bayang keras di bawah. Bila ditekan
   ia turun sehingga hampir rata dengan bayangnya, jadi ia terasa
   betul-betul ditolak ke dalam.
   ============================================================ */
.btn,.btn-besar,.btn-isi,.btn-kuning,.btn-kaca,.btn-ghost,.cuba-next{
  font-family:'Nunito',sans-serif !important;font-weight:1000 !important;
  border-radius:40px !important;border:2px solid #fff !important;
  transition:transform .12s, box-shadow .12s !important;
}
/* Tindakan UTAMA: kuning. Sama pada setiap tempat, jadi mata
   belajar mencarinya tanpa membaca. */
.btn-kuning,.btn-besar.btn-kuning{
  background:linear-gradient(#ffe568,#ffb824) !important;
  color:#1b2551 !important;border:3px solid #ffd964 !important;
  box-shadow:0 5px 0 #d48a03, 0 10px 18px rgba(212,138,3,.3) !important;
}
/* Tindakan dalam sistem: biru ungu. */
.btn-isi,.cuba-next{
  background:linear-gradient(#8a8cff,#4324e3) !important;color:#fff !important;
  box-shadow:0 5px 0 #3120ac, 0 10px 18px rgba(45,43,148,.4) !important;
}
/* Tindakan KEDUA: putih. Dua butang terang bersebelahan
   bermakna tiada satu pun yang menonjol. */
.btn-kaca,.btn-ghost,.btn-besar.btn-kaca,.btn-besar.btn-ghost{
  background:linear-gradient(#fdfcff,#d7e8ff) !important;
  color:#203985 !important;
  box-shadow:0 5px 0 #a9c6ef, 0 10px 18px rgba(23,99,178,.28) !important;
}
.btn:active,.btn-besar:active,.btn-isi:active,.btn-kuning:active,.cuba-next:active{
  transform:translateY(4px) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.25) !important;
}

/* ============================================================
   HERO
   ------------------------------------------------------------
   Gambar hutan sedia ada DIKEKALKAN, duduk di bawah kecerunan
   biru. Jadi ia masih tempat yang sama, cuma waktu siang.
   Tanpa gambar itu hero jadi kecerunan rata yang boleh jadi
   laman sesiapa.
   ============================================================ */
/* TINDANAN BIRU RENDAH + VIGNET DI TENGAH
   ------------------------------------------------------------
   Permintaan user: turunkan biru supaya warna asal gambar hutan
   nampak. Tetapi menurunkan biru sahaja menjadikan teks putih
   lebih sukar dibaca, jadi dua perubahan ini datang BERSAMA dan
   jangan dipisahkan.

   Lapisan PERTAMA ialah vignet gelap di tengah, tepat di
   belakang teks. Tepi hero kekal cerah, jadi hutan nampak; yang
   digelapkan cuma lajur tengah yang memang ada tulisan.

   Diukur dengan merender lapisan latar SAHAJA tanpa teks pada
   1200x800, kemudian mengambil piksel sebenar di kawasan teks
   (x 24-76%, y 40-63%) dan mengambil yang TERBURUK.

   Kad hero lebih pendek daripada versi pertama, jadi teks naik
   ke atas dan vignet dipusatkan semula pada 44%, bukan 50%.
   Diukur semula selepas setiap perubahan saiz hero; nilai lama
   TIDAK sah apabila geometri kad berubah.

                      asal    sekarang   perlu
     perenggan 18px    1.85      4.83      4.5
     tajuk putih       2.06      5.37      3.0
     Seronok kuning    1.55      4.03      3.0

   Jadi hutan lebih nampak DAN teks lebih terbaca daripada
   sebelum ini. Versi lama sebenarnya sudah gagal kontras;
   bayang teks yang menyelamatkan rupanya, bukan latar.

   Kalau biru ini diturunkan lagi kemudian, UKUR SEMULA. */
/* HERO JADI KAD, BUKAN JALUR PENUH
   ------------------------------------------------------------
   Permintaan user. Lebarnya diselaraskan PERSIS dengan bar atas
   (`calc(100% - 32px)`, maksimum 1180px, di tengah), jadi tepi
   kiri kanan kedua-duanya berbaris. Kalau nilainya berbeza
   sedikit, mata nampak ia tersasar walaupun tak tahu kenapa.

   `min-height:100vh` dibuang. Itulah yang menjadikan hero setegak
   skrin pada desktop; tanpanya tingginya ikut kandungan, jadi
   pada skrin lebar ia keluar melintang seperti yang user minta.

   Jidar atas 84px memberi ruang kepada bar atas yang terapung
   (14px dari atas, tinggi kira-kira 56px) supaya ia tak bertindih
   dengan bibir kad. */
.hero{
  position:relative;overflow:hidden;
  width:calc(100% - 32px) !important;
  max-width:1180px !important;
  margin:94px auto 0 !important;
  min-height:0 !important;
  padding:46px 24px 104px !important;
  border-radius:34px !important;
  background:
    radial-gradient(ellipse 64% 62% at 50% 44%,
      rgba(6,20,60,.78) 0%, rgba(6,20,60,.46) 62%, transparent 88%),
    radial-gradient(ellipse at 65% 82%, rgba(95,244,213,.24) 0%, transparent 42%),
    linear-gradient(125deg, rgba(0,58,203,.44) 0%, rgba(0,85,238,.36) 40%,
                     rgba(33,158,248,.28) 82%, rgba(31,200,222,.28) 100%),
    url('../bg-hutan.jpg') center 40% / cover no-repeat
    !important;
  box-shadow:inset 0 4px 0 rgba(201,255,255,.5), 0 10px 0 rgba(33,109,196,.22) !important;
}

/* Pada telefon, lajur teks hampir SELEBAR skrin, jadi vignet
   62% di atas tak sampai ke tepi dan perenggan jatuh ke 2.20.
   Di sini ia dilebarkan melepasi tepi hero.

   Diukur pada 390x780, kawasan teks x 5-95% dan y 33-66%:

     vignet desktop         perenggan 2.20   GAGAL
     vignet ini (112%/36%)  perenggan 5.02   lulus
     versi lebih lut lagi   perenggan 4.16   GAGAL

   Jadi nilai ini bukan dipilih sedap mata; ia yang PALING lut
   antara yang masih lulus. */
@media (max-width:700px){
  .hero{
    background:
      radial-gradient(ellipse 112% 44% at 50% 36%,
        rgba(6,20,60,.68) 0%, rgba(6,20,60,.46) 70%, rgba(6,20,60,.2) 100%),
      radial-gradient(ellipse at 65% 82%, rgba(95,244,213,.24) 0%, transparent 42%),
      linear-gradient(125deg, rgba(0,58,203,.44) 0%, rgba(0,85,238,.36) 40%,
                       rgba(33,158,248,.28) 82%, rgba(31,200,222,.28) 100%),
      url('../bg-hutan.jpg') center 40% / cover no-repeat
      !important;
  }
}
/* Tindanan ungu yang asal dibuang; kecerunan biru di atas
   sudah membawa kontras yang sama. */
.hero::before{background:none !important;content:none !important}

/* Jalur rumput melengkung di kaki hero. Ia yang menamatkan hero
   dengan tegas, dan ia TANDA TANGAN reka bentuk ini. */
.hero::after{
  content:'' !important;position:absolute !important;
  bottom:-54px !important;left:-3% !important;
  height:96px !important;width:106% !important;
  transform:rotate(-2.4deg) !important;border-radius:50% !important;
  background:linear-gradient(#e9e65f,#4ed49a 45%,#159fa2) !important;
  z-index:1 !important;inset:auto auto -54px -3% !important;
}
.hero-isi{position:relative;z-index:3}
.hero-logo img{filter:drop-shadow(0 9px 3px rgba(15,55,142,.45))}

/* Pada skrin lebar, logo dikecilkan dan jidar dirapatkan supaya
   kad hero betul-betul MELINTANG dan muat dalam satu skrin
   komputer riba. Logo 192px ialah bahagian paling tinggi dalam
   kad itu, jadi ia yang memberi kesan paling besar.

   Diukur pada 1200px: 1153 x 857 menjadi 1153 x 781. */
@media (min-width:900px){
  .hero{padding:34px 24px 88px !important}
  .hero-logo img{height:140px !important;width:auto !important}
  .hero-logo{margin-bottom:10px !important}
}

.hero h1{
  color:#fff !important;font-weight:1000 !important;
  font-size:clamp(30px,6.4vw,50px) !important;line-height:1.04 !important;
  letter-spacing:-1px !important;
  text-shadow:2px 4px 0 #082986 !important;
}
/* Perkataan yang ditekankan: kuning bergaris luar, dengan
   bayang KERAS ungu. Inilah teks paling menonjol di halaman,
   jadi ia dipakai sekali sahaja. */
.hero h1 i,.hero h1 em,.hero h1 span{
  display:block;font-style:normal;
  color:var(--lg-kuning) !important;
  -webkit-text-fill-color:var(--lg-kuning) !important;
  background:none !important;
  font-size:clamp(44px,9vw,78px) !important;letter-spacing:-2px !important;
  -webkit-text-stroke:1px var(--lg-kuning2);
  text-shadow:0 5px 0 #7044a7, 0 8px 10px #001b76 !important;
}
.hero p,.hero .sub{
  color:#eaf4ff !important;font-weight:900 !important;
  text-shadow:0 3px 4px #163482 !important;
}

/* ---- jalur statistik: kad putih bulat ---- */
.stat{background:none !important;border:0 !important;box-shadow:none !important;
      padding:0 !important;gap:12px !important;margin-top:28px !important}
.stat-kotak{
  background:linear-gradient(#fdfcff,#d7e8ff) !important;
  border:2px solid #fff !important;border-radius:26px !important;
  box-shadow:0 6px 0 rgba(199,226,255,.95), 0 10px 20px rgba(23,99,178,.3) !important;
  padding:13px 20px !important;backdrop-filter:none !important;
}
.stat-kotak:hover{transform:translateY(-4px) !important}
.stat-num{color:var(--lg-biru) !important;font-weight:1000 !important;
          font-size:1.9rem !important;text-shadow:none !important}
.stat-lbl{color:#263780 !important;font-weight:900 !important;letter-spacing:.1em !important}

/* Lengkung SVG lama dibuang: jalur rumput di atas sudah
   menamatkan hero, dan dua lengkung bertindih nampak kotor. */
.lengkung{display:none !important}

/* ============================================================
   KAD PUTIH
   Dipakai untuk benda yang pelawat BACA atau JAWAB.
   ============================================================ */
.cuba-kad,.uls-kad,.baru-k,.lang,.akhir{
  background:linear-gradient(#fff,#f0eeff) !important;
  border:2px solid #fff !important;border-radius:32px !important;
  box-shadow:var(--lg-byg-kad) !important;
  color:var(--lg-navy) !important;
}
.uls-nama,.baru-k b,.lang h3{color:var(--lg-navy) !important;font-weight:1000 !important}
.uls-komen,.baru-k p,.lang p{color:#2d3f74 !important;font-weight:700 !important}
.uls-bintang,.uls-b{color:#f0a500 !important}
.uls-purata{color:var(--lg-navy) !important}
.uls-titik.on,.pod-titik{background:var(--lg-biru) !important}

/* Bulatan nombor langkah */
.lang-num{
  background:linear-gradient(135deg,#fff68b,#eb9200) !important;
  color:#1b2551 !important;border:3px solid #fff !important;
  font-weight:1000 !important;
  box-shadow:0 3px 7px rgba(0,0,0,.25) !important;
}

/* ============================================================
   KAD CIRI & GAME: kad menu berwarna
   ------------------------------------------------------------
   Enam ciri dan lima game dapat warna berlainan mengikut
   urutannya. Warna di sini BUKAN hiasan: ia yang membolehkan
   ibu bapa mengingat "yang hijau tu kuiz" tanpa membaca semula.
   ============================================================ */
.kad,.game{
  color:#fff !important;text-align:left !important;
  border:2px solid rgba(255,255,255,.72) !important;
  border-radius:26px !important;
  padding:17px 14px 14px 22px !important;
  box-shadow:0 6px 0 rgba(28,58,150,.65), 0 9px 12px rgba(36,77,153,.3) !important;
  transition:transform .2s, filter .2s !important;
}
.kad:hover,.game:hover{transform:translateY(-4px) !important;filter:saturate(1.2) !important}
.kad,.game{position:relative !important;isolation:isolate}

/* TABIR GELAP di bahagian bawah setiap kad berwarna.
   ------------------------------------------------------------
   Ini BUKAN hiasan, dan JANGAN dilembutkan tanpa mengukur
   semula. Kecerunan oren bermula pada #ffdd48, iaitu kuning
   sangat cerah, dan teks putih di atasnya hampir tak boleh
   dibaca.

   Nilai ini diukur dengan merender kecerunan itu SAHAJA tanpa
   teks, kemudian mengambil piksel sebenar pada sembilan
   ketinggian dengan System.Drawing. Membandingkan kod warna
   secara kira-kira memberi jawapan yang terlalu baik, kerana
   kecerunan berubah merentas kad.

   Nisbah terburuk bagi enam kad, dari 40% tinggi ke bawah:

     tanpa tabir   oren 3.02   hijau 3.37   cyan 3.70   GAGAL
     tabir ini     oren 4.67   hijau 5.06   cyan 5.33   lulus AA
*/
.kad::before,.game::before{
  content:'' !important;display:block !important;
  position:absolute !important;inset:0 !important;z-index:-1;
  border-radius:inherit;
  background:linear-gradient(to bottom,
    rgba(8,22,64,0) 4%, rgba(8,22,64,.46) 46%, rgba(8,22,64,.6) 100%) !important;
}

/* Emoji besar di belakang kad game. Dikurangkan dari .14 ke .07
   dan dialih ke penjuru: pada kad PUTIH asal ia halus, tetapi
   atas kecerunan berwarna putih 14% itu terbaca sebagai corak
   yang bersaing dengan teks. */
.game::after{
  opacity:.07 !important;
  right:-6px !important;bottom:-14px !important;
  top:auto !important;left:auto !important;
}

.grid .kad:nth-of-type(1),.game-grid .game:nth-of-type(1){background:var(--lg-ungu) !important}
.grid .kad:nth-of-type(2),.game-grid .game:nth-of-type(2){background:var(--lg-hijau) !important}
.grid .kad:nth-of-type(3),.game-grid .game:nth-of-type(3){background:var(--lg-oren) !important}
.grid .kad:nth-of-type(4),.game-grid .game:nth-of-type(4){background:var(--lg-cyan) !important}
.grid .kad:nth-of-type(5),.game-grid .game:nth-of-type(5){background:var(--lg-pink) !important}
.grid .kad:nth-of-type(6),.game-grid .game:nth-of-type(6){background:var(--lg-indigo) !important}

.kad h3,.kad b,.game b{
  color:#fff !important;font-weight:1000 !important;font-size:1.1rem !important;
  text-shadow:0 2px 3px rgba(22,42,117,.4) !important;
}
.kad p,.game p,.game span{color:rgba(255,255,255,.94) !important;font-weight:800 !important}
.kad-ikon,.game-ikon{
  background:none !important;border:0 !important;
  font-size:46px !important;line-height:1 !important;
  filter:drop-shadow(0 4px 2px rgba(20,47,140,.4)) !important;
  margin:0 0 8px !important;width:auto !important;height:auto !important;
}

/* Subjek kekal kad putih, bukan berwarna: senarai subjek ialah
   maklumat, bukan butang tindakan. Kalau ia turut berwarna,
   enam kad ciri di atas hilang maknanya. */
.subjek a,.subjek div{
  background:linear-gradient(#fff,#eef4ff) !important;
  border:2px solid #fff !important;border-radius:22px !important;
  color:var(--lg-navy) !important;font-weight:900 !important;
  box-shadow:0 5px 0 #c7e2ff, 0 8px 16px rgba(48,112,175,.26) !important;
}

/* ============================================================
   KUIZ CUBA SENDIRI
   ------------------------------------------------------------
   Butang jawapan duduk atas KERTAS PUTIH, bukan atas latar
   bertema. Itu yang memastikan hijau "betul" dan merah "salah"
   masih menonjol walaupun halaman ini penuh biru.
   ============================================================ */
.cuba-atas,.cuba-soalan,.cuba-kira,.cuba-skor{color:var(--lg-navy) !important}
.cuba-bar{background:#dde6fb !important}
.cuba-bar > *{background:linear-gradient(90deg,#4324e3,#61e7fe) !important}
.cuba-pilih button{
  background:#fff !important;color:var(--lg-navy) !important;
  border:2px solid #cfe0f8 !important;border-radius:18px !important;
  font-weight:900 !important;
  box-shadow:0 4px 0 #cfe0f8 !important;
}
.cuba-pilih button.betul{
  background:linear-gradient(135deg,#68ed79,#00ae7c) !important;color:#fff !important;
  border-color:#00916a !important;box-shadow:0 4px 0 #00916a !important;
}
.cuba-pilih button.salah{
  background:linear-gradient(135deg,#ff8da4,#e01b3c) !important;color:#fff !important;
  border-color:#b50f2c !important;box-shadow:0 4px 0 #b50f2c !important;
}
.cuba-hur{
  background:linear-gradient(90deg,#ece8ff,#dedcff) !important;
  border:2px solid #c9c2ff !important;color:#263780 !important;
  border-radius:22px !important;
}
.cuba-hur b{color:#3b1d9e !important}
.cuba-nota,.cuba-kaki{color:#4a5a8c !important;font-weight:800 !important}
.cuba-tamat{background:linear-gradient(90deg,#d9fbe7,#bdf3d4) !important;
            color:#0a4b32 !important;border-radius:22px !important}

/* ============================================================
   PODIUM
   ------------------------------------------------------------
   Tiga kad bertingkat dengan pingat bernombor di penjuru dan
   mahkota pada juara. Juara SENGAJA lebih tinggi dan lebih
   lebar; podium yang sama rata tak memberitahu apa-apa.
   ============================================================ */
.podium{align-items:end !important}
.pod{
  border:2px solid #fff !important;border-radius:24px !important;
  color:var(--lg-navy) !important;
  background:linear-gradient(130deg,#eff6ff,#b4ceff) !important;
  box-shadow:0 7px 0 #98a9e6, 0 7px 14px rgba(120,120,179,.25) !important;
}
.pod-1{
  background:linear-gradient(130deg,#fff9d5,#ffe078) !important;
  box-shadow:0 8px 0 #edaf28, 0 7px 17px rgba(156,105,14,.27) !important;
  transform:translateY(-14px) !important;
}
.pod-3{
  background:linear-gradient(130deg,#fff0e6,#ffadb1) !important;
  box-shadow:0 7px 0 #fa8393, 0 7px 14px rgba(173,84,99,.25) !important;
}
.pod-av{
  background:rgba(255,255,255,.65) !important;
  border:3px solid rgba(255,255,255,.75) !important;
  box-shadow:0 2px 8px rgba(88,102,152,.6) !important;
}
.pod-nama{color:var(--lg-navy) !important;font-weight:1000 !important}
.pod-markah,.pod-1 .pod-markah,.pod-2 .pod-markah,.pod-3 .pod-markah{
  color:#0a277c !important;font-weight:1000 !important;
  font-size:1.7rem !important;text-shadow:none !important;
}
.pod-tahun,.pod-langsung{color:#3b4f8f !important;font-weight:800 !important}
.pod-kedudukan{
  background:rgba(255,255,255,.6) !important;border:0 !important;
  color:#263780 !important;font-weight:900 !important;border-radius:30px !important;
  box-shadow:none !important;
}
/* Pingat bulat di penjuru kiri atas, menindih bibir kad. */
.pod-medal{
  position:absolute !important;left:7px !important;top:-15px !important;
  width:43px !important;height:43px !important;border-radius:50% !important;
  display:grid !important;place-items:center !important;
  border:3px solid #fff !important;font-size:0 !important;
  box-shadow:0 3px 7px rgba(0,0,0,.27) !important;margin:0 !important;
}
.pod-medal::after{
  font-family:'Nunito',sans-serif;font-weight:1000;font-size:23px;
  color:#fff;text-shadow:0 2px 2px rgba(51,51,51,.53);
}
.pod{position:relative !important}
/* Mahkota pada juara. Ia tanda tangan reka bentuk ini, dan ia
   memberitahu siapa yang nombor satu tanpa membaca nombor. */
.pod-1::before{
  content:'👑' !important;position:absolute !important;
  top:-30px !important;left:50% !important;transform:translateX(-50%) !important;
  font-size:36px !important;line-height:1 !important;z-index:3 !important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.25)) !important;
}
/* Podium perlu ruang di atas untuk mahkota, kalau tidak ia
   bertindih dengan ayat pengenalan di atasnya. */
.podium{margin-top:38px !important}
.pod-1 .pod-medal{background:linear-gradient(135deg,#fff68b,#eb9200) !important}
.pod-1 .pod-medal::after{content:"1"}
.pod-2 .pod-medal{background:linear-gradient(135deg,#b3d4ff,#4265bd) !important}
.pod-2 .pod-medal::after{content:"2"}
.pod-3 .pod-medal{background:linear-gradient(135deg,#f7a27e,#a63e0c) !important}
.pod-3 .pod-medal::after{content:"3"}

/* ============================================================
   BARU DITAMBAH & AJAKAN AKHIR
   ============================================================ */
.baru-pil{
  background:linear-gradient(#a653ff,#5c0dd9) !important;color:#fff !important;
  border:0 !important;border-radius:40px !important;font-weight:1000 !important;
  box-shadow:0 4px 4px rgba(64,27,191,.33) !important;
}
.akhir{
  background:linear-gradient(110deg,#153ec0,#4b23d9 55%,#904ff4) !important;
  color:#fff !important;border:3px solid #fdfbff !important;
  border-radius:37px !important;
  box-shadow:0 6px 0 #8fa3e2, 0 9px 17px rgba(32,61,138,.33) !important;
}
.akhir::before,.akhir::after{display:none !important}
.akhir h2,.akhir b{color:#fff !important;text-shadow:0 3px 4px rgba(22,52,130,.5) !important}
.akhir p{color:rgba(255,255,255,.92) !important;font-weight:800 !important}

/* ============================================================
   KAKI
   ============================================================ */
.kaki{
  background:linear-gradient(160deg,#1a2d63,#12245b) !important;
  color:#cfe0f8 !important;border-top:3px solid #fff !important;
  border-radius:40px 40px 0 0 !important;
}
.kaki a,.kaki-pautan a{color:#9fd4ff !important;font-weight:900 !important}
.kaki-hak,.kaki-tag{color:#8ea4d6 !important}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important}}