/*
 * ============================================================================
 * Vadeli Tedarik — Yönetim paneli teması (Filament 4)
 * Bayi panelinin (apps/web) görsel eşi: aynı kabuk, aynı renk, aynı ölçüler.
 * Kaynak değerler: apps/web/src/app/globals.css, components/ui, components/app-shell
 * (28.09.2026 turu: sol vurgu çizgisi yok, ferah satırlar, 15 px ikonlu düz menü).
 *
 * Derleme yok: AppServiceProvider → FilamentAsset → `php artisan filament:assets`
 * dosyayı public/css/app/ altına kopyalar (Docker imajında Node gerekmez).
 * Filament'in kuralları @layer içindedir; buradaki katmansız kurallar her zaman önceliklidir.
 * Renkler Filament'in panel değişkenlerinden gelir (AdminPanelProvider::colors):
 *   --primary-* lacivert marka · --gray-* slate · --success-* emerald · --warning-* amber
 *   --danger-* rose · --info-* sky · --indigo-* · --purple-*
 * ============================================================================
 */

:root {
    --app-line: #e2e8f0;           /* slate-200: dış kenarlık */
    --app-line-soft: #f1f5f9;      /* slate-100: kart içi ayraç */
    --app-row-line: #e8edf3;       /* tablo satır ayracı */
    --app-page: #f8fafc;           /* slate-50: içerik zemini */
    --app-ink: #0f172a;            /* slate-900 */
    --app-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --app-pop-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.25);
    --app-gradient: linear-gradient(180deg, #102d55 0%, #0b2140 100%);
    --app-gradient-fallback: #0b2140;
    --app-focus: 0 0 0 1px var(--primary-500), 0 0 0 3px rgb(43 92 158 / 0.2);
}

/* ---------------------------------------------------------------------------
 * 1. Temel
 * ------------------------------------------------------------------------- */
html.fi,
.fi-body {
    background-color: var(--app-page);
}

.fi-body {
    color: var(--app-ink);
    text-rendering: optimizeLegibility;
}

/* Filament'in kendi (üst barsız düzendeki) yüzen menü düğmesi: yerini üst bardaki düğme alır */
.fi-body > .fi-layout-sidebar-toggle-btn-ctn {
    display: none;
}

/* ---------------------------------------------------------------------------
 * 2. Kenar çubuğu — 260 px marka gradyanı, tek düz liste (bayi: app-shell Sidebar)
 * ------------------------------------------------------------------------- */
.fi-main-sidebar {
    background-color: var(--app-gradient-fallback);
    background-image: var(--app-gradient);
    border-inline-end: 1px solid rgb(11 33 64 / 0.4);
    color: rgb(255 255 255 / 0.85);
}

.fi-main-sidebar.fi-sidebar-open {
    box-shadow: none;
}

.fi-sidebar-header-ctn {
    flex-shrink: 0;
}

.fi-main-sidebar .fi-sidebar-header,
:not(.fi-body-has-topbar) .fi-main-sidebar .fi-sidebar-header {
    height: 4rem;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 1.25rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    background: transparent;
    box-shadow: none;
}

.fi-main-sidebar .fi-sidebar-header .fi-logo {
    margin-inline-start: 0;
}

.fi-main-sidebar .fi-sidebar-header a:focus-visible {
    border-radius: 0.375rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.fi-main-sidebar .fi-sidebar-nav {
    padding: 1rem 0.75rem 0.75rem;
    row-gap: 0;
    scrollbar-width: none;
}

.fi-main-sidebar .fi-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.fi-main-sidebar .fi-sidebar-nav-groups {
    flex: 1;
    margin-inline: 0;
    row-gap: 0.25rem;
}

.fi-main-sidebar .fi-sidebar-group,
.fi-main-sidebar .fi-sidebar-group-items,
.fi-main-sidebar .fi-sidebar-sub-group-items,
.fi-main-sidebar .fi-sidebar-item.fi-active,
.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-active-child-items {
    row-gap: 0.25rem;
}

/* Öğe: 15 px, 20 px ikon, dolgulu aktif zemin — sol çizgi yok */
.fi-main-sidebar .fi-sidebar-item-btn,
.fi-main-sidebar .fi-sidebar-group-btn {
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 150ms, color 150ms;
}

.fi-main-sidebar .fi-sidebar-item-btn > .fi-icon,
.fi-main-sidebar .fi-sidebar-group-btn > .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(255 255 255 / 0.6);
    stroke-width: 1.75;
}

.fi-main-sidebar .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-group-label {
    font-size: 15px;
    line-height: 1.5rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(255 255 255 / 0.8);
}

.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
.fi-main-sidebar .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:hover {
    background-color: rgb(255 255 255 / 0.07);
}

.fi-main-sidebar .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-group-btn:hover > .fi-sidebar-group-label {
    color: #fff;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / 0.14);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    font-weight: 600;
    color: #fff;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-icon,
.fi-main-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-icon {
    color: #fff;
}

.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-sidebar-group-label {
    color: #fff;
}

/* Klavye odağı (A-198): kenar çubuğundaki düz öğeler ve grup başlıkları belirgin halka alır (Filament odak gölgesini siliyor). */
.fi-main-sidebar .fi-sidebar-item-btn:focus-visible,
.fi-main-sidebar .fi-sidebar-group-btn:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.85);
    outline-offset: -2px;
    background-color: rgb(255 255 255 / 0.1);
}

/* Açılır grup başlığı: öğe gibi görünür, sağda küçük ok */
.fi-main-sidebar .fi-sidebar-group-collapse-btn {
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-end: -0.25rem;
    color: rgb(255 255 255 / 0.45);
    background: transparent;
}

.fi-main-sidebar .fi-sidebar-group-collapse-btn .fi-icon {
    width: 1rem;
    height: 1rem;
    color: inherit;
}

.fi-main-sidebar .fi-sidebar-group-collapse-btn:hover {
    color: #fff;
    background: transparent;
}

/* Kapalı grubun sayaç toplamı (sidebar-nav-end betiği ekler); açıkken sayaçlar öğelerde görünür */
.app-group-badge {
    border-radius: 9999px;
    background-color: var(--primary-300);
    padding: 1px 0.5rem;
    font-size: 11px;
    font-weight: 700;
    line-height: 1rem;
    color: var(--primary-900);
    font-variant-numeric: tabular-nums;
}

.fi-sidebar-group:not(.fi-collapsed) .app-group-badge {
    display: none;
}

/* Başlıklı grubun ve alt öğelerin listesi: ikon yok, metin başlık metniyle hizalı, 14 px.
   (Başlıksız ilk grup = üst düzey düz liste; onun öğeleri girintisiz kalır.) */
.fi-main-sidebar .fi-sidebar-group:has(> .fi-sidebar-group-btn) > .fi-sidebar-group-items {
    margin-top: 0.125rem;
}

.fi-main-sidebar .fi-sidebar-group:has(> .fi-sidebar-group-btn) > .fi-sidebar-group-items .fi-sidebar-item-btn,
.fi-main-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-btn {
    min-height: 2.375rem;
    padding: 0.5rem 0.875rem 0.5rem 2.875rem;
}

.fi-main-sidebar .fi-sidebar-group:has(> .fi-sidebar-group-btn) > .fi-sidebar-group-items .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-size: 14px;
    line-height: 1.375rem;
}

.fi-main-sidebar .fi-sidebar-item-grouped-border {
    display: none;
}

/* Sayaç rozeti: açık marka zemin, koyu lacivert yazı */
.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge,
.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge.fi-color {
    min-width: 0;
    border-radius: 9999px;
    padding: 1px 0.5rem;
    background-color: var(--primary-300);
    color: var(--primary-900);
    font-size: 11px;
    font-weight: 700;
    line-height: 1rem;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
}

