:root {
    --rorange: #e56330;
    --rbackwhite: #e4dfdf;
    --rgray: #988b84;
    --rdarkorange: #cb5324;
    --rlightorange: #ff753f;
    --hue: 223;
    --bg: hsl(var(--hue),90%,90%);
    --fg: hsl(var(--hue),90%,10%);
    --primary: hsl(var(--hue),90%,50%);
    --trans-dur: 0.3s;
}

body {
    background-color: var(--rbackwhite);
    font-family: 'Poppins', sans-serif !important;
}

#first-comp {
    /*min-height: 100vh;*/
}

#kira-comp {
    min-height: 100vh;
    display: none;
    background-color: var(--rbackwhite);
    padding: 5rem 1rem;
}

#sorgu-comp {
    min-height: 100vh;
    display: none;
    background-color: var(--rbackwhite);
    padding: 5rem 1rem;
}


.navbar {
    /*background: rgb(152,139,132);
    background: linear-gradient(90deg, rgba(152,139,132,1) 0%, rgba(189,181,173,1) 100%);*/
    background-color: var(--rorange);
    width: 70%;
    border-bottom-right-radius: 2rem;
    /*-webkit-box-shadow: 0px 0px 25px 10px rgba(26,26,26,0.15);
    -moz-box-shadow: 0px 0px 25px 10px rgba(26,26,26,0.15);
    box-shadow: 0px 0px 25px 10px rgba(26,26,26,0.15);*/
}

.socials {
    margin: 0 10px;
}

.social-media {
    background-color: white;
    border-radius: 50%;
    padding: 10px;
    height: 35px;
    width: 35px;
    margin: 0 5px;
}

    .social-media a {
        color: var(--rorange);
        font-size: 17px;
        text-align: center;
        transition: all .3s;
    }

        .social-media a:hover {
            color: var(--rlightorange);
        }

@media only screen and (max-width: 992px) {
    .socials {
        display: none !important;
    }
}

@media only screen and (max-width: 900px) {
    .navbar {
        width: 100%;
        border-bottom-right-radius: unset;
        justify-content: center;
    }
}

.slider-card {
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    padding: 0;
    -webkit-box-shadow: 0px 0px 25px 10px rgba(26,26,26,0.1);
    -moz-box-shadow: 0px 0px 25px 10px rgba(26,26,26,0.1);
    box-shadow: 0px 0px 25px 10px rgba(26,26,26,0.1);
    width: fit-content;
    margin: auto;
}

.slider-img {
    max-height: 450px;
    width: auto;
    border-radius: 1rem;
}

@media only screen and (max-width: 743px) {
    .slider-img {
        border-radius: unset !important;
    }

    .slider-card {
        border-radius: unset !important;
    }
}

.slideshow-container {
    max-width: 1000px;
    position: relative;
}

