/* =========================================================================
   KAD KURSUS, KEPALA SEKSYEN & KEADAAN KOSONG — 29 Okt 2026

   Variasi B "Kad Kalendar" (dipilih pengguna). Warna rasmi sahaja: merah
   #cf2e2e, putih, kelabu. Bahasa visual: grid titik, cincin nipis sepusat,
   garis merah pendek bawah tajuk.

   Additional CSS (Customizer, post 17) masih menetapkan grid 4 lajur, bingkai
   skrol dan gaya asas kad dengan pemilih `.senarai-kursus-container li` dsb.
   CSS Customizer dicetak SELEPAS fail tema, jadi pemilih di sini sengaja
   lebih khusus (`> ul > li`, `.course-card-content .x`) — bukan !important.
   !important hanya digunakan untuk mengatasi gaya inline blok (padding).
   ========================================================================= */

/* ---------- Kepala seksyen ("Cetusan Minda" dalam bekas kursus) ---------- */
.ikpkt-kursus-kepala {
    position: relative;
    isolation: isolate;
    padding-top: 8px !important;
    padding-bottom: 34px !important;
}
.ikpkt-kursus-kepala > .wp-block-columns {
    position: relative;
    align-items: center;
    column-gap: 56px !important;
}
/* Grid titik di antara teks dan gambar */
.ikpkt-kursus-kepala > .wp-block-columns::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 46%;
    width: 220px;
    height: 160px;
    pointer-events: none;
    background-image: radial-gradient(rgba(207, 46, 46, .22) 1.4px, transparent 1.6px);
    background-size: 16px 16px;
    opacity: .7;
}
.ikpkt-kursus-kepala .kursus-kepala__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #cf2e2e;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
}
.ikpkt-kursus-kepala .kursus-kepala__label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #cf2e2e;
}
.ikpkt-kursus-kepala h2.wp-block-heading {
    margin: 0;
    color: #1b2430;
    font-size: clamp(1.8rem, 2.7vw, 2.35rem);
    font-weight: 700;
    line-height: 1.15;
}
.ikpkt-kursus-kepala h2.wp-block-heading::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 18px 0 14px;
    border-radius: 2px;
    background: #cf2e2e;
}
.ikpkt-kursus-kepala h2.wp-block-heading + p {
    margin: 0;
    color: #5b6470;
    font-size: 1.02rem;
}
/* Statistik — asas + tiga gaya (ikpkt-stat-1/2/3, lihat ikpkt_kursus_gaya()) */
.ikpkt-kursus-kepala .kursus-kepala__statistik {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 22px 0 4px;
}
.ikpkt-kursus-kepala .kursus-kepala__stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ikpkt-kursus-kepala .kursus-kepala__tx {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.ikpkt-kursus-kepala .kursus-kepala__tx b {
    color: #1b2430;
    font-size: 1.6rem;
    /* Digit berkadar, bukan tabular-nums: digit tabular memberi "1" lebar
       penuh dan memusatkannya, jadi "122" kelihatan beranjak ke kanan
       berbanding label di bawahnya. */
    font-variant-numeric: proportional-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.ikpkt-kursus-kepala .kursus-kepala__tx span {
    margin-top: 3px;
    color: #6b7480;
    font-size: .76rem;
    letter-spacing: .02em;
    white-space: nowrap;
}
.ikpkt-kursus-kepala .kursus-kepala__ik {
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fdf2f2;
    color: #cf2e2e;
}
.ikpkt-kursus-kepala .kursus-kepala__stat--dibuka .kursus-kepala__ik {
    background: #ecfdf3;
    color: #16a34a;
}
.ikpkt-kursus-kepala .kursus-kepala__ik svg { width: 22px; height: 22px; }
.ikpkt-kursus-kepala .kursus-kepala__bar { display: none; }
/* Animasi muncul — hanya apabila kursus-kad.js aktif (.is-sedia) */
.kursus-kepala__statistik.is-sedia .kursus-kepala__stat {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}
.kursus-kepala__statistik.is-sedia.is-kelihatan .kursus-kepala__stat { opacity: 1; transform: none; }
.kursus-kepala__statistik.is-sedia.is-kelihatan .kursus-kepala__stat:nth-child(2) { transition-delay: .15s; }

/* S1: Kaunter berikon dengan pemisah halus */
.ikpkt-kursus-kepala .ikpkt-stat-1 {
    gap: 0;
    max-width: 480px;
    padding: 14px 4px;
    border-top: 1px solid #e6e8ec;
    border-bottom: 1px solid #e6e8ec;
}
.ikpkt-kursus-kepala .ikpkt-stat-1 .kursus-kepala__stat {
    margin-right: 22px;
    padding-right: 22px;
    border-right: 1px solid #e6e8ec;
}
.ikpkt-kursus-kepala .ikpkt-stat-1 .kursus-kepala__stat:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
.ikpkt-kursus-kepala .ikpkt-stat-1 .kursus-kepala__stat:hover .kursus-kepala__ik { transform: translateY(-2px) rotate(-6deg); }
.ikpkt-kursus-kepala .ikpkt-stat-1 .kursus-kepala__ik { transition: transform .3s ease; }

/* S2: Kad gelap dengan bar kemajuan */
.ikpkt-kursus-kepala .ikpkt-stat-2 { gap: 12px; }
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__stat {
    flex-wrap: wrap;
    min-width: 160px;
    overflow: hidden;
    padding: 14px 18px 16px;
    border-radius: 14px;
    background: #1b2430;
    box-shadow: 0 10px 24px rgba(17, 20, 24, .18);
}
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__stat::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 6px, rgba(255, 255, 255, .10) 6px 7px);
}
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__ik { display: none; }
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__tx b { color: #fff; }
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__tx span { color: #aab2bd; }
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__bar {
    display: block;
    flex: 1 0 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, .14);
}
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__bar::before {
    content: "";
    display: block;
    width: var(--p);
    height: 100%;
    border-radius: 4px;
    background: #cf2e2e;
    transform-origin: left;
}
.ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__stat--dibuka .kursus-kepala__bar::before { background: #22c55e; }
.kursus-kepala__statistik.ikpkt-stat-2.is-sedia .kursus-kepala__bar::before { transform: scaleX(0); transition: transform 1.2s .3s ease; }
.kursus-kepala__statistik.ikpkt-stat-2.is-sedia.is-kelihatan .kursus-kepala__bar::before { transform: scaleX(1); }

/* S3: Pil berganding */
.ikpkt-kursus-kepala .ikpkt-stat-3 {
    display: inline-flex;
    gap: 0;
    padding: 6px;
    border: 1px solid #eceef1;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(17, 20, 24, .07);
}
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__stat { padding: 9px 20px; border-radius: 999px; }
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__ik { display: none; }
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__tx { flex-direction: row; align-items: baseline; gap: 8px; }
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__tx b { font-size: 1.35rem; }
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__stat--kursus { background: #cf2e2e; }
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__stat--kursus b,
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__stat--kursus span { color: #fff; }
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__stat--dibuka b { color: #15803d; }
.ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__stat--dibuka::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    animation: ikpktDenyutHijau 1.8s infinite;
}
.ikpkt-kursus-kepala .wp-block-buttons {
    margin-top: 22px;
}
.ikpkt-kursus-kepala .wp-block-button .wp-block-button__link {
    padding: 11px 24px;
    border: 1.5px solid #cf2e2e;
    border-radius: 999px;
    background: #fff;
    color: #cf2e2e;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}
.ikpkt-kursus-kepala .wp-block-button .wp-block-button__link:hover,
.ikpkt-kursus-kepala .wp-block-button .wp-block-button__link:focus-visible {
    background: #cf2e2e;
    color: #fff;
}
/* <style> inline lama dalam template (.butang-hover-merah:hover) mewarnakan
   PEMBALUT segi empat butang, bukan pil itu sendiri — segi empat merah muncul
   di sekeliling pil semasa hover. Pil kini mengendalikan hover sendiri. */
.ikpkt-kursus-kepala .wp-block-button.butang-hover-merah:hover {
    background-color: transparent !important;
}
/* Gambar: cincin sepusat di bucu kiri bawah (bucu merah dibuang atas permintaan pengguna) */
.ikpkt-kursus-kepala .wp-block-column:last-child {
    position: relative;
}
.ikpkt-kursus-kepala .wp-block-column:last-child::before {
    content: "";
    position: absolute;
    left: -22px;
    bottom: -22px;
    z-index: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 14px, rgba(207, 46, 46, .18) 14px 15px);
}
.ikpkt-kursus-kepala figure.wp-block-image {
    position: relative;
    z-index: 1;
    margin: 0;
}
.ikpkt-kursus-kepala figure.wp-block-image img {
    width: 100%;
    height: auto;
    max-height: 330px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(17, 20, 24, .16);
}
@media (max-width: 781px) {
    .ikpkt-kursus-kepala > .wp-block-columns { row-gap: 28px; }
    .ikpkt-kursus-kepala > .wp-block-columns::before { display: none; }
    .ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__stat { flex: 1 1 0; min-width: 0; }
    .ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__stat { padding: 12px 14px 14px; }
    .ikpkt-kursus-kepala .ikpkt-stat-2 .kursus-kepala__tx span { white-space: normal; }
    .ikpkt-kursus-kepala .ikpkt-stat-1 { flex-wrap: nowrap; }
    .ikpkt-kursus-kepala .ikpkt-stat-1 .kursus-kepala__stat { flex: 1 1 0; min-width: 0; gap: 10px; margin-right: 14px; padding-right: 14px; }
    .ikpkt-kursus-kepala .ikpkt-stat-1 .kursus-kepala__ik { flex-basis: 38px; width: 38px; height: 38px; }
    .ikpkt-kursus-kepala .ikpkt-stat-1 .kursus-kepala__tx span { white-space: normal; }
    .ikpkt-kursus-kepala .ikpkt-stat-3 .kursus-kepala__stat { padding: 8px 14px; }
    /* Lapisan putih lembut: foto Panorama lebih ketara pada skrin kecil */
    .ikpkt-latar-1 .ikpkt-kursus-kepala::before,
    .ikpkt-latar-3 .ikpkt-kursus-kepala::before {
        content: "";
        position: absolute;
        inset: -10px -10px 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .88) 80%, rgba(255, 255, 255, 0) 100%);
    }
}

/* ---------- Butang set semula pintasan ---------- */
.senarai-kursus-container .kursus-carian > .kursus-btn-wrap:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.senarai-kursus-container .kursus-carian__reset.kursus-carian__reset--pintas {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    padding: 9px 15px;
    border: 1px solid #d5d8de;
    border-radius: 999px;
    background: #fff;
    color: #46566b;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.senarai-kursus-container .kursus-carian__reset--pintas svg {
    width: 16px;
    height: 16px;
    transition: transform .35s ease;
}
.senarai-kursus-container .kursus-carian__reset.kursus-carian__reset--pintas:hover,
.senarai-kursus-container .kursus-carian__reset.kursus-carian__reset--pintas:focus-visible {
    border-color: #cf2e2e;
    background: #fdf2f2;
    color: #cf2e2e;
}
.senarai-kursus-container .kursus-carian__reset--pintas:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}
.senarai-kursus-container .kursus-carian__reset--pintas:hover svg {
    transform: rotate(-220deg);
}
@media (max-width: 600px) {
    .senarai-kursus-container .kursus-carian > .kursus-btn-wrap:first-child { flex-wrap: nowrap; }
    .senarai-kursus-container .kursus-carian__togol { flex: 1 1 auto; }
    .senarai-kursus-container .kursus-carian__reset.kursus-carian__reset--pintas { flex: 0 0 auto; width: auto; padding: 9px 12px; }
}

/* ---------- Bingkai skrol ---------- */
.senarai-kursus-container > ul {
    padding: 10px 14px 18px 4px;
    scrollbar-width: thin;
    scrollbar-color: #cf2e2e #eceef1;
}
.senarai-kursus-container > ul::-webkit-scrollbar { width: 8px; }
.senarai-kursus-container > ul::-webkit-scrollbar-thumb { background: #cf2e2e; border-radius: 8px; }
.senarai-kursus-container > ul::-webkit-scrollbar-track { background: #eceef1; border-radius: 8px; }

/* ---------- Kad ---------- */
.senarai-kursus-container > ul > li {
    position: relative;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(17, 20, 24, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.senarai-kursus-container > ul > li:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(17, 20, 24, .14);
}
.senarai-kursus-container .kursus-kad__fig {
    position: relative;
}
.senarai-kursus-container .kursus-kad__fig::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(transparent, rgba(17, 20, 24, .35));
    pointer-events: none;
}
.senarai-kursus-container .kursus-kad__fig .kursus-kad__imej {
    margin: 0;
    line-height: 0;
}
.senarai-kursus-container .kursus-kad__fig .course-card-image {
    display: block;
    height: 200px;
    object-position: top;
}
.senarai-kursus-container .kursus-kad__tiada-imej {
    height: 200px;
    background:
        radial-gradient(rgba(207, 46, 46, .25) 1.3px, transparent 1.5px) 0 0 / 14px 14px,
        #f2f3f5;
}
.senarai-kursus-container .kursus-kad__kalendar {
    position: absolute;
    left: 18px;
    bottom: -26px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 56px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
    line-height: 1;
    text-align: center;
}
.senarai-kursus-container .kursus-kad__kalendar span {
    padding: 5px 0 4px;
    background: #cf2e2e;
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.senarai-kursus-container .kursus-kad__kalendar b {
    padding: 7px 0 8px;
    color: #1b2430;
    font-size: 1.45rem;
}
.senarai-kursus-container > ul > li > .course-card-content {
    position: relative;
    overflow: hidden;
    padding: 40px 20px 20px;
}
/* Hiasan bucu — tiga gaya (ikpkt-sudut-a/b/c, lihat ikpkt_kursus_gaya()) */
.senarai-kursus-container > ul > li > .course-card-content::before,
.senarai-kursus-container > ul > li > .course-card-content::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
/* A: Lengkok sepusat — suku bulatan berlapis, berpusing perlahan semasa hover */
.ikpkt-sudut-a > ul > li > .course-card-content::before {
    top: -80px;
    right: -80px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 10px, rgba(207, 46, 46, .30) 10px 11.5px);
    -webkit-mask: radial-gradient(circle, #000 25%, rgba(0, 0, 0, .5) 50%, transparent 72%);
            mask: radial-gradient(circle, #000 25%, rgba(0, 0, 0, .5) 50%, transparent 72%);
    transition: transform .5s ease;
}
.ikpkt-sudut-a > ul > li > .course-card-content::after {
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cf2e2e;
    box-shadow: -14px 10px 0 -2px rgba(207, 46, 46, .35);
}
.ikpkt-sudut-a > ul > li:hover > .course-card-content::before { transform: rotate(25deg) scale(1.08); }
/* B: Blok geometri — segi empat merah condong + bingkai */
.ikpkt-sudut-b > ul > li > .course-card-content::before {
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(207, 46, 46, .85), #cf2e2e);
    box-shadow: -16px 12px 0 -4px #eceef1, -16px 12px 0 -3px #d5d8de;
    opacity: .9;
    transform: rotate(12deg);
    transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.ikpkt-sudut-b > ul > li > .course-card-content::after {
    top: 6px;
    right: 6px;
    width: 52px;
    height: 52px;
    border: 1.5px solid rgba(207, 46, 46, .25);
    border-radius: 12px;
    transform: rotate(-8deg);
    transition: transform .45s ease;
}
.ikpkt-sudut-b > ul > li:hover > .course-card-content::before { transform: rotate(-6deg) translate(-2px, 2px); }
.ikpkt-sudut-b > ul > li:hover > .course-card-content::after { transform: rotate(10deg); }
/* C: Jalur serong dipudar + cincin bertitik */
.ikpkt-sudut-c > ul > li > .course-card-content::before {
    top: 0;
    right: 0;
    width: 120px;
    height: 84px;
    background: repeating-linear-gradient(135deg, rgba(207, 46, 46, .18) 0 1.5px, transparent 1.5px 9px);
    -webkit-mask: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 65%);
            mask: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 65%);
}
.ikpkt-sudut-c > ul > li > .course-card-content::after {
    top: 18px;
    right: 18px;
    width: 22px;
    height: 22px;
    border: 2px solid #cf2e2e;
    border-radius: 50%;
    background: radial-gradient(circle, #cf2e2e 0 3px, transparent 3.5px);
    transition: transform .4s ease;
}
.ikpkt-sudut-c > ul > li:hover > .course-card-content::after { transform: scale(1.15); }
.senarai-kursus-container > ul > li > .course-card-content h3 {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    flex-grow: 1;
    margin: 0 0 14px;
    padding-right: 30px; /* ruang untuk hiasan bucu */
    color: #1b2430;
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.45;
}
.senarai-kursus-container .kursus-kad__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.senarai-kursus-container .kursus-kad__i {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f5f6f8;
}
.senarai-kursus-container .kursus-kad__i--tarikh,
.senarai-kursus-container .kursus-kad__i--status {
    grid-column: 1 / -1;
}
.senarai-kursus-container .kursus-kad__ik {
    flex: 0 0 16px;
    padding-top: 1px;
    color: #cf2e2e;
    line-height: 0;
}
.senarai-kursus-container .kursus-kad__ik svg {
    width: 16px;
    height: 16px;
}
.senarai-kursus-container .kursus-kad__tx {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.senarai-kursus-container .kursus-kad__lbl {
    color: #8a929c;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.senarai-kursus-container .kursus-kad__nilai {
    color: #232a33;
    font-size: .8rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* Kad sempit (~1025–1100px 4 lajur, ~800px 3 lajur: kad < 255px). Ikon
   setiap jubin dialih ke baris label supaya nilai mendapat lebar penuh
   jubin — tanpanya "OUTSIDE" terpecah "OUTSID / E", pil "TUTUP" terpecah
   dua baris dan julat panjang ("22 – 24 September 2026") melimpah. */
.senarai-kursus-container > ul > li { container: kad-kursus / inline-size; }
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai { white-space: nowrap; }
@container kad-kursus (max-width: 255px) {
    .senarai-kursus-container .kursus-kad__i {
        display: grid;
        grid-template-columns: 13px minmax(0, 1fr) auto;
        align-content: start;
        align-items: center;
        column-gap: 5px;
        padding: 8px 9px;
    }
    .senarai-kursus-container .kursus-kad__i .kursus-kad__tx,
    .senarai-kursus-container .kursus-kad__i--tarikh .kursus-kad__tx { display: contents; }
    .senarai-kursus-container .kursus-kad__i .kursus-kad__ik { grid-column: 1; grid-row: 1; padding-top: 0; }
    .senarai-kursus-container .kursus-kad__i .kursus-kad__ik svg { width: 13px; height: 13px; }
    .senarai-kursus-container .kursus-kad__i .kursus-kad__lbl { grid-column: 2; grid-row: 1; line-height: 17px; }
    /* Nilai Lokasi/Yuran/Tarikh: baris 2, lebar penuh */
    .senarai-kursus-container .kursus-kad__i .kursus-kad__nilai,
    .senarai-kursus-container .kursus-kad__i--tarikh .kursus-kad__nilai,
    .senarai-kursus-container .kursus-kad__julat-teks { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; overflow-wrap: normal; }
    .senarai-kursus-container .kursus-kad__hari { grid-column: 3; grid-row: 1; }
    /* Status: satu baris — ikon, label, pil */
    .senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-buka,
    .senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-tutup { grid-column: 3; grid-row: 1; margin-top: 0; gap: 5px; padding: 3px 8px 3px 7px; font-size: .64rem; letter-spacing: .04em; }
    .senarai-kursus-container .kursus-kad__i--status .kursus-kad__lbl { font-size: .58rem; letter-spacing: .04em; }
}
/* Julat tarikh + pil bilangan hari (pilihan C). Jubin Tarikh memakai grid:
   baris 1 = label "TARIKH" + pil (kanan), baris 2 = tarikh penuh lebar.
   .kursus-kad__julat ialah display:contents supaya teks dan pil di dalamnya
   menjadi sel grid terus — pil tidak boleh bertindih dengan tarikh (versi
   kedudukan mutlak bertindih pada julat panjang seperti "22 – 24 September").
   Baris 1 ditetapkan 17px supaya jubin sehari dan berjulat sama tinggi. */
.senarai-kursus-container .kursus-kad__i--tarikh .kursus-kad__tx {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 17px auto;
    align-items: center;
    column-gap: 8px;
}
.senarai-kursus-container .kursus-kad__i--tarikh .kursus-kad__lbl { grid-column: 1; grid-row: 1; }
.senarai-kursus-container .kursus-kad__i--tarikh .kursus-kad__nilai { grid-column: 1 / -1; grid-row: 2; }
.senarai-kursus-container .kursus-kad__julat { display: contents; }
.senarai-kursus-container .kursus-kad__utuh { white-space: nowrap; }
.senarai-kursus-container .kursus-kad__julat-teks {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: nowrap;
}
.senarai-kursus-container .kursus-kad__hari {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    padding: 0 7px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e1e4e8;
    color: #46566b;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}
/* Status: jubin bertona + pil — DIBUKA hijau zamrud (titik berdenyut),
   TUTUP merah (ikon mangga). Hijau ialah warna semantik status sahaja,
   atas permintaan pengguna 29 Okt 2026. */
.senarai-kursus-container .kursus-kad__i--status {
    align-items: center;
    border-left: 3px solid #cf2e2e;
    background: #fdf3f3;
}
.senarai-kursus-container .kursus-kad__i--status.is-buka {
    border-left-color: #16a34a;
    background: #f0fdf4;
}
.senarai-kursus-container .kursus-kad__i--status.is-buka .kursus-kad__ik { color: #16a34a; }
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__tx {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-buka,
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-tutup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-buka {
    background: #dcfce7;
    box-shadow: inset 0 0 0 1px #bbf7d0;
    color: #15803d;
}
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-tutup {
    background: #fde2e2;
    box-shadow: inset 0 0 0 1px #f8c9c9;
    color: #b42525;
}
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-buka::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    animation: ikpktDenyutHijau 1.8s infinite;
}
.senarai-kursus-container .kursus-kad__i--status .kursus-kad__nilai.status-tutup::before {
    content: "";
    width: 11px;
    height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes ikpktDenyutHijau {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
    70%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* Butang kad */
.senarai-kursus-container .course-card-content .kursus-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.senarai-kursus-container .course-card-content .kursus-btn-lanjut,
.senarai-kursus-container .course-card-content .kursus-btn-mohon {
    flex: 1 1 0;
    min-width: max-content;
    padding: 10px 8px;
    border-radius: 10px;
    font-size: .68rem;
    text-align: center;
    white-space: nowrap;
}
.senarai-kursus-container .course-card-content .kursus-btn-lanjut {
    border: 0;
    background: #f5f6f8;
    color: #1b2430;
}
.senarai-kursus-container .course-card-content .kursus-btn-lanjut:hover,
.senarai-kursus-container .course-card-content .kursus-btn-lanjut:focus-visible {
    background: #fdeaea;
    color: #cf2e2e;
}
/* Mohon Kursus: anak panah SVG bergerak semasa hover, kilauan melintas,
   tekan = butang mengecil dan anak panah meluncur ke kanan. */
.senarai-kursus-container .course-card-content .kursus-btn-mohon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    transition: background-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.senarai-kursus-container .course-card-content .kursus-btn-mohon::after {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s ease;
}
.senarai-kursus-container .course-card-content .kursus-btn-mohon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%);
}
.senarai-kursus-container .course-card-content .kursus-btn-mohon:hover,
.senarai-kursus-container .course-card-content .kursus-btn-mohon:focus-visible {
    background: #b42525;
    box-shadow: 0 8px 18px rgba(207, 46, 46, .32);
}
.senarai-kursus-container .course-card-content .kursus-btn-mohon:hover::after,
.senarai-kursus-container .course-card-content .kursus-btn-mohon:focus-visible::after { animation: ikpktPanah .9s ease-in-out infinite; }
.senarai-kursus-container .course-card-content .kursus-btn-mohon:hover::before {
    transform: translateX(120%);
    transition: transform .7s ease;
}
.senarai-kursus-container .course-card-content .kursus-btn-mohon:active { transform: scale(.97); }
.senarai-kursus-container .course-card-content .kursus-btn-mohon:active::after { animation: none; transform: translateX(10px); }
@keyframes ikpktPanah {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .senarai-kursus-container > ul > li,
    .senarai-kursus-container .kursus-carian__reset--pintas svg { transition: none; }
    .senarai-kursus-container > ul > li:hover { transform: none; }
    .senarai-kursus-container .course-card-content .kursus-btn-mohon::after,
    .senarai-kursus-container .kursus-kad__nilai.status-buka::before,
    .ikpkt-kursus-kepala .kursus-kepala__stat::before { animation: none !important; }
    .senarai-kursus-container .course-card-content .kursus-btn-mohon::before { display: none; }
}

/* ---------- Latar seksyen — tiga gaya (kelas body ikpkt-latar-1/2/3) ----------
   Bekas ialah uagb/container (block_id 000a5ed0) yang mengandungi kepala
   seksyen. ::before bekas itu ialah lapisan warna Spectra (putih 90%);
   gaya L2/L3 menggantikannya. */
.wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala) > .uagb-container-inner-blocks-wrap {
    position: relative;
    z-index: 2;
}
/* L1: foto bangunan, dipudar ke putih di atas + grid titik ke bawah */
.ikpkt-latar-1 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala)::before {
    opacity: 1 !important;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .96) 35%, rgba(247, 248, 250, .86) 100%) !important;
}
.ikpkt-latar-1 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: radial-gradient(rgba(27, 36, 48, .10) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask: linear-gradient(180deg, transparent 30%, #000);
            mask: linear-gradient(180deg, transparent 30%, #000);
}
/* L2: tanpa foto — kelabu cerah + cincin besar dan grid titik (sepadan
   dengan seksyen berita & footer). Dipilih pengguna. */
.ikpkt-latar-2 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala) {
    overflow: hidden;
    background-color: #f5f6f8 !important;
    background-image: none !important;
}
.ikpkt-latar-2 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala)::before {
    content: "" !important;
    top: auto !important;
    right: -220px;
    bottom: -220px;
    left: auto !important;
    width: 640px !important;
    height: 640px !important;
    border-radius: 50%;
    opacity: 1 !important;
    background: repeating-radial-gradient(circle, transparent 0 34px, rgba(207, 46, 46, .07) 34px 35px) !important;
}
.ikpkt-latar-2 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala)::after {
    content: "";
    position: absolute;
    top: 38%;
    left: -120px;
    z-index: 1;
    width: 420px;
    height: 420px;
    pointer-events: none;
    background-image: radial-gradient(rgba(27, 36, 48, .12) 1.2px, transparent 1.4px);
    background-size: 20px 20px;
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
            mask: radial-gradient(circle, #000 30%, transparent 70%);
}
/* L3: foto bangunan monokrom + jalur serong merah */
.ikpkt-latar-3 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala) {
    overflow: hidden;
    background-color: #f7f8fa !important;
    background-image: none !important;
}
.ikpkt-latar-3 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala)::before {
    content: "" !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    opacity: .16 !important;
    background: url(../../../uploads/2025/12/Panorama3-scaled.jpg) center 70% / cover no-repeat !important;
    filter: grayscale(1) contrast(1.1);
    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
            mask: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
.ikpkt-latar-3 .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .ikpkt-kursus-kepala)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 46%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 62%, rgba(207, 46, 46, .06) 62% 70%, transparent 70% 74%, rgba(207, 46, 46, .04) 74% 78%, transparent 78%);
}

/* ---------- Keadaan kosong / ralat API ---------- */
.senarai-kursus-container--kosong .kursus-kosong {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 44px;
    overflow: hidden;
    padding: 48px 56px;
    border: 1px solid #eceef1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(17, 20, 24, .07);
}
.senarai-kursus-container--kosong .kursus-kosong::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 16px, rgba(207, 46, 46, .10) 16px 17px);
    pointer-events: none;
}
.senarai-kursus-container--kosong .kursus-kosong::after {
    content: "";
    position: absolute;
    right: 40px;
    bottom: 26px;
    width: 120px;
    height: 70px;
    background-image: radial-gradient(rgba(207, 46, 46, .30) 1.3px, transparent 1.5px);
    background-size: 12px 12px;
    pointer-events: none;
}
.senarai-kursus-container--kosong .kursus-kosong__ilu {
    position: relative;
    z-index: 1;
    width: 190px;
    height: 190px;
}
.senarai-kursus-container--kosong .kursus-kosong__teks {
    position: relative;
    z-index: 1;
    max-width: 620px;
}
.senarai-kursus-container--kosong .kursus-kosong__lencana {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fdf2f2;
    color: #cf2e2e;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
}
.senarai-kursus-container--kosong .kursus-kosong__lencana::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cf2e2e;
    animation: ikpktKursusDenyut 1.8s ease-in-out infinite;
}
.senarai-kursus-container--kosong .kursus-kosong--ralat .kursus-kosong__lencana {
    background: #f2f3f5;
    color: #46566b;
}
.senarai-kursus-container--kosong .kursus-kosong--ralat .kursus-kosong__lencana::before {
    background: #8a929c;
    animation: none;
}
@keyframes ikpktKursusDenyut { 50% { opacity: .25; } }
.senarai-kursus-container--kosong .kursus-kosong__tajuk {
    margin: 14px 0 10px;
    color: #1b2430;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
}
.senarai-kursus-container--kosong .kursus-kosong__tajuk::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 14px;
    border-radius: 2px;
    background: #cf2e2e;
}
.senarai-kursus-container--kosong .kursus-kosong__isi {
    margin: 0 0 22px;
    color: #5b6470;
    font-size: .95rem;
    line-height: 1.65;
}
.senarai-kursus-container--kosong .kursus-kosong__aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.senarai-kursus-container--kosong .kursus-kosong__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 10px;
    background: #f5f6f8;
    color: #1b2430;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.senarai-kursus-container--kosong .kursus-kosong__btn:hover { background: #fdeaea; color: #cf2e2e; }
