/* =====================================================================
   MODERN.CSS - Sysmond modern tasarim katmani
   site.css'ten SONRA yuklenir (_Host.cshtml). Var olan sinif adlarini
   yeniden yazmaz; renk/golge/kose gibi gorunumu iyilestirir ve yeni
   yardimci (utility) siniflar ekler.

   TASARIM DEGISKENLERI (:root)
     --ui-primary / --ui-primary-2 / --ui-accent / --ui-navy ...  renkler
     --ui-radius-sm|md|lg|xl   kose yaricaplari
     --ui-shadow-sm|md|lg      golgeler
     --ui-grad-hero            sayfa basligi / hero gradyani

   YENIDEN KULLANILABILIR SINIFLAR
     .hero-header            Gradyanli buyuk baslik bandi
        .hero-eyebrow          ust kucuk etiket (pill)
        .hero-title            ana baslik
        .hero-sub              alt aciklama
        .hero-side             sag taraf (rozet/kart alani)
     .kpi-grid               KPI kartlari icin otomatik grid
     .kpi-card               KPI karti (beyaz, renkli ikon kutusu)
        .kpi-icon .kpi-label .kpi-value .kpi-sub
        renkler: .kpi-blue .kpi-green .kpi-orange .kpi-purple .kpi-red .kpi-teal
        .kpi-solid             kartin tamami gradyan (beyaz yazi)
     .qa-grid / .qa-tile     Hizli erisim kutulari (.qa-icon .qa-title .qa-desc .qa-arrow)
        renkler: .kpi-* siniflari qa-tile ile de calisir
     .section-title          Kucuk, buyuk harfli bolum basligi
     .glass / .glass-dark    Cam (glassmorphism) yuzey
     .surface                Beyaz kart yuzeyi (golge + kose)
     .fade-in-up / .fade-in / .scale-in   Giris animasyonlari
     .stagger                Cocuklarina sirali gecikme uygular
     .skeleton (.skeleton-text, .skeleton-circle)  Yukleniyor parlama efekti
     .hover-lift             Uzerine gelince yukari kalkma

   Animasyonlar prefers-reduced-motion ile kapatilir.
   ===================================================================== */

:root {
    --ui-font: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --ui-navy: #0f2340;
    --ui-navy-2: #16325c;
    --ui-primary: #2563eb;
    --ui-primary-2: #4f46e5;
    --ui-primary-soft: rgba(37, 99, 235, 0.10);
    --ui-accent: #c8a030;
    --ui-accent-2: #f0c850;
    --ui-success: #16a34a;
    --ui-danger: #dc2626;
    --ui-warning: #f59e0b;
    --ui-info: #0891b2;

    --ui-bg: #eef2f8;
    --ui-surface: #ffffff;
    --ui-border: rgba(15, 35, 64, 0.09);
    --ui-text: #0f172a;
    --ui-muted: #64748b;

    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-xl: 22px;

    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --ui-shadow-md: 0 4px 14px rgba(15, 35, 64, 0.08), 0 2px 4px rgba(15, 35, 64, 0.05);
    --ui-shadow-lg: 0 18px 40px rgba(15, 35, 64, 0.16), 0 4px 10px rgba(15, 35, 64, 0.06);

    --ui-grad-hero: linear-gradient(120deg, #0f2340 0%, #1e3a8a 42%, #2563eb 74%, #0ea5e9 100%);
    --ui-grad-primary: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
    --ui-ease: cubic-bezier(.2, .8, .2, 1);

    /* Bootstrap gövde fontu */
    --bs-body-font-family: var(--ui-font);
}

/* ---------- Temel ---------- */
html, body {
    font-family: var(--ui-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--ui-bg);
    color: var(--ui-text);
}

/* İçerik alanı: yumuşak arka plan */
.content, main {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(37, 99, 235, 0.07), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, rgba(200, 160, 48, 0.06), transparent 60%),
        var(--ui-bg) !important;
}

/* ---------- Sayfa kutusu (ByPageBody ByCssClass="page-box") ---------- */
.page-box {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    padding: 4px;
    animation: ui-fade-in-up .38s var(--ui-ease) both;
}

