.sl_root * {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --sl-hue: 223;
    --sl-sat: 10%;
    --sl-hue2: 223;
    --sl-sat2: 90%;
    --sl-light2: 60%;
    --sl-primary: hsl(var(--sl-hue2),var(--sl-sat2),var(--sl-light2));
    --sl-trans-dur: 1s;
    --sl-trans-timing: ease-in-out;
    --sl-trans-timing2: cubic-bezier(0.42,-1.84,0.42,1.84);
    --sl-trans-timing3: cubic-bezier(0.42,0,0.42,1.84);
    font-size: 20px;
}

.sl_root {
    height: 100vh;
    font-size: 20px;
    transition:
        background-color var(--sl-trans-dur),
        color var(--sl-trans-dur);
}

.sl_root button {
    font: 1em/1.5 sans-serif;
}

body {
    height: 100vh;
}

.sl_root .sl_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

/* Light */
.sl_col {
    position: relative;
    overflow: hidden;
    display: flex;
    flex: 1;
    padding: 1.5em 0;
    min-height: 13em;

    background-image: linear-gradient(
        hsl(var(--sl-hue),var(--sl-sat),90%),
        hsl(var(--sl-hue),var(--sl-sat),75%)
    );
}

.sl_col::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    /* cahaya terang yang akan fade-in */
    background-image: linear-gradient(
        hsl(var(--sl-hue), var(--sl-sat), 90%),
        hsl(var(--sl-hue), var(--sl-sat), 75%)
    );

    opacity: 0; /* mulai gelap */
    transition: opacity 1.8s ease-in-out;
    pointer-events: none;
}

.sl_col.light-on::after {
    opacity: 1;
}

.sl_btn {
    background-color: transparent;
    background-image: linear-gradient(hsl(var(--sl-hue),var(--sl-sat),80%),hsl(var(--sl-hue),var(--sl-sat),85%));
    border-radius: 50%;
    box-shadow:
        0 0 0 0.125em hsla(var(--sl-hue2),var(--sl-sat2),50%,0),
        0 0 0.25em hsl(var(--sl-hue),var(--sl-sat),55%) inset,
        0 0.125em 0.125em hsl(var(--sl-hue),var(--sl-sat),90%);
    cursor: pointer;
    margin: auto;
    outline: transparent;
    position: relative;
    width: 10em;
    height: 10em;
    transition: box-shadow var(--sl-trans-dur) var(--sl-trans-timing);
    -webkit-tap-highlight-color: transparent;
}
.sl_btn:focus-visible {
    box-shadow:
        0 0 0 0.125em hsla(var(--sl-hue2),var(--sl-sat2),50%,1),
        0 0 0.25em hsl(var(--sl-hue),var(--sl-sat),55%) inset,
        0 0.125em 0.125em hsl(var(--sl-hue),var(--sl-sat),90%);
}
.sl_btn:before,
.sl_btn:after {
    border-radius: inherit;
    content: "";
    display: block;
    position: absolute;
}
.sl_btn:before {
    background-image: linear-gradient(hsl(var(--sl-hue),var(--sl-sat),90%),hsl(var(--sl-hue),var(--sl-sat),80%));
    box-shadow: 0 0.75em 0.75em 0.25em hsla(var(--sl-hue),0%,0%,0.3);
    top: 1.5em;
    left: 1.5em;
    width: 7em;
    height: 7em;
    transition:
        box-shadow var(--sl-trans-dur) var(--sl-trans-timing2),
        transform var(--sl-trans-dur) var(--sl-trans-timing2);
}
.sl_btn:after {
    background-color: hsl(var(--sl-hue),var(--sl-sat),75%);
    background-image: linear-gradient(hsla(var(--sl-hue),var(--sl-sat),90%,0),hsl(var(--sl-hue),var(--sl-sat),90%));
    box-shadow:
        0 0.0625em 0 hsl(var(--sl-hue),var(--sl-sat),90%) inset,
        0 -0.0625em 0 hsl(var(--sl-hue),var(--sl-sat),90%) inset,
        0 0 0 0 hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.1) inset;
    top: 3em;
    left: 3em;
    width: 4em;
    height: 4em;
    transition:
        background-color var(--sl-trans-dur) var(--sl-trans-timing),
        box-shadow var(--sl-trans-dur) var(--sl-trans-timing),
        transform var(--sl-trans-dur) var(--sl-trans-timing2);
}
.sl_btn__icon {
    display: block;
    position: absolute;
    top: calc(50% - 0.75em);
    left: calc(50% - 0.75em);
    width: 1.5em;
    height: 1.5em;
    transition: filter var(--sl-trans-dur) var(--sl-trans-timing);
    z-index: 1;
}
.sl_btn__icon g {
    stroke: hsl(var(--sl-hue),var(--sl-sat),70%);
    transition: stroke var(--sl-trans-dur) var(--sl-trans-timing);
}
.sl_btn__sr {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}
.sl_btn[aria-pressed="true"]:before,
.sl_btn[aria-pressed="true"]:after,
.sl_btn[aria-pressed="true"] .sl_btn__icon {
    transform: scale(0.98);
}
.sl_btn[aria-pressed="true"]:before {
    box-shadow: 0 0.375em 0.375em 0 hsla(var(--sl-hue),0%,0%,0.3);
    transition-timing-function: var(--sl-trans-timing3);
}
.sl_btn[aria-pressed="true"]:after {
    background-color: hsl(var(--sl-hue),var(--sl-sat),90%);
    box-shadow:
        0 0.0625em 0 hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.5) inset,
        0 -0.0625em 0 hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.5) inset,
        0 0 0.75em 0.25em hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.1) inset;
    transition-timing-function: var(--sl-trans-timing), var(--sl-trans-timing), var(--sl-trans-timing3);
}
.sl_btn[aria-pressed="true"] .sl_btn__icon {
    filter: drop-shadow(0 0 0.25em var(--sl-primary));
}
.sl_btn[aria-pressed="true"] .sl_btn__icon g {
    stroke: var(--sl-primary);
}