.slide {
    flex: 0 0 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .slide.active {
        display: block;
        opacity: 1;
    }

.slider-dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    margin-top: 20px;
    background-color: var(--rorange);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

    .slider-dot.active {
        background-color: white;
    }

.slide-text {
    display: none;
    min-height: 250px;
}

    .slide-text.active {
        display: block;
    }

.slider-row {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: 5rem !important;
    margin-bottom: 8rem !important;
}

.slider-text-content {
    padding: 0 70px;
}

.slider-header {
    color: black;
    font-size: x-large;
    font-weight: 500;
    cursor: default;
}

.slider-text {
    color: black;
    font-size: medium;
    margin-top: 2rem;
    cursor: default;
    text-align: justify;
    min-height: 250px;
}

.slider-button-div-left,
.slider-button-div-right {
    position: absolute;
    cursor: pointer;
}

.slider-button-div-right {
    right: 0;
}

.slider-button-left,
.slider-button-right {
    background-color: var(--rbackwhite);
    border: none;
    color: var(--rdarkorange);
    height: 70px;
    width: 25px;
    cursor: pointer;
}

.slider-button-left {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.slider-button-right {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.kirala-btn {
    color: white;
    background-color: black;
    border: none;
    border-radius: .5rem;
    padding: 10px 20px;
    transition: all .3s;
    border: 2px solid black;
    font-weight: 500;
    margin-right: 5px;
}

    .kirala-btn:hover {
        background-color: var(--rorange);
        border: 2px solid var(--rorange);
        color: white;
    }

/*.kirala-btn:focus {
        background-color: white;
        color: black;
        border: 2px solid white;
        outline: unset !important;
    }*/

.sorgula-btn {
    color: black;
    background-color: var(--rbackwhite);
    border-radius: .5rem;
    border: 2px solid black;
    padding: 10px 20px;
    transition: all .3s;
    font-weight: 500;
    margin-left: 5px;
}

    .sorgula-btn:hover {
        background-color: var(--rorange);
        color: white;
        border: 2px solid var(--rorange);
    }

.sozlesme-btn {
    background-color: var(--rbackwhite);
    color: black;
    border: none;
    border-radius: .5rem;
    padding: 10px 20px;
    text-decoration: none !important;
    width: auto;
}

.kira-uzat-bg {
    background-color: var(--rorange) !important;
    color: white !important;
}

.sozlesme-btn:hover {
    color: black;
}

.total-analysis {
    display: flex;
    margin: 2rem 0;
}

.analysis {
    display: flex;
    align-items: center;
    margin: 0 5px;
}

.analysis-circle {
    color: white;
    background-color: var(--rorange);
    border-radius: 50%;
    -webkit-box-shadow: 5px 0px 20px -8px rgba(0,0,0,0.77);
    -moz-box-shadow: 5px 0px 20px -8px rgba(0,0,0,0.77);
    box-shadow: 5px 0px 20px -8px rgba(0,0,0,0.77);
    z-index: 2;
    height: 55px;
    width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .analysis-circle span {
        color: white;
        font-size: larger;
        font-weight: 500;
    }

.analysis-badge {
    color: black;
    font-weight: 500;
    background: rgb(152,139,132);
    background: linear-gradient(90deg, rgba(152,139,132,1) 0%, rgba(189,181,173,1) 100%);
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    padding: 10px 15px;
    padding-left: 40px;
    margin-left: -30px;
    height: 43px;
}

.slider-col {
    padding: 0 2rem;
}

@media only screen and (max-width: 1388px) {
    .analysis {
        margin-left: 1rem !important;
        margin-bottom: 1rem;
    }

    .slider-row {
        margin-top: 3rem !important;
    }
}

@media only screen and (max-width: 1498px) {
    .slider-text-content {
        padding-right: 30px;
    }

    .slider-card {
        min-height: unset !important;
    }
}

@media (max-width: 1461px) {
    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .slider-col {
        order: 1;
    }

    .text-col {
        order: 2;
    }

    .slider-text-content {
        margin: 3rem 0;
        padding: 0 30px;
    }

    .slider-buttons,
    .total-analysis {
        justify-content: center;
        display: flex;
    }

    .slider-row {
        padding: 0;
    }

    .slider-header,
    .slider-text {
        text-align: center;
    }
}

@media only screen and (max-width:500px) {
    .slider-text {
        min-height: 480px !important;
    }
}

@media only screen and (max-width:700px) {
    .slider-text {
        min-height: 380px;
    }
}

@media (max-width: 658px) {
    .slider-card {
        max-height: 400px;
        /*padding: 20px;*/
    }
}

@media (max-width: 599px) {
    .analysis {
        margin-left: 0 !important;
    }

    .slider-button-right,
    .slider-button-left {
        height: 60px;
        width: 20px;
    }
}

@media (max-width: 384px) {
    .kirala-btn,
    .kirala-sorgula {
        padding: 5px 10px;
    }
}

@media (max-width: 590px) {
    .footer-text {
        padding: 5px;
    }

        .footer-text p {
            font-size: x-small !important;
        }
}

.form-card-header {
    text-align: center;
    color: black;
    margin-bottom: 1.5rem;
}

.form-card {
    max-width: 1000px;
    margin: auto;
    margin-top: 2rem;
    border: 1px solid #ccc;
    border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
    padding: 2rem 4rem;
}

.btn-ileri,
.btn-geri,
.btn-sorgu,
.btn-dogrula {
    border: none;
    border-radius: .5rem;
    padding: 7px 20px;
    color: white;
    background-color: var(--rorange);
    margin: 0 5px;
    transition: all .3s;
}

    .btn-ileri:hover,
    .btn-geri:hover,
    .btn-sorgu:hover,
    .btn-dogrula:hover {
        background-color: var(--rlightorange);
    }

    .btn-ileri:focus,
    .btn-geri:focus,
    .btn-sorgu:focus,
    .btn-dogrula:focus {
        outline: unset !important;
    }

.btn-ode {
    border: none;
    border-radius: .5rem;
    padding: 7px 20px;
    color: white;
    background-color: black;
    margin: 0 5px;
    transition: all .3s;
}

    .btn-ode:hover {
        background-color: white;
        color: black;
    }

/*.btn-ode:focus {
        background-color: white;
        color: black;
        outline: unset !important;
    }*/

#progress, #sorgu-progress {
    position: relative;
    margin-bottom: 30px;
    max-width: 350px;
    margin: auto;
}

#progress-bar, #sorgu-progress-bar {
    position: absolute;
    background: black;
    height: 5px;
    width: 0%;
    top: 45%;
    left: 0;
    transition: all .5s;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
}

#progress-num, #sorgu-progress-num {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

    #progress-num .step, #sorgu-progress-num .sorgu-step {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        text-align: center;
        background-color: var(--rgray);
        font-family: sans-serif;
        font-size: 14px;
        position: relative;
        z-index: 1;
        color: white;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .5s;
    }

        #progress-num .step.active, #sorgu-progress-num .sorgu-step.active {
            background-color: black;
            color: #fff;
        }

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--rgray);
    outline: 0;
    box-shadow: 0 0 0 0.2rem #f0eded;
}

