/* AM_PRODUCTION_FLOW_V4 */

[data-am-flow-v4="panel"] {
    container-type: inline-size !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 17px !important;
    overflow: hidden !important;
    color: #edf4ff !important;
    background:
        radial-gradient(circle at 5% 2%, rgba(91, 143, 255, .13), transparent 27%),
        linear-gradient(180deg, rgba(12, 25, 45, .98), rgba(6, 15, 28, .99)) !important;
    border: 1px solid #263d5e !important;
    border-radius: 25px !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .03) !important;
    box-sizing: border-box !important;
}

[data-am-flow-v4="panel"] *,
[data-am-flow-v4="panel"] *::before,
[data-am-flow-v4="panel"] *::after {
    box-sizing: border-box !important;
}

.am-flow-v4-header {
    margin-bottom: 13px !important;
}

.am-flow-v4-eyebrow {
    margin-bottom: 7px !important;
    color: #79a9ff !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 1.05px !important;
    text-transform: uppercase !important;
}

.am-flow-v4-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.am-flow-v4-title {
    margin: 0 !important;
    color: #f5f8ff !important;
    font-size: clamp(22px, 2.2vw, 32px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: -.7px !important;
}

.am-flow-v4-active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 79px !important;
    height: 33px !important;
    padding: 0 12px !important;
    color: #e1ecff !important;
    background: linear-gradient(180deg, #183b71, #102b53) !important;
    border: 1px solid #4d80d7 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.am-flow-v4-subtitle {
    margin-top: 7px !important;
    color: #a6b6ca !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.am-flow-v4-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding: 6px !important;
    background: rgba(3, 10, 20, .48) !important;
    border: 1px solid rgba(255, 255, 255, .055) !important;
    border-radius: 13px !important;
}

.am-flow-v4-phase {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 5px !important;
    color: #8496ae !important;
    background: rgba(255, 255, 255, .025) !important;
    border-radius: 9px !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .35px !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.am-flow-v4-phase.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #396fd9, #4d8dff) !important;
}

.am-flow-v4-progress {
    margin-bottom: 13px !important;
    padding: 9px 10px !important;
    background: rgba(3, 10, 20, .40) !important;
    border: 1px solid rgba(255, 255, 255, .055) !important;
    border-radius: 13px !important;
}

.am-flow-v4-progress-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 7px !important;
    color: #afbdd0 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

.am-flow-v4-progress-track {
    height: 6px !important;
    overflow: hidden !important;
    background: #102038 !important;
    border-radius: 999px !important;
}

.am-flow-v4-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #5b91ff, #49dbea, #38d38c) !important;
    border-radius: 999px !important;
}

.am-flow-v4-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.am-flow-v4-card {
    --am-accent: #6499ff;
    --am-soft: rgba(100, 153, 255, .12);

    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 62px 23px !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 59px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    overflow: hidden !important;
    color: #edf4ff !important;
    background:
        linear-gradient(90deg, var(--am-soft), rgba(6, 16, 30, .72) 42%),
        rgba(7, 17, 31, .90) !important;
    border: 1px solid #2a415f !important;
    border-radius: 15px !important;
    box-shadow:
        inset 3px 0 0 var(--am-accent),
        0 6px 15px rgba(0, 0, 0, .11) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition:
        transform .14s ease,
        border-color .14s ease,
        box-shadow .14s ease,
        background .14s ease !important;
}

.am-flow-v4-card:link,
.am-flow-v4-card:visited {
    color: #edf4ff !important;
    text-decoration: none !important;
}

.am-flow-v4-card:hover,
.am-flow-v4-card:focus-visible {
    transform: translateY(-1px) !important;
    border-color: var(--am-accent) !important;
    background:
        linear-gradient(90deg, var(--am-soft), rgba(13, 31, 58, .86) 68%),
        rgba(8, 20, 38, .96) !important;
    box-shadow:
        inset 3px 0 0 var(--am-accent),
        0 10px 22px rgba(0, 0, 0, .19) !important;
    outline: none !important;
}

.am-flow-v4-card.is-current {
    border-color: var(--am-accent) !important;
    background:
        linear-gradient(90deg, var(--am-soft), rgba(19, 43, 80, .93) 76%),
        rgba(11, 28, 52, .97) !important;
    box-shadow:
        inset 4px 0 0 var(--am-accent),
        0 9px 22px rgba(0, 0, 0, .18) !important;
}

