@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');


:root {
    --bgmain: #fff;
    --bgcontent1: #FAF9FC;
    --bgcontent2: #D1D1D1;

    --brand1: #280093;
    --brand2: #8E66F9;
    --brand3: #B499FB;
    --brand4: #6933F7;
    --brand5: #4300F5;
    --brand6: #3600C4;
    --brand7: #F0EAFE;

    --white: #fff;

    --linear1: linear-gradient(281deg, #4300F5 0%, #0D0031 100%);
    --linear2: linear-gradient(108deg, #070019 -7.95%, #0D0031 108.46%);

    --radial1: radial-gradient(64.03% 36% at 33.49% 62.83%, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.09) 100%), radial-gradient(58.25% 76.21% at 106.16% 108.66%, #8E66F9 0%, rgba(142, 102, 249, 0.00) 100%), radial-gradient(41.05% 59% at 0% 0%, rgba(142, 102, 249, 0.80) 0%, rgba(142, 102, 249, 0.20) 100%), #4300F5;

    --typeprimary: #0E0E0E;
    --typesecondary: #747474;
    --typetertiary: #A2A2A2;
    --typequaternary: #B5B3BD;

    --space_xxsmall: 2px;
    --space_xsmall: 4px;
    --space_xsmall2: 6px;
    --space_small: 8px;
    --space_regular: 12px;
    --space_medium: 16px;
    --space_large: 24px;
    --space_xlarge: 32px;
    --space_xxlarge: 40px;
    --space_xxxlarge: 48px;
    --space_xxxxlarge: 56px;
    --space_xxxxxlarge: 64px;

    --spaceBig_xxxsmall: 72px;
    --spaceBig_xxsmall: 96px;
    --spaceBig_xsmall: 120px;
    --spaceBig_small: 136px;
    --spaceBig_regular: 144px;
    --spaceBig_medium: 160px;
    --spaceBig_large: 200px;
    --spaceBig_xlarge: 240px;
    --spaceBig_xxlarge: 280px;
    --spaceBig_xxxlarge: 320px;
    --spaceBig_xxxlarge2: 400px;
    --spaceBig_xxxxlarge: 480px;
    --spaceBig_xxxxxlarge: 640px;
    --spaceBig_xxxxxxlarge: 800px;

    --maxWidth_small: 960px;
    --maxWidth_regular: 1280px;
    --maxWidth_large: 1600px;

    --fontsize_xxxsmall: 12px;
    --fontsize_xxsmall: 14px;
    --fontsize_xsmall: 16px;
    --fontsize_small: 18px;
    --fontsize_regular: 20px;
    --fontsize_medium: 24px;
    --fontsize_large: 27px;
    --fontsize_xlarge: 36px;
    --fontsize_xxlarge: 40px;

    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightBold: 700;
    --fontWeightXBold: 800;

    --shadowblack1: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}

.spaceH_xxsmall {width: var(--space_xxsmall); height: 1px; flex-shrink: 0;}
.spaceH_xsmall {width: var(--space_xsmall); height: 1px; flex-shrink: 0;}
.spaceH_small {width: var(--space_small); height: 1px; flex-shrink: 0;}
.spaceH_regular {width: var(--space_regular); height: 1px; flex-shrink: 0;}
.spaceH_medium {width: var(--space_medium); height: 1px; flex-shrink: 0;}
.spaceH_large {width: var(--space_large); height: 1px; flex-shrink: 0;}
.spaceH_xlarge {width: var(--space_xlarge); height: 1px; flex-shrink: 0;}
.spaceH_xxlarge {width: var(--space_xxlarge); height: 1px; flex-shrink: 0;}
.spaceH_xxxlarge {width: var(--space_xxxlarge); height: 1px; flex-shrink: 0;}
.spaceH_xxxxlarge {width: var(--space_xxxxlarge); height: 1px; flex-shrink: 0;}
.spaceH_xxxxxlarge {width: var(--space_xxxxxlarge); height: 1px; flex-shrink: 0;}

.spaceBigH_xxxsmall {width: var(--spaceBig_xxxsmall); height: 1px; flex-shrink: 0;}
.spaceBigH_xxsmall {width: var(--spaceBig_xxsmall); height: 1px; flex-shrink: 0;}
.spaceBigH_xsmall {width: var(--spaceBig_xsmall); height: 1px; flex-shrink: 0;}
.spaceBigH_small {width: var(--spaceBig_small); height: 1px; flex-shrink: 0;}
.spaceBigH_regular {width: var(--spaceBig_regular); height: 1px; flex-shrink: 0;}
.spaceBigH_medium {width: var(--spaceBig_medium); height: 1px; flex-shrink: 0;}
.spaceBigH_large {width: var(--spaceBig_large); height: 1px; flex-shrink: 0;}
.spaceBigH_xlarge {width: var(--spaceBig_xlarge); height: 1px; flex-shrink: 0;}
.spaceBigH_xxlarge {width: var(--spaceBig_xxlarge); height: 1px; flex-shrink: 0;}
.spaceBigH_xxxlarge {width: var(--spaceBig_xxxlarge); height: 1px; flex-shrink: 0;}
.spaceBigH_xxxxlarge {width: var(--spaceBig_xxxxlarge); height: 1px; flex-shrink: 0;}
.spaceBigH_xxxxxlarge {width: var(--spaceBig_xxxxxlarge); height: 1px; flex-shrink: 0;}
.spaceBigH_xxxxxlarge {width: var(--spaceBig_xxxxxlarge); height: 1px; flex-shrink: 0;}

.spaceV_xxsmall {height: var(--space_xxsmall); flex-shrink: 0;}
.spaceV_xsmall {height: var(--space_xsmall); flex-shrink: 0;}
.spaceV_small {height: var(--space_small); flex-shrink: 0;}
.spaceV_regular {height: var(--space_regular); flex-shrink: 0;}
.spaceV_medium {height: var(--space_medium); flex-shrink: 0;}
.spaceV_large {height: var(--space_large); flex-shrink: 0;}
.spaceV_xlarge {height: var(--space_xlarge); flex-shrink: 0;}
.spaceV_xxlarge {height: var(--space_xxlarge); flex-shrink: 0;}
.spaceV_xxxlarge {height: var(--space_xxxlarge); flex-shrink: 0;}
.spaceV_xxxxlarge {height: var(--space_xxxxlarge); flex-shrink: 0;}
.spaceV_xxxxxlarge {height: var(--space_xxxxxlarge); flex-shrink: 0;}

.spaceBigV_xxxsmall {height: var(--spaceBig_xxxsmall); flex-shrink: 0;}
.spaceBigV_xxsmall {height: var(--spaceBig_xxsmall); flex-shrink: 0;}
.spaceBigV_xsmall {height: var(--spaceBig_xsmall); flex-shrink: 0;}
.spaceBigV_small {height: var(--spaceBig_small); flex-shrink: 0;}
.spaceBigV_regular {height: var(--spaceBig_regular); flex-shrink: 0;}
.spaceBigV_medium {height: var(--spaceBig_medium); flex-shrink: 0;}
.spaceBigV_large {height: var(--spaceBig_large); flex-shrink: 0;}
.spaceBigV_xlarge {height: var(--spaceBig_xlarge); flex-shrink: 0;}
.spaceBigV_xxlarge {height: var(--spaceBig_xxlarge); flex-shrink: 0;}
.spaceBigV_xxxlarge {height: var(--spaceBig_xxxlarge); flex-shrink: 0;}
.spaceBigV_xxxxlarge {height: var(--spaceBig_xxxxlarge); flex-shrink: 0;}
.spaceBigV_xxxxxlarge {height: var(--spaceBig_xxxxxlarge); flex-shrink: 0;}
.spaceBigV_xxxxxxlarge {height: var(--spaceBig_xxxxxxlarge); flex-shrink: 0;}

.width_xxsmall {width: var(--space_xxsmall);}
.width_xsmall {width: var(--space_xsmall);}
.width_small {width: var(--space_small);}
.width_regular {width: var(--space_regular);}
.width_medium {width: var(--space_medium);}
.width_large {width: var(--space_large);}
.width_xlarge {width: var(--space_xlarge);}
.width_xxlarge {width: var(--space_xxlarge);}
.width_xxxlarge {width: var(--space_xxxlarge);}
.width_xxxxlarge {width: var(--space_xxxxlarge);}
.width_xxxxxlarge {width: var(--space_xxxxxlarge);}

.widthBig_xxxsmall {width: var(--spaceBig_xxxsmall);}
.widthBig_xxsmall {width: var(--spaceBig_xxsmall);}
.widthBig_xsmall {width: var(--spaceBig_xsmall);}
.widthBig_small {width: var(--spaceBig_small);}
.widthBig_regular {width: var(--spaceBig_regular);}
.widthBig_medium {width: var(--spaceBig_medium);}
.widthBig_large {width: var(--spaceBig_large);}
.widthBig_xlarge {width: var(--spaceBig_xlarge);}
.widthBig_xxlarge {width: var(--spaceBig_xxlarge);}
.widthBig_xxxlarge {width: var(--spaceBig_xxxlarge);}
.widthBig_xxxlarge2 {width: var(--spaceBig_xxxlarge2);}
.widthBig_xxxxlarge {width: var(--spaceBig_xxxxlarge);}
.widthBig_xxxxxlarge {width: var(--spaceBig_xxxxxlarge);}
.widthBig_xxxxxxlarge {width: var(--spaceBig_xxxxxxlarge);}

.height_xxsmall {height: var(--space_xxsmall);}
.height_xsmall {height: var(--space_xsmall);}
.height_small {height: var(--space_small);}
.height_regular {height: var(--space_regular);}
.height_medium {height: var(--space_medium);}
.height_large {height: var(--space_large);}
.height_xlarge {height: var(--space_xlarge);}
.height_xxlarge {height: var(--space_xxlarge);}
.height_xxxlarge {height: var(--space_xxxlarge);}
.height_xxxxlarge {height: var(--space_xxxxlarge);}
.height_xxxxxlarge {height: var(--space_xxxxxlarge);}

.heightBig_xxxsmall {height: var(--spaceBig_xxxsmall);}
.heightBig_xxsmall {height: var(--spaceBig_xxsmall);}
.heightBig_xsmall {height: var(--spaceBig_xsmall);}
.heightBig_small {height: var(--spaceBig_small);}
.heightBig_regular {height: var(--spaceBig_regular);}
.heightBig_medium {height: var(--spaceBig_medium);}
.heightBig_large {height: var(--spaceBig_large);}
.heightBig_xlarge {height: var(--spaceBig_xlarge);}
.heightBig_xxlarge {height: var(--spaceBig_xxlarge);}
.heightBig_xxxlarge {height: var(--spaceBig_xxxlarge);}
.heightBig_xxxxlarge {height: var(--spaceBig_xxxxlarge);}
.heightBig_xxxxxlarge {height: var(--spaceBig_xxxxxlarge);}
.heightBig_xxxxxxlarge {height: var(--spaceBig_xxxxxxlarge);}

.gap_xxsmall {gap: var(--space_xxsmall);}
.gap_xsmall {gap: var(--space_xsmall);}
.gap_small {gap: var(--space_small);}
.gap_regular {gap: var(--space_regular);}
.gap_medium {gap: var(--space_medium);}
.gap_large {gap: var(--space_large);}
.gap_xlarge {gap: var(--space_xlarge);}
.gap_xxlarge {gap: var(--space_xxlarge);}
.gap_xxxlarge {gap: var(--space_xxxlarge);}
.gap_xxxxlarge {gap: var(--space_xxxxlarge);}
.gap_xxxxxlarge {gap: var(--space_xxxxxlarge);}

.gapBig_xsmall {gap: var(--spaceBig_xsmall);}


.h1xbold {font-size: var(--fontsize_xxlarge); font-weight: var(--fontWeightXBold);}
.h1bold {font-size: var(--fontsize_xxlarge); font-weight: var(--fontWeightBold);}
.h1semibold {font-size: var(--fontsize_xxlarge); font-weight: var(--fontWeightMedium);}
.h1regular {font-size: var(--fontsize_xxlarge); font-weight: var(--fontWeightRegular);}

.h2xbold {font-size: var(--fontsize_xlarge); font-weight: var(--fontWeightXBold);}
.h2bold {font-size: var(--fontsize_xlarge); font-weight: var(--fontWeightBold);}
.h2semibold {font-size: var(--fontsize_xlarge); font-weight: var(--fontWeightMedium);}
.h2regular {font-size: var(--fontsize_xlarge); font-weight: var(--fontWeightRegular);}

.h3xbold {font-size: var(--fontsize_large); font-weight: var(--fontWeightXBold);}
.h3bold {font-size: var(--fontsize_large); font-weight: var(--fontWeightBold);}
.h3semibold {font-size: var(--fontsize_large); font-weight: var(--fontWeightMedium);}
.h3regular {font-size: var(--fontsize_large); font-weight: var(--fontWeightRegular);}

.h4xbold {font-size: var(--fontsize_medium); font-weight: var(--fontWeightXBold);}
.h4bold {font-size: var(--fontsize_medium); font-weight: var(--fontWeightBold);}
.h4semibold {font-size: var(--fontsize_medium); font-weight: var(--fontWeightMedium);}
.h4regular {font-size: var(--fontsize_medium); font-weight: var(--fontWeightRegular);}

.bodyxbold {font-size: var(--fontsize_regular); font-weight: var(--fontWeightXBold);}
.bodybold {font-size: var(--fontsize_regular); font-weight: var(--fontWeightBold);}
.bodysemibold {font-size: var(--fontsize_regular); font-weight: var(--fontWeightMedium);}
.bodyregular {font-size: var(--fontsize_regular); font-weight: var(--fontWeightRegular);}

.bodysmallxbold {font-size: var(--fontsize_small); font-weight: var(--fontWeightXBold);}
.bodysmallbold {font-size: var(--fontsize_small); font-weight: var(--fontWeightBold);}
.bodysmallsemibold {font-size: var(--fontsize_small); font-weight: var(--fontWeightMedium);}
.bodysmallregular {font-size: var(--fontsize_small); font-weight: var(--fontWeightRegular);}

.captionxbold {font-size: var(--fontsize_xsmall); font-weight: var(--fontWeightXBold);}
.captionbold {font-size: var(--fontsize_xsmall); font-weight: var(--fontWeightBold);}
.captionsemibold {font-size: var(--fontsize_xsmall); font-weight: var(--fontWeightMedium);}
.captionregular {font-size: var(--fontsize_xsmall); font-weight: var(--fontWeightRegular);}

.captionsmallxbold {font-size: var(--fontsize_xxsmall); font-weight: var(--fontWeightXBold);}
.captionsmallbold {font-size: var(--fontsize_xxsmall); font-weight: var(--fontWeightBold);}
.captionsmallsemibold {font-size: var(--fontsize_xxsmall); font-weight: var(--fontWeightMedium);}
.captionsmallregular {font-size: var(--fontsize_xxsmall); font-weight: var(--fontWeightRegular);}

.captionxsmallxbold {font-size: var(--fontsize_xxxsmall); font-weight: var(--fontWeightXBold);}
.captionxsmallbold {font-size: var(--fontsize_xxxsmall); font-weight: var(--fontWeightBold);}
.captionxsmallsemibold {font-size: var(--fontsize_xxxsmall); font-weight: var(--fontWeightMedium);}
.captionxsmallregular {font-size: var(--fontsize_xxxsmall); font-weight: var(--fontWeightRegular);}

.bgMain {background-color: var(--bgcontent1) !important;}
.borderMain {border-color: var(--bgcontent1) !important;}
.colorMain {color: var(--bgcontent1) !important;}

.bg1 {background-color: var(--bgcontent1) !important;}
.borderbg1 {border-color: var(--bgcontent1) !important;}
.colorbg1 {color: var(--bgcontent1) !important;}

.bg2 {background-color: var(--bgcontent2) !important;}
.borderbg2 {border-color: var(--bgcontent2) !important;}
.colorbg2 {color: var(--bgcontent2) !important;}

.bgbrand1 {background-color: var(--brand1) !important;}
.borderbrand1 {border-color: var(--brand1) !important;}
.colorbrand1 {color: var(--brand1) !important;}

.bgbrand2 {background-color: var(--brand2) !important;}
.borderbrand2 {border-color: var(--brand2) !important;}
.colorbrand2 {color: var(--brand2) !important;}

.bgbrand3 {background-color: var(--brand3) !important;}
.borderbrand3 {border-color: var(--brand3) !important;}
.colorbrand3 {color: var(--brand3) !important;}

.bgbrand4 {background-color: var(--brand4) !important;}
.borderbrand4 {border-color: var(--brand4) !important;}
.colorbrand4 {color: var(--brand4) !important;}

.bgbrand5 {background-color: var(--brand5) !important;}
.borderbrand5 {border-color: var(--brand5) !important;}
.colorbrand5 {color: var(--brand5) !important;}

.bgbrand6 {background-color: var(--brand6) !important;}
.borderbrand6 {border-color: var(--brand6) !important;}
.colorbrand6 {color: var(--brand6) !important;}

.bgwhite {background-color: var(--white) !important;}
.borderwhite {border-color: var(--white) !important;}
.colorwhite {color: var(--white) !important;}

.bglinear1 {background: var(--linear1) !important;}
.borderlinear1 {border-color: var(--linear1) !important;}
.colorlinear1 {background-image: var(--linear1);
    background-size: 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important; 
    -moz-background-clip: text !important;
    -moz-text-fill-color: transparent !important;
    color: unset !important;
}

.bglinear2 {background: var(--linear2) !important;}
.borderlinear2 {border-color: var(--linear2) !important;}
.colorlinear2 {
    background: var(--linear2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    color: unset !important;
}

.bgradial1 {background: var(--radial1) !important;}
.borderradial1 {border-color: var(--radial1) !important;}
.colorradial1 {background-image: var(--radial1);
    background-size: 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important; 
    -moz-background-clip: text !important;
    -moz-text-fill-color: transparent !important;
    color: unset !important;
}

.typeprimary {
    color: var(--typeprimary);
}

.typesecondary {
    color: var(--typesecondary);
}

.typetertiary {
    color: var(--typetertiary);
}

.typequaternary {
    color: var(--typequaternary);
}


body {
    font-family: "Manrope", sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    font-size: var(--body);
    background-color: var(--bgmain);
    color: var(--typeprimary);
}

input, button, select, textarea, blockquote, h1, h2, h3, h4, h5, h6, h7 {
    font-family: "Manrope", sans-serif;
    margin: 0;
    padding: 0;
    color: var(--typeprimary);
}

input, button, select, textarea {
    border-radius: var(--space_small);
    padding: 0 var(--space_medium);
    box-sizing: border-box;
    appearance: none;
}

a {
    text-decoration: none;
    color: var(--typeprimary);
}

p, h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}

.columnContainer {
    display: flex;
    flex-direction: column !important;
}

.rowContainer {
    display: flex;
    flex-direction: row !important;
}

.justifySpaceBetween {
    justify-content: space-between !important;
}

.justifyCenter {
    justify-content: center;
}

.justifyStart {
    justify-content: start;
}

.justifyEnd {
    justify-content: end;
}

.justifyStrecth {
    justify-content: stretch;
}

.alignStart {
    align-items: start;
}

.alignCenter {
    align-items: center;
}

.alignStrecth {
    align-items: stretch;
}

.alignEnd {
    align-items: end;
}

.alignSelftStart {
    align-self: start;
}

.alignSelfCenter {
    align-self: center;
}

.alignSelfStrecth {
    align-self: stretch;
}

.alignSelfEnd {
    align-self: end;
}

.fill {
    flex-grow: 1;
    width: 1px;
}

.fillColumn {
    width: 100% !important;
}

.hug {
    flex-shrink: 0;
}

.flex-wrap {
    flex-wrap: wrap;
}

.rowReverse {
    flex-direction: row-reverse !important;
}

.columnReverse {
    flex-direction: column-reverse !important;
}

.button {
    height: var(--space_xxxxlarge);
    line-height: var(--space_xxxxlarge);
    border-radius: 28px;
    color: var(--white);
    background-color: var(--typeprimary);
    font-size: var(--fontsize_xsmall);
    font-weight: var(--fontWeightBold);
    padding: 0 var(--space_large);
}

.shadow {
    box-shadow: var(--shadowblack1);
}

.maxContainer {
    width: 100%;
    max-width: 1280px;
}

.fixed {
    position: fixed;
}

.tAlignLeft {
    text-align: left;
}

.tAlignCenter {
    text-align: center;
}

.tAlignRight {
    text-align: right;
}

header {
    left: 0;
    top: 0;
    padding: var(--space_large);
    box-sizing: border-box;
    transition: 0.6s ease;
    height: 104px;
    display: flex;
    justify-content: center;
}

header.scroll {
    background: var(--radial1);
}

.hero {
    padding: 138px var(--space_large) var(--spaceBig_xsmall);
}

.hero .button {
    width: 180px;
    justify-content: center;
    box-sizing: border-box;
}

.nav {
    padding: var(--space_large);
    position: sticky;
    top: 104px;
}

.nav a {
    padding: 0 var(--space_large);
    text-decoration: underline;
    height: var(--space_xxxxlarge);
    line-height: var(--space_xxxxlarge);
}

.nav a.active {
    border: 1px solid var(--white);
    background-color: var(--brand4);
    border-radius: var(--space_xxlarge);
    text-decoration: none;
}

.detaytablo {
    border: 3px solid var(--brand3);
    border-radius: var(--space_regular);
    overflow: hidden;
    width: 100%;
    max-width: 560px;
}

.detaytablo .head {
    border-bottom: 2px solid var(--brand3);
}

.detaytablo .detail {
    border-right: 2px solid var(--brand3);
    padding: var(--space_medium) var(--space_large);
}

.detaytablo .point {
    width: 180px;
    text-align: center;
    align-self: center;
}

.detaytablo .body:not(:last-child) {
    border-bottom: 1px solid var(--brand3);
}

.odullist {
    gap: var(--space_xxxxxlarge);
    width: 100%;
}

.odullist .item {
    width: calc(33% - 40px);
    align-items: center;
}

.odullist .item .box {
    border-style: solid;
    border-width: 1px;
    width: 100%;
    max-width: 198px;
    height: 198px;
    border-radius: var(--space_large);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space_medium);
}

#oduller .note {
    width: 100%;
    max-width: 560px;
}

#kurallar li {
    margin-bottom: var(--space_large);
}

#top10 .maxContainer {
    max-width: 906px;
}

.scoreTable {
    border: 3px solid var(--brand3);
    padding: var(--space_large);
    border-radius: var(--space_large);
    min-width: 414px;
}

.scoreTable .item {
    padding: var(--space_small) 0;
}

.scoreTable .item:not(:last-child) {
    border-bottom: 1px solid var(--bgcontent2);
}

.scoreTable .item .bodysmallsemibold {
    width: var(--space_xlarge);
}

section, footer {
    padding: var(--space_xxxxxlarge) var(--space_large);
    box-sizing: border-box;
}