select {
    height: 38px !important;
    margin: 0 !important;
    font-family: 'Poppins' !important;
}

.form-check-label {
    margin-right: 10px;
}

.form-check-input:checked {
    background-color: var(--rorange);
    border-color: var(--rorange);
}

.form-check-input:focus {
    border-color: var(--rorange);
    box-shadow: 0 0 0 0.2rem #f0eded;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.info-card {
    border: 2px solid var(--rbackwhite);
    border-radius: .5rem;
}

.info-header {
    /*white-space: nowrap;*/
    margin-right: 5px;
}

.info-price-header {
    margin-right: 5px;
}

.info-header,
.info-text {
    margin-bottom: 3px;
}

.info-header,
.info-price-header,
.info-price-text {
    font-weight: 500
}

.info-price-header,
.info-price-text {
    font-size: 18px;
    margin-bottom: 3px;
    margin-top: 10px;
}

.info-price-text {
    color: var(--rorange);
}

@media only screen and (max-width: 630px) {
    .form-card {
        padding: 2rem 1rem !important;
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.fade {
    opacity: 1;
    animation: fade 7.5s linear;
    animation-name: fade;
}


@keyframes fade {
    0%,100% {
        opacity: 0
    }

    10%, 90% {
        opacity: 1
    }
}

/*.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(100%);
    transition: all 1s;
}

.show-entry {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}
*/

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    animation: rotator 1.4s linear infinite;
    position: fixed;
    top: 50%;
    left: 48%;
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@keyframes colors {
    0% {
        stroke: #4285f4;
    }

    25% {
        stroke: #de3e35;
    }

    50% {
        stroke: #f7c223;
    }

    75% {
        stroke: #1b9a59;
    }

    100% {
        stroke: #4285f4;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}

.btn-guncelle {
    color: white;
    background-color: black;
    border: none;
    border-radius: .5rem;
    width: auto;
    transition: all .3s;
    padding: 7px 20px;
}

    .btn-guncelle:hover {
        background-color: var(--rorange);
        color: white;
    }

.required-text:after {
    content: '*';
    color: crimson;
    margin-left: 5px;
}

.message-popup {
    z-index: 99999999999999999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    padding: 2rem;
}

.message-popup-content {
    max-width: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    background-color: white;
    -webkit-box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.3);
}

.popup-text {
    margin-top: 1rem;
    text-align: center;
    color: black;
    font-weight: 500;
}

.popup-icon {
    text-align: center;
    font-size: 35px;
    color: var(--rorange);
}

.show-popup {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.card-inner-info {
    padding: 0;
    font-style: italic;
    color: var(--rgray);
}

.payment-success-icon {
    color: mediumseagreen;
    font-size: 45px;
    text-align: center;
    margin: 1rem;
}

.payment-failure-icon {
    color: crimson;
    font-size: 45px;
    text-align: center;
    margin: 1rem;
}

.payment-result-icon {
    color: var(--rorange);
    font-size: 45px;
    text-align: center;
    margin: 1rem;
}

.payment-result-text {
    text-align: center;
    font-weight: 500;
    font-size: large;
    margin: 1rem;
}

.form-container {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    max-width: 815px;
}

.payment-result-btn {
    text-decoration: none;
    color: white;
    background-color: var(--rorange);
    width: 170px;
    padding: 7px 0;
    border-radius: 0.5rem;
    margin-top: 1rem;
    transition: all .3s;
}

    .payment-result-btn:hover {
        color: white;
        background-color: var(--rlightorange);
    }


.payment-info {
    font-weight: 500;
    font-size: large;
    padding: 2rem 1rem;
    text-align: center;
}

.kalan-sure {
    text-align: center !important;
    font-weight: 500;
    color: black;
    font-size: larger;
    margin-bottom: 2rem;
}

.dogrula-popup,
.dogrula-popup-kisi {
    z-index: 99999999999999999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    padding: 2rem;
}

.dogrula-popup-content {
    max-width: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    background-color: white;
    -webkit-box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.3);
}

.dogrula-tel {
    color: var(--rorange) !important;
    font-size: larger;
}

.dogrula-text,
.dogrula-tel {
    margin-top: 1rem;
    text-align: center;
    color: black;
    font-weight: 500;
}

.show-popup {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.btn-dogrula {
    padding: 3px 15px !important;
    margin-top: 1rem !important;
}

#sorguDogrulama {
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
}

.btn-kod-onayla {
    border: none;
    color: white;
    background-color: var(--rorange);
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    transition: all .3s;
}

    .btn-kod-onayla:hover {
        background-color: var(--rlightorange);
    }

    .btn-kod-onayla:focus {
        outline: unset !important;
    }

.aktif-kira-yok,
.gecmis-kira-yok {
    text-align: center;
    margin-top: 2rem;
}

.aktif-kira-yok {
    display: none;
}

.gecmis-kira-yok {
    display: none;
}

.close-btn {
    background-color: var(--rbackwhite);
    border: none;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    text-align: center;
    color: black;
    font-weight: 500;
    font-size: larger;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

.footer-text {
    background-color: white;
    padding: .7rem;
    display: flex;
    justify-content: center;
}

    .footer-text p {
        font-size: smaller;
        text-align: center;
    }

.bike {
    display: block;
    margin: auto;
    width: 16em;
    height: auto;
    position: fixed;
    aspect-ratio: 6.1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.bike-body,
.bike-front,
.bike__handlebars,
.bike-pedals,
.bike-pedals-spin,
.bike-seat,
.bike-spokes,
.bike-spokes-spin,
.bike-tire {
    animation: bikeBody 3s ease-in-out infinite;
    stroke: var(--rorange);
    transition: stroke var(--trans-dur);
}

.bike-front {
    animation-name: bikeFront;
}

.bike-handlebars {
    animation-name: bikeHandlebars;
}

.bike-pedals {
    animation-name: bikePedals;
}

.bike-pedals-spin {
    animation-name: bikePedalsSpin;
}

.bike-seat {
    animation-name: bikeSeat;
}

.bike-spokes,
.bike-tire {
    stroke: currentColor;
}

.bike-spokes {
    animation-name: bikeSpokes;
}

.bike-spokes-spin {
    animation-name: bikeSpokesSpin;
}

.bike-tire {
    animation-name: bikeTire;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),90%,10%);
        --fg: hsl(var(--hue),90%,90%);
    }
}

/* Animations */
@keyframes bikeBody {
    from {
        stroke-dashoffset: 79;
    }

    33%, 67% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -79;
    }
}

@keyframes bikeFront {
    from {
        stroke-dashoffset: 19;
    }

    33%, 67% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -19;
    }
}

