#arthroWizard,
#arthroWizard * {
    box-sizing: border-box;
}

#arthroWizard {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    color: #1c1c1c;
}


/* PROGRESS */

#arthroWizard .arthro-progress {
    margin-bottom: 30px;
    font-size: 14px;
    color: #777777;
}


/* STEPS */

#arthroWizard .arthro-step {
    display: none;
}



/* HEADINGS */

#arthroWizard h2 {
    margin: 0 0 0px;
    font-size: 26px;
    line-height: 1.35;
}

#arthroWizard h3 {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.4;
}


/* YES / NO */

#arthroWizard .arthro-options {
    display: flex;
    gap: 15px;
}

#arthroWizard .arthro-option {
    flex: 1;
    cursor: pointer;
}

#arthroWizard .arthro-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#arthroWizard .arthro-option span {
    display: block;
    padding: 16px 20px;
    border: 2px solid #dedede;
    border-radius: 10px;
    text-align: center;
    transition: 0.2s ease;
}

#arthroWizard .arthro-option:hover span {
    border-color: #999999;
}

#arthroWizard .arthro-option input:checked + span {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}


/* UPLOAD GRID */

#arthroWizard .arthro-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

#arthroWizard .arthro-upload-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* UPLOAD BOX */

#arthroWizard .arthro-upload-box {
    display: flex;
    flex: 1;
    min-height: 165px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 25px 18px;

    border: 2px dashed #bbbbbb;
    border-radius: 12px;

    text-align: center;
    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

#arthroWizard .arthro-upload-box:hover {
    border-color: #111111;
    background: #fafafa;
}

#arthroWizard .arthro-upload-box input {
    display: none;
}

#arthroWizard .arthro-upload-box strong {
    font-size: 15px;
}

#arthroWizard .arthro-upload-box span {
    font-size: 13px;
    color: #777777;
}


/* FILE NAME */

#arthroWizard .arthro-file-name {
    min-height: 20px;
    margin-top: 10px;

    font-size: 13px;
    line-height: 1.4;

    color: #555555;

    word-break: break-word;
}


/* CONSENT */

#arthroWizard .arthro-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 30px;
    padding: 18px;

    background: #F4FBFD;
    border-radius: 10px;
    border:1px solid #D8E8FA;
    cursor: pointer;
}

#arthroWizard .arthro-consent input {
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    margin-top: 2px;
}

#arthroWizard .arthro-consent span {
    font-size: 13px;
    line-height: 1.55;
}



#arthroWizard .arthro-navigation-right {
    justify-content: flex-end;
}


/* BUTTONS */

#arthroWizard button {
    min-width: 130px;

    padding: 13px 22px;

    border: 0;
    border-radius: 8px;

    background: #111111;
    color: #ffffff;

    font-size: 15px;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#arthroWizard button:hover:not(:disabled) {
    opacity: 0.85;
}

#arthroWizard button:active:not(:disabled) {
    transform: translateY(1px);
}

#arthroWizard button.arthro-secondary {
    background: #e8e8e8;
    color: #111111;
}

#arthroWizard button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ERROR */

#arthroWizard .arthro-error {
    display: none;

    margin-top: 20px;
    padding: 12px 14px;

    border-radius: 8px;

    background: #fff0f0;
    color: #a30000;

    font-size: 14px;
}


/* TABLET */

@media (max-width: 850px) {

    #arthroWizard .arthro-upload-grid {
        grid-template-columns: 1fr;
    }

    #arthroWizard .arthro-upload-box {
        min-height: 130px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    #arthroWizard {
        margin: 20px auto;
        padding: 25px 20px;
    }

    #arthroWizard h2 {
        font-size: 22px;
    }

    #arthroWizard .arthro-options {
        flex-direction: column;
    }

    #arthroWizard .arthro-navigation {
        flex-direction: column-reverse;
    }

    #arthroWizard button {
        width: 100%;
    }

}


/* ==================================================
   SECURE REPORT PAGES
================================================== */

body.arthro-secure-page {
    margin: 0 !important;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background: #f5f5f5;

    font-family: "Poppins", Arial, sans-serif !important;

    color: #1c1c1c;
}


/* READY REPORT */

.arthro-report-card {
    width: 100%;
    max-width: 900px;

    padding: 45px 40px;

    background: #ffffff;

    border: 1px solid #eeeeee;
    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.07);
}


.arthro-report-card h1 {
    margin: 0 0 15px;

    font-family: "Poppins", Arial, sans-serif;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;

    color: #1c1c1c;
}


.arthro-report-card > p {
    margin: 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;

    color: #666666;
}


/* SECURITY NOTE */

.arthro-security-note {
    margin-top: 25px;

    padding: 20px;

    background: #f5f5f5;

    border-radius: 10px;

    font-size: 13px;
    line-height: 1.7;

    color: #555555;
}


/* OPEN BUTTON */

.arthro-open-button {
    display: block;

    width: 100%;

    margin-top: 30px;

    padding: 15px 22px;

    border: 0;
    border-radius: 8px;

    background: #111111;
    color: #ffffff;

    font-family: "Poppins", Arial, sans-serif;

    font-size: 15px;
    font-weight: 500;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.arthro-open-button:hover {
    opacity: 0.85;
}


.arthro-open-button:active {
    transform: translateY(1px);
}


/* ==================================================
   ALREADY OPENED
================================================== */

.arthro-message-card {
    width: 100%;
    max-width: 620px;

    padding: 45px 40px;

    /* SADECE KART HAF力F KIRMIZI */
    background: #fff7f7;

    border: 1px solid #f2dada;
    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.06);

    text-align: center;
}


.arthro-message-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 22px;

    background: #fde7e7;

    color: #a12626;

    border-radius: 50%;

    font-family: "Poppins", Arial, sans-serif;

    font-size: 25px;
    font-weight: 600;
}


.arthro-message-card h1 {
    margin: 0 0 15px;

    font-family: "Poppins", Arial, sans-serif;

    font-size: 27px;
    font-weight: 600;
    line-height: 1.3;

    color: #1c1c1c;
}


.arthro-message-card p {
    margin: 0;

    font-family: "Poppins", Arial, sans-serif;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;

    color: #666666;
}


/* MOBILE */

@media (max-width: 600px) {

    body.arthro-secure-page {
        padding: 20px;
    }

    .arthro-report-card,
    .arthro-message-card {
        padding: 30px 22px;
    }

    .arthro-report-card h1,
    .arthro-message-card h1 {
        font-size: 23px;
    }
}

.arthro-open-button,
.arthro-open-button:link,
.arthro-open-button:visited {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 14px 28px !important;

    background: #1c1c1c !important;
    color: #ffffff !important;

    border: 2px solid #1c1c1c !important;
    border-radius: 8px !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;
    box-shadow: none !important;

    cursor: pointer;
    transition: all 0.2s ease;
}

.arthro-open-button:hover,
.arthro-open-button:focus,
.arthro-open-button:active {
    background: #333333 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    text-decoration: none !important;
}


/* FORM FULL WIDTH */

#arthroOpenReportForm {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}


.arthro-contact-button,
.arthro-contact-button:link,
.arthro-contact-button:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 28px !important;
    padding: 14px 30px !important;

    background: #fff;
    color: #1c1c1c;

    border: 1px solid #d9d9d9;
    border-radius: 50px;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.arthro-contact-button:hover,
.arthro-contact-button:focus {
    background: #f5f5f5;
    color: #1c1c1c;
    border-color: #c8c8c8;
    text-decoration: none;
}

/* ==================================================
   MEDICAL ASSESSMENT CTA
================================================== */

.arthro-medical-cta {
    margin-top: 36px;
    padding: 36px 0 0;
    background: transparent;
    border-top: none!important;
    font-family: "Poppins", Arial, sans-serif;
}

.arthro-medical-cta h2 {
    max-width: 700px;

    margin: 0 0 12px !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    color: #1c1c1c !important;
}

.arthro-medical-cta p {
    max-width: 780px;

    margin: 0 0 25px !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;

    color: #666666 !important;
}

.arthro-medical-actions {
    display: flex;
    gap: 12px;

    width: 100%;
}

.arthro-medical-actions button {
    min-height: 54px;

    padding: 14px 24px !important;

    border-radius: 8px !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    cursor: pointer;

    transition: all 0.2s ease;
}

.arthro-medical-yes {
    flex: 2;

    background: #1c1c1c !important;
    color: #ffffff !important;

    border: 2px solid #1c1c1c !important;
}

.arthro-medical-yes:hover {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.arthro-medical-no {
    flex: 1;

    background: #ffffff !important;
    color: #1c1c1c !important;

    border: 2px solid #dddddd !important;
}

.arthro-medical-no:hover {
    background: #f5f5f5 !important;
    border-color: #cccccc !important;
    color: #1c1c1c !important;
}

@media (max-width: 600px) {

    .arthro-medical-cta {
        margin-top: 28px;
        padding-top: 28px;
    }

    .arthro-medical-cta h2 {
        font-size: 21px !important;
    }

    .arthro-medical-actions {
        flex-direction: column;
    }

    .arthro-medical-yes,
    .arthro-medical-no {
        flex: none;
        width: 100%;
    }
}



/* ==================================================
   REPORT OPENED / SUCCESS
================================================== */

.arthro-open-button.arthro-open-button-success,
.arthro-open-button.arthro-open-button-success:link,
.arthro-open-button.arthro-open-button-success:visited,
.arthro-open-button.arthro-open-button-success:hover,
.arthro-open-button.arthro-open-button-success:focus,
.arthro-open-button.arthro-open-button-success:active {
    display: flex !important;

    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;

    background: #1f8f4e !important;
    color: #ffffff !important;

    border-color: #1f8f4e !important;

    cursor: default !important;
    pointer-events: none !important;

    opacity: 1 !important;
    box-shadow: none !important;
}


.arthro-medical-actions button:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.35);
}

.arthro-medical-actions button:disabled:hover {
    transform: none !important;
}



/* ==================================================
   DECLINED SCREEN
================================================== */

.arthro-decline-card {
    width: 100%;
    max-width: 820px;

    padding: 48px 45px;

    background: #ffffff;

    border: 1px solid #eeeeee;
    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.07);

    text-align: center;

    font-family: "Poppins", Arial, sans-serif;
}


.arthro-decline-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 0 auto 22px;

    background: #eaf7ee;
    color: #1f8f4e;

    border-radius: 50%;
}

.arthro-decline-icon svg {
    width: 30px;
    height: 30px;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arthro-decline-icon svg circle,
.arthro-decline-icon svg path {
    fill: none !important;
    stroke: currentColor !important;
}


.arthro-decline-card h1 {
    margin: 0 0 15px;

    font-family: "Poppins", Arial, sans-serif;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;

    color: #1c1c1c;
}


.arthro-decline-card > p {
    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #666666;
}


.arthro-decline-info {
    margin-top: 25px;

    padding: 18px 20px;

    background: #f5f5f5;

    border-radius: 10px;

    font-size: 14px;
    line-height: 1.7;

    color: #555555;
}


.arthro-decline-contact-text {
    margin-top: 25px !important;
}


.arthro-decline-actions {
    display: flex;
    gap: 12px;

    width: 100%;

    margin-top: 30px;
}


.arthro-decline-primary,
.arthro-decline-secondary {
    display: flex !important;

    flex: 1;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 14px 24px !important;

    border-radius: 8px !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
}


.arthro-decline-primary {
    background: #1F2F3E !important;
    color: #ffffff !important;

    border: 2px solid #1F2F3E !important;
}


.arthro-decline-primary:hover {
    background: #ffffff !important;
    color: #1F2F3E !important;
}


.arthro-decline-secondary {
    background: #ffffff !important;
    color: #1c1c1c !important;

    border: 2px solid #dddddd !important;
}


.arthro-decline-secondary:hover {
    background: #f5f5f5 !important;
    color: #1c1c1c !important;
}


.arthro-decline-form {
    flex: 1;
}


.arthro-decline-form .arthro-medical-no {
    width: 100% !important;
}


@media (max-width: 600px) {

    .arthro-decline-card {
        padding: 32px 22px;
    }

    .arthro-decline-card h1 {
        font-size: 24px;
    }

    .arthro-decline-actions {
        flex-direction: column;
    }

}


/* ==================================================
   PATIENT DATA FORM
================================================== */

.arthro-patient-form {
    width: 100%;
    box-sizing: border-box;

    margin-top: 36px;
    padding-top: 36px;

    border-top: 1px solid #e5e5e5;

    font-family: "Poppins", Arial, sans-serif;
}

.arthro-patient-form h2 {
    margin: 0 0 12px !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    color: #1c1c1c !important;
}

.arthro-patient-form > p {
    margin: 0 0 28px !important;

    font-size: 15px !important;
    line-height: 1.7 !important;

    color: #666666 !important;
}


/* FIELDS */

.arthro-patient-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.arthro-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arthro-field-full {
    grid-column: 1 / -1;
}

.arthro-field label {
    font-size: 13px;
    font-weight: 500;
    color: #333333;
}

.arthro-field input {
    width: 100%;
    min-height: 52px;

    padding: 12px 14px;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 12px;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 15px;
    color: #1c1c1c;

    box-sizing: border-box;
}

.arthro-field input:focus {
    outline: none;
    border-color: #1c1c1c;
}


/* CONSENT */

.arthro-patient-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 26px;

    font-size: 13px;
    line-height: 1.6;
    color: #555555;

    cursor: pointer;
}

