html {
    scroll-behavior: smooth;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root {
    --terang: #fff;
    --terang2: #fafafa;
    --terang3: #f8f9fa;
    --gelap: #212529;
    --grey: #6c757d;
    --border: #dee2e6;
    --biru: #0d6efd;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* pertanyaan optimalisasi */
    /* apakah bila hitamnya pakai var dia akan merend / mengambil --gelap esetiap kali diapakai ? */
    --garis: color-mix(in oklab, #000 5%, transparent);
    --garis-tebal: color-mix(in oklab, #000 30%, transparent);
    --garis-poll: color-mix(in oklab, #000 100%, transparent);
}

.garisMiring {
    background-image: 
        repeating-linear-gradient(315deg, var(--garis) 0, 
        var(--garis) 1px, transparent 0, transparent 50%);
    background-size: 10px 10px;
}

body {
    background-color: var(--terang);
    color: var(--gelap);
}

.container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;

    margin-top: 82px;
}
.wrapper {
    max-width: 1440px;
    width: 100%;
    margin: 0 12px;
}

.header {
    width: 100%;
    min-height: 62px;

    display: flex;
    justify-content: center;

    position: fixed;
    top: 0;
    left: 0;

    box-shadow: inset 0 0 0 1px var(--garis);
    background-image: 
        repeating-linear-gradient(315deg, var(--garis) 0, 
        var(--garis) 1px, transparent 0, transparent 50%);
    background-size: 10px 10px;

    z-index: 10;
    .wrapper {
        background-color: var(--terang);

        border: solid 1px var(--garis);

        height: 70px;

        display: flex;
        align-items: center;
    }
}
.footer {
    min-height: 89vh;
    width: 100%;

    box-shadow: inset 0 0 0 1px var(--garis);
    background-image: 
        repeating-linear-gradient(315deg, var(--garis) 0, 
        var(--garis) 1px, transparent 0, transparent 50%);
    background-size: 10px 10px;
}