/**
 * Formlasana Akıllı Beslenme Planlayıcı - Tema Uyumlu & Tam Responsive Ön Yüz Stilleri
 * Masaüstünde Şık 8px Çerçeveli Kart | Mobilde Çerçevesiz (Kutusuz) Ferah Sayfa Akışı
 */

:root {
    --fs-bg: #FFFFFF;
    --fs-surface: #FFFFFF;
    --fs-text-main: #18181B;
    --fs-text-muted: #52525B;
    --fs-text-subtle: #A1A1AA;
    --fs-border: #E4E4E7;
    --fs-border-dark: #18181B;
    --fs-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   GENEL SARMALAYICI VE KART DÜZENİ
   ========================================================================== */

.fs-planner-wrapper {
    width: 100% !important;
    max-width: 720px !important;
    margin: 20px auto 60px !important;
    padding: 0 16px !important;
    font-family: var(--fs-font) !important;
    color: var(--fs-text-main) !important;
    box-sizing: border-box !important;
    line-height: 1.6 !important;
    letter-spacing: -0.01em !important;
    -webkit-font-smoothing: antialiased !important;
    overflow-x: hidden !important;
}

.fs-planner-wrapper * {
    box-sizing: border-box !important;
}

/* 
 * MASAÜSTÜNDE KART (Formlasana Klinik Standartı: 1px solid #E4E4E7, 8px radius)
 * Mobilde bu kutu tamamen şeffaf/çerçevesiz hale gelecektir.
 */
.fs-card {
    background: #FFFFFF !important;
    border: 1px solid var(--fs-border) !important;
    border-radius: 8px !important;
    padding: 38px 34px !important;
    box-shadow: none !important;
    width: 100% !important;
    transition: border-color 0.2s ease !important;
    overflow: hidden !important;
}

/* ==========================================================================
   ÜST BAŞLIK VE ROZET
   ========================================================================== */

.fs-head {
    text-align: center !important;
    margin-bottom: 28px !important;
    width: 100% !important;
}

.fs-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #F4F5F6 !important;
    color: var(--fs-text-muted) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    margin-bottom: 14px !important;
}

.fs-head h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.05rem) !important;
    font-weight: 800 !important;
    color: var(--fs-text-main) !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 10px !important;
    line-height: 1.25 !important;
}

.fs-sub {
    font-size: 0.94rem !important;
    color: var(--fs-text-muted) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
}

/* ==========================================================================
   6 ADIMLI İLERLEME ÇUBUĞU
   ========================================================================== */

.fs-prog-wrapper {
    position: relative !important;
    margin: 0 auto 22px !important;
    max-width: 440px !important;
    width: 100% !important;
    padding: 0 4px !important;
}

.fs-prog-bar {
    position: absolute !important;
    top: 15px !important;
    left: 16px !important;
    right: 16px !important;
    height: 1px !important;
    background: var(--fs-border) !important;
    z-index: 1 !important;
}

.fs-prog-steps {
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 2 !important;
}

.fs-prog-node {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--fs-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--fs-text-subtle) !important;
    transition: all 0.2s ease !important;
}

.fs-prog-node.active {
    border-color: var(--fs-border-dark) !important;
    color: var(--fs-text-main) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.08) !important;
}

.fs-prog-node.completed {
    border-color: var(--fs-border-dark) !important;
    background: var(--fs-border-dark) !important;
    color: #FFFFFF !important;
}

.fs-step-indicator {
    text-align: center !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--fs-text-muted) !important;
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--fs-border) !important;
}

/* Adım Panelleri */
.fs-step-pane {
    display: none;
    animation: fsFadeIn 0.2s ease forwards;
    width: 100% !important;
}

.fs-step-pane.active {
    display: block !important;
}

@keyframes fsFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.fs-step-pane h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--fs-text-main) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
}