.arthro-patient-consent input {
    flex: 0 0 auto;
    margin-top: 4px;
}


/* SUBMIT */

.arthro-patient-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height: 56px;
    margin-top: 28px;

    padding: 14px 24px !important;

    background: #1c1c1c !important;
    color: #ffffff !important;

    border: 2px solid #1c1c1c !important;
    border-radius: 8px !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    cursor: pointer;
}

.arthro-patient-submit:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .arthro-patient-grid {
        grid-template-columns: 1fr;
    }

    .arthro-field-full {
        grid-column: auto;
    }

}


.arthro-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 0 auto 22px;

    background: #eaf7ee;
    color: #1f8f4e;

    border-radius: 50%;
}

.arthro-success-icon svg {
    width: 30px;
    height: 30px;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arthro-success-icon svg circle,
.arthro-success-icon svg path {
    fill: none !important;
    stroke: currentColor !important;
}

.arthro-patient-success {
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
}

.arthro-patient-success h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.arthro-patient-success p {
    max-width: 700px;
    margin: 0 auto 28px !important;
    text-align: center !important;
}

.arthro-success-button,
.arthro-success-button:link,
.arthro-success-button:visited {
    min-width: 280px !important;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    padding: 14px 30px;

    background: #1c1c1c !important;
    color: #ffffff !important;

    border: 2px solid #1c1c1c;
    border-radius: 50px;

    text-decoration: none !important;
}

.arthro-report-card.arthro-report-card-success {
    max-width: 750px !important;
    padding: 55px 60px !important;
}

@media (max-width: 600px) {

    .arthro-report-card.arthro-report-card-success {
        width: calc(100% - 30px) !important;
        padding: 35px 20px !important;
    }
    
    
    .arthro-success-button {
        width: 100% !important;
        min-width: 0 !important;
    
    }
}


.arthro-success-button:hover,
.arthro-success-button:focus {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}


.arthro-success-button {
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease !important;
}

/* ==================================================
   PAIN SLIDER
================================================== */

.arthro-range-wrapper {
    width: 100%;
    margin-top: 20px;
}


/* 0 – 10 */

.arthro-range-numbers {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 500;
    color: #777;
}

.arthro-range-numbers span {
    width: 20px;
    text-align: center;
}


/* SLIDER */

.arthro-range-wrapper input[type="range"] {
    width: 100% !important;
    max-width: none !important;

    height: 7px;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    background:
        linear-gradient(
            to right,
            #8ec5ff 0%,
            #8ec5ff var(--pain-progress, 0%),
            #e8edf2 var(--pain-progress, 0%),
            #e8edf2 100%
        );

    border-radius: 100px;
    outline: none;

    cursor: pointer;
}


/* Slider button */

.arthro-range-wrapper input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 22px;
    height: 22px;

    background: #ffffff;

    border: 3px solid #8ec5ff;
    border-radius: 50%;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.15);

    cursor: pointer;
}

.arthro-range-wrapper input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;

    background: #ffffff;

    border: 3px solid #8ec5ff;
    border-radius: 50%;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.15);

    cursor: pointer;
}


/* Bottom labels */

.arthro-range-labels {
    display: flex;
    justify-content: space-between;

    width: 100%;
    margin-top: 8px;

    font-size: 12px;
    color: #888;
}

.arthro-range-labels span:last-child {
    text-align: right;
}



/* ==================================================
   EQUAL HEIGHT – QUESTIONS 1–10 ONLY
================================================== */

#arthroWizard .arthro-step[data-step="1"],
#arthroWizard .arthro-step[data-step="2"],
#arthroWizard .arthro-step[data-step="3"],
#arthroWizard .arthro-step[data-step="4"],
#arthroWizard .arthro-step[data-step="5"],
#arthroWizard .arthro-step[data-step="6"],
#arthroWizard .arthro-step[data-step="7"],
#arthroWizard .arthro-step[data-step="8"],
#arthroWizard .arthro-step[data-step="9"],
#arthroWizard .arthro-step[data-step="10"],
#arthroWizard .arthro-step[data-step="11"]{
    min-height: 496px;
    height:496px;
    box-sizing: border-box;
}

/* Sadece soru ekranları aktifken */
#arthroWizard .arthro-step.active[data-step="1"],
#arthroWizard .arthro-step.active[data-step="2"],
#arthroWizard .arthro-step.active[data-step="3"],
#arthroWizard .arthro-step.active[data-step="4"],
#arthroWizard .arthro-step.active[data-step="5"],
#arthroWizard .arthro-step.active[data-step="6"],
#arthroWizard .arthro-step.active[data-step="7"],
#arthroWizard .arthro-step.active[data-step="8"],
#arthroWizard .arthro-step.active[data-step="9"],
#arthroWizard .arthro-step.active[data-step="10"],
#arthroWizard .arthro-step.active[data-step="11"]{
    display: flex;
    flex-direction: column;
}




/* ==================================================
   UPLOAD GRID
================================================== */

#arthroWizard .arthro-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
    margin: 0px;
}


/* ==================================================
   UPLOAD ITEM
   DIŞ KUTU YOK!
================================================== */

#arthroWizard .arthro-upload-box {
    display: block;

    min-width: 0;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
}


/* ==================================================
   TITLE
================================================== */

#arthroWizard .arthro-upload-box-title {
    display: block;

    width: 100%;

    margin: 0 0 0px 0px !important;
    padding: 0 !important;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    color: #1c1c1c;

    text-align: center !important;
}


/* ==================================================
   HIDE NATIVE INPUT
================================================== */

#arthroWizard .arthro-upload-box > input[type="file"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    opacity: 0 !important;

    border: 0 !important;

    pointer-events: none !important;
}


/* ==================================================
   SINGLE UPLOAD AREA
================================================== */

#arthroWizard .arthro-upload-drop {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;

    padding: 10px !important;

    box-sizing: border-box !important;

    background: #fbfbfb !important;

    border: 1px solid #cfcfcf !important;
    border-radius: 12px !important;

    text-align: center !important;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


#arthroWizard .arthro-upload-drop:hover {
    background: #f7f9fc !important;
    border-color: #8aaeff !important;
    transform: translateY(-1px);
}


/* ==================================================
   ICON
================================================== */

#arthroWizard .arthro-upload-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36px;
    height: 36px;

    margin: 0 0 5px !important;

    background: #ffffff;

    border: 1px solid #e2e2e2;
    border-radius: 50%;

    font-size: 17px;
    font-weight: 400;
    line-height: 1;

    color: #666;
}


/* ==================================================
   SELECT TEXT
================================================== */

#arthroWizard .arthro-upload-action {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;

    color: #222;

    text-align: center !important;
}


/* ==================================================
   FORMAT
================================================== */

#arthroWizard .arthro-upload-formats {
    display: block;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;

    color: #999;

    text-align: center !important;
}


/* ==================================================
   SELECTED FILE NAME
   MUTLAKA KUTUNUN ALTINDA
================================================== */

#arthroWizard .arthro-file-name {
    display: block !important;

    position: static !important;

    width: 100% !important;

    margin: 8px 0 0 2px !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    font-size: 11px;
    font-weight: 300;
    line-height: 1.4;

    color: #999 !important;

    text-align: center !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Dosya seçildikten sonra ismi biraz belirgin olsun */
#arthroWizard .arthro-file-name.has-file {
    color: #555 !important;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    #arthroWizard .arthro-upload-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    #arthroWizard .arthro-upload-drop {
        height: 140px !important;
        min-height: 140px !important;
    }

}

/* Upload kutularını biraz küçült */
#arthroWizard .arthro-upload-drop {
    height: 150px !important;
    min-height: 150px !important;
    padding: 10px !important;
}


/* Dosya isimlerini biraz daha büyük + kalın */
#arthroWizard .arthro-file-name {
    margin-top: 9px !important;

    font-size: 13px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;

    color: #666 !important;
}


/* ==================================================
   ARTHROAI ANALYSIS LOADER
================================================== */

.arthro-analysis-loader {
    width: 100%;
    margin-top: 18px;
}


/* Status text */

.arthro-analysis-status {
    width: 100%;

    margin-bottom: 7px;

    text-align: center;

    font-size: 14px;
    font-weight: 600;

    color: #26354a;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* ==================================================
   PROGRESS TRACK
================================================== */

.arthro-analysis-track {
    position: relative;

    width: 100%;
    height: 20px;

    overflow: hidden;

    background: rgba(60, 130, 246, 0.10);

    border: 1px solid rgba(60, 130, 246, 0.16);

    border-radius: 10px;
}


/* ==================================================
   BLUE LIQUID FILL
================================================== */

.arthro-analysis-fill {
    position: relative;

    width: 0%;
    height: 100%;

    overflow: hidden;

    border-radius: 9px;

    background: linear-gradient(
        90deg,
        rgba(115, 171, 255, 0.72) 0%,
        rgba(78, 148, 250, 0.78) 50%,
        rgba(60, 130, 246, 0.86) 100%
    );

    transition: width 0.9s ease;
}


/* subtle moving liquid layer */

.arthro-analysis-fill::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.16) 40%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.16) 60%,
        transparent 100%
    );

    transform: translateX(-100%);

    animation: arthro-liquid-shine 4s linear infinite;
}


/* ==================================================
   CELLS / BUBBLES
================================================== */

.arthro-cell {
    position: absolute;

    display: block;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.48);

    background: rgba(255, 255, 255, 0.15);

    box-shadow:
        inset 0 0 3px rgba(255, 255, 255, 0.35);

    pointer-events: none;

    animation-name: arthro-cell-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


/* individual cells */

.arthro-cell-1 {
    width: 6px;
    height: 6px;

    top: 3px;
    left: -10px;

    animation-duration: 7s;
}

.arthro-cell-2 {
    width: 4px;
    height: 4px;

    top: 12px;
    left: -18px;

    animation-duration: 9s;
    animation-delay: 1.5s;
}

.arthro-cell-3 {
    width: 8px;
    height: 8px;

    top: 6px;
    left: -25px;

    animation-duration: 11s;
    animation-delay: 3s;
}

.arthro-cell-4 {
    width: 5px;
    height: 5px;

    top: 4px;
    left: -15px;

    animation-duration: 8s;
    animation-delay: 4.5s;
}

.arthro-cell-5 {
    width: 3px;
    height: 3px;

    top: 13px;
    left: -20px;

    animation-duration: 10s;
    animation-delay: 2s;
}

.arthro-cell-6 {
    width: 7px;
    height: 7px;

    top: 8px;
    left: -30px;

    animation-duration: 12s;
    animation-delay: 5s;
}


/* ==================================================
   ANIMATIONS
================================================== */

@keyframes arthro-cell-move {

    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 0.75;
    }

    35% {
        transform: translateX(180px) translateY(-2px);
    }

    65% {
        transform: translateX(380px) translateY(2px);
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateX(650px) translateY(-1px);
        opacity: 0;
    }
}


@keyframes arthro-liquid-shine {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .arthro-analysis-loader {
        margin-top: 15px;
    }

    .arthro-analysis-status {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .arthro-analysis-track {
        height: 18px;
        border-radius: 9px;
    }

}

/* ==================================================
   QUESTION PROGRESS
================================================== */

.arthro-progress {
    width: 100%;
    margin-bottom: 24px;
}

.arthro-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;

    font-size: 14px;
    font-weight: 500;

    color: #156ff5;
}

.arthro-progress-track {
    width: 100%;
    height: 9px;

    overflow: hidden;

    background: #e8f2ff;

    border-radius: 999px;
}

.arthro-progress-fill {
    width: 10%;
    height: 100%;

    background: #156ff5;

    border-radius: 999px;

    transition: width 0.35s ease;
}

@media (max-width: 767px) {

    .arthro-progress-top {
        font-size: 13px;
    }

    .arthro-progress-track {
        height: 8px;
    }

}

/* ==================================================
   ARTHROAI INTRO
================================================== */

.arthro-intro {
    width: 100%;
}


/* ==================================================
   HERO
================================================== */

.arthro-intro-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;

    width: 100%;

    margin-bottom: 22px;
}

.arthro-intro-hero-content {
    flex: 1;
    min-width: 0;
}


.arthro-intro-brand {
    margin-bottom: 22px;

    font-size: 36px;
    line-height: 1;
    font-weight: 700;

    color: #252b36;
}

.arthro-intro-brand span {
    color: #044C9B;
}


.arthro-intro-title {
    margin: 0 0 24px;

    font-size: 42px;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -1px;

    color: #272c35;
}


.arthro-intro-text {
    max-width: 720px;

    margin: 0;

    font-size: 16px;
    line-height: 1.65;

    color: #4f5661;
}


/* ==================================================
   KNEE IMAGE
================================================== */

.arthro-intro-image-wrap {
    flex: 0 0 220px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.arthro-intro-image {
    display: block;

    width: 220px;
    height: 220px;

    object-fit: cover;

    border-radius: 50%;
}


/* ==================================================
   THREE STEPS
================================================== */

.arthro-intro-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;

    width: 100%;

    margin-bottom: 20px;
}


