/* ─── Progress dots — kaldırıldı ─── */

.step-kicker,
.step1SubHeader,
.step0SubHeader {
    color: var(--brand-primary);
    font-weight: 600;
    text-align: center;
    font-size: 16px;
    margin: var(--space-md) 0;
    width: 100%;
}

.step0SubHeader {
    font-size: 16px;
    font-weight: 700;
    margin: var(--space-md) 0;
    text-transform: none;
}

.screen-title,
.Step1TopTitle,
.Step1Title {
    font-weight: 700;
    color: var(--text);
    text-align: center;
    font-size: clamp(14px, 2vw, 16px);
    margin: 0 0 var(--space-md);
    width: 100%;
    line-height: 1.4;
}

.step3Title,
.Step4TopTitle {
    text-align: center;
    color: var(--brand-primary);
    font-weight: 700;
    margin: 0 0 var(--space-md);
    font-size: clamp(12px, 1.6vh, 14px);
    line-height: 1.45;
    padding: var(--space-md) 0 var(--space-sm);
}

/* ─── Welcome (step 0) — dikey denge ─── */
#step0Card.active {
    justify-content: flex-start;
    height: min(86%, 920px);
}

#step0Card .cardContent {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    justify-content: flex-start;
    gap: clamp(8px, 1.5vh, 16px);
}

#step0Card .step0CardContainer {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    overflow: hidden;
}

#step0Card .methodInformation {
    flex: 1 1 0;
    min-height: 0;
}

#step0Card .cardFooter {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: clamp(8px, 1.2vh, 14px);
}

.step0CardContainer {
    color: var(--text);
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

.methodInformation {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(18px, 2.8vh, 30px) 12px;
    border-bottom: 1px solid darkgray;
    width: 100%;
}

.methodInformation:last-child {
    border-bottom: none;
}

.methodInformation .step-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 28px;
}

.methodInformation .imgInfoAsset1,
.methodInformation .imgInfoAsset2,
.methodInformation .imgInfoAsset3,
.methodInformation .imgInfoAsset4 {
    display: none;
}

.step0p {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: var(--text);
    line-height: 1.55;
    flex: 1;
    text-align: left;
}

.step0pSubTitle {
    margin: clamp(10px, 1.5vh, 16px) auto 0;
    font-weight: 400;
    font-size: clamp(10px, 1.1vh, 11px);
    color: var(--text-muted);
    text-align: justify;
    width: 100%;
    line-height: 1.5;
}

/* ─── Karşılama — çözünürlük bazlı ─── */

/* Büyük masaüstü 1600px+ (1920×1080 vb.) */
@media only screen and (min-width: 1600px) {
    #step0Card.active {
        height: min(88%, 940px);
    }

    #step0Card .mynetworklogo {
        width: min(340px, 24vw);
        max-width: 340px;
        padding-top: clamp(12px, 2vh, 22px);
        margin-bottom: var(--space-sm);
    }

    #step0Card .step0SubHeader {
        margin: clamp(8px, 1.2vh, 16px) 0;
        font-size: 16px;
    }

    #step0Card .methodInformation {
        padding: clamp(12px, 2vh, 24px) 16px;
    }

    #step0Card .step0p {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* Standart masaüstü / laptop 1025px – 1599px */
@media only screen and (min-width: 1025px) and (max-width: 1599px) {
    #step0Card .mynetworklogo {
        width: min(320px, 32vw);
        max-width: 320px;
        padding-top: clamp(12px, 2vh, 24px);
        margin-bottom: var(--space-sm);
    }

    #step0Card .step0SubHeader {
        margin: clamp(10px, 1.5vh, 18px) 0;
        font-size: 15px;
    }

    #step0Card .methodInformation {
        padding: clamp(18px, 2.5vh, 26px) 12px;
    }

    #step0Card .step0p {
        font-size: 13px;
        line-height: 1.5;
    }
}

/* Tablet 769px – 1024px */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #step0Card .mynetworklogo {
        width: min(300px, 45vw);
        padding-top: 16px;
        margin-bottom: var(--space-sm);
    }

    #step0Card .step0SubHeader {
        margin: 14px 0;
        font-size: 14px;
    }

    #step0Card .methodInformation {
        padding: 20px 10px;
        gap: 14px;
    }

    #step0Card .step0p {
        font-size: 13px;
    }

    #step0Card .step0CardContainer {
        justify-content: flex-start;
        gap: 0;
    }
}

