html                            { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; }
::-webkit-scrollbar             { width: 6px; height: 2px; }
::-webkit-scrollbar-track       { background: #3c372f; }
::-webkit-scrollbar-thumb       { background: #eccf9c; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #eccf9c; }
body {
    background: #0b1219;
    margin: 0;
    padding: 0;
    color:#fff;
    font-optical-sizing: auto;
    font-size:14px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}
input::placeholder                      { color: #000; font-family: "Roboto", sans-serif; font-weight: 100; font-size:14px }
input::-webkit-input-placeholder        { color: #000; }
input:-moz-placeholder                  { color: #000; }
input:-ms-input-placeholder             { color: #000; }
input::-ms-input-placeholder            { color: #000; }
textarea::placeholder                   { color: #000; }
textarea::-webkit-input-placeholder     { color: #000; }
textarea:-moz-placeholder               { color: #000; }
textarea:-ms-input-placeholder          { color: #000; }
textarea::-ms-input-placeholder         { color: #000; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
div { box-sizing: border-box; transition: .3s all; -moz-transition: .3s all; -webkit-transition: .3s all }
span { box-sizing: border-box; transition: .3s all; -moz-transition: .3s all; -webkit-transition: .3s all }
a { text-decoration: none; transition: .3s all; -moz-transition: .3s all; -webkit-transition: .3s all }
p { margin: 0 0 5px 0; padding: 0; }
button { cursor: pointer; }
.container { width:960px; margin: 0 auto;}
.left { float: left;}
.right { float: right;}
.clear { clear: both; }
.width { width: 100%;}
.center         { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.font-weight-bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.font-weight-light { font-weight: lighter; }
.font-weight-lighter { font-weight: lighter; }
.font-40            { font-size: 40px; }
.font-30            { font-size: 30px; }
.font-28            { font-size: 28px; }
.font-22            { font-size: 22px; }
.font-16            { font-size: 16px; }
.font-14            { font-size: 14px; }
.font-12            { font-size: 12px; }
.text-color         {color:#EAB461;}
.text-color2        {color:#BF8C68;}
.text-color-opacity {color:rgb(234 180 97 / 35%);}
.pl-10 { padding-left: 10px; }
.error-message { color: red; font-size: 13px; margin:5px 0; font-family: "Roboto", sans-serif; font-weight: 100 }
.close-button { position: absolute; top: 10%; right: 10%; font-size: 40px; cursor: pointer; color:#eab461; }
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}
.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}
.cinzel-decorative-regular {
    font-family: "Cinzel Decorative", serif;
    font-weight: 400;
    font-style: normal;
}

.cinzel-decorative-bold {
    font-family: "Cinzel Decorative", serif;
    font-weight: 700;
    font-style: normal;
}

.cinzel-decorative-black {
    font-family: "Cinzel Decorative", serif;
    font-weight: 900;
    font-style: normal;
}

.m-auto { margin: 0 auto; }
.row                            { display: flex; flex-wrap: wrap; margin:0 -7.5px;}
.col-6                          { max-width: 50%; flex: 0 0 50%; padding:0 7.5px; position: relative}
.col-2                          { width: 20%; flex: 0 0 20%; padding:0 7.5px; position: relative}
.col-3                          { width: 25%; flex: 0 0 25%; padding:0 7.5px; position: relative; margin:0 0 15px 0; }
.col-4                          { width: 33.3%; flex: 0 0 33.3%; padding:0 7.5px; position: relative; margin:0 0 15px 0; }
.col-9                          { width: 75%; flex: 0 0 75%; padding:0 7.5px; position: relative; margin:0 0 15px 0; }
.col-10                         { width: 80%; flex: 0 0 80%; padding:0 7.5px; position: relative; margin:0 0 15px 0; }
.col-12                         { max-width: 100%; flex: 0 0 100%; padding:0 7.5px; position: relative}
.mt-100 { margin-top: 100px; }
.mt-80 { margin-top: 80px; }
.mt-70 { margin-top: 70px; }
.mt-60 { margin-top: 60px; }
.mt-40 { margin-top: 40px; }
.mt-30 { margin-top: 30px; }
.mt-20 { margin-top: 20px; }
.mt-50 { margin-top: 50px; }
.mt-5 { margin-top: 5px; }
.mr-5 { margin-right: 5px; }
.mb-10 { margin-bottom:10px; }
.mb-20 { margin-bottom:20px; }
.m-0 { margin: 5px 0; }

.m-auto { margin: 0 auto; }
hr              { clear:both; float:left; width: 100%; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(114,105,105,1) 50%, rgba(255,255,255,0) 80%); height:1px; overflow: hidden; border: 0px; margin:0 0 20px 0; }
header { float: left; width: 100%; height: 94px; background: #191D22; border-bottom:1px solid rgb(255 255 255 / 14%); }
header .social { border:1px solid rgb(255 160 84 / 25%); padding: 10px; margin:26px 0 0 0; }
header .social .box { width: 28px;  }
header .social .box a { display: block; color:#fff  }
header .social .box a:hover { color:#ddd  }
#slider { height:400px; background: url("../images/slider.png") top center no-repeat; border-bottom:1px solid rgb(255 255 255 / 14%); margin:0 0 20px 0; }
#slider .bg_slider { background: url("../images/slider_cark.png") top center no-repeat; height:382px; width:387px; }
#slider .cark_button { background: url("../images/button_cark.png") right center no-repeat; height:84px; width: 387px; background-size:contain; position: relative; overflow: hidden; }
#slider button { cursor:pointer; margin:10px 0 0 0; text-align: left; padding:0 0 0 20px; color:#FFF; font-size:18px; width:363px; height:68px; background: url("../images/button.png") no-repeat; border:0; box-sizing: border-box;  }
#slider button .fas { display: inline-block; transition: transform 0.2s; }
#slider button:hover .fas { transform: rotate(360deg); transition: transform 0.6s ease-in-out; }
.line { background:url("../images/line.png") center right no-repeat; padding-right:135px; }
.features { border-bottom:1px solid rgb(255 255 255 / 14%); padding:20px 0; }
.features:first-child {border-top:1px solid rgb(255 255 255 / 14%);  }
.features { color:#9B9B9A; cursor: pointer }
.features:hover { color:#fff;  border-bottom-color:rgb(255 255 255 / 45%)}
.background_cark { background:url("../images/background_cark.png") top center no-repeat; height:1382px; }
.hexagon {
    position: relative;
    display: inline-block;
    margin: 1px 18px;
    background-color: hsl(0, 0%, 18%);
    text-align: center;
}
.hexagon, .hexagon::before, .hexagon::after {
    width: 16.75px;
    height: 29px;
    border-radius: 20%/5%;
    z-index:1
}
.hexagon::before {
    background-color: inherit;
    content: "";
    position: absolute;
    left: 0;
    transform: rotate(-60deg);
}
.hexagon::after {
    background-color: inherit;
    content: "";
    position: absolute;
    left: 0;
    transform: rotate(60deg);
}
.hexagon:nth-child(even) {
    /* top approx. 50% of .hexagon height + spacing */
    top: 59px;
}

.features:hover .hexagon {
    background-color: #ffa054;
    cursor: pointer;
    z-index: 105;
    color:#FFF;
}



.hexanone {
    position: relative;
    display: inline-block;
    width: 67px;
    height: 116px;
    margin: 1px 18px;
}
.hexanone:nth-child(even) {
    top: 59px;
}
.hexagontent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    font-size: 20px;
    line-height: 1.2;
    z-index: 100;
}
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}






.wheel-container {
    position: relative;
    width: 763px;
    height: 763px;
    margin:240px auto 0 auto;
}

.wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('../images/cark-.png') no-repeat center center / cover; /* Çark resmi arkaplan olarak ayarlandı */
    transform: rotate(0deg);
    transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
}

.slice {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon {
    width: 120px; /* İkon boyutu */
    height: 120px;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: rotate(-22.5deg) translate(-15%, -75%);
    z-index: 1;
}
.icon img {
    width: 100%;
    height: 100%;
}
.slice1 { transform: rotate(22.5deg); }
.slice2 { transform: rotate(67.5deg); }
.slice3 { transform: rotate(112.5deg); }
.slice4 { transform: rotate(157.5deg); }
.slice5 { transform: rotate(202.5deg); }
.slice6 { transform: rotate(247.5deg); }
.slice7 { transform: rotate(292.5deg); }
.slice8 { transform: rotate(337.5deg); }


.spin-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 281px;
    height: 281px;
    border:0;
    outline: none;
    background: url('../images/button2.png') no-repeat center center / cover;
}
.slice.winning {
}
#arrow { background: url("../images/arrow.png") top center no-repeat; width:217px; height:228px; margin:0 auto; position: absolute; top:-120px; left:270px; }

.popup-content{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;width:600px; z-index: 1;
    padding: 30px; /* Adjust the padding to the thickness of your border */
    /* background: url("../images/popup_bg.png"); Gradient Background */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.popup-content::before, .popup-content::after{ filter: blur(20px); z-index: -1}
.close-btn{cursor:pointer;float:right;font-size:24px;position:absolute;top:15px; right:10px}
.popup-content .popup-container{ width:100%; }
#question{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:url("../images/popup_bg.png");animation:fadeIn .5s; z-index:99 !important; backdrop-filter: blur(10px);     -webkit-backdrop-filter: blur(10px);}
#question #game1 { display: table;
    text-align: center;
    justify-content: center;
    justify-items: center;
}
#question #register { display: table;
    text-align: center;
    justify-content: center;
    justify-items: center;
}
#question #register input                   { clear: both; font-family: "Roboto", sans-serif; font-weight: 100; font-size:14px; border-radius: 4px; box-shadow: inset 0 0 5px #d9a300}
#question #register input[type=checkbox]    { border-radius: 4px; box-shadow: inset 0 0 0 #000; float:left; }
#question #register input[type=text]        { box-sizing: border-box; padding:12px 10px; border:0; font-size:16px; outline:none; resize: none; width:300px; color:#FFF; background: rgb(234 180 97 / 50%); }
#question #register input[type=tel]         { box-sizing: border-box; padding:12px 10px; border:0; font-size:16px; outline:none; resize: none; width:300px; color:#FFF; background: rgb(234 180 97 / 50%); }
#question #register input[type=email]       { box-sizing: border-box; padding:12px 10px; border:0; font-size:16px; outline:none; resize: none; width:300px; color:#FFF; background: rgb(234 180 97 / 50%); }
#question #register input[type=password]    { box-sizing: border-box; padding:12px 10px; border:0; font-size:16px; outline:none; resize: none; width:300px; color:#FFF; background: rgb(234 180 97 / 50%); }
#question #register input[type=number]      { box-sizing: border-box; padding:12px 10px; border:0; font-size:16px; outline:none; resize: none; width:300px; color:#FFF; background: rgb(234 180 97 / 50%); }
#question #register button                  { cursor:pointer; margin:5px 0 0 0; text-align: center; padding:0; color:#FFF; font-size:18px; width:300px; height:44px; font-family:'Roboto',sans-serif; border-radius: 4px; background: url("../images/bg_register_button.png") no-repeat left center; border:0; box-sizing: border-box;}
#question #register p { margin:0 auto 20px auto; line-height:150%; font-family: "Roboto", sans-serif; font-weight: 100; font-size:13px; color:#fff; width:340px; }
#question #register label {  float:left; width:278px; text-align:left; line-height:150%; font-family: "Roboto", sans-serif; font-weight: 100; font-size:13px; color:#fff; }
#question #register label a { color:#eab461; font-weight: 400; }
.box {
    position: relative;
}

.box::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.box:last-child::after {
    display: none;
}
#tooltip {
    position: fixed;
    top: 100px;
    left: 80%;
    transform: translateX(-80%);
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    border-radius: 6px;
    padding: 20px;
    z-index: 100;
    display: none; /* Başlangıçta gizli */
    width: 200px;
    min-height: 200px;
}
#tooltip img {
    display: block;
    margin: 0 auto 10px;
}
.tooltip-content {display:none;}
.sss { cursor:pointer; border:1px solid rgb(255 255 255 / 20%); border-radius: 2px; padding:15px 10px; width: 100%;}
.sss:hover { }
.sss p { margin:0;}
.answer { overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; }
.expanded { max-height: 200px; transition: max-height 0.4s ease-in; margin-top:10px; font-size:14px; color:#fff }

button.register { cursor:pointer; margin:10px 0 0 0; text-align: center; padding:0; color:#FFF; font-size:18px; width:300px; height:50px; background: url("../images/bg_register_button.png") no-repeat left center; border:0; box-sizing: border-box;  }

#tooltip-description { line-height: 150%; }
footer { width: 100%; float: left; height:350px; background: url("../images/footer_bg.png") top center no-repeat; border-top:1px solid rgb(255 255 255 / 14%); padding:100px 0; margin-top:60px; box-sizing: border-box }
footer ul { width: 100%; list-style: none; padding: 0; margin: 0; }
footer ul li { float:left; }
footer ul li a { display: block; cursor:pointer; padding:5px 20px; color:#BF8C68; font-size:18px;  }


@media only screen and (max-width:959px){
    input::placeholder                      { color: #000; font-family: "Roboto", sans-serif; font-weight: 300; font-size:14px }
    input::-webkit-input-placeholder        { color: #000; }
    input:-moz-placeholder                  { color: #000; }
    input:-ms-input-placeholder             { color: #000; }
    input::-ms-input-placeholder            { color: #000; }
    textarea::placeholder                   { color: #000; }
    textarea::-webkit-input-placeholder     { color: #000; }
    textarea:-moz-placeholder               { color: #000; }
    textarea:-ms-input-placeholder          { color: #000; }
    textarea::-ms-input-placeholder         { color: #000; }
/*
    .container { width:98%; margin: 0 1%;}
    .col-3 { max-width:100%; width: 100%; flex: 0 0 100%; padding:0 7.5px; position: relative}
    .col-4 { max-width:100%; width: 100%; flex: 0 0 100%; padding:0 7.5px; position: relative}
    .col-6 { max-width:100%; width: 100%; flex: 0 0 100%; padding:0 7.5px; position: relative}
    .col-9 { max-width:100%; width: 100%; flex: 0 0 100%; padding:0 7.5px; position: relative}
    .col-10 { max-width:100%; width: 100%; flex: 0 0 100%; padding:0 7.5px; position: relative}
    .col-12 { max-width:100%; width: 100%; flex: 0 0 100%; padding:0 7.5px; position: relative}
    .wheel-container { width: 100%; margin-top:200px; overflow:hidden; }
    .wheel { border-radius: 0px;}
    #arrow { left:25%; }
    .icon { left: 60%; width: 60px; height: 60px; }
    .box::after { background: transparent; width: 0;}
    .sss { padding:15px 10px !important; }
    .features { padding: 20px 0 !important;}
    footer ul { margin: 0; padding: 0;}
    */
}