.arthro-intro-step {
    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 116px;

    padding: 20px;

    background: #f3faff;

    border: 1px solid #cfe6fa;
    border-radius: 15px;
}


.arthro-intro-step-number {
    flex: 0 0 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    background: #ffffff;

    border-radius: 50%;

    font-size: 32px;
    line-height: 1;
    font-weight: 600;

    color: #202b39;
}


.arthro-intro-step-content {
    min-width: 0;
}


.arthro-intro-step-content strong {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    color: #272e38;
}


.arthro-intro-step-content p {
    margin: 0;

    font-size: 13px;
    line-height: 1.45;

    color: #535c68;
}


/* ==================================================
   START BUTTON
================================================== */

.arthro-intro-start, .arthro-consent-start {
 
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 250px!important;
    width: 100%;
    max-width: 430px;
    min-height: 52px;
    margin: 0 auto 36px;
    padding: 15px 60px;
    margin-bottom:5px!important;
    border: 0;
    border-radius: 999px!important;

    background: #1F2F3E!important;

    font-family: inherit;
    font-size: 18px;
    font-weight: 500;

    color: #ffffff;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.arthro-intro-start:hover {
    background: #182d40;

    transform: translateY(-1px);

    box-shadow: 0 8px 22px rgba(32, 53, 72, 0.16);
}


.arthro-intro-start-arrow {
    position: absolute;
    right: 32px;

    font-size: 22px;
    line-height: 1;
}


/* ==================================================
   DIVIDER
================================================== */

.arthro-intro-divider {
    width: 100%;
    height: 1px;

    margin-bottom: 20px;
    margin-top:-15px;
    background: #d7e9f8;
}


/* ==================================================
   NOTICE
================================================== */

.arthro-intro-notice {
    display: flex;
    align-items: center;
    gap: 16px;

    width: 100%;

    padding: 16px 20px;

    background: #f3faff;

    border: 1px solid #cfe6fa;
    border-radius: 14px;
}


.arthro-intro-notice-icon {
    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1.5px solid #1475ed;
    border-radius: 50%;

    font-size: 22px;
    font-weight: 500;

    color: #1475ed;
}


.arthro-intro-notice-content strong {
    display: block;

    margin-bottom: 3px;

    font-size: 13px;
    font-weight: 700;

    color: #29313d;
}


.arthro-intro-notice-content p {
    margin: 0;

    font-size: 12px;
    line-height: 1.5;

    color: #555e6b;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1024px) {

    .arthro-intro-image-wrap {
        flex-basis: 180px;
    }

    .arthro-intro-image {
        width: 180px;
        height: 180px;
    }

    .arthro-intro-title {
        font-size: 36px;
    }

    .arthro-intro-step {
        gap: 12px;

        padding: 16px;
    }

    .arthro-intro-step-number {
        flex-basis: 54px;

        width: 54px;
        height: 54px;

        font-size: 27px;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .arthro-intro-hero {
        flex-direction: column;

        gap: 24px;

        margin-bottom: 30px;
    }


    .arthro-intro-brand {
        margin-bottom: 16px;

        font-size: 27px;
    }


    .arthro-intro-title {
        margin-bottom: 17px;

        font-size: 30px;
        line-height: 1.15;
        letter-spacing: -0.6px;
    }


    .arthro-intro-text {
        font-size: 14px;
        line-height: 1.55;
    }


    .arthro-intro-image-wrap {
        flex: none;

        width: 100%;
    }


    .arthro-intro-image {
        width: 150px;
        height: 150px;
    }


    .arthro-intro-steps {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 28px;
    }


    .arthro-intro-step {
        min-height: 90px;

        padding: 14px 16px;
    }


    .arthro-intro-step-number {
        flex-basis: 54px;

        width: 54px;
        height: 54px;

        font-size: 25px;
    }


    .arthro-intro-step-content strong {
        font-size: 14px;
    }


    .arthro-intro-step-content p {
        font-size: 12px;
    }


    .arthro-intro-start {
        max-width: 100%;
        min-height: 54px;

        margin-bottom: 28px;

        font-size: 16px;
    }


    .arthro-intro-notice {
        align-items: flex-start;

        padding: 14px;
    }


    .arthro-intro-notice-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 19px;
    }

}

.arthro-intro-start {
    display: flex !important;
    margin: 0 auto 36px !important;
}

/* Intro açıkken progress gizli */
#arthroWizard:not(.arthro-started) #arthroProgress {
    display: none !important;
}

/* Start'a basıldıktan sonra progress görünür */
#arthroWizard.arthro-started #arthroProgress {
    display: block !important;
}

/* Weiter */
.arthro-next, .arthro-back {
    background: #1F2F3E !important;
    color: #ffffff !important;
    border-color: #1F2F3E !important;
}

/* ==================================================
   ARTHROAI CONSENT SCREEN
================================================== */

#arthroConsentScreen {
    display: none;
    padding: 0px 0px 0px;
}

.arthro-consent-brand-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.arthro-consent-brand {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: #202734;
}

.arthro-consent-brand span {
    color: #0b57a4;
}

.arthro-consent-kicker {
    font-size: 16px;
    color: #8b8f96;
    font-weight: 400;
}

.arthro-consent-title {
    margin: 0 0 24px;
    font-size: 29px;
    line-height: 1.25;
    font-weight: 500;
    color: #2b2f36;
}

.arthro-consent-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #50555e;
    max-width: 100%;
}

.arthro-consent-divider {
    width: 100%;
    height: 1px;
    background: #d8e8f5;
    margin: 20px 0 25px;
}


/* ==================================================
   CHECKBOX BOXES
================================================== */

.arthro-consent-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 16px;

    border: 1px solid #c9e2f5;
    border-radius: 14px;
    background: #f4fbff;

    cursor: pointer;
}

.arthro-consent-box input[type="checkbox"] {
    width: 28px;
    height: 28px;
    min-width: 28px;

    margin: 0;
    margin-top: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid #b8bec5;
    border-radius: 6px;
    background: #fff;

    cursor: pointer;
    position: relative;
}

.arthro-consent-box input[type="checkbox"]:checked {
    background: #0b57a4;
    border-color: #0b57a4;
}

.arthro-consent-box input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -52%);

    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.arthro-consent-box span {
    font-size: 14px;
    line-height: 1.45;
    color: #363c45;
}


/* ==================================================
   LINKS
================================================== */

.arthro-consent-links {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 70px;
    margin: 26px 0 30px;
}

.arthro-consent-links a {
    position: relative;

    font-size: 16px;
    font-weight: 700;
    color: #0057a8;

    text-decoration: underline;
    text-underline-offset: 2px;

    padding-left: 31px;
}

.arthro-consent-links a::before {
    content: "";
    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 22px;
    height: 22px;

    border-radius: 50%;
    background: #075aaa;
}
.arthro-consent-start{
        min-width: 300px!important;
        margin-left: auto !important;
    margin-right: auto !important;
}



.arthro-consent-start span {
    font-size: 24px;
    line-height: 1;
}

.arthro-consent-start:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #162937;
}

.arthro-consent-start:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    #arthroConsentScreen {
        padding: 10px 10px 10px;
    }

    .arthro-consent-brand-row {
        align-items: flex-end;
        gap: 10px;
        margin-bottom: 20px;
    }

    .arthro-consent-brand {
        font-size: 30px;
    }

    .arthro-consent-kicker {
        font-size: 14px;
    }

    .arthro-consent-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .arthro-consent-text {
        font-size: 15px;
    }

    .arthro-consent-divider {
        margin: 24px 0 20px;
    }

    .arthro-consent-box {
        padding: 13px;
        border-radius: 12px;
    }

    .arthro-consent-box span {
        font-size: 15px;
    }

    .arthro-consent-links {
        flex-direction: column;
        align-items: flex-start;

        gap: 18px;

        margin: 24px 0 28px;
    }

    .arthro-consent-start {
        width: 100%;
    }

}

.arthro-consent-start-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.arthro-consent-start {
    margin: 0 auto !important;
}

#arthroConsentStart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 350px !important;
    min-width: 300px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

#arthroConsentScreen {
    width: 100%;
    box-sizing: border-box;
}



.arthro-nav-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 12px;
    text-align: center;
}

.arthro-nav-info-text {
    text-align: center;
    font-size: 14px;
    line-height: 2;
    color: #555a63;
}

.arthro-nav-first-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.arthro-nav-info-icon {
    display: inline-block;

    width: 18px;
    height: 18px;
    min-width: 18px;

    border: 3px solid #075aaa;
    border-radius: 50%;
}

.arthro-question-description {
    margin: 18px 0 25px;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 300;
    color: #555a63;
}

/* ==================================================
   QUESTION HINT
================================================== */

.arthro-question-hint {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: auto !important;
    margin-bottom: 30px !important;

    flex-shrink: 0;

    padding: 15px 25px;

    background: #F4FAFE;

    border: 1px solid #C7E2F7;
    border-radius: 14px;
}


/* ICON */

.arthro-question-hint-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border: 1.5px solid #0871F9;
    border-radius: 50%;
    color: #0871F9;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    background:#fff;
}


/* CONTENT */

.arthro-question-hint-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.arthro-question-hint-content strong {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: #2C3138;
}


.arthro-question-hint-content p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 300;
    color: #555A63;
}


/* Aktif step flex olsun */
#arthroWizard .arthro-step.active {
    display: flex !important;
    flex-direction: column !important;
}

/* ==================================================
   ICON OPTIONS
================================================== */

.arthro-option-icon {
    padding: 0 !important;
    overflow: hidden;
}


/* ==================================================
   OPTION CONTENT – NORMAL
================================================== */

.arthro-option-icon .arthro-option-content {
    width: 100%;
    min-height: 115px;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px;

    padding: 14px 18px !important;

    /* Normal durumda gri */
    border: 2px solid #D9D9D9 !important;
    border-radius: 12px !important;

    background: #FFFFFF !important;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        background .2s ease;
}


/* ==================================================
   ICON – NORMAL
================================================== */

.arthro-option-icon .arthro-option-icon-symbol {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #F3F9FD !important;
    color: #0871F9 !important;

    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 500 !important;

    transition:
        background .2s ease,
        color .2s ease;
}


/* ==================================================
   TEXT – NORMAL
================================================== */

.arthro-option-icon .arthro-option-text {
    display: block !important;

    width: auto !important;
    min-height: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;

    color: #252A31 !important;
    text-align: center !important;

    transition:
        color .2s ease,
        font-weight .2s ease;
}


/* ==================================================
   HOVER
================================================== */

.arthro-option-icon:hover .arthro-option-content {
    border-color: #1683FF !important;
}


/* ==================================================
   SELECTED
================================================== */

.arthro-option-icon input:checked + .arthro-option-content {
    border-color: #1683FF !important;
    background: #F5FAFF !important;
}


/* Selected Icon */

.arthro-option-icon input:checked + .arthro-option-content
.arthro-option-icon-symbol {
    background: #1683FF !important;
    color: #FFFFFF !important;
}


/* Selected Text */

.arthro-option-icon input:checked + .arthro-option-content
.arthro-option-text {
    color: #1683FF !important;
}

.arthro-option-icon-symbol svg {
    width: 27px;
    height: 27px;
}

/* ==================================================
   NORMAL OPTIONS – HOVER + SELECTED
================================================== */

/* Normal durum */
.arthro-option:not(.arthro-option-icon) > span {
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}


/* Hover */
.arthro-option:not(.arthro-option-icon):hover > span {
    border-color: #1683FF !important;
}


/* Selected */
.arthro-option:not(.arthro-option-icon) > input:checked + span {
    border-color: #1683FF !important;
    background: #F5FAFF !important;
    color: #1683FF !important;
}





/* ==================================================
   QUESTION NAVIGATION
================================================== */

#arthroWizard .arthro-navigation {
    position: relative;

    width: 100% !important;
    min-height: 72px;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 30px;

    margin-top: 0 !important;
    padding-top: 0 !important;

    flex-shrink: 0;
}


/* ==================================================
   CENTER SECURITY TEXT
================================================== */

.arthro-nav-info {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    margin: 0 !important;

    z-index: 1;
}


/* Butonlar önde kalsın */

.arthro-back,
.arthro-next {
    position: relative;
    z-index: 2;
}

.arthro-option-icon-symbol.arthro-duration-symbol {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ==================================================
   FRAGE 1 – SAME OPTION HEIGHT
================================================== */

#arthroWizard .arthro-step[data-step="1"] .arthro-option > span {
    min-height: 115px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box;
}


.arthro-back,
.arthro-next {
    position: relative;
    padding-left: 55px !important;
    padding-right: 55px !important;
}

.arthro-back .arthro-intro-start-arrow {
    left: 22px;
    right: auto;
    transform: rotate(180deg);
}

.arthro-next .arthro-intro-start-arrow {
    right: 22px;
    left: auto;
}


/* ==================================================
   QUESTIONNAIRE COMPLETE STEP
================================================== */

#arthroWizard .arthro-complete-step {
    height: 565px !important;
    min-height: 565px!important;
    box-sizing: border-box;
    text-align: center;
    padding-top: 20px;
}

/* Sadece aktif olduğunda flex olsun */
#arthroWizard .arthro-complete-step.active {
    display: flex !important;
    flex-direction: column;
}


/* CHECK ICON */