/* Sistem grubu en altta, ayraçla ayrı (bayi panelinde "Profil" gibi) */
.fi-main-sidebar .fi-sidebar-group[data-group-label="Sistem"] {
    margin-top: auto;
    margin-inline: -0.75rem;
    padding: 0.75rem 0.75rem 0;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

/* Çekmecenin dibinde "Çıkış yap" — yalnız mobil (masaüstünde üst barda) */
.app-sidebar-logout-form {
    flex-shrink: 0;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    padding: 0.75rem;
}

.app-sidebar-logout {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 15px;
    font-weight: 500;
    color: rgb(255 255 255 / 0.8);
    transition: background-color 150ms, color 150ms;
}

.app-sidebar-logout .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(255 255 255 / 0.6);
}

.app-sidebar-logout:hover {
    background-color: rgb(244 63 94 / 0.15);
    color: #fecdd3;
}

@media (min-width: 64rem) {
    .app-sidebar-logout-form {
        display: none;
    }
}

/* Mobil çekmece (<1024 px) */
.app-sidebar-close {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    background-color: rgb(255 255 255 / 0.1);
    color: #fff;
}

.app-sidebar-close .fi-icon {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 64rem) {
    .app-sidebar-close {
        display: none;
    }
}

@media (max-width: 63.99rem) {
    /* Çekmece ve karartma üst barın (z-30) üstünde (bayi: çekmece z-50) */
    .fi-main-sidebar {
        z-index: 50;
    }

    .fi-main-sidebar.fi-sidebar-open {
        width: min(280px, 85vw);
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    }

    .fi-sidebar-close-overlay {
        z-index: 40;
        background-color: rgb(15 23 42 / 0.6);
        backdrop-filter: blur(2px);
    }
}

/* ---------------------------------------------------------------------------
 * 3. Marka imzası (bayi: Wordmark)
 * ------------------------------------------------------------------------- */
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #fff;
}

.app-brand-mark {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-color: rgb(255 255 255 / 0.9);
    color: var(--primary-900);
}

.app-brand-mark svg {
    width: 62%;
    height: 62%;
}

.app-brand-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.app-brand--lg .app-brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
}

.app-brand--lg .app-brand-name {
    font-size: 1.25rem;
}

/* ---------------------------------------------------------------------------
 * 4. Sağ sütun: üst bar, içerik, alt bilgi (bayi: app-shell Topbar / main / footer)
 * ------------------------------------------------------------------------- */
.fi-main-ctn {
    min-width: 0;
}

.fi-main {
    flex: 1;
    height: auto;
    padding-inline: 1rem;
}

@media (min-width: 64rem) {
    .fi-main {
        padding-inline: 1.5rem;
    }
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    height: 4rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--app-line);
    background-color: #fff;
    padding-inline: 0.75rem;
}

@media (min-width: 40rem) {
    .app-topbar {
        padding-inline: 1.5rem;
    }
}

.app-topbar-start,
.app-topbar-end {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.app-topbar-end {
    flex-shrink: 0;
    gap: 0.5rem;
}

@media (min-width: 40rem) {
    .app-topbar-end {
        gap: 0.75rem;
    }
}

.app-topbar-menu {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid var(--app-line);
    color: var(--gray-600);
    transition: all 150ms;
}

.app-topbar-menu:hover,
.app-profile:hover {
    border-color: rgb(43 92 158 / 0.4);
    background-color: rgb(43 92 158 / 0.05);
    color: var(--primary-700);
}

.app-topbar-menu .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 64rem) {
    .app-topbar-menu {
        display: none;
    }
}

/* Konum çubuğu: mobilde yalnız son halka */
.app-crumbs {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.app-crumb {
    flex-shrink: 0;
    color: var(--gray-500); /* AA kontrast (A-219) */
    transition: color 150ms;
}

a.app-crumb:hover {
    color: var(--gray-600);
}

.app-crumb-current {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--gray-900);
}

.app-crumb-sep {
    display: inline-flex;
    color: var(--gray-300);
}

.app-crumb-sep .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

@media (max-width: 39.99rem) {
    .app-crumbs > :not(.app-crumb-current) {
        display: none;
    }
}

/* Genel arama: üst bardaki haplarla aynı dil */
.app-topbar-search {
    display: none;
}

@media (min-width: 48rem) {
    .app-topbar-search {
        display: block;
        width: 14rem;
    }
}

@media (min-width: 80rem) {
    .app-topbar-search {
        width: 18rem;
    }
}

.app-topbar-search .fi-global-search-field .fi-input-wrp {
    border-radius: 9999px;
    background-color: #fff;
}

.app-topbar-search .fi-global-search-field .fi-input {
    height: 2.5rem;
}

.fi-global-search-results-ctn {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-pop-shadow);
}

/* Zil (veritabanı bildirimleri): 40 px yuvarlak hap */
.app-topbar-end .fi-topbar-database-notifications-btn,
.app-topbar-end .fi-icon-btn:has(> .fi-icon) {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid var(--app-line);
    color: var(--gray-600);
    background-color: #fff;
}

.app-topbar-end .fi-topbar-database-notifications-btn:hover,
.app-topbar-end .fi-icon-btn:has(> .fi-icon):hover {
    border-color: rgb(43 92 158 / 0.4);
    background-color: rgb(43 92 158 / 0.05);
    color: var(--primary-700);
}

.app-topbar-end .fi-icon-btn .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.app-topbar-end .fi-icon-btn-badge-ctn .fi-badge {
    min-width: 1.125rem;
    border-radius: 9999px;
    padding-inline: 0.25rem;
    background-color: var(--danger-700); /* beyaz yazıyla AA kontrast (A-219) */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

/* Profil hapı + çıkış (bayi: firma hapı + çıkış ikon düğmesi). Hap "Profilim" bağlantısıdır (A-186). */
.app-profile {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--app-line);
    padding: 0.25rem;
    color: inherit;
    text-decoration: none;
    transition: all 150ms;
}

@media (min-width: 40rem) {
    .app-profile {
        padding-inline-end: 0.875rem;
    }
}

.app-avatar {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--primary-500);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.app-profile-text {
    display: none;
    min-width: 0;
    flex-direction: column;
    line-height: 1.1;
}

@media (min-width: 40rem) {
    .app-profile-text {
        display: flex;
    }
}

.app-profile-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-800);
}

.app-profile-role {
    margin-top: 2px;
    font-size: 11px;
    color: var(--gray-500);
}

.app-logout-form {
    display: none;
}

@media (min-width: 40rem) {
    .app-logout-form {
        display: block;
    }
}

.app-logout {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid var(--app-line);
    color: var(--gray-500);
    transition: all 150ms;
}

.app-logout:hover {
    border-color: var(--danger-200);
    background-color: var(--danger-50);
    color: var(--danger-600);
}

.app-profile:focus-visible,
.app-logout:focus-visible,
.app-topbar-menu:focus-visible,
.app-crumb:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.app-logout .fi-icon {
    width: 1rem;
    height: 1rem;
}

/* Alt bilgi */
.app-footer {
    display: flex;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--app-line);
    background-color: #fff;
    padding: 0 1rem env(safe-area-inset-bottom);
    font-size: 11px;
    color: var(--gray-500);
}

@media (min-width: 40rem) {
    .app-footer {
        height: 2.75rem;
        padding-inline: 1.5rem;
        font-size: 0.75rem;
    }
}

.app-footer-start {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.app-footer-start > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-footer > span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

.app-footer-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: var(--primary-500);
}

.app-footer strong {
    font-weight: 600;
    color: var(--gray-700);
}

.app-footer-dev {
    font-weight: 600;
    color: var(--primary-700);
}

/* ---------------------------------------------------------------------------
 * 5. Sayfa başlığı (bayi: PageHeader — 24 px h1 + sayaç hapı, sağda aksiyonlar)
 * ------------------------------------------------------------------------- */
.fi-page-header-main-ctn {
    row-gap: 1.25rem;
    padding-block: 1rem 1.5rem;
}

@media (min-width: 64rem) {
    .fi-page-header-main-ctn {
        padding-block: 1.5rem;
    }
}