@keyframes bikeHandlebars {
    from {
        stroke-dashoffset: 10;
    }

    33%, 67% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -10;
    }
}

@keyframes bikePedals {
    from {
        animation-timing-function: ease-in;
        stroke-dashoffset: -25.133;
    }

    33%, 67% {
        animation-timing-function: ease-out;
        stroke-dashoffset: -21.991;
    }

    to {
        stroke-dashoffset: -25.133;
    }
}

@keyframes bikePedalsSpin {
    from {
        transform: rotate(0.1875turn);
    }

    to {
        transform: rotate(3.1875turn);
    }
}

@keyframes bikeSeat {
    from {
        stroke-dashoffset: 5;
    }

    33%, 67% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -5;
    }
}

@keyframes bikeSpokes {
    from {
        animation-timing-function: ease-in;
        stroke-dashoffset: -31.416;
    }

    33%, 67% {
        animation-timing-function: ease-out;
        stroke-dashoffset: -23.562;
    }

    to {
        stroke-dashoffset: -31.416;
    }
}

@keyframes bikeSpokesSpin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(3turn);
    }
}

@keyframes bikeTire {
    from {
        animation-timing-function: ease-in;
        stroke-dashoffset: 56.549;
        transform: rotate(0);
    }

    33% {
        stroke-dashoffset: 0;
        transform: rotate(0.33turn);
    }

    67% {
        animation-timing-function: ease-out;
        stroke-dashoffset: 0;
        transform: rotate(0.67turn);
    }

    to {
        stroke-dashoffset: -56.549;
        transform: rotate(1turn);
    }
}

