@font-face {
    font-family: "Como";
    font-style: normal;
    font-weight: 900;
    src: url("/v3/resources/fonts/Como-Heavy.ttf") format("opentype");
}

@font-face {
    font-family: "Nunito";
    font-weight: 700;
    src: url("/v3/resources/fonts/Nunito-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito";
    font-weight: 900;
    src: url("/v3/resources/fonts/Nunito-Black.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito";
    font-weight: 800;
    src: url("/v3/resources/fonts/Nunito-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito";
    font-weight: 900;
    src: url("/v3/resources/fonts/Nunito-Black.ttf") format("truetype");
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    display: grid;
    grid-template-rows: 120px auto 300px;
    background: #2e2534 url(/v3/resources/images/bg.png) no-repeat center 120px;
    background-size: 100% 620px;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

@media only screen and (max-width: 1680px) {
    body {
        background-size: 1680px 620px;
    }
}

header {
    background-color: #2e2534;
    box-shadow: 5px 9px 10px 0 rgba(0, 0, 0, 0.2), 5px 9px 30px 0 rgba(0, 0, 0, 0.25), inset 0 -4px 0 0 #28202d;
    height: 120px;
    z-index: 100;
}

header .content, footer .content {
    margin: 0 auto;
    width: 1190px;
    position: relative;
}

header .logo {
    position: absolute;
    left: -2px;
    top: 22px;
}

nav {
    position: absolute;
    left: 318px;
    top: 56px;
    width: 420px;
    display: flex;
    justify-content: space-between;
}

nav a {
    color: white;
    font-weight: 900;
    font-family: "Como", serif;     /* Fallback değeri, font-display ve adjust degerleri */
    font-size: 18px;
    text-decoration: none;
}

nav a.selected {
    border-radius: 2px;
    height: 4px;
    box-shadow: 0 21px 0 0 #6cd39a;
}

.visitor {
    background-color: #18161a;
    position: absolute;
    width: 246px;
    height: 40px;
    border-radius: 20px;
    right: 60px;
    top: 39px; /* TODO: 40 olmali */
    line-height: 43px;
    text-align: center;
    padding: 0 26px 0 31px;
}

.visitor a {
    color: white;
    font-family: "Como", sans-serif;
    font-weight: 900;
    font-size: 15px;
}

.visitor .vip {
    color: #f5eb92;
    -webkit-font-smoothing: antialiased;
}

.member {
    background-color: #18161a;
    position: absolute;
    width: 246px;
    height: 40px;
    border-radius: 20px;
    right: 60px;
    top: 39px; /* TODO: 40 olmali */
    line-height: 43px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 0 26px 0 31px;
    color: white;
    font-family: "Como", sans-serif;
    font-weight: 900;
}

.member a {
    font-size: 15px;
    color: white;
}

.member .vip {
    color: #f5eb92;
}

main {
    justify-self: center;
    padding: 40px 0 50px;
    width: 1190px;
}

footer {
    background-color: #161218;
    height: 300px;
    position: relative;
}

footer .logo {
    position: absolute;
    left: 0;
    top: 39px;
}

#copyright {
    height: 50px;
    font-family: "myriad-pro", sans-serif;  /* Tasarımda da aynı font mu hangi os/browser destekliyor */
    font-weight: bold;
    font-size: 14px;
    color: #5e5b61;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 54px;
    background: black;
    text-align: center;
}

#address {
    font-family: "Nunito", sans-serif;
    font-size: 16px;
    color: #d6cadd;
    position: absolute;
    top: 104px;
    left: 1px;
    font-weight: bold;
    line-height: 21px;
}

#address span {
    font-family: "Nunito", sans-serif;
    font-size: 18px;
    color: #dca8a6;
    font-weight: 900;
    line-height: 34px;
}

#address a {
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    color: #a8c0ee;
    line-height: 38px;
    text-decoration: underline;
}

#folowus {
    position: absolute;
    top: 61px;
    right: 0;
    color: white;
    font-family: "Nunito", sans-serif;
    font-weight: 900;
    font-size: 18px;
}

#folowusborder {
    background-color: #dda8a5;
    content: '\a0';
    height: 4px;
    line-height: 4px;
    font-size: 4px;
    width: 145px;
    position: absolute;
    right: 1px; /* TODO 0 olmali */
    top: 94px;
}

#youtube {
    position: absolute;
    right: 1px; /* TODO 0 olmali */
    top: 116px;
}

#twitter {
    position: absolute;
    right: 1px; /* TODO 0 olmali */
    top: 117px;
}

#instagram {
    position: absolute;
    right: 66px; /* TODO 0 olmali */
    top: 114px;
}

