/*
 * Boom Bazaar yönetim paneli teması (docs/admin.md › Tasarım ve › Ölçek). Renkler
 * oyunun paletidir: mürekkep #3A2340 (ana buton, metin), krem #FFF7EC (yüzey), nane #2FC08F (başarı), mercan #FF6B57
 * (tehlike), altın #F5B21C (uyarı), gök #59BDF5 (bilgi), lila #8E7BC4 (tek vurgu; geniş yüzey değil). Gri ölçek
 * mürekkebe yakın mor-gri tonlardır (AdminPanelProvider::GRAY).
 * Filament'in derlenmiş CSS'inin üstüne yüklenir (Tailwind derlemesi gerekmez): `php artisan filament:assets`
 * bu dosyayı public/css/app/boombazaar-admin.css olarak yayımlar.
 *
 * KURAL: Bu dosyada ve özel Blade görünümlerinde ölçü yalnız aşağıdaki token'lardan gelir (yazı, boşluk, köşe, yükseklik).
 */

/* =====================================================================
 * 1. Ölçek (token'lar)
 * ===================================================================== */

:root {
    /* Yazı: boyut / satır yüksekliği / ağırlık (uygulamanın tip ölçeğinden; panel yoğunluğu için 14'lük gövde). */
    --g-font: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    --g-text-page-title: 600 28px/34px var(--g-font);     /* screenTitle, -0,5 izleme */
    --g-text-kpi: 600 34px/40px var(--g-font);            /* largeTitle — tüm KPI kutularında tek boy */
    --g-text-kpi-suffix: 400 17px/22px var(--g-font);     /* KPI birimi / "/ hedef" */
    --g-text-title: 600 17px/22px var(--g-font);          /* kart ve bölüm başlığı */
    --g-text-stat: 600 20px/26px var(--g-font);           /* kart içi ikincil sayı */
    --g-text-body: 400 14px/20px var(--g-font);           /* gövde, tablo hücresi, liste satırı, giriş metni */
    --g-text-body-strong: 600 14px/20px var(--g-font);
    --g-text-label: 600 14px/20px var(--g-font);          /* alan etiketi, kutu üstü başlık (caption) */
    --g-text-help: 400 13px/18px var(--g-font);           /* yardım/açıklama, tablo başlığı (600) */
    --g-text-caption: 400 12px/16px var(--g-font);        /* dipnot, eksen etiketi, rozet (600) */

    /* Boşluk: 4/8/12/16/24/32/48. */
    --g-space-2xs: 4px;
    --g-space-xs: 8px;
    --g-space-s: 12px;
    --g-space-sm: 16px;
    --g-space-md: 24px;
    --g-space-lg: 32px;
    --g-space-xl: 48px;

    --g-card-pad: var(--g-space-md);         /* kart iç boşluğu */
    --g-card-gap: var(--g-space-sm);         /* kartlar arası (bento, bölümler, kenar çubuğu) — tek değer */
    --g-page-gap: var(--g-space-md);         /* sayfa başlığı → içerik */
    --g-field-gap: var(--g-space-md);        /* form alanları arası dikey ritim */
    --g-label-gap: var(--g-space-xs);        /* etiket → giriş */
    --g-header-gap: 6px;                     /* kutu üstü başlık → kutu (iOS Ayarlar) */
    --g-help-gap: var(--g-space-xs);         /* giriş → yardım metni */
    --g-title-gap: var(--g-space-sm);        /* kart başlığı → kart içeriği */

    /* Köşe. */
    --g-radius-card: 24px;                   /* kart, tablo kabı, modal */
    --g-radius-menu: 16px;                   /* açılır menü, bildirim (toast), well */
    --g-radius-input: 12px;                  /* giriş, seçim, metin alanı, dosya yükleme */
    --g-radius-small: 8px;                   /* kohort hücresi, küçük görsel */
    --g-radius-check: 6px;                   /* onay kutusu */
    --g-radius-pill: 999px;                  /* buton, rozet, kenar çubuğu öğesi (tek satır kapsül) */
    /* İç içe köşe (eş merkezli): iç öğe yarıçapı = dış yarıçap − iç boşluk. Segmentli seçici 44 kabı (22) içinde
       4 boşlukla 36 hap (18); açılır liste 16 içinde 6 boşlukla 10. Kap satır kırsa da köşeler oturur. */
    --g-seg-pad: var(--g-space-2xs);
    --g-radius-seg: calc(var(--g-control-h) / 2);                     /* 22 */
    --g-radius-seg-item: calc(var(--g-radius-seg) - var(--g-seg-pad)); /* 18 = 36 / 2 */
    --g-menu-pad: 6px;
    --g-radius-menu-item: calc(var(--g-radius-menu) - var(--g-menu-pad)); /* 10 */
    --g-seg-hover: color-mix(in oklab, var(--g-ink) 7%, transparent);  /* seçili olmayan öğenin üstüne gelince */
    --g-action-gap: var(--g-space-s);        /* buton grupları: yatay ve dikey 12 */
    --g-radius-phone: 44px;                  /* önizleme telefonu (ekran 36) */

    /* Yükseklik, ikon, genişlik. */
    --g-control-h: 44px;                     /* giriş, seçim, buton, segmentli seçici — hepsi aynı */
    --g-control-h-sm: 36px;                  /* kart içi küçük buton, segment içi seçili hap (44 − 2×4) */
    --g-badge-h: 24px;
    --g-icon: 20px;                          /* gezinme, buton */
    --g-icon-sm: 16px;                       /* satır içi */
    --g-icon-lg: 24px;                       /* boş durum */
    --g-content-max: 1440px;                 /* içerik en çok genişliği */
    --g-chart-h: 160px;                      /* geniş grafik en az yüksekliği */
    --g-chart-h-sm: 112px;                   /* küçük kutu grafiği en az yüksekliği */

    /* Renk (Bakkal'dan devralınan palet, tasarım tuvali onayına kadar; açık). Metin renkleri krem yüzeyde ve zeminde WCAG AA (≥ 4,5:1). */
    --g-canvas: #F4EADC;                     /* sayfa zemini: koyu krem */
    --g-surface: #FFF7EC;                    /* kart: krem */
    --g-well: #F9EFE2;
    --g-ink: #3A2340;
    --g-secondary: #6E5D72;
    --g-placeholder: #8A7A8E;
    --g-line: #EADCCB;
    --g-field-line: #8B7A8F;                 /* giriş sınırı: kuyu/kart/sayfa zeminine ≥ 3:1 */
    --g-track: #EADCCB;
    --g-hatch: #D6C7CB;
    --g-lilac: #8E7BC4;
    --g-lilac-tint: #EEE9F7;
    --g-lilac-ink: #5B479A;
    --g-coral: #FF6B57;
    --g-coral-tint: #FFE6E1;
    --g-coral-ink: #B23A28;
    --g-mint: #2FC08F;
    --g-mint-tint: #DFF6EC;
    --g-mint-ink: #1A7A57;
    --g-sky: #59BDF5;
    --g-sky-tint: #E0F3FD;
    --g-sky-ink: #1A6E9E;
    --g-gold: #F5B21C;
    --g-warn: #FDEFC7;
    --g-warn-ink: #7A5200;
    --g-on-ink: #FFFFFF;
    --g-focus: #5B479A;                      /* odak halkası: lila mürekkep (kremde 6,9:1) */
    --g-scrim: rgba(28, 16, 31, 0.48);

    --font-family: var(--g-font);
}

.dark {
    --g-canvas: #1B141E;
    --g-surface: #2A1F2D;
    --g-well: #231A26;
    --g-ink: #FFF7EC;
    --g-secondary: #B3A3B8;
    --g-placeholder: #93839A;
    --g-line: #3D2F42;
    --g-field-line: #7D6C84;
    --g-track: #352939;
    --g-hatch: #4A3B4F;
    --g-lilac: #A898DA;
    --g-lilac-tint: #2E2640;
    --g-lilac-ink: #C4B8EA;
    --g-coral: #FF8A79;
    --g-coral-tint: #3E2421;
    --g-coral-ink: #FFB2A6;
    --g-mint: #4ED3A5;
    --g-mint-tint: #163327;
    --g-mint-ink: #7FE3BF;
    --g-sky: #7FCDF8;
    --g-sky-tint: #17303F;
    --g-sky-ink: #A6DCFA;
    --g-gold: #F8C54E;
    --g-warn: #3D2E12;
    --g-warn-ink: #F8CF6A;
    --g-on-ink: #1B141E;
    --g-focus: #C4B8EA;
    --g-scrim: rgba(0, 0, 0, 0.6);
}

/* =====================================================================
 * 2. Zemin, krom (üst çubuk, kenar çubuğu, sayfa başlığı)
 * ===================================================================== */

body.fi-body,
.fi-body {
    background-color: var(--g-canvas);
    color: var(--g-ink);
    font-family: var(--g-font);
    font-feature-settings: 'tnum' 1;
}

.fi-topbar,
.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--g-canvas) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border: 0 !important;
}

.fi-topbar { padding-inline: var(--g-space-md) !important; }

.fi-sidebar-header { padding-inline: var(--g-space-md) !important; justify-content: flex-start !important; gap: var(--g-space-xs); }

