/*
    (c) 2024 - Bryckia - KendiDünyan
    Tüm hakları saklıdır, bu dosyanın önceden yazılı izin alınmadan dağıtılması,
    tersine mühendislik yöntemleri kullanarak incelenmesi, ticari kullanılması,
    kesinlikle yasaktır.

    All rights reserved, redistribution, reverse engineering
    and/or discovering our techniques, commerical use
    of this file without prior written permission
    is strictly forbidden.

    Any legal proceedings arising from copyright violation(s) will be done in Turkish Courts

    Distribution only Exceptions:
        - Any fair use situation
        - Any Video that follows community guidelines without showing proprietary source code but only results of them (for example screenshots of the game)
*/

:root {
    --light-background: #f5fafe;
    --light-shadow: 0px 4px 11px #98a7b6;
    --dark-background: #040506;
    --primary: #0628c2;
    --danger: #e20622;
    --primary-transparent: #0628c29e;
    --info: #065ef2;
    --info-light: #2b74f1;
    --navbar-color: #ffffff;
    --navbar-shadow: 0px 4px 11px #6c67914d;
    --input-light-bg: #ffffff;
    --light-text: #5e7090;
    --input-shadow: inset 2px 2px 6px 0px #6c67914d;
    --card-light-bg: #ffffff;
    --card-light-border-color: #e1e3e5;
    --light-dark: #f5fafea5;
}

body.light {
    margin: 0;
    background-color: var(--light-background);

}

body.dark {
    background-color: var(--dark-background);
    color: white;
}

/* 
    --------------
    |  Düğmeler  |
    --------------

    Renkler:
        - primary
        - warning
        - success
        - danger
*/

.button {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s box-shadow;
    position: relative;
}
.button:has(> .ripple) {
    overflow: hidden;
}

.button.primary {
    background-color: var(--primary);
    color: white;
}

body.light .button.primary {
    box-shadow: 0px 0px 0px 0px var(--primary-transparent), var(--light-shadow) !important;;
}

body.light .button.primary:focus,.button.primary:active {
    outline: 0px;
    box-shadow: 0px 0px 0px 2px var(--primary-transparent), var(--light-shadow) !important;
}

body.light .button.primary {
    box-shadow: var(--light-shadow);
}

/*
    /----------/
    /  NAVBAR  /
    /----------/
*/

.logo {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}
.logo > svg {
    width: 100%;
    height: 100%;
}
body.light .navbar {
    background-color: var(--navbar-color);
    box-shadow: var(--navbar-shadow);
}
.navbar {
    height: 50px;
    justify-content: space-around;
    align-items: center;
    display: flex;
}

.navbar > .menu {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 100%;
}
.navbar > .menu > a {
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
}
body.light .navbar > .menu > a:hover {
    background-color: var(--light-dark);

    color: var(--primary);
}



/*
    /------------/
    /   BANNER   /
    /------------/
*/

.banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
}

.banner.info {
    background-color: var(--info);
    color: white;
}

.banner.info > .banner-button {
    background-color: var(--info-light);
    border-radius: 0px;
    color: white;
}
/*
    /--------------/
    /    INPUTS    /
    /--------------/

*/

body.light .input {
    padding: 10px;
    background-color: var(--input-light-bg);
    border-radius: 5px;
    border: none;
    box-shadow: var(--input-shadow);
    transition: 0.5s box-shadow linear;
}

.input:focus {
    outline: 0px;
    box-shadow: 0 0 0 2px var(--primary-transparent), var(--input-shadow) !important;
}

/*
    /----------/
    /   CARD   /
    /----------/
*/

body.light .card {
    background-color: var(--card-light-bg);
    padding: 10px;
    border: 1px solid var(--card-light-border-color);
}


/*
    /--------/
    /   FX   /
    /--------/
*/

.ripple {
    height: 10px;
    width: 10px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.715);
    animation: 0.5s forwards ripple linear;
    position: absolute;
    display: inline-block;
}



@keyframes ripple {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(80);
        opacity: 0;
    }
}

/*
  /---------------/
  /     UTILS     /
  /---------------/    
    
*/

.center-container {
    display: flex;
    justify-content: center;
}

.h-half {
    height: 50%;
}

.w-half {
    width: 50%;
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.w-150px {
    width: 150px;
}

/* 
    /----------/
    /   FORM   /
    /----------/
*/

.form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.light .form {
    color: var(--light-text);
}

.form > input {
    width: 100%;
    box-sizing: border-box;
}

.form > p, .form > label {
    margin: 0;
    font-size: 0.875rem;
}

a {
    color: var(--primary);
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

/*
    /---------/
    /  ALERT  /
    /---------/
*/

.alert {
    padding: 10px;
    border-radius: 5px;
}

.alert:empty {
    display: none;
}

.alert.danger {
    background-color: var(--danger);
    color: white;
}