/* ==========================================================================
   sg_senarai.css — STANDARD HALAMAN SENARAI (2026-10-10). Bergantung pada token kedai.css.
   Bar alat ringkas di atas grid, blok info dalam sidebar, popup Tapis, kad diringkaskan.
   ========================================================================== */
/* ---- bar alat: H1 pendek + bilangan | Susun + Tapis ---- */
.sg-alat { flex-wrap: wrap; row-gap: 8px; margin-top: 4px; }
.sg-alat-kiri { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.sg-alat h1 { margin: 0; font-size: calc(19px * var(--fs-scale, 1)); line-height: 1.25; font-weight: 800; letter-spacing: -.2px; color: var(--text); }
.sg-alat .kd-susun-sel { display: inline-flex; }
.sg-btn-tapis { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card); color: var(--text); font: 700 calc(13.5px * var(--fs-scale, 1)) inherit; font-family: inherit; cursor: pointer; }
.sg-btn-tapis svg { width: 18px; height: 18px; fill: currentColor; }
.sg-btn-tapis:hover { border-color: var(--primary); color: var(--primary-text); }
.sg-btn-tapis[hidden] { display: none; }
.sg-btn-tapis .kd-bil-tapis { margin-left: 2px; }
@media (max-width: 560px) {
    .sg-alat h1 { font-size: calc(17px * var(--fs-scale, 1)); }
    .sg-alat .kd-susun-sel > span { display: none; }
}

/* ---- blok info sidebar (ganti hero / ayat pengenalan) ---- */
.sg-sisi-info { margin: 14px 6px 4px; padding: 14px; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--border);
    font-size: .84em; line-height: 1.55; color: var(--text-muted); }