.fi-logo { height: 28px !important; width: auto !important; }
/* Logo kenar çubuğu okuyla dikey ortalı, aralarında 12; logo → ilk gezinme öğesi 24 (nav üst boşluğu). */
.fi-topbar-start { display: flex; align-items: center; gap: var(--g-space-s) !important; }
.fi-topbar-start > a { display: inline-flex; align-items: center; }
/* Daraltılmış kenar çubuğu (masaüstü): kelime işareti yerine yalnız oyun ikonu, 32 (yuvarlak köşeli PNG). */
@media (min-width: 1024px) {
    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar-start > a .fi-logo { display: none !important; }
    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar-start > a {
        width: 32px; height: 32px;
        background: url('../../images/brand/bakkal-icon-64.png') center / 32px 32px no-repeat;
    }

    /* Daraltılmış gezinme: öğe 44×44 tam daire, ikon ortada; öğeler arası 4, gruplar arası ince çizgiyle 12 + 12. */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        width: var(--g-control-h) !important; height: var(--g-control-h) !important; min-height: var(--g-control-h) !important;
        padding: 0 !important; justify-content: center !important; border-radius: 50% !important; margin-inline: auto;
    }
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups { row-gap: var(--g-space-s) !important; }
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group { gap: 0 !important; }
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group + .fi-sidebar-group,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups > li + .fi-sidebar-group {
        border-top: 1px solid var(--g-line); padding-top: var(--g-space-s);
    }
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn { display: none !important; }
}
/* Araç ipucu (daraltılmış gezinme vb.): kapsül, ölçek yazısı, oksuz; hedefe 8. */
.tippy-box {
    border-radius: var(--g-radius-pill) !important;
    font: var(--g-text-label) !important;
    background: var(--g-ink) !important; color: var(--g-on-ink) !important;
    box-shadow: none !important;
}
.tippy-box .tippy-content { padding: 6px var(--g-space-s) !important; }
.tippy-box .tippy-arrow { display: none !important; }
.tippy-box[data-placement^='right'] { margin-left: -2px; }
.tippy-box[data-placement^='left'] { margin-right: -2px; }

.fi-sidebar-nav { padding: var(--g-space-md) var(--g-space-sm) !important; }
.fi-sidebar-nav-groups { margin-inline: 0 !important; row-gap: var(--g-space-md) !important; }
.fi-sidebar-group { display: flex; flex-direction: column; gap: var(--g-header-gap); }
.fi-sidebar-group-items { row-gap: var(--g-space-2xs) !important; }

.fi-sidebar-group-btn {
    padding: 0 var(--g-space-sm) !important;
    min-height: 24px;
}

.fi-sidebar-group-label {
    font: var(--g-text-help) !important;
    font-weight: 600 !important;
    color: var(--g-secondary) !important;
    letter-spacing: 0;
    text-transform: none;
}

.fi-sidebar-item-btn {
    border-radius: var(--g-radius-pill) !important;
    min-height: var(--g-control-h);
    padding: 0 var(--g-space-sm) !important;
    column-gap: var(--g-space-s) !important;
    justify-content: flex-start !important;
}

.fi-sidebar-item-label {
    font: var(--g-text-label) !important;
    color: var(--g-ink) !important;
}

.fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item-icon {
    width: var(--g-icon) !important;
    height: var(--g-icon) !important;
    color: var(--g-secondary) !important;
}

.fi-sidebar-item-btn:hover { background-color: color-mix(in oklab, var(--g-surface) 60%, transparent) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--g-surface) !important; }

/* Etkin sayfanın tek vurgusu: lila mürekkep ikon. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon {
    color: var(--g-lilac-ink) !important;
}

/* Kullanıcı menüsü avatarı: koyu zeminde de çerçeveli. */
.fi-user-avatar,
.fi-avatar {
    box-shadow: 0 0 0 1px var(--g-line);
}

/* İçerik alanı: en çok genişlik ve 24'lük kenar payı (yatay kenar payı md). */
.fi-main {
    max-width: var(--g-content-max) !important;
    padding-inline: var(--g-space-lg) !important;
}

.fi-page-content,
.fi-page-main { row-gap: var(--g-page-gap) !important; }
.fi-page > section,
.fi-page .fi-page-header-main-ctn { row-gap: var(--g-page-gap) !important; }
.fi-page-header-main-ctn { padding-block: var(--g-space-lg) !important; }

.fi-header { gap: var(--g-space-sm) !important; }

.fi-header-heading {
    font: var(--g-text-page-title) !important;
    letter-spacing: -0.5px !important;
    color: var(--g-ink);
}

.fi-header-subheading,
.fi-section-header-description {
    font: var(--g-text-help) !important;
    color: var(--g-secondary) !important;
}

.fi-breadcrumbs { margin-bottom: var(--g-space-2xs); }
.fi-breadcrumbs ol li { font: var(--g-text-help) !important; font-weight: 600 !important; color: var(--g-secondary) !important; }
.fi-breadcrumbs ol li .fi-icon { width: var(--g-icon-sm); height: var(--g-icon-sm); }

/* Buton grupları (sayfa başlığı, form kaydet/iptal, modal alt butonları, eylem grupları): yatay ve dikey 12. */
.fi-header-actions-ctn,
.fi-ac,
.fi-form-actions .fi-ac,
.fi-sc-actions .fi-ac,
.fi-modal-footer-actions,
.fi-ta-header-toolbar > div,
.fi-ta-actions { gap: var(--g-action-gap) !important; flex-wrap: wrap; }

/* =====================================================================
 * 3. Kartlar (bento): düz, kenarlıksız, gölgesiz
 * ===================================================================== */

.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-simple-main,
.fi-modal-window,
.fi-fieldset:not(.fi-fieldset-not-contained),
.fi-in-entry-wrp {
    background-color: var(--g-surface) !important;
    border-radius: var(--g-radius-card) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
    border: 0 !important;
}

/* Bölüm (Section): başlık → içerik 16, iç boşluk 24, ayırıcı çizgi yok. */
.fi-section:not(.fi-section-not-contained) > .fi-section-header {
    padding: var(--g-card-pad) var(--g-card-pad) 0 !important;
    border: 0 !important;
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn {
    border: 0 !important;
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content {
    padding: var(--g-title-gap) var(--g-card-pad) var(--g-card-pad) !important;
}

.fi-section:not(.fi-section-not-contained):not(.fi-section-has-header) > .fi-section-content-ctn > .fi-section-content {
    padding-top: var(--g-card-pad) !important;
}

.fi-section.fi-collapsed > .fi-section-header { padding-bottom: var(--g-card-pad) !important; }

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border: 0 !important;
    padding: 0 var(--g-card-pad) var(--g-card-pad) !important;
}

.fi-section-header-heading,
.fi-ta-header-heading,
.fi-fieldset-label {
    font: var(--g-text-title) !important;
    color: var(--g-ink) !important;
}

/* Bölümler ve sütunlar arası tek boşluk. */
.fi-sc.fi-sc-has-gap:has(> .fi-grid-col > .fi-sc-component > .fi-section) { gap: var(--g-card-gap) !important; }

/* =====================================================================
 * 4. Formlar
 * ===================================================================== */

.fi-sc.fi-sc-has-gap { gap: var(--g-field-gap) !important; }
.fi-sc.fi-sc-has-gap.fi-sc-dense { gap: var(--g-space-xs) !important; }

.fi-fo-field { row-gap: var(--g-label-gap) !important; }
.fi-fo-field .fi-fo-field-content-col { row-gap: var(--g-help-gap) !important; }
.fi-fo-field-label-content,
.fi-fo-field-wrp-label {
    font: var(--g-text-label) !important;
    color: var(--g-ink) !important;
}

.fi-fo-field-label-required-mark,
.fi-fo-field-label sup { color: var(--g-coral-ink) !important; font-weight: 600; }

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint,
.fi-fo-field .fi-sc-text,
.fi-fo-field-content-col .fi-sc-text {
    font: var(--g-text-help) !important;
    color: var(--g-secondary) !important;
}

.fi-fo-field .fi-fo-field-wrp-error-message {
    font: var(--g-text-help) !important;
    font-weight: 600 !important;
    color: var(--g-coral-ink) !important;
}

/* Giriş kabı: kart içi kuyu zemini, 44 yükseklik, köşe 12. 1 px sınır (--g-field-line) her zeminde ≥ 3:1 (WCAG 1.4.11):
 * kartsız formlarda (Profil) kuyu zemini sayfa zeminine çok yakın, sınır alanı görünür kılar. */
.fi-input-wrp {
    background-color: var(--g-well) !important;
    border-radius: var(--g-radius-input) !important;
    box-shadow: inset 0 0 0 1px var(--g-field-line) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    min-height: var(--g-control-h);
    align-items: center;
}

.fi-input-wrp:has(textarea) { align-items: stretch; }

.fi-input-wrp-content-ctn { align-self: stretch; display: flex; align-items: center; min-width: 0; }
.fi-input-wrp-content-ctn > * { flex: 1 1 auto; min-width: 0; }
.fi-input-wrp:has(textarea) .fi-input-wrp-content-ctn { align-items: stretch; }

.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    border: 0 !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-inline: var(--g-space-s) !important;
}

.fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 1px var(--g-focus), 0 0 0 2px var(--g-focus) !important;
}
/* İki adımlı doğrulama kurulumu: QR her temada beyaz zeminli, sessiz bölgeli (okunurluk). */
.fi-modal img[src^="data:image/svg"], .fi-modal img[src^="data:image/png"] { background: #FFFFFF !important; padding: 12px; border-radius: 8px; filter: none !important; opacity: 1 !important; }
.g-mfa-steps { margin: 8px 0 0; padding-inline-start: 20px; list-style: decimal; font: var(--g-text-help); color: var(--g-secondary); }
.g-mfa-steps li + li { margin-top: 4px; }

.fi-input-wrp.fi-invalid,
.fi-fo-field:has(.fi-fo-field-wrp-error-message) .fi-input-wrp {
    box-shadow: 0 0 0 2px var(--g-coral-ink) !important;
}

.fi-input,
select.fi-select-input,
.fi-select-input-btn,
.fi-fo-date-time-picker-display-text-input,
.fi-fo-textarea textarea,
textarea.fi-input {
    font: var(--g-text-body) !important;
    color: var(--g-ink) !important;
    padding-inline: var(--g-space-s) !important;
}

textarea.fi-input,
.fi-fo-textarea textarea { padding-block: var(--g-space-s) !important; }

input.fi-input:not([type=checkbox]):not([type=radio]),
select.fi-select-input,
.fi-select-input .fi-select-input-btn,
.fi-fo-date-time-picker-trigger { min-height: var(--g-control-h) !important; padding-block: 0 !important; }
.fi-fo-date-time-picker-display-text-input { min-height: var(--g-control-h); }

input.fi-input.fi-input-has-inline-prefix { padding-inline-start: 0 !important; }
input.fi-input.fi-input-has-inline-suffix { padding-inline-end: 0 !important; }
select.fi-select-input { padding-inline-end: 36px !important; background-position: right 10px center !important; }

.fi-input::placeholder,
textarea::placeholder,
.fi-select-input-placeholder,
.fi-fo-date-time-picker-display-text-input::placeholder {
    color: var(--g-placeholder) !important;
}

/* Segmentli seçici (ToggleButtons grouped, Radio → ToggleButtons, sayfalama): tek bileşen. Kap 44, köşe 22, 4 iç boşluk,
   kenarlık ve ayraç yok; öğe 36 hap (köşe 18), öğeler arası 4; seçili ink dolgu, üstüne gelince soluk dolgu. Filament
   grubu ızgaradır ve öğeler arasına 1 px gölge çizgisi + 1 px pay koyar: hepsi kaldırılır. */
.fi-btn-group,
.fi-fo-toggle-buttons.fi-btn-group {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    background: var(--g-well) !important;
    border: 0 !important;
    border-radius: var(--g-radius-seg) !important;
    box-shadow: none !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    padding: var(--g-seg-pad) !important;
    gap: var(--g-seg-pad) !important;
    min-height: var(--g-control-h);
    width: max-content;
    max-width: 100%;
}

.fi-btn-group > .fi-btn,
.fi-btn-group > label.fi-btn {
    border: 0 !important;
    border-radius: var(--g-radius-seg-item) !important;
    box-shadow: none !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    margin: 0 !important;
    min-height: var(--g-control-h-sm) !important;
    padding: 0 var(--g-space-sm) !important;
    background: transparent !important;
    color: var(--g-secondary) !important;
    font: var(--g-text-label) !important;
    flex: 0 0 auto !important;
}

.fi-btn-group > .fi-btn:hover,
.fi-btn-group > label.fi-btn:hover {
    background: var(--g-seg-hover) !important;
    color: var(--g-ink) !important;
}

.fi-btn-group > input:checked + label.fi-btn,
.fi-fo-toggle-buttons input:checked + label.fi-btn,
.fi-btn-group > input:checked + label.fi-btn:hover {
    background: var(--g-ink) !important;
    color: var(--g-on-ink) !important;
}

.fi-btn-group > input:focus-visible + label.fi-btn {
    outline: 2px solid var(--g-focus) !important;
    outline-offset: 2px;
}

/* Grupsuz ToggleButtons (ayrı kapsüller): aralarında 12. */
.fi-fo-toggle-buttons:not(.fi-btn-group) { gap: var(--g-action-gap) !important; }

/* Onay kutusu ve radyo: 18 kare/daire, satırlar arası 12. */
input[type=checkbox].fi-checkbox-input,
input[type=radio].fi-radio-input {
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px !important;
    background-color: var(--g-surface) !important;
    box-shadow: inset 0 0 0 1.5px var(--g-hatch) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

input[type=checkbox].fi-checkbox-input { border-radius: var(--g-radius-check) !important; }

input[type=checkbox].fi-checkbox-input:checked,
input[type=radio].fi-radio-input:checked {
    background-color: var(--g-ink) !important;
    box-shadow: none !important;
    color: var(--g-ink) !important;
}

.dark input[type=checkbox].fi-checkbox-input:checked { filter: invert(0); }

input[type=checkbox].fi-checkbox-input:focus-visible,
input[type=radio].fi-radio-input:focus-visible {
    outline: 2px solid var(--g-focus) !important;
    outline-offset: 2px;
}

.fi-fo-checkbox-list .fi-fo-checkbox-list-options { gap: var(--g-space-s) var(--g-space-md) !important; }
.fi-fo-checkbox-list .fi-fo-checkbox-list-options.fi-grid-direction-col { margin-top: calc(-1 * var(--g-space-s)) !important; }
.fi-fo-checkbox-list .fi-fo-checkbox-list-options.fi-grid-direction-col .fi-fo-checkbox-list-option-ctn { padding-top: var(--g-space-s) !important; }
.fi-fo-checkbox-list .fi-fo-checkbox-list-option,
.fi-fo-radio > .fi-fo-radio-label,
.fi-fo-checkbox-list-option { column-gap: var(--g-space-xs) !important; align-items: flex-start; }
.fi-fo-checkbox-list .fi-fo-checkbox-list-option .fi-fo-checkbox-list-option-text,
.fi-fo-radio > .fi-fo-radio-label > .fi-fo-radio-label-text {
    font: var(--g-text-body) !important;
    color: var(--g-ink) !important;
}
.fi-fo-checkbox-list-option-label { font-weight: 400 !important; color: var(--g-ink) !important; }
.fi-fo-radio { gap: var(--g-space-s) var(--g-space-md) !important; }

/* Anahtar (toggle): lila vurgu, ink düğme. */
.fi-toggle { --tw-ring-shadow: 0 0 #0000 !important; }
.fi-toggle.fi-toggle-on,
.fi-toggle[aria-checked='true'] { background-color: var(--g-lilac) !important; }
.fi-toggle:focus-visible { outline: 2px solid var(--g-focus) !important; outline-offset: 2px; }

/* Sekmeler (form içi ve tablo üstü): segmentli seçiciyle aynı. */
.fi-sc-tabs.fi-contained {
    border: 0 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.fi-sc-tabs.fi-contained > .fi-sc-tabs-tab { padding: var(--g-space-sm) 0 0 !important; } /* sekme çubuğu → form 16 */

.fi-tabs {
    background-color: var(--g-surface) !important;
    border-radius: var(--g-radius-seg) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border: 0 !important;
    padding: var(--g-seg-pad) !important;
    gap: var(--g-seg-pad) !important;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--g-control-h);
    width: max-content;
    max-width: 100%;
    margin-inline: 0 !important;
}

/* Kart içindeki (form) sekmeler kuyu zemininde; sayfa düzeyi sekmeler kanvas üstünde beyaz kapsül, sola hizalı. */
.fi-sc-tabs .fi-tabs,
.fi-section .fi-tabs,
.fi-modal .fi-tabs { background-color: var(--g-well) !important; }
.fi-page-content > .fi-tabs { justify-self: start; }

.fi-tabs-item {
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: var(--g-radius-seg-item) !important;
    min-height: var(--g-control-h-sm);
    padding: 0 var(--g-space-sm) !important;
    font: var(--g-text-label) !important;
}

.fi-tabs-item .fi-tabs-item-label { color: var(--g-secondary) !important; font: var(--g-text-label) !important; }
.fi-tabs-item:not(.fi-active):hover { background-color: var(--g-seg-hover) !important; }
.fi-tabs-item:not(.fi-active):hover .fi-tabs-item-label { color: var(--g-ink) !important; }
.fi-tabs-item.fi-active { background-color: var(--g-ink) !important; }
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon { color: var(--g-on-ink) !important; }
.fi-tabs-item .fi-badge { min-height: 20px; }

/* Dosya yükleme (FilePond): giriş kabıyla aynı kuyu, köşe 12, kesik çerçeve yok. */
.fi-fo-file-upload .filepond--root {
    margin-bottom: 0 !important;
    font-family: var(--g-font) !important;
    background-color: var(--g-well) !important;
    border-radius: var(--g-radius-input) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.fi-fo-file-upload .filepond--root:focus-within { box-shadow: 0 0 0 2px var(--g-focus) !important; }
.fi-fo-file-upload .filepond--panel-root {
    background-color: var(--g-well) !important;
    border-radius: var(--g-radius-input) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.fi-fo-file-upload .filepond--drop-label { min-height: var(--g-control-h) !important; padding: 0 var(--g-space-s) !important; color: var(--g-secondary) !important; }
.fi-fo-file-upload .filepond--drop-label label { font: var(--g-text-body) !important; padding: var(--g-space-s) 0 !important; }
.fi-fo-file-upload .filepond--label-action { color: var(--g-ink) !important; text-decoration-color: var(--g-lilac) !important; font-weight: 600; }
.fi-fo-file-upload .filepond--item-panel { border-radius: var(--g-radius-input) !important; }
/* Yükleme durumları marka tonunda: tamamlandı nane mürekkep, hata mercan mürekkep, işleniyor ink (FilePond'un yeşil/kırmızısı yerine). */
.fi-fo-file-upload [data-filepond-item-state='processing-complete'] .filepond--item-panel { background-color: #1A7A57 !important; }
.fi-fo-file-upload [data-filepond-item-state*='error'] .filepond--item-panel,
.fi-fo-file-upload [data-filepond-item-state*='invalid'] .filepond--item-panel { background-color: #B23A28 !important; }
.fi-fo-file-upload .filepond--file { font-family: var(--g-font) !important; color: #FFFFFF; }
/* Görselli öğe: önizleme kartın tamamını doldurur (altta panel şeridi kalmaz), başarı örtüsü mint-ink. */
.fi-fo-file-upload .filepond--item:has(.filepond--image-preview-wrapper) .filepond--item-panel { background-color: transparent !important; }
.fi-fo-file-upload .filepond--image-preview-overlay-success { color: #1A7A57 !important; } /* nane mürekkep (açık), iki temada da beyaz yazıyla AA */
.fi-fo-file-upload .filepond--image-preview-overlay-failure { color: #B23A28 !important; }
.fi-fo-file-upload .filepond--image-preview { background: var(--g-well) !important; }
.fi-fo-file-upload .filepond--file-info-main,
.fi-fo-file-upload .filepond--file-status-main { font: var(--g-text-label) !important; font-size: 13px !important; }
.fi-fo-file-upload .filepond--file-info-sub,
.fi-fo-file-upload .filepond--file-status-sub { font: var(--g-text-caption) !important; opacity: 0.8; }
.fi-fo-file-upload .filepond--image-preview-wrapper { border-radius: var(--g-radius-input) !important; }

/* Markdown düzenleyici (EasyMDE): araç çubuğu ve alan kuyu zemininde. */
.fi-fo-markdown-editor,
.fi-fo-rich-editor {
    border-radius: var(--g-radius-input) !important;
    overflow: hidden;
}
.fi-fo-markdown-editor .editor-toolbar,
.fi-fo-rich-editor-toolbar {
    border: 0 !important;
    border-bottom: 1px solid var(--g-line) !important;
    background: var(--g-well) !important;
    padding: var(--g-space-2xs) var(--g-space-xs) !important;
    gap: var(--g-space-2xs);
    display: flex;
    flex-wrap: wrap;
    opacity: 1 !important;
}
.fi-fo-markdown-editor .editor-toolbar button,
.fi-fo-rich-editor-toolbar button {
    width: var(--g-control-h-sm) !important;
    height: var(--g-control-h-sm) !important;
    border-radius: var(--g-radius-small) !important;
    border: 0 !important;
    color: var(--g-ink) !important;
}
.fi-fo-markdown-editor .editor-toolbar button:hover,
.fi-fo-markdown-editor .editor-toolbar button.active { background: var(--g-surface) !important; }
.fi-fo-markdown-editor .editor-toolbar i.separator { border-color: var(--g-line) !important; margin: 0 var(--g-space-2xs) !important; }
.fi-fo-markdown-editor .CodeMirror,
.fi-fo-markdown-editor .EasyMDEContainer .CodeMirror {
    border: 0 !important;
    background: var(--g-well) !important;
    color: var(--g-ink) !important;
    font: var(--g-text-body) !important;
    font-size: 15px !important;
    line-height: 24px !important;
    padding: var(--g-space-s) !important;
}
.fi-fo-markdown-editor .CodeMirror-cursor { border-color: var(--g-ink) !important; }

/* =====================================================================
 * 5. Butonlar: tam kapsül, ana buton ink; tek yükseklik (44), kart içi küçük (36)
 * ===================================================================== */

.fi-btn {
    border-radius: var(--g-radius-pill) !important;
    font: var(--g-text-label) !important;
    min-height: var(--g-control-h);
    padding: 0 var(--g-space-md) !important;
    gap: var(--g-space-xs) !important;
}

.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm {
    min-height: var(--g-control-h-sm);
    padding: 0 var(--g-space-sm) !important;
}

.fi-btn > .fi-icon { width: var(--g-icon) !important; height: var(--g-icon) !important; }
.fi-btn.fi-size-xs > .fi-icon,
.fi-btn.fi-size-sm > .fi-icon { width: var(--g-icon-sm) !important; height: var(--g-icon-sm) !important; }

.fi-btn:not(.fi-outlined).fi-color-primary:not(label),
input:checked + label.fi-btn:not(.fi-outlined).fi-color-primary {
    background-color: var(--g-ink) !important;
    color: var(--g-on-ink) !important;
}

.fi-btn:not(.fi-outlined).fi-color-primary:not(label) > .fi-icon,
input:checked + label.fi-btn:not(.fi-outlined).fi-color-primary > .fi-icon {
    color: var(--g-on-ink) !important;
}

.fi-btn:not(.fi-outlined).fi-color-primary:not(label):hover { opacity: 0.88; }

.fi-btn:not(.fi-color):not(.fi-outlined),
.fi-btn.fi-color-gray:not(.fi-outlined) {
    background-color: var(--g-line) !important;
    color: var(--g-ink) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-btn.fi-color-gray:not(.fi-outlined) > .fi-icon { color: var(--g-ink) !important; }
.fi-btn.fi-color-gray:not(.fi-outlined):hover { background-color: var(--g-hatch) !important; }

/* Tehlikeli eylemler: coral mürekkep (renk tek başına anlam taşımaz; etiket her zaman yazılı). */
.fi-btn:not(.fi-outlined).fi-color-danger:not(label) {
    background-color: var(--g-coral-ink) !important;
    color: #FFFFFF !important;
}
.fi-btn:not(.fi-outlined).fi-color-danger:not(label) > .fi-icon { color: #FFFFFF !important; }

.dark .fi-btn:not(.fi-outlined).fi-color-danger:not(label) {
    background-color: var(--g-coral) !important;
    color: #1B141E !important;
}
.dark .fi-btn:not(.fi-outlined).fi-color-danger:not(label) > .fi-icon { color: #1B141E !important; }

/* Odak halkası: her etkileşimli öğede görünür, marka rengi. */
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-sidebar-item-btn:focus-visible,
.fi-tabs-item:focus-visible,
.fi-dropdown-list-item:focus-visible,
a:focus-visible,
button:focus-visible,
[role='button']:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--g-focus) !important;
    outline-offset: 2px !important;
}

.fi-icon-btn { border-radius: var(--g-radius-pill) !important; }

.fi-link { font-weight: 600 !important; }
.fi-link.fi-color-primary,
.fi-ta-text-item.fi-color-primary {
    color: var(--g-ink) !important;
    text-decoration-color: var(--g-lilac);
}

/* =====================================================================
 * 6. Rozet
 * ===================================================================== */

.fi-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    border-radius: var(--g-radius-pill) !important;
    font: var(--g-text-caption) !important;
    font-weight: 600 !important;
    min-height: var(--g-badge-h);
    padding: 0 10px !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.fi-badge:not(.fi-color) { background: var(--g-well) !important; color: var(--g-secondary) !important; }
.fi-badge.fi-color-gray { background: var(--g-well) !important; color: var(--g-secondary) !important; }
.fi-badge.fi-color-primary { background: var(--g-well) !important; color: var(--g-ink) !important; }
.fi-badge.fi-color-success { background: var(--g-mint-tint) !important; color: var(--g-mint-ink) !important; }
.fi-badge.fi-color-danger { background: var(--g-coral-tint) !important; color: var(--g-coral-ink) !important; }
.fi-badge.fi-color-warning { background: var(--g-warn) !important; color: var(--g-warn-ink) !important; }
.fi-badge.fi-color-info { background: var(--g-sky-tint) !important; color: var(--g-sky-ink) !important; }
.fi-badge .fi-icon { width: 14px !important; height: 14px !important; color: currentColor !important; }
/* Filament etiketi tabana hizalar (self-baseline): 24'lük rozette metin üste kayıyordu; dikeyde ortala. */
.fi-badge .fi-badge-label-ctn { align-self: center !important; }

/* Renkli tablo metinleri: koyu "ink" tonları (AA). */
.fi-ta-text-item.fi-color-success, .fi-in-text-item.fi-color-success { color: var(--g-mint-ink) !important; }
.fi-ta-text-item.fi-color-danger, .fi-in-text-item.fi-color-danger { color: var(--g-coral-ink) !important; }
.fi-ta-text-item.fi-color-warning, .fi-in-text-item.fi-color-warning { color: var(--g-warn-ink) !important; }
.fi-ta-text-item.fi-color-info, .fi-in-text-item.fi-color-info { color: var(--g-sky-ink) !important; }

/* =====================================================================
 * 7. Tablolar
 * ===================================================================== */

.fi-ta-ctn { overflow: hidden; }

.fi-ta-ctn .fi-ta-header-toolbar {
    padding: var(--g-space-sm) var(--g-card-pad) !important;
    border-color: var(--g-line) !important;
    gap: var(--g-space-xs) !important;
    min-height: calc(var(--g-control-h) + 2 * var(--g-space-sm));
}

/* Araç çubuğu ve alt bilgi kontrolleri (arama, sayfa başına, filtre/sütun/sıralama ikon butonları, toplu işlem):
   tek stil — tam kapsül, 44 yükseklik (sayfalama kabıyla aynı). Kart içi form alanları 12 köşeli kalır. */
.fi-ta-ctn .fi-ta-header-toolbar .fi-input-wrp,
.fi-ta-ctn .fi-pagination .fi-input-wrp {
    border-radius: var(--g-radius-pill) !important;
    min-height: var(--g-control-h) !important;
}
.fi-ta-ctn .fi-ta-header-toolbar .fi-input-wrp { min-width: 240px; }
.fi-ta-ctn .fi-ta-header-toolbar .fi-input-wrp-prefix { padding-inline: var(--g-space-sm) var(--g-space-2xs) !important; }
.fi-ta-ctn .fi-pagination .fi-input-wrp-prefix { padding-inline: var(--g-space-sm) var(--g-space-2xs) !important; }
.fi-ta-ctn .fi-pagination select.fi-select-input { padding-inline-start: var(--g-space-xs) !important; }
.fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn {
    position: relative;
    width: var(--g-control-h) !important;
    height: var(--g-control-h) !important;
    border-radius: var(--g-radius-pill) !important;
    background: var(--g-well) !important;
    color: var(--g-secondary) !important;
    margin: 0 !important;
}
.fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn:hover { background: var(--g-seg-hover) !important; color: var(--g-ink) !important; }
.fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn .fi-icon { width: var(--g-icon) !important; height: var(--g-icon) !important; }
/* Rozet sayısı butonun sağ üst köşesinde, kart rengiyle 2 px halkalı (butona yapışmaz). */
.fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn-badge-ctn {
    inset-inline-start: auto !important;
    inset-inline-end: -4px !important;
    top: -4px !important;
    translate: none !important;
    background: transparent !important;
    border-radius: var(--g-radius-pill) !important;
}
.fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn-badge-ctn .fi-badge {
    min-width: 18px; justify-content: center;
    background: var(--g-ink) !important; color: var(--g-on-ink) !important;
    box-shadow: 0 0 0 2px var(--g-surface) !important;
}
.fi-ta-ctn .fi-ta-header-toolbar > div,
.fi-ta-ctn .fi-ta-header-toolbar .fi-ta-actions { align-items: center; gap: var(--g-space-s) !important; }
.fi-ta-ctn .fi-ta-header-toolbar .fi-btn,
.fi-ta-ctn .fi-ta-selection-indicator .fi-btn { min-height: var(--g-control-h) !important; border-radius: var(--g-radius-pill) !important; }

/* Toplu seçim sütunu: kart iç boşluğundan (24) başlar; kutu → ilk sütun metni 12. */
.fi-ta-ctn .fi-ta-selection-cell,
.fi-ta-ctn .fi-ta-cell.fi-ta-selection-cell:first-child,
.fi-ta-ctn th.fi-ta-selection-cell:first-child { padding-inline: var(--g-card-pad) 0 !important; width: 1px; }
.fi-ta-ctn .fi-ta-selection-cell + .fi-ta-header-cell,
.fi-ta-ctn .fi-ta-selection-cell + .fi-ta-cell .fi-ta-text:not(.fi-inline) { padding-inline-start: var(--g-space-s) !important; }

.fi-ta-ctn .fi-ta-header-cell {
    background-color: var(--g-surface) !important;
    color: var(--g-secondary) !important;
    font: var(--g-text-help) !important;
    font-weight: 600 !important;
    padding: var(--g-space-s) !important;
    white-space: nowrap;
}

.fi-ta-ctn .fi-ta-header-cell:first-child,
.fi-ta-ctn .fi-ta-cell:first-child .fi-ta-text:not(.fi-inline),
.fi-ta-ctn .fi-ta-cell:first-child .fi-ta-col > .fi-ta-text { padding-inline-start: var(--g-card-pad) !important; }

.fi-ta-ctn .fi-ta-header-cell:last-child,
.fi-ta-ctn .fi-ta-cell:last-child .fi-ta-text:not(.fi-inline),
.fi-ta-ctn .fi-ta-actions-cell { padding-inline-end: var(--g-card-pad) !important; }

.fi-ta-ctn .fi-ta-header-cell-sort-btn,
.fi-ta-ctn .fi-ta-header-cell button { font: inherit !important; color: inherit !important; gap: var(--g-space-2xs); }

.fi-ta-ctn .fi-ta-text:not(.fi-inline) { padding: var(--g-space-sm) var(--g-space-s) !important; }
.fi-ta-ctn .fi-ta-cell:first-child,
.fi-ta-ctn .fi-ta-cell:last-child { padding-inline: 0 !important; }
.fi-ta-ctn .fi-ta-cell.fi-ta-actions-cell,
.fi-ta-ctn .fi-ta-cell:has(> .fi-ta-actions),
.fi-ta-ctn .fi-ta-cell.fi-ta-actions-cell:last-child,
.fi-ta-ctn .fi-ta-cell:last-child:has(> .fi-ta-actions) { padding-inline: var(--g-space-s) var(--g-card-pad) !important; }
.fi-ta-ctn thead th,
.fi-ta-ctn thead tr { background-color: var(--g-surface) !important; }
.fi-ta-ctn .fi-ta-actions { gap: var(--g-action-gap) !important; }
.fi-ta-ctn .fi-ta-text-item,
.fi-ta-ctn .fi-ta-text-item-label,
.fi-ta-ctn .fi-ta-cell { font: var(--g-text-body); color: var(--g-ink); }
.fi-ta-ctn .fi-ta-text-description,
.fi-ta-ctn .fi-ta-text-item-description,
.fi-ta-ctn .fi-ta-col-description { font: var(--g-text-help) !important; color: var(--g-secondary) !important; margin-top: 2px; }

.fi-ta-ctn table,
.fi-ta-ctn .fi-ta-row,
.fi-ta-ctn thead,
.fi-ta-ctn tbody,
.fi-ta-ctn .fi-ta-row > td {
    border-color: var(--g-line) !important;
}

.fi-ta-ctn .fi-ta-row:hover,
.fi-ta-ctn .fi-ta-row.fi-clickable:hover { background-color: var(--g-well) !important; }

.fi-ta-ctn .fi-pagination {
    padding: var(--g-space-sm) var(--g-card-pad) !important;
    border-color: var(--g-line) !important;
}

.fi-pagination-overview,
.fi-pagination .fi-pagination-records-per-page-select-ctn { font: var(--g-text-help) !important; color: var(--g-secondary) !important; }
.fi-pagination-items { border-radius: var(--g-radius-seg) !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; border: 0 !important; background: var(--g-well); padding: var(--g-seg-pad) !important; gap: var(--g-seg-pad) !important; display: inline-flex !important; flex-wrap: wrap; align-items: center; }
.fi-pagination-item-btn { border-radius: var(--g-radius-seg-item) !important; min-width: var(--g-control-h-sm); min-height: var(--g-control-h-sm); border: 0 !important; box-shadow: none !important; margin: 0 !important; }
.fi-pagination-item:not(.fi-active) .fi-pagination-item-btn:hover { background: var(--g-seg-hover) !important; }
.fi-pagination-item.fi-active .fi-pagination-item-btn { background: var(--g-ink) !important; }
.fi-pagination-item.fi-active .fi-pagination-item-label { color: var(--g-on-ink) !important; }
.fi-pagination-item { border: 0 !important; box-shadow: none !important; margin: 0 !important; }

/* Toplu seçim / filtre göstergeleri. */
.fi-ta-filter-indicators,
.fi-ta-selection-indicator { padding: var(--g-space-xs) var(--g-card-pad) !important; font: var(--g-text-help) !important; border-color: var(--g-line) !important; background: var(--g-surface) !important; }
.fi-icon-btn-badge-ctn .fi-badge { min-height: 18px; padding: 0 6px !important; font-size: 11px !important; line-height: 16px !important; }

/* Boş durum: ikon 24 kuyuda, başlık 17, açıklama 13. */
.fi-ta-empty-state { padding: var(--g-space-xl) var(--g-card-pad) !important; }
.fi-ta-empty-state .fi-ta-empty-state-icon-bg { background-color: var(--g-well) !important; padding: var(--g-space-s) !important; margin-bottom: var(--g-space-sm) !important; }
.fi-ta-empty-state .fi-ta-empty-state-icon-bg .fi-icon { width: var(--g-icon-lg) !important; height: var(--g-icon-lg) !important; color: var(--g-secondary) !important; }
.fi-ta-empty-state .fi-ta-empty-state-heading { font: var(--g-text-title) !important; color: var(--g-ink) !important; }
.fi-ta-empty-state .fi-ta-empty-state-description { font: var(--g-text-help) !important; color: var(--g-secondary) !important; margin-top: var(--g-space-2xs) !important; }

/* =====================================================================
 * 8. Modal, açılır menü, bildirim (toast)
 * ===================================================================== */

.fi-modal-close-overlay,
.fi-modal-window-ctn::before { background-color: var(--g-scrim) !important; }

.fi-modal-window { box-shadow: 0 0 0 1px var(--g-line) !important; }
.fi-modal-window .fi-modal-header { padding: var(--g-card-pad) var(--g-card-pad) 0 !important; gap: var(--g-space-s) !important; }
.fi-modal-window .fi-modal-heading { font: 600 20px/26px var(--g-font) !important; color: var(--g-ink) !important; }
.fi-modal-window .fi-modal-description { font: var(--g-text-body) !important; color: var(--g-secondary) !important; margin-top: var(--g-space-xs) !important; }
.fi-modal-window .fi-modal-content { padding: var(--g-space-md) var(--g-card-pad) 0 !important; gap: var(--g-field-gap) !important; }
.fi-modal-window .fi-modal-footer { padding: var(--g-space-md) var(--g-card-pad) var(--g-card-pad) !important; }
.fi-modal-window .fi-modal-footer-actions { gap: var(--g-action-gap) !important; flex-wrap: wrap; }
.fi-modal-window .fi-modal-close-btn { top: var(--g-space-md) !important; inset-inline-end: var(--g-space-md) !important; }
.fi-modal-window .fi-modal-icon-bg { background: var(--g-well) !important; }
.fi-modal-window .fi-modal-icon-bg .fi-icon { color: var(--g-ink) !important; }
.fi-modal-window .fi-modal-icon-bg.fi-color-danger { background: var(--g-coral-tint) !important; }
.fi-modal-window .fi-modal-icon-bg.fi-color-danger .fi-icon { color: var(--g-coral-ink) !important; }
.fi-modal.fi-align-center .fi-modal-window .fi-modal-header { padding-top: var(--g-space-lg) !important; }

.fi-dropdown-panel {
    background-color: var(--g-surface) !important;
    border-radius: var(--g-radius-menu) !important;
    box-shadow: 0 0 0 1px var(--g-line), 0 8px 24px rgba(42, 24, 47, 0.08) !important;
    border: 0 !important;
}
/* Kaydırılabilir açılır liste (seçimler): en çok 320, içte kayar; köşe 16 korunur, seçenekler kesilmez. */
.fi-dropdown-panel.fi-scrollable { max-height: 320px; overflow-y: auto !important; overscroll-behavior: contain; }
.fi-dropdown-list { padding: var(--g-menu-pad) !important; gap: 2px; }
.fi-dropdown-header + .fi-dropdown-list,
.fi-dropdown-list + .fi-dropdown-list { border-top: 1px solid var(--g-line) !important; }
.fi-dropdown-list-item { border-radius: var(--g-radius-menu-item) !important; min-height: 40px; padding: 0 var(--g-space-s) !important; font: var(--g-text-body) !important; gap: var(--g-space-xs) !important; }
.fi-dropdown-list-item:hover { background: var(--g-well) !important; }
.fi-dropdown-list-item .fi-icon { width: var(--g-icon) !important; height: var(--g-icon) !important; }
.fi-dropdown-header { padding: var(--g-space-s) !important; font: var(--g-text-label) !important; }

/* Seçim açılır listesi (Filament select). */
.fi-select-input-dropdown,
.fi-select-input-options-ctn { border-radius: var(--g-radius-menu) !important; }
.fi-select-input-option { border-radius: var(--g-radius-menu-item) !important; font: var(--g-text-body) !important; }
.fi-select-input-option.fi-selected { background: var(--g-well) !important; }
.fi-dropdown-list-item:focus-visible { outline-offset: -2px !important; }

/* Tarih seçici paneli. */
.fi-fo-date-time-picker-panel { border-radius: var(--g-radius-menu) !important; padding: var(--g-space-sm) !important; font: var(--g-text-body); }

.fi-no-notification {
    border-radius: var(--g-radius-menu) !important;
    box-shadow: 0 0 0 1px var(--g-line), 0 8px 24px rgba(42, 24, 47, 0.08) !important;
    background-color: var(--g-surface) !important;
    padding: var(--g-space-sm) !important;
    gap: var(--g-space-s) !important;
}
.fi-no-notification-title { font: var(--g-text-label) !important; color: var(--g-ink) !important; }
.fi-no-notification-body { font: var(--g-text-help) !important; color: var(--g-secondary) !important; }

/* =====================================================================
 * 9. Giriş sayfası
 * ===================================================================== */

.fi-simple-layout { background-color: var(--g-canvas) !important; }

.fi-simple-main-ctn { padding-inline: var(--g-space-sm); }

.fi-simple-main {
    max-width: 440px !important;
    width: 100%;
    padding: var(--g-space-xl) var(--g-space-md) var(--g-space-md) !important;
    margin-block: var(--g-space-xl) !important;
}

.fi-simple-page-content,
.fi-simple-page > section { row-gap: var(--g-space-md) !important; }

.fi-simple-header { gap: 0 !important; align-items: center; }
.fi-simple-header .fi-logo { margin-bottom: var(--g-space-md) !important; height: 34px !important; } /* üst çubuk 28 ile oranlı */

.fi-simple-header-heading {
    font: var(--g-text-page-title) !important;
    letter-spacing: -0.5px !important;
    color: var(--g-ink) !important;
    text-align: center;
}

.fi-simple-header-subheading {
    font: var(--g-text-body) !important;
    color: var(--g-secondary) !important;
    margin-top: var(--g-space-xs) !important;
    text-align: center;
}

/* Boom Bazaar tentesi: mercan/krem şeritler, dalgalı alt kenar, mürekkep çubuk (SVG, ölçeklenmez; oyun ikonundaki tente). */
.g-login-awning {
    display: block;
    width: 384px;
    height: 32px;
    margin: 0 auto;
}

.g-login-awning .rod { fill: var(--g-ink); }
.g-login-awning .a { fill: var(--g-coral); }
.g-login-awning .b { fill: var(--g-surface); stroke: var(--g-line); stroke-width: 1; }

@media (max-width: 480px) {
    .g-login-awning { display: none; }
}

.fi-simple-main .fi-btn[type='submit'],
.fi-simple-main .fi-form-actions .fi-btn { width: 100%; min-height: var(--g-control-h); }

/* =====================================================================
 * 10. Boom Bazaar bileşenleri (özel Blade görünümleri)
 * ===================================================================== */

.g-stack { display: flex; flex-direction: column; gap: var(--g-card-gap); }
.g-group { display: flex; flex-direction: column; gap: var(--g-header-gap); }
.g-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-xs); }
.g-row--between { justify-content: space-between; }
.g-muted { color: var(--g-secondary); }
.g-label { font: var(--g-text-label); color: var(--g-secondary); }
.g-help { font: var(--g-text-help); color: var(--g-secondary); }
.g-footnote { font: var(--g-text-caption); color: var(--g-secondary); }
.g-title { font: var(--g-text-title); color: var(--g-ink); }
.g-body { font: var(--g-text-body); color: var(--g-ink); }
.g-body-strong { font: var(--g-text-body-strong); color: var(--g-ink); }
.g-num { font-variant-numeric: tabular-nums; }
.g-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 16px; word-break: break-all; }

/* Bento ızgarası: 12 sütun, kartlar arası tek boşluk; sütun sayısı içerik genişliğine göre (container query). */
.g-bento-ctn { container-type: inline-size; }

.g-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--g-card-gap);
}

.g-tile {
    background: var(--g-surface);
    border-radius: var(--g-radius-card);
    padding: var(--g-card-pad);
    grid-column: span 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-xs);
}

.g-tile--4 { grid-column: span 4; }
.g-tile--5 { grid-column: span 5; }
.g-tile--6 { grid-column: span 6; }
.g-tile--8 { grid-column: span 8; }
.g-tile--12 { grid-column: span 12; }
.g-tile--ink { background: var(--g-ink); color: var(--g-on-ink); }
.g-tile--ink .g-label,
.g-tile--ink .g-footnote,
.g-tile--ink .g-help { color: var(--g-on-ink); opacity: 0.76; }
.g-tile--well { background: var(--g-well); }
/* Koyu temada ters (açık) geniş yüzey göz alır: vurgu kutusu bir kat yükseltilmiş koyu yüzey olur. */
.dark .g-tile--ink { background: #3A2D40; color: var(--g-ink); }
.dark .g-tile--ink .g-label,
.dark .g-tile--ink .g-footnote,
.dark .g-tile--ink .g-help,
.dark .g-tile--ink .g-kpi-value small { color: var(--g-secondary); opacity: 1; }

/* Başlıklı kart: başlık satırı → içerik 16. */
.g-tile-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--g-space-2xs) var(--g-space-s); min-height: 22px; }
.g-tile > .g-tile-head + * { margin-top: calc(var(--g-title-gap) - var(--g-space-xs)); }
.g-tile-head .g-help,
.g-tile-head .g-footnote { text-align: end; }
.g-tile-section { display: flex; flex-direction: column; gap: var(--g-header-gap); margin-top: var(--g-space-sm); }

/* KPI kutusu: etiket → sayı → dipnot; tek boy sayı. */
.g-kpi { justify-content: flex-start; gap: var(--g-space-xs); }
.g-kpi-value {
    font: var(--g-text-kpi);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-kpi-value small {
    font: var(--g-text-kpi-suffix);
    letter-spacing: 0;
    color: var(--g-secondary);
    margin-inline-start: var(--g-space-2xs);
}
.g-tile--ink .g-kpi-value small { color: var(--g-on-ink); opacity: 0.76; }
.g-kpi .g-footnote { margin-top: auto; }

/* Orta genişlik (≈ 640–999 px içerik): 2 sütunlu düzen; dar: tek sütun. */
@container (max-width: 839px) {
    .g-tile, .g-tile--4, .g-tile--5, .g-tile--6 { grid-column: span 6; }
    .g-tile--8, .g-tile--12, .g-tile--m12 { grid-column: span 12; }
}

@container (max-width: 639px) {
    .g-tile, .g-tile--4, .g-tile--5, .g-tile--6, .g-tile--8, .g-tile--12, .g-tile--m12 { grid-column: span 12; }
}

.g-delta { font: var(--g-text-caption); font-weight: 600; border-radius: var(--g-radius-pill); padding: 0 var(--g-space-xs); min-height: var(--g-badge-h); display: inline-flex; gap: var(--g-space-2xs); align-items: center; width: fit-content; white-space: nowrap; }
.g-delta--up { background: var(--g-mint-tint); color: var(--g-mint-ink); }
.g-delta--down { background: var(--g-coral-tint); color: var(--g-coral-ink); }
.g-delta--flat { background: var(--g-well); color: var(--g-secondary); }

/* Çentikli ilerleme (dekoratif): 20 çentik, dolanlar lila */
.g-ticks { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; height: 8px; margin-top: var(--g-space-2xs); }
.g-ticks i { height: 8px; border-radius: 2px; background: var(--g-track); }
.g-ticks i.on { background: var(--g-lilac); }

/* Grafik: işaretler SVG'de (oran korunmaz, çizgi kalınlığı sabit), yazılar HTML'de — her kutuda aynı boyda. */
.g-chart { display: flex; flex-direction: column; gap: var(--g-space-xs); flex: 1 1 auto; min-height: 0; }
.g-chart-meta { display: flex; justify-content: flex-end; font: var(--g-text-caption); color: var(--g-secondary); min-height: 16px; }
.g-chart-meta strong { font-weight: 600; color: var(--g-ink); margin-inline-start: var(--g-space-2xs); }
.g-chart-plot { position: relative; flex: 1 1 auto; min-height: var(--g-chart-h-sm); }
.g-chart--lg .g-chart-plot { min-height: var(--g-chart-h); }
.g-chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.g-chart-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.g-chart-axis { display: grid; grid-template-columns: 1fr 1fr 1fr; font: var(--g-text-caption); color: var(--g-secondary); font-variant-numeric: tabular-nums; }
.g-chart-axis span:nth-child(2) { text-align: center; }
.g-chart-axis span:nth-child(3) { text-align: end; }
.g-chart .grid { stroke: var(--g-line); stroke-width: 1; }
.g-chart .s-ink { stroke: var(--g-ink); fill: none; stroke-width: 2; }
.g-chart .s-mint { stroke: var(--g-mint); fill: none; stroke-width: 2; }
.g-chart .s-coral { stroke: var(--g-coral); fill: none; stroke-width: 2; }
.g-chart .s-sky { stroke: var(--g-sky); fill: none; stroke-width: 2; }
.g-chart .s-lilac { stroke: var(--g-lilac-ink); fill: none; stroke-width: 2; }
.g-chart .f-ink, .g-chart-dot.f-ink { fill: var(--g-ink); background: var(--g-ink); }
.g-chart .f-mint, .g-chart-dot.f-mint { fill: var(--g-mint); background: var(--g-mint); }
.g-chart .f-coral, .g-chart-dot.f-coral { fill: var(--g-coral); background: var(--g-coral); }
.g-chart .f-sky, .g-chart-dot.f-sky { fill: var(--g-sky); background: var(--g-sky); }
.g-chart .f-lilac, .g-chart-dot.f-lilac { fill: var(--g-lilac); background: var(--g-lilac); }
.g-chart .f-track { fill: var(--g-track); }
.g-chart .area-mint { fill: var(--g-mint-tint); }
.g-chart .area-sky { fill: var(--g-sky-tint); }
.g-chart .area-coral { fill: var(--g-coral-tint); }
.g-chart rect.hit:hover { fill: color-mix(in oklab, var(--g-ink) 6%, transparent); }

/* Alıcılar kartı: liste → çubuk 16, çubuk → lejant 8, lejant → özet 12, özet → buton 16 (kart boşluğu 8 üstüne). */
.g-reach { display: flex; flex-direction: column; gap: var(--g-space-xs); margin-top: var(--g-space-xs); }
.g-reach-summary { margin-top: var(--g-space-2xs); }
.g-reach-action { margin-top: var(--g-space-xs); }
.g-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-2xs) var(--g-space-sm); font: var(--g-text-caption); color: var(--g-secondary); }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.g-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.g-dot-ink { background: var(--g-ink); }
.g-dot-mint { background: var(--g-mint); }
.g-dot-coral { background: var(--g-coral); }
.g-dot-sky { background: var(--g-sky); }
.g-dot-lilac { background: var(--g-lilac); }

/* Yatay oran çubuğu */
.g-bar { height: 8px; border-radius: var(--g-radius-pill); background: var(--g-track); overflow: hidden; display: flex; }
.g-bar > i { display: block; height: 100%; }

/* Liste satırı: en az 40, etiket solda (üstten hizalı), değer sağda. */
.g-list { display: flex; flex-direction: column; }
.g-list-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--g-space-sm);
    padding: 10px 0;
    min-height: 40px;
    border-bottom: 1px solid var(--g-line);
    font: var(--g-text-body);
    color: var(--g-ink);
}
.g-list-row:first-child { padding-top: 0; min-height: 30px; }
.g-list-row:last-child { border-bottom: 0; padding-bottom: 0; min-height: 30px; }
.g-list-row:only-child { min-height: 20px; }
.g-list-row > span:first-child { min-width: 0; }
.g-list-row strong { font: var(--g-text-body-strong); font-variant-numeric: tabular-nums; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.g-list-row a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--g-lilac); text-underline-offset: 3px; }
.g-list-row--wrap { flex-wrap: wrap; align-items: center; }