.senarai-kursus-container--kosong .kursus-kosong__btn--utama { background: #cf2e2e; color: #fff; }
.senarai-kursus-container--kosong .kursus-kosong__btn--utama:hover { background: #a51e1e; color: #fff; }
.senarai-kursus-container--kosong .kursus-kosong__btn:focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; }
.senarai-kursus-container--kosong .kursus-kosong__btn svg { width: 16px; height: 16px; }
.senarai-kursus-container--kosong .kursus-kosong__admin {
    margin-top: 16px;
    padding: 8px 12px;
    border: 1px dashed #d5d8de;
    border-radius: 8px;
    color: #6b7480;
    font-size: .78rem;
}
@media (max-width: 700px) {
    .senarai-kursus-container--kosong .kursus-kosong {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        padding: 34px 22px;
        text-align: center;
    }
    .senarai-kursus-container--kosong .kursus-kosong__ilu { width: 140px; height: 140px; }
    .senarai-kursus-container--kosong .kursus-kosong__tajuk { font-size: 1.25rem; }
    .senarai-kursus-container--kosong .kursus-kosong__tajuk::after { margin-inline: auto; }
    .senarai-kursus-container--kosong .kursus-kosong__aksi { justify-content: center; }
    .senarai-kursus-container--kosong .kursus-kosong__btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .senarai-kursus-container--kosong .kursus-kosong__lencana::before { animation: none; }
}