.fs-hint {
    font-size: 0.9rem !important;
    color: var(--fs-text-muted) !important;
    margin: 0 0 20px !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   FORM ELEMANLARI (TAŞMAYI ÖNLEYEN 100% KUTU BOYUTLANDIRMASI)
   ========================================================================== */

.fs-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

.fs-field {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.fs-field label, .fs-label-head {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--fs-text-main) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.fs-input-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

.fs-field input[type=number],
.fs-field input[type=text],
.fs-field input[type=email],
.fs-field input[type=tel],
.fs-field input[type=time],
.fs-field select,
.fs-textarea {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--fs-border) !important;
    border-radius: 4px !important;
    font-size: 16px !important; /* iOS Safari otomatik zoom'u engeller */
    font-family: inherit !important;
    color: var(--fs-text-main) !important;
    background: #FFFFFF !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fs-input-box input {
    padding-right: 48px !important;
}

.fs-unit {
    position: absolute !important;
    right: 14px !important;
    font-size: 0.82rem !important;
    color: var(--fs-text-subtle) !important;
    font-weight: 600 !important;
    pointer-events: none !important;
}

.fs-field input:focus,
.fs-field select:focus,
.fs-textarea:focus {
    outline: none !important;
    border-color: var(--fs-border-dark) !important;
    box-shadow: 0 0 0 1px var(--fs-border-dark) !important;
}

/* ==========================================================================
   SEÇENEK KARTLARI (HEDEF & AKTİVİTE)
   ========================================================================== */

.fs-options-3col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
    width: 100% !important;
}