.fi-page-content,
.fi-page.fi-page-has-sub-navigation .fi-page-main {
    row-gap: 1.25rem;
}

.fi-header {
    gap: 0.75rem;
}

@media (min-width: 40rem) {
    .fi-header {
        align-items: flex-start;
    }
}

.fi-header > div:first-child:not(.fi-header-actions-ctn) {
    display: flex;
    min-height: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.625rem;
    row-gap: 0.25rem;
}

.fi-header-heading {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--app-ink);
}

@media (min-width: 40rem) {
    .fi-header-heading {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

.fi-header-subheading {
    flex-basis: 100%;
    margin-top: 0;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.fi-header-actions-ctn {
    gap: 0.5rem;
}

@media (min-width: 40rem) {
    .fi-header-actions-ctn {
        align-self: flex-start;
    }
}

.fi-header-actions-ctn .fi-ac {
    gap: 0.5rem;
}

.app-heading-pill {
    border-radius: 9999px;
    border: 1px solid var(--app-line);
    background-color: #fff;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 6. Düğmeler (bayi: Button — 8 px köşe, 600 ağırlık, h-10 varsayılan)
 * ------------------------------------------------------------------------- */
.fi-btn {
    gap: 0.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    white-space: nowrap;
    min-height: 2.5rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.fi-btn.fi-size-xs {
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: 11px;
    gap: 0.375rem;
}

.fi-btn.fi-size-sm {
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.fi-btn.fi-size-lg {
    min-height: 2.75rem;
    padding-inline: 1.5rem;
}

.fi-btn.fi-size-xl {
    min-height: 3rem;
    padding-inline: 1.5rem;
}

.fi-btn > .fi-icon {
    width: 1rem;
    height: 1rem;
}

/* Birincil: brand-500, hover brand-600 */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: var(--primary-500);
    --hover-bg: var(--primary-600);
    --text: #fff;
    --hover-text: #fff;
}

/* Onay (yeşil) ve silme onayı (kırmızı) dolu düğmeler: beyaz yazı okunur tonda (AA) */
.fi-btn.fi-color-success:not(.fi-outlined) {
    --bg: var(--success-700);
    --hover-bg: var(--success-800);
    --text: #fff;
    --hover-text: #fff;
}

.fi-btn.fi-color-danger:not(.fi-outlined) {
    --bg: var(--danger-600);
    --hover-bg: var(--danger-700);
    --text: #fff;
    --hover-text: #fff;
}

/* İkincil (renksiz): beyaz, slate-200 kenar, slate-700 yazı */
.fi-btn:not(.fi-color) {
    --tw-ring-color: var(--app-line);
    color: var(--gray-700);
    box-shadow: 0 0 0 1px var(--app-line);
}

/* Seçenek düğmeleri (ToggleButtons): seçili değilken beyaz + kenar, seçiliyken renk zemini + açık yazı */
label.fi-btn {
    box-shadow: 0 0 0 1px var(--app-line);
}

input:checked + label.fi-btn.fi-color {
    background-color: var(--bg);
    color: var(--text);
    box-shadow: none;
}

input:checked + label.fi-btn.fi-color > .fi-icon {
    color: var(--text);
}

.fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--app-page);
}

.fi-btn:not(.fi-color) > .fi-icon {
    color: var(--gray-500);
}

.fi-btn.fi-outlined.fi-color {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-500) 40%, transparent);
    background-color: #fff;
}

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible {
    box-shadow: 0 0 0 4px rgb(43 92 158 / 0.3);
}

.fi-btn-group {
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px var(--app-line);
}

/* Sayfa başlığındaki yıkıcı aksiyonlar (Sil, İptal Et, Reddet) çerçeveli: dolu kırmızı yalnız onay penceresinde */
.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined) {
    --bg: #fff;
    --hover-bg: var(--danger-50);
    --text: var(--danger-700);
    --hover-text: var(--danger-700);
    box-shadow: 0 0 0 1px var(--danger-200);
}

/* Bağlantı düğmeleri (tablo "Detay" vb.): marka yazı */
.fi-link:not(.fi-color),
.fi-link.fi-color-primary {
    color: var(--primary-700);
    font-weight: 500;
}

.fi-link:not(.fi-color) > .fi-icon {
    color: var(--primary-400);
}

.fi-link:not(.fi-color):hover .fi-link-label {
    text-decoration: underline;
}

/* İkon düğmeleri (tablo satırı, bölüm başlığı) */
.fi-icon-btn {
    border-radius: 0.375rem;
}

.fi-icon-btn:not(.fi-color) {
    color: var(--gray-500);
}

.fi-icon-btn:not(.fi-color):hover {
    background-color: var(--gray-100);
    color: var(--primary-700);
}

/* ---------------------------------------------------------------------------
 * 7. Rozetler (bayi: Badge — tam yuvarlak, 11 px, -50 zemin / -700 yazı, halkasız)
 * ------------------------------------------------------------------------- */
.fi-badge {
    min-height: 0;
    gap: 0.25rem;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 11px;
    font-weight: 600;
    line-height: 1rem;
    box-shadow: none;
    white-space: nowrap;
}

.fi-badge.fi-color {
    background-color: var(--color-50);
    color: var(--color-700);
}

.fi-badge.fi-color-warning {
    color: var(--color-800);
}

.fi-badge:not(.fi-color),
.fi-badge.fi-color-gray {
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.fi-badge .fi-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.fi-badge.fi-color .fi-icon {
    color: var(--color-600);
}

/* Custom görünümlerdeki rozet (x-panel.badge) — aynı ölçü, sabit tonlar */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 11px;
    font-weight: 600;
    line-height: 1rem;
    white-space: nowrap;
}

.app-badge--amber { background-color: var(--warning-50); color: var(--warning-800); }
.app-badge--sky { background-color: var(--info-50); color: var(--info-700); }
.app-badge--emerald { background-color: var(--success-50); color: var(--success-700); }
.app-badge--rose { background-color: var(--danger-50); color: var(--danger-700); }
.app-badge--indigo { background-color: var(--indigo-50); color: var(--indigo-700); }
.app-badge--purple { background-color: var(--purple-50); color: var(--purple-700); }
.app-badge--brand { background-color: rgb(43 92 158 / 0.1); color: var(--primary-700); }
.app-badge--slate { background-color: var(--gray-100); color: var(--gray-600); }

/* ---------------------------------------------------------------------------
 * 8. Form alanları (bayi: Field / Input — üst etiket 11 px büyük harf, h-10 alan)
 * ------------------------------------------------------------------------- */
.fi-fo-field-label-content,
.fi-fo-field-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-fo-field-label-required-mark {
    color: var(--danger-500);
}

/* Anahtar ve onay kutusunun yanındaki etiket büyük harf olmaz */
.fi-fo-field-label:has(.fi-toggle) .fi-fo-field-label-content,
.fi-fo-field-label:has(.fi-checkbox-input) .fi-fo-field-label-content {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gray-800);
}

.fi-input-wrp {
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line);
    transition: box-shadow 150ms;
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: var(--app-focus);
}

.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--danger-300);
}

.fi-input-wrp.fi-invalid:focus-within {
    box-shadow: 0 0 0 1px var(--danger-400), 0 0 0 3px color-mix(in oklab, var(--danger-200) 70%, transparent);
}

.fi-input-wrp.fi-disabled {
    background-color: var(--app-page);
}

.fi-input,
.fi-select-input {
    font-size: 0.875rem;
    color: var(--app-ink);
}

.fi-input:not(textarea),
.fi-select-input {
    min-height: 2.5rem;
}

.fi-input::placeholder {
    color: var(--gray-400);
}

.fi-input-wrp-prefix .fi-icon,
.fi-input-wrp-suffix .fi-icon {
    color: var(--gray-400);
}

.fi-fo-field-wrp-helper-text,
.fi-sc-text {
    font-size: 11px;
}

