/* Landing Tabel Periodik: tabel periodik HTML, legenda, tabel kecil */
:root { --k-alkali: #f87171; --k-alkali-tanah: #fb923c; --k-transisi: #facc15; --k-pasca: #a3e635; --k-metaloid: #2dd4bf; --k-nonlogam: #38bdf8; --k-halogen: #818cf8; --k-gas-mulia: #c084fc; --k-lantanida: #f472b6; --k-aktinida: #d4a373; }
.k-alkali { --k: var(--k-alkali); } .k-alkali-tanah { --k: var(--k-alkali-tanah); } .k-transisi { --k: var(--k-transisi); } .k-pasca { --k: var(--k-pasca); } .k-metaloid { --k: var(--k-metaloid); }
.k-nonlogam { --k: var(--k-nonlogam); } .k-halogen { --k: var(--k-halogen); } .k-gas-mulia { --k: var(--k-gas-mulia); } .k-lantanida, .k-lantanida-o { --k: var(--k-lantanida); } .k-aktinida, .k-aktinida-o { --k: var(--k-aktinida); }
.pt-legend { list-style: none; margin: 14px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.pt-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pt-legend i { width: 18px; height: 18px; border-radius: 5px; background: var(--k); border: 1px solid rgba(15,23,42,.25); }
.pt-legend span { color: var(--muted); font-weight: 600; }
.pt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 10px; -webkit-overflow-scrolling: touch; }
.pt-wrap:focus-visible { outline: 3px solid var(--amber); }
.pt { border-collapse: separate; border-spacing: 2px; min-width: 1000px; width: 100%; table-layout: fixed; font-size: .75rem; }
.pt caption { text-align: left; font-weight: 800; color: var(--ink); padding: 2px 4px 10px; caption-side: top; font-size: .95rem; position: sticky; left: 0; max-width: calc(100vw - 80px); }
.pt th { font-weight: 800; color: var(--muted); text-align: center; padding: 2px 0; font-size: .78rem; }
.pt thead th small { display: block; font-size: .62rem; font-weight: 700; }
.pt thead th.pt-corner, .pt tbody th { width: 34px; }
.pt abbr { text-decoration: none; }
.pt td { padding: 2px 1px 3px; text-align: center; border-radius: 5px; height: 62px; vertical-align: middle; overflow: hidden; line-height: 1.1; color: #0f172a; background: var(--k); }
.pt td.pt-e { background: none; }
.pt td.pt-ph { background: none; border: 2px dashed var(--k); font-weight: 800; font-size: .6rem; color: var(--muted); }
.pt-gap td { height: 10px; background: none; padding: 0; }
.pt .pn { display: block; text-align: left; padding-left: 3px; font-size: .6rem; font-weight: 700; }
.pt b { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.05; }
.pt .pnm { display: block; font-size: .56rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.pt .pnm.ln { font-size: .5rem; letter-spacing: -.03em; }
.pt .pm { display: block; font-size: .55rem; font-weight: 600; opacity: .85; }
.pt-note { margin: 10px 0 0; font-size: .9rem; color: var(--muted); max-width: 820px; }
h3.sub { margin: 26px 0 8px; font-size: 1.25rem; }
.tbl small { color: var(--muted); font-weight: 600; }