@keyframes fadeIn {
from{opacity:0;transform:translateX(50px)}
to{opacity:1;transform:translateX(0)}
}
@keyframes fadeOut {
from{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(-50px)}
}
.step{opacity:0;visibility:hidden;position:absolute;width:100%;transition:none}
.step.active{animation:fadeIn .5s forwards;visibility:visible;position:relative}
.step.fade-out{animation:fadeOut .5s forwards;visibility:hidden}
.step{display:none}
.active{display:block}
button:disabled{opacity:.5;cursor:not-allowed}
.anketsayfa{display:flex;justify-content:center;flex-direction:column}
#step-intro{margin-top:20px}
.step{max-width:650px;margin:auto}
.anketbaslik{text-align:center;z-index:5}
.anketbaslik span{font-size:4rem;font-weight:700;color:#fff;line-height:20px;text-align:center;letter-spacing:3px;border-bottom:1px solid #fff;padding:0 0 8px;text-transform:uppercase}
.step p,.step label{font-family:'Arial',serif}
.step h3{font-family:'Arial',serif;color:#1d2b35;letter-spacing:1px;font-size:1.8rem;font-weight:700;text-align:center;margin-bottom:20px}
.step p{font-family:'Arial',serif;color:#1d2b35;letter-spacing:1px;font-size:1.5rem;text-align:justify}
.step .baslabuton .hemenal{float:right;letter-spacing:1px;line-height:1.2;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;font-weight:400;padding:.9rem 2rem 1.1rem;text-decoration:none;border:0;color:#fff;border-radius:7px;background-color:#ad9884;box-shadow:0 0 0 .1rem #ad9884;width:50%;height:45px;transition:.25s;-webkit-appearance:none;appearance:none;text-transform:uppercase;margin-top:20px}
.baslabuton,.sonucbuton{text-align:center}
.step h2{padding:0 0 8px;text-transform:uppercase;margin:30px 0;text-align:center;letter-spacing:1px;font-size:3rem;font-weight:700;color:#1d2b35}
.step .sonucbuton .hemenal{letter-spacing:1px;line-height:1.2;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;font-weight:400;padding:.9rem 2rem 1.1rem;text-decoration:none;border:0;color:#fff;border-radius:7px;background-color:#ad9884;box-shadow:0 0 0 .1rem #ad9884;width:50%;height:45px;transition:.25s;-webkit-appearance:none;appearance:none;text-transform:uppercase;margin-top:20px}
.step .baslabuton .hemenal:hover, .step .sonucbuton .hemenal:hover{background:#1d2b35;color:#fff}
.geributon .add-to-cart:hover{background:#1d2b35;color:#fff}
.geributon .add-to-cart{height:45px;float:left;text-decoration:none;text-transform:uppercase;letter-spacing:4px;background:#ad9883;color:#fff;border:0;padding:10px 25px 15px;border-radius:7px;margin-top:20px;font-size:16px;font-weight:400;letter-spacing:1px;line-height:1.2;cursor:pointer;display:inline-flex}
.geributon *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s ease;transition:all .4s ease}
#progress-container{position:relative;width:100%;height:8px;background-color:#eee;z-index:1;margin-bottom:20px}
#progress-bar{height:100%;width:0;background:linear-gradient(90deg,#ab9176,#b7936e);transition:width .8s ease}
.step label{display:flex;align-items:center;gap:12px;background-color:#f2e7dc;padding:16px 22px;border-radius:10px;margin-bottom:5px;cursor:pointer;font-size:1.5rem;border:1px solid #a88969;transition:all .25s ease;box-shadow:0 4px 12px #00000012;color:#1d2b35;font-weight:400;position:relative;padding-left:50px}
.step label::after{content:"";width:22px;height:22px;border:1px solid #a88969;border-radius:4px;position:absolute;left:20px;transition:all .3s ease}
.step label:hover{background-color:#fff;border-color:#fff;color:#1d2b35;font-weight:600}
.step input[type="radio"],.step input[type="checkbox"]{display:none}
.step input[type="checkbox"]:checked + label::after,.step input[type="radio"]:checked + label::after{content:"✔";background-color:#fff;color:#1d2b35!important;font-size:16px;text-align:center;line-height:22px;border-color:#1d2b35;font-weight:700;box-shadow:0 0 5px #1d2b354d}
.step input[type="radio"]:checked + label,.step input[type="checkbox"]:checked + label{background-color:#fff;border-color:#1d2b35;color:#1d2b35;font-weight:600}
.step{opacity:0;transition:opacity .4s ease;position:absolute;width:100%}
.step.active{opacity:1;position:relative}
.anketbg{background-position:center center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;position:relative;min-height:300px;background-image:url(anketbg.jpg);justify-content:center}
.background-overlay{background-color:#000;opacity:.4;transition:background 0.3s,border-radius 0.3s,opacity .3s;width:100%;position:absolute;z-index:2;height:300px}
@media screen and (max-width: 768px) {
.anketbaslik span{font-size:2.5rem}
.step label{font-size:1.2rem;padding:12px 16px;padding-left:40px}
.step label::after{left:12px}
}
.loading-wrapper{text-align:center;margin-top:40px}
.spinner{margin:0 auto 15px;border:6px solid #f3f3f3;border-top:6px solid #1d2b35;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}
.loading-text{font-size:1.4rem;color:#1d2b35;font-weight:500;font-family:'Arial',sans-serif;text-align:center!important}
@keyframes spin {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.step input[type="checkbox"]{transition:all .3s ease;color:#fff!important}
@media screen and (max-width: 500px) {
.step input[type="checkbox"]{transition:all .3s ease;color:#fff!important}
}
#step-5 h5{font-family:'Arial',sans-serif;font-size:14px;text-align:center;margin-bottom:20px;color:#1d2b34}
#step-5 h3{margin-bottom:2px!important}