.header.light{
    --header__: #ffffff26;
    --header__logo__: #2c2c2c;
    --header__other-user-svg__: #fff;
    --header__other-sepet-bg: #fff;
    --header__other-sepet-c: #333;
    --header__other-sepet-b: 1px solid #333;
    --header__other-user-svg-bg__: #333;
    --header__other-user-svg__: #333333;
    --header__other-sepet-svg: #333;
}
.header.dark{
    --header__: unset;
    --header__logo__ : #fff;
    --header__other-user-svg__: #1a237e;
    --header__other-sepet-bg: #1a237e;
    --header__other-sepet-c: #ffffff;
    --header__other-sepet-b: none;
    --header__other-user-svg-bg__: #e6edf7;
    --header__other-user-svg__: #1a237e;
    --header__other-sepet-svg: #e6edf7;
}
.header                               {position: absolute;z-index: 999999999;top: 0;left: 0;width: 100%;display: flex;padding: 4px 100px 5px 300px;background: #ffffff;border-bottom: 1px solid #ececec;border-top: 5px solid #2c2c2c;}
.header__logo                         {display: flex;position: relative;}
.header__logo > svg                   {width: 50px; height: 50px;}
.header__logo > svg > path            {fill: var(--header__logo__); stroke: var(--header__logo__); stroke-width: 10px;}
.header__logo > svg > path#dis-katman {fill: none; stroke: none;}
.header__other                        {display: flex; flex-direction: row; gap: 35px; align-items: center;}
.header__other-user                   {display: flex;}
.header__other-user-svg               {display: flex;border-radius: 50%;align-items: center;justify-content: center;width: fit-content;height: fit-content;}
.header__other-user-svg > svg         {width: 25px;height: 25px;}
.header__other-user-svg > svg > path  {fill: var(--header__other-user-svg__); stroke: none;}
.header__other-sepet                  {position: relative; display: flex; margin-left: -4px; justify-content: center; margin-top: 2px;}
.header__other-sepet > svg            {width: 29px;height: 29px;}
.header__other-sepet > svg > path     {fill: var(--header__other-sepet-svg); stroke: none;}
.header__other-sepet >.after          {position: absolute;width: 16px;height: 16px;color: var(--header__other-sepet-c);font-size: 13px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-weight: 600;margin-left: 6px;margin-top: 2px;}
.alerts                               {display: flex; position: fixed; top: 10px; width: 100%; padding: 0 10px; flex-direction: column; align-items: center; z-index: 99999999999; gap: 10px;}
.alert                                {width: 500px; min-width: 200px; padding: 15px; display: flex; align-items: center; gap: 15px; border-radius: 5px; opacity: 1; transition: opacity 1s ease;}
.alert--danger                        {background: #f32121;}
.alert--danger .alert__type--success  {display: none;}
.alert svg                            {width: 18px; height: 18px;}
.alert--danger svg path               {fill: #691010;}
.alert--success svg path              {fill: #102c69;}
.alert--success                       {background: #1E88E5;}
.alert--success .alert__type--danger  {display: none;}
.alert > .alert__text                 {line-height: 15px; font-size: 14px; color: #ffffffe8;}
.header__logo-text {
    position: absolute;
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: .4px;
    background: linear-gradient(45deg, #000000a1, #000000);
    padding: 3px;
    border-radius: 4px 4px 4px 12px;
    top: 7px;
    left: 35px;
}

@media screen and (max-width: 1400px) 
{
    .header                           {padding: 10px;}
    .header__other                    {margin-right: 10px;}
    .header__other-sepet >.after      {margin-top: 1px;margin-left: 6px;}

}
@media screen and (max-width: 1200px)
{
    .header__logo > svg               {width: 40px; height: 40px;}
    .header__other-user-svg > svg     {width: 24px; height: 24px;}
    .header__other-sepet > svg        {width: 26px; height: 26px;}
    .header__other-sepet:after        {width: 12.8px; height: 12.8px; font-size: 8px;}
    .header__other                    {margin: 8px;}
    .header__logo-text {
        position: absolute;
        font-family: 'Roboto';
        font-size: 11px;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: .4px;
        background: linear-gradient( 45deg, #0088ff94, #0088ff);
        padding: 3px;
        border-radius: 4px 4px 4px 12px;
        top: 4px;
        left: 28px;
    }
}
@media screen and (max-width: 800px)
{
    .header__other                    {flex-direction: row; align-items: center; gap: 20px;}
    .header__other-sepet > svg        {width: 28px; height: 28px;}
    .header__other-sepet              {margin: 0; margin-top: 2px;}
}
@media screen and (max-width: 600px)
{
    .header                           {backdrop-filter: blur(10px); padding: 5px;}
}