.sg-sisi-info p { margin: 0 0 8px; }
.sg-sisi-info b { color: var(--text); }
.sg-sisi-jamin { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.sg-sisi-jamin li { display: flex; gap: 8px; align-items: flex-start; }
.sg-sisi-jamin svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; fill: var(--primary); }
.sg-sisi-promo { display: block; margin: 12px 6px 4px; padding: 14px; border-radius: var(--radius-md); text-decoration: none; color: #fff;
    background: linear-gradient(140deg, var(--primary), #065f46); font-size: .84em; line-height: 1.5; }
.sg-sisi-promo b { display: block; font-size: 1.12em; margin: 4px 0 2px; }
.sg-sisi-promo .sg-lencana { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #fbbf24; color: #422006; font-weight: 800; font-size: .78em; letter-spacing: .3px; }
.sg-sisi-promo .sg-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; color: #fde68a; }
.sg-sisi-promo .sg-cta svg { width: 16px; height: 16px; fill: currentColor; }
.sg-sisi-promo:hover { filter: brightness(1.06); }

/* ---- popup Tapis (dialog tengah di desktop, bottom sheet di telefon) ---- */
.sg-tapis-latar { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sg-tapis-latar[hidden] { display: none; }
html.sg-tapis-buka { overflow: hidden; }
.sg-tapis { width: min(460px, 100%); max-height: min(80vh, 640px); display: flex; flex-direction: column; background: var(--card); color: var(--text);
    border-radius: var(--radius-lg, 18px); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); overflow: hidden; }
.sg-tapis-kepala { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sg-tapis-kepala h2 { margin: 0; font-size: 1.05rem; }
.sg-tapis-tutup { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg); cursor: pointer; color: var(--text); }
.sg-tapis-tutup svg { width: 20px; height: 20px; fill: currentColor; }
.sg-tapis-badan { overflow-y: auto; padding: 8px 16px 12px; }
.sg-tapis-badan fieldset { border: 0; margin: 0; padding: 10px 0; }
.sg-tapis-badan fieldset + fieldset { border-top: 1px solid var(--border); }
.sg-tapis-badan legend { padding: 0 0 8px; font-weight: 800; font-size: .82rem; letter-spacing: .6px; text-transform: uppercase; color: var(--text-light); }
.sg-pil-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-pil input { position: absolute; opacity: 0; pointer-events: none; }
.sg-pil span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); font-weight: 600; font-size: .9rem; cursor: pointer; background: var(--card); }
.sg-pil input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.sg-pil input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.sg-tapis-kaki { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.sg-tapis-kaki > * { flex: 1; justify-content: center; }
@media (max-width: 640px) {
    .sg-tapis-latar { align-items: flex-end; padding: 0; }
    .sg-tapis { width: 100%; max-height: 85vh; border-radius: 20px 20px 0 0; }
}
.sg-kosong[hidden] { display: none; }

/* ---- kad diringkaskan: teks penuh kekal dalam HTML (SEO), paparan 2 baris ---- */
.sg-ringkas .kd-kad-sk, .sg-ringkas .gm-game-isi p, .sg-ringkas .ni-kat-isi p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-ringkas .kd-kad-j + .kd-kad-j { display: none; }

/* =====================================================================================================
   WARNA × HICK'S LAW — KATALOG (2026-10-10, pemilik: "terapkan warna seperti Nota Interaktif ke Games,
   Kedai, Inovasi & halaman lain"). Warna = MAKNA sahaja: satu warna identiti setiap KATEGORI/SUBJEK
   (label, jalur bawah gambar, tindakan & bayang hover). Satu tindakan berwarna setiap kad. Palet subjek
   SAMA dengan Nota Interaktif (ni.css) & label Games — kategori sama, warna sama di seluruh laman.
   ===================================================================================================== */
.kd-kad,.gm-game{--w:var(--primary,#059669);--w-dk:var(--primary-dark,#047857);--w-bg:var(--primary-bg,#ECFDF5);--w-t:var(--primary-text,#065F46)}
[data-t-subjek="Sejarah"],.gm-game[data-t-subjek="Sejarah"],.kd-card:has(.gm-subjek[data-subjek="sejarah"]),.g-semua-kad:has(.gm-subjek[data-subjek="sejarah"]){--w:#B45309;--w-dk:#7C2D12;--w-bg:#FFEDD5;--w-t:#9A3412;}
[data-t-subjek="Matematik"],.gm-game[data-t-subjek="Matematik"],.kd-card:has(.gm-subjek[data-subjek="matematik"]),.g-semua-kad:has(.gm-subjek[data-subjek="matematik"]){--w:#1D4ED8;--w-dk:#1E3A8A;--w-bg:#DBEAFE;--w-t:#1E40AF;}
[data-t-subjek="Matematik Tambahan"],.gm-game[data-t-subjek="Matematik Tambahan"],.kd-card:has(.gm-subjek[data-subjek="matematik-tambahan"]),.g-semua-kad:has(.gm-subjek[data-subjek="matematik-tambahan"]){--w:#6D28D9;--w-dk:#3B0764;--w-bg:#EDE9FE;--w-t:#5B21B6;}
[data-t-subjek="Sains"],.gm-game[data-t-subjek="Sains"],.kd-card:has(.gm-subjek[data-subjek="sains"]),.g-semua-kad:has(.gm-subjek[data-subjek="sains"]){--w:#4D7C0F;--w-dk:#365314;--w-bg:#ECFCCB;--w-t:#3F6212;}
[data-t-subjek="Fizik"],.gm-game[data-t-subjek="Fizik"],.kd-card:has(.gm-subjek[data-subjek="fizik"]),.g-semua-kad:has(.gm-subjek[data-subjek="fizik"]){--w:#0E7490;--w-dk:#164E63;--w-bg:#CFFAFE;--w-t:#155E75;}
[data-t-subjek="Kimia"],.gm-game[data-t-subjek="Kimia"],.kd-card:has(.gm-subjek[data-subjek="kimia"]),.g-semua-kad:has(.gm-subjek[data-subjek="kimia"]){--w:#BE185D;--w-dk:#831843;--w-bg:#FCE7F3;--w-t:#9D174D;}
[data-t-subjek="Biologi"],.gm-game[data-t-subjek="Biologi"],.kd-card:has(.gm-subjek[data-subjek="biologi"]),.g-semua-kad:has(.gm-subjek[data-subjek="biologi"]){--w:#15803D;--w-dk:#14532D;--w-bg:#DCFCE7;--w-t:#166534;}
[data-t-subjek="Pendidikan Islam"],.gm-game[data-t-subjek="Pendidikan Islam"],.kd-card:has(.gm-subjek[data-subjek="pendidikan-islam"]),.g-semua-kad:has(.gm-subjek[data-subjek="pendidikan-islam"]){--w:#0F766E;--w-dk:#134E4A;--w-bg:#CCFBF1;--w-t:#115E59;}
[data-t-subjek="Al-Quran"],.gm-game[data-t-subjek="Al-Quran"],.kd-card:has(.gm-subjek[data-subjek="al-quran"]),.g-semua-kad:has(.gm-subjek[data-subjek="al-quran"]){--w:#7C3AED;--w-dk:#4C1D95;--w-bg:#EDE9FE;--w-t:#5B21B6;}
[data-t-subjek="Tasawwur Islam"],.gm-game[data-t-subjek="Tasawwur Islam"],.kd-card:has(.gm-subjek[data-subjek="tasawwur-islam"]),.g-semua-kad:has(.gm-subjek[data-subjek="tasawwur-islam"]){--w:#0D9488;--w-dk:#134E4A;--w-bg:#CCFBF1;--w-t:#115E59;}
[data-t-subjek="Bahasa Melayu"],.gm-game[data-t-subjek="Bahasa Melayu"],.kd-card:has(.gm-subjek[data-subjek="bahasa-melayu"]),.g-semua-kad:has(.gm-subjek[data-subjek="bahasa-melayu"]){--w:#DB2777;--w-dk:#831843;--w-bg:#FCE7F3;--w-t:#9D174D;}
[data-t-subjek="Bahasa Inggeris"],.gm-game[data-t-subjek="Bahasa Inggeris"],.kd-card:has(.gm-subjek[data-subjek="bahasa-inggeris"]),.g-semua-kad:has(.gm-subjek[data-subjek="bahasa-inggeris"]){--w:#CA8A04;--w-dk:#713F12;--w-bg:#FEF9C3;--w-t:#854D0E;}
[data-t-subjek="Bahasa Arab"],.gm-game[data-t-subjek="Bahasa Arab"],.kd-card:has(.gm-subjek[data-subjek="bahasa-arab"]),.g-semua-kad:has(.gm-subjek[data-subjek="bahasa-arab"]){--w:#059669;--w-dk:#064E3B;--w-bg:#D1FAE5;--w-t:#065F46;}
[data-t-subjek="Geografi"],.gm-game[data-t-subjek="Geografi"],.kd-card:has(.gm-subjek[data-subjek="geografi"]),.g-semua-kad:has(.gm-subjek[data-subjek="geografi"]){--w:#0369A1;--w-dk:#0C4A6E;--w-bg:#E0F2FE;--w-t:#075985;}
.kd-kad:has(.kd-lencana.tools){--w:#059669;--w-dk:#064E3B;--w-bg:#D1FAE5;--w-t:#065F46}
.kd-kad:has(.kd-lencana.servis){--w:#EA580C;--w-dk:#7C2D12;--w-bg:#FFEDD5;--w-t:#9A3412}
.kd-kad:has(.kd-lencana:not(.tools):not(.servis):not(.iv-hijau)){--w:#2563EB;--w-dk:#1E3A8A;--w-bg:#DBEAFE;--w-t:#1E40AF}
.kd-kad,.gm-game{transition:transform .15s,box-shadow .15s,border-color .15s}
.kd-kad:hover,.gm-game:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--w) 22%,transparent);border-color:color-mix(in srgb,var(--w) 40%,var(--border,#E5E7EB))}
.kd-kad .kd-kad-img{border-bottom:4px solid var(--w)}
.kd-kad .kd-lencana{background:var(--w-bg) !important;color:var(--w-t) !important}
.kd-kad .kd-kad-h{color:var(--w-t)}
.gm-game .gm-lagi{color:var(--w-t) !important}
.gm-game .gm-btn-main{background:var(--w) !important}
.gm-game .gm-btn-main:hover{background:var(--w-dk) !important}
.gm-game{box-shadow:inset 0 -3px 0 var(--w)}
@media (prefers-reduced-motion:reduce){.kd-kad,.gm-game{transition:none}.kd-kad:hover,.gm-game:hover{transform:none}}
:root[data-theme="dark"] .kd-kad .kd-lencana{background:color-mix(in srgb,var(--w) 30%,transparent) !important;color:#fff !important}
:root[data-theme="dark"] .kd-kad .kd-kad-h,:root[data-theme="dark"] .gm-game .gm-lagi{color:color-mix(in srgb,var(--w) 55%,#fff) !important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kd-kad .kd-lencana{background:color-mix(in srgb,var(--w) 30%,transparent) !important;color:#fff !important}:root:not([data-theme="light"]) .kd-kad .kd-kad-h,:root:not([data-theme="light"]) .gm-game .gm-lagi{color:color-mix(in srgb,var(--w) 55%,#fff) !important}}