@import url('https://fonts.cdnfonts.com/css/futura-std-4');
*{
    box-sizing: border-box;
}
:root{
    --main_color:#797d30;
    --wp:#00E676;
    --face:#3b5a9a !important;
    --google:#dd4b39 !important;
    --gray:#f7f7f7 !important;
}
body{
	background-color: var(--main_color);
	padding: 15px;
    font-family: 'Futura Std', sans-serif;
}
.test {
    max-width: 800px;
	width: 100%;
    margin: auto;
    background-color: #fff;
    border-radius: 0px;
    padding: 30px;
    margin-top: 15px;
}
.baslik .logo{
    height: 100%;
    max-width: 350px;
    position: relative;
}
.baslik .logo img{
    max-width: 100%;
    object-fit: contain;
}
.baslik {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: solid thin #efefef;
}
.baslik .logo_2{
	max-height:70px;
}
.baslik .logo_2 img{
	max-height:100%;
	height: 70px
}
.ana_gorsel{
	max-width: 100%;
	text-align: center;
	margin-bottom: 30px;
}
.ana_gorsel img{
	width: 100%;
	max-width: 400px;
}
.icerik{
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}
.pulse {
    box-shadow: 0 0 0 0 rgb(202, 8, 8);
    transform: scale(1);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(202, 8, 8, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(202, 8, 8, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(202, 8, 8, 0);
    }
}
.start-test-buttons{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 30px;
    margin-top: 30px;
}
.teste_basla {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 100%;
    color: #fff;
    background-color: var(--main_color);
    font-weight: bold;
    line-height: 21px;
    text-align: center;
    font-size: 20px;
    margin: auto;
	cursor: pointer;
}

.sorular{
	margin-bottom: 20px;
}
.soru {
    font-size: 27px;
    text-align: left;
    width: 100%;
    background-color: var(--main_color);
    font-weight: bold;
    margin-bottom: 30px;
    color: #fff;
    padding: 15px;
}
ul.cevaplar{
	padding: 0px;
	margin: 0px;
}
ul.cevaplar li {
    border: solid thin #929291;
    border-radius: 0px;
    padding: 10px;
    margin-bottom: 10px;
    list-style-type: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-weight: bold;
    font-size: 16px;
	position: relative;
    padding-left: 40px;
    color: #5f5e5e;
}
ul.cevaplar li .sayi {
    width: 30px;
    height: 24px;
    border-radius: 0px;
    text-align: center;
    background-color: #929291;
    color: #fff;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul.cevaplar li:hover, ul.cevaplar li.secili {
    background-color: #929291;
	color: #fff;
}
ul.cevaplar li:hover .sayi, ul.cevaplar li.secili .sayi{
	
	background-color: #5f5e5e;
}
ul.cevaplar li i{
	position: absolute;
	right: 15px;
	display: none;
    font-size: 24px;
}
ul.cevaplar li:hover i, ul.cevaplar li.secili i{
	display: block;
}
.ileri_geri{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
}
.ileri_geri a{
	max-width: 160px;
	display: flex;
	align-items: center;
	justify-content: space-between;
    background-color: #5f5e5e;
    color: #fff;
    padding: 10px;
    text-decoration: none;
    
}
.ileri_geri a i{
    margin-right: 0px;
    margin-left: 15px;
}
.ileri_geri a:first-child i{
    margin-right: 15px;
    margin-left: 0px;
}
.ilerleme {
    margin-top: 30px;
    font-size: 14px;
    font-weight: bold;
}
.sonuc{
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	
}
.sonuc p{
	color: #ca0808;
}
.sonuc .deger{
	margin: auto;
	padding: 15px;
	border: dashed 2px #ca0808;
	color: #fff;
	background-color: #ca0808;
	border-radius: 6px;
	font-size: 32px;
    max-width: 300px;
}
.sonuc .sonuc_yazi{
	text-align: center;
	margin-top: 30px;
}
.oneri_turlar h1{
	text-align: center;
	width: 100%;
	font-weight: bold;
}
.tebrikler {
    text-align: center;
    font-size: 25px;
    color: #797d30;
    font-weight: 600;
}
.form-group{
    margin-bottom: 20px;
}
.form-group input, select{
    height: 40px;
    border-radius: 0px;
    font-size: 16px;
    padding: 10px;
    color: #5f5e5e;
    border-color: #5f5e5e;
}
.form-group label {
    color: #5f5e5e;
    margin-bottom: 5px;
}
#send_test {
    max-width: 100%;
    display: flex
;
    align-items: center;
    justify-content: center;
    background-color: #5f5e5e;
    color: #fff;
    padding: 10px;
    text-decoration: none;
    text-align: center;
}
.sonuc_baslik {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 15px;
}
.sonuc_baslik:first-child{
    margin-bottom: 100px;
}
.sonuc_baslik span{
    display: block;
}
.sonuc_baslik hr {
    max-width: 160px;
    margin: 10px auto;
    border: solid 1px;
}
.sonuc_baslik .light{
    font-weight: 400;
}
.salinim_degeri {
    font-size: 100px;
    font-weight: 400;
    width: 100%;
    text-align: center;
    color: #797d30;
    border-bottom: solid thin #efefef;
    padding: 30px;
}
.salinim_degeri span{
    font-size: 30px;
    display: block;
}
/* Dynamic question loading support */
.sorular .question {
    display: block;
}

.sorular .question:not(:first-child):not(:nth-child(2)) {
    display: none;
}

/* When questions are loaded dynamically, show only the current ones */
.sorular .soru.question,
.sorular .cevaplar.question {
    display: block;
}

/* Loading state styling */
.loading-question {
    text-align: center;
    padding: 40px;
    color: var(--main_color);
    font-weight: bold;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--main_color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@media screen and (max-width: 1000px) {
  .sonuc_baslik{
    font-size: 18px;
  }
  .sonuc_baslik:first-child{
    margin-bottom: 15px;
  }
  .salinim_degeri{
    font-size: 40px;
    padding: 15px;
  }
}