/* Kohort tablosu */
.g-cohort { width: 100%; border-collapse: separate; border-spacing: var(--g-space-2xs); font: var(--g-text-body); font-variant-numeric: tabular-nums; margin-inline: calc(-1 * var(--g-space-2xs)); width: calc(100% + 2 * var(--g-space-2xs)); }
.g-cohort th { font: var(--g-text-help); font-weight: 600; color: var(--g-secondary); text-align: start; padding: 0 var(--g-space-s) var(--g-space-2xs); }
.g-cohort th.c, .g-cohort td.c { text-align: center; }
.g-cohort td { padding: 0 var(--g-space-s); height: 36px; border-radius: var(--g-radius-small); color: var(--g-ink); background: var(--g-well); }
.g-cohort td.g-cohort-label { background: transparent; color: var(--g-secondary); }
.dark .g-cohort td.g-cohort-hot { color: #1B141E; }

/* Kapsül seçici (tarih aralığı): segmentli seçiciyle aynı ölçü. */
.g-pills { display: inline-flex; align-items: center; background: var(--g-surface); border-radius: var(--g-radius-pill); padding: var(--g-space-2xs); gap: var(--g-space-2xs); min-height: var(--g-control-h); }
.g-pills button { border-radius: var(--g-radius-pill); padding: 0 var(--g-space-sm); font: var(--g-text-label); color: var(--g-secondary); min-height: var(--g-control-h-sm); white-space: nowrap; }
.g-pills button:hover { color: var(--g-ink); }
.g-pills button.on { background: var(--g-ink); color: var(--g-on-ink); }
.g-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-s) var(--g-space-sm); }
.g-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--g-space-xs) var(--g-space-sm); }

