:root {
    --primary-color: #e76b26;
    --primary-color-light: #ee8121;
    --secondary-color: #f5f5f5;

    --turkuaz: #14c6b5;
    --turkuaz-acik: #17e1cd;
    --turkuaz-koyu: #0c7570;

    --sari: #f4aa27;
    --sari-acik: #f0b143;
    --sari-koyu: #f0a21a;

    --turuncu: #e76b26;
    --turuncu-acik: #ee8121;
    --turuncu-koyu: #e45e27;
}

::selection {
    background: #14c6b5;
    color: #fff;
    /* Seçilen yazının rengi - isteğe bağlı */
}

/* Firefox için */
::-moz-selection {
    background: #14c6b5;
    color: #fff;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
    /* çok ince scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent;
    /* arka plan tamamen şeffaf */
}

::-webkit-scrollbar-thumb {
    background-color: #14c6b5;
    /* turkuaz */
    border-radius: 0;
    /* köşeler düz olsun */
    border: none;
    /* sağ/sol boşluk olmasın */
}

::-webkit-scrollbar-button {
    display: none;
    /* yukarı-aşağı okları gizle */
}

/* Firefox */
* {
    scrollbar-width: thin;
    /* ince */
    scrollbar-color: #14c6b5 transparent;
    /* turkuaz - arka plan yok */
}

.ui-checkbox-b>input {
    --primary-color: #14c6b5;
    --secondary-color: #fff;
    --primary-hover-color: #14c6b5;
    --checkbox-diameter: 18px;
    --checkbox-border-radius: 3px;
    --checkbox-border-color: #14c6b5;
    --checkbox-border-width: 2px;
    --checkbox-border-style: solid;
    --checkmark-size: 1.2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    aspect-ratio: 1;
    width: var(--checkbox-diameter);
    height: var(--checkbox-diameter);
    border-radius: var(--checkbox-border-radius);
    background: #fff;
    border: var(--checkbox-border-width) var(--checkbox-border-style) #14c6b5;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    cursor: pointer;
    position: relative
}

.ui-checkbox-b>input,
.ui-checkbox-b>input *,
.ui-checkbox-b>input ::after,
.ui-checkbox-b>input ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.ui-checkbox-b>input::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter)/ 1.7) #14c6b5;
    box-shadow: 0 0 0 calc(var(--checkbox-diameter)/ 1.7) #14c6b5;
    border-radius: inherit;
    opacity: 0;
    -webkit-transition: .5s cubic-bezier(.12, .4, .29, 1.46);
    -o-transition: .5s cubic-bezier(.12, .4, .29, 1.46);
    transition: .5s cubic-bezier(.12, .4, .29, 1.46)
}

.ui-checkbox-b>input::before {
    top: 40%;
    left: 50%;
    content: "";
    position: absolute;
    width: 5px;
    height: 8px;
    border-right: 2px solid var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
    -webkit-transition: .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
    -o-transition: .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
    transition: .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s
}

.ui-checkbox-b>input:hover {
    border-color: #14c6b5
}

.ui-checkbox-b>input:checked {
    background: #14c6b5;
    border-color: transparent
}

.ui-checkbox-b>input:checked::before {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -webkit-transition: .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
    -o-transition: .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
    transition: .2s cubic-bezier(.12, .4, .29, 1.46) .1s
}

.ui-checkbox-b>input:active:not(:checked)::after {
    -webkit-transition: none;
    -o-transition: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: none;
    opacity: 1
}

.wellopia-text-color {
    background: linear-gradient(60deg, #ec5b15, #dc6e26, #f4aa27, #89a174, #14c6b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.rareInput {
    -webkit-box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px;
    box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px;
    border-bottom: 3px solid transparent
}

@supports (-webkit-touch-callout:none) {
    .rareInput {
        border: 1px solid #d5d5d5 !important
    }
}

.rareInput::-webkit-input-placeholder {
    color: #6b7280
}

.rareInput:focus {
    border-bottom: 3px solid var(--primary-color);
    outline: 0
}