/* ---------- Sayfa başlığı (ByPageCaption -> .mpage-caption / ByPageHeader -> .page-header) ---------- */
div.mpage-caption,
div.page-header.shadow-sm.rounded {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ui-grad-hero) !important;
    background-size: 160% 160% !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ui-radius-md) !important;
    padding: 6px 14px !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    box-shadow: 0 8px 22px rgba(30, 58, 138, 0.22) !important;
    animation: ui-hero-shift 14s ease-in-out infinite alternate;
}

    div.mpage-caption::before,
    div.page-header.shadow-sm.rounded::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(260px 120px at 85% -40%, rgba(255, 255, 255, 0.28), transparent 70%),
            radial-gradient(200px 90px at 10% 140%, rgba(240, 200, 80, 0.25), transparent 70%);
        pointer-events: none;
    }

    div.mpage-caption::after,
    div.page-header.shadow-sm.rounded::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--ui-accent-2), transparent);
        opacity: .8;
        pointer-events: none;
    }

    div.mpage-caption > *,
    div.page-header.shadow-sm.rounded > * {
        position: relative;
        z-index: 1;
    }

    div.mpage-caption .pageheadercaption,
    div.page-header.shadow-sm.rounded .pageheadercaption {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    }

    div.mpage-caption .btn.btn-primary,
    div.page-header.shadow-sm.rounded .btn.btn-primary {
        background: rgba(255, 255, 255, 0.16) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 9px !important;
        box-shadow: none !important;
        color: #fff !important;
        transition: background .2s, transform .2s !important;
    }

        div.mpage-caption .btn.btn-primary:hover,
        div.page-header.shadow-sm.rounded .btn.btn-primary:hover {
            background: rgba(255, 255, 255, 0.28) !important;
            transform: translateY(-1px) !important;
        }

/* ---------- Kartlar ---------- */
.card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

.card-header {
    background: var(--ui-grad-hero) !important;
    border-bottom: 2px solid var(--ui-accent) !important;
    border-radius: calc(var(--ui-radius-lg) - 1px) calc(var(--ui-radius-lg) - 1px) 0 0 !important;
    font-weight: 600 !important;
}

.ci-filter-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    background: var(--ui-surface);
}

.ci-filter-header {
    background: linear-gradient(90deg, #f6f8fc 0%, #edf2fb 100%) !important;
    color: var(--ui-navy) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    position: relative;
}

    .ci-filter-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--ui-grad-primary);
    }

/* ---------- Accordion (filtre / liste başlıkları) ---------- */
.dxbl-accordion .dxbl-accordion-item-header {
    background: linear-gradient(90deg, #f6f8fc 0%, #eef3fb 100%) !important;
    border-left: 3px solid var(--ui-primary) !important;
    color: var(--ui-navy) !important;
    transition: background .2s;
}

    .dxbl-accordion .dxbl-accordion-item-header:hover {
        background: linear-gradient(90deg, #eaf1ff 0%, #e0eafc 100%) !important;
    }

.dxbl-accordion .dxbl-accordion-item-content {
    background: #fbfcfe !important;
    border-left: 3px solid rgba(37, 99, 235, 0.10) !important;
}

/* ---------- Butonlar ---------- */
.btn {
    border-radius: var(--ui-radius-sm);
}

.btn-primary {
    background: var(--ui-grad-primary) !important;
    border-color: #1e40af !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%) !important;
        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
    }

.btn-success {
    background: linear-gradient(135deg, #15803d, #16a34a 60%, #22c55e) !important;
    border-color: #15803d !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #b91c1c, #dc2626 60%, #ef4444) !important;
    border-color: #b91c1c !important;
}

.btn-secondary {
    background: linear-gradient(135deg, #475569, #64748b) !important;
    border-color: #475569 !important;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30) !important;
}

/* ---------- DevExpress grid ---------- */
.dxbl-grid {
    --dxbl-grid-border-radius: var(--ui-radius-md);
    --dxbl-grid-border-color: rgba(15, 35, 64, 0.10);
}

    .dxbl-grid .dxbl-grid-header-row {
        background: linear-gradient(180deg, #f5f8fd 0%, #e9f0fa 100%) !important;
        color: var(--ui-navy) !important;
    }

        .dxbl-grid .dxbl-grid-header-row > th {
            border-bottom: 2px solid rgba(37, 99, 235, 0.18) !important;
        }

    /* Zebra + hover: background-image kullanilir, boylece sayfalarin satir renkleri (background-color) korunur */
    .dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-edit-row):nth-child(even) > td {
        background-image: linear-gradient(rgba(15, 35, 64, 0.025), rgba(15, 35, 64, 0.025));
    }

    .dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-edit-row):hover > td {
        background-image: linear-gradient(rgba(37, 99, 235, 0.07), rgba(37, 99, 235, 0.07));
    }

    .dxbl-grid .dxbl-grid-group-row > td {
        background: #f3f6fb;
        font-weight: 600;
    }

    .dxbl-grid > .dxbl-grid-toolbar-container {
        background: linear-gradient(90deg, #f7f9fd, #eef3fb) !important;
        border-bottom: 1px solid var(--ui-border) !important;
    }

/* ---------- Form layout / editörler ---------- */
.dxbl-fl .dxbl-fl-cpt {
    font-weight: 600;
    color: #334155;
}

.dxbl-text-edit {
    --dxbl-text-edit-border-radius: var(--ui-radius-sm);
    transition: box-shadow .2s, border-color .2s;
}

    .dxbl-text-edit:focus-within {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    }

.form-control:focus, .form-select:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

/* ---------- Sekmeler ---------- */
.dxbl-tabs .dxbl-tabs-item {
    transition: color .2s, background-color .2s;
}

    .dxbl-tabs .dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):hover {
        color: var(--ui-primary);
    }

    .dxbl-tabs .dxbl-tabs-item.dxbl-active {
        color: var(--ui-primary) !important;
        font-weight: 600;
    }

/* ---------- Toast ---------- */
.dxbl-toast {
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
}

/* ---------- Loading panel ---------- */
.dxbl-loading-panel-content {
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

/* ---------- Kaydırma çubuğu ---------- */
::-webkit-scrollbar-thumb {
    background: #b8c4d8;
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--ui-primary);
    }

/* =====================================================================
   YARDIMCI SINIFLAR
   ===================================================================== */

/* ---------- Yüzeyler ---------- */
.surface {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.glass {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ui-radius-lg);
    color: #fff;
}

.hover-lift {
    transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease);
}

    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: var(--ui-shadow-lg);
    }

/* ---------- Hero başlık ---------- */
.hero-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 26px 30px;
    border-radius: var(--ui-radius-xl);
    background: var(--ui-grad-hero);
    background-size: 180% 180%;
    color: #fff;
    box-shadow: 0 18px 40px rgba(30, 58, 138, 0.25);
    animation: ui-hero-shift 16s ease-in-out infinite alternate;
}

    .hero-header::before,
    .hero-header::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(2px);
    }

    .hero-header::before {
        width: 340px;
        height: 340px;
        right: -90px;
        top: -170px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 65%);
        animation: ui-float 12s ease-in-out infinite;
    }

    .hero-header::after {
        width: 260px;
        height: 260px;
        left: 30%;
        bottom: -180px;
        background: radial-gradient(circle, rgba(240, 200, 80, 0.28), transparent 65%);
        animation: ui-float 15s ease-in-out infinite reverse;
    }

    .hero-header > * {
        position: relative;
        z-index: 1;
    }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.hero-title {
    margin: 8px 0 4px;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.2;
    color: #fff;
}