/* Uyarı kutusu */
.g-callout { border-radius: var(--g-radius-menu); padding: var(--g-space-sm); background: var(--g-warn); color: var(--g-warn-ink); font: var(--g-text-body); }
.g-callout strong { font-weight: 600; }
.g-callout ul { margin-top: var(--g-space-2xs); padding-inline-start: 18px; list-style: disc; }
.g-callout--info { background: var(--g-sky-tint); color: var(--g-sky-ink); }
.g-callout--ok { background: var(--g-mint-tint); color: var(--g-mint-ink); }

/* Gizlilik notu */
.g-privacy { font: var(--g-text-caption); color: var(--g-secondary); }

/* Kuyu içinde metin bloğu (TR/EN metin). */
.g-well { background: var(--g-well); border-radius: var(--g-radius-menu); padding: var(--g-space-s) var(--g-space-sm); display: flex; flex-direction: column; gap: var(--g-space-2xs); }
.g-media { border-radius: var(--g-radius-menu); width: 100%; max-height: 180px; object-fit: cover; }

/* Kart içi küçük giriş + buton (cihaz test etiketi). */
.g-inline-form { display: flex; gap: var(--g-space-xs); align-items: center; }
.g-inline-input { background: var(--g-well); border: 0; border-radius: var(--g-radius-pill); padding: 0 var(--g-space-s); height: var(--g-control-h-sm); font: var(--g-text-body); color: var(--g-ink); width: 180px; }
.g-inline-input:focus { outline: 2px solid var(--g-focus); outline-offset: 0; }