.fs-opt-card {
    border: 1px solid var(--fs-border) !important;
    border-radius: 6px !important;
    padding: 16px 14px !important;
    cursor: pointer !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

.fs-opt-card:hover {
    border-color: var(--fs-border-dark) !important;
}

.fs-opt-card input {
    margin-top: 3px !important;
    accent-color: var(--fs-border-dark) !important;
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
}

.fs-opt-card.selected {
    border-color: var(--fs-border-dark) !important;
    background: #F8F9FA !important;
}

.fs-opt-content strong {
    display: block !important;
    font-size: 0.91rem !important;
    color: var(--fs-text-main) !important;
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.fs-opt-content small {
    display: block !important;
    font-size: 0.8rem !important;
    color: var(--fs-text-muted) !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   ALERJEN VE GIDA ÇİPLERİ
   ========================================================================== */

.fs-chips-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.fs-chip {
    cursor: pointer !important;
    display: block !important;
    width: 100% !important;
}

.fs-chip input {
    display: none !important;
}

.fs-chip span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 14px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--fs-border) !important;
    border-radius: 4px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: var(--fs-text-muted) !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    min-height: 46px !important;
    width: 100% !important;
}

.fs-chip:hover span {
    border-color: var(--fs-border-dark) !important;
    color: var(--fs-text-main) !important;
}

.fs-chip input:checked + span {
    background: var(--fs-border-dark) !important;
    border-color: var(--fs-border-dark) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   TÜKETİLMEYEN BESİNLER METİN ALANI
   ========================================================================== */

.fs-textarea {
    width: 100% !important;
    min-height: 110px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--fs-border) !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    color: var(--fs-text-main) !important;
    background: #FFFFFF !important;
    resize: vertical !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   KVKK / AÇIK RIZA KARTI
   ========================================================================== */

.fs-consent-card {
    background: #F8F9FA !important;
    border: 1px solid var(--fs-border) !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

.fs-consent-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 0.83rem !important;
    color: var(--fs-text-muted) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

.fs-consent-label input {
    margin-top: 3px !important;
    accent-color: var(--fs-border-dark) !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   BUTONLAR (Temanın .fs-btn, .fs-btn-primary İle Birebir 4px Radius)
   ========================================================================== */

.fs-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 26px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--fs-border) !important;
    gap: 14px !important;
    width: 100% !important;
}

.fs-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 26px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    min-height: 44px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.fs-btn-primary {
    background: #18181B !important;
    color: #FFFFFF !important;
    border: 1px solid #18181B !important;
    margin-left: auto !important;
}

.fs-btn-primary:hover {
    background: #FFFFFF !important;
    color: #18181B !important;
}

.fs-btn-alt {
    background: #FFFFFF !important;
    color: #18181B !important;
    border: 1px solid var(--fs-border) !important;
}

.fs-btn-alt:hover {
    border-color: var(--fs-border-dark) !important;
    color: var(--fs-border-dark) !important;
}

.fs-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Hata Kutusu */
.fs-alert {
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-size: 0.88rem !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.fs-alert-danger {
    background: #FEF2F2 !important;
    border: 1px solid #FEE2E2 !important;
    border-left: 4px solid #DC2626 !important;
    color: #991B1B !important;
}

/* ==========================================================================
   BAŞARI EKRANI (E-Posta Taşmasını Önleyen word-break)
   ========================================================================== */

.fs-success-card {
    text-align: center !important;
    padding: 40px 18px !important;
    width: 100% !important;
}

.fs-success-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #F0FDF4 !important;
    color: #16A34A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px !important;
}

.fs-success-card h2 {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: var(--fs-text-main) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 10px !important;
}

.fs-success-desc {
    font-size: 0.96rem !important;
    color: var(--fs-text-muted) !important;
    max-width: 520px !important;
    margin: 0 auto 22px !important;
}

.fs-success-box {
    background: #F8F9FA !important;
    border: 1px solid var(--fs-border) !important;
    border-radius: 6px !important;
    max-width: 440px !important;
    width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 16px 20px !important;
    text-align: left !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.fs-box-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--fs-border) !important;
    font-size: 0.88rem !important;
    gap: 12px !important;
    width: 100% !important;
}

.fs-box-row:last-child {
    border-bottom: none !important;
}

.fs-box-row span {
    color: var(--fs-text-muted) !important;
    flex-shrink: 0 !important;
}

/* E-posta adresi asla kutudan dışarı taşamaz */
.fs-box-row strong {
    color: var(--fs-text-main) !important;
    text-align: right !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    max-width: 65% !important;
}

/* ==========================================================================
   MOBİLDE KUTUYU KALDIRAN VE FERAH SAYFA AKIŞI SAĞLAYAN MİMARİ
   ========================================================================== */

@media (max-width: 640px) {
    /* MOBİLDE KUTU VE DIŞ KENARLIKLARI TAMAMEN KALDIR */
    .fs-planner-wrapper {
        padding: 0 !important;
        margin: 10px auto 40px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .fs-card {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    .fs-head {
        margin-bottom: 18px !important;
    }

    .fs-head h1 {
        font-size: 1.35rem !important;
    }

    .fs-sub {
        font-size: 0.86rem !important;
    }

    /* Mobilde 2 sütunlu elemanları tek sütuna indir */
    .fs-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    .fs-field {
        margin-bottom: 14px !important;
        width: 100% !important;
    }

    /* Seçenek kartları mobilde rahat, geniş ve dokunmatik */
    .fs-options-3col {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    .fs-opt-card {
        padding: 16px 14px !important;
        border-radius: 6px !important;
        width: 100% !important;
    }

    /* Alerjen butonları mobilde tek sütun */
    .fs-chips-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Aksiyon Butonları Mobilde %100 Tam Genişlik */
    .fs-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        margin-top: 24px !important;
        padding-top: 16px !important;
        width: 100% !important;
    }

    .fs-actions .fs-btn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 0.96rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        border-radius: 4px !important;
    }

    #fsBtnPrev[style*="none"] {
        display: none !important;
    }

    /* Başarı ekranı mobilde taşmayı önleme */
    .fs-success-card {
        padding: 24px 8px !important;
    }

    .fs-box-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 8px 0 !important;
    }

    .fs-box-row strong {
        text-align: left !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .fs-prog-node {
        width: 26px !important;
        height: 26px !important;
        font-size: 10px !important;
    }

    .fs-prog-bar {
        top: 13px !important;
        left: 12px !important;
        right: 12px !important;
    }

    .fs-step-indicator {
        font-size: 0.72rem !important;
        margin-bottom: 16px !important;
        padding-bottom: 10px !important;
    }

    .fs-step-pane h2 {
        font-size: 1.12rem !important;
    }

    .fs-hint {
        font-size: 0.83rem !important;
        margin-bottom: 16px !important;
    }

    .fs-success-box {
        padding: 12px 14px !important;
    }
}