.hero-sub {
    margin: 0;
    font-size: .92rem;
    color: rgba(255, 255, 255, 0.78);
}

.hero-side {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Bölüm başlığı ---------- */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 2px 12px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ui-muted);
}

    .section-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(100, 116, 139, 0.35), transparent);
    }

    .section-title > i {
        color: var(--ui-primary);
    }

/* ---------- KPI kartları ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.kpi-card {
    --kpi-c: #2563eb;
    --kpi-grad: linear-gradient(135deg, #1d4ed8, #3b82f6);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease);
}

    .kpi-card::after {
        content: "";
        position: absolute;
        right: -30px;
        top: -30px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: var(--kpi-c);
        opacity: .08;
        transition: transform .4s var(--ui-ease);
        pointer-events: none;
    }

    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--ui-shadow-lg);
    }

        .kpi-card:hover::after {
            transform: scale(1.25);
        }

.kpi-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--kpi-grad);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 8px 18px -6px var(--kpi-c);
}

.kpi-body {
    min-width: 0;
}

.kpi-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.kpi-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.kpi-sub {
    font-size: .78rem;
    color: var(--ui-muted);
    margin-top: 2px;
}

.kpi-blue { --kpi-c: #2563eb; --kpi-grad: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.kpi-green { --kpi-c: #16a34a; --kpi-grad: linear-gradient(135deg, #15803d, #22c55e); }
.kpi-orange { --kpi-c: #ea580c; --kpi-grad: linear-gradient(135deg, #c2410c, #f59e0b); }
.kpi-purple { --kpi-c: #7c3aed; --kpi-grad: linear-gradient(135deg, #6d28d9, #a855f7); }
.kpi-red { --kpi-c: #dc2626; --kpi-grad: linear-gradient(135deg, #b91c1c, #f43f5e); }
.kpi-teal { --kpi-c: #0d9488; --kpi-grad: linear-gradient(135deg, #0f766e, #06b6d4); }

.kpi-card.kpi-solid {
    background: var(--kpi-grad);
    border-color: transparent;
    color: #fff;
}

    .kpi-card.kpi-solid .kpi-icon {
        background: rgba(255, 255, 255, 0.18);
        box-shadow: none;
    }

    .kpi-card.kpi-solid .kpi-label,
    .kpi-card.kpi-solid .kpi-sub {
        color: rgba(255, 255, 255, 0.8);
    }

    .kpi-card.kpi-solid .kpi-value {
        color: #fff;
    }

    .kpi-card.kpi-solid::after {
        background: #fff;
        opacity: .12;
    }

/* ---------- Hızlı erişim kutuları ---------- */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.qa-tile {
    --kpi-c: #2563eb;
    --kpi-grad: linear-gradient(135deg, #1d4ed8, #3b82f6);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    cursor: pointer;
    user-select: none;
    transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .25s;
}

    .qa-tile::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--kpi-grad);
        opacity: 0;
        transition: opacity .3s var(--ui-ease);
    }

    .qa-tile > * {
        position: relative;
        z-index: 1;
    }

    .qa-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px -12px var(--kpi-c);
        border-color: transparent;
    }

        .qa-tile:hover::before {
            opacity: 1;
        }

    .qa-tile:active {
        transform: translateY(-1px);
    }