.arthro-complete-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1.5px solid #0871F9;
    border-radius: 50%;

    color: #0871F9;

    font-size: 30px;
    font-weight: 400;
}


/* TITLE */

.arthro-complete-title {
    margin: 0 0 40px !important;

    text-align: center;

    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    color: #2B2F36;
}


/* SUBTITLE */

.arthro-complete-subtitle {
    margin: 0 0 25px;

    text-align: center;

    font-size: 17px;
    line-height: 1.5;

    color: #454B54;
}


/* DESCRIPTION */

.arthro-complete-text {
    max-width: 700px;

    margin: 0 auto;
    margin-bottom:36px;
    text-align: center;

    font-size: 16px;
    line-height: 1.55;

    color: #50565F;
}


/* ==================================================
   HINT
================================================== */

#arthroWizard .arthro-complete-step .arthro-complete-hint {
    margin-top: auto !important;
    margin-bottom: 30px !important;

    text-align: left;

    flex-shrink: 0;
}


/* ==================================================
   NAVIGATION
================================================== */

#arthroWizard .arthro-complete-step .arthro-navigation {
    width: 100% !important;
    min-height: 72px;

    margin-top: 0 !important;
    padding-top: 0 !important;

    flex-shrink: 0;
}


/* COMPLETE STEP BUTTON WIDTH */

#arthroWizard .arthro-complete-step .arthro-back,
#arthroWizard .arthro-complete-step .arthro-next {
    min-width: 220px;
}

/* Abschluss ekranında progress kesinlikle görünmesin */
#arthroWizard.arthro-complete-active #arthroProgress {
    display: none !important;
}

.arthro-complete-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #0871F9;
    border-radius: 50%;
    background: #F3F9FD;
    color: #0871F9;
}

.arthro-complete-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.arthro-upload-intro {
    margin: 25px 0 30px;

    font-size: 16px;
    line-height: 1.6;

    color: #50565F;
}

/* ==================================================
   UPLOAD GRID
================================================== */

.arthro-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


/* ==================================================
   UPLOAD BOX
================================================== */

.arthro-upload-box {
    min-width: 0;
}


/* ==================================================
   UPLOAD CARD
================================================== */

.arthro-upload-drop {
    width: 100%;
    min-height: 175px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px;

    padding: 22px 20px;

    border: 1px solid #C7E2F7 !important;
    border-radius: 14px !important;

    background: #FFFFFF !important;

    text-align: center !important;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* ==================================================
   HOVER
================================================== */

.arthro-upload-drop:hover {
    border-color: #1683FF !important;
    background: #F7FBFF !important;

    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(22, 131, 255, 0.06);
}


/* ==================================================
   UPLOAD ICON
================================================== */

.arthro-upload-icon {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto 0px !important;
    padding: 0 !important;

    border: 1.5px solid #1683FF !important;
    border-radius: 50% !important;

    background: #F3F9FD !important;
    color: #1683FF !important;

    line-height: 1 !important;
}


/* SVG icon */

.arthro-upload-icon svg {
    width: 21px;
    height: 21px;

    display: block;
}


/* ==================================================
   TITLE
================================================== */

.arthro-upload-box-title {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    color: #252A31 !important;

    text-align: center !important;
}


/* ==================================================
   OPTIONAL / REQUIRED
================================================== */

.arthro-upload-status {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    color: #1683FF !important;

    text-align: center !important;
}


/* ==================================================
   SMALL DESCRIPTION
================================================== */

.arthro-upload-formats {
    width: 100%;

    margin: 1px 0 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    color: #666C74 !important;

    text-align: center !important;
}


/* ==================================================
   REAL FILE INPUT
================================================== */

.arthro-upload-box input[type="file"] {
    display: none !important;
}


/* ==================================================
   FILE NAME
================================================== */

.arthro-file-name {
    width: 100%;

    margin-top: 9px !important;
    padding: 0 4px;

    box-sizing: border-box;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    color: #666C74 !important;

    text-align: center !important;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .arthro-upload-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .arthro-upload-drop {
        min-height: 160px;
        padding: 20px 16px;
    }

    .arthro-upload-box-title {
        font-size: 17px !important;
    }

    .arthro-upload-status {
        font-size: 14px !important;
    }

    .arthro-upload-formats {
        font-size: 13px !important;
    }

}

/* ==================================================
   UPLOAD PRIVACY INFO
================================================== */

.arthro-upload-privacy-info {
    width: 100%;
    max-width: 1100px;

    margin: 15px auto -10px;

    text-align: center;
}

.arthro-upload-privacy-info p {
    margin: 0 0 4px !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;

    color: #353A42 !important;
}

.arthro-upload-privacy-info a {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;

    color: #0871F9;
    text-decoration: underline;
}

.arthro-upload-privacy-info a:hover {
    color: #005FD1;
}

#submitButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

#submitButton .arthro-intro-start-arrow {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;

    display: inline-block !important;
    margin: 0 !important;

    font-size: 24px !important;
    line-height: 1 !important;
}

/* ==================================================
   ARTHROAI ANALYSIS SCREEN
================================================== */

#arthroAnalysisScreen {
    width: 100%;
    min-height: 560px;
    box-sizing: border-box;

    display: none;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding: 35px 30px 25px;
}

#arthroAnalysisScreen.active {
    display: flex !important;
}


/* ==================================================
   LOGO AREA
================================================== */

.arthro-analysis-logo-wrap {
    position: relative;

    width: 120px;
    height: 120px;

    margin: 0 auto 18px;
}


/* SABİT ANA HALKA */

.arthro-analysis-ring {
    position: relative;

    width: 120px;
    height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 5px solid #E5F0FA;
    border-radius: 50%;

    background: #FFFFFF;

    /* Logo ve ana halka dönmeyecek */
    animation: none !important;
}


/* HAREKET EDEN MAVİ HALKA */

.arthro-analysis-ring::before {
    content: "";

    position: absolute;
    inset: -5px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 230deg,
            #8DBBFF 245deg,
            #1683FF 305deg,
            transparent 330deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 5px),
            #000 calc(100% - 4px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 5px),
            #000 calc(100% - 4px)
        );

    animation: arthroLogoRingMove 6s linear infinite;
}


/* HAREKET EDEN BALONCUKLAR */

.arthro-analysis-ring::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    left: 50%;
    top: -8px;

    margin-left: -3.5px;

    border-radius: 50%;

    background: #1683FF;

    box-shadow:
        5px 5px 0 -1px rgba(22, 131, 255, .45),
        -4px 9px 0 -2px rgba(22, 131, 255, .30);

    transform-origin: 3.5px 68px;

    animation: arthroLogoBubbleMove 6s linear infinite;
}


/* LOGO SABİT */

.arthro-analysis-logo {
    position: relative;
    z-index: 5;

    width: 72px;
    height: 72px;

    object-fit: contain;

    transform: none !important;
}


@keyframes arthroLogoRingMove {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes arthroLogoBubbleMove {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ==================================================
   TITLE
================================================== */

.arthro-analysis-title {
    margin: 0 0 5px !important;

    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    color: #252A31 !important;
}

.arthro-analysis-title span {
    color: #0B57A4;
}


/* ==================================================
   MAIN STATUS
================================================== */

.arthro-analysis-status-main {
    margin-bottom: 14px;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;

    color: #2E343C;
}


/* ==================================================
   DESCRIPTION
================================================== */

.arthro-analysis-description {
    max-width: 620px;

    margin: 0 auto 38px !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;

    color: #646A73 !important;
}


/* ==================================================
   3 STEP PROGRESS
================================================== */

.arthro-analysis-steps {
    position: relative;

    width: 72%;
    max-width: 900px;
    height: 76px;

    margin: 0 auto 35px;
}


/* ==================================================
   STEP
================================================== */

.arthro-analysis-step {
    position: absolute;
    top: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;

    z-index: 3;
}

.arthro-analysis-step:nth-child(1) {
    left: 0;
    transform: translateX(-50%);
}

.arthro-analysis-step:nth-child(2) {
    left: 50%;
    transform: translateX(-50%);
}

.arthro-analysis-step:nth-child(3) {
    left: 100%;
    transform: translateX(-50%);
}


/* ==================================================
   DOT
================================================== */

.arthro-analysis-step-dot {
    width: 20px;
    height: 20px;

    display: block;

    box-sizing: border-box;

    border: 2px solid #CFE1F2;
    border-radius: 50%;

    background: #FFFFFF;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* ACTIVE DOT */

.arthro-analysis-step.active .arthro-analysis-step-dot {
    border-color: #1683FF;
    background: #FFFFFF;

    box-shadow:
        0 0 0 5px rgba(22, 131, 255, .10);
}


/* DONE DOT */

.arthro-analysis-step.done .arthro-analysis-step-dot {
    border-color: #1683FF;
    background: #1683FF;
}


/* ==================================================
   LABEL
================================================== */

.arthro-analysis-step-label {
    width: 130px;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;

    color: #7A8088;

    text-align: center;
}

.arthro-analysis-step.active .arthro-analysis-step-label,
.arthro-analysis-step.done .arthro-analysis-step-label {
    color: #1683FF;
    font-weight: 500;
}


/* ==================================================
   PROGRESS LINE
================================================== */

/* çizgi */

.arthro-analysis-main-track {
    position: relative;

    width: 72%;
    max-width: 900px;
    height: 16px;

    margin: -109px auto 96px;

    overflow: hidden;

    border-radius: 999px;

    background: #E5F0FA;

    z-index: 1;
}


/* ==================================================
   PROGRESS FILL
================================================== */

/* dolan alan */

.arthro-analysis-main-fill {
    position: relative;

    width: 0%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #8DBBFF,
        #4C8FFF
    );

    transition: width .8s ease;
}

/* ==================================================
   PROGRESS FILL
================================================== */

.arthro-analysis-main-fill {
    position: relative;

    width: 0%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8DBBFF 0%,
            #5A9BFF 55%,
            #1683FF 100%
        );

    transition: width .8s ease;
}


/* ==================================================
   SEAMLESS BUBBLES
   Aniden ortada oluşmaz.
   Pattern sürekli soldan sağa akar.
================================================== */

/* ==================================================
   ORGANIC BUBBLES
   - farklı boyutlar
   - farklı hız hissi
   - hafif yukarı / aşağı salınım
   - seamless loop
================================================== */

.arthro-analysis-main-fill::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:

        /* büyük - yavaş */
        radial-gradient(
            circle,
            rgba(255,255,255,.42) 0 3.2px,
            transparent 3.8px
        ),

        /* küçük - hızlı */
        radial-gradient(
            circle,
            rgba(255,255,255,.27) 0 1.4px,
            transparent 2px
        ),

        /* orta */
        radial-gradient(
            circle,
            rgba(255,255,255,.34) 0 2.3px,
            transparent 2.9px
        ),

        /* çok küçük - hızlı */
        radial-gradient(
            circle,
            rgba(255,255,255,.25) 0 1.1px,
            transparent 1.7px
        ),

        /* büyük */
        radial-gradient(
            circle,
            rgba(255,255,255,.38) 0 2.8px,
            transparent 3.4px
        ),

        /* küçük */
        radial-gradient(
            circle,
            rgba(255,255,255,.30) 0 1.6px,
            transparent 2.1px
        ),

        /* orta */
        radial-gradient(
            circle,
            rgba(255,255,255,.34) 0 2px,
            transparent 2.6px
        ),

        /* minik */
        radial-gradient(
            circle,
            rgba(255,255,255,.22) 0 .9px,
            transparent 1.5px
        );


    /*
     * Farklı repeat genişlikleri.
     * Küçük tile = daha hızlı akıyormuş hissi.
     */
    background-size:
        360px 16px,
        180px 16px,
        280px 16px,
        150px 16px,
        400px 16px,
        210px 16px,
        300px 16px,
        140px 16px;


    background-repeat:
        repeat-x;


    background-position:
        18px  -2px,
        45px   1px,
        90px  -1px,
        120px  2px,
        165px -3px,
        205px  0px,
        245px -1px,
        275px  1px;

    animation:
        arthroBubbleOrganic
        8s
        linear
        infinite;
}


/* ==================================================
   ORGANIC MOVEMENT
================================================== */

@keyframes arthroBubbleOrganic {

    0% {
        background-position:
            18px  -2px,
            45px   1px,
            90px  -1px,
            120px  2px,
            165px -3px,
            205px  0px,
            245px -1px,
            275px  1px;
    }

    25% {
        background-position:
            108px  0px,
            135px -2px,
            160px  1px,
            195px -1px,
            265px  0px,
            310px -3px,
            320px  1px,
            380px -2px;
    }

    50% {
        background-position:
            198px -1px,
            225px  2px,
            230px -2px,
            270px  1px,
            365px -2px,
            415px  1px,
            395px -3px,
            485px  2px;
    }

    75% {
        background-position:
            288px  1px,
            315px -1px,
            300px  0px,
            345px -2px,
            465px  1px,
            520px -2px,
            470px  0px,
            590px -1px;
    }

    100% {
        background-position:
            378px -2px,
            405px  1px,
            370px -1px,
            420px  2px,
            565px -3px,
            625px  0px,
            545px -1px,
            695px  1px;
    }
}

/* ==================================================
   VERY SOFT MOVING SHINE
================================================== */