a {
    text-decoration: none !important;
    color: black;
    transition: all .3s;
}

    a:hover {
        color: var(--rorange);
    }

#sozlesme-btn,
#tutanak-btn {
    border: none;
    border-radius: 0.5rem;
    margin: 4px 0;
    padding: 5px;
    color: black;
    background-color: var(--rbackwhite);
    transition: all.3s;
    font-weight: 500;
}

    #sozlesme-btn:hover,
    #tutanak-btn:hover {
        background-color: var(--rorange);
        color: white;
    }



#back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rorange);
    color: white;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    bottom: 50px;
    left: 20px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    text-decoration: none;
}

    #back-to-top::after {
        content: "\f077";
        font-family: FontAwesome;
        font-size: larger;
        color: #fff;
    }

    #back-to-top:hover {
        cursor: pointer;
        background-color: var(--rlightorange);
    }

    #back-to-top:active {
        background-color: #555;
    }

    #back-to-top.show {
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 980px) {

    #back-to-top {
        bottom: 70px;
        right: 20px;
    }
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
    opacity: 1 !important;
}


#ekipmanInfo {
    margin-bottom: 0;
    text-align: center;
    margin-top: 1rem;
}

.bicycle-container {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 350px;
    height: 300px;
    overflow: hidden;
}

    .bicycle-container .wheel {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 120px;
        height: 120px;
    }

        .bicycle-container .wheel .tire {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: inherit;
            height: inherit;
            border-radius: 50%;
            border: 10px solid #151515;
            z-index: 2;
        }

        .bicycle-container .wheel .rim {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 114px;
            height: 114px;
            border-radius: 50%;
            border: 10px solid var(--rorange);
            z-index: 1;
        }

        .bicycle-container .wheel .spokes {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 78px;
            height: 78px;
            border-radius: 50%;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 3px solid var(--rorange);
            z-index: 1;
            animation: rt 2s infinite linear;
            background: rgba(200, 100, 100, 0.1);
        }

            .bicycle-container .wheel .spokes:nth-of-type(3) {
                border-left: 3px solid transparent;
                border-right: 3px solid transparent;
                border-bottom: 3px solid var(--rorange);
            }

        .bicycle-container .wheel .hub {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--rorange);
        }

    .bicycle-container .back-wheel {
        left: 0;
    }

    .bicycle-container .front-wheel {
        right: 0;
    }

    .bicycle-container .gear {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: calc(120px + 39.6px);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #151515;
        z-index: 4;
        animation: rt 3s infinite linear;
    }

        .bicycle-container .gear .gear-red {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 3px solid var(--rorange);
        }

        .bicycle-container .gear .pedal-tube {
            position: absolute;
            margin: auto;
            top: -30px;
            right: 0;
            bottom: 0;
            left: 0;
            transform: rotate(-90deg);
            width: 20px;
        }

        .bicycle-container .gear .pedal {
            position: absolute;
            margin: auto;
            top: -50px;
            right: 0;
            bottom: 0;
            left: 0;
            width: 20px;
            height: 5px;
            background: var(--rorange);
            border-radius: 5px;
            z-index: 3;
        }

    .bicycle-container .tube {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        height: 5px;
        border-radius: 5px;
        background: #151515;
        z-index: 3;
    }

    .bicycle-container .chain-tube {
        left: calc(120px / 2);
        width: 120px;
    }

    .bicycle-container .seat-tube-back {
        left: calc(120px / 2);
        transform-origin: left;
        transform: rotate(-60deg);
        width: 120px;
    }

    .bicycle-container .seat-tube-front {
        left: calc(120px / 2);
        transform-origin: right;
        transform: rotate(60deg);
        width: 120px;
    }

    .bicycle-container .seat-tube-post {
        left: calc((120px / 2) - 20px);
        transform-origin: right;
        transform: rotate(60deg);
        background: var(--rorange);
        z-index: 1;
        height: calc(5px - 1px);
        width: 140px;
    }

    .bicycle-container .top-tube {
        left: 120px;
        bottom: initial;
        top: 44px;
        width: 113px;
    }

    .bicycle-container .top-handlebar-tube {
        right: 112px;
        bottom: initial;
        top: 25px;
        width: 20px;
        background: var(--rorange);
    }

    .bicycle-container .top-handlebar-tube2 {
        right: 90px;
        bottom: initial;
        top: 25px;
        width: 25px;
        background: #151515;
        border-radius: 0%;
    }

    .bicycle-container .down-tube {
        left: calc(120px + 60px);
        width: 100px;
        transform-origin: left;
        transform: rotate(-50deg);
    }

    .bicycle-container .head-tube {
        right: calc(120px / 2);
        transform-origin: right;
        transform: rotate(60deg);
        width: 120px;
    }

    .bicycle-container .head-tube-post {
        right: calc(120px / 2);
        transform-origin: right;
        transform: rotate(60deg);
        width: 140px;
        background: var(--rorange);
        z-index: 1;
        height: calc(5px - 1px);
    }

    .bicycle-container .saddle {
        position: absolute;
        margin: auto;
        top: 20px;
        left: 85px;
        width: 50px;
        height: 10px;
        border-top-left-radius: 50%;
        border-top-right-radius: 100%;
        border-bottom-left-radius: 50%;
        background: #151515;
        z-index: 2;
    }

    .bicycle-container .handlebars {
        position: absolute;
        margin: auto;
        top: 25px;
        right: calc(100px / 2 + 25px);
        width: 30px;
        height: 30px;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top: 5px solid #151515;
        border-right: 5px solid #151515;
        border-bottom: 5px solid var(--rorange);
        z-index: 2;
    }

