/* =========================================================
   CODECOSOFT AI
   GLOBAL DESIGN SYSTEM
========================================================= */

:root {
    color-scheme: light;

    /* -----------------------------------------------------
       BACKGROUND
    ----------------------------------------------------- */

    --bg: #f7f9fc;

    --surface:
        rgba(255, 255, 255, 0.88);

    --surface-solid:
        #ffffff;

    --surface-2:
        #f2f5f9;

    --surface-3:
        #e9eef5;


    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    --text:
        #101828;

    --text-2:
        #344054;

    --muted:
        #667085;

    --muted-2:
        #98a2b3;


    /* -----------------------------------------------------
       BORDER
    ----------------------------------------------------- */

    --line:
        #e4e9f0;

    --line-strong:
        #d6dde8;


    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    --primary:
        #0e9faf;

    --primary-2:
        #19b9c7;

    --primary-hover:
        #087f8d;

    --primary-soft:
        rgba(14, 159, 175, 0.10);

    --primary-soft-2:
        rgba(14, 159, 175, 0.16);

    --cyan:
        #22c7d6;


    /* -----------------------------------------------------
       STATUS
    ----------------------------------------------------- */

    --success:
        #0f9870;

    --success-soft:
        #e8f8f2;

    --warning:
        #b7791f;

    --warning-soft:
        #fff7e6;

    --danger:
        #d7475f;

    --danger-soft:
        #fff0f3;


    /* -----------------------------------------------------
       SHADOWS
    ----------------------------------------------------- */

    --shadow-xs:
        0 1px 2px
        rgba(16, 24, 40, 0.04);

    --shadow-sm:
        0 1px 2px
        rgba(16, 24, 40, 0.04),
        0 5px 18px
        rgba(16, 24, 40, 0.045);

    --shadow-md:
        0 18px 45px
        rgba(16, 24, 40, 0.10);

    --shadow-lg:
        0 35px 90px
        rgba(16, 24, 40, 0.16);


    /* -----------------------------------------------------
       RADII
    ----------------------------------------------------- */

    --radius-xs:
        8px;

    --radius-sm:
        10px;

    --radius:
        16px;

    --radius-lg:
        22px;

    --radius-xl:
        28px;


    /* -----------------------------------------------------
       FONT
    ----------------------------------------------------- */

    --font:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   DARK THEME
========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg:
        #0b111b;

    --surface:
        rgba(18, 26, 39, 0.90);

    --surface-solid:
        #111a28;

    --surface-2:
        #172131;

    --surface-3:
        #202b3d;

    --text:
        #f5f7fa;

    --text-2:
        #c8d0dc;

    --muted:
        #8f9bad;

    --muted-2:
        #69768a;

    --line:
        #263247;

    --line-strong:
        #35445d;

    --primary:
        #3dc8d4;

    --primary-2:
        #4ad9c5;

    --primary-hover:
        #67dce5;

    --primary-soft:
        rgba(61, 200, 212, 0.11);

    --primary-soft-2:
        rgba(61, 200, 212, 0.18);

    --cyan:
        #46d5df;

    --success:
        #49c99e;

    --success-soft:
        rgba(73, 201, 158, 0.12);

    --warning:
        #efbd68;

    --warning-soft:
        rgba(239, 189, 104, 0.12);

    --danger:
        #ff748b;

    --danger-soft:
        rgba(255, 116, 139, 0.12);

    --shadow-xs:
        0 1px 2px
        rgba(0, 0, 0, 0.15);

    --shadow-sm:
        0 2px 4px
        rgba(0, 0, 0, 0.10),
        0 9px 28px
        rgba(0, 0, 0, 0.12);

    --shadow-md:
        0 20px 55px
        rgba(0, 0, 0, 0.28);

    --shadow-lg:
        0 38px 100px
        rgba(0, 0, 0, 0.42);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family: var(--font);

    color: var(--text);

    background: var(--bg);

    font-size: 14px;

    line-height: 1.5;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


button,
input,
textarea,
select {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


button {
    color: inherit;
}


a {
    color: inherit;
}


img {
    max-width: 100%;
}


svg {
    display: block;
}


::selection {
    background:
        var(--primary-soft-2);

    color:
        var(--text);
}


/* =========================================================
   FOCUS
========================================================= */

:focus {
    outline: none;
}


:focus-visible {
    outline:
        2px solid
        var(--primary);

    outline-offset:
        2px;
}


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

.btn {
    min-height: 42px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        1px solid
        transparent;

    border-radius:
        11px;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        opacity 0.16s ease;
}


.btn:hover:not(:disabled) {
    transform:
        translateY(-1px);
}


.btn:active:not(:disabled) {
    transform:
        translateY(0);
}


.btn:disabled {
    opacity:
        0.48;

    cursor:
        not-allowed;
}


/* PRIMARY */

.btn-primary {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-2)
        );

    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        );
}