.arthro-analysis-main-fill::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    left: -50%;
    width: 48%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.06) 20%,
            rgba(255,255,255,.20) 50%,
            rgba(255,255,255,.06) 80%,
            rgba(255,255,255,0) 100%
        );

    filter: blur(2px);

    animation:
        arthroProgressSoftShine
        4.5s
        ease-in-out
        infinite;
}


/* ==================================================
   SHINE MOVEMENT
================================================== */

@keyframes arthroProgressSoftShine {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    88%,
    100% {
        transform: translateX(380%);
        opacity: 0;
    }

}
/* ==================================================
   NOTICE
================================================== */

.arthro-analysis-notice {
    width: 100%;

    margin-top: auto !important;
    margin-bottom: 0 !important;

    text-align: left;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    #arthroAnalysisScreen {
        min-height: 520px;
        padding: 25px 18px 20px;
    }


    .arthro-analysis-logo-wrap,
    .arthro-analysis-ring {
        width: 100px;
        height: 100px;
    }


    .arthro-analysis-logo {
        width: 62px;
        height: 62px;
    }


    .arthro-analysis-ring::after {
        transform-origin: 3.5px 58px;
    }


    .arthro-analysis-title {
        font-size: 24px !important;
    }


    .arthro-analysis-status-main {
        font-size: 16px;
    }


    .arthro-analysis-description {
        font-size: 13px !important;
        margin-bottom: 32px !important;
    }


    .arthro-analysis-steps,
    .arthro-analysis-main-track {
        max-width: calc(100% - 40px);
    }


    .arthro-analysis-step-label {
        width: 100px;

        font-size: 11px;
    }

}


/* ==================================================
   HIDE OLD TOP PROGRESS DURING ANALYSIS
================================================== */

#arthroWizard.arthro-analysis-active .arthro-progress,
#arthroWizard.arthro-analysis-active #arthroProgress {
    display: none !important;
}

/* ==========================================================
   ARTHROAI REPORT PAGE – FINAL COMPLETE CSS
========================================================== */


/* ==========================================================
   PAGE
========================================================== */

body.arthro-secure-page {
    margin: 0 !important;
    padding: 0 !important;

    min-height: 100vh;

    background: #F3F8FC !important;

    font-family: inherit;
}


/* ==========================================================
   MAIN WHITE CARD
   SAME WIDTH AS PREVIOUS ARTHROAI STEPS
========================================================== */

body.arthro-secure-page .arthro-report-card {
    width: 100% !important;
    max-width: 1024px !important;

    margin: 28px auto !important;

    padding: 42px 42px 38px !important;

    box-sizing: border-box !important;

    background: #FFFFFF !important;

    border-radius: 24px !important;

    box-shadow:
        0 12px 38px rgba(31, 47, 62, 0.08) !important;

    overflow: hidden !important;
}


/* ==========================================================
   REPORT INTRO
========================================================== */

#arthroReportIntro {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* ==========================================================
   SUCCESS ANIMATION AREA
========================================================== */

#arthroReportIntro .arthro-report-success {
    position: relative !important;

    width: 190px !important;
    height: 120px !important;

    margin: 0 auto 8px !important;

    overflow: visible !important;
}


/* ==========================================================
   SUCCESS CHECK
========================================================== */

#arthroReportIntro .arthro-report-success-icon {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    max-width: 54px !important;
    max-height: 54px !important;

    transform: translate(-50%, -50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 1.5px solid #39B972 !important;
    border-radius: 50% !important;

    background: #FFFFFF !important;

    color: #39B972 !important;

    z-index: 20 !important;
}


#arthroReportIntro .arthro-report-success-icon svg {
    display: block !important;

    width: 27px !important;
    height: 27px !important;

    min-width: 27px !important;
    min-height: 27px !important;

    max-width: 27px !important;
    max-height: 27px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
}


#arthroReportIntro .arthro-report-success-icon svg path {
    fill: none !important;

    stroke: currentColor !important;
    stroke-width: 2.2 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ==========================================================
   SUCCESS PARTICLES
   FIREWORK EFFECT
========================================================== */

#arthroReportIntro .arthro-report-particle {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 6px;
    height: 6px;

    margin-left: -3px;
    margin-top: -3px;

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    z-index: 5;

    /*
     * İlk patlama.
     * Tüm noktalar TAM AYNI merkezden çıkar.
     */
animation:
    arthroFireworkBurst
    .85s
    cubic-bezier(.12,.65,.25,1)
    forwards;
}


/* ==========================================================
   ACTUAL VISIBLE DOT
========================================================== */

#arthroReportIntro .arthro-report-particle::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    background: #39B972;

}


/* ==========================================================
   9 FIREWORK DIRECTIONS
========================================================== */


/* SOL */

#arthroReportIntro .p1 {
    --x: -78px;
    --y: -5px;

    width: 6px;
    height: 6px;
}


/* SOL ÜST */

#arthroReportIntro .p2 {
    --x: -63px;
    --y: -47px;

    width: 5px;
    height: 5px;
}


/* SOL ÜST DİKEY */

#arthroReportIntro .p3 {
    --x: -31px;
    --y: -72px;

    width: 7px;
    height: 7px;
}


/* ÜST */

#arthroReportIntro .p4 {
    --x: 0px;
    --y: -82px;

    width: 4px;
    height: 4px;
}


/* SAĞ ÜST */

#arthroReportIntro .p5 {
    --x: 38px;
    --y: -70px;

    width: 6px;
    height: 6px;
}


/* SAĞ ÜST DIŞ */

#arthroReportIntro .p6 {
    --x: 68px;
    --y: -43px;

    width: 5px;
    height: 5px;
}


/* SAĞ */

#arthroReportIntro .p7 {
    --x: 82px;
    --y: -3px;

    width: 7px;
    height: 7px;
}


/* SAĞ ALT */

#arthroReportIntro .p8 {
    --x: 58px;
    --y: 38px;

    width: 4px;
    height: 4px;
}


/* SOL ALT */

#arthroReportIntro .p9 {
    --x: -57px;
    --y: 38px;

    width: 5px;
    height: 5px;
}


/* ==========================================================
   COLORS
========================================================== */

#arthroReportIntro .p1::after,
#arthroReportIntro .p3::after,
#arthroReportIntro .p5::after,
#arthroReportIntro .p7::after {
    background: #39B972;
}


#arthroReportIntro .p2::after,
#arthroReportIntro .p6::after,
#arthroReportIntro .p9::after {
    background: #69CF94;
}


#arthroReportIntro .p4::after,
#arthroReportIntro .p8::after {
    background: #A2E5BE;
}


/* ==========================================================
   FIREWORK BURST

   0–35%   = hızlı patlama
   35–75%  = dışarı doğru açılma
   75–100% = hafif yavaşlayarak yerine oturma
========================================================== */

@keyframes arthroFireworkBurst {

    0% {
        opacity: 0;
        transform:
            translate3d(-50%, -50%, 0)
            scale(.2);
    }

    8% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translate3d(
                calc(-50% + var(--x)),
                calc(-50% + var(--y)),
                0
            )
            scale(1);
    }
}


/* ==========================================================
   AFTER-BURST FLOAT

   Burada büyük hareket YOK.
   Sadece çok hafif organik hareket.
========================================================== */

@keyframes arthroFloatA {

    0% {
        transform: translate3d(0,0,0);
    }

    20% {
        transform: translate3d(2px,-2px,0);
    }

    40% {
        transform: translate3d(4px,0,0);
    }

    60% {
        transform: translate3d(2px,3px,0);
    }

    80% {
        transform: translate3d(-2px,2px,0);
    }

    100% {
        transform: translate3d(0,0,0);
    }

}


@keyframes arthroFloatB {

    0% {
        transform: translate3d(0,0,0);
    }

    20% {
        transform: translate3d(-2px,1px,0);
    }

    40% {
        transform: translate3d(-3px,-2px,0);
    }

    60% {
        transform: translate3d(0,-3px,0);
    }

    80% {
        transform: translate3d(3px,-1px,0);
    }

    100% {
        transform: translate3d(0,0,0);
    }

}


@keyframes arthroFloatC {

    0% {
        transform: translate3d(0,0,0);
    }

    20% {
        transform: translate3d(1px,3px,0);
    }

    40% {
        transform: translate3d(-2px,4px,0);
    }

    60% {
        transform: translate3d(-3px,1px,0);
    }

    80% {
        transform: translate3d(-1px,-2px,0);
    }

    100% {
        transform: translate3d(0,0,0);
    }

}


/* ==========================================================
   FLOAT STARTS BEFORE BURST COMPLETELY ENDS

   BURST = 1.15s
   FLOAT DELAY = .88s

   Böylece:
   patlama -> DUR -> float
   yerine

   patlama ------>
             float ------>

   şeklinde overlap olur.
========================================================== */

#arthroReportIntro .p1::after {
    animation:
        arthroFloatA
        6.8s
        linear
        .88s
        infinite;
}


#arthroReportIntro .p2::after {
    animation:
        arthroFloatB
        8.1s
        linear
        .82s
        infinite;
}


#arthroReportIntro .p3::after {
    animation:
        arthroFloatC
        7.4s
        linear
        .91s
        infinite;
}


#arthroReportIntro .p4::after {
    animation:
        arthroFloatA
        8.8s
        linear
        .84s
        infinite;
}


#arthroReportIntro .p5::after {
    animation:
        arthroFloatB
        7.1s
        linear
        .90s
        infinite;
}


#arthroReportIntro .p6::after {
    animation:
        arthroFloatC
        8.5s
        linear
        .86s
        infinite;
}


#arthroReportIntro .p7::after {
    animation:
        arthroFloatA
        7.8s
        linear
        .92s
        infinite;
}


#arthroReportIntro .p8::after {
    animation:
        arthroFloatB
        9.1s
        linear
        .83s
        infinite;
}


#arthroReportIntro .p9::after {
    animation:
        arthroFloatC
        7.6s
        linear
        .89s
        infinite;
}

/* ==========================================================
   REPORT TITLE
========================================================== */

#arthroReportIntro .arthro-report-title {
    width: 100% !important;

    margin: 0 auto 8px !important;
    padding: 0 !important;

    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    color: #252A31 !important;

    text-align: center !important;
}


/* ==========================================================
   REPORT SUBTITLE
========================================================== */

#arthroReportIntro .arthro-report-subtitle {
    width: 100% !important;

    margin: 0 auto 30px !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;

    color: #646A73 !important;

    text-align: center !important;
}


/* ==========================================================
   OPEN REPORT FORM
========================================================== */

#arthroOpenReportForm {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto 24px !important;
    padding: 0 !important;
}


/* ==========================================================
   PDF BUTTON
========================================================== */

#arthroOpenReportForm .arthro-open-button {
    position: relative !important;

    width: 100% !important;
    max-width: 430px !important;

    min-height: 54px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        14px
        58px
        14px
        28px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #0871F9 !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    cursor: pointer !important;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


#arthroOpenReportForm .arthro-open-button:hover {
    background: #0565E4 !important;

    transform: translateY(-1px);

    box-shadow:
        0 8px 22px rgba(8,113,249,.18) !important;
}


#arthroOpenReportForm .arthro-open-button-arrow {
    position: absolute !important;

    right: 24px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    font-size: 21px !important;
    line-height: 1 !important;

    color: #FFFFFF !important;
}


/* ==========================================================
   PRIVACY NOTE
========================================================== */

#arthroReportIntro .arthro-report-privacy-note {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 16px !important;

    box-sizing: border-box !important;

    margin: 0 auto 32px !important;

    padding: 14px 18px !important;

    border: 1px solid #BFDFF8 !important;

    border-radius: 14px !important;

    background: #F4FAFE !important;

    text-align: center !important;
}


/* ==========================================================
   PRIVACY ICON
========================================================== */

#arthroReportIntro .arthro-report-privacy-icon {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border: 1.5px solid #0871F9 !important;
    border-radius: 50% !important;

    color: #0871F9 !important;

    font-size: 21px !important;
    line-height: 1 !important;

    flex: 0 0 40px !important;
    position: static !important;
    transform: none !important;

    grid-column: 1 !important;

}


/* ==========================================================
   PRIVACY CONTENT
========================================================== */

#arthroReportIntro .arthro-report-privacy-content {
    flex: 1 1 auto !important;

    min-width: 0 !important;
        width: 100% !important;
    text-align: center !important;
    padding-right:50px;
}


#arthroReportIntro .arthro-report-privacy-content strong {
    display: block !important;

    margin: 0 0 3px !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    color: #252A31 !important;
}


#arthroReportIntro .arthro-report-privacy-content p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;

    color: #646A73 !important;

    text-align: center !important;
}


/* ==========================================================
   MEDICAL CTA
========================================================== */

#arthroMedicalCTA.arthro-medical-cta {
    position: relative !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0px 0 0 !important;

    text-align: center !important;

    border-top: none !important;
}


/* ==========================================================
   MEDICAL TITLE
========================================================== */

#arthroMedicalCTA .arthro-medical-title {
    display: block !important;

    width: 100% !important;

    margin: 0 auto 10px !important;
    padding: 0 !important;

    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    color: #252A31 !important;

    text-align: center !important;
}


/* ==========================================================
   MEDICAL TEXT
========================================================== */