.ground-container {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 600px;
    height: 200px;
    overflow: hidden;
}

    .ground-container .ground {
        position: absolute;
        margin: auto;
        animation: mv infinite linear;
        background: var(--rorange);
        z-index: -1;
    }

    .ground-container .ground1 {
        bottom: 0;
        right: -150px;
        width: 100px;
        height: 4px;
        border-radius: 10px;
        animation-duration: 3s;
        z-index: 5;
    }

        .ground-container .ground1:before {
            content: "";
            position: absolute;
            margin: auto;
            top: -60px;
            left: 150px;
            width: 40px;
            height: 30px;
            border-top-right-radius: 60%;
            border-top-left-radius: 30%;
            border-bottom-left-radius: 20%;
            background: #151515;
        }

    .ground-container .ground2 {
        bottom: 70px;
        right: -250px;
        width: 100px;
        height: 2px;
        border-radius: 10px;
        animation-duration: 4s;
    }

        .ground-container .ground2:before {
            content: "";
            position: absolute;
            margin: auto;
            top: -30px;
            left: 200px;
            width: 20px;
            height: 10px;
            border-top-right-radius: 60%;
            border-top-left-radius: 30%;
            border-bottom-left-radius: 20%;
            background: #151515;
        }

    .ground-container .ground3 {
        top: 50px;
        right: -300px;
        width: 100px;
        height: 2px;
        border-radius: 10px;
        animation-duration: 5s;
    }

        .ground-container .ground3:before {
            content: "";
            position: absolute;
            margin: auto;
            top: 10px;
            left: -100px;
            width: 10px;
            height: 5px;
            border-top-right-radius: 60%;
            border-top-left-radius: 30%;
            border-bottom-left-radius: 20%;
            background: #151515;
        }

@keyframes rt {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes mv {
    100% {
        right: 900px;
    }
}

.kira-sorgu-header {
    color: var(--rorange) !important;
}