.qa-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--kpi-grad);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 8px 16px -8px var(--kpi-c);
    transition: background .3s, transform .3s var(--ui-ease);
}

.qa-text {
    flex: 1;
    min-width: 0;
}

.qa-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ui-text);
    transition: color .25s;
}

.qa-desc {
    font-size: .78rem;
    color: var(--ui-muted);
    margin-top: 2px;
    transition: color .25s;
}

.qa-arrow {
    color: #cbd5e1;
    transition: color .25s, transform .25s var(--ui-ease);
}

.qa-tile:hover .qa-icon {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.06) rotate(-4deg);
}

.qa-tile:hover .qa-title { color: #fff; }
.qa-tile:hover .qa-desc { color: rgba(255, 255, 255, 0.8); }
.qa-tile:hover .qa-arrow { color: #fff; transform: translateX(4px); }

.qa-tile.kpi-blue { --kpi-c: #2563eb; --kpi-grad: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.qa-tile.kpi-green { --kpi-c: #16a34a; --kpi-grad: linear-gradient(135deg, #15803d, #22c55e); }
.qa-tile.kpi-orange { --kpi-c: #ea580c; --kpi-grad: linear-gradient(135deg, #c2410c, #f59e0b); }
.qa-tile.kpi-purple { --kpi-c: #7c3aed; --kpi-grad: linear-gradient(135deg, #6d28d9, #a855f7); }
.qa-tile.kpi-red { --kpi-c: #dc2626; --kpi-grad: linear-gradient(135deg, #b91c1c, #f43f5e); }
.qa-tile.kpi-teal { --kpi-c: #0d9488; --kpi-grad: linear-gradient(135deg, #0f766e, #06b6d4); }

/* ---------- Skeleton ---------- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e5eaf2;
    border-radius: var(--ui-radius-sm);
    color: transparent !important;
}

    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
        animation: ui-shimmer 1.4s infinite;
    }

.skeleton-text {
    height: .9em;
    margin: .35em 0;
}

.skeleton-circle {
    border-radius: 50%;
}

/* ---------- Animasyonlar ---------- */
.fade-in-up {
    animation: ui-fade-in-up .5s var(--ui-ease) both;
}

.fade-in {
    animation: ui-fade-in .5s ease both;
}

.scale-in {
    animation: ui-scale-in .45s var(--ui-ease) both;
}

.stagger > * {
    animation: ui-fade-in-up .5s var(--ui-ease) both;
}

    .stagger > *:nth-child(1) { animation-delay: .04s; }
    .stagger > *:nth-child(2) { animation-delay: .08s; }
    .stagger > *:nth-child(3) { animation-delay: .12s; }
    .stagger > *:nth-child(4) { animation-delay: .16s; }
    .stagger > *:nth-child(5) { animation-delay: .20s; }
    .stagger > *:nth-child(6) { animation-delay: .24s; }
    .stagger > *:nth-child(7) { animation-delay: .28s; }
    .stagger > *:nth-child(8) { animation-delay: .32s; }
    .stagger > *:nth-child(9) { animation-delay: .36s; }
    .stagger > *:nth-child(10) { animation-delay: .40s; }
    .stagger > *:nth-child(11) { animation-delay: .44s; }
    .stagger > *:nth-child(n+12) { animation-delay: .48s; }

/* Not: bitis karesinde transform "none" olmali; aksi halde icteki position:fixed popup'lar kayar */
@keyframes ui-fade-in-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes ui-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ui-scale-in {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes ui-shimmer {
    100% { transform: translateX(100%); }
}

@keyframes ui-hero-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes ui-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-24px, 18px); }
}

@media (max-width: 600px) {
    .hero-header {
        padding: 20px 18px;
        border-radius: var(--ui-radius-lg);
    }

    .hero-title {
        font-size: 1.3rem;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kpi-card {
        padding: 12px;
        gap: 10px;
    }

    .kpi-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 1rem;
    }

    .kpi-value {
        font-size: 1.1rem;
    }

    .qa-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}