/* Mobil ≤768px */
@media only screen and (max-width: 768px) {
    #step0Card.active {
        height: calc(100% - 200px);
        overflow-y: auto;
    }

    #step0Card .cardContent,
    #step0Card .step0CardContainer {
        flex: none;
        min-height: auto;
        overflow: visible;
    }

    #step0Card .methodInformation {
        flex: none;
        min-height: auto;
    }

    #step0Card .mynetworklogo {
        width: min(280px, 70vw);
        padding-top: 8px;
        margin-bottom: var(--space-xs);
    }

    #step0Card .step0SubHeader {
        margin: 10px 0;
        font-size: 13px;
    }

    #step0Card .methodInformation {
        padding: 16px 8px;
        gap: 12px;
        align-items: flex-start;
    }

    #step0Card .methodInformation .step-icon {
        width: 32px;
        height: 32px;
        font-size: 24px;
    }

    #step0Card .step0p {
        font-size: 12px;
        line-height: 1.45;
    }

    #step0Card .step0CardContainer {
        justify-content: flex-start;
    }

    #step0Card .cardContent {
        justify-content: flex-start;
        gap: 10px;
    }
}

/* Küçük mobil ≤480px */
@media only screen and (max-width: 480px) {
    #step0Card .methodInformation {
        padding: 14px 4px;
    }

    #step0Card .step0p {
        font-size: 11px;
    }

    #step0Card .step0pSubTitle {
        font-size: 9px;
    }
}

/* Kısa ekran yüksekliği */
@media only screen and (max-height: 700px) and (min-width: 769px) {
    #step0Card .methodInformation {
        padding: 12px 10px;
    }

    #step0Card .step0p {
        font-size: 12px;
        line-height: 1.4;
    }

    #step0Card .mynetworklogo {
        width: min(240px, 30vw);
        padding-top: 8px;
    }
}

/* ─── Method selection cards ─── */
.cardContainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    max-width: 800px;
    margin: 24px auto 0;
    padding: 0;
}

.methodSelectionButton {
    background: var(--surface);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-md);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 240px;
    min-height: 120px;
    padding: 20px 10px;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: border-color var(--transition-fast), background var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.methodSelectionButton:hover {
    border-color: rgba(200, 98, 26, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(200, 98, 26, 0.12);
}

.methodSelectionButton.active {
    border-color: var(--brand-primary);
    background: var(--brand-accent-bg);
    box-shadow: 0 8px 24px rgba(200, 98, 26, 0.16);
}

.methodSelectionButton .method-icon {
    font-size: 32px;
    color: var(--brand-primary);
    margin-bottom: 12px;
    line-height: 1;
}

.methodSelectionButton img {
    display: none;
}

.methodSelectionButton p {
    color: var(--text);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
}

/* ─── Method input step ─── */
.methodSelectionInfo {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition);
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    width: 100%;
}

.methodSelectionInfo.active {
    opacity: 1;
    transform: translateY(0);
}

#methodSelectionDetailInput {
    display: none;
    margin-top: 0;
}

#methodSelectionDetailInput.visible {
    display: block;
}

.inputRowHeader {
    width: 100%;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.row > .inputRowHeader:first-child {
    margin-top: 0;
}

/* ─── SMS step ─── */
.sendAgainButton {
    text-align: center;
    margin: 12px 0 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    opacity: 1;
    pointer-events: auto;
    transition: color var(--transition-fast);
}

.sms-input {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.08em;
    max-width: 200px;
    margin: 16px auto 0;
    display: block;
}

/* ─── Success screen ─── */
.success-icon-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 20px;
}

.success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #2e7d32 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.25);
}

.Step5Title {
    text-align: center;
    color: var(--text);
    font-weight: 700;
    font-size: clamp(18px, 3vw, 22px);
    margin: 0 0 12px;
}

.Step5SubTitle {
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.Step5TopTitle {
    display: none;
}

.infoCardDetail {
    font-weight: 700;
    text-align: left;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: var(--space-md) 0 0;
}

.checkbox-row.invalid-highlight .custom-checkbox-mark {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-soft);
}

.step2cardContainer,
.step3CardContainer,
.step4CardContainer,
.step5CardContainer {
    width: 100%;
}

#step3Card .step3CardContainer {
    text-align: left;
    flex: 0 0 auto;
}

#step3Card .nextButton,
#step4Card .nextButton,
#step2Card .nextButton,
#step1Card .nextButton {
    display: flex;
}

body.personnel .cardContainer {
    flex-wrap: wrap;
    max-width: 280px;
    margin-inline: auto;
}

body.personnel #phoneMethodSelectionButton {
    display: flex !important;
}

@media (max-width: 781px) {
    .cardContainer {
        flex-wrap: wrap;
        max-width: 340px;
        gap: 16px;
    }

    .methodSelectionButton {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        min-height: 110px;
    }
}

@media (max-width: 480px) {
    .methodInformation {
        padding: 14px 0;
    }

    .step0p {
        font-size: 13px;
    }

    .methodSelectionButton {
        min-height: 100px;
    }
}