/* Renk verilmiş metin (ör. vade kuralı kapsam uyarısı, A-165) Filament rengini korur. */
.fi-fo-field-wrp-helper-text,
.fi-sc-text:not(.fi-color) {
    color: var(--gray-500);
}

.fi-fo-field-wrp-error-message {
    font-size: 11px;
    color: var(--danger-600);
}

.fi-checkbox-input {
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px var(--gray-300);
}

.fi-checkbox-input:checked {
    background-color: var(--primary-500);
    box-shadow: none;
}

.fi-toggle.fi-toggle-on.fi-color-primary {
    --bg: var(--primary-500);
}

.fi-toggle:not(.fi-toggle-on) {
    background-color: var(--gray-300);
}

/* ---------------------------------------------------------------------------
 * 9. Kartlar ve bölümler (bayi: CARD / Section — 12 px köşe, kıl gölge, p-5)
 * ------------------------------------------------------------------------- */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-card-shadow);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-content-ctn {
    border-top: 1px solid var(--app-line-soft);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-content-ctn > .fi-section-content {
    padding: 1.25rem;
}

.fi-section-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--app-ink);
}

.fi-section-header-description {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.fi-section-header > .fi-icon {
    color: var(--primary-700);
}

.fi-fo-repeater-item,
.fi-fo-builder-item {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-card-shadow);
}

.fi-fieldset {
    border-radius: 0.75rem;
    border-color: var(--app-line);
}

/* ---------------------------------------------------------------------------
 * 10. Sekmeler (bayi: SegmentedTabs — gri bant, aktif beyaz + marka yazı)
 * ------------------------------------------------------------------------- */
.fi-tabs:not(.fi-contained):not(.fi-vertical) {
    width: fit-content;
    max-width: 100%;
    gap: 0.25rem;
    margin-inline: 0;
    border-radius: 0.75rem;
    background-color: var(--gray-100);
    padding: 0.25rem;
    box-shadow: 0 0 0 1px var(--app-line);
}

.fi-tabs.fi-contained {
    gap: 0.25rem;
    border-color: var(--app-line-soft);
    padding: 0.625rem 1.25rem;
}

.fi-tabs-item {
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: background-color 150ms, color 150ms;
}

.fi-tabs-item .fi-tabs-item-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
}

.fi-tabs-item:hover,
.fi-tabs-item:focus-visible {
    background-color: rgb(255 255 255 / 0.6);
}

.fi-tabs-item:not(.fi-active):hover .fi-tabs-item-label {
    color: var(--app-ink);
}

.fi-tabs-item.fi-active {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.fi-tabs.fi-contained .fi-tabs-item.fi-active {
    background-color: rgb(43 92 158 / 0.08);
    box-shadow: none;
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    font-weight: 600;
    color: var(--primary-700);
}

.fi-tabs-item .fi-badge,
.fi-tabs-item .fi-badge.fi-color {
    padding: 0.125rem 0.375rem;
    font-size: 10px;
    font-weight: 700;
    background-color: var(--gray-200);
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
}

.fi-tabs-item.fi-active .fi-badge,
.fi-tabs-item.fi-active .fi-badge.fi-color {
    background-color: var(--primary-50);
    color: var(--primary-700);
}

.fi-tabs-item .fi-badge.fi-color-warning {
    background-color: var(--warning-100);
    color: var(--warning-800);
}

/* ---------------------------------------------------------------------------
 * 11. Tablolar (bayi: .data-table + filtre çubuğu kartı + sayfa altı yazısı)
 *     Araç çubuğu ayrı kart, tablo ayrı kart; başlık marka gradyanı, ~56 px ferah satır.
 * ------------------------------------------------------------------------- */
.fi-ta-ctn {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.fi-ta-ctn:not(.fi-ta-ctn-with-header) {
    overflow: visible;
}

.fi-ta-main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
}

.fi-ta-header-ctn {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fi-ta-ctn .fi-ta-header {
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-card-shadow);
    padding: 0.875rem 1.25rem;
}

.fi-ta-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
}

.fi-ta-ctn .fi-ta-header-toolbar {
    justify-content: flex-start;
    gap: 0.5rem;
    border: 0;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-card-shadow);
    padding: 0.625rem;
}

.fi-ta-ctn .fi-ta-header-toolbar > * {
    min-height: 2.5rem;
    column-gap: 0.5rem;
}

.fi-ta-ctn .fi-ta-header-toolbar > :first-child:empty {
    display: none;
}

.fi-ta-ctn .fi-ta-header-toolbar > :nth-child(2) {
    flex: 1;
    margin-inline-start: 0;
}

.fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field {
    width: 100%;
    max-width: 28rem;
    margin-inline-end: 0;
}

.fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field .fi-input {
    min-height: 2.5rem;
}

/* Filtre sayacı Filament'te 0 iken de basılır; etkin filtreler tablonun üstündeki göstergede zaten yazar */
.fi-ta-filters-dropdown .fi-btn-badge-ctn {
    display: none;
}

/* Başlıklı tablo (ilişki listeleri: kalemler, görseller, cari hareketler) tek kart olur:
   başlık şeridi + araç çubuğu + tablo aynı beyaz kutuda (bayi: "Kalemler" kartı). */
.fi-ta-ctn:has(.fi-ta-header) .fi-ta-main {
    gap: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-card-shadow);
}

.fi-ta-ctn:has(.fi-ta-header) .fi-ta-header-ctn {
    gap: 0;
}

.fi-ta-ctn:has(.fi-ta-header) .fi-ta-header,
.fi-ta-ctn:has(.fi-ta-header) .fi-ta-header-toolbar,
.fi-ta-ctn:has(.fi-ta-header) .fi-ta-content-ctn {
    border-radius: 0;
    box-shadow: none;
}

.fi-ta-ctn:has(.fi-ta-header) .fi-ta-header,
.fi-ta-ctn:has(.fi-ta-header) .fi-ta-header-toolbar {
    border-bottom: 1px solid var(--app-line-soft);
}

.fi-ta-ctn:has(.fi-ta-header) .fi-ta-header-toolbar {
    padding-inline: 1.25rem;
}

.fi-ta-ctn:has(.fi-ta-header) .fi-ta-table > thead > tr > th {
    border-radius: 0;
}

.fi-ta-ctn:has(.fi-ta-header) .fi-pagination {
    border-top: 1px solid var(--app-line-soft);
    padding: 0.625rem 1.25rem;
}

/* Sekmeli ilişki listelerinde sekme adı başlığı zaten söylüyor: tablo başlığı tekrarlanmaz */
.fi-sc-tabs-tab .fi-ta-header-heading {
    display: none;
}

.fi-sc-tabs-tab .fi-ta-header:not(:has(.fi-ta-actions > *)) {
    display: none;
}

/* Tablo kabı */
.fi-ta-content-ctn {
    overflow-x: auto;
    border: 0;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-card-shadow);
}

.fi-ta-content-ctn .fi-ta-content-header {
    border-bottom: 1px solid var(--app-row-line);
}

.fi-ta-table {
    font-size: 0.875rem;
}

.fi-ta-table > thead > tr,
.fi-ta-table > thead > tr:first-child {
    background-color: var(--app-gradient-fallback);
    background-image: var(--app-gradient);
}

.fi-ta-table > thead > tr > th:first-child {
    border-start-start-radius: 0.75rem;
}

.fi-ta-table > thead > tr > th:last-child {
    border-start-end-radius: 0.75rem;
}