.btn-primary:hover:not(:disabled) {
    box-shadow:
        0 12px 30px
        color-mix(
            in srgb,
            var(--primary) 27%,
            transparent
        );
}


/* SECONDARY */

.btn-secondary {
    color:
        var(--text);

    background:
        var(--surface-solid);

    border-color:
        var(--line);
}


.btn-secondary:hover:not(:disabled) {
    border-color:
        var(--line-strong);

    background:
        var(--surface-2);

    box-shadow:
        var(--shadow-xs);
}


/* GHOST */

.btn-ghost {
    color:
        var(--text-2);

    background:
        transparent;
}


.btn-ghost:hover:not(:disabled) {
    color:
        var(--text);

    background:
        var(--surface-2);
}


/* DANGER */

.btn-danger {
    color:
        var(--danger);

    background:
        var(--danger-soft);

    border-color:
        color-mix(
            in srgb,
            var(--danger) 18%,
            transparent
        );
}


/* SIZE */

.btn-sm {
    min-height:
        36px;

    padding:
        0 12px;

    border-radius:
        9px;

    font-size:
        12px;
}


.btn-lg {
    min-height:
        50px;

    padding:
        0 22px;

    border-radius:
        13px;

    font-size:
        14px;

    font-weight:
        750;
}


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

.icon-btn {
    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border:
        1px solid
        var(--line);

    border-radius:
        11px;

    background:
        var(--surface-solid);

    color:
        var(--text-2);

    cursor:
        pointer;

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


.icon-btn:hover {
    color:
        var(--text);

    background:
        var(--surface-2);

    border-color:
        var(--line-strong);

    box-shadow:
        var(--shadow-xs);
}


.icon-btn:active {
    transform:
        scale(0.97);
}


.icon-btn svg {
    width:
        18px;

    height:
        18px;
}


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

.card {
    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-sm);
}


.card-head {
    min-height:
        70px;

    padding:
        17px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    border-bottom:
        1px solid
        var(--line);
}


.card-head h2,
.card-head h3 {
    margin:
        0;

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        750;

    letter-spacing:
        -0.25px;
}


.card-head p {
    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.55;
}


.card-body {
    padding:
        20px;
}


/* =========================================================
   FORMS
========================================================= */

.field {
    display:
        grid;

    gap:
        8px;
}


.field label {
    color:
        var(--text-2);

    font-size:
        12px;

    font-weight:
        700;
}


.field-hint {
    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.55;
}


.input,
.textarea,
.select {
    width:
        100%;

    border:
        1px solid
        var(--line);

    border-radius:
        11px;

    outline:
        none;

    background:
        var(--surface-solid);

    color:
        var(--text);

    font-size:
        13px;

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


.input,
.select {
    min-height:
        44px;

    padding:
        0 13px;
}


.textarea {
    min-height:
        125px;

    padding:
        12px 13px;

    line-height:
        1.65;

    resize:
        vertical;
}


.input:hover:not(:disabled),
.textarea:hover:not(:disabled),
.select:hover:not(:disabled) {
    border-color:
        var(--line-strong);
}


.input:focus,
.textarea:focus,
.select:focus {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 65%,
            var(--line)
        );

    box-shadow:
        0 0 0 3px
        var(--primary-soft);
}


.input::placeholder,
.textarea::placeholder {
    color:
        var(--muted-2);
}


.input:disabled,
.textarea:disabled,
.select:disabled {
    background:
        var(--surface-2);

    color:
        var(--muted);

    cursor:
        not-allowed;
}


.form-row {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px;
}


/* =========================================================
   BADGES
========================================================= */

.badge,
.status,
.plan-badge {
    min-height:
        24px;

    width:
        fit-content;

    padding:
        4px 9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1;

    letter-spacing:
        0.01em;

    white-space:
        nowrap;
}


.badge {
    background:
        var(--surface-2);

    color:
        var(--text-2);
}


.status.completed,
.badge.success {
    background:
        var(--success-soft);

    color:
        var(--success);
}


.status.processing,
.badge.info {
    background:
        var(--primary-soft);

    color:
        var(--primary);
}


.status.failed,
.badge.danger {
    background:
        var(--danger-soft);

    color:
        var(--danger);
}


.status.pending,
.badge.warning {
    background:
        var(--warning-soft);

    color:
        var(--warning);
}


.plan-badge {
    color:
        var(--primary);

    background:
        var(--primary-soft);
}


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

.notice {
    padding:
        13px 15px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    color:
        var(--text-2);

    font-size:
        12px;

    line-height:
        1.6;
}


.notice.info {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 20%,
            var(--line)
        );

    background:
        var(--primary-soft);
}


.notice.warn {
    border-color:
        color-mix(
            in srgb,
            var(--warning) 25%,
            var(--line)
        );

    background:
        var(--warning-soft);
}


.notice.danger {
    border-color:
        color-mix(
            in srgb,
            var(--danger) 25%,
            var(--line)
        );

    background:
        var(--danger-soft);
}


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

