/* #region Root */
:root {
    --smoke-bg: #000003;
    --smoke-p: #0e1117;
    --smoke-s: #3b82f6;
    --smoke-t: #22c55e;
    --smoke-white: #f0f0f0;

    --kess-red: #b81010;
    --kess-lime: #c5c820;
    --kess-orange: #e66d21;



    --selection-color: #3b83f6ce;
    --scrollbar-color: #3b83f641;

    --hero-height: calc(100vh - 80px);

    --border-p: 8px;
    --border-s: 16px;
    --border-t: 24px;

    --padding-p: 8px;
    --padding-s: 16px;
    --padding-t: 24px;
    --padding-f: 36px;

    --container-padding: 1rem;

    --gecis: all 0.2s ease;
}

* {
    scrollbar-color: var(--scrollbar-color) transparent;
    scrollbar-width: thin;
}

html,
body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--smoke-bg);
    color: var(--smoke-white);
}

::selection {
    background: var(--selection-color);
}

button {
    cursor: pointer;
}

/* #endregion */

/* #region Kısaltmalar */

.r {
    position: relative;
}

.f {
    display: flex;
}

.b {
    display: block;
}

.fcol {
    flex-direction: column;
}

.frow {
    flex-direction: row;
}

.jc {
    justify-content: center;
}

.jb {
    justify-content: space-between;
}

.je {
    justify-content: end;
}

.ic {
    align-items: center;
}

.ie {
    align-items: flex-end;
}

.fw {
    flex-wrap: wrap;
}

/* #endregion  */

/* #region Container */

@layer utilities {
    .container {
        width: 100%;

        @media (width >=40rem) {
            max-width: 40rem;
        }

        @media (width >=48rem) {
            max-width: 48rem;
        }

        @media (width >=64rem) {
            max-width: 64rem;
        }

        @media (width >=1280px) {
            max-width: 1280px !important;
        }
    }
}

/* #endregion */

/* #region Responsive*/

@media (max-width: 640px) {
    header .account-logo .account-name span {
        display: none;
    }
}

@media (max-width: 430px) {
    header .notification {
        display: none
    }

    header .flags {
        display: none
    }
}

/* #endregion */

/* #region Header */

header {
    position: relative;
    overflow: hidden;
    height: 80px;
    width: 100%;
    z-index: 9999;
    top: 0;
    background-color: var(--smoke-p);
}

header .logo {
    width: 50px;
    font-weight: 900;
}

header .account-logo {
    gap: 5px;
}

header .account-logo #userImg {
    border-radius: 50%;
}

header .account-logo .account-name {
    gap: 5px;
}

header .account-logo .account-name i {
    font-size: 12px;
}

header .notification {
    background: linear-gradient(90deg, var(--smoke-p), var(--smoke-s));
    padding: 10px;
    border-radius: var(--border-p);
    display: none;
}

header .flags {
    background: linear-gradient(90deg, var(--kess-red), var(--kess-orange));
    padding: 10px;
    border-radius: var(--border-p);

}

/* #endregion */

/* #region Footer */
footer {
    height: 40px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* #endregion */