input, button, select, textarea {
    background-color: var(--warna-lazim);
    padding: var(--saiz-separuh) var(--saiz-penuh);
    width: 100%;
}
input::-webkit-input-placeholder,
input::placeholder {
    color: hsla( from var(--warna-lalai-gelap) h s l / 0.6 );
}
input:focus, button:focus {
    box-shadow: 0 0 4px 2px hsla(from var(--warna-lazim-cerah) h s l / 0.8);
    outline: 1px solid var(--warna-lazim-cerah);
}
input:focus:active, button:focus:active {
    box-shadow: none;
    outline: none;
}
input[aria-invalid="true"], .bidang[aria-invalid="true"] {
    border: 1px solid var(--warna-ralat);
    background-color: var(--warna-ralat-cerah);
}
button, .butang {
    border: 0;
    background-color: var(--warna-lalai);
    width: auto;
}
button:hover{
    background-color: var(--warna-lalai-cerah);
}
button:active{
    background-color: var(--warna-lalai-gelap);
}
button[disabled], button[disabled]:active, button[disabled]:hover {
    background-color: var(--warna-nyahdaya);
    color: var(--warna-nyahdaya-cerah);
}

button.perdana {
    background-color: var(--warna-perdana);
}
button.perdana:hover {
    background-color: var(--warna-perdana-cerah);
}
button.perdana:active {
    background-color: var(--warna-perdana-gelap);
}
button.sekunder {
    background-color: var(--warna-sekunder);
}
button.sekunder:hover {
    background-color: var(--warna-sekunder-cerah);
}
button.sekunder:active {
    background-color: var(--warna-sekunder-gelap);
}
button.alternatif {
    background-color: var(--warna-alternatif);
}
button.alternatif:hover {
    background-color: var(--warna-alternatif-cerah);
}
button.alternatif:active {
    background-color: var(--warna-alternatif-gelap);
}

/* bahagian kelas */
.bidang {
    display: flex;
}
.bidang[aria-selected="true"],
.bidang.kolum[aria-selected="true"] input,
.bidang.kolum[aria-selected="true"] select,
.bidang.kolum[aria-selected="true"] textarea {
    box-shadow: 0 0 4px 2px hsla(from var(--warna-lazim-cerah) h s l / 0.8);
    outline: 1px solid var(--warna-lazim-cerah);
}
.bidang.terbalik {
    flex-direction: row-reverse;
}
.bidang .icon {
    flex-shrink: 0;
}
.bidang.nombor input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.bidang.nombor input[type="number"]::-webkit-outer-spin-button,
.bidang.nombor input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bidang.kolum[aria-selected="true"],
.bidang.nombor[aria-selected="true"] [type="number"],
.bidang.nombor [data-kenaikan]{
    box-shadow: none;
    outline: none;
}
.bidang.nombor [data-kenaikan] {
    padding: var(--saiz-separuh);
    border: 4px solid var(--warna-lazim);
}
.bidang.nombor [data-kenaikan]::before {
    content: '';
    display: block;
    width: var(--saiz-penuh);
    height: var(--saiz-penuh);
    background-color: var(--warna-cerah);
}
.bidang.nombor [data-kenaikan="true"]::before {
    clip-path: polygon(0% 40%, 0% 60%, 40% 60%, 40% 100%, 60% 100%, 60% 60%, 100% 60%, 100% 40%, 60% 40%, 60% 0%, 40% 0%, 40% 40%);
}
.bidang.nombor [data-kenaikan="false"]::before {
    clip-path: polygon(0% 40%, 0% 60%, 100% 60%, 100% 40%);
}
.bidang.katalaluan,
.bidang.ikon {
    background-color: var(--warna-lazim);
}
.bidang.katalaluan button {
    background-color: var(--warna-lazim);
    padding: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: end;
    margin-right: var(--saiz-penuh);
    width: calc( var(--saiz-penuh) * 2 );
    height: auto;
}
.bidang.katalaluan button:focus {
    box-shadow: none;
    outline: none;
}
.bidang.katalaluan button .icon {
    cursor: pointer;
}
.bidang .icon *{
    fill: var(--warna-lalai);
}
.bidang.ikon.kolum {
    flex-direction: column;
    gap: var(--saiz-penuh);
    align-items: center;
    background-color: transparent;
}
.bidang.ikon.kolum .icon {
    background-color: transparent;
    width: auto;
    margin: 0;
}
.bidang.ikon > :focus{
    box-shadow: none;
    outline: none;
}
.bidang.ikon .icon {
    background-color: var(--warna-lazim);
    width: calc( var(--saiz-penuh) * 2 );
    height: auto;
    margin-left: var(--saiz-penuh);
}
.bidang.ikon .kanan + .icon {
    margin-left: 0;
    margin-right: var(--saiz-penuh);
}
.bidang.telefon {
    flex-wrap: wrap;
}

.ralat {
    position: absolute;
    margin-top: var(--saiz-suku);
    background-color: var(--warna-ralat);
    border: 1px solid var(--warna-ralat-gelap);
    color: var(--warna-ralat-lebih-cerah);
    padding: var(--saiz-separuh);
}
.ralat::before {
    content: '';
    display: inline-block;
    width: var(--saiz-penuh);
    height: var(--saiz-penuh);
    position: absolute;
    top: calc( var(--saiz-penuh) * -1);
    left: calc( var(--saiz-ganda) );
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: var(--warna-ralat);
    border: 1px solid var(--warna-ralat-cerah);
    border-bottom: 0;
}
.bidang.nombor .ralat{
   margin-top: calc( var(--ralat-pos-atas) + var(--saiz-suku) );
}