/*
 Theme Name: Otomile Degerleme
 Theme URI: https://otomile.com
 Description: Otomile için özel hazırlanmış değerleme teması
 Author: Selim & ChatGPT
 Version: 1.0
*/
/* FORM GENEL KUTU TASARIMI */
.multistep_form_style_three {
    max-width: 650px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    padding: 25px 35px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}

/* ÜSTTEKİ ADIM ÇUBUĞU (1 - 2 - 3) */
.msf-step {
    background: #e6e6e6 !important;
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 18px !important;
}

.msf-step.active {
    background: #333 !important;
    color: #fff !important;
}

/* ADIM BAŞLIKLARI */
.multistep_form_style_three h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    color: #222 !important;
}

/* İLERİ / GERİ BUTONLARI */
.msf-navigation button {
    background: #333 !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

.msf-navigation button:hover {
    background: #000 !important;
}

/* FORM INPUTLARI */
.multistep_form_style_three input,
.multistep_form_style_three select {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
}
/* FORM GENEL KUTU TASARIMI */
.wpmultistep_form.multistep_form_style_three {
    max-width: 650px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    padding: 35px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}

/* ADIM NUMARALARI (1-2-3 BUBBLE) */
.wpmultistep_form .msf-step {
    background: #e6e6e6 !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
}

/* AKTİF ADIM */
.wpmultistep_form .msf-step.active {
    background: #333 !important;
    color: #fff !important;
}

/* FORM BAŞLIKLARI */
.wpmultistep_form h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    color: #222 !important;
}

/* FORM INPUTLARI */
.wpmultistep_form input,
.wpmultistep_form select {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
}

/* BUTONLAR */
.wpmultistep_form .msf-navigation button {
    background: #333 !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

.wpmultistep_form .msf-navigation button:hover {
    background: #000 !important;
}
/**********************************************
 BMW / AUDI STYLE – PREMIUM STEP BAR (FINAL)
**********************************************/

/* FORM KUTUSU */
#multi-step-form.fw-wizard {
    max-width: 900px !important;
    margin: 50px auto !important;
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.12) !important;
    border: 1px solid #e5e7eb !important;
}

/* ORİJİNAL ÇİZGİ VE SEMBOLLERE TAM SIFIRLAMA */
.fw-progress-step:before,
.fw-progress-step:after,
.fw-progress-bar .fw-progress-bar-bar {
    content: none !important;
    display: none !important;
}

/* YENİ BMW TARZI STEP BAR */
.fw-progress-bar {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    padding-bottom: 40px !important;
    margin-bottom: 30px !important;
}

/* ALTTAN UZUNG ÇİZGİ */
.fw-progress-bar::before {
    content: "" !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: #d1d5db !important; /* metalik gri */
    border-radius: 10px !important;
}

/* ADIM (1-2-3) BLOKLARI */
.fw-progress-step {
    flex: 1 !important;
    text-align: center !important;
    position: relative !important;
}

/* DAİRE */
.fw-progress-step .circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #d1d5db !important;
    color: #1f2937 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 8px auto !important;
    position: relative !important;
    z-index: 5 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* ADIM NUMARALARI */
.fw-progress-step:nth-child(1) .circle::before { content: "1"; }
.fw-progress-step:nth-child(2) .circle::before { content: "2"; }
.fw-progress-step:nth-child(3) .circle::before { content: "3"; }

/* AKTİF ADIM */
.fw-progress-step.fw-active .circle {
    background: #1d3557 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

/* YAZILAR */
.fw-progress-step .fw-txt-ellipsis {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    display: block !important;
    margin-top: 4px !important;
}

/* AKTİF YAZI */
.fw-progress-step.fw-active .fw-txt-ellipsis {
    color: #1d3557 !important;
}