/* ---------- iPhone kilit ekranı önizlemesi ---------- */

.g-phone {
    /* iPhone oranı 9 : 19,5, sabit genişlik; çerçeve kartın içinde tamamen görünür. */
    box-sizing: border-box;
    width: 264px;
    max-width: 100%;
    flex: 0 0 auto;
    margin-inline: auto;
    aspect-ratio: 9 / 19.5;
    border-radius: var(--g-radius-phone);
    background: #1C1D1F;
    padding: 8px;
}
.g-phone + .g-help { margin-top: var(--g-space-2xs); } /* telefon → "Dokununca" 12 (kart aralığı 8 + 4) */

.g-phone-screen {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    border-radius: 36px;
    overflow: hidden;
    background: #3A2340;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--g-space-s) var(--g-space-s) var(--g-space-md); /* balon alt çerçeveye değmez: alt 24 */
    color: #FFFFFF;
}

.g-phone-island { width: 88px; height: 26px; border-radius: var(--g-radius-pill); background: #000; }
.g-phone-date { margin-top: var(--g-space-sm); font: 600 14px/20px var(--g-font); opacity: 0.85; }
.g-phone-time { font: 600 56px/60px var(--g-font); letter-spacing: -2px; font-variant-numeric: tabular-nums; }

.g-notif {
    margin-top: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    border-radius: 20px;
    background: rgba(245, 245, 245, 0.82);
    color: #111;
    padding: var(--g-space-s);
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--g-space-xs) 10px;
    font-family: -apple-system, 'SF Pro Text', var(--g-font);
}