.progress {
    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--surface-3);
}


.progress > span {
    display:
        block;

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--cyan)
        );

    transition:
        width 0.35s ease;
}


/* =========================================================
   MODAL
========================================================= */

.modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(15, 23, 42, 0.32);

    backdrop-filter:
        blur(8px);

    animation:
        modalFade 0.16s ease;
}


html[data-theme="dark"] .modal {
    background:
        rgba(2, 6, 14, 0.66);
}


.modal.open {
    display:
        flex;
}


.modal-card {
    width:
        min(560px, 100%);

    max-height:
        min(88vh, 920px);

    overflow:
        auto;

    padding:
        24px;

    border:
        1px solid
        var(--line);

    border-radius:
        20px;

    background:
        var(--surface-solid);

    box-shadow:
        var(--shadow-lg);

    animation:
        modalUp 0.18s ease;
}


.modal-card.wide {
    width:
        min(1100px, 100%);
}


.modal-card h3 {
    margin:
        0;

    color:
        var(--text);

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        -0.55px;
}


.modal-card > p {
    margin:
        8px 0 20px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.65;
}


.modal-actions {
    margin-top:
        20px;

    display:
        flex;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        9px;
}


@keyframes modalFade {
    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }
}


@keyframes modalUp {
    from {
        opacity:
            0;

        transform:
            translateY(10px)
            scale(0.985);
    }

    to {
        opacity:
            1;

        transform:
            none;
    }
}


/* =========================================================
   TOAST
========================================================= */

.toast-wrap {
    position:
        fixed;

    top:
        22px;

    right:
        22px;

    z-index:
        6000;

    display:
        grid;

    gap:
        9px;

    pointer-events:
        none;
}


.toast {
    min-width:
        290px;

    max-width:
        440px;

    padding:
        13px 15px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        var(--surface-solid);

    color:
        var(--text);

    box-shadow:
        var(--shadow-md);

    font-size:
        12px;

    line-height:
        1.55;

    animation:
        toastIn 0.18s ease;
}


.toast.success {
    border-left:
        3px solid
        var(--success);
}


.toast.error {
    border-left:
        3px solid
        var(--danger);
}


.toast.info {
    border-left:
        3px solid
        var(--primary);
}


@keyframes toastIn {
    from {
        opacity:
            0;

        transform:
            translateY(-7px);
    }

    to {
        opacity:
            1;

        transform:
            none;
    }
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty {
    padding:
        42px 18px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;

    text-align:
        center;
}


/* =========================================================
   CODE BLOCK
========================================================= */

.codebox {
    padding:
        16px;

    overflow:
        auto;

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

    border-radius:
        13px;

    background:
        #101827;

    color:
        #dbeafe;

    font:
        12px/1.7
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    white-space:
        pre-wrap;

    word-break:
        break-word;
}


html[data-theme="dark"] .codebox {
    background:
        #070c13;
}


/* =========================================================
   REVEAL / SCROLL EFFECT
========================================================= */

.reveal {
    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity 0.65s ease,
        transform 0.65s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );
}


.reveal.visible {
    opacity:
        1;

    transform:
        none;
}


/* Stagger desteği */

.reveal-delay-1 {
    transition-delay:
        0.06s;
}

.reveal-delay-2 {
    transition-delay:
        0.12s;
}

.reveal-delay-3 {
    transition-delay:
        0.18s;
}


/* =========================================================
   SCREEN READER
========================================================= */

.sr-only {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;
}


/* =========================================================
   SCROLLBAR
========================================================= */

html {
    scrollbar-width:
        thin;

    scrollbar-color:
        var(--line-strong)
        transparent;
}


::-webkit-scrollbar {
    width:
        9px;

    height:
        9px;
}


::-webkit-scrollbar-track {
    background:
        transparent;
}


::-webkit-scrollbar-thumb {
    border:
        2px solid
        transparent;

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--muted) 42%,
            transparent
        );

    background-clip:
        padding-box;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}


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

@media (
    max-width:
    720px
) {

    body {
        font-size:
            14px;
    }


    .form-row {
        grid-template-columns:
            1fr;
    }


    .card-head {
        padding:
            16px;

        align-items:
            flex-start;
    }


    .card-body {
        padding:
            16px;
    }


    .modal {
        padding:
            12px;

        align-items:
            flex-end;
    }


    .modal-card {
        max-height:
            92vh;

        padding:
            19px;

        border-radius:
            20px 20px
            14px 14px;
    }


    .modal-card h3 {
        font-size:
            18px;
    }


    .modal-actions {
        flex-direction:
            column-reverse;
    }


    .modal-actions .btn {
        width:
            100%;
    }


    .toast-wrap {
        top:
            12px;

        left:
            12px;

        right:
            12px;
    }


    .toast {
        min-width:
            0;

        max-width:
            none;
    }

}