#facebook {
    position: absolute;
    right: 135px; /* TODO 0 olmali */
    top: 114px;
}

.promo {
    border-radius: 30px;
    margin: 0 auto;
    width: 1170px;
    height: 460px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15), 0 15px 20px 0 rgba(0, 0, 0, 0.4);
    position: relative;
}

.promo .online {
    position: absolute;
    left: 836px;
    top: 69px;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background: #1f1f1f;
    line-height: 43px;
    text-align: center;
    color: white;
    font-weight: 900;
    font-size: 16px;
    font-family: "Como", sans-serif;
}

.promo .online .count {
    color: #5dbe63;
}

.promo .title {
    background: url("/v3/resources/images/okey-oyna.png") no-repeat;
    position: absolute;
    left: 830px;
    top: 184px;
    font-family: "Como", sans-serif;
    font-size: 100px;
    font-weight: 900;
    color: #e0d1a2;
    text-indent: -9999px;
    width: 275px ;
    height: 85px;
}

.promo .play-now-btn {
    position: absolute;
    left: 832px;
    top: 338px;
    font-family: "Como", sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: white;
    width: 206px;
    height: 60px;
    line-height: 64px;
    text-align: center;
}

#box {
    border-radius: 40px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15), 0 15px 20px 0 rgba(0, 0, 0, 0.4);
    margin-top: 30px;
    background: url(/v3/resources/images/box-top.png) left top no-repeat, url(/v3/resources/images/box-bottom.png) left bottom no-repeat, url(/v3/resources/images/box-middle.png) left top no-repeat, #36323a;
    background-size: 100%, 100%, 100% 100%;
    padding: 35px 25px;
}

#games {
    display: flex;
    justify-content: space-between;
}

.spromo {
    border-radius: 30px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15), 0 15px 20px 0 rgba(0, 0, 0, 0.4);
    width: 270px;
    height: 300px;
    position: relative;
    vertical-align: text-bottom;
}

.spromo a {
    color: white;
}

.spromo.king {
    background: url("/v3/resources/images/promo-small-king.png");
}

.spromo.tavla {
    background: url("/v3/resources/images/promo-small-tavla.png");
}

.spromo.canak {
    background: url("/v3/resources/images/promo-small-canak.png");
}

.spromo.canak a {
    color: #93b895;
}

.spromo .playnow {
    position: absolute;
    bottom: 30px;
    width: 100%;
    height: 40px;
    font-family: "Como", sans-serif;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}

.spromo .online {
    background: #1f1f1f;
    border-radius: 15px;
    width: 160px;
    height: 30px;
    position: absolute;
    left: 55px;
    top: -15px;
    color: white;
    font-size: 14px;
    font-weight: 900;
    font-family: "Como", sans-serif;
    line-height: 33px;
    text-align: center;
}

.spromo .title {
    font-family: "Como", sans-serif;
    font-weight: 900;
    font-size: 40px;
    color: white;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 50px;
    top: 30px;
    line-height: 50px;
}

.spromo .count {
    color: #5dbe63;
}

#box h3 {
    color: #9a929e;
    display: flex;
    justify-content: center;
    text-align: center;
    clear: both;
    font-weight: 900;
    font-family: "Como", sans-serif;
    font-size: 40px;
    margin: 0;
}

#box h3:before, #box h3:after {
    background-color: #4a444e;
    content: '\a0';
    flex-grow: 1;
    height: 8px;
    position: relative;
    top: 17px;
}

#box h3:before {
    margin-right: 16px;
}

#box h3:after {
    margin-left: 12px;
}

#lists {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 0 15px;
}

h4 {
    color: #ede086;
    display: flex;
    text-align: left;
    clear: both;
    margin: 0 0 12px 1px;
    font-weight: 900;
    font-family: "Como", sans-serif;
    font-size: 17px;
    letter-spacing: 1px; /* TODO FONT ARTIK GUSTO DEĞİL HALA GEREKLİ Mi */
}

h4:after {
    background-color: #6d6472;
    content: '\a0';
    flex: 1;
    height: 2px;
    position: relative;
    top: 0.5em;
    margin-left: 24px;
}

#lists div {
    width: 238px;
}

#lists img {
    margin-right: 12px;
}

#lists li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #444047;
    height: 47px;
    font-family: "Proxima Nova",sans-serif;
    font-size: 14px;
    font-weight: bold;
}

#lists li:last-child {
    border: none;
}

#lists .nick {
    flex: 1;
    color: white;
    font-size: 14px;
}

#lists .points {
    color: #fff799;
    font-size: 14px;
}