.g-notif img.g-notif-icon { width: 36px; height: 36px; border-radius: 8px; }
.g-notif-head { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: #555; }
.g-notif-title { font-size: 14px; font-weight: 600; line-height: 19px; color: #111; }
.g-notif-body { font-size: 14px; line-height: 19px; color: #111; }
.g-notif-media { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }

/* İki sütunlu düzen: form + yapışkan yan sütun (içerik genişliğine göre tek sütuna iner). */
.g-compose-ctn { container-type: inline-size; }
.g-compose { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--g-card-gap); align-items: start; }
.g-compose-aside { position: sticky; top: calc(64px + var(--g-space-sm)); display: flex; flex-direction: column; gap: var(--g-card-gap); }
.g-actions { display: flex; flex-flow: row wrap; align-items: center; gap: var(--g-action-gap); }
.g-actions > * { margin: 0 !important; }
@container (max-width: 959px) {
    .g-compose { grid-template-columns: minmax(0, 1fr); }
    .g-compose-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .g-compose-aside > .g-span-all { grid-column: 1 / -1; }
}
@container (max-width: 639px) {
    .g-compose-aside { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
 * Liste noktaları, ekran görüntüleri, metin KPI'ları
 * ===================================================================== */
.g-list-row i[class^="g-dot-"] { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: var(--g-space-xs); }
.g-photo { width: 260px; max-width: 100%; }
.g-photo-img { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--g-radius-menu); background: var(--g-well); }
.g-kpi-value.g-kpi-value--text { font: var(--g-text-stat); }

/* Kart içinde ikinci başlık (ör. Genel Bakış › Destek): üstte 24. */
.g-tile > .g-tile-head--section { margin-top: var(--g-space-sm); }

/* Destek yazışması: kullanıcı kuyu zemininde solda, ekip ink-tint sağda, iç not uyarı tonunda; balon köşe 16, 12 aralık. */
.g-thread { display: flex; flex-direction: column; gap: var(--g-space-s); }
.g-msg { max-width: 80%; align-self: flex-start; background: var(--g-well); border-radius: var(--g-radius-menu); padding: var(--g-space-s) var(--g-space-sm); display: flex; flex-direction: column; gap: var(--g-space-xs); }
.g-msg--team { align-self: flex-end; background: var(--g-sky-tint); }
.g-msg--note { align-self: stretch; max-width: none; background: var(--g-warn); color: var(--g-warn-ink); }
.g-msg-head { display: flex; justify-content: space-between; gap: var(--g-space-s); font: var(--g-text-help); color: var(--g-secondary); }
.g-msg--note .g-msg-head { color: var(--g-warn-ink); }
.g-msg-head strong { font-weight: 600; color: inherit; }
.g-msg-body { font: var(--g-text-body); color: var(--g-ink); white-space: normal; overflow-wrap: anywhere; }
.g-msg--note .g-msg-body { color: var(--g-warn-ink); }
.g-msg .g-photo { width: 220px; }
.g-compose > .g-thread-tile { grid-column: auto; align-self: start; }

/* Duyuru önizlemesi: oyundaki üst duyuru kartı (uyarı zemini, başlık ink 16/24, alt satır warn-ink 14/20, ink kapsül buton). */
.g-notice { display: flex; align-items: center; gap: var(--g-space-xs); background: var(--g-warn); border-radius: var(--g-radius-menu); padding: var(--g-space-xs) var(--g-space-xs) var(--g-space-xs) var(--g-space-sm); }
.g-notice-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.g-notice-text strong { font: 600 16px/24px var(--g-font); color: var(--g-ink); }
.g-notice-text span { font: 400 14px/20px var(--g-font); color: var(--g-warn-ink); }
.g-notice-cta { flex: 0 0 auto; font: var(--g-text-label); background: var(--g-ink); color: var(--g-on-ink); border-radius: var(--g-radius-pill); padding: 0 var(--g-space-sm); min-height: var(--g-control-h-sm); display: inline-flex; align-items: center; }
.g-notice-close { flex: 0 0 auto; width: var(--g-control-h-sm); height: var(--g-control-h-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--g-warn-ink); font: 400 20px/1 var(--g-font); }

/* Tablo küçük görselleri: saydam görsel kartın kendi renginde durur (siyah/beyaz kutu yok), oranı korunur, köşe 8. */
.fi-ta-image img { object-fit: contain; background: transparent; border-radius: var(--g-radius-small); }

/* Büyüme sayfaları: huni çubukları ve sade veri tablosu. */
.g-funnel { display: flex; flex-direction: column; gap: var(--g-space-s); }
.g-funnel-row { display: grid; grid-template-columns: minmax(140px, 200px) 1fr 80px minmax(120px, 260px); align-items: center; gap: var(--g-space-sm); font: var(--g-text-body); }
.g-funnel-label { color: var(--g-ink); font-weight: 600; }
.g-funnel-bar { height: 24px; border-radius: var(--g-radius-small); background: var(--g-well); overflow: hidden; }
.g-funnel-bar i { display: block; height: 100%; background: var(--g-lilac); border-radius: var(--g-radius-small); }
.g-funnel-n { text-align: end; font-variant-numeric: tabular-nums; }
.g-funnel-rate { font-variant-numeric: tabular-nums; color: var(--g-ink); }
@container (max-width: 639px) { .g-funnel-row { grid-template-columns: 1fr auto; } .g-funnel-bar, .g-funnel-rate { grid-column: 1 / -1; } }
.g-data { width: 100%; border-collapse: collapse; font: var(--g-text-body); font-variant-numeric: tabular-nums; margin-block-end: var(--g-space-sm); }
.g-data th { font: var(--g-text-help); font-weight: 600; color: var(--g-secondary); text-align: start; padding: 0 var(--g-space-s) var(--g-space-xs); }
.g-data td { padding: 10px var(--g-space-s); border-top: 1px solid var(--g-line); color: var(--g-ink); }
.g-data th.c, .g-data td.c { text-align: center; }
.g-data th:first-child, .g-data td:first-child { padding-inline-start: 0; }
.g-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--g-radius-pill); font: var(--g-text-caption); font-weight: 600; background: var(--g-well); color: var(--g-secondary); }
.g-badge--good { background: var(--g-mint-tint, var(--g-well)); color: var(--g-mint-ink); }
.g-badge--bad { background: var(--g-coral-tint, var(--g-well)); color: var(--g-coral-ink); }
.g-link { color: var(--g-ink); text-decoration: underline; text-decoration-color: var(--g-lilac); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.g-health { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.g-health::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--g-mint); }
.g-health--warn::before { background: var(--g-warn-ink); }
.g-health--bad::before { background: var(--g-coral); }