/* Dark */
.sl_col--dark {
    background-image: linear-gradient(
        hsl(var(--sl-hue), var(--sl-sat), 20%),
        hsl(var(--sl-hue), var(--sl-sat), 5%)
    );
}
.sl_col--dark .sl_btn {
    background-image: linear-gradient(hsl(var(--sl-hue),var(--sl-sat),10%),hsl(var(--sl-hue),var(--sl-sat),15%));
    box-shadow:
        0 0 0 0.125em hsla(var(--sl-hue2),var(--sl-sat2),50%,0),
        0 0 0.25em hsl(var(--sl-hue),var(--sl-sat),5%) inset,
        0 0.125em 0.125em hsl(var(--sl-hue),var(--sl-sat),25%);
}
.sl_col--dark .sl_btn:focus-visible {
    box-shadow:
        0 0 0 0.125em hsla(var(--sl-hue2),var(--sl-sat2),50%,1),
        0 0 0.25em hsl(var(--sl-hue),var(--sl-sat),5%) inset,
        0 0.125em 0.125em hsl(var(--sl-hue),var(--sl-sat),25%);
}
.sl_col--dark .sl_btn:before {
    background-image: linear-gradient(hsl(var(--sl-hue),var(--sl-sat),20%),hsl(var(--sl-hue),var(--sl-sat),10%));
    box-shadow: 0 0.75em 0.75em 0.25em hsla(var(--sl-hue),0%,0%,0.7);
}
.sl_col--dark .sl_btn:after {
    background-color: hsl(var(--sl-hue),var(--sl-sat),10%);
    background-image: linear-gradient(hsla(var(--sl-hue),var(--sl-sat),20%,0),hsl(var(--sl-hue),var(--sl-sat),20%));
    box-shadow:
        0 0.0625em 0 hsl(var(--sl-hue),var(--sl-sat),25%) inset,
        0 -0.0625em 0 hsl(var(--sl-hue),var(--sl-sat),25%) inset,
        0 0 0 0 hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.1) inset;
}
.sl_col--dark .sl_btn__icon g {
    stroke: hsl(var(--sl-hue),var(--sl-sat),5%);
}
.sl_col--dark .sl_btn[aria-pressed="true"]:before {
    box-shadow: 0 0.375em 0.375em 0 hsla(var(--sl-hue),0%,0%,0.7);
}
.sl_col--dark .sl_btn[aria-pressed="true"]:after {
    background-color: hsl(var(--sl-hue),var(--sl-sat),20%);
    box-shadow:
        0 0.0625em 0 hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.5) inset,
        0 -0.0625em 0 hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.5) inset,
        0 0 0.75em 0.25em hsla(var(--sl-hue2),var(--sl-sat2),var(--sl-light2),0.1) inset;
}

/* Beyond mobile */
@media (min-width: 768px) {
    main {
        flex-direction: row;
    }
}

.cinematic-bg {
    background-image: linear-gradient(
        hsl(var(--sl-hue), var(--sl-sat), 20%),
        hsl(var(--sl-hue), var(--sl-sat), 5%)
    );
    transition: background-image 1.8s ease, background-color 1.8s ease;
}

/* Background setelah lampu menyala */
.cinematic-bg.light-on {
    background-image: linear-gradient(
        hsl(var(--sl-hue), var(--sl-sat), 70%),
        hsl(var(--sl-hue), var(--sl-sat), 40%)
    );
}