.fi-ta-header-cell,
.fi-ta-table > thead > tr > th {
    padding: 0.8rem 0.875rem;
    border-bottom: 1px solid var(--app-gradient-fallback);
    font-size: 12px;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn,
.fi-ta-header-cell .fi-icon,
.fi-ta-table > thead .fi-checkbox-input + *,
.fi-ta-header-cell .fi-ta-header-cell-label {
    color: #fff;
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn {
    gap: 0.25rem;
    font-weight: inherit;
    text-transform: inherit;
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn .fi-icon {
    color: rgb(255 255 255 / 0.7);
}

.fi-ta-table > thead .fi-checkbox-input {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5);
    background-color: transparent;
}

.fi-ta-table > tbody > tr {
    border-color: var(--app-row-line);
}

.fi-ta-table > tbody > tr + tr,
.fi-ta-table > tbody > tr:not(:first-child) {
    border-top: 1px solid var(--app-row-line);
}

.fi-ta-table > tbody > tr:hover,
.fi-ta-row.fi-clickable:hover {
    background-color: var(--app-page);
}

.fi-ta-row.fi-selected {
    background-color: rgb(43 92 158 / 0.05);
}

.fi-ta-cell,
.fi-ta-cell:first-child,
.fi-ta-cell:last-child {
    padding: 0;
}

.fi-ta-text:not(.fi-inline),
.fi-ta-text-input:not(.fi-inline),
.fi-ta-cell:has(.fi-ta-actions),
.fi-ta-cell.fi-ta-selection-cell,
.fi-ta-cell:has(.fi-ta-record-checkbox),
.fi-ta-cell:has(.fi-ta-reorder-handle),
.fi-ta-table:not(.fi-ta-table-stacked-on-mobile) .fi-ta-icon,
.fi-ta-table:not(.fi-ta-table-stacked-on-mobile) .fi-ta-image,
.fi-ta-table:not(.fi-ta-table-stacked-on-mobile) .fi-ta-color,
.fi-ta-table:not(.fi-ta-table-stacked-on-mobile) .fi-ta-toggle,
.fi-ta-table:not(.fi-ta-table-stacked-on-mobile) .fi-ta-select,
.fi-ta-table:not(.fi-ta-table-stacked-on-mobile) .fi-ta-checkbox {
    padding: 1rem 0.875rem;
}

/* Çok sütunlu tablolar (10+): satır ferah kalır, yatay boşluk daralır ki taşma olmasın */
.fi-ta-table:has(> thead > tr > th:nth-child(10)) .fi-ta-text:not(.fi-inline),
.fi-ta-table:has(> thead > tr > th:nth-child(10)) .fi-ta-cell:has(.fi-ta-actions),
.fi-ta-table:has(> thead > tr > th:nth-child(10)) > thead > tr > th {
    padding-inline: 0.625rem;
}

.fi-ta-cell:first-child .fi-ta-text:not(.fi-inline),
.fi-ta-cell:first-child:has(.fi-ta-actions),
.fi-ta-table > thead > tr > th:first-child {
    padding-inline-start: 1.25rem;
}

.fi-ta-cell:last-child .fi-ta-text:not(.fi-inline),
.fi-ta-cell:last-child:has(.fi-ta-actions),
.fi-ta-table > thead > tr > th:last-child {
    padding-inline-end: 1.25rem;
}

.fi-ta-text-item:not(.fi-color) {
    color: var(--gray-800);
}

.fi-ta-text-item.fi-size-sm {
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.fi-ta-text-item.fi-font-semibold:not(.fi-color),
.fi-ta-text-item.fi-font-bold:not(.fi-color) {
    color: var(--app-ink);
}

.fi-ta-text > .fi-ta-text-description,
.fi-ta-text > .fi-ta-text-list-limited-message {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.fi-ta-text.fi-ta-text-has-descriptions:not(.fi-ta-text-has-badges) {
    row-gap: 0.125rem;
}

.fi-ta-text-item.fi-color-gray,
.fi-ta-cell .fi-ta-placeholder {
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.fi-ta-text.fi-numeric,
.fi-ta-text-item.fi-numeric {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fi-ta-col-has-column-url .fi-ta-text-item:hover {
    text-decoration: none;
}

.fi-ta-actions {
    gap: 0.75rem;
}

/* Satır aksiyonları: "Detay" marka bağlantı, açılır "Durum" ikincil küçük düğme */
.fi-ta-actions .fi-ac-link-action.fi-link {
    font-size: 0.875rem;
}

/* Özet (toplam) satırı */
.fi-ta-summary-header-row,
.fi-ta-summary-row {
    background-color: var(--app-page);
}

/* Boş durum (bayi: EmptyState) */
.fi-ta-empty-state {
    padding-block: 3.5rem;
}

.fi-ta-empty-state-icon-bg {
    background-color: var(--gray-100);
}

.fi-ta-empty-state-icon-bg .fi-icon {
    color: var(--gray-400);
}

.fi-ta-empty-state-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
}

.fi-ta-empty-state-description {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Filtre / sütun açılır panelleri */
.fi-ta-filters-heading,
.fi-ta-col-manager-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-ta-filter-indicators {
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line);
}

/* Toplu seçim şeridi */
.fi-ta-selection-indicator {
    border-radius: 0.75rem;
    background-color: rgb(43 92 158 / 0.05);
    box-shadow: 0 0 0 1px rgb(43 92 158 / 0.2);
}

/* Telefonda (<640 px) her satır bir kart: "ETİKET …… değer" satırları, ilk hücre kartın başlığı,
   aksiyonlar kartın altında (bayi: .data-table mobil dönüşümü). */
@media (max-width: 39.99rem) {
    .fi-ta-content-ctn:has(> .fi-ta-table-stacked-on-mobile) {
        overflow: visible;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .fi-ta-ctn:has(.fi-ta-header) .fi-ta-content-ctn:has(> .fi-ta-table-stacked-on-mobile) {
        padding: 0.75rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr + tr {
        margin-bottom: 0.85rem;
        border: 1px solid var(--app-row-line);
        border-radius: 0.85rem;
        background-color: #fff;
        padding: 0.75rem 1rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.4rem 0;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-label {
        flex-shrink: 0;
        padding-top: 0;
        font-size: 11px;
        font-weight: 600;
        line-height: 1rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--gray-500); /* AA kontrast (A-219) */
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-content {
        min-width: 0;
        text-align: right;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-col {
        justify-content: flex-end;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text:not(.fi-inline),
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-cell:first-child .fi-ta-text:not(.fi-inline),
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-cell:last-child .fi-ta-text:not(.fi-inline),
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-icon,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-image,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-toggle,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-select {
        padding: 0;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text.fi-ta-text-has-descriptions {
        align-items: flex-end;
    }

    /* İlk hücre kartın başlığı: etiketsiz, sola yaslı, kalın */
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):first-child,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell {
        display: block;
        padding-bottom: 0.45rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):first-child > .fi-ta-cell-label,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell > .fi-ta-cell-label {
        display: none;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:first-child > .fi-ta-cell-content,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell > .fi-ta-cell-content {
        text-align: left;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:first-child .fi-ta-col,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell .fi-ta-col {
        justify-content: flex-start;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:first-child .fi-ta-text,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell .fi-ta-text {
        align-items: flex-start;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:first-child .fi-ta-text-item,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell .fi-ta-text-item {
        font-size: 15px;
        font-weight: 600;
    }

    /* Aksiyonlar: kartın altında, ayraçlı */
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):has(.fi-ta-actions) {
        display: block;
        margin-top: 0.35rem;
        border-top: 1px solid var(--app-line-soft);
        padding: 0.625rem 0 0;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell {
        inset-inline-end: 0.75rem;
        top: 0.75rem;
        padding: 0;
    }
}

/* ---------------------------------------------------------------------------
 * 12. Sayfalama (bayi: tablo altı "N kayıt · Sayfa x / y" + Önceki / Sonraki)
 * ------------------------------------------------------------------------- */
.fi-ta-ctn .fi-pagination,
.fi-pagination {
    border: 0;
    padding: 0.25rem 0.25rem 0;
    font-size: 0.75rem;
}

.fi-pagination-overview {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

.fi-pagination-items {
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line);
}

.fi-pagination-item-btn {
    min-width: 2rem;
    font-size: 0.75rem;
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background-color: var(--primary-500);
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * 13. Bilgi listeleri (bayi: DefinitionList — 10 px büyük harf etiket, 14 px değer)
 * ------------------------------------------------------------------------- */
.fi-in-entry-label {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.fi-in-text-item {
    font-size: 0.875rem;
    font-weight: 500;
}

.fi-in-text-item:not(.fi-color) {
    color: var(--gray-800);
}

.fi-in-text-item.fi-font-semibold:not(.fi-color),
.fi-in-text-item.fi-font-bold:not(.fi-color) {
    color: var(--app-ink);
}

.fi-in-text-item.fi-font-semibold {
    font-weight: 600;
}

.fi-in-text-item.fi-font-bold {
    font-weight: 700;
}

.fi-in-text-item.fi-size-lg {
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -0.01em;
}

a.fi-in-entry-content .fi-in-text-item {
    color: var(--primary-700);
}

a.fi-in-entry-content:hover .fi-in-text-item {
    text-decoration: underline;
}

.fi-in-placeholder {
    color: var(--gray-500); /* AA kontrast (A-219); boş değer okunur kalsın */
}

/* Tutar listesi (bayi sipariş detayı toplamları): solda etiket, sağda tutar, genel toplam çizgili ve büyük */
.app-totals .fi-in-entry.fi-in-entry-has-inline-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.app-totals .fi-in-entry-has-inline-label .fi-in-entry-label {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gray-500);
}

.app-totals .fi-in-entry-has-inline-label .fi-in-entry-content-col {
    flex: none;
}

.app-totals .fi-in-entry-has-inline-label .fi-in-entry-content {
    justify-content: flex-end;
    text-align: right;
}

.app-totals .fi-in-text-item {
    font-variant-numeric: tabular-nums;
}

.app-totals .app-totals-grand {
    border-top: 2px solid var(--app-line);
    padding-top: 0.75rem;
}

.app-totals .app-totals-grand .fi-in-entry-label {
    font-weight: 600;
    color: var(--app-ink);
}

.app-totals .app-totals-grand .fi-in-text-item {
    font-size: 1.375rem;
    line-height: 1.75rem;
}

/* Bilgi listesindeki satır içi bağlantı (ör. sipariş detayında tahsilatlar) */
.app-link {
    color: var(--primary-600);
    font-weight: 500;
    text-decoration: none;
}

.app-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 14. Açılır menü, modal, bildirim kutuları
 * ------------------------------------------------------------------------- */
.fi-dropdown-panel {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-pop-shadow);
}

.fi-dropdown-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-dropdown-list-item {
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background-color: var(--app-page);
}

.fi-modal-close-overlay {
    background-color: rgb(15 23 42 / 0.5);
    backdrop-filter: blur(2px);
}

.fi-modal-window {
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.fi-modal-header {
    border-bottom: 1px solid var(--app-line-soft);
    padding: 1rem 1.25rem;
}

.fi-modal-heading {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--app-ink);
}

.fi-modal-description {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.fi-modal-content {
    padding: 1.25rem;
}

.fi-modal-footer {
    border-top: 1px solid var(--app-line-soft);
    background-color: rgb(248 250 252 / 0.6);
    padding: 0.75rem 1.25rem;
    border-end-start-radius: 1rem;
    border-end-end-radius: 1rem;
}

.fi-modal-slide-over-window {
    border-radius: 0;
}

/* Bildirim kutusu (bayi: toast — durum renginde zemin ve kenar) */
.fi-no-notification:not(.fi-inline) {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px var(--app-line), 0 10px 28px -12px rgba(15, 23, 42, 0.25);
}

.fi-no-notification.fi-color {
    background-color: var(--color-50);
    box-shadow: 0 0 0 1px var(--color-200), 0 10px 28px -12px rgba(15, 23, 42, 0.25);
}

.fi-no-notification .fi-no-notification-icon.fi-color {
    color: var(--color-600);
}

.fi-no-notification .fi-no-notification-title {
    font-weight: 600;
    color: var(--app-ink);
}

.fi-no-notification.fi-color .fi-no-notification-body {
    color: var(--gray-700);
}

/* ---------------------------------------------------------------------------
 * 15. Genel Bakış: KPI kartları ve liste kartları (bayi: StatCard / ListCard)
 * ------------------------------------------------------------------------- */
.app-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Telefonda tek kalan son kart tam genişlik (bayi: 5. KPI max-sm:col-span-2) */
@media (max-width: 39.99rem) {
    .app-kpis > :last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

@media (min-width: 40rem) {
    .app-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .app-kpis {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.app-kpi {
    display: block;
    border-radius: 0.75rem;
    border: 1px solid var(--app-line);
    background-color: #fff;
    padding: 0.75rem;
    box-shadow: var(--app-card-shadow);
    transition: transform 150ms, box-shadow 150ms;
}

a.app-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

a.app-kpi:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(43 92 158 / 0.4);
}

.app-kpi-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.app-kpi-value {
    margin-top: 0.375rem;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.app-kpi-hint {
    margin-top: 0.5rem;
    font-size: 11px;
    color: var(--gray-600);
}

.app-kpi--rose { border-color: var(--danger-200); background-color: var(--danger-100); }
.app-kpi--rose .app-kpi-label { color: var(--danger-700); }
.app-kpi--rose .app-kpi-value { color: var(--danger-950); }
.app-kpi--emerald { border-color: var(--success-200); background-color: var(--success-100); }
.app-kpi--emerald .app-kpi-label { color: var(--success-700); }
.app-kpi--emerald .app-kpi-value { color: var(--success-950); }
.app-kpi--amber { border-color: var(--warning-200); background-color: var(--warning-100); }
.app-kpi--amber .app-kpi-label { color: var(--warning-800); }
.app-kpi--amber .app-kpi-value { color: var(--warning-950); }
.app-kpi--sky { border-color: var(--info-200); background-color: var(--info-100); }
.app-kpi--sky .app-kpi-label { color: var(--info-700); }
.app-kpi--sky .app-kpi-value { color: var(--info-950); }
.app-kpi--brand { border-color: var(--primary-200); background-color: var(--primary-100); }
.app-kpi--brand .app-kpi-label { color: var(--primary-700); }
.app-kpi--brand .app-kpi-value { color: var(--app-ink); }

/* Liste kartı (bayi: Genel Bakış ListCard) — 16 px köşe, başlık px-5 py-3.5; iki kart yan yana eşit boy */
.app-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--app-line);
    background-color: #fff;
    box-shadow: var(--app-card-shadow);
}

.app-card-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--app-line-soft);
    padding: 0.875rem 1.25rem;
}

.app-card-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-ink);
}

.app-card-icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: var(--primary-50);
    color: var(--primary-700);
}

.app-card-icon .fi-icon {
    width: 18px;
    height: 18px;
}

.app-card-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--primary-700);
    transition: background-color 150ms;
}

.app-card-link:hover {
    background-color: var(--primary-50);
}

.app-card-link .fi-icon {
    width: 1rem;
    height: 1rem;
}

.app-card-empty {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.app-chart-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Liste: açık başlık satırı (px-5 py-2), satırlar px-5 py-3; satırlar kartın boyunu doldurur */
.app-list {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.app-list-head,
.app-list-row {
    display: grid;
    align-items: center;
    column-gap: 1rem;
    padding-inline: 1.25rem;
}

.app-list-head {
    display: none;
    border-bottom: 1px solid var(--app-line-soft);
    background-color: rgb(248 250 252 / 0.7);
    padding-block: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.app-list-row {
    flex: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.375rem;
    padding-block: 0.75rem;
    transition: background-color 150ms;
}

.app-list-row + .app-list-row {
    border-top: 1px solid var(--app-line-soft);
}

a.app-list-row:hover {
    background-color: var(--app-page);
}

@media (min-width: 80rem) {
    .app-list-row {
        max-height: 7rem;
    }
}

.app-cell {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.app-cell--end {
    align-items: flex-end;
    text-align: right;
}

.app-cell-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--app-ink);
}

a.app-list-row:hover .app-cell-title {
    color: var(--primary-700);
}

.app-cell-text {
    font-size: 0.875rem;
    color: var(--gray-700);
}

.app-cell-sub {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.app-cell-faint {
    display: block;
    font-size: 0.875rem;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.app-cell-muted {
    margin-inline-start: 0.375rem;
    font-size: 0.875rem;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.app-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-mono {
    font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.app-cell-sub.app-mono {
    font-size: 0.75rem;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.app-cell--due {
    display: block;
    font-size: 0.875rem;
}

.app-due {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--info-700);
    font-variant-numeric: tabular-nums;
}

.app-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--app-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-amount--brand {
    font-weight: 700;
    color: var(--primary-700);
}

.is-num {
    text-align: right;
}

.app-row-chevron {
    display: none;
    color: var(--gray-300);
    transition: transform 150ms, color 150ms;
}

.app-row-chevron .fi-icon {
    width: 1rem;
    height: 1rem;
}

a.app-list-row:hover .app-row-chevron {
    transform: translateX(2px);
    color: var(--primary-600);
}

/* Telefonda iki sütun (bayi: grid-cols-[1fr_auto]): sipariş · durum / vade · tutar */
.app-list--orders .app-cell--status {
    justify-self: end;
}

.app-list--dealers .app-list-row {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    column-gap: 0.75rem;
}

@media (min-width: 40rem) {
    .app-list-head {
        display: grid;
    }

    .app-row-chevron {
        display: block;
    }

    .app-list--orders .app-list-head,
    .app-list--orders .app-list-row {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr) 16px;
        column-gap: 0.75rem;
    }

    .app-list--orders .app-cell--status {
        justify-self: start;
    }

    .app-list--dealers .app-list-head,
    .app-list--dealers .app-list-row {
        grid-template-columns: 1.75rem minmax(0, 1fr) auto 16px;
        column-gap: 0.75rem;
    }
}

/* Sıra rozeti (bayi: "En Çok Aldığınız Ürünler" — 28 px, amber · gri · turuncu · sky · mor) */
.app-rank {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--gray-300);
}

.app-rank .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.app-rank--1 { background-color: var(--warning-500); }
.app-rank--2 { background-color: var(--gray-400); }
.app-rank--3 { background-color: #fb923c; }
.app-rank--4 { background-color: var(--info-500); }
.app-rank--5 { background-color: #8b5cf6; }

/* ---------------------------------------------------------------------------
 * 16. Özel sayfalar (rapor, simülatör, vadesi geçenler, yetkiler): blade'deki sınıflar
 * ------------------------------------------------------------------------- */
.app-stack {
    display: grid;
    gap: 1.25rem;
}

.app-grid-2 {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 64rem) {
    .app-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.app-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.app-card-body {
    padding: 1.25rem 1.5rem;
}

.app-card-note {
    border-bottom: 1px solid var(--app-line-soft);
    padding: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.app-card-foot {
    border-top: 1px solid var(--app-line-soft);
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.app-table-scroll {
    overflow-x: auto;
}

.app-table-scroll .app-table th:first-child,
.app-table-scroll .app-table td:first-child {
    padding-inline-start: 1.5rem;
}

.app-table-scroll .app-table th:last-child,
.app-table-scroll .app-table td:last-child {
    padding-inline-end: 1.5rem;
}

/* Tablo altı özet şeridi (bayi: sipariş listesi / cari altındaki toplam kartı) */
.app-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.5rem 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--app-line);
    background-color: #fff;
    padding: 1rem 1.25rem;
    box-shadow: var(--app-card-shadow);
}

.app-summary-caption {
    margin-inline-end: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.app-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
}

.app-summary-label {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.app-summary-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Toplam listesi (simülatör fiyat kırılımı) */
.app-totals-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.375rem;
    font-size: 0.875rem;
}

.app-totals-list dt {
    color: var(--gray-500);
}

.app-totals-list dd {
    font-weight: 500;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
}

.app-totals-list .app-totals-list-grand {
    margin-top: 0.5rem;
    border-top: 2px solid var(--app-line);
    padding-top: 0.875rem;
}

.app-totals-list .app-totals-list-grand dt {
    font-weight: 600;
    color: var(--app-ink);
}

.app-totals-list .app-totals-list-grand dd {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--app-ink);
}

/* Banner (bayi: Alert — bilgi marka tonu, hata rose) */
.app-alert {
    display: flex;
    gap: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(43 92 158 / 0.2);
    background-color: rgb(43 92 158 / 0.05);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--primary-800);
}

.app-alert > .fi-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    color: var(--primary-600);
}

.app-alert--danger {
    display: block;
    border-color: var(--danger-200);
    background-color: color-mix(in oklab, var(--danger-50) 60%, transparent);
    color: var(--danger-700);
}

.app-alert-title {
    font-weight: 600;
}

.app-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    accent-color: var(--primary-500);
    cursor: pointer;
}

.app-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.app-table--matrix td {
    white-space: normal;
}

/* Rol matrisi telefonda (A-198): ilk sütun (yetki adı) yatay kaydırmada sabit, kaydırma ipucu yalnız dar ekranda. */
.app-table--matrix th:first-child,
.app-table--matrix td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 11rem;
    background-color: #fff;
    box-shadow: 1px 0 0 var(--app-line);
}

.app-table--matrix thead th:first-child {
    background-color: var(--app-gradient-fallback);
}

.app-matrix-hint {
    display: none;
    padding: 0.5rem 1.5rem 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

@media (max-width: 47.99rem) {
    .app-matrix-hint {
        display: block;
    }

    .app-table--matrix .app-cell-sub {
        display: none;
    }

    /* Sabit yetki sütunu dar: ekranın kalanında rol sütunları görünür. */
    .app-table--matrix th,
    .app-table--matrix td {
        padding: 0.6rem 0.5rem;
    }

    .app-table--matrix th:first-child,
    .app-table--matrix td:first-child {
        width: 8.5rem;
        min-width: 8.5rem;
        max-width: 8.5rem;
        padding-inline-start: 0.75rem;
    }

    .app-table--matrix .app-cell-title {
        font-size: 12px;
        line-height: 1.3;
    }
}

.app-table .text-center {
    text-align: center;
}

.app-heading-badge {
    font-size: 12px;
    padding: 0.1875rem 0.625rem;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.app-table th,
.app-table td {
    padding: 1rem 1.1rem;
    white-space: nowrap;
}

.app-table thead tr,
.app-table > tr:first-child:has(th) {
    background-color: var(--app-gradient-fallback);
    background-image: var(--app-gradient);
}

.app-table th {
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--app-gradient-fallback);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
}

.app-table tbody tr + tr {
    border-top: 1px solid var(--app-row-line);
}

.app-table tbody tr:hover {
    background-color: var(--app-page);
}

.app-table .text-end,
.app-table .text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.app-table .text-start {
    text-align: left;
}

.app-table tfoot td {
    border-top: 2px solid var(--app-line);
    background-color: rgb(248 250 252 / 0.8);
    font-weight: 700;
    color: var(--app-ink);
}

/* Denetim kaydı "Fark" penceresi (A-195): önce kırmızı, sonra yeşil; uzun değerler satır kırar. */
.app-table--diff td {
    white-space: normal;
    vertical-align: top;
}

.app-diff-field {
    font-weight: 500;
    color: var(--app-ink);
}

.app-diff-old {
    color: var(--danger-700);
}

.app-diff-new {
    font-weight: 500;
    color: var(--success-700);
}

.app-diff-meta {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Denetim kaydı "Fark" penceresi (A-195): alan · önce · sonra */
.app-table--diff th,
.app-table--diff td {
    white-space: normal;
    vertical-align: top;
}

.app-diff-field {
    font-weight: 500;
    color: var(--gray-700);
}

.app-diff-old {
    color: var(--danger-700);
}

.app-diff-new {
    font-weight: 500;
    color: var(--success-700);
}

.app-diff-meta {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.app-table-kv td {
    padding-block: 0.75rem;
}

.app-table-kv td:first-child {
    color: var(--gray-500);
}

.app-table-kv tr + tr {
    border-top: 1px solid var(--app-line-soft);
}

.app-table-kv .font-semibold {
    font-size: 1rem;
    font-weight: 600;
}

.app-table-wrap {
    overflow-x: auto;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--app-line), var(--app-card-shadow);
}

.app-dl {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 0.875rem;
}

@media (min-width: 64rem) {
    .app-dl {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.app-card .app-dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-dl dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

.app-dl dd {
    margin-top: 0.25rem;
    font-weight: 500;
    color: var(--gray-800);
}

.app-issues {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--warning-200);
    background-color: color-mix(in oklab, var(--warning-50) 60%, transparent);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--warning-800);
}

.app-issues li + li {
    margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * 17. Giriş (bayi AuthShell ikizi): masaüstünde solda marka paneli, sağda beyaz form;
 *     telefonda üstte ince marka bandı. Izgara deseni ve cam kartlar 29.09'da kaldırıldı.
 * ------------------------------------------------------------------------- */
/* Sayfa kenarda esnemesin (macOS/iOS'ta beyaz şerit görünüyordu) */
html:has(.app-auth) {
    overscroll-behavior-y: none;
}

.app-auth {
    min-height: 100dvh;
    background-color: #fff;
}

/* Masaüstünde sayfa kaymaz: yalnız sağ bölme kayar, sol panel sabit */
@media (min-width: 64rem) {
    .app-auth {
        display: grid;
        height: 100dvh;
        grid-template-columns: minmax(420px, 5fr) 7fr;
        overflow: hidden;
    }
}

/* Marka zemini (bayi .auth-brand-panel ile aynı katmanlar): marka ışığı + soğuk yansıma + köşegen lacivert */
.app-auth-aside,
.app-auth-band {
    position: relative;
    overflow: hidden;
    background-color: #0b2140;
    background-image:
        radial-gradient(56rem 36rem at -12% -18%, rgba(66, 118, 190, 0.5), transparent 62%),
        radial-gradient(44rem 30rem at 115% 105%, rgba(56, 189, 248, 0.16), transparent 60%),
        linear-gradient(160deg, #11305a 0%, #0b2140 48%, #061428 100%);
}

.app-auth-aside {
    display: none;
    color: #fff;
}

@media (min-width: 64rem) {
    .app-auth-aside {
        display: flex;
        height: 100dvh;
        flex-direction: column;
        justify-content: space-between;
        padding: 2.5rem 3rem;
    }
}

@media (min-width: 80rem) {
    .app-auth-aside {
        padding: 3rem 4rem;
    }
}

.app-auth-grain {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.06;
    mix-blend-mode: overlay;
}

.app-auth-mark {
    pointer-events: none;
    position: absolute;
    right: -8rem;
    bottom: -6rem;
    width: 520px;
    height: 459px;
}

.app-auth-mark--compact {
    top: -0.75rem;
    right: -1rem;
    bottom: auto;
    width: 181px;
    height: 160px;
}

.app-auth-edge {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.15), rgb(255 255 255 / 0));
}

.app-auth-layer {
    position: relative;
}

.app-auth-intro {
    max-width: 28rem;
}

.app-auth-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(186 230 253 / 0.9);
}

.app-auth-headline {
    margin-top: 1rem;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #fff;
}

@media (min-width: 80rem) {
    .app-auth-headline {
        font-size: 40px;
    }
}

.app-auth-lead {
    margin-top: 1rem;
    font-size: 15px;
    line-height: 1.625;
    color: rgb(255 255 255 / 0.7);
}

.app-auth-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.app-auth-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.app-auth-feature-icon {
    display: flex;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
    color: rgb(224 242 254);
}

.app-auth-feature-icon .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.app-auth-feature-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.app-auth-feature-text {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.6);
}

.app-auth-aside-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgb(255 255 255 / 0.5);
}

.app-auth-main {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
}

@media (min-width: 64rem) {
    .app-auth-main {
        height: 100dvh;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.app-auth-band {
    padding: 1.75rem 1.25rem 1.5rem;
}

.app-auth-band .app-auth-eyebrow {
    margin-top: 1.25rem;
}

@media (min-width: 40rem) {
    .app-auth-band {
        padding-inline: 2rem;
    }
}

@media (min-width: 64rem) {
    .app-auth-band {
        display: none;
    }
}

.app-auth-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: 2.5rem 1.25rem;
}

@media (min-width: 40rem) {
    .app-auth-card {
        padding-inline: 2rem;
    }
}

@media (min-width: 64rem) {
    .app-auth-card {
        padding-block: 4rem;
    }
}

.app-auth-copy {
    padding: 0 1.25rem 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-500); /* AA kontrast (A-219) */
}

@media (min-width: 64rem) {
    .app-auth-copy {
        display: none;
    }
}

.app-auth-card .fi-simple-page-content {
    row-gap: 1.75rem;
}

.app-auth-card .fi-simple-header {
    align-items: flex-start;
}

.app-auth-card .fi-simple-header .fi-logo {
    display: none;
}

.app-auth-card .fi-simple-header-heading {
    text-align: left;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--gray-900);
}

.app-auth-card .fi-simple-header-subheading {
    margin-top: 0.5rem;
    text-align: left;
    font-size: 15px;
    line-height: 1.625;
    color: var(--gray-500);
}

.app-auth-card .fi-input-wrp {
    border-radius: 0.75rem;
    background-color: rgb(248 250 252 / 0.7);
}

.app-auth-card .fi-input-wrp:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px rgb(43 92 158 / 0.15);
}

.app-auth-card .fi-input {
    min-height: 3.5rem;
    font-size: 15px;
}

.app-auth-card .fi-input-wrp-prefix {
    padding-inline-start: 1rem;
}

.app-auth-card .fi-input-wrp-prefix .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.app-auth-card .fi-btn.fi-color-primary {
    min-height: 3.5rem;
    border-radius: 0.75rem;
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * 18. Hareket tercihi
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .app-kpi,
    .app-list-row,
    .app-row-chevron {
        transition: none;
    }
}

/* Dosya kutusu: ızgara düzenindeki dar karede hata iletisi kırpılmasın (A-164). Reddedilen dosyada ad / boyut gizlenir,
   ileti silme düğmesinin altında tam genişlikte, alt satıra kayarak gösterilir. FilePond konumu satır içi transform ile verir. */
.filepond--root[data-style-panel-layout~='grid'] .filepond--item[data-filepond-item-state$='invalid'] .filepond--file-info,
.filepond--root[data-style-panel-layout~='grid'] .filepond--item[data-filepond-item-state$='error'] .filepond--file-info {
    display: none;
}

.filepond--root[data-style-panel-layout~='grid'] .filepond--item[data-filepond-item-state$='invalid'] .filepond--file-status,
.filepond--root[data-style-panel-layout~='grid'] .filepond--item[data-filepond-item-state$='error'] .filepond--file-status {
    position: absolute;
    top: 2.75em;
    right: 0.75em;
    left: 0.75em;
    align-items: flex-start;
    text-align: left;
    transform: none !important;
}

.filepond--root[data-style-panel-layout~='grid'] .filepond--item[data-filepond-item-state$='invalid'] :is(.filepond--file-status-main, .filepond--file-status-sub),
.filepond--root[data-style-panel-layout~='grid'] .filepond--item[data-filepond-item-state$='error'] :is(.filepond--file-status-main, .filepond--file-status-sub) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}

/* Izgara karesinde yükleme bitince durum yazıları ("Yükleme tamamlandı", "Geri almak için tıklayın") dar karede dosya boyutunun ve
   kaldırma düğmesinin üstüne biniyordu; tamamlanma yeşil kaplamayla, geri alma kaldırma düğmesiyle zaten görünür. */
.filepond--root[data-style-panel-layout~='grid'] .filepond--item[data-filepond-item-state='processing-complete'] .filepond--file-status {
    display: none;
}