.accessibility{
    position:fixed;
    bottom:30px;
    left:30px;
    z-index:9999;
}


.access-btn{

    width:55px;
    height:55px;

    border-radius:50%;

    border:none;

    background:#43D3A5;

    color:#073326;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:
    0 8px 20px rgba(67,211,165,.35);

    transition:.2s;

}


.access-btn svg{

    width:28px;
    height:28px;

}


.access-btn:hover{

    transform:translateY(-3px);

}


/* panel */
.access-panel{

    display:none;

    position:absolute;

    bottom:75px;
    left:0;

    width:300px;

    background:#071f17;

    color:#fff;

    padding:22px;

    border-radius:20px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.35);

}


.access-panel.show{

    display:block;

}


/* judul */

.access-panel h3{

    font-size:24px;

    margin:0 0 8px;

}


/* close */

.access-close{

    position:absolute;

    top:15px;

    right:18px;

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}


/* label */

.access-panel label{

    display:block;

    margin-bottom:15px;

    font-weight:600;

}


/* ukuran teks */

.font-size{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

}


.font-size button{

    padding:12px 5px;

    border:none;

    border-radius:12px;

    background:#102f24;

    color:white;

    font-size:16px;

    cursor:pointer;

}


.font-size button:hover{

    background:#43d3a5;

    color:#073326;

}

.font-small{
    font-size:90%;
}

.font-normal{
    font-size:100%;
}

.font-large{
    font-size:115%;
}

.font-xlarge{
    font-size:130%;
}


.high-contrast{

    background:#000 !important;
    color:#fff !important;

}


.high-contrast body,
.high-contrast section,
.high-contrast main{

    background:#000 !important;

    color:#fff !important;

}


.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast h4,
.high-contrast p,
.high-contrast span,
.high-contrast a{

    color:#fff !important;

}


.high-contrast .hero-overlay{

    background:rgba(0,0,0,.8);

}


.high-contrast .access-panel{

    background:#000;

    border:1px solid #fff;

}


.high-contrast .access-option,
.high-contrast .font-size button{

    background:#222;

    border:1px solid #fff;

}



/* pilihan */

.access-option{

    width:100%;

    margin-top:18px;

    padding:16px;

    border:none;

    border-radius:15px;

    background:#102f24;

    color:white;

    font-size:16px;

    text-align:left;

    cursor:pointer;

}



.access-option span{

    float:right;

}


/* aktif */

.access-btn.active{

    opacity:.7;

}



/* mobile */

@media(max-width:600px){

    .accessibility{

        left:20px;

        bottom:20px;

    }


    .access-panel{

        width:280px;

    }

}