.am-flow-v4-card.is-locked {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

.am-flow-v4-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 37px !important;
    height: 37px !important;
    color: #fff !important;
    background: var(--am-accent) !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    border-radius: 11px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 6px 13px var(--am-soft) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.am-flow-v4-copy {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.am-flow-v4-step-title {
    display: block !important;
    margin-bottom: 3px !important;
    overflow: hidden !important;
    color: #f3f7ff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
    letter-spacing: -.1px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.am-flow-v4-step-description {
    display: block !important;
    overflow: hidden !important;
    color: #9fafc3 !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.am-flow-v4-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.am-flow-v4-status.status-active {
    color: #fff !important;
    background: #427bea !important;
    border-color: #6599ff !important;
}

.am-flow-v4-status.status-ready {
    color: #9effd2 !important;
    background: #103c31 !important;
    border-color: #1c7057 !important;
}

.am-flow-v4-status.status-live {
    color: #a7ffe3 !important;
    background: #0d3931 !important;
    border-color: #1b6452 !important;
}

.am-flow-v4-status.status-complete {
    color: #b8ffd2 !important;
    background: #123d2c !important;
    border-color: #277149 !important;
}

.am-flow-v4-status.status-waiting {
    color: #ffe3a0 !important;
    background: #403316 !important;
    border-color: #735d2a !important;
}

.am-flow-v4-status.status-locked {
    color: #bdc8d8 !important;
    background: #1a2b42 !important;
    border-color: #304663 !important;
}

.am-flow-v4-status.status-open {
    color: #b9ddff !important;
    background: #163451 !important;
    border-color: #285b87 !important;
}

.am-flow-v4-status.status-error {
    color: #ffc4cd !important;
    background: #4a2029 !important;
    border-color: #813746 !important;
}

.am-flow-v4-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 23px !important;
    height: 23px !important;
    color: #c7d6ea !important;
    background: rgba(255, 255, 255, .055) !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.am-flow-v4-card:hover .am-flow-v4-arrow {
    color: #fff !important;
    background: var(--am-accent) !important;
}

.am-flow-v4-note {
    margin-top: 11px !important;
    padding: 8px 9px !important;
    color: #879ab3 !important;
    background: rgba(4, 11, 21, .35) !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-radius: 11px !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/* Dar sol ve sağ sütunlarda otomatik kompaktlaşır. */
@container (max-width: 470px) {
    [data-am-flow-v4="panel"] {
        padding: 13px !important;
        border-radius: 20px !important;
    }

    .am-flow-v4-title {
        font-size: 25px !important;
    }

    .am-flow-v4-subtitle {
        font-size: 10px !important;
    }

    .am-flow-v4-card {
        grid-template-columns: 34px minmax(0, 1fr) 55px 21px !important;
        gap: 7px !important;
        min-height: 53px !important;
        padding: 7px 8px !important;
        border-radius: 13px !important;
    }

    .am-flow-v4-number {
        width: 33px !important;
        height: 33px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .am-flow-v4-step-title {
        font-size: 11px !important;
    }

    .am-flow-v4-step-description {
        font-size: 8px !important;
    }

    .am-flow-v4-status {
        width: 55px !important;
        min-width: 55px !important;
        height: 23px !important;
        font-size: 7px !important;
    }

    .am-flow-v4-arrow {
        width: 21px !important;
        height: 21px !important;
        font-size: 13px !important;
    }
}

@container (max-width: 350px) {
    .am-flow-v4-card {
        grid-template-columns: 32px minmax(0, 1fr) 50px !important;
    }

    .am-flow-v4-arrow {
        display: none !important;
    }

    .am-flow-v4-status {
        width: 50px !important;
        min-width: 50px !important;
    }
}


/* WF_FLOW_15_COLORS_BEGIN */

.sm-flow-item {
    --step-color: #64748b;
}

.sm-flow-item[data-step="01"] { --step-color: #3b82f6; }
.sm-flow-item[data-step="02"] { --step-color: #06b6d4; }
.sm-flow-item[data-step="03"] { --step-color: #8b5cf6; }
.sm-flow-item[data-step="04"] { --step-color: #d946ef; }
.sm-flow-item[data-step="05"] { --step-color: #f97316; }
.sm-flow-item[data-step="06"] { --step-color: #14b8a6; }
.sm-flow-item[data-step="07"] { --step-color: #22c55e; }
.sm-flow-item[data-step="08"] { --step-color: #f59e0b; }
.sm-flow-item[data-step="09"] { --step-color: #ef4444; }
.sm-flow-item[data-step="10"] { --step-color: #f43f5e; }
.sm-flow-item[data-step="11"] { --step-color: #6366f1; }
.sm-flow-item[data-step="12"] { --step-color: #0ea5e9; }
.sm-flow-item[data-step="13"] { --step-color: #84cc16; }
.sm-flow-item[data-step="14"] { --step-color: #ec4899; }
.sm-flow-item[data-step="15"] { --step-color: #a855f7; }

.sm-flow-item[data-step] {
    border-color:
        color-mix(
            in srgb,
            var(--step-color) 42%,
            rgba(148, 163, 184, .22)
        ) !important;
}

.sm-flow-item[data-step] strong {
    color: var(--step-color) !important;
}

.sm-flow-item[data-step].active {
    border-color: var(--step-color) !important;

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--step-color) 30%,
            transparent
        ) !important;
}

/* WF_FLOW_15_COLORS_END */