/* override */
.header {
    position: relative;
}
.container {
    margin: 12px 0;
}
:root {
    --lineHeight: 1;
}
.wrapper {
    display: flex;
    flex-direction: column;
    position: relative;

    .garisanBelakang {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        gap: 12px;
        z-index: -10;
        .garis {
            height: 100%;
            flex: 1;
            border: solid var(--garis) 1px;
            background-image: 
                repeating-linear-gradient(315deg, var(--garis) 0, 
                var(--garis) 1px, transparent 0, transparent 50%);
            background-size: 10px 10px;
        }
    }
    
    .displayUtama {
        width: 100%;

        display: flex;
        flex-direction: column;
    }
}
.katakanIni {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--garis-tebal);
    z-index: 30;

    display: none;
    align-items: center;
    justify-content: center;

    .tutup {
        height: 100vh;
        width: 100%;
        position: absolute;
        z-index: -2;
    }
    textarea {
        outline: none;
        border: solid var(--garis-tebal) 1px;
        padding: 1rem;
        font-family: raleway;
        font-size: 1.5rem;
        aspect-ratio: 2/3;
    }
    textarea:focus {
        border: solid var(--garis-tebal) 1px;
    }
}
.tampilkan {
    width: 100%;
    position: relative;
    --ukuranFont: 8rem;
    --ukuranFontB4: calc(var(--ukuranFont)/4);
    --translation: .8rem;
    font-family: raleway;
    .show {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: relative;
        .belakang {
            position: absolute;

            width: 100%;
            .garis {
                width: 100%;
                height: calc(var(--lineHeight) * var(--ukuranFontB4));

                border: solid 1px var(--garis-tebal);
                transform: translateY(var(--translation));
            }
        }
        .h0 {
            line-height: var(--lineHeight);
            font-family: inherit;
            font-size: var(--ukuranFont);
            font-weight: bold;
            opacity: .8;
        }
    }
    .show2 {
        position: absolute;
        right: 0;
        top: 100%;

        width: calc(50% - 6px);

        transform: translateY(var(--translation));
        --ukuranFontB4Kecil: calc((var(--ukuranFont)/4) * var(--lineHeight));
        .kata {
            font-size: var(--ukuranFontB4);
            line-height: var(--lineHeight);
            position: absolute;
            top: var(--ukuranFontB4Kecil);
            opacity: .8;
        }
        .belakang2 {
            width: 100%;
            .garis {
                width: 100%;
                height: var(--ukuranFontB4Kecil);
                border: solid 1px var(--garis-tebal);
            }
        }
    }
}

.tombol {
    margin-top: 32px;
    width: calc(50% - 6px);
    display: grid;
    justify-content: start;
    gap: 6px 12px;
    grid-template-columns: auto 1fr;
    
    .download {
        padding: .5rem 1rem;
        background-color: var(--biru);
        color: var(--terang);
        width: calc(100% );
        margin-top: 2rem;
        grid-column: span 2;
    }
}
.pilihan {
    margin-top: 340px;
    width: 100%;
    .pilihMana {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
        font-family: poppins;
        .group {
            width: 100%;
            
            border: solid 1px var(--garis-tebal);
            padding: 12px 0;
            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        .group:hover {
            background-color: #fff;
        }
        .ini {
            background-color: var(--biru);
            color: var(--terang);
        }
        .ini:hover {
            background-color: var(--biru);
        }
    }
    .modelan {
        width: calc(50% - 6px);
        
        border: solid var(--garis-tebal) 1px;
        background-color: var(--terang);

        margin-top: 12px;
        height: 4rem;

        position: sticky;
        top: 0;

        display: flex;
        padding: 12px;
        gap: 12px;

        z-index: 3;
        
        .tool-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            
            .style-btn, .align-btn {
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 6px;
                height: 100%;
                aspect-ratio: 1;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: background-color 0.2s, border-color 0.2s;
            }
            .style-btn2 {
                background-color: #fff;
                border: 1px solid #ccc;
                padding: 0 16px;
                border-radius: 6px;
                height: 100%;
                width: max-content;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: background-color 0.2s, border-color 0.2s;
            }

            .style-btn:hover, .align-btn:hover {
                background-color: #f0f0f0;
            }
            
            .style-btn.active, .align-btn.active {
                background-color: var(--biru);
                color: var(--terang);
                border-color: var(--biru);
            }
        }
    }
    .genjreng {
        margin-top: 12px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        scroll-margin-top: 25vh; 
        .font-card {
            width: 100%;
            border: solid var(--garis-tebal) 1px;
            display: flex;
            flex-direction: column;
            opacity: 0.2;
            /* transition: opacity .1s ease-in; */
            h3 {
                width: 100%;
                background-color: var(--terang);
                border-bottom: solid var(--garis-tebal) 1px;
                /* padding: 1rem 0; */
            }
            p {
                font-size: 2rem;
                padding: 2rem 0;
            }
        }
        .showin {
            opacity: 1;
        }
    }
}
.text-bold {
    font-weight: 700 !important; /* !important untuk menimpa style inline jika ada */
}
.text-italic {
    font-style: italic !important;
}