/* (ah) 11 Nov 2026 — TIGA TIANG: Systems · Training & Knowledge Transfer · IT Advisory (page Services, Training, For agencies).
   Dijana tools/tiang.py daripada data/tiang.json. Token portal sahaja (styles.css :root). */
.tg-tiang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.tg-kad { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 24px; border: 1px solid var(--garis); border-radius: 20px; background: var(--kertas);
  scroll-margin-top: calc(var(--kepala-t) + var(--p2-hud-t, 56px) + 16px); }
.tg-kad > :not(.tg-visual) { padding-inline: 8px; }
.tg-visual { margin: 0; display: grid; gap: 8px; }
.tg-visual-bingkai { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px;
  background: radial-gradient(120% 90% at 30% 10%, #FFFFFF 0%, var(--kabus) 55%, #E3E9F3 100%); }
.tg-visual img { width: 100%; height: 100%; object-fit: contain; }
.tg-visual-k8 img { object-fit: cover; }
.tg-kap { font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kelabu); }
.tg-no { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-top: 6px; }
.tg-no .no { margin-right: 6px; }
.tg-posisi { font-size: 21px; font-weight: 560; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.tg-bukti { display: grid; }
.tg-bukti li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid var(--garis); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.tg-bukti li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 2px; background: var(--navy); }
.tg-nota { padding-left: 12px !important; margin-left: 8px; border-left: 2px solid var(--navy); color: var(--kelabu); font-size: 14.5px; line-height: 1.5; }
.tg-cta { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; } /* butang utama di bawah = sebaris merentas 3 kad */
.tg-cta .butang { min-height: 44px; }
.tg-cta .link-teks { min-height: 44px; display: inline-flex; align-items: center; }

/* aliran klien: masalah → cara IT → bina, host, jalankan */
.tg-aliran-bungkus { margin-top: 40px; padding: 24px 28px; border-radius: 20px; background: var(--malam); color: var(--ais); }
.tg-aliran-label { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ais-redup); }
.tg-aliran { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; counter-reset: none; }
.tg-aliran li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.tg-aliran li + li::before { content: "→"; position: absolute; left: -14px; top: 4px; transform: translateX(-50%); color: var(--ais-redup); }
.tg-aliran-no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ais-garis); border-radius: 50%; font: 500 13px/1 var(--mono); color: #FFFFFF; }
.tg-aliran-teks { display: grid; gap: 4px; }
.tg-aliran-teks b { font-weight: 560; font-size: 17px; color: #FFFFFF; }
.tg-aliran-teks span { color: var(--ais-redup); font-size: 15px; line-height: 1.5; }

/* page Training: program sebenar */
.tg-program { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.tg-program-kad { display: grid; align-content: start; gap: 8px; padding: 24px; border: 1px solid var(--garis); border-radius: 18px; background: var(--kertas); }
.tg-program-atas { display: flex; flex-wrap: wrap; gap: 10px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kelabu); }
.tg-program-tahun { color: var(--navy); }
.tg-program-agensi { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.tg-program-tajuk { font-size: 20px; font-weight: 560; letter-spacing: -0.012em; line-height: 1.3; }
.tg-program-butir { justify-self: start; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--kabus); font: 500 12px/1.4 var(--mono); color: var(--navy-dalam); }
.tg-angka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.tg-angka > div { padding: 18px 16px 18px 0; }
.tg-angka > div + div { padding-left: 16px; border-left: 1px solid var(--garis); }
.tg-angka dt { font-size: clamp(28px, 3.2vw, 40px); font-weight: 560; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.tg-angka dd { margin-top: 4px; color: var(--kelabu); font-size: 14.5px; line-height: 1.45; }
.tg-jurulatih { display: flex; gap: 10px; align-items: center; margin-top: 20px; font-weight: 560; color: var(--ink); }
.tg-jurulatih-ikon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #FFFFFF; font-size: 13px; flex: none; }
.tg-hero-visual .tg-visual-bingkai { background: radial-gradient(110% 90% at 40% 20%, rgb(255 255 255 / .10), rgb(255 255 255 / .02) 60%, transparent); }
.tg-hero-visual .tg-kap { color: var(--ais-redup); }

/* page For agencies: IT advisory for government */
.tg-agensi-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; margin-top: 48px; align-items: start; }
.tg-kerja { display: grid; gap: 0; }
.tg-kerja li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px; padding: 22px 0; border-top: 1px solid var(--garis); }
.tg-kerja-no .no { font: 500 12px/1.9 var(--mono); color: var(--navy); }
.tg-kerja-tajuk { font-size: 20px; font-weight: 560; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); }
.tg-kerja li p { margin-top: 8px; color: var(--kelabu); font-size: 16px; line-height: 1.55; }
.tg-agensi-kanan { position: sticky; top: calc(var(--kepala-t) + var(--p2-hud-t, 56px) + 24px); }
.tg-agensi-bawah { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; align-items: stretch; }
.tg-tot { display: grid; align-content: start; gap: 12px; padding: 24px; border: 1px solid var(--garis); border-radius: 18px; background: var(--kertas); }
.tg-nilai { margin: 0; display: grid; align-content: start; gap: 10px; padding: 24px 28px; border-radius: 18px; background: var(--malam); color: var(--ais); }
.tg-nilai-label { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); }
.tg-nilai-skor { font-size: clamp(30px, 3.4vw, 44px); font-weight: 560; letter-spacing: -0.02em; line-height: 1.1; color: #FFFFFF; }
.tg-nilai-petik p { font-size: 18px; line-height: 1.5; color: #FFFFFF; }
.tg-nilai figcaption { display: grid; gap: 6px; color: var(--ais-redup); font-size: 14.5px; line-height: 1.5; }

@media (max-width: 1180px) {
  .tg-tiang { grid-template-columns: minmax(0, 1fr); }
  .tg-kad { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 24px; row-gap: 12px; }
  .tg-kad > .tg-visual { grid-row: 1 / span 6; align-self: start; }
}
@media (max-width: 960px) {
  .tg-aliran { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tg-aliran li + li::before { content: "↓"; left: 15px; top: -16px; transform: translateX(-50%); font-size: 12px; }
  .tg-agensi-grid, .tg-agensi-bawah { grid-template-columns: minmax(0, 1fr); }
  .tg-agensi-kanan { position: static; order: -1; max-width: 560px; }
  .tg-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-angka > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .tg-angka > div:nth-child(n+3) { border-top: 1px solid var(--garis); }
}
@media (max-width: 640px) {
  .tg-kad { display: flex; }
  .tg-program { grid-template-columns: minmax(0, 1fr); }
  .tg-aliran-bungkus { padding: 20px; }
  .tg-posisi { font-size: 19px; }
}
.tg-cta > * { margin: 0; }
@media (max-width: 960px) { .p2-hero .tg-hero-visual { order: 2; width: 100%; max-width: 560px; justify-self: center; margin: 8px 0 12px; } } /* telefon: tajuk dulu, slaid selepas, butang di bawah (corak .p2-shot) */
.tg-hero-mof { margin-top: 10px; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--ais-redup); }
.tg-contoh { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--kabus); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.tg-nilai { scroll-margin-top: calc(var(--kepala-t) + var(--p2-hud-t, 56px) + 16px); } /* (ah2) sasaran jalur homepage #penilaian */