#arthroMedicalCTA .arthro-medical-text {
    display: block !important;

    width: 100% !important;
    max-width: 700px !important;

    margin: 0 auto 25px !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;

    color: #646A73 !important;

    text-align: center !important;
}


/* ==========================================================
   MEDICAL ACTIONS
========================================================== */

#arthroMedicalCTA .arthro-medical-actions {
    width: 100% !important;
    max-width: 700px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        1fr
        1fr !important;

    gap: 18px !important;

    align-items: stretch !important;
}


#arthroMedicalCTA .arthro-decline-form {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   MEDICAL BUTTONS
========================================================== */

#arthroMedicalCTA .arthro-medical-no,
#arthroMedicalCTA .arthro-medical-yes {
    position: relative !important;

    width: 100% !important;
    min-height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        13px
        48px
        13px
        24px !important;

    border: 1.5px solid #1683FF !important;

    border-radius: 999px !important;

    background: #FFFFFF !important;

    color: #0871F9 !important;

    font-family: inherit !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        opacity .2s ease !important;
}


#arthroMedicalCTA .arthro-medical-no:not(:disabled):hover,
#arthroMedicalCTA .arthro-medical-yes:not(:disabled):hover {
    background: #F4FAFE !important;

    transform: translateY(-1px);
}


#arthroMedicalCTA .arthro-medical-no:disabled,
#arthroMedicalCTA .arthro-medical-yes:disabled {
    opacity: .38 !important;

    cursor: not-allowed !important;
}


#arthroMedicalCTA .arthro-medical-button-arrow {
    position: absolute !important;

    right: 20px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    font-size: 20px !important;
    line-height: 1 !important;
}


/* ==========================================================
   PATIENT FORM
========================================================== */

#arthroPatientForm.arthro-patient-form {
    width: 100% !important;

    margin: 34px 0 0 !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1064px) {

    body.arthro-secure-page .arthro-report-card {
        width: calc(100% - 40px) !important;

        margin: 20px auto !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    body.arthro-secure-page .arthro-report-card {
        width: calc(100% - 20px) !important;

        margin: 10px auto !important;

        padding:
            28px
            20px
            26px !important;

        border-radius: 18px !important;
    }


    #arthroReportIntro .arthro-report-success {
        width: 160px !important;
        height: 105px !important;

        margin-bottom: 6px !important;
    }


    #arthroReportIntro .arthro-report-success-icon {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        min-height: 50px !important;

        max-width: 50px !important;
        max-height: 50px !important;
    }


    #arthroReportIntro .arthro-report-title {
        font-size: 24px !important;
    }


    #arthroReportIntro .arthro-report-subtitle {
        font-size: 14px !important;

        margin-bottom: 24px !important;
    }


    #arthroOpenReportForm .arthro-open-button {
        max-width: 100% !important;

        min-height: 52px !important;

        padding:
            13px
            48px
            13px
            20px !important;

        font-size: 14px !important;
    }


    #arthroReportIntro .arthro-report-privacy-note {
        align-items: flex-start !important;

        gap: 12px !important;

        padding: 14px !important;

        margin-bottom: 26px !important;
            position: relative !important;
    justify-content: center !important;
    text-align: center !important;
    }


    #arthroReportIntro .arthro-report-privacy-icon {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        flex-basis: 36px !important;

        font-size: 18px !important;
    }


    #arthroMedicalCTA.arthro-medical-cta {
        padding-top: 22px !important;
    }


    #arthroMedicalCTA .arthro-medical-title {
        font-size: 21px !important;
    }


    #arthroMedicalCTA .arthro-medical-text {
        font-size: 13px !important;

        margin-bottom: 20px !important;
    }


    #arthroMedicalCTA .arthro-medical-actions {
        max-width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }


    #arthroMedicalCTA .arthro-medical-no,
    #arthroMedicalCTA .arthro-medical-yes {
        min-height: 50px !important;

        font-size: 14px !important;
    }

}

#arthroReportIntro .arthro-report-particle::after {
    scale: 1.55;
}


/* ==================================================
   PATIENT FORM OPEN POSITION
================================================== */

#arthroPatientForm {
    scroll-margin-top: 25px;
}

/* Form açılınca Ja / Nein butonlarını kesin gizle */
#arthroMedicalCTA .arthro-medical-actions.is-hidden {
    display: none !important;
}


/* ==========================================================
   MEDICAL FORM SCREEN – FIXED HEIGHT + INNER SCROLL
========================================================== */

.arthro-report-card.arthro-medical-form-screen {
    height: calc(100vh - 56px) !important;
    max-height: 900px !important;
    min-height: 650px !important;

    overflow: hidden !important;
}


/* ==========================================================
   PATIENT FORM SCROLL AREA
========================================================== */

.arthro-medical-form-screen #arthroPatientForm {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    /*
     * Sağda 20px boşluk:
     * içerik scrollbar'a yapışmaz
     */
    padding: 28px 20px 32px 0 !important;

    box-sizing: border-box !important;

    /*
     * Scroll alanı sürekli aktif
     */
    overflow-y: scroll !important;
    overflow-x: hidden !important;

    /*
     * Scrollbar için sürekli alan ayır
     */
    scrollbar-gutter: stable !important;

    scrollbar-width: thin;
    scrollbar-color: #1683FF #EAF3FB;
}


/* Chrome / Safari scrollbar */

.arthro-medical-form-screen #arthroPatientForm::-webkit-scrollbar {
    width: 7px;
}

.arthro-medical-form-screen #arthroPatientForm::-webkit-scrollbar-track {
    background: #EAF3FB;

    border-radius: 999px;
}

.arthro-medical-form-screen #arthroPatientForm::-webkit-scrollbar-thumb {
    background: #1683FF;

    border-radius: 999px;
}

.arthro-medical-form-screen #arthroPatientForm::-webkit-scrollbar-thumb:hover {
    background: #0B6FE8;
}


/* ==========================================================
   FORM TITLE
========================================================== */

.arthro-medical-form-screen #arthroPatientForm > h2 {
    margin: 0 0 12px !important;

    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;

    color: #252A31 !important;
}


/* DESCRIPTION */

.arthro-medical-form-screen #arthroPatientForm > p {
    margin: 0 0 34px !important;

    font-size: 15px !important;
    line-height: 1.55 !important;

    color: #646A73 !important;
}


/* ==========================================================
   PATIENT GRID
========================================================== */

.arthro-patient-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px 22px;

    margin-bottom: 28px;
}


.arthro-field-full {
    grid-column: 1 / -1;
}


/* LABEL */

.arthro-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    color: #2C3138;
}


/* INPUT */

.arthro-field input {
    width: 100%;

    min-height: 52px;

    padding: 12px 15px;

    box-sizing: border-box;

    border: 1px solid #C8D3DD;
    border-radius: 8px;

    background: #FFFFFF;

    color: #252A31;

    font-family: inherit;
    font-size: 15px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.arthro-field input:focus {
    border-color: #1683FF;

    box-shadow:
        0 0 0 3px rgba(22, 131, 255, .08);
}


/* ==========================================================
   CONSENT SECTION
========================================================== */

.arthro-patient-consent-section {
    margin-top: 4px;
    margin-bottom: 28px;
}


.arthro-patient-consent-title {
    margin: 0 0 16px !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    color: #252A31 !important;
}


/* CHECKBOX ROW */

.arthro-patient-consent {
    display: flex !important;

    align-items: flex-start !important;

    gap: 12px !important;

    margin: 0 !important;

    cursor: pointer;
}


.arthro-patient-consent input {
    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;

    margin: 1px 0 0 !important;

    accent-color: #1683FF;
}


.arthro-patient-consent span {
    flex: 1;

    font-size: 13px;
    line-height: 1.55;

    color: #343A42;
}


/* ==========================================================
   PRIVACY INFORMATION BOX
========================================================== */

.arthro-patient-privacy-note {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    box-sizing: border-box;

    margin: 0 0 34px;

    padding: 12px 16px;

    border: 1px solid #C4E0F7;
    border-radius: 12px;

    background: #F3F9FD;
}


/* ICON */

.arthro-patient-privacy-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1.5px solid #1683FF;
    border-radius: 50%;

    color: #1683FF;

    font-size: 20px;
    line-height: 1;
}


/* TEXT */

.arthro-patient-privacy-text {
    flex: 1;

    font-size: 11.5px;
    line-height: 1.5;

    color: #626A74;
}


/* LINK */

.arthro-patient-privacy-text a {
    color: #0871F9 !important;

    font-weight: 700;

    text-decoration: underline;
}


/* ==========================================================
   SUBMIT AREA
========================================================== */

.arthro-patient-submit-wrap {
    width: 100%;

    display: flex;

    justify-content: flex-end;

    padding-bottom: 2px;
}


/* BUTTON */

.arthro-patient-submit {
    position: relative;

    width: auto !important;
    min-width: 210px !important;
    min-height: 48px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding:
        12px
        48px
        12px
        24px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: #203244 !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.arthro-patient-submit:hover {
    background: #172838 !important;

    transform: translateY(-1px);
}


/* ARROW */

.arthro-patient-submit-arrow {
    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;
    line-height: 1;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .arthro-report-card.arthro-medical-form-screen {
        height: calc(100vh - 20px) !important;

        min-height: 0 !important;
        max-height: none !important;
    }


    .arthro-medical-form-screen #arthroPatientForm {
        padding:
            20px
            20px
            25px
            0 !important;

        overflow-y: scroll !important;
        overflow-x: hidden !important;

        scrollbar-gutter: stable !important;
    }


    .arthro-patient-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .arthro-field-full {
        grid-column: auto;
    }


    .arthro-patient-privacy-note {
        align-items: flex-start;

        padding: 12px;
    }


    .arthro-patient-submit-wrap {
        justify-content: stretch;
    }


    .arthro-patient-submit {
        width: 100% !important;
    }

}

/* ==========================================================
   FORM SECTION TITLE
========================================================== */

.arthro-patient-section-title {
    margin: 0 0 18px !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    color: #2C3138 !important;
}


/* ==========================================================
   REQUIRED / OPTIONAL
========================================================== */

.arthro-required {
    margin-left: 1px;

    color: #E84A4A;
}

.arthro-optional {
    font-weight: 400;

    color: #2C3138;
}


/* ==========================================================
   GRID
========================================================== */

.arthro-patient-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px 18px;

    margin-bottom: 28px;
}

.arthro-field-full {
    grid-column: 1 / -1;
}


/* ==========================================================
   LABEL
========================================================== */

.arthro-field label {
    display: block;

    margin: 0 0 6px;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;

    color: #2C3138;
}


/* ==========================================================
   INPUT
========================================================== */

.arthro-field input {
    width: 100%;
    min-height: 48px;

    box-sizing: border-box;

    padding: 12px 16px;

    border: 1px solid #CFE2F7;
    border-radius: 10px;

    background: #FFFFFF;

    color: #252A31;

    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/* PLACEHOLDER */

.arthro-field input::placeholder {
    color: #A9AFB7;

    opacity: 1;
}


/* FOCUS */

.arthro-field input:focus {
    border-color: #1683FF;

    box-shadow:
        0 0 0 3px rgba(22, 131, 255, .08);
}


/* DATE PLACEHOLDER-LIKE COLOR */

.arthro-field input[type="date"] {
    color: #A9AFB7;
}

.arthro-field input[type="date"]:valid {
    color: #252A31;
}

/* ==========================================================
   FORM INPUT – FINAL BORDER OVERRIDE
========================================================== */

.arthro-medical-form-screen #arthroPatientForm .arthro-field input {
    border: 1px solid #CFE2F7 !important;
    border-radius: 10px !important;

    background: #FFFFFF !important;

    outline: none !important;
    box-shadow: none !important;
}


/* Hover */

.arthro-medical-form-screen #arthroPatientForm .arthro-field input:hover {
    border-color: #AFCFEF !important;
}


/* Focus */

.arthro-medical-form-screen #arthroPatientForm .arthro-field input:focus {
    border: 1px solid #1683FF !important;

    box-shadow:
        0 0 0 3px rgba(22, 131, 255, 0.08) !important;
}


/* Placeholder */

.arthro-medical-form-screen #arthroPatientForm .arthro-field input::placeholder {
    color: #A9AFB7 !important;
    opacity: 1 !important;
}


/* Required stars */

.arthro-medical-form-screen #arthroPatientForm .arthro-required {
    color: #E84A4A !important;
}


/* Date */

.arthro-medical-form-screen #arthroPatientForm input[type="date"] {
    border: 1px solid #CFE2F7 !important;
    border-radius: 10px !important;
}

/* ==========================================================
   PATIENT SUCCESS – NEW STEP
========================================================== */

.arthro-report-card.arthro-report-card-success {
    height: auto !important;
    min-height: 650px !important;
    max-height: none !important;

    overflow: hidden !important;
}

#arthroPatientSuccess {
    width: 100% !important;
    min-height: 560px !important;

    display: none;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 50px 40px;

    text-align: center;
}

.arthro-report-card-success #arthroPatientSuccess {
    display: flex;
}

/* ==========================================================
   SUCCESS SCREEN – FINAL
========================================================== */

#arthroPatientSuccess {
    width: 100% !important;
    min-height: 0 !important;

    display: none;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    box-sizing: border-box;

    padding: 30px 34px 24px !important;

    text-align: center;
}

.arthro-report-card-success #arthroPatientSuccess {
    display: flex !important;
}


/* ==========================================================
   ICON
========================================================== */

#arthroPatientSuccess .arthro-success-main-icon {
    position: relative;

    width: 62px;
    height: 62px;

    margin: 0 auto 12px !important;
}

#arthroPatientSuccess .arthro-success-plane {
    position: absolute;

    top: 0;
    left: 0;

    width: 70px;
    height:70px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #1683FF;
    border-radius: 50%;

    background: #F4FBFE !important;
    color: #1683FF !important;
    margin-top:-20px;
}

#arthroPatientSuccess .arthro-success-plane svg {
    width: 35px;
    height: 35px;

    fill: none !important;
    stroke: #1683FF !important;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* small check */

#arthroPatientSuccess .arthro-success-check {
    position: absolute;

    right: -20px;
    bottom: 20px;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #1683FF;
    border-radius: 50%;

    background: #F4FBFE !important;
    color: #1683FF !important;
}

#arthroPatientSuccess .arthro-success-check svg {
    width: 20px;
    height: 20px;

    fill: none !important;
    stroke: #1683FF !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   TITLE
========================================================== */

#arthroPatientSuccess > h2 {
    margin: 0 0 8px !important;

    padding: 0 !important;

    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    letter-spacing: 0 !important;

    color: #252A31 !important;

    background: transparent !important;
}


/* ==========================================================
   INTRO
========================================================== */

#arthroPatientSuccess .arthro-success-intro {
    width: 100%;
    max-width: 560px;

    margin: 0 auto 20px !important;

    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;

    color: #626A74 !important;
}


/* ==========================================================
   WHAT HAPPENS NEXT BOX
========================================================== */

#arthroPatientSuccess .arthro-success-next {
    width: 100%;
    max-width: 760px;

    box-sizing: border-box;

    margin: 0 auto 18px !important;

    padding: 30px 24px 50px !important;

    border: 1px solid #C8E1F7 !important;
    border-radius: 10px !important;

    background: #F3F9FD !important;

    box-shadow: none !important;
}


/* title */

#arthroPatientSuccess .arthro-success-next h3 {
    margin: 0 0 12px !important;
    padding: 0 !important;

    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    color: #252A31 !important;
}


/* ==========================================================
   STEPS
========================================================== */

#arthroPatientSuccess .arthro-success-steps {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 11px;
}

#arthroPatientSuccess .arthro-success-step {
    width: 100%;
    max-width: 650px;

    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin: 0 auto !important;
}


/* CHECK */

#arthroPatientSuccess .arthro-success-step-check {
    flex: 0 0 14px;

    width: 14px;

    margin-top: 0;

    color: #1683FF !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}


/* TEXT */

#arthroPatientSuccess .arthro-success-step p {
    flex: 1;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;

    color: #5F6670 !important;

    text-align: left;
}


/* ==========================================================
   STARTSEITE BUTTON
========================================================== */

#arthroPatientSuccess a.arthro-success-button {
    position: relative !important;

    width: 220px !important;
    max-width: 220px !important;
    min-width: 0 !important;

    min-height: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    margin: 0 auto !important;

    padding: 0 42px 0 24px !important;

    border: 1px solid #1683FF !important;
    border-radius: 999px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;

    color: #1683FF !important;

    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    text-decoration: none !important;

    box-shadow: none !important;

    transition:
        background-color .2s ease,
        transform .2s ease !important;
        
    margin-top:-40px!important;
}


/* BUTTON TEXT */

#arthroPatientSuccess a.arthro-success-button span {
    color: #1683FF !important;
}


/* BUTTON ARROW */

#arthroPatientSuccess
a.arthro-success-button
.arthro-success-button-arrow {
    position: absolute !important;

    right: 16px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    color: #1683FF !important;

    font-size: 15px !important;
    line-height: 1 !important;
}


/* HOVER */

#arthroPatientSuccess a.arthro-success-button:hover {
    background: #F3F9FD !important;
    background-color: #F3F9FD !important;

    color: #1683FF !important;

    transform: translateY(-1px);
}


/* ==========================================================
   CARD SUCCESS STATE
========================================================== */

.arthro-report-card.arthro-report-card-success {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    #arthroPatientSuccess {
        padding: 26px 16px 22px !important;
    }

    #arthroPatientSuccess > h2 {
        font-size: 20px !important;
    }

    #arthroPatientSuccess .arthro-success-intro {
        max-width: 100%;

        font-size: 10.5px !important;
    }

    #arthroPatientSuccess .arthro-success-next {
        padding: 15px 14px !important;
    }

    #arthroPatientSuccess .arthro-success-step {
        max-width: 100%;
    }

    #arthroPatientSuccess .arthro-success-step p {
        font-size: 9.5px !important;
    }

    #arthroPatientSuccess a.arthro-success-button {
        width: 220px !important;
        max-width: 100% !important;
    }
}

#arthroPatientSuccess .arthro-success-step-check {
    width: 14px;
    min-width: 14px;
    height: 14px;

    margin-top: 1px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #1683FF;
}

#arthroPatientSuccess .arthro-success-step-check svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================
   SUCCESS STEPS – FINAL OVERRIDE
========================================================== */

#arthroPatientSuccess .arthro-success-next .arthro-success-steps {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 12px !important;
}


/* HER MADDE */

#arthroPatientSuccess .arthro-success-next .arthro-success-step {
    display: inline-flex !important;
    align-items: flex-start !important;

    width: fit-content !important;
    max-width: 650px !important;

    gap: 8px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: left !important;
}


/* CHECK */

#arthroPatientSuccess
.arthro-success-next
.arthro-success-step
.arthro-success-step-check {
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 14px !important;

    flex: 0 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 1px 0 0 0 !important;
    padding: 0 !important;

    color: #1683FF !important;
}


/* CHECK SVG */

#arthroPatientSuccess
.arthro-success-next
.arthro-success-step
.arthro-success-step-check svg {
    display: block !important;

    width: 21px !important;
    height: 21px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: none !important;

    stroke: #1683FF !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* TEXT */

#arthroPatientSuccess
.arthro-success-next
.arthro-success-step
p {
    width: auto !important;
    max-width: 620px !important;

    flex: 0 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;

    color: #5F6670 !important;

    text-align: center !important;
}

/* ==========================================================
   MOBILE – PREVENT FOOTER OVERLAP
========================================================== */

@media (max-width: 767px) {

    /* Ana Arthro alanı mobilde içerik kadar uzasın */
    .arthro-wrapper,
    .arthro-container,
    .arthro-card,
    .arthro-report-card {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }


    /* İçerik footer'ın altına taşmasın */
    .arthro-wrapper,
    .arthro-container {
        overflow: visible !important;
    }


    /* Step alanı kendi içeriği kadar yer kaplasın */
    .arthro-step,
    .arthro-step-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /* Alt butonlara biraz nefes alanı */
    .arthro-navigation,
    .arthro-actions,
    .arthro-buttons {
        position: relative !important;

        bottom: auto !important;

        margin-bottom: 40px !important;
    }

}

@media (max-width: 600px) {
    #arthroWizard {
        margin: 70px auto;
        padding: 25px 20px;
    }
}

/* ==========================================================
   ARTHRO QUESTIONS – MOBILE NAVIGATION FINAL
========================================================== */

@media (max-width: 767px) {

    /* -------------------------------------------------------
       HINWEIS
    ------------------------------------------------------- */

    .arthro-step .arthro-question-hint {
        width: 100% !important;

        margin:
            24px
            0
            32px !important;

        box-sizing: border-box !important;
    }


    /* -------------------------------------------------------
       NAVIGATION WRAPPER
    ------------------------------------------------------- */

    .arthro-step .arthro-navigation {
        position: static !important;

        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;

        gap: 16px !important;

        margin:
            0
            0
            24px !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -------------------------------------------------------
       INFO TEXT
       Önce bilgi yazısı gelecek
    ------------------------------------------------------- */

    .arthro-step .arthro-navigation .arthro-nav-info {
        order: 1 !important;

        position: static !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 0 4px !important;
        padding: 0 8px !important;

        box-sizing: border-box !important;

        display: block !important;

        transform: none !important;
    }


    .arthro-step .arthro-nav-info-text {
        position: static !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        gap: 2px !important;

        text-align: center !important;

        transform: none !important;
    }


    .arthro-step .arthro-nav-first-line {
        position: static !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        width: 100% !important;

        margin: 0 !important;

        line-height: 1.4 !important;

        transform: none !important;
    }


    .arthro-step .arthro-nav-info-text > span {
        position: static !important;

        width: auto !important;

        margin: 0 !important;

        line-height: 1.4 !important;

        transform: none !important;
    }


    /* -------------------------------------------------------
       WEITER
    ------------------------------------------------------- */

    .arthro-step .arthro-navigation .arthro-next {
        order: 2 !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 58px !important;
        height: auto !important;

        margin: 0 !important;
        padding:
            14px
            52px
            14px
            24px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* Weiter arrow */

    .arthro-step .arthro-next .arthro-intro-start-arrow {
        position: absolute !important;

        right: 22px !important;
        left: auto !important;

        top: 50% !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;
    }


    /* -------------------------------------------------------
       ZURÜCK
    ------------------------------------------------------- */

    .arthro-step .arthro-navigation .arthro-back {
        order: 3 !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 58px !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            14px
            52px
            14px
            52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* Zurück arrow */

    .arthro-step .arthro-back .arthro-arrow-back {
        position: absolute !important;

        left: 22px !important;
        right: auto !important;

        top: 50% !important;

        margin: 0 !important;

        transform:
            translateY(-50%)
            rotate(180deg) !important;
    }


    /* -------------------------------------------------------
       EXTRA BOTTOM SPACE
       Footer'a yapışmasın
    ------------------------------------------------------- */

    .arthro-step.active {
        padding-bottom: 28px !important;
    }

}

/* ==========================================================
   MOBILE – STEP 11 COMPLETE SCREEN – FINAL
   ==========================================================
   - Step 11 sadece ACTIVE olduğunda görünür
   - Sabit 496px / 565px yükseklikler kaldırılır
   - Footer overlap engellenir
   - Navigation mobilde dikey olur
========================================================== */

@media (max-width: 767px) {


    /* ======================================================
       QUESTION STEPS – FIXED HEIGHT RESET
    ====================================================== */

    #arthroWizard .arthro-step[data-step="1"],
    #arthroWizard .arthro-step[data-step="2"],
    #arthroWizard .arthro-step[data-step="3"],
    #arthroWizard .arthro-step[data-step="4"],
    #arthroWizard .arthro-step[data-step="5"],
    #arthroWizard .arthro-step[data-step="6"],
    #arthroWizard .arthro-step[data-step="7"],
    #arthroWizard .arthro-step[data-step="8"],
    #arthroWizard .arthro-step[data-step="9"],
    #arthroWizard .arthro-step[data-step="10"] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /* ======================================================
       STEP 11 – DEFAULT HIDDEN

       ÖNEMLİ:
       Active değilse kesinlikle görünmez.
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step[data-step="11"] {

        display: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /* ======================================================
       STEP 11 – ONLY WHEN ACTIVE
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"] {

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding-top: 10px !important;
        padding-bottom: 40px !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       COMPLETE ICON
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-complete-icon {

        flex-shrink: 0 !important;

        margin-bottom: 20px !important;
    }


    /* ======================================================
       TITLE
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-complete-title {

        margin-bottom: 24px !important;

        font-size: 24px !important;
        line-height: 1.3 !important;
    }


    /* ======================================================
       SUBTITLE
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-complete-subtitle {

        margin-bottom: 18px !important;
    }


    /* ======================================================
       DESCRIPTION
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-complete-text {

        margin-bottom: 26px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /* ======================================================
       WICHTIG / HINWEIS

       Desktop'taki margin-top:auto kaldırılıyor.
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-complete-hint {

        flex-shrink: 0 !important;

        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }


    /* ======================================================
       NAVIGATION
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-navigation {

        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       SECURITY INFO
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-nav-info {

        order: 1 !important;

        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: block !important;

        margin: 0 0 8px !important;
        padding: 0 8px !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-nav-info-text {

        position: static !important;

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.45 !important;

        text-align: center !important;

        transform: none !important;
    }


    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-nav-first-line {

        position: static !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        width: 100% !important;

        margin: 0 !important;

        transform: none !important;
    }


    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-nav-info-icon {

        display: inline-block !important;

        flex-shrink: 0 !important;

        margin: 0 !important;
    }


    /* ======================================================
       UPLOAD BUTTON
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-next {

        order: 2 !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 56px !important;
        height: auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        padding:
            14px
            52px
            14px
            24px !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       UPLOAD ARROW
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-next
    .arthro-intro-start-arrow {

        position: absolute !important;

        right: 22px !important;
        left: auto !important;

        top: 50% !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;
    }


    /* ======================================================
       BACK BUTTON
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-back {

        order: 3 !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 56px !important;
        height: auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        padding:
            14px
            52px
            14px
            52px !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       BACK ARROW
    ====================================================== */

    #arthroWizard
    .arthro-step.arthro-complete-step.active[data-step="11"]
    .arthro-back
    .arthro-arrow-back {

        position: absolute !important;

        left: 22px !important;
        right: auto !important;

        top: 50% !important;

        margin: 0 !important;

        transform:
            translateY(-50%)
            rotate(180deg) !important;
    }


    /* ======================================================
       WIZARD – FOOTER SPACE
    ====================================================== */

    #arthroWizard {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        margin-bottom: 60px !important;
    }

}

/* ==========================================================
   MOBILE – STEP 12 UPLOAD SCREEN – FINAL FIX
========================================================== */

@media (max-width: 767px) {

    /* ======================================================
       STEP 12 – CONTENT HEIGHT
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"] {
        display: none !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* Sadece aktif olduğunda göster */
    #arthroWizard
    .arthro-step.active[data-step="12"] {
        display: flex !important;
        flex-direction: column !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding-bottom: 40px !important;

        overflow: visible !important;
    }


    /* ======================================================
       UPLOAD TITLE / INTRO
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"] > h2 {
        margin-bottom: 14px !important;

        font-size: 23px !important;
        line-height: 1.3 !important;
    }


    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-upload-intro,
    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-step-description {
        margin:
            0
            0
            24px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /* ======================================================
       UPLOAD GRID
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-upload-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 22px !important;

        width: 100% !important;

        margin: 0 0 26px !important;
    }


    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-upload-box {
        width: 100% !important;

        margin: 0 !important;

        min-width: 0 !important;
    }


    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-upload-drop {
        width: 100% !important;

        height: auto !important;
        min-height: 145px !important;

        padding: 18px 14px !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       CONSENT
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-consent {
        width: 100% !important;

        margin:
            4px
            0
            24px !important;

        padding: 14px !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       DATENSCHUTZ INFO / LINK
       Butonun içine girmesin
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-upload-privacy-info {
        position: static !important;

        width: 100% !important;

        margin:
            0
            auto
            28px !important;

        padding: 0 8px !important;

        box-sizing: border-box !important;

        transform: none !important;

        text-align: center !important;
    }


    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-upload-privacy-info p {
        margin:
            0
            0
            8px !important;

        line-height: 1.5 !important;
    }


    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-upload-privacy-info a {
        display: inline-block !important;

        margin: 0 !important;

        line-height: 1.4 !important;
    }


    /* ======================================================
       NAVIGATION
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-navigation {
        position: static !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       AUSWERTUNG STARTEN
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"]
    #submitButton {
        order: 1 !important;

        position: relative !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        min-height: 58px !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            14px
            52px
            14px
            24px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* Start arrow */

    #arthroWizard
    .arthro-step[data-step="12"]
    #submitButton
    .arthro-intro-start-arrow {
        position: absolute !important;

        right: 22px !important;
        left: auto !important;

        top: 50% !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;
    }


    /* ======================================================
       ZURÜCK
    ====================================================== */

    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-back {
        order: 2 !important;

        position: relative !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        min-height: 58px !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            14px
            52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* Back arrow */

    #arthroWizard
    .arthro-step[data-step="12"]
    .arthro-back
    .arthro-arrow-back {
        position: absolute !important;

        left: 22px !important;
        right: auto !important;

        top: 50% !important;

        transform:
            translateY(-50%)
            rotate(180deg) !important;
    }


    /* ======================================================
       WIZARD MUST GROW WITH CONTENT
    ====================================================== */

    #arthroWizard {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        margin-bottom: 60px !important;
    }

}

/* ==========================================================
   MOBILE – PATIENT SUCCESS COMPACT FINAL
========================================================== */

@media (max-width: 767px) {

    /* Genel success alanı daha kompakt */
    #arthroPatientSuccess {
        padding:
            18px
            12px
            18px !important;

        justify-content: flex-start !important;
    }


    /* Üst ikon */
    #arthroPatientSuccess .arthro-success-main-icon {
        margin-bottom: 8px !important;
    }


    /* Başlık */
    #arthroPatientSuccess > h2 {
        margin-bottom: 6px !important;

        font-size: 20px !important;
        line-height: 1.2 !important;
    }


    /* Açıklama */
    #arthroPatientSuccess .arthro-success-intro {
        max-width: 100% !important;

        margin-bottom: 14px !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
    }


    /* Mavi bilgi kutusu */
    #arthroPatientSuccess .arthro-success-next {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 20px !important;

        padding:
            14px
            12px
            18px !important;

        border-radius: 10px !important;
    }


    /* Was passiert jetzt? */
    #arthroPatientSuccess .arthro-success-next h3 {
        margin-bottom: 10px !important;

        font-size: 15px !important;
        line-height: 1.25 !important;
    }


    /* Maddeler arası boşluk */
    #arthroPatientSuccess .arthro-success-next .arthro-success-steps {
        gap: 9px !important;
    }


    /* Her madde */
    #arthroPatientSuccess .arthro-success-next .arthro-success-step {
        width: 100% !important;
        max-width: 100% !important;

        gap: 7px !important;

        margin: 0 !important;
    }


    /* Check */
    #arthroPatientSuccess
    .arthro-success-next
    .arthro-success-step
    .arthro-success-step-check {
        width: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;

        flex: 0 0 17px !important;

        margin-top: 2px !important;
    }


    #arthroPatientSuccess
    .arthro-success-next
    .arthro-success-step
    .arthro-success-step-check svg {
        width: 17px !important;
        height: 17px !important;
    }


    /* Step textleri ekrana daha rahat sığsın */
    #arthroPatientSuccess
    .arthro-success-next
    .arthro-success-step
    p {
        width: auto !important;
        max-width: none !important;

        flex: 1 1 auto !important;

        font-size: 12px !important;
        line-height: 1.45 !important;

        text-align: left !important;
    }


    /* Startseite butonunu biraz aşağı al */
    #arthroPatientSuccess a.arthro-success-button {
        width: 210px !important;
        max-width: calc(100% - 20px) !important;

        height: 44px !important;
        min-height: 44px !important;

        margin:
            10px
            auto
            4px !important;

        font-size: 13px !important;
    }


    /* Eski negatif margin varsa kesin kaldır */
    #arthroPatientSuccess a.arthro-success-button {
        margin-top: 10px !important;
    }
}

/* ==========================================================
   ARTHRO SECURE PAGE WITH THEME HEADER / FOOTER
========================================================== */

body.arthro-secure-page {
    width: 100%;

    min-height: 600px;

    padding: 28px 20px;

    box-sizing: border-box;

    background: #F3F8FC;
}


body.arthro-secure-page .arthro-report-card {
    margin-left: auto !important;
    margin-right: auto !important;
}


@media (max-width: 767px) {

    body.arthro-secure-page {
        padding:
            16px
            10px
            24px;
    }

}

/* ==========================================================
   REPORT PAGE WITH NORMAL THEME HEADER / FOOTER
   FINAL FIX
========================================================== */


/* Sayfa normal şekilde aşağı scroll olabilsin */

html,
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/* ==========================================================
   ARTHRO REPORT PAGE BACKGROUND
========================================================== */

main.arthro-secure-page {
    width: 100% !important;

    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
        28px
        20px
        40px !important;

    box-sizing: border-box !important;

    background: #F2FBFF !important;

    overflow: visible !important;
}


/* ==========================================================
   WHITE REPORT CARD
========================================================== */

main.arthro-secure-page .arthro-report-card {
    width: 100% !important;
    max-width: 1024px !important;

    margin:
        0
        auto !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   NORMAL REPORT PAGE
   Card sayfayı kilitlemesin
========================================================== */

main.arthro-secure-page
.arthro-report-card:not(.arthro-medical-form-screen) {
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}


/* ==========================================================
   MEDICAL FORM SCREEN
   İç scroll burada devam etsin
========================================================== */

main.arthro-secure-page
.arthro-report-card.arthro-medical-form-screen {
    height: calc(100vh - 160px) !important;

    min-height: 620px !important;
    max-height: 850px !important;

    overflow: hidden !important;
}


main.arthro-secure-page
.arthro-medical-form-screen
#arthroPatientForm {
    height: 100% !important;

    overflow-y: scroll !important;
    overflow-x: hidden !important;

    scrollbar-gutter: stable !important;
}


/* ==========================================================
   SUCCESS SCREEN
========================================================== */

main.arthro-secure-page
.arthro-report-card.arthro-report-card-success {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    main.arthro-secure-page {
        min-height: 100vh !important;

        padding:
            16px
            10px
            30px !important;

        overflow: visible !important;
    }


    main.arthro-secure-page .arthro-report-card {
        width: 100% !important;

        margin: 0 auto !important;
    }


    main.arthro-secure-page
    .arthro-report-card.arthro-medical-form-screen {
        height: calc(100vh - 120px) !important;

        min-height: 0 !important;
        max-height: none !important;

        overflow: hidden !important;
    }


    main.arthro-secure-page
    .arthro-medical-form-screen
    #arthroPatientForm {
        height: 100% !important;

        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

}

/* ==========================================================
   ARTHRO SECURE PAGE
   HEADER + CONTENT + FOOTER STACK FIX
========================================================== */

body.arthro-secure-page {
    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #F3F8FC !important;
}


/* ==========================================================
   ELEMENTOR HEADER – TEMPLATE 5600
   Sadece bizim header
========================================================== */

body.arthro-secure-page .elementor-5600 {
    width: 100% !important;
    flex: 0 0 auto !important;
}


/* ==========================================================
   ARTHRO CONTENT
========================================================== */

body.arthro-secure-page .arthro-secure-content {
    width: 100% !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    padding:
        28px
        20px
        40px !important;

    box-sizing: border-box !important;

    background: #F3F8FC !important;
}


body.arthro-secure-page .arthro-report-card {
    width: 100% !important;
    max-width: 1024px !important;

    margin:
        0
        auto !important;
}


/* ==========================================================
   ELEMENTOR FOOTER – TEMPLATE 5603
   Sadece bizim footer
========================================================== */

body.arthro-secure-page .elementor-5603 {
    width: 100% !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    clear: both !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    body.arthro-secure-page .arthro-secure-content {
        padding:
            16px
            10px
            28px !important;
    }

}


/* Elementor header/footer kendi stillerini korusun */

body.arthro-secure-page .elementor-5600,
body.arthro-secure-page .elementor-5603 {
    color: initial;
}

body.arthro-secure-page .elementor-5600 a,
body.arthro-secure-page .elementor-5603 a {
    color: inherit;
}

/* ==========================================================
   REPORT PAGE – BLUE BACKGROUND BEHIND WHITE CARD
========================================================== */

body.arthro-secure-page {
    margin: 0 !important;
    padding: 0 !important;

    background: #F2FBFF !important;
}


/* Beyaz kartın arkasındaki ana alan */
body.arthro-secure-page .arthro-secure-content {
    width: 100% !important;

    margin: 0 !important;

    padding:
        28px
        20px
        40px !important;

    box-sizing: border-box !important;

    background: #F2FBFF !important;
}


/* Beyaz kart beyaz kalacak */
body.arthro-secure-page .arthro-report-card {
    background: #FFFFFF !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* MOBILE */
@media (max-width: 767px) {

    body.arthro-secure-page .arthro-secure-content {
        padding:
            16px
            10px
            28px !important;

        background: #F2FBFF !important;
    }

}

body.arthro-secure-page
a.elementor-button .elementor-button-text {
    color: #fff !important;
}

/* ==========================================================
   SIMPLE STEP TRANSITION
========================================================== */

#arthroWizard .arthro-step.active {
    animation: arthroStepIn .8s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes arthroStepIn {

    from {
        opacity: 0;
        transform: translateX(28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ==========================================================
   MOBILE – FINAL NAVIGATION FIX
   ZURÜCK + WEITER YAN YANA
========================================================== */

@media (max-width: 767px) {

    #arthroWizard
    .arthro-step.active
    .arthro-navigation {

        position: relative !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-areas:
            "back next"
            "info info" !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        gap: 12px 10px !important;

        margin: 24px 0 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* ======================================================
       ZURÜCK
    ====================================================== */

    #arthroWizard
    .arthro-step.active
    .arthro-navigation
    > .arthro-back {

        grid-area: back !important;

        position: relative !important;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 54px !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 10px 38px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       WEITER
    ====================================================== */

    #arthroWizard
    .arthro-step.active
    .arthro-navigation
    > .arthro-next {

        grid-area: next !important;

        position: relative !important;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 54px !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 10px 38px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       SECURITY TEXT
    ====================================================== */

    #arthroWizard
    .arthro-step.active
    .arthro-navigation
    > .arthro-nav-info {

        grid-area: info !important;

        position: relative !important;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        text-align: center !important;
    }


    /* ======================================================
       ARROWS
    ====================================================== */

    #arthroWizard
    .arthro-back
    .arthro-arrow-back {

        position: absolute !important;

        left: 15px !important;
        right: auto !important;

        top: 50% !important;

        transform:
            translateY(-50%)
            rotate(180deg) !important;
    }


    #arthroWizard
    .arthro-next
    .arthro-intro-start-arrow {

        position: absolute !important;

        right: 15px !important;
        left: auto !important;

        top: 50% !important;

        transform: translateY(-50%) !important;
    }

}

/* ==========================================================
   ALREADY OPENED REPORT – CENTER CARD
========================================================== */

body.arthro-secure-page .arthro-message-card {
    width: calc(100% - 40px) !important;
    max-width: 720px !important;

    margin: 50px auto !important;

    box-sizing: border-box !important;
}