/*
 * Cover Lab — platform.claude.com/docs TEMASI (kullanıcı kararı 2026-10-10; ölçümler ve kararlar: docs/theme-claude-docs.md).
 * PORTALIN TEK STİL DOSYASI: yazı tipleri, açık/koyu renk ve ölçü token'ları (--cd-*; tek kaynak), sayfa iskeleti, tablolar, formlar,
 * düğmeler, popup'lar, etiketler, giriş ekranları ve sayfalara özgü yerleşim kuralları. Yeni bir değer yazılacaksa önce token eklenir.
 *
 * Mod: Filament'in açık / koyu / sistem mekanizması (localStorage "theme", <html class="dark">); varsayılan Sistem (kullanıcı kararı).
 * Token'lar sitenin tasarım sisteminden (cds) birebir; ham renk YALNIZCA bu dosyanın token bölümlerinde yazılır.
 * Yükleme: App\Support\AuthScreens::head() (her sayfanın <head>'i).
 * İskelet: resources/views/vendor/filament-panels/components/layout/index.blade.php + resources/views/partials/panel/*.
 * Davranış: public/js/cover-lab-panel.js.
 */

/* ============================================================================
 * 1. YAZI TİPİ — portalın TEK yazı tipi Inter (kullanıcı kararı 2026-10-10: "tamamen Inter"; SIL OFL 1.1, kendi sunucumuzdan public/fonts/inter,
 *    lisans yanında). Değişken dosya: kalınlık (100–900) + optik boyut (opsz 14–32) ekseni. `font-optical-sizing: auto` ile tarayıcı her yazıyı
 *    kendi boyutuna göre çizer: küçük yazılar (12–15 px) normal Inter (okunaklı), büyük başlıklar Inter Display (sıkı), arası kademeli.
 *    Serif ve mono yazı tipi YOK (ürün adı, gösterge rakamları, kodlar da Inter). latin + latin-ext alt kümeleri Türkçe harfleri kapsar.
 * ========================================================================== */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-opsz-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-opsz-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-opsz-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-opsz-italic.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
 * 2. TOKEN'LAR — AÇIK MOD (varsayılan) ve KOYU MOD (<html class="dark">). docs/theme-claude-docs.md §2–§4.
 * ========================================================================== */
:root {
    /* ÇUBUK STANDARDI — PORTAL GENELİ: yatay yığılmış çubuklar üç kalınlıkta: kalın 20 (köşe 6; Satış ve
       Kârlılık, Gelir Tablosu dağılımı), ince 10 (köşe 5, tam yuvarlak; tablo satırları, açılan alt satırlar, yaşlandırma), çizgi 3 (tam
       yuvarlak; içi boş kısım yalnızca uçlarda nokta). Parça arası her kalınlıkta 2; yalnızca dış uçlar yuvarlak, birleşimler düz. Çok küçük parça her kalınlıkta en az 3 px
       (kullanıcı kararı 2026-11-01; Satış ve Kârlılık'ın sıkışık satırları gibi: tutar küçükse bütün çubuk 3 px'lik parçalara iner). */
    --cl-bar-thick: 8px;         /* referansta tek yatay çubuk biçimi var (Caching › By reason): 8, dış köşe 4 */
    --cl-bar-thick-radius: 4px;
    --cl-bar-thin: 8px;          /* referansın parça çubuğu (Caching › By reason): 8 yüksek, dış köşe 4, iç köşe 2, arası 1 */
    --cl-bar-thin-radius: 4px;
    --cl-bar-inner-radius: 2px;
    --cl-bar-line: 3px;
    --cl-bar-gap: 1px;
    --cl-bar-min: 3px;
    /* Çubuğun en az kalınlığı (kullanıcı kararı 2026-11-13): çok kısa çubuk (tam uçta kalan küçük değer) çizgiye inip köşe yuvarlaklığını yitirmesin;
       yatay tek çubuklar bu uzunlukta çizilir (uçta kalan çubuk track'in içinde kalır), radüsler korunur. */
    --cl-bar-end-min: 8px;
    /* Bölümlü formların sol sütunu (bölüm adı + açıklama; .cl-form-aside, rol sayfası): referansın 224'ü. */
    --cl-aside-w: 224px;
    color-scheme: light;

    /* Etkileşimli denetimlerin imleci (referansın --cds-cursor-interactive'i): tarayıcıda el, Claude masaüstü uygulamasında (Electron) ok.
       Ayrıntı §15 "FARE İMLECİ". */
    --cd-cursor-interactive: pointer;

    /* Gri merdiveni (iki modda aynı) */
    --cd-gray-0: #FFFFFF;
    --cd-gray-10: #FCFCFB;
    --cd-gray-50: #F0EFEC;
    --cd-gray-100: #E1E0D9;
    --cd-gray-200: #C3C2B7;
    --cd-gray-400: #898781;
    --cd-gray-600: #52514E;
    --cd-gray-750: #2C2C2A;
    --cd-gray-800: #20201F;
    --cd-gray-830: #1A1A19;
    --cd-gray-850: #151515;
    --cd-gray-900: #0B0B0B;

    /* Anlam dolguları (iki modda aynı). VURGU token'ları (--cd-fill-accent, --cd-fill-accent-hover, --cd-text-accent, --cd-focus-glow) BU
       DOSYADA YAZILMAZ: tek kaynak App\Support\Colorway::ACCENTS (panel başına), değerler accentTokens() ile türetilip <head>'e yazılır (AuthScreens::head,
       <style id="cl-accent">). Kullanıcı kararı 2026-10-11: odak halkası, onay kutusu, bağlantı ve vurguyla ilgili her şey tek renk değerinden. */
    --cd-fill-danger: #D03B3B;
    --cd-fill-danger-hover: #E34948;
    --cd-fill-success: #009300;
    --cd-fill-success-hover: #0CA30C;
    --cd-fill-warning: #FAB219;
    --cd-fill-warning-hover: #EDA100;

    /* Anlamsal (açık mod) */
    --cd-page-bg: var(--cd-gray-10);
    --cd-surface-0: #F9F9F7;      /* Console surface-0 (en koyu düzlem) */
    /* Üst çubuk ve kenar menü zemini (referansın bg-console-chrome'u, ölçüldü 2026-11-01): surface-0 ile sayfa zemininin tam ortası
       (açıkta #FAFAF9 civarı, koyuda #101010); önce doğrudan surface-0'dı (#F9F9F7 / #0B0B0B). İki modda aynı formül. */
    --cd-surface-chrome: color-mix(in srgb, var(--cd-surface-0) 50%, var(--cd-page-bg));
    --cd-surface-panel: var(--cd-gray-0);
    --cl-illus-green: #73CB6D;    /* görsel şeridi zeminleri (referansın --cds-green-250 / --cds-blue-300; iki modda aynı) */
    --cl-whatsapp: currentColor;  /* atlasın ikon düğmesi: marka rengi yok (2026-11-03) */
    --cl-illus-blue: #6DA7EC;
    --cl-illus-orange: #F09978;   /* müşteri grubu görseli (Ana Bayi) zemini; iki modda aynı */
    --cl-illus-gray: #BDBAB0;     /* müşteri seçilmemişken / görseli olmayan grupta kartın görseli zemini (customer-group-none.svg); iki modda aynı */
    /* Grafik paleti (referansın --cds-chart-categorical-1 / -3 / -4 ve --cds-chart-axis, ölçüldü 2026-10-26; açık mod). Yönetim Raporu
       grafikleri: 1 mavi, 2 turuncu, 3 yeşil, 4 sarı (renkler sayfaların metrics()'inde). */
    --cl-chart-1: #2A78D6;
    /* İpucu kutusundaki olumlu / olumsuz değişim (zemin iki temada da koyu; koyu temanın yeşil / kırmızı tonu). */
    /* Grafikte nötr seri (geçen yıl, toplanan küçük kalemler; referansın Caching grafiğindeki gri). */
    --cl-chart-gray: #97958D;
    /* Net marj kademesinin renkleri grafikte (kullanıcı kararı 2026-10-31; MarginTier, .cl-margin--*): Taban çizgisi sarı (tabanın altı),
       Hedef çizgisi yeşil (hedef ve üstü); tablodaki renklerle aynı kaynak. */
    --cl-chart-floor: var(--cd-tint-yellow-fg);
    --cl-chart-target: var(--cd-text-success);
    /* Rapor çubuk grafiklerinin renkleri içeriğe ait (kullanıcı kararı 2026-10-31; App\Support\ReportColors): Genel Gider'in alt başlıkları
       turuncunun (Faaliyet Giderleri) tonları. Sayfa zeminiyle karıştırıldığı için iki temada da doğru. */
    --cl-chart-2b: color-mix(in srgb, var(--cl-chart-2) 65%, var(--cd-page-bg));
    --cl-chart-2c: color-mix(in srgb, var(--cl-chart-2) 38%, var(--cd-page-bg));
    --cl-tip-up: #55BF50;
    --cl-tip-down: #EC7E7E;
    --cl-chart-2: #EB6834;
    --cl-chart-3: #1BAF7A;
    --cl-chart-4: #EDA100;
    /* Referansın kategorik paletinin 5–8. renkleri (ölçüldü 2026-10-31; --cds-chart-categorical-5…8): pembe, yeşil, mor, kırmızı. */
    --cl-chart-5: #E87BA4;
    --cl-chart-6: #008300;
    --cl-chart-7: #6250D6;
    --cl-chart-8: #E34948;
    --cl-chart-axis: #C3C2B7;
    /* Gelir tablosunun satır bantları: bölüm başlığı hafif gri, toplam yeşil, kâr pembe (grafik paletinin
       yeşili ve pembesinden açık tonlar). */
    /* Bant zeminleri (kullanıcı kararı 2026-10-26: %20 daha koyu; önce 0.04 / %12 / %12). */
    /* Gelir tablosunun satır zeminleri kaldırıldı, bölümler çerçeveli (kullanıcı kararı 2026-10-26; önce gri / yeşil / pembe / mavi bantlar). */
    --cl-band-section: transparent;
    --cl-band-total: var(--cl-band-section); /* toplamlar da başlık grisi (kullanıcı kararı 2026-10-26; önce yeşil) */
    --cl-band-result: transparent;
    --cd-surface-popover: var(--cd-gray-0);
    --cd-text-primary: var(--cd-gray-900);
    --cd-text-secondary: var(--cd-gray-600);
    --cd-text-muted: var(--cd-gray-400);
    --cd-text-disabled: rgba(11, 11, 11, 0.35); /* referansın --cds-text-disabled (alpha-4); pasif satırın soluk yazısı */
    --cd-text-danger: #8E2626;
    --cd-text-success: #006300;
    --cd-border: rgba(11, 11, 11, 0.10);
    --cd-border-subtle: rgba(11, 11, 11, 0.05); /* tablo satır çizgisi (Console alpha-1) */
    --cd-border-strong: rgba(11, 11, 11, 0.20);
    --cd-border-stronger: rgba(11, 11, 11, 0.40);
    /* Anlam çizgileri (referansın --cds-border-accent / -danger / -success / -warning; uyarı kutuları, şeritler). */
    --cd-border-accent: #86B6EF;
    --cd-bg-accent-subtle: #E7F1FB; /* referansın seçili kart seçeneği zemini (--cds-bg-accent-subtle) */
    --cd-bg-accent: #CDE2FB; /* referansın --cds-bg-accent (açık: accent-100): dönem seçicisinde aralığın bandı */
    --cd-border-danger: #F09595;
    --cd-border-success: #73CB6D;
    --cd-border-warning: #EDA100;
    --cd-fill-primary: var(--cd-gray-900);
    --cd-fill-primary-hover: var(--cd-gray-750);
    --cd-on-primary: var(--cd-gray-0);
    --cd-fill-secondary: rgba(255, 255, 255, 0.10);
    --cd-fill-secondary-hover: rgba(11, 11, 11, 0.05);
    --cd-fill-ghost-hover: rgba(11, 11, 11, 0.05);
    --cd-fill-ghost-selected: rgba(11, 11, 11, 0.10);
    --cd-fill-menu-hover: rgba(11, 11, 11, 0.05);
    --cd-fill-neutral: rgba(11, 11, 11, 0.05); /* referansın bg-neutral'ı: gri rozet zemini (etiket rozeti) */
    --cd-fill-field: rgba(255, 255, 255, 0.50);
    --cd-fill-field-ring: rgba(11, 11, 11, 0.10);
    --cd-bg-neutral: rgba(11, 11, 11, 0.05);
    --cd-backdrop: rgba(0, 0, 0, 0.40);
    --cd-switch-track: rgba(11, 11, 11, 0.20);
    --cd-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    --cd-shadow-lg: 0 4px 8px rgba(11, 11, 11, 0.08), 0 12px 28px -2px rgba(11, 11, 11, 0.08);
    --cd-fill-secondary-ring: rgba(11, 11, 11, 0.10); /* Console fill-secondary-ring: ikincil düğmenin çizgisi */
    --cd-shadow-btn-secondary: inset 0 0 0 1px var(--cd-fill-secondary-ring), 0 1px 2px rgba(0, 0, 0, 0.05); /* Console ikincil düğme (shadow-field): çizgi + hafif gölge */
    --cd-focus-glow-danger: #FAD6D6;   /* Console bg-danger (açık) */

    /* Etiket (tint) renkleri — §2.3: zemin / yazı. Açık mod. */
    --cd-tint-red-bg: rgba(246, 143, 145, 0.35);      --cd-tint-red-fg: #8E2626;
    --cd-tint-orange-bg: rgba(238, 149, 114, 0.35);   --cd-tint-orange-fg: #863311;
    --cd-tint-yellow-bg: rgba(243, 161, 2, 0.35);     --cd-tint-yellow-fg: #734500;
    --cd-tint-green-bg: rgba(109, 201, 102, 0.35);    --cd-tint-green-fg: #006300;
    --cd-tint-aqua-bg: rgba(78, 203, 160, 0.35);      --cd-tint-aqua-fg: #065F49;
    --cd-tint-blue-bg: rgba(118, 178, 251, 0.35);     --cd-tint-blue-fg: #184F95;
    --cd-tint-violet-bg: rgba(169, 158, 255, 0.35);   --cd-tint-violet-fg: #4A3AA7;
    --cd-tint-magenta-bg: rgba(243, 138, 180, 0.35);  --cd-tint-magenta-fg: #862A4C;
    --cd-tint-gray-bg: var(--cd-bg-neutral);          --cd-tint-gray-fg: var(--cd-text-secondary);

    /* Ürün renkleri (temadan bağımsız, kullanıcı kararları): seri adları kurumsal renklerde (DEĞİŞMEZ), PNS-CL renk noktaları PDF'ten,
       Fiyatlar'da Peşin → 3 Ay Vadeli sütunlarının kademeli gölgesi (her sütun %5 koyu). */
    --cl-series-asp: #8257FF;
    --cl-series-chg: #FF275A;
    --cl-series-cmf: #04CF5E;
    --cl-logo-ink-light: #0B0B0B; /* logodaki C (cover-lab-logo-on-light.png) ve "Portal", açık mod */
    --cl-logo-ink-dark: #F0EFEC;  /* logodaki C (cover-lab-logo-on-dark.png) ve "Portal", koyu mod */
    --cl-pns-w: #FFFFFF;
    --cl-pns-y: #E7F250;
    --cl-pns-o: #E8B23F;
    --cl-pns-r: #DE3326;
    --cl-pns-g: #7DEF4A;
    --cl-pns-b: #1427E8;
    --cl-pns-a: #808080;

    /* Segment seçici (§6.5) */
    --cd-seg-track: rgba(11, 11, 11, 0.05);
    --cd-seg-thumb: #FFFFFF;
    --cd-seg-thumb-ring: rgba(11, 11, 11, 0.10);

    /* Yazı tipleri */
    --cd-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Ölçüler (§4, §5) */
    --cd-sidebar-w: 256px;        /* kenar menü (Console, docs/theme-claude-platform.md §3.2) */
    --cd-topbar-h: 48px;          /* üst çubuk (referansın --console-chrome-top) */
    --cd-nav-item-h: 36px;        /* kenar menü öğesi */
    --cd-control-h: 28px; /* referansın düğme / filtre hapı / arama / ikon düğmesi yüksekliği (canlıda ölçüldü 2026-11-12); form alanları --cd-field-h ile 32 kalır */
    --cd-control-h-sm: 28px;
    --cd-radius: 8px;
    --cd-radius-sm: 7px;
    --cd-radius-popover: 12px;
    /* İkonlar (Console'un ikon dili, docs/theme-claude-platform.md §11): ekranda HER boyutta aynı çizgi kalınlığı. Referansta 20 px ikon
       ≈ 1,2 px, 16 px ikon ≈ 1,28 px çizgiyle çizilir (küçük boyutta kalınlaşan değişken ağırlık); tek değer 1,25 px. */
    --cd-icon-stroke: 1.25px;
    --cd-icon: 20px;              /* standart ikon (kenar menü, düğme, araç çubuğu, satır) */
    --cd-icon-sm: 16px;           /* küçük ikon (açılır oklar, alan içi ikonlar, menü öğeleri) */
    --cd-modal-w: 520px;          /* popup genişliği (Console Dialog md, varsayılan; kullanıcı isteği 2026-10-11, önce 500) */
    --cd-modal-pad: 24px;         /* popup iç boşluğu (Console Dialog p-xl; kullanıcı isteği 2026-10-11, önce 20) */
    --cd-dropdown-gap: 6px;       /* açılır liste ↔ tetikleyici (Console Menu / Combobox; 2026-10-11) */
    --cd-modal-gap-head: 12px;    /* başlık bloğu → içerik (Console mb-pad-md) */
    --cd-modal-gap-foot: 16px;    /* içerik → düğme satırı (Console mt-pad-lg) */
    --cd-tree-gap: 20px;          /* ürün ağacı kurucusu: sütun arası ve kart iç boşluğu (popup iç boşluğundan bağımsız) */
    --cd-dropdown-max-h: min(60vh, 320px); /* açılır menülerin en fazla yüksekliği (referansın Menu / Combobox'u 320) */
    /* Giriş ekranları (platform.claude.com/login'den ölçüldü, docs/theme-claude-platform.md §13): üst şerit 72 px (≥ 1104 px'te 84),
       yan kenar boşluğu ekran genişliğiyle akışkan (375 px'te 33,6, 800'de 45,8, 1440'ta 64; en fazla 64). */
    --cd-auth-bar-h: 72px;
    --cd-auth-gutter: clamp(24px, calc(22.86px + 2.857vw), 64px);
    /* Üst şeridin içeriği en fazla 1440 geniş ve ortalı (referansta max-w 90rem): geniş ekranda kenar boşluğu (ekran − 1440) / 2 olur
       (1714 px'te 137). Ürün adı ve sağdaki bağlantılar bu boşlukla hizalanır. */
    --cd-auth-bar-inset: max(var(--cd-auth-gutter), calc((100vw - 1440px) / 2));
    --cd-auth-card-w: 448px;
    --cd-auth-strip-h: 196px;     /* alttaki şerit (referansta logo şeridi, py 48): noktalı desen bunun üstünde biter */
    /* Hareket (Console'un değerleri, tarayıcıda okundu): hızlı 60 ms (hover, kenar menünün solması), snap 120 ms (açılır pencere, ipucu),
       base 200 ms (grup aç/kapa yüksekliği), sheet 300 ms (kenar menü genişliği); eğriler ease-out (çeyrek), snap, in-out (ok dönüşü 150 ms). */
    --cd-dur-fast: 60ms;
    --cd-dur-snap: 0.12s;
    --cd-dur-chevron: 0.15s;
    --cd-dur-base: 0.2s;
    --cd-dur-sheet: 0.3s;
    --cd-dur-slow: 0.45s;
    --cd-ease-out: cubic-bezier(.165, .84, .44, 1);
    --cd-ease-snap: cubic-bezier(.32, .72, 0, 1);
    --cd-ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --cd-ease-in: cubic-bezier(.4, 0, 1, 1);
    --cd-ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);
    --cd-kbd-fg: #6D6B67;                        /* kısayol tuşu (⌘ K; referansın --cds-kbd-*: açıkta #6D6B67 + %18 çizgi) */
    --cd-kbd-ring: rgba(109, 107, 103, 0.18);
    --cd-bg-pressed: #CDE2FB; /* basılı (aç / kapa) düğmenin zemini (referansın pressed hâli) */
    --cd-shadow-tooltip: 0 1px 2px rgba(11, 11, 11, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
    /* İpucu (Console --cds-tooltip-*: açık modda gri-900 zemin + gri-0 yazı, halkasız; koyuda yüzey-3 + birincil yazı + %10 halka). */
    --cd-tooltip-bg: var(--cd-gray-900);
    --cd-tooltip-fg: var(--cd-gray-0);
    --cd-tooltip-ring: transparent;
    --cd-shadow-sheet: 0 4px 8px rgba(11, 11, 11, 0.08), 0 12px 28px -2px rgba(0, 0, 0, 0.12); /* < 768 px'te açık kenar menü */
}

:root.dark {
    color-scheme: dark;

    --cd-page-bg: var(--cd-gray-850);
    --cd-surface-0: var(--cd-gray-900);
    --cd-surface-panel: var(--cd-gray-830);
    --cd-surface-popover: var(--cd-gray-800);
    --cl-chart-1: #3987E5;
    --cl-chart-2: #D95926;
    --cl-chart-3: #199E70;
    --cl-chart-4: #C98500;
    --cl-chart-5: #D55181;
    --cl-chart-6: #008300;
    --cl-chart-7: #9085E9;
    --cl-chart-8: #E66767;
    --cl-chart-axis: #383835;
    /* %20 daha koyu (önce 0.05 / %20 / %20). */
    --cl-band-section: transparent;
    --cl-band-total: var(--cl-band-section); /* başlık grisi (önce yeşil) */
    --cl-band-result: transparent;
    --cd-text-primary: var(--cd-gray-50);
    --cd-text-secondary: var(--cd-gray-200);
    --cd-text-muted: var(--cd-gray-400);
    --cd-text-disabled: rgba(255, 255, 255, 0.35);
    --cd-text-danger: #EC7E7E;
    --cd-text-success: #0CA30C;
    --cd-border: rgba(255, 255, 255, 0.10);
    --cd-border-subtle: rgba(255, 255, 255, 0.05);
    --cd-border-strong: rgba(255, 255, 255, 0.20);
    --cd-border-stronger: rgba(255, 255, 255, 0.40);
    --cd-border-accent: #0D366B;
    --cd-bg-accent-subtle: #03162C;
    --cd-bg-accent: #032042; /* referansın --cds-bg-accent (koyu: accent-800) */
    --cd-border-danger: #641919;
    --cd-border-success: #074506;
    --cd-border-warning: #512E00;
    --cd-fill-primary: var(--cd-gray-0);
    --cd-fill-primary-hover: var(--cd-gray-100);
    --cd-on-primary: var(--cd-gray-900);
    --cd-fill-secondary: rgba(255, 255, 255, 0.10);
    --cd-fill-secondary-hover: rgba(255, 255, 255, 0.14);
    --cd-fill-ghost-hover: rgba(255, 255, 255, 0.075);
    --cd-fill-ghost-selected: rgba(255, 255, 255, 0.15);
    --cd-fill-menu-hover: rgba(255, 255, 255, 0.075);
    --cd-fill-neutral: rgba(255, 255, 255, 0.05); /* referansın bg-neutral'ı: gri rozet zemini (etiket rozeti) */
    --cd-kbd-fg: #A5A49A;
    --cd-kbd-ring: rgba(165, 164, 154, 0.22);
    --cd-bg-pressed: #032042;
    --cd-shadow-tooltip: 0 1px 2px rgba(11, 11, 11, 0.06), 0 2px 8px rgba(0, 0, 0, 0.24);
    --cd-tooltip-bg: var(--cd-gray-800);
    --cd-tooltip-fg: var(--cd-text-primary);
    --cd-tooltip-ring: var(--cd-border);
    --cd-shadow-sheet: 0 4px 8px rgba(11, 11, 11, 0.08), 0 12px 28px -2px rgba(0, 0, 0, 0.24);
    --cd-fill-field: rgba(255, 255, 255, 0.05);
    --cd-fill-field-ring: rgba(255, 255, 255, 0.10);
    --cd-bg-neutral: rgba(255, 255, 255, 0.05);
    --cd-backdrop: rgba(0, 0, 0, 0.50);
    --cd-switch-track: rgba(255, 255, 255, 0.10);
    --cd-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.20);
    --cd-shadow-lg: 0 4px 8px rgba(11, 11, 11, 0.08), 0 12px 28px -2px rgba(0, 0, 0, 0.24);
    --cd-fill-secondary-ring: transparent; /* koyuda çizgi yok, gölge kalır (Console) */
    --cd-focus-glow-danger: rgba(142, 38, 38, 0.6);   /* Console danger-600 %60 (koyu) */

    --cd-tint-red-bg: rgba(73, 12, 12, 0.75);         --cd-tint-red-fg: #EC7E7E;
    --cd-tint-orange-bg: rgba(66, 20, 2, 0.75);       --cd-tint-orange-fg: #EC835A;
    --cd-tint-yellow-bg: rgba(58, 28, 0, 0.75);       --cd-tint-yellow-fg: #DB9300;
    --cd-tint-green-bg: rgba(16, 44, 13, 0.75);       --cd-tint-green-fg: #55BF50;
    --cd-tint-aqua-bg: rgba(0, 45, 36, 0.75);         --cd-tint-aqua-fg: #3BBD8C;
    --cd-tint-blue-bg: rgba(0, 36, 81, 0.75);         --cd-tint-blue-fg: #6DA7EC;
    --cd-tint-violet-bg: rgba(32, 22, 90, 0.75);      --cd-tint-violet-fg: #A096EB;
    --cd-tint-magenta-bg: rgba(69, 13, 34, 0.75);     --cd-tint-magenta-fg: #E87BA4;

    --cd-seg-track: rgba(255, 255, 255, 0.05);
    --cd-seg-thumb: rgba(255, 255, 255, 0.10);
    --cd-seg-thumb-ring: rgba(255, 255, 255, 0.10); /* referansın başparmağı: içte 1 px --cds-border (2026-10-13; önce saydamdı) */
}

/* ---------------------------------------------------------------------------
 * ALAN VE ODAK GÖLGELERİ — TEK KAYNAK (Console'dan ölçüldü; kullanıcı kararı 2026-10-10). Portaldaki her giriş alanı ve odaklanabilir denetim
 * bu değişkenleri kullanır; yeni bir yere sabit gölge yazılmaz.
 *   --cd-field-ring          alanın normal 1 px iç halkası (%10)
 *   --cd-field-ring-hover    üzerine gelince (border-strong: koyuda %20 beyaz, açıkta %20 siyah)
 *   --cd-field-ring-invalid  hatalı alan (kırmızı)
 *   --cd-focus-ring          odak: içte 1 px zemin rengi, dışta 1 px vurgu (--cd-fill-accent) + 6 px parıltı (Console --cds-focus-shadow)
 *   --cd-focus-ring-danger   hatalı alanın odağı (kırmızı + kırmızı parıltı)
 * İçteki çizgi alanın durduğu yüzeyin rengidir (`--cd-focus-inset`): sayfada sayfa zemini, kenar menüde menü zemini, popup / açılır menü
 * içinde onların zemini (Console da bu yüzeylerde --page-bg'yi yeniden tanımlar). Bileşik değişkenler bu yüzden yüzey kapsamlarında da tanımlanır.
 * ------------------------------------------------------------------------ */
:root {
    --cd-focus-inset: var(--cd-page-bg);
}

.cd-sidebar,
.cd-topbar {
    --cd-focus-inset: var(--cd-surface-0);
}

:is(.fi-modal-window, .fi-dropdown-panel, .cd-menu, .cd-palette, .choices__list--dropdown) {
    --cd-focus-inset: var(--cd-surface-popover);
}

:root,
.cd-sidebar,
.cd-topbar,
:is(.fi-modal-window, .fi-dropdown-panel, .cd-menu, .cd-palette, .choices__list--dropdown) {
    --cd-field-ring: inset 0 0 0 1px var(--cd-fill-field-ring);
    --cd-field-ring-hover: inset 0 0 0 1px var(--cd-border-strong);
    --cd-field-ring-invalid: inset 0 0 0 1px var(--cd-fill-danger);
    --cd-focus-ring: inset 0 0 0 1px var(--cd-focus-inset), 0 0 0 1px var(--cd-fill-accent), 0 0 6px 1px var(--cd-focus-glow);
    --cd-focus-ring-danger: inset 0 0 0 1px var(--cd-focus-inset), 0 0 0 1px var(--cd-fill-danger), 0 0 6px 1px var(--cd-focus-glow-danger);
}

/* ============================================================================
 * 4. TEMEL
 * ========================================================================== */
html {
    background-color: var(--cd-page-bg);
}

/* Tek yazı tipi: Filament / Tailwind'in eş aralıklı (mono) yazıları da Inter; kodlarda rakamlar eşit genişlikte,
   sıfır çizgili (Inter'in "tnum" ve "zero" özellikleri). */
:is(.fi-body, .fi-simple-layout) :is(.font-mono, code, kbd, pre, samp) {
    font-family: var(--cd-font-sans) !important;
    font-variant-numeric: tabular-nums slashed-zero;
}

/* İkon standardı (tüm portal; kullanıcı kararı 2026-10-10, referans platform.claude.com Console): tüm ikonlar tek aile (Tabler, MIT) çizgi
   ikonudur — dolu ikon yok; uçlar ve köşeler yuvarlak; 24 ızgarada çizim (canlı alan ≈ %80, referansta 0,81 em); çizgi kalınlığı ikon
   boyutundan bağımsız --cd-icon-stroke. Filament'in Heroicons'ı config/blade-heroicons.php ile Tabler'a çevrilir; kendi ikonlarımız resources/svg. */
svg[stroke="currentColor"] :is(path, circle, rect, line, polyline, polygon, ellipse) {
    vector-effect: non-scaling-stroke;
    stroke-width: var(--cd-icon-stroke);
}

.fi-body {
    font-family: var(--cd-font-sans);
    font-optical-sizing: auto; /* başlıklar Inter Display, küçük yazılar Inter (değişken yazı tipinin opsz ekseni) */
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    background: var(--cd-page-bg) !important;
    color: var(--cd-text-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ODAK HALKASI YALNIZCA KLAVYEDE (kullanıcı bildirimi 2026-10-12: telefonda filtre seçildikten sonra hapın çevresinde halka kalıyordu).
   Bir menü / liste / popup kapanınca odak programla tetikleyen düğmeye geri verilir (klavye kullanıcısı için doğru); Safari ve Chrome bu
   odağı ":focus-visible" sayabildiği için dokunma / fare ile kullanırken de halka çıkıyordu. Kural: düğme, bağlantı, hap, seçenek,
   onay kutusu, segment gibi denetimlerin halkası YALNIZCA klavye modunda (html:not(.cl-pointer); son etkileşim fare / dokunmaysa
   html.cl-pointer, cover-lab-tooltips.js her sayfada yazar); tarayıcının kendi odak çizgisi ve Filament'in hazır halkaları dokunma /
   fare modunda yok. Yazı alanlarının odak halkası (:focus / :focus-within, referanstaki gibi dokununca da görünür) bu kuralın dışındadır.
   YENİ odaklanabilir denetimin halkası da ":focus-visible" ile ve başında "html:not(.cl-pointer)" yazılır. Test: ThemeStandardTest. */
html.cl-pointer :is(a, button, summary, [role="button"], [role="combobox"], [role="option"], [role="menuitem"], [role="listbox"], [tabindex]):focus {
    outline: none !important;
}

html.cl-pointer :is(a, button, summary, [role="button"], [role="combobox"], [role="menuitem"], [tabindex]):focus-visible {
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Klavye odağı: sitenin odak halkası (1 px vurgu mavisi + hafif ışıma). */
html:not(.cl-pointer) .cd-page a:focus-visible,
html:not(.cl-pointer) .cd-page button:focus-visible {
    outline: 0;
    box-shadow: var(--cd-focus-ring);
}

/* Metin içi bağlantı (yalnızca içerik sütununda; menü ve footer bağlantıları kendi kurallarıyla). */
.cd-main a:not([class]) {
    color: var(--cd-text-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

.cd-page {
    min-height: 100vh;
}

/* ============================================================================
 * 5. ORTAK KÜÇÜK BİLEŞENLER: hayalet düğme, ikon düğme, açılır menü (§6.1, §6.6)
 * ========================================================================== */
.cd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* referans: ikon ↔ yazı her boyda 4 */
    height: var(--cd-control-h);
    padding: 0 12px;
    border: 0;
    border-radius: var(--cd-radius);
    background: transparent;
    color: var(--cd-text-primary);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-btn[aria-expanded="true"] {
    background: var(--cd-fill-ghost-hover);
}

/* Hover yalnızca fareli cihazlarda: iPhone dokunduktan sonra :hover'ı bırakmıyor, ☰ menü kapanınca da zemin kalıyordu (2026-10-18). */
@media (hover: hover) {
    .cd-btn:hover {
        background: var(--cd-fill-ghost-hover);
    }
}

.cd-btn--icon {
    width: var(--cd-control-h);
    padding: 0;
}

.cd-btn--muted {
    color: var(--cd-text-muted);
}

.cd-btn svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.cd-btn--icon svg {
    width: 20px;
    height: 20px;
}

/* Zeminli ikincil düğme (portalın ikincil düğmesi: %10 dolgu + ikincil çizgi; Tümünü aç / kapat, Sıfırla, Tabandan hesapla gibi): ikon
   düğmesiyle birlikte .cd-btn .cd-btn--icon .cd-btn--secondary (32 × 32, ikon 20, çizgi 1,25); küçüğü .cd-btn--xs ile 24 × 24, ikon 16. Yan
   panelin alt çubuğundaki PDF / KolayBi düğmeleri küçük olanı, seçicilerin boyunda. */
/* Dolu asıl düğme (Filament'in asıl düğmesiyle aynı ton; 2026-11-05: bekleyen cariler panelinin "Müşteri olarak ekle"si zeminsiz kalıyordu). */
.cd-page .cd-btn.cd-btn--primary {
    background: var(--cd-fill-primary);
    color: var(--cd-on-primary);
    font-weight: 500;
}

@media (hover: hover) {
    .cd-page .cd-btn.cd-btn--primary:hover {
        background: var(--cd-fill-primary-hover);
    }
}

/* Dolu tehlikeli düğme (Filament'in kırmızı düğmesiyle aynı ton; kullanıcı kararı 2026-11-14: satırdaki "Sil" normal kırmızı zeminli silme düğmesi): kırmızı zemin, beyaz yazı. */
.cd-page .cd-btn.cd-btn--danger {
    background: var(--cd-fill-danger);
    color: #FFFFFF;
    font-weight: 500;
}

@media (hover: hover) {
    .cd-page .cd-btn.cd-btn--danger:hover {
        background: var(--cd-fill-danger-hover);
    }
}

.cd-page .cd-btn.cd-btn--secondary {
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
    color: var(--cd-text-primary);
}

@media (hover: hover) {
    .cd-page .cd-btn.cd-btn--secondary:hover {
        background: var(--cd-fill-secondary-hover);
    }
}

/* Küçük ikon düğmesi (referansın Button size="xs" icon-only'si; tarih alanındaki takvim düğmesi, 2026-10-13 ölçüldü): 24 × 24, köşe 6
   (boyun dörtte biri), ikon 16; renk, hover ve açık menü zemini standart ikon düğmesiyle AYNI (yukarıdaki .cd-btn kuralları). */
.cd-btn--xs.cd-btn--icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.cd-btn--xs.cd-btn--icon svg {
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
}

/* Kapalı düğme (referansın disabled Button'u): %40 soluk, renkleri değişmez; zeminsiz ikon düğmesi üzerine gelince zemin almaz. */
.cd-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.cd-btn--icon:not(.cd-btn--secondary):disabled {
    background: transparent;
}

/* Basınca (referansın Button'u): %97,5'e küçülür, yaylı döner. */
:is(.cd-btn, .fi-btn, .fi-icon-btn):not(:disabled):active {
    scale: 0.975;
}

/* Basılı (aç / kapa) düğme (referansın pressed hâli): vurgu zemini + vurgu yazı. */
.cd-btn[aria-pressed="true"] {
    background: var(--cd-bg-pressed);
    color: var(--cd-text-accent);
}

.cd-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--cd-radius);
    background: transparent;
    color: var(--cd-text-primary);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    cursor: var(--cd-cursor-interactive);
}

.cd-menu-item:hover,
html:not(.cl-pointer) .cd-menu-item:focus-visible {
    background: var(--cd-fill-menu-hover);
    box-shadow: none !important;
}

/* Menü öğesinin ikonu: 20 px, yazıyla aynı (birincil) renk (Console'un hesap menüsü). */
.cd-menu-item svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: currentColor;
}

/* ============================================================================
 * 6. ÜST ÇUBUK VE KENAR MENÜ — referansın (platform.claude.com) yeni düzeni (kullanıcı kararı 2026-10-18; ölçüldü):
 *    Üst çubuk 48 px, ekrana yapışık, zemin surface-0, altında 1 px %10 çizgi, iç boşluk 0 12, gruplar arası 16; solda ürün adı 20 / 20,
 *    ortada en fazla 448 geniş arama, sağda 28 × 28 ikon düğmeleri (köşe 7, aralar 12; telefonda 8).
 *    Kenar menü üst çubuğun altında, 256 px, zemin surface-0, sağda 1 px çizgi; daraltma ve ikon şeridi YOK (yeni menüde yok).
 *    < 768 px (referansın md sınırı): arama kutusu ve kenar menü gizli; üst çubukta büyüteç, zil, ☰; ☰ menüyü üst çubuğun altında tam
 *    ekran açar (anında, efektsiz; ölçüldü), düğme ×'e döner ve hayalet-seçili zemin alır.
 *    Öğe 36 px, köşe 8, iç boşluk 0 8, ikon 20 soluk + 12, 14 / 20 ikincil; seçili %15 zemin + birincil yazı; hover %7,5.
 * ========================================================================== */
.cd-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px; /* referans: öğeler arası 12 */
    box-sizing: border-box;
    height: var(--cd-topbar-h);
    padding: 0 12px;
    border-bottom: 1px solid var(--cd-border);
    background: var(--cd-surface-chrome);
}

/* Referansın üst çubuğu: logo ve sağdaki düğmeler kendi boyunda, arama kalan yerin ortasında (en fazla 448; 768'de ≈ 283). */
.cd-topbar-start,
.cd-topbar-end {
    display: flex;
    flex: none;
    align-items: center;
    min-width: 0;
}

.cd-topbar-end {
    justify-content: flex-end;
    gap: 12px;
}

/* Ürün adı (logo): referansın "Claude Console"u gibi 20 / 20 500 (portalın standart logosu: CL işareti yazının büyük harf yüksekliğinde). */
.cd-topbar-brand {
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 20px;
}

.cd-topbar-search {
    flex: 0 1 448px;
    min-width: 0;
    margin-inline: auto;
}

/* Üst çubuğun ikon düğmeleri: referansın sm ikon düğmesi 28 × 28, köşe 7, ikon 20 (renk ve hover standart ikon düğmesinden). */
.cd-topbar-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--cd-radius-sm);
    transition: none; /* referansın üst çubuk düğmeleri: zemin anında değişir (☰ ↔ × dahil; ölçüldü) */
}

.cd-topbar-btn[aria-expanded="true"] {
    background: var(--cd-fill-ghost-hover); /* referans: açık ☰ (×) hover zemininde */
}

/* KolayBi'yi senkronla (zilin solunda; kullanıcı kararı 2026-10-19): senkron sürerken ikon döner, ipucu "senkronlanıyor" der (fare açık
   kalır; ikinci basışı betik yok sayar), tamamlanamadıysa ikon tehlike kırmızısı (nedeni ipucunda). */
.cl-kolaybi-sync[aria-busy="true"] svg {
    animation: cl-kolaybi-spin 1s linear infinite;
}

.cl-kolaybi-sync[data-state="failed"] {
    color: var(--cd-text-danger);
}

/* Okların yönünde döner: Tabler refresh ikonunun okları saat yönünün tersini gösterir. */
@keyframes cl-kolaybi-spin {
    to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cl-kolaybi-sync[aria-busy="true"] svg { animation-duration: 3s; }
}

.cd-topbar-mobile,
.cd-topbar-menu-close,
.cd-topbar-menu[aria-expanded="true"] .cd-topbar-menu-open {
    display: none;
}

.cd-topbar-menu[aria-expanded="true"] .cd-topbar-menu-close {
    display: block;
}

.cd-sidebar {
    position: fixed;
    top: var(--cd-topbar-h);
    bottom: 0;
    left: 0;
    z-index: 20;
    width: var(--cd-sidebar-w);
    overflow: hidden;
    border-right: 1px solid var(--cd-border);
    background: var(--cd-surface-chrome);
}

.cd-sb-full {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cd-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    border-radius: 4px;
}

/* Ürün adı yazısı (Console'daki "Claude Console" gibi; portalda tek yazı tipi Inter): 500, birincil renk. */
.cd-wordmark {
    display: inline-block; /* .cd-logo'nun inline-flex'i "Admin" / "B2B" çevresindeki boşlukları yutar */
    font-family: var(--cd-font-sans);
    font-weight: 500;
    color: var(--cd-text-primary);
    white-space: nowrap;
    text-decoration: none;
}

/* İmleç: §15 "FARE İMLECİ" (bağlantılar el, düğmeler --cd-cursor-interactive). */
.cd-sidebar button,
.cd-topbar button {
    cursor: var(--cd-cursor-interactive);
}

@media (max-width: 767px) {
    /* Arama kutusu gizli olduğu için düğmeleri sağa iten bir şey yok: düğmeler logonun yanına yapışıyordu.
       Logo solda, düğmeler sağ kenarda. */
    .cd-topbar-end {
        gap: 8px;
        margin-left: auto;
    }

    .cd-topbar-search {
        display: none;
    }

    .cd-topbar-mobile {
        display: inline-flex;
    }

    .cd-sidebar {
        display: none;
        right: 0;
        width: auto;
        border-right: 0;
    }

    html.cd-mnav-open .cd-sidebar {
        display: block;
    }
}

/* Arama (üst çubuğun ortasında): 32 yüksek (Console: zemin %5, halka, köşe 8, iç boşluk 0 5 0 8; büyüteç 16 + 12, sağda ⌘ K tuşları). */
.cd-search-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    height: var(--cd-control-h);
    padding: 0 5px 0 8px;
    border: 0;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
    color: var(--cd-text-muted);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    cursor: var(--cd-cursor-interactive);
    transition: box-shadow var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-search-btn-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.cd-search-btn-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-kbd-group {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
}

.cd-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 2px;
    border: 1px solid var(--cd-kbd-ring);
    border-radius: 4px;
    font-family: var(--cd-font-sans);
    font-size: 12px;
    line-height: 12px;
    color: var(--cd-kbd-fg);
}

.cd-sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px; /* referans: öğeler kenarlardan 8, ilki üst çubuğun 8 altında */
}

.cd-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* referans: satırlar arası boşluk yok, adım 36 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Yeni kenar menü (kullanıcı kararı 2026-10-18; referansın yeni menüsü ölçüldü): kök ve bölüm görünümleri. Aynı anda biri görünür;
   görünüm değişince içerik 200 ms (--cd-dur-base, --cd-ease-out) saydamdan belirerek kayar: ileri 12 px sağdan, geri 12 px soldan
   (referansın transition-[opacity,translate]'i, getAnimations ile ölçüldü; masaüstü ve telefon aynı). */
.cd-nav-view[hidden] {
    display: none;
}

.cd-nav-view.is-entering-forward {
    animation: cd-nav-in-forward var(--cd-dur-base) var(--cd-ease-out) backwards;
}

.cd-nav-view.is-entering-back {
    animation: cd-nav-in-back var(--cd-dur-base) var(--cd-ease-out) backwards;
}

@keyframes cd-nav-in-forward {
    from { opacity: 0; translate: 12px; }
}

@keyframes cd-nav-in-back {
    from { opacity: 0; translate: -12px; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-nav-view.is-entering-forward,
    .cd-nav-view.is-entering-back {
        animation: none;
    }
}

/* Gri ana başlık (referansın "Build & configure"ı): 12 / 17 soluk, iç boşluk 0 8; üstünde 16 (ilk öğeden sonra), altında 8. */
.cd-nav-heading h2 {
    margin: 16px 0 8px;
    padding: 0 8px;
    color: var(--cd-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
}

/* Kökteki bölüm satırı: ikon + ad + (bölümün açık sayfası soluk, sağa yaslı) + 16 px soluk ›. Ad 400 (referans yeniden ölçüldü 2026-10-25:
   bölüm satırları, açık sayfanın bölümü ve seçili sayfa dahil hepsi 400; ayrışma zemin ve renkle). Önce 500 / seçiliyken 580'di. */
.cd-nav-section .cd-nav-label {
    flex: none;
    font-weight: 400;
}

.cd-nav-section-current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--cd-text-muted);
    text-align: right;
    text-overflow: ellipsis;
}

/* Açık sayfanın bölümü kökte seçili sayfa gibi: %15 zemin + birincil yazı (referansın "Messages  Logs" satırı). */
.cd-nav-section.is-active,
.cd-nav-section.is-active:hover {
    background: var(--cd-fill-ghost-selected);
    color: var(--cd-text-primary);
}

.cd-nav-section.is-active .cd-nav-label {
    font-weight: 400;
}

/* Bölüm görünümünün üst satırı "← Bölüm" (referansın "Back to all sections"ı): 32 yüksek, köşe 8, ok 20 solda, ad düğmenin ortasında 14 / 20 580 birincil;
   altındaki listeye 12. */
.cd-nav-back {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 32px;
    margin-bottom: 12px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--cd-radius);
    background: transparent;
    color: var(--cd-text-primary);
    font: inherit;
    text-align: left;
    cursor: var(--cd-cursor-interactive);
    transition: background var(--cd-dur-fast, .06s);
}

@media (hover: hover) {
    .cd-nav-back:hover {
        background: var(--cd-fill-ghost-hover);
    }
}

.cd-nav-back .cd-nav-icon {
    color: var(--cd-text-primary);
}

.cd-nav-back-title {
    flex: 1;
    min-width: 0;
    margin: 0 24px 0 0; /* ad düğmenin ortasında: okun genişliği (20 + 4) kadar sağdan da boşluk (referans) */
    text-align: center;
    overflow: hidden;
    font-size: 14px;
    font-weight: 580;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zemin her durumda (üzerine gelince, seçili, açık bölüm) kenarın içinde: başka kurallardaki `background` kısaltması kırpmayı sıfırlamasın. */
.cd-nav-link:not(.cd-account-btn) {
    border-block: 1px solid transparent;
    background-clip: padding-box !important;
}

html:not(.cl-pointer) .cd-nav-back:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cd-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: var(--cd-nav-item-h);
    padding: 0 8px;
    /* Referansın kenar menüsü (ölçüldü 2026-11-05; kullanıcı bildirimi: vurgular birbirine yapışıyordu): satır 36 ama üstte ve altta 1 px
       saydam kenar, zemin kenarın içine boyanır (bg-clip-padding): boyalı alan 34, seçili satırla üzerine gelinen komşu arasında 2 px boşluk. */
    box-sizing: border-box;
    border: 0;
    border-radius: var(--cd-radius);
    background: transparent;
    color: var(--cd-text-secondary);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.cd-nav-link[aria-expanded="true"][aria-haspopup] {
    background: var(--cd-fill-ghost-hover);
}

/* Menü satırlarının hover'ı yalnızca fareli cihazlarda: telefonda dokunulan yerde kalan satır gri görünüyordu (2026-10-18). */
@media (hover: hover) {
    .cd-nav-link:hover {
        background: var(--cd-fill-ghost-hover);
    }
}

.cd-nav-link.is-current,
.cd-nav-link.is-current:hover {
    background: var(--cd-fill-ghost-selected);
    color: var(--cd-text-primary);
}

.cd-nav-icon,
.cd-nav-link > svg.cd-nav-icon {
    display: inline-flex;
    flex: none;
    width: 20px;
    height: 20px;
    color: inherit; /* referans: ikon yazının renginde (normalde ikincil, seçiliyken birincil) */
}

.cd-nav-icon svg {
    width: 20px;
    height: 20px;
}

.cd-nav-icon[hidden] {
    display: none;
}

.cd-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Üst düzey sayfa (Genel Bakış) da 400, açıkken de (referans 2026-10-25; önce 500 / 580). */
.cd-nav-top .cd-nav-label {
    font-weight: 400;
}

.cd-nav-top.is-current .cd-nav-label {
    font-weight: 400;
}

/* Bölüm satırının oku: 16 px soluk ›. */
.cd-nav-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cd-text-muted);
}

/* Bölüm görünümündeki sayfalar ikonsuz; yazı satırın iç boşluğundan başlar (referanstaki gibi). */

/* Alt blok: kullanıcı satırı; üstünde 1 px çizgi. */
.cd-sb-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: none;
    padding: 8px;
    border-top: 1px solid var(--cd-border);
}

/* Kullanıcı satırı (49 px, iç boşluk 6 8): kare avatar (32, köşe 8, alan zemini + halka, bina ikonu) + ad (14 / 20 500 birincil) ve altında
   firma / rol (12 / 17 ikincil) + ⌄ (16, birincil). */
.cd-account-btn {
    height: 49px;
    margin: 0; /* referansın yeni menüsü: satır alt bloğun 8 iç boşluğunda (ölçüldü 2026-10-18) */
    padding: 6px 8px;
    color: var(--cd-text-primary);
}

.cd-org-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
    color: var(--cd-text-secondary);
}

.cd-org-avatar svg {
    width: 20px;
    height: 20px;
}

.cd-account-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.cd-account-name,
.cd-account-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-account-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cd-account-sub {
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cd-account-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cd-text-primary);
}

/* ---------------------------------------------------------------------------
 * Açılır pencereler (Console'un Menu / Popover'ı): yüzen yüzey (surface-3), köşe 12, iç boşluk 4, halka + gölge; açılış / kapanış
 * EFEKTSİZ, anında (Console'da ölçüldü 2026-10-11: menü ve liste opaklık / ölçek değişmeden belirir; önce 120 ms solma). Konumu JS verir (tetikleyicinin sağında 6 px; hesap menüsü altları hizalı, grup listesi üstleri hizalı).
 *   - Başlık (grup adı / kullanıcının adı) 13 / 17 500 soluk, iç boşluk 4 10.
 *   - Öğe 32 px, iç boşluk 6 10, ikon 20 birincil + 8, 14 / 20; hover %7,5; ayraç 1 px, yanlardan 10, üst/alt 4.
 *   - Grup listesi 192 px; açık sayfa 500 + %15 zemin. Hesap menüsü 288 px.
 * ------------------------------------------------------------------------- */
.cd-popover {
    position: fixed;
    z-index: 60;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 4px;
    border-radius: var(--cd-radius-popover);
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-popover);
    color: var(--cd-text-primary);
    font-size: 14px;
    line-height: 20px;
}

.cd-popover[hidden] {
    display: none;
}

.cd-popover-label {
    padding: 4px 10px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-muted);
}

.cd-popover-label strong {
    font-weight: 500;
}

.cd-popover-sep {
    height: 1px;
    margin: 4px 10px;
    background: var(--cd-border);
}

.cd-account-menu {
    width: 240px; /* referans: kullanıcı satırının 6 üstünde, satır genişliğinde (JS satırın genişliğini yazar) */
}

.cd-account-menu form {
    margin: 0;
}

/* Hesap menüsünün kimlik satırı (kullanıcı kararı 2026-10-18; referansın seçili kuruluş satırı, ölçüldü): 50 yüksek, iç boşluk 6 10 7, köşe 8;
   rolün ikonu 32 px (%5 zemin, köşe 8, ikon ikincil), 8 aralıkla ad 14 / 20 birincil ve altında rol 13 / 17 soluk; sağda 20 px tik panelin
   vurgu renginde, biraz kalın (1,6), adın satırında (üstten hizalı).
   Tıklanmaz (kimlik bilgisi). */
.cd-account-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 6px 10px 7px;
    border-radius: var(--cd-radius);
}

.cd-account-identity .cd-org-avatar {
    background: var(--cd-bg-neutral);
    box-shadow: none;
}

.cd-account-identity-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.cd-account-identity-text > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-account-identity .cd-account-title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-primary);
}

.cd-account-identity-sub {
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cd-account-identity-check {
    flex: none;
    align-self: flex-start;
    width: 20px;
    height: 20px; /* adın satırıyla aynı hizada (referans: h-[1lh] self-start) */
    margin-right: -4px;
    color: var(--cd-fill-accent); /* referans --cds-fill-accent: panelin vurgu rengi (kullanıcı bildirimi 2026-10-18; önce birincil sanılmıştı) */
    --cd-icon-stroke: 1.6px; /* referansta ikon yazı tipinde 567 ağırlık (normal ikonlar 433) */
}

/* İpucu (şeritteki ikonlar): sağında 4 px, dikey ortalı; referansın ipucu (renkler --cd-tooltip-*: açıkta koyu zemin + açık yazı, koyuda
   yüzey-3 + halka), 13 / 18, iç boşluk 3 8, köşe 6, en az 24 yüksek. Filament'in ipuçları (tippy) aynı görünümde, bkz. aşağı. */
.cd-tooltip {
    position: fixed;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 24px;
    max-width: 240px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--cd-tooltip-bg);
    box-shadow: inset 0 0 0 1px var(--cd-tooltip-ring), var(--cd-shadow-tooltip);
    color: var(--cd-tooltip-fg);
    font-size: 13px;
    line-height: 18px;
    pointer-events: none;
    opacity: 0;
    scale: 0.98;
    transition: opacity var(--cd-dur-snap) var(--cd-ease-snap), scale var(--cd-dur-snap) var(--cd-ease-snap);
}

.cd-tooltip.is-open {
    opacity: 1;
    scale: 1;
}

/* İpucunun alt satırı (data-cd-tip-sub; kullanıcı kararı 2026-10-31): ana satırın altında 12/17, açıklama soluk (%70), değer kâra etkisine
   göre yeşil / kırmızı (ipucu zemininde okunur tonlar, --cl-tip-up / --cl-tip-down). */
.cd-tooltip.cd-tooltip--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-block: 5px;
}

.cd-tooltip-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px; /* açıklama solda, değer sağda; her bilgi ayrı satır (kullanıcı kararı 2026-11-13) */
    align-self: stretch;
    font-size: 12px;
    line-height: 17px;
    color: color-mix(in srgb, var(--cd-tooltip-fg) 70%, transparent);
}

/* Başlık satırı: renk işareti + parçanın adı. */
.cd-tooltip-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.cd-tooltip-swatch {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.cd-tooltip-sub-value {
    font-weight: 500;
    color: var(--cd-tooltip-fg);
}

.cd-tooltip-sub-value--up { color: var(--cl-tip-up); }
.cd-tooltip-sub-value--down { color: var(--cl-tip-down); }

/* Renkli ipucu (data-cd-tip-html; kullanıcı kararı 2026-10-31: müşteri rozetinin ipucu Müşteri Fiyatları kartının satırlarıyla aynı): satırlar
   alt alta; ipucu zemini iki temada da koyu olduğu için sayfanın renk token'ları burada koyu temanın okunur tonlarına çevrilir (açıklama
   gri, değer beyaz, sarı / kırmızı / yeşil durumlar). */
.cd-tooltip-rich {
    --cd-text-primary: var(--cd-tooltip-fg);
    --cd-text-muted: color-mix(in srgb, var(--cd-tooltip-fg) 60%, transparent);
    --cd-text-success: var(--cl-tip-up);
    --cd-text-danger: var(--cl-tip-down);
    --cd-tint-green-fg: var(--cl-tip-up);
    --cd-tint-red-fg: var(--cl-tip-down);
    --cd-tint-yellow-fg: #DB9300;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cd-tooltip-rich .cd-tooltip-line {
    display: block;
}

/* Grafik parçalarının ipucu (data-cd-tip-instant; kullanıcı kararı 2026-10-31): beklemesiz ve geçişsiz, küçük grafiklerin ipucu gibi. */
.cd-tooltip.is-instant {
    transition: none;
}

/* Bilgi ikonu (referansın InfoTip'i; kullanıcı kararı 2026-10-17; partials/info-tip, alanda ->infoTip('…')): başlığın 4 sağında 24 × 24 düğme,
   iç boşluk 4 ve eksi kenar boşluğu 4 (ikon 16, başlıktan 8 uzakta görünür), köşe 8; ikon soluk → üzerine gelince / klavye odağında / açıkken
   ikincil, 60 ms. Tıklayınca düğmenin 6 altında ortalı kutu: en fazla 240, portalın ipucu renkleri ve gölgesi, 13 / 18, iç boşluk 6 8, köşe 6. */
.fi-fo-field-wrp-label:has(.cl-info-tip) {
    column-gap: 0 !important; /* Filament'in başlık–sonek aralığı (12) yerine 4 */
}

.cl-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle; /* ⓘ STANDARDI (kullanıcı kararı 2026-11-13; referansın Caching kart başlığı canlıda ölçüldü): ikon başlığın satır kutusunun ORTASINDA (referans: flex, items-center) */
    height: 14px; /* başlık satırı yüksekliği (14): ikon (16) başlığı büyütmez; ⓘ'li ve ⓘ'siz alanların kutuları aynı hizada */
    margin-left: 8px; /* düğmenin eksi kenar boşluğuyla (−4) düğme başlıktan 4, ikon 8 uzakta (referans: gap 8, düğme 24 / −4 / iç 4, ikon 16) */
}

.cl-info-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -4px;
    padding: 4px;
    border-radius: 8px;
    color: var(--cd-text-muted);
    transition: color 60ms;
}

.cl-info-tip-btn svg {
    width: 16px;
    height: 16px;
}

.cl-info-tip-btn:hover,
.cl-info-tip-btn[aria-expanded="true"],
html:not(.cl-pointer) .cl-info-tip-btn:focus-visible {
    color: var(--cd-text-secondary);
}

/* Uyarı türü (Field::warnTip; kullanıcı kararı 2026-10-21): turuncu üçgen, portalın uyarı işaretiyle aynı renk; üzerine gelince değişmez. */
.cl-info-tip--warn .cl-info-tip-btn,
.cl-info-tip--warn .cl-info-tip-btn:hover,
.cl-info-tip--warn .cl-info-tip-btn[aria-expanded="true"] {
    color: var(--cd-tint-orange-fg);
}

html:not(.cl-pointer) .cl-info-tip-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cl-info-tip-pop {
    position: absolute;
    top: calc(100% + 4px + 6px); /* altında: düğmenin görünen altı (eksi kenar boşluğu 4) + 6 */
    left: 50%;
    z-index: 50;
    width: max-content;
    max-width: 240px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--cd-tooltip-bg);
    box-shadow: inset 0 0 0 1px var(--cd-tooltip-ring), var(--cd-shadow-tooltip);
    color: var(--cd-tooltip-fg);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    white-space: normal;
    text-align: left;
    translate: -50% 0;
}

/* Kutu hiçbir alanı kapatmaz: yer cover-lab-panel.js'te seçilir (data-side). Sağında: ikonun 6 sağında, dikey
   ortalı; üstünde: düğmenin 6 üstünde, ortalı. */
/* Yeri hesaplanana kadar görünmez (ölçülebilir ama çizilmez): önce varsayılan yerde bir an görünmesin (kullanıcı bildirimi 2026-10-17;
   clPlaceInfoTip data-placed yazar, kapanınca silinir). */
.cl-info-tip-pop:not([data-placed]) {
    visibility: hidden;
}

/* Açılış / kapanış referans gibi (kullanıcı kararı 2026-10-31; referansın InfoTip'i ölçüldü): 120 ms saydamlık + %98'den büyüme, eğri
   cubic-bezier(.32, .72, 0, 1); kapanış Alpine x-transition:leave ile tersi. */
.cl-info-tip-pop {
    transition: opacity 120ms cubic-bezier(.32, .72, 0, 1), scale 120ms cubic-bezier(.32, .72, 0, 1);
}

@starting-style {
    .cl-info-tip-pop {
        opacity: 0;
        scale: .98;
    }
}

.cl-info-tip-pop.cl-info-tip-leave {
    transition: opacity 120ms cubic-bezier(.32, .72, 0, 1), scale 120ms cubic-bezier(.32, .72, 0, 1);
}

.cl-info-tip-pop.cl-info-tip-leave-end {
    opacity: 0;
    scale: .98;
}

@media (prefers-reduced-motion: reduce) {
    .cl-info-tip-pop,
    .cl-info-tip-pop.cl-info-tip-leave {
        transition: none;
    }
}

.cl-info-tip-pop[data-side="right"] {
    top: 50%;
    left: calc(100% + 4px + 6px);
    translate: 0 -50%;
}

.cl-info-tip-pop[data-side="top"] {
    top: auto;
    bottom: calc(100% + 4px + 6px);
}

.cl-info-tip-pop[data-side="left"] {
    top: 50%;
    left: auto;
    right: calc(100% + 4px + 6px);
    translate: 0 -50%;
}

.cl-info-tip-pop[data-side="bottom-end"],
.cl-info-tip-pop[data-side="top-end"] {
    left: auto;
    right: -4px;
    translate: none;
}

.cl-info-tip-pop[data-side="top-end"] {
    top: auto;
    bottom: calc(100% + 4px + 6px);
}

/* İpucundaki kısayol tuşları (Console: "Collapse ⌘ ."): yazıdan 8 px sonra, çerçevesiz, 12 / 18 soluk, tuşlar arası 3,6 px. */
.cd-tooltip {
    gap: 8px;
}

/* Bölünmeyen ipucu (data-cd-tip-nowrap; 2026-10-19, "KolayBi'yi senkronla" / "Son senkron …"): 240 sınırı kalkar, yazı kendiliğinden
   bölünmez; satır yalnızca ipucundaki satır sonunda (\n) alta geçer. */
.cd-tooltip--nowrap {
    max-width: none;
    white-space: pre;
}

.cd-tooltip-keys {
    display: inline-flex;
    gap: 3.6px;
    font-size: 12px;
    line-height: 18px;
    color: var(--cd-text-muted);
}

.cd-tooltip-keys kbd {
    font: inherit;
}

/* DOKUNMATİKTE İPUCU YOK (kullanıcı kararı 2026-11-12; referansın Tooltip'i yalnızca fare imlecinde açılır): Filament'in tippy ipuçları dokunuşta açılıp satır / panel kapanınca ekranda
   takılı kalıyordu; dokunmatik cihazda hiç gösterilmez (cover-lab-tooltips.js kendi ipucunu aynı kuralla açmaz). */
@media (hover: none) {
    [data-tippy-root] { display: none !important; }
}

/* Filament'in ipuçları (tippy: satır ⋮ "Diğer işlemler", ikon düğmeler; kullanıcı bildirimi 2026-10-11): referansın ipucu. Ok yok; düğmeye
   uzaklık 4 (tippy 10 bırakır: kutu 6 px düğmeye kaydırılır); açılış 120 ms (snap); tema (açık / koyu) sayfanın modundan, Filament'in
   data-theme'i kullanılmaz. */
.tippy-box[data-theme] {
    max-width: 240px !important;
    border-radius: 6px;
    background: var(--cd-tooltip-bg) !important;
    box-shadow: inset 0 0 0 1px var(--cd-tooltip-ring), var(--cd-shadow-tooltip) !important;
    color: var(--cd-tooltip-fg) !important;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    transition-duration: var(--cd-dur-snap) !important;
    transition-timing-function: var(--cd-ease-snap) !important;
}

.tippy-box[data-theme] > .tippy-content {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 24px;
    padding: 3px 8px;
    transition-duration: var(--cd-dur-snap) !important;
}

.tippy-box[data-theme] > .tippy-arrow {
    display: none;
}

.tippy-box[data-theme][data-placement^="top"] { translate: 0 6px; }
.tippy-box[data-theme][data-placement^="bottom"] { translate: 0 -6px; }
.tippy-box[data-theme][data-placement^="left"] { translate: 6px 0; }
.tippy-box[data-theme][data-placement^="right"] { translate: -6px 0; }

/* ---------------------------------------------------------------------------
 * Komut paleti (Console'un ⌘K penceresi; ölçümler docs/theme-claude-platform.md §11): ekranın üstünden %15, ortalı, 672 × 500 (dar ekranda
 * kenarlardan 16), yüzen yüzey, köşe 12, halka + büyük gölge; arkada %20 karartma. Açılırken %95 → %100 ölçek (120 ms ease-out).
 *   - Üst: 56 px, altında 1 px çizgi; büyüteç 16 soluk, alan 16 / 24, sağda kapat (32).
 *   - Liste (iç boşluk 8, kayar): grup başlığı 13 / 17 soluk (12 12 8); satır 36 px (8 12, köşe 8, ikon 16 soluk + 16, 14 / 20 ikincil;
 *     "Grup ›" soluk); seçili satır %7,5 zemin + birincil yazı + sağda ⏎. Sonuç yoksa ortada iki satır yazı.
 *   - Alt: 1 px çizgi, 13 / 17 soluk ipuçları (Seç ↑ ↓, Aç ⏎), aralar 28.
 * ------------------------------------------------------------------------- */
.cd-palette-root {
    display: none;
}

html.cd-palette-open .cd-palette-root {
    display: block;
}

.cd-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(11, 11, 11, 0.2);
}

.cd-palette {
    position: fixed;
    top: 15vh;
    left: 50%;
    z-index: 81;
    display: flex;
    flex-direction: column;
    width: calc(100vw - 32px);
    max-width: 672px;
    height: min(500px, 80vh);
    overflow: hidden;
    border-radius: var(--cd-radius-popover);
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-sheet);
    color: var(--cd-text-primary);
    translate: -50% 0;
    scale: 0.95;
    transition: scale var(--cd-dur-snap) var(--cd-ease-out);
}

html.cd-palette-shown .cd-palette {
    scale: none;
}

.cd-palette-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 16px;
    height: 57px; /* referans: 56 + 1 px çizgi */
    padding: 0 8px 0 20px;
    border-bottom: 1px solid var(--cd-border);
}

.cd-palette-search-icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cd-text-muted);
}

.cd-palette-input {
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 16px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--cd-text-primary);
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    box-shadow: none !important;
}

.cd-palette-input::placeholder {
    color: var(--cd-text-muted);
}

.cd-palette-close {
    flex: none;
    color: var(--cd-text-primary);
}

.cd-palette-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
}

.cd-palette-group[hidden] {
    display: none;
}

.cd-palette-group-label {
    padding: 12px 12px 8px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 400;
    color: var(--cd-text-muted);
}

.cd-palette-option {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: var(--cd-radius);
    color: var(--cd-text-secondary);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    cursor: var(--cd-cursor-interactive);
}

.cd-palette-option[hidden] {
    display: none;
}

.cd-palette-option.is-active {
    background: var(--cd-fill-ghost-hover);
    color: var(--cd-text-primary);
}

.cd-palette-option-icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cd-text-muted);
}

.cd-palette-option-label {
    flex: 1;
    min-width: 0;
    padding: 0 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-palette-option-muted {
    color: var(--cd-text-muted);
}

.cd-palette-enter {
    flex: none;
    color: var(--cd-text-muted);
    visibility: hidden;
}

.cd-palette-option.is-active .cd-palette-enter {
    visibility: visible;
}

.cd-palette-empty {
    padding: 16px 12px;
    text-align: center;
}

.cd-palette-list:has([data-cd-page]:not([hidden])) .cd-palette-empty {
    display: none;
}

.cd-palette-empty-title {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cd-palette-empty-note {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cd-palette-foot {
    display: flex;
    flex: none;
    align-items: center;
    gap: 28px;
    padding: 12px 20px;
    border-top: 1px solid var(--cd-border);
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cd-palette-hint {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* ============================================================================
 * 8. İÇERİK ALANI (docs/theme-claude-platform.md §3.3): kenar menünün sağında, zemin surface-1 (sayfa zemini).
 *    Liste sayfası düzeni: iç boşluk üst 24, yan 24, alt 32; en fazla 1600 genişlik. Kenar menü daralınca içerik de kayar.
 *    Sayfa başlığı ölçüleri aşama 2'de Console'a geçer (şimdilik Docs'taki serif başlık).
 * ========================================================================== */
.cd-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: var(--cd-topbar-h);
    padding-left: var(--cd-sidebar-w);
}

@media (max-width: 767px) {
    .cd-shell {
        padding-left: 0;
    }
}

.cd-content {
    flex: 1;
    min-width: 0;
    container-type: inline-size; /* yapışık süzgeç şeridi içerik alanının kenarından kenarına uzanır (cl-report-pillbar) */
}

/* Kap sorgusu yalnızca süzgeç şeridi olan sayfada gerekli; başka sayfada sabit konumlu açılır menüleri (+ Oluştur, ⋮) kaba göre yerleştirip
   düğmeden uzakta açıyordu (kullanıcı bildirimi 2026-11-14). */
.cd-content:not(:has(.cl-report-pillbar, .cl-income-sticky)) {
    container-type: normal;
}

/* SAYFA GENİŞLİĞİ — referansın PageContainer'ı (375–1600 px'te ölçüldü). İçerik alanı = ekran − kenar menü; içinde ortalı kap, genişliği
   sayfanın türüne göre (App\Support\PageWidth → .cd-main--*):
     wide      liste / tablo sayfaları: en fazla 1600, kenarlar her ekranda 24 (API keys, Files, Logs)
     default   analiz ve ayar sayfaları: en fazla 1200; kenar 16 / ≥ 768'de 32, üst 32 / ≥ 768'de 24 (Usage, Cost, Billing, Organization)
     settings  Bildirimler: en fazla 992; boşluklar default gibi (Notifications)
     dashboard karşılama: en fazla 992; ≥ 1280'de üst 48 (Dashboard)
     form      yeni kayıt / düzenleme: kap sınırsız, kenarlar 24; form 768'lik ortalı sütunda (.cl-form-page; Create agent) */
.cd-main {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 24px 24px 32px;
}

.cd-main--wide {
    max-width: calc(1600px + 48px);
}

.cd-main--default,
.cd-main--settings,
.cd-main--dashboard {
    max-width: 1200px;
    padding: 32px 16px;
}

.cd-main--settings {
    max-width: 992px;
}

.cd-main--dashboard {
    max-width: 992px;
    padding-top: 24px; /* referansın Dashboard'u telefonda da 24 */
}

@media (min-width: 768px) {
    .cd-main--default,
    .cd-main--settings,
    .cd-main--dashboard {
        padding: 24px 32px 24px;
    }
}

/* Referansın Dashboard'u geniş ekranda üstten 48 (pt-6 xl:pt-12; yeniden ölçüldü 2026-11-01). */
@media (min-width: 1280px) {
    .cd-main--dashboard {
        padding-top: 48px;
    }
}

/* SAYFANIN ALT BOŞLUĞU — PORTAL GENELİ (kullanıcı kararı 2026-10-31; referansın sayfa kabı ölçüldü: "py-8 md:py-6"): en alta kaydırınca son
   öğenin altında masaüstünde (≥ 768) 24, telefonda 32 boşluk. Filament'in bölümünün alt boşluğu (32) kalkar, yalnızca kabın alt boşluğu kalır;
   önce 32 + 32 = 64'tü. Alt çubuklu tam sayfa formlarda 0 (alt çubuk ekrana yapışık). */
.cd-main .fi-page > section {
    padding-bottom: 0 !important;
}

@media (min-width: 768px) {
    .cd-main {
        padding-bottom: 24px;
    }
}

/* Pencere / eylem kapları akışta yer tutmaz: kayıt sayfalarında Filament'in beş sıfır yükseklikli gizli formu (eylem, tablo eylemi, toplu
   eylem, bilgi listesi, form bileşeni eylemi) içerik ızgarasının satır aralığını (32) birer kez daha ekliyordu: son öğenin altında 5 × 32 = 160 px ölü boşluk, sayfa
   gereksiz kaydırılabiliyordu ve "son öğenin altı 24" kuralı bozuluyordu. Kaplar akıştan çıkarılır; pencereleri fixed olduğundan çalışmaları etkilenmez. */
.cd-main .fi-page .grid.flex-1 > form[wire\:submit\.prevent^="callMounted"] {
    position: absolute;
}

/* Sayfa başlık satırı (Console, docs/theme-claude-platform.md §3.4): solda başlık SANS 22 / 28 500 birincil (Console'da serif yalnızca
   Dashboard karşılamasında), altında açıklama 14 / 21 ikincil (arası 8); sağda sayfa eylemi ("+ Yeni ..." asıl düğme), başlıkla üstten hizalı.
   Filament'in kendi üst boşluğu kalkar; başlık bloğu ile içerik (araç çubuğu) arası 16. */
.cd-main .fi-page > section {
    padding-top: 0 !important;
    row-gap: 16px !important;
}

.cd-page .fi-header {
    align-items: flex-start !important;
    margin-bottom: 0;
    gap: 8px 16px;
}

.cd-page .fi-header-heading {
    font-family: var(--cd-font-sans) !important;
    font-size: 22px !important;
    line-height: 28px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--cd-text-primary) !important;
    padding: 2px 0;
}

/* Sayfa açıklaması referansın gibi (Console Files / Batches / Agents … ölçüldü 2026-10-12): başlığın 8 altında, 14 / 20 ikincil. */
.cd-page .fi-header-subheading {
    max-width: none !important; /* Filament'in 672 px sınırı yok (referansta da yok) */
    margin-top: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--cd-text-secondary) !important;
}

/* Raporların başlığı (filament.partials.report-page-header; kullanıcı kararı 2026-10-26): solda başlık ve açıklama, sağda dönem hapı
   (referansın Claude Code sayfası: başlıkla üstten hizalı, kabın sağ kenarında). Dar ekranda hap alta iner. */
.cd-page .cl-report-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cl-report-header-end {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px; /* referansın başlık eylemleri arası 8; dar ekranda alt satıra iner, taşmaz */
    max-width: 100%;
    margin-left: auto;
}

/* RAPORUN HAP SATIRI — referansın Spending › Cost'u (ölçüldü 2026-11-05; kullanıcı kararı 2026-11-05): sayfa geneli süzgeç hapları olan
   raporda (Satış ve Kârlılık) açıklamanın 24 altında tam genişlikte satır; solda haplar, aralar 20; görünüm seçicisi (₺ | $) haplardan 32
   ayrı, satırın akışında ("Group by" gibi); sağ uçta Dışa aktar. Kartlar satırın 20 altında (raporun üst boşluğu 12 + başlığın 8). */
.cd-page .cl-report-header--pills {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: -16px; /* kartlar satırın 20 altında (başlıktan sonraki standart 28 yerine; ölçüldü) */
}

.cd-page .cl-report-pillbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: stretch;
    width: 100%;
    gap: 12px; /* hapların görünen kutuları arası 12, hap satırları arası 12: referansın Usage sayfası kutu kutu ölçüldü (API key 378,5–491 → Account 503) */
    margin-top: 16px; /* başlık kabının 8'lik aralığıyla açıklamanın 24 altında */
}

.cd-page .cl-report-pillbar > .cl-filter-pills {
    display: contents;
}

.cd-page .cl-report-pillbar-view {
    display: inline-flex;
    align-items: center;
    gap: 12px; /* Sıfırla ile ₺ | $ arası (şeridin standart aralığı) */
    margin-left: auto; /* süzgeç haplarından başkası (₺ | $, Dışa aktar) şeridin sağ ucunda; kullanıcı kararı 2026-11-13 */
}

.cd-page .cl-report-pillbar-end {
    display: inline-flex;
    margin-left: 0; /* şeridin aralığı zaten 12: araç çubuğu standardı (₺ | $ ile Dışa aktar arası) */
}

.cd-page .cl-report-pillbar .cl-filter-pill-value {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
}

/* Tablonun indirme düğmesi araç çubuğunun sağ ucunda (kullanıcı kararı 2026-10-26; referansın Export'u indirdiği tablonun yanında). */
.cl-report-toolbar .cl-report-download {
    margin-left: auto;
}

/* Gelir tablosunun araç çubuğu: görünüm seçici, Tümünü kapat / aç ve indirme ikonları sağda bir arada, aralar 8. */
.cl-report-toolbar.cl-report-toolbar--end {
    justify-content: flex-end;
    gap: 8px;
}

.cl-report-toolbar--end .cl-report-download {
    margin-left: 0;
}

.cl-report-fold-all > span {
    display: inline-flex;
}

/* Gelir Tablosu: 12 aylık tablonun ay başlıkları tıklanır (o ayın aylık karşılaştırması; kullanıcı kararı 2026-10-31): başlığın yazısı,
   tıklanır her şey gibi altı çizili (yazının renginde %40, üzerine gelince tam); aylık görünümde "← Son 12 ay" küçük ikincil düğme. */
.cl-report-th-link {
    display: inline;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 60ms;
}

.cl-report-th-link:hover {
    text-decoration-color: currentColor;
}

/* 12 ay ↔ aylık geçişi (kullanıcı kararları 2026-10-31; Gelir Tablosu; adımlar gelir-tablosu.blade.php "travel"): YALNIZCA hücrelerin
   içindeki rakamlar ve sütun başlıklarının yazısı (.cl-swap-cell) hareket eder; hücreler, satır çizgileri, satır adları ve düğmeler kımıldamaz.
   İki yönde aynı: out: seçilen ayın sütunu (.cl-keep) dışındakiler oldukları yerde 220 ms'de solarak kaybolur; hold: gelen tabloda yalnızca
   seçilen ay görünür, kayarak yerine gider (tarayıcıda); arrive: diğerleri oldukları yerde 260 ms'de soluktan görünür olur. Kayan yalnızca
   seçilen ay. Hareket azaltma tercihinde geçişler anlık. */
.cl-swap-cell {
    display: block;
}

.cl-swap-out :is(td, thead th):not(.cl-keep) > .cl-swap-cell {
    opacity: 0;
    transition: opacity 220ms var(--cd-ease-out);
}

.cl-swap-hold :is(td, thead th):not(.cl-keep) > .cl-swap-cell {
    opacity: 0;
}

.cl-swap-arrive :is(td, thead th):not(.cl-keep) > .cl-swap-cell {
    animation: cl-swap-arrive 260ms var(--cd-ease-out) both;
}

/* Kartın başlığı ve açıklaması da geçişe katılır: diğer aylarla birlikte solarak kaybolur, seçilen ay yerine
   varınca yeni yazısıyla diğer sütunlarla birlikte soluktan görünür olur (yazı görünmezken değişir). */
.cl-report[data-cl-swap] .cl-report-table-card-heading {
    transition: opacity 260ms var(--cd-ease-out);
}

.cl-report:is([data-cl-swap="out"], [data-cl-swap="hold"]) .cl-report-table-card-heading {
    opacity: 0;
    transition-duration: 220ms;
}

@keyframes cl-swap-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-swap-out :is(td, thead th):not(.cl-keep) > .cl-swap-cell,
    .cl-swap-arrive :is(td, thead th):not(.cl-keep) > .cl-swap-cell {
        transition: none;
        animation: none;
    }
}

/* Grafik | Tablo seçicili araç çubuğu her iki modda aynı yükseklikte: grafik modunda 32'lik Tümünü aç /
   kapat gizlenince satır 28'e inip ortalanmış seçici 2 px kayıyordu. */
.cl-report-toolbar:has(.cl-chart-seg) {
    min-height: 32px;
}

.cl-report-back {
    order: -2; /* Tümünü aç / kapat (order -1) Grafik | Tablo seçicisinin hemen solunda kalsın */
    gap: 6px;
}

.cl-report-back-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.cl-report-back-icon svg {
    width: 100%;
    height: 100%;
}

/* Tümünü aç / kapat düğmesi seçicilerin EN SOLUNDA (kullanıcı kararı 2026-10-31; bütün rapor tablo kartları; seçiciler başlıkla aynı satırda,
   sağda). */
.cl-report-toolbar--end > .cl-report-fold-all {
    order: -1;
}

/* Gelir Tablosu'nun görünüm seçici yazılı (kullanıcı kararı 2026-10-29: "Karşılaştırma | 12 ay", ikonsuz, ipucusuz): 28'lik izde
   seçenek yazısı kadar geniş, 0 10 iç boşluk, 14/20. */
.cd-page .cl-segmented.cl-chart-seg .cl-segmented-option > span.cl-chart-seg-text {
    width: auto;
    padding: 0 10px;
}

/* Tümünü kapat / aç zeminli ikincil ikon düğmesi (kullanıcı kararı 2026-10-29; Sıfırla düğmesinin zemini ve çizgisi). */
.cd-page .cd-btn.cl-report-fold-all {
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
}

@media (hover: hover) {
    .cd-page .cd-btn.cl-report-fold-all:hover {
        background: var(--cd-fill-secondary-hover);
    }
}

.cl-report-fold-all > span[x-cloak],
.cl-report-fold-all > span[style*="display: none"] {
    display: none;
}

/* B2B açılış sayfasında başlık yok (logo ile gelinir); ekran okuyucu için gizli kalır. Admin Panel'in başlığı selamlama (2026-11-01). */
.cd-page.is-landing .fi-header-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ============================================================================
 * 10. TELEFON (< 768 px): üst çubuk ve tam ekran menü §6'da.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cd-page *,
    .cd-page *::before,
    .cd-page *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
 * 11. TABLOLAR — platform.claude.com Console tablosu (kullanıcı kararı 2026-10-10: "referans sitenin değerleri"; docs/theme-claude-platform.md §5.5).
 *     KUTUSUZ: çerçeve, köşe ve zemin yok. Başlık satırı zeminsiz, 32 yüksek, 13 / 17 500 ikincil, iç boşluk 0 12, altında 1 px %5 çizgi.
 *     Hücreler 14 / 20 birincil, iç boşluk 8 12; satırlar arasında 1 px %5 çizgi (son satırda yok); zebra yok.
 *     Hover: satırın tamamı %7,5 / %5 zemin, uçları yuvarlak (köşe 8). Satıra tıklamak Düzenle'yi açar; sağda yalnızca ⋮ menüsü.
 *     Araç çubuğu: solda arama (256) + her filtre ayrı hap; sağda ikon düğmeler (%, para birimi).
 * ========================================================================== */
.cd-page {
    --cd-table-f: 14px;
    --cd-table-lh: 20px;
    --cd-table-py: 8px;
    --cd-table-px: 12px;
    --cd-table-head-f: 13px;
    --cd-table-head-lh: 17px;
}

/* Kutu yok: Filament'in kart zemini, halkası ve gölgesi kalkar; tablo yalnızca yatay kayar. */
.cd-page .fi-ta-ctn {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    overflow: visible !important;
}

.cd-page .fi-ta-ctn .fi-ta-content {
    overflow-x: auto;
    /* Referansın tablosu iki yandan 12 taşar: hücre yazısı sayfa başlığı ve araç çubuğuyla aynı hizada başlar. */
    margin-inline: calc(-1 * var(--cd-table-px));
    border: 0 !important;
    border-radius: 0;
}

/* YANA KAYAN İÇERİKTE KENARLAR SOLAR — PORTAL GENELİ (kullanıcı kararı 2026-11-13): aynı solma (referansın .scroll-fade-x'i) liste tablolarına ek olarak kartlardaki ve bölümlerdeki bütün yana kayan
   içeriğe uygulanır: rapor tabloları (.cl-report-scroll), Satış Özeti (.cl-ms2-scroll), telefonda köprüler (.cl-fade-x; yeni kayan içerik bu sınıfı alır).
   Yatay kaydırma referansın tablosu gibi (kullanıcı kararı 2026-10-12; Console API keys › .scroll-fade-x ölçüldü): sabit sütun YOK,
   tablo sığmazsa kutu yatay kayar ve kaydırılabilen kenar 28 px'te yumuşakça solar (soldaki solma kaydırınca belirir, sağdaki sona
   gelince kaybolur). Kaydırmaya bağlı CSS animasyonu; desteklemeyen tarayıcıda solma olmaz, kaydırma çalışır (referansta da öyle). */
@property --cl-fade-left { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cl-fade-right { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes cl-fade-left { 0% { --cl-fade-left: 0px; } 100% { --cl-fade-left: 28px; } }
@keyframes cl-fade-right { 0% { --cl-fade-right: 28px; } 100% { --cl-fade-right: 0px; } }

@supports (animation-timeline: scroll()) {
    .cd-page .fi-ta-ctn .fi-ta-content,
    .cd-page :is(.cl-report-scroll, .cl-ms2-scroll, .cl-fade-x) {
        mask-image: linear-gradient(to right,
            transparent,
            #0000000d calc(var(--cl-fade-left) * .15), #00000026 calc(var(--cl-fade-left) * .3), #0000004d calc(var(--cl-fade-left) * .45),
            #00000080 calc(var(--cl-fade-left) * .6), #000000b3 calc(var(--cl-fade-left) * .75), #000000d9 calc(var(--cl-fade-left) * .87),
            #000 var(--cl-fade-left),
            #000 calc(100% - var(--cl-fade-right)),
            #000000d9 calc(100% - var(--cl-fade-right) * .87), #000000b3 calc(100% - var(--cl-fade-right) * .75), #00000080 calc(100% - var(--cl-fade-right) * .6),
            #0000004d calc(100% - var(--cl-fade-right) * .45), #00000026 calc(100% - var(--cl-fade-right) * .3), #0000000d calc(100% - var(--cl-fade-right) * .15),
            transparent);
        animation-name: cl-fade-left, cl-fade-right;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-duration: auto;
        animation-timeline: scroll(self inline);
        animation-range: 0px 28px, calc(100% - 28px) 100%;
    }
}

/* Kenar solma maskesi kutunun İÇİNDEKİ HER ŞEYİ kutuya kırpar; sabit konumlu (position: fixed) açılır paneller de dahil (satır ⋮ menüsü,
   hücre içi seçim kutusu listesi; kutunun dışına taşınca görünmüyordu, 2026-10-12). Kutuda bir menü / liste açıkken maske yok (tüm ekran
   genişlikleri; telefonda alt panel için de). Yeni bir açılır öğe tablo hücresine girerse bu listeye eklenir. */
html .cd-page .fi-ta-content:has(:is(.fi-dropdown-panel[style*="display: block"], .choices__list--dropdown.is-active)) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.cd-page .fi-ta-ctn table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cd-page .fi-ta-ctn :is(thead, tbody, tr, th, td),
.cd-page .fi-ta-ctn .fi-ta-header-ctn,
.cd-page .fi-ta-ctn .fi-ta-header-toolbar,
.cd-page .fi-ta-ctn .fi-pagination {
    border-color: var(--cd-border) !important;
}

/* Filament'in kendi bölme çizgileri (divide-y) yerine sitenin çizgileri: başlığın altında, her satırın üstünde (ilk satır hariç). */
.cd-page .fi-ta-ctn :is(table, thead, tbody, .fi-ta-header-ctn, .fi-ta-header-toolbar, .fi-pagination) {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

.cd-page .fi-ta-ctn :is(thead, tbody) > * + *,
.cd-page .fi-ta-ctn table > * + * {
    border-top-width: 0 !important;
}

/* Başlık satırı: zeminsiz, 32 yüksek (yalnızca renk sıfırlanır: aşağıdaki çizgi katmanı kalır). */
.cd-page .fi-ta-ctn thead tr {
    background-color: transparent !important;
}

.cd-page .fi-ta-ctn thead th {
    height: var(--cd-control-h);
    padding: 0 var(--cd-table-px) !important;
    border-bottom: 1px solid transparent !important;
    background: transparent !important;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}

.cd-page .fi-ta-ctn thead th * {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cd-page .fi-ta-ctn thead th > :is(span, button, div) {
    padding-inline: 0 !important;
}

.cd-page .fi-ta-ctn .fi-ta-header-cell-label {
    font-family: var(--cd-font-sans);
    font-size: var(--cd-table-head-f) !important;
    line-height: var(--cd-table-head-lh) !important;
    font-weight: 500 !important;
    color: var(--cd-text-secondary) !important;
}

/* Sıralama oku (referansın tablosu): 16 px; sıralanmamış sütunda saydam (yeri ayrılı), başlığın üzerine gelince soluk, sıralı sütunda
   ikincil renkte; başlıktaki ⓘ bu kurala girmez, hep görünür. Sıralanabilir başlıkta tıklanabilir alan hücrenin tamamıdır (görünmez katman). */
.cd-page .fi-ta-ctn thead th svg:not(.cl-info-tip svg) {
    width: 16px !important;
    height: 16px !important;
    color: transparent !important;
    /* REFERANSIN OK MEKANİZMASI (CLAUDE.md "SIRALAMA OKU = REFERANSIN MEKANİZMASI"): renk geçişi yok (referans `all 0s`). */
}

@media (hover: hover) {
    .cd-page .fi-ta-ctn thead th:hover svg:not(.cl-info-tip svg) {
        color: var(--cd-text-disabled) !important; /* referans: group-hover:text-disabled (%35) */
    }
    .cd-page .fi-ta-ctn thead th[aria-sort]:hover svg:not(.cl-info-tip svg) {
        color: var(--cd-text-primary) !important; /* sıralıyken üzerine gelince birincil (düğme hover:text-primary, ok yazıdan miras) */
    }
}

html:not(.cl-pointer) .cd-page .fi-ta-ctn thead th:focus-within svg:not(.cl-info-tip svg) {
    color: var(--cd-text-disabled) !important;
}

.cd-page .fi-ta-ctn thead th[aria-sort] svg:not(.cl-info-tip svg) {
    color: var(--cd-text-secondary) !important;
}

.cd-page .fi-ta-ctn thead th.fi-ta-header-cell {
    position: relative;
}

.cd-page .fi-ta-ctn thead th.fi-ta-header-cell [role="button"]::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Hücreler */
.cd-page .fi-ta-ctn tbody tr,
.cd-page .fi-ta-ctn tbody tr:hover {
    /* Filament'in satır zeminini siler; hover / seçili / açık satırın zemini bunun ardındaki kuralla (!important) satıra yazılır. */
    background-color: transparent !important;
    border-width: 0 !important;
}

.cd-page .fi-ta-ctn tbody td {
    padding: var(--cd-table-py) var(--cd-table-px) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent;
    vertical-align: middle;
}

/* Satır çizgisi hücrenin kenarlığı DEĞİL, altına çizilen düz 1 px çizgidir: uç hücrelerin köşesi (hover için 8) kenarlığı kıvırıyordu
. Hücreler çizginin konumu için relative. */
.cd-page .fi-ta-ctn tbody td {
    position: relative;
}

.cd-page .fi-ta-ctn tbody td::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--cd-border-subtle);
    pointer-events: none;
}

/* Son satırın altında çizgi yok; ama ::after hücrenin köşe parçalarını da taşır (hover / seçili / açık satırın yuvarlak köşeleri), bu yüzden öğe
   kaldırılmaz (content: none son satırın köşelerini kare bırakıyordu; kullanıcı bildirimi 2026-11-11), yalnızca çizgisi şeffaftır. */
.cd-page .fi-ta-ctn tbody tr:last-child > td::after {
    background: transparent;
}

/* SATIR ÇİZGİLERİ REFERANSIN GİBİ HÜCRE YAZISININ KENARLARINDAN BAŞLAR (kullanıcı kararı 2026-11-06; referansın API keys tablosu ölçüldü: satırın çizgisi
   satırın üstünde 1 px, iki yandan --cds-pad-md = 12 içeride; tablo yazıyla hizalı 12 taşar, zemin (hover / seçili) çizgilerin 12 dışına kadar uzar).
   Bizde çizgi satırın altında (aynı sınır); ilk hücrede soldan, son hücrede sağdan 12 içeride. */
.cd-page .fi-ta-ctn tbody td:first-child::after {
    left: var(--cd-table-px);
}

.cd-page .fi-ta-ctn tbody td:last-child::after {
    right: var(--cd-table-px);
}

/* Başlığın altındaki çizgi de aynı (referansta başlığın çizgisi ilk satırın üst çizgisidir, 12 içeride): başlık hücrelerinde çizgi yok, satırda bir çizgi. */
.cd-page .fi-ta-ctn thead tr {
    background-image: linear-gradient(var(--cd-border-subtle), var(--cd-border-subtle));
    background-position: bottom center;
    background-size: calc(100% - 2 * var(--cd-table-px)) 1px;
    background-repeat: no-repeat;
}

/* İlk satır vurgulandığında (hover / seçili / açık) başlığın altındaki çizgi de gizlenir: referansta o çizgi ilk satırın üst çizgisidir. */
.cd-page .fi-ta-ctn .fi-ta-table:has(tbody > tr:first-child:is(:hover, .cl-row-active, :has(> .fi-ta-selection-cell .fi-ta-record-checkbox:checked))) thead tr {
    background-image: none;
}

/* Üzerine gelinen / açık satırın üstündeki ve altındaki çizgi gizlenir (referans: şerit çizgiyle kesilmez). */
.cd-page .fi-ta-ctn tbody tr:is(:hover, .cl-row-active) > td::after,
.cd-page .fi-ta-ctn tbody tr:has(+ tr:is(:hover, .cl-row-active)) > td::after {
    background: transparent;
}

/* Rakamlar eş genişlikte (referansın tablosu: tabular-nums); sayı sütunları sağa yaslı (sütunun alignEnd()'i), sıra oku yazının solunda. */
.cd-page .fi-ta-ctn tbody td {
    font-variant-numeric: tabular-nums;
}

.cd-page .fi-ta-ctn thead th [role="button"].justify-end {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Tek satırlık satır 45 (referans: 8 + 28 + 8 + 1 px çizgi); iki satırlı hücreler kendiliğinden uzar. */
.cd-page .fi-ta-ctn tbody td {
    height: 45px;
}

/* Hover / seçili / açık satır: satırın tamamı hayalet zemin, uçları yuvarlak (köşe 8). Zemin hücrenin altındaki 1 px'e boyanmaz (referansın
   satırı: hücrelerin altında 1 px saydam çizgi + background-clip: padding-box; kullanıcı bildirimi 2026-10-18): art arda seçili satırlar
   arasında 1 px aralık kalır, her satır ayrı şerit. Renk --cl-row-fill'den; hücrenin kendi zemininin üstüne katman olarak çizilir.
   Satıra tıklanabildiği için imleç --cd-cursor-interactive (§15). */
/* SATIR ZEMİNİ TEK PARÇA (kullanıcı bildirimi 2026-11-06: zeminli satırda sütun aralarında ince gri çizgi / boşluk görünüyordu): zemin hücre hücre
   değil SATIRIN KENDİSİNE (tr) boyanır; hücre sınırları kesirli pikselde (ör. 649,63) hücre hücre boyanan zemin dikiş bırakıyordu. Ama tablo
   satırında (tr) border-radius zemini yuvarlamaz ve clip-path açık ⋮ menüsünü keser (menü satırın içinde), bu yüzden uçlar zeminin üstüne
   sayfa zemini renginde çizilen köşe parçalarıyla yuvarlanır (ilk hücrenin ::after'ı sol, son hücrenin ::after'ı sağ köşeler; köşe 8) ve
   hücrenin altındaki 1 px da (::after) sayfa zemininde bırakılır (art arda seçili satırlar arasında 1 px aralık). Satırlar sayfa zemininde durur. */
.cd-page .fi-ta-ctn tbody tr:is(:hover, .cl-row-active, :has(> .fi-ta-selection-cell .fi-ta-record-checkbox:checked)) {
    background-color: var(--cl-row-fill) !important;
}

.cd-page .fi-ta-ctn tbody tr:is(:hover, .cl-row-active, :has(> .fi-ta-selection-cell .fi-ta-record-checkbox:checked)) > td::after {
    background: var(--cd-page-bg);
}

.cd-page .fi-ta-ctn tbody tr:is(:hover, .cl-row-active, :has(> .fi-ta-selection-cell .fi-ta-record-checkbox:checked)) > td:first-child::after {
    top: 0;
    left: 0;
    height: auto;
    background:
        linear-gradient(var(--cd-page-bg), var(--cd-page-bg)) bottom / 100% 1px no-repeat,
        radial-gradient(circle at 100% 100%, transparent calc(var(--cd-radius) - 0.5px), var(--cd-page-bg) var(--cd-radius)) left top / var(--cd-radius) var(--cd-radius) no-repeat,
        radial-gradient(circle at 100% 0, transparent calc(var(--cd-radius) - 0.5px), var(--cd-page-bg) var(--cd-radius)) left bottom 1px / var(--cd-radius) var(--cd-radius) no-repeat;
}

.cd-page .fi-ta-ctn tbody tr:is(:hover, .cl-row-active, :has(> .fi-ta-selection-cell .fi-ta-record-checkbox:checked)) > td:last-child::after {
    top: 0;
    right: 0;
    height: auto;
    background:
        linear-gradient(var(--cd-page-bg), var(--cd-page-bg)) bottom / 100% 1px no-repeat,
        radial-gradient(circle at 0 100%, transparent calc(var(--cd-radius) - 0.5px), var(--cd-page-bg) var(--cd-radius)) right top / var(--cd-radius) var(--cd-radius) no-repeat,
        radial-gradient(circle at 0 0, transparent calc(var(--cd-radius) - 0.5px), var(--cd-page-bg) var(--cd-radius)) right bottom 1px / var(--cd-radius) var(--cd-radius) no-repeat;
}

.cd-page .fi-ta-ctn tbody tr {
    --cl-row-fill: var(--cd-fill-ghost-hover);
}

/* SATIR ZEMİNİ GEÇİŞSİZ (kullanıcı bildirimi 2026-11-11: fareyle satırların üstünde dolaşırken yuvarlak köşeler bir an kare görünüyordu): Filament satıra
   `transition duration-75` verir, zemin 75 ms'de açılıp sönerdi; köşeler ise zeminin üstüne çizilen sayfa zemini rengindeki köşe parçalarıdır (td::after,
   geçişsiz). Satırdan çıkılınca parçalar hemen kalkar, zemin hâlâ sönerken köşeler kare görünürdü. Zemin ve köşe parçaları aynı anda değişsin diye
   satırın zemini geçişsizdir. Satır zeminini ya da köşelerini değiştiren her yeni kuralda ikisi birlikte düşünülür. */
.cd-page .fi-ta-ctn tbody tr {
    transition-property: none !important;
}

.cd-page .fi-ta-ctn tbody tr:has(.cl-row-menu) > td {
    cursor: var(--cd-cursor-interactive);
}

/* Satırın HER YERİ tıklanır (kullanıcı bildirimi 2026-10-13; referansın satırı): Filament satır tıklamasını hücredeki bağlantı / düğmeyle
   (kayıt adresi ya da kayıt eylemi) yapar, ama o yalnızca yazı kadar büyüktü; hücrenin iç boşluğu ve yazının üstü / altı ölü alandı (Alt
   Parçalar'da satırın yarısı). Bağlantının tıklama alanı hücrenin tamamına yayılır (td relative); içerik üstte kalır (ipuçları çalışır).
   Bağlantısız hücreler (⋮ çevresi) cover-lab-panel.js'te satırın bağlantısına gider. */
.cd-page .fi-ta-ctn tbody .fi-ta-col-wrp > :is(a[href], button)::after {
    content: "";
    position: absolute;
    inset: 0;
}

.cd-page .fi-ta-ctn tbody .fi-ta-col-wrp > :is(a[href], button) > * {
    position: relative;
    z-index: 1;
}

/* Filament'in hücre içi iç boşlukları (px-3 py-4 vb.) kapanır: boşluk yalnızca hücrede. */
.cd-page .fi-ta-ctn tbody td [class*="px-"]:not(.fi-btn):not(.fi-link):not(.fi-badge):not(.cl-tag),
.cd-page .fi-ta-ctn tbody td [class*="py-"]:not(.fi-btn):not(.fi-link):not(.fi-badge):not(.cl-tag) {
    padding: 0 !important;
}

.cd-page .fi-ta-ctn :is(.fi-ta-cell, .fi-ta-text-item-label, .fi-ta-text-item, .fi-ta-text) {
    font-size: var(--cd-table-f) !important;
    line-height: var(--cd-table-lh) !important;
    letter-spacing: 0;
    color: var(--cd-text-primary);
}

.cd-page .fi-ta-ctn .fi-ta-text-item-label {
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-ta-ctn a.fi-ta-text-item-label {
    color: var(--cd-text-accent) !important;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

/* Hücreler satır KIRMAZ, referansın tablosu gibi (whitespace-nowrap; kullanıcı kararı 2026-10-12, eski "uzun metin kırılır, ilk sütun
   sabit" kuralının yerine geçer): tablo sığmazsa kutu yatay kayar (yukarıdaki solma), hiçbir sütun sabit değildir. */
.cd-page .fi-ta-ctn tbody {
    white-space: nowrap !important;
}

.cd-page .fi-ta-ctn tbody .fi-ta-actions {
    flex-wrap: nowrap !important;
}

/* Seçim bilgi bölümü ve seçili satırın sol çizgisi yok (kullanıcı kararları 2026-10-07; toplu işlem de yok). */
.cd-page .fi-ta-ctn .fi-ta-selection-indicator {
    display: none !important;
}

.cd-page .fi-ta-ctn .fi-ta-row > :first-child::before {
    content: none !important;
    display: none !important;
}

/* Fiyat sütunlarında zemin yok: hücreler diğerleri gibi zeminsiz (kullanıcı kararı 2026-10-17: zeminler standarda çekildi; önce Peşin → 3 Ay
   Vadeli sütunları kademeli koyulaşıyordu, 2026-10-09). */

/* Ürün serisi: italik, 600; renk serinin kurumsal rengi (DEĞİŞMEZ, kullanıcı kararı 2026-10-10). */
.cd-page .cl-series .fi-ta-text-item-label {
    font-style: italic;
    font-weight: 600 !important;
}

.cd-page .cl-series-asp .fi-ta-text-item-label { color: var(--cl-series-asp) !important; }
.cd-page .cl-series-chg .fi-ta-text-item-label { color: var(--cl-series-chg) !important; }
.cd-page .cl-series-cmf .fi-ta-text-item-label { color: var(--cl-series-cmf) !important; }

/* Satır eylemi: yalnızca ⋮ menüsü (Console) — 28 × 28, köşe 7, ikon 20, birincil renk; üzerine gelince / açıkken hayalet zemin + birincil renk.
   Menüde Düzenle ve Geçmiş (ikon 20 + yazı). */
.cd-page .fi-ta-ctn tbody .fi-ta-actions {
    align-items: center;
    gap: 4px !important;
}

.cd-page .fi-ta-ctn tbody td .fi-icon-btn {
    width: var(--cd-control-h-sm) !important;
    height: var(--cd-control-h-sm) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--cd-radius-sm) !important;
    background: transparent !important;
    color: var(--cd-text-primary) !important;
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .fi-ta-ctn tbody td .fi-icon-btn:hover,
html:not(.cl-pointer) .cd-page .fi-ta-ctn tbody td .fi-icon-btn:focus-visible {
    background: var(--cd-fill-ghost-hover) !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-ta-ctn tbody td .fi-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
    overflow: visible;
}

/* Menüsü açıkken ⋮ basılı zemini (referansın ghost-selected'ı). */
.cd-page .fi-ta-ctn tbody td .fi-dropdown:has(> .fi-dropdown-panel[style*="display: block"]) .fi-icon-btn,
.cd-page .fi-ta-ctn tbody td .fi-icon-btn[aria-expanded="true"] {
    background: var(--cd-fill-ghost-selected) !important;
}

/* Tabloda giriş yapılabilen hücreler (Fiyat Kontrol, İskonto) hücreyi tam kaplar: kutu hücreye mutlak konumla yayılır;
   zemin alan zemini, odakta vurgu halkası. Yazı ve simge hücrenin ortasında (cover-lab-panel.js kutunun boş yerine tıklayınca odaklar). */
.cd-page .fi-ta-ctn .fi-ta-cell:has(> .fi-ta-col-wrp > * > .fi-ta-text-input, > .fi-ta-col-wrp > * > .fi-ta-select) {
    position: relative;
    min-width: 7rem;
    width: 7rem;
}

.cd-page .fi-ta-ctn .fi-ta-cell:has(> .fi-ta-col-wrp > * > .fi-ta-text-input, > .fi-ta-col-wrp > * > .fi-ta-select) > .fi-ta-col-wrp {
    position: absolute;
    inset: 0;
}

.cd-page .fi-ta-ctn .fi-ta-cell > .fi-ta-col-wrp > :has(> :is(.fi-ta-text-input, .fi-ta-select)),
.cd-page .fi-ta-ctn .fi-ta-cell > .fi-ta-col-wrp > * > :is(.fi-ta-text-input, .fi-ta-select),
.cd-page .fi-ta-ctn .fi-ta-cell > .fi-ta-col-wrp > * > :is(.fi-ta-text-input, .fi-ta-select) .fi-input-wrp {
    height: 100% !important;
    min-height: 0 !important;
}

.cd-page .fi-ta-ctn .fi-ta-cell .fi-input-wrp {
    border-radius: 0 !important;
    background: var(--cd-fill-field) !important;
    box-shadow: none !important;
}

/* Sıfırla düğmeleri (araç çubuğundaki "Sıfırla", boş sonuçtaki "Aramayı / Filtreleri sıfırla"): referansın "Reset" / "Reset search"i:
   32 px, köşe 8, iç boşluk sol 8 (ikonlu) sağ 12, ikon 20 birincil (Tabler history), ikon–yazı 4, 14 / 20 birincil 400. Araç çubuğundaki
   Sıfırla referans gibi hayalet (zeminsiz); boş sonuçtaki ikincil. */
.cd-page .cl-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--cd-control-h);
    padding: 0 12px 0 8px;
    border: 0;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
    color: var(--cd-text-primary);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    white-space: nowrap;
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .cl-reset-btn:hover {
    background: var(--cd-fill-secondary-hover);
}

.cd-page .cl-reset-btn.cl-toolbar-reset {
    background: transparent;
    box-shadow: none;
}

.cd-page .cl-reset-btn.cl-toolbar-reset:hover {
    background: var(--cd-fill-ghost-hover);
}

html:not(.cl-pointer) .cd-page .cl-reset-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cd-page .cl-reset-btn svg {
    width: var(--cd-icon);
    height: var(--cd-icon);
    flex-shrink: 0;
}

/* Arama / filtreyle eşleşen satır yok (partials/table-empty-state; referansın boş sonucu): başlık 14 / 20 500 ikincil, açıklama 13 / 17
   ikincil (başlığa 8), düğme açıklamaya 16. */
.cd-page .fi-ta-ctn .cl-empty-match .fi-ta-empty-state-heading {
    color: var(--cd-text-secondary) !important;
}

.cd-page .fi-ta-ctn .cl-empty-match .fi-ta-empty-state-description {
    margin-top: 8px;
    font-size: 13px !important;
    line-height: 17px !important;
    color: var(--cd-text-secondary) !important;
}

.cd-page .fi-ta-ctn .cl-empty-match .cl-empty-match-reset {
    margin-top: 16px;
}

/* Boş durum: ortalı, soluk; ikon kutusu %5 zemin, köşe 8. */
.cd-page .fi-ta-ctn .fi-ta-empty-state {
    background: transparent !important;
}

.cd-page .fi-ta-ctn .fi-ta-empty-state-icon-ctn {
    background: var(--cd-bg-neutral) !important;
    border-radius: var(--cd-radius) !important;
}

.cd-page .fi-ta-ctn .fi-ta-empty-state-icon-ctn svg {
    color: var(--cd-text-muted) !important;
}

.cd-page .fi-ta-ctn .fi-ta-empty-state-heading {
    font-size: var(--cd-table-f) !important;
    line-height: var(--cd-table-lh) !important;
    font-weight: 500 !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-ta-ctn .fi-ta-empty-state-description {
    font-size: 14px !important;
    color: var(--cd-text-muted) !important;
}

/* ---------------------------------------------------------------------------
 * Araç çubuğu (Console, docs/theme-claude-platform.md §5.6): solda arama kutusu (256 × 32) ve yanında filtre hapları (aralar 8);
 * sağda ikon düğmeler: toplu yüzde (%), para birimi (₺ $) (32 × 32, köşe 8, ikon 20, ikincil; hover hayalet zemin).
 * Filament'in huni (filtre) menüsü gizli: filtreler haplardadır. Araç çubuğu ile tablo arası 24 (referans).
 * ------------------------------------------------------------------------ */
.cd-page .fi-ta-ctn .fi-ta-header-toolbar {
    align-items: flex-start !important;
    padding: 0 0 24px !important; /* referans: araç çubuğu → tablo 24 */
}

.cd-page .fi-ta-ctn .fi-ta-header-toolbar > :first-child:not(:has(*)) {
    display: none;
}

.cd-page .fi-ta-ctn .fi-ta-header-toolbar > :last-child {
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px !important;
    margin-inline-start: 0 !important;
}

/* Haplar tek tek akar: arama kutusunun yanından başlar, sığmayan alt satıra geçer. Sağdaki ikon grubunun ilki sağa yaslanır. */
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .cl-filter-pills { display: contents; }
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field { order: 0; }
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .cl-filter-pill-wrap { order: 1; }
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .cl-filter-pill-group { order: 1; }
/* Sağ grubun içindeki haplar (Liste Fiyatları › Ticari, Ödeme) kapta yazıldıkları sırada: Ticari, Ödeme, ₺ | $. */
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .cl-toolbar-end .cl-filter-pill-wrap { order: 0; }
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .cl-filter-pill-group .cl-filter-pill-wrap { order: 0; } /* ay okları hapın iki yanında kalsın */
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .fi-ta-filters-dropdown { display: none !important; }
/* Sağ grup: "Sıfırla" (arama / filtre etkinken), ₺ $ seçicisi, gömülü "+ Yeni ..." tek kapta, HER ZAMAN sağa yaslı;
   araç çubuğu iki satıra bölününce de alt satırın sağında. Kap boşsa görünmez. */
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .cl-toolbar-end {
    order: 2;
    display: flex;
    flex-wrap: wrap; /* dar ekranda (Liste Fiyatları: Ticari + Ödeme + ₺ | $) sığmayan alt satıra, sağa yaslı (2026-10-25: telefonda sayfayı taşırıyordu) */
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-left: auto;
}

.cd-page .fi-ta-ctn .fi-ta-header-toolbar .cl-toolbar-end:not(:has(> *:not([style*="display: none"]))) {
    display: none;
}

/* Gömülü tablonun "+ Yeni ..." düğmesi: Console'un ikincil düğmesi (32 px, köşe 8, %10 dolgu, 14 / 20). "+" referansın "+ Create"ındaki gibi
   (kullanıcı kararı 2026-11-01, ölçüldü: ikon kutusu 20, çizgisi 13 × 13, kutu düğmenin solundan 8, yazıya 4; önce 16 kutu, arası 6). */
.cd-page .cl-toolbar-create {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--cd-control-h);
    padding: 0 12px 0 8px;
    border: 0;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
    color: var(--cd-text-primary);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: var(--cd-cursor-interactive);
}

.cd-page .cl-toolbar-create:hover {
    background: var(--cd-fill-secondary-hover);
}

.cd-page .cl-toolbar-create svg {
    width: 20px;
    height: 20px;
}

.cd-page .fi-ta-ctn .fi-ta-header-toolbar :is(.fi-icon-btn),
/* Para birimi seçicili tablolarda hücre her para birimini hazır taşır, yalnızca seçili olan görünür (kullanıcı kararı 2026-10-15; geçiş anında,
   sunucuya gidilmez). Seçim <html data-cl-currency>'de (partials/table-currency-switch); yoksa ₺. Sarmalayıcı yerleşime karışmaz (contents). */
.cl-cur {
    display: contents;
}

html:not([data-cl-currency="USD"]) .cl-cur--usd,
html[data-cl-currency="USD"] .cl-cur--try {
    display: none;
}

.cd-page .fi-ta-ctn .fi-ta-header-toolbar :is(.fi-icon-btn):hover,
html:not(.cl-pointer) .cd-page .fi-ta-ctn .fi-ta-header-toolbar :is(.fi-icon-btn):focus-visible,
.cd-page .fi-ta-ctn .fi-ta-header-toolbar .fi-dropdown:has(.fi-dropdown-panel[style*="display: block"]) .fi-icon-btn {
    background: var(--cd-fill-ghost-hover) !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn > span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-page .fi-ta-ctn .fi-ta-header-toolbar :is(.fi-icon-btn) svg {
    display: block;
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.5;
    overflow: visible;
}

/* Para birimi seçici (₺ | $; para içeren tablolar): portalın segment seçicisi (.cl-segmented; kullanıcı kararı 2026-10-17; önce ikon düğmeleri).
   ₺ / $ portalın yazı tipiyle (Inter), segment seçeneğinin yazısı gibi 14 / 20 400 (seçeneğin rengini alır). */
.cd-page .cl-currency-glyph {
    font: inherit;
}

/* Biçimi referansın içerik değiştiren seçicisi (Claude Code usage › grafik kartlarındaki "Chart | Table", SegmentedControl; kullanıcı kararı
   2026-10-18; ölçüldü): seçenekler aralıksız ve kare, içerik (₺ / $) ortada; yüksekliği filtre haplarıyla aynı 32 (kullanıcı kararı 2026-10-18;
   referansın küçük boyu 28 denendi): iz köşe 8, iç boşluk 1; seçenekler 30 × 30, köşe 7 (betik başparmağın köşesini seçenekten alır). */
.cd-page .cl-segmented.cl-currency-switch {
    gap: 0;
}

.cd-page .cl-segmented.cl-currency-switch .cl-segmented-option > span {
    justify-content: center;
    width: 26px;
    padding: 0;
}

/* Referansın görünüm seçicisi: 54 × 28 (seçenek 26). */
.cd-page .cl-segmented.cl-currency-switch {
    --cd-seg-h: 28px;
    border-radius: var(--cd-radius-sm);
}

/* Arama kutusu: Console'un arama kutusu (32 px, alan zemini, 1 px iç halka, köşe 8, büyüteç 16 + soluk yer tutucu), 256 px. */
.cd-page .fi-ta-search-field {
    width: 320px; /* referansın arama kutusu 320 */
    max-width: 100%;
}

.cd-page .fi-ta-search-field .fi-input-wrp {
    min-height: var(--cd-control-h) !important;
    height: var(--cd-control-h);
    border-radius: var(--cd-radius) !important;
    background-color: var(--cd-fill-field) !important;
    box-shadow: var(--cd-field-ring) !important;
}

.cd-page .fi-ta-ctn .fi-ta-search-field .fi-input-wrp .fi-input-wrp-prefix {
    width: auto !important;
    padding: 0 0 0 12px !important; /* referans: büyüteç kenardan 12, yazı 36'da */
}

.cd-page .fi-ta-search-field .fi-input-wrp-icon {
    width: 16px !important;
    height: 16px !important;
    color: var(--cd-text-muted) !important;
}

.cd-page .fi-ta-ctn .fi-ta-search-field .fi-input-wrp .fi-input {
    padding: 4px 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-ta-search-field .fi-input::placeholder {
    color: var(--cd-text-muted) !important;
}

/* Aramayı temizle (X; referansın "Clear search" düğmesi, Console'da ölçüldü 2026-10-11): kutuda yazı varken sağda, kutunun sağ / üst / alt
   kenarına 5; 22 × 22 hayalet düğme, köşe 3 (= 8 − (32 − 22) / 2), ikon 20 birincil (Tabler x). Üzerine gelince yalnızca hayalet zemin
   (ikon rengi değişmez), ipucu yok. Yazı yokken görünmez (yer tutucu görünüyorsa). Tarayıcının kendi "search" X'i gizli. */
.cd-page .fi-ta-search-field {
    position: relative;
}

.cd-page .fi-ta-search-field input::-webkit-search-cancel-button,
.cd-page .fi-ta-search-field input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.cd-page .fi-ta-ctn .fi-ta-search-field:not(:has(input:placeholder-shown)) .fi-input-wrp .fi-input {
    padding-right: 33px !important; /* yazı X'in altına girmesin: 5 + 22 + 6 (referansın kutu içi aralığı) */
}

.cd-page .fi-ta-search-field .cl-search-clear {
    position: absolute;
    top: calc((var(--cd-control-h) - 22px) / 2);
    right: calc((var(--cd-control-h) - 22px) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .fi-ta-search-field:has(input:placeholder-shown) .cl-search-clear {
    display: none;
}

.cd-page .fi-ta-search-field .cl-search-clear:hover {
    background: var(--cd-fill-ghost-hover);
}

.cd-page .fi-ta-search-field .cl-search-clear svg {
    width: var(--cd-icon);
    height: var(--cd-icon);
}

/* Filtre hapları (Console "Workspace All ⌄"; partials/table-filter-pills): 32 px, köşe 8, alan zemini + 1 px iç halka, iç boşluk 0 8;
   etiket soluk, değer birincil (çoklu seçimde "+N" soluk), ok 16 soluk. Menü sitenin açılır menüsü, seçili seçeneklerde mavi tik.
   Filament'in tablonun altındaki etkin filtre şeridi gizli (değer hapın içinde görünür). */
.cd-page .fi-ta-ctn > .fi-ta-filter-indicators {
    display: none !important;
}

.cd-page .cl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Hap (Console FilterCombobox; ölçüldü 2026-10-11): kutu hapın sarmalayıcısıdır (32 px, köşe 8, alan zemini + 1 px iç halka); içinde
   tetikleyici (sol iç boşluk 8: etiket soluk, 6, değer birincil, 6, ok 16 soluk, sağa 10) ve seçim varken ok yerine X (değere 11; 22 × 22, köşe 3,
   üst / sağ / alt kenara 5; ikon 20 birincil; üzerine gelince hayalet zemin; ipucu yok). Zemin hiç değişmez; üzerine gelince çizgi %20. */
.cd-page .cl-filter-pill-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--cd-control-h);
    max-width: min(100%, 256px); /* referans: en fazla 256, uzun değer "…" */
    padding-right: 10px;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
    transition: box-shadow var(--cd-dur-fast) var(--cd-ease-in-out);
}

.cd-page .cl-filter-pill-wrap.has-value {
    padding-right: calc((var(--cd-control-h) - 22px) / 2);
    gap: 5px; /* değer → X (Console Atlası) */
}

/* Tarayıcıda çalışan tablo (ClientSideTable): hapta ok ve X ikisi de çizilir, seçim varken (.has-value) X, yokken ok görünür. */
.cd-page .cl-filter-pill-wrap.has-value .cl-client-chevron,
.cd-page .cl-filter-pill-wrap:not(.has-value) [data-cl-client-clear] {
    display: none;
}

/* Tarayıcıda çalışan tablo: süzülen satırlar, sayfalama düğmeleri, Sıfırla ve "Eşleşen … yok" hidden ile gizlenir. */
.cd-page :is(tr[data-cl-row], [data-cl-pager] .cl-pager-buttons, [data-cl-reset], [data-cl-empty], .fi-ta-table)[hidden] {
    display: none !important;
}

@media (hover: hover) {
    .cd-page .cl-filter-pill-wrap:hover {
        box-shadow: var(--cd-field-ring-hover);
    }
}

.cd-page .cl-filter-pill {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 100%;
    padding: 0 0 0 8px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    white-space: nowrap;
    text-align: left;
    cursor: var(--cd-cursor-interactive);
}

html:not(.cl-pointer) .cd-page .cl-filter-pill:focus-visible {
    outline: none;
}

html:not(.cl-pointer) .cd-page .cl-filter-pill-wrap:has(.cl-filter-pill:focus-visible) {
    box-shadow: var(--cd-focus-ring);
}

.cd-page .cl-filter-pill-label {
    flex: none;
    color: var(--cd-text-muted);
}

.cd-page .cl-filter-pill-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-page .cl-filter-pill-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cd-text-muted);
}

@media (hover: hover) {
    .cd-page .cl-filter-pill-wrap:hover .cl-filter-pill-chevron {
        color: var(--cd-text-secondary); /* referans: üzerine gelince ok ikincil */
    }
}

.cd-page .cl-filter-pill-clear {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .cl-filter-pill-clear:hover {
    background: var(--cd-fill-ghost-hover);
}

.cd-page .cl-filter-pill-clear svg {
    width: var(--cd-icon);
    height: var(--cd-icon);
}

/* Menü (Console FilterCombobox popup): hapın 6 altında, sola hizalı; kısa listede 192, uzun listede 320 geniş; köşe 12, popover yüzeyi,
   halka + gölge, efektsiz. Kısa listede menü en uzun seçeneğe göre genişler (en az 192, en fazla 320; "Kapüşonlu Koruyucu Tulum" kesiliyordu,
   2026-10-13). Uzun listede üstte arama kutusu (tam genişlik, 8 16, alt çizgi %10, zeminsiz, 14 / 20, yer tutucu soluk); liste
   kutusu iç boşluk 4, en fazla --cd-dropdown-max-h, içinde kayar. */
.cd-page .cl-filter-menu {
    position: absolute;
    top: calc(100% + var(--cd-dropdown-gap));
    left: 0;
    z-index: 50;
    width: 320px; /* referansın FilterCombobox menüsü her zaman 320 */
    max-width: calc(100vw - 32px);
    border-radius: var(--cd-radius-popover);
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-popover);
    overflow: hidden;
}

.cd-page .cl-filter-menu--wide {
    width: 320px;
}

/* Özel tarih aralıklı menü (referansın Usage › Range menüsü, 2026-10-13 ölçüldü): 336 geniş. */
.cd-page .cl-filter-menu--range {
    width: 336px;
    max-width: min(336px, calc(100vw - 32px));
}

.cd-page .cl-filter-search {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid var(--cd-border);
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    outline: none;
    box-shadow: none;
}

.cd-page .cl-filter-search::placeholder {
    color: var(--cd-text-muted);
}

.cd-page .cl-filter-scroll {
    max-height: var(--cd-dropdown-max-h);
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cd-page .cl-filter-list:focus {
    outline: none;
}

/* Seçenek (Console: en az 32, iç boşluk 4 12, köşe 8, 14 / 20 birincil; vurgulu = hayalet zemin). Tek seçimde seçili seçeneğin
   sağında 20 px tik (vurgunun bağlantı rengi, sağa 12); çoklu seçimde solda onay kutusu (16, köşe 4, solda 8, yazıya 8; boşken 1 px %20
   çerçeve, seçiliyken vurgu dolgusu + beyaz tik). */
.cd-page .cl-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: var(--cd-radius);
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    white-space: nowrap;
    cursor: var(--cd-cursor-interactive);
    user-select: none;
}

.cd-page .cl-filter-option[data-highlighted] {
    background: var(--cd-fill-ghost-hover);
}

.cd-page .cl-filter-option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-page .cl-filter-check {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--cd-text-accent);
    visibility: hidden;
}

.cd-page .cl-filter-option[aria-selected="true"] .cl-filter-check {
    visibility: visible;
}

.cd-page .cl-filter-list[aria-multiselectable] .cl-filter-option {
    padding-left: 8px;
}

.cd-page .cl-filter-checkbox {
    flex: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--cd-border-strong);
    border-radius: 4px;
}

.cd-page .cl-filter-option[aria-selected="true"] .cl-filter-checkbox {
    border-color: transparent;
    background: var(--cd-fill-accent) var(--cd-check) center / 12px 12px no-repeat;
}

.cd-page .cl-filter-empty {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-muted);
}

/* ---------------------------------------------------------------------------
 * Açılır menüler (filtre, toplu işlem): sitenin açılır menüsü (§6.6) — yüzen yüzey, köşe 12, iç boşluk 4,
 * halka + gölge; en fazla --cd-dropdown-max-h (min(60vh, 320 px), referans), uzunsa içinde kayar.
 * ------------------------------------------------------------------------ */
.cd-page .fi-dropdown-panel,
.choices__list--dropdown .choices__list {
    max-height: var(--cd-dropdown-max-h) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* Son güvence (kullanıcı bildirimi 2026-10-17, "yarım menü"): öğesi olmayan satır ⋮ menüsü hiçbir zaman görünmez (öğeleri tarayıcıda dolduruluyor;
   dolmadan açılırsa yalnızca 16 px'lik iç boşluğu ince bir şerit olarak görünüyordu). */
.fi-dropdown-panel:has([data-cl-row-menu-list]):not(:has(.fi-dropdown-list-item)) {
    visibility: hidden !important;
}

.cd-page .fi-dropdown-panel {
    transition: none !important; /* Console: açılır menü efektsiz, anında (Filament'in solma geçişi kapalı) */
}

.cd-page .fi-dropdown-panel {
    padding: 4px !important;
    border-radius: var(--cd-radius-popover) !important;
    background: var(--cd-surface-popover) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-popover) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.cd-page .fi-dropdown-panel .fi-ta-filters,
.cd-page .fi-dropdown-panel > div {
    max-height: none !important;
    overflow: visible !important;
}

.cd-page .fi-dropdown-panel .fi-ta-filters,
.cd-page .fi-dropdown-panel :is(.fi-ta-filters, form) {
    padding: 12px !important;
}

/* Menü başlıkları ("Filtreler"): 14 / 20 500 birincil; "Sıfırla" soluk düz yazı. */
.cd-page .fi-dropdown-panel :is(.fi-ta-filters-heading, h4) {
    font-family: var(--cd-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--cd-text-primary) !important;
    text-transform: none !important;
}

.cd-page .fi-dropdown-panel :is(.fi-ta-filters-heading, h4)::first-letter {
    text-transform: none !important;
}

.cd-page .fi-ta-filters .fi-link {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cd-text-muted) !important;
}

.cd-page .fi-ta-filters .fi-link:hover {
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-ta-filters .fi-link span {
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

/* Menü panelleri (satır / panel ⋮, toplu işlem, Oluştur; referansın Menu'sü): içerik kadar geniş (en az 128, en fazla 320; Filament'in
   sabit 224'ü değil), iç boşluk 4: öğeler panelin kenarından 4 (Filament listesinin kendi p-1'i kalkar). */
.cd-page .fi-dropdown-panel:has(> .fi-dropdown-list) {
    width: max-content !important;
    min-width: 128px !important;
    max-width: 320px !important;
}

.cd-page .fi-dropdown-panel > .fi-dropdown-list {
    padding: 0 !important;
}

/* Menü öğeleri (toplu işlem menüsü vb.): 32 px, iç boşluk 6 10, köşe 8, 14 / 20 birincil; hover %8 / %5 zemin. */
.cd-page .fi-dropdown-list-item {
    min-height: 32px;
    padding: 6px 10px !important;
    border-radius: var(--cd-radius) !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-dropdown-list-item:hover,
html:not(.cl-pointer) .cd-page .fi-dropdown-list-item:focus-visible {
    background: var(--cd-fill-menu-hover) !important;
}

.cd-page .fi-dropdown-list-item-label {
    color: inherit !important;
}

/* ⋮ AYRACI (site haritası, kullanıcı kararı 2026-11-05; referansın Menu separator'ı): kayıtla yapılan işler ile kapatma (arşiv, silme)
   arasında 1 px çizgi, üstte / altta 4, menünün iç boşluğuna kadar uzanır (RowMenu::group). */
.cd-page .cl-menu-sep {
    height: 1px;
    margin: 4px -4px;
    background: var(--cd-border-subtle);
}

/* Sayfa başlığındaki ⋮ (Filament ActionGroup; ürün sayfası, kullanıcı kararı 2026-11-06): kapatma öğesi (Arşivle / Arşivden çıkar) öncekilerden 1 px ayraçla
   ayrılır (ilk öğeyse ayraç yok); Arşivle KIRMIZI (satır menüsündeki gibi: yalnızca silme / arşiv, en sonda), Arşivden çıkar normal. */
.cd-page .fi-dropdown-list-item.cl-menu-sep-before {
    position: relative;
}

.cd-page .fi-dropdown-list-item.cl-menu-sep-before:not(:first-child) {
    margin-top: 9px;
}

.cd-page .fi-dropdown-list-item.cl-menu-sep-before:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -4px;
    right: -4px;
    height: 1px;
    background: var(--cd-border-subtle);
}

.cd-page .fi-dropdown-list-item.fi-color-custom {
    color: var(--cd-text-danger);
}

.cd-page .fi-dropdown-list-item.fi-color-custom .fi-dropdown-list-item-icon,
.cd-page .fi-dropdown-list-item.fi-color-custom .fi-dropdown-list-item-label {
    color: var(--cd-text-danger) !important; /* İKON VE YAZI HER ZAMAN AYNI RENKTE */
}

/* Menü öğesi ikonu (⋮ menüsü: Düzenle, Geçmiş): 20 px, birincil; ikon ile yazı arası 8. */
.cd-page .fi-dropdown-list-item-icon {
    width: 20px !important;
    height: 20px !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-dropdown-list-item {
    gap: 8px !important;
}

/* ---------------------------------------------------------------------------
 * Kayıt sayısı: tablonun altında sağda sayaç (14 / 20 soluk); solda sayfa düğmeleri (aşağıda
 * .cl-pager). Görünüm resources/views/vendor/filament/components/pagination/index.blade.php.
 * ------------------------------------------------------------------------ */
.cd-page .fi-ta-ctn .fi-pagination {
    padding: 12px 0 0 !important;
}

.cd-page .fi-ta-ctn .fi-pagination-overview {
    display: inline !important; /* Filament yalnızca geniş ekranda gösterir; sayaç her genişlikte görünür */
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-muted) !important;
}

/* Tablonun altı — REFERANSIN CANLI SAYFALI TABLOSU (Messages › Logs, ölçüldü 2026-11-05; önce Atlas'ın koddan okunan notuyla sağda, 28 × 28,
   4 altta): SOLDA ‹ ›, sütun başlıklarının yazısıyla aynı hizada; ikincil ikon düğmesi 32 × 32, köşe 8, %10 dolgu, ikon 20 birincil,
   aralarında 8; ilk / son sayfada %40 soluk; tablonun 12 altında; yalnızca 20'den fazla satır varken. Kayıt sayısı yok. */
.cd-page .fi-ta-ctn .cl-pager {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 12px;
    border-top: 0 !important; /* Filament kabının divide-y'si 1 px ekliyordu (13 oluyordu) */
}

/* Kayıt sayısı (kullanıcı kararı 2026-11-05; App\Support\TableCount): sayfa düğmelerinin karşı ucunda (sağda), her zaman — satır sayfa
   düğmesi yokken de görünür; 14 / 20 soluk, rakamlar eşit genişlikli; düğmelerle aynı hizada (32'lik satırın ortası). */
.cd-page .fi-ta-ctn .cl-pager {
    min-height: var(--cd-control-h);
}

.cd-page .fi-ta-ctn .cl-pager-count {
    margin-left: auto;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cd-page .cl-pager-buttons {
    display: flex;
    gap: 8px;
}

.cd-page .cl-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-control-h);
    height: var(--cd-control-h);
    padding: 0;
    border: 0;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .cl-pager-btn svg {
    width: var(--cd-icon);
    height: var(--cd-icon);
}

.cd-page .cl-pager-btn:not(:disabled):hover {
    background: var(--cd-fill-secondary-hover);
}

html:not(.cl-pointer) .cd-page .cl-pager-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cd-page .cl-pager-btn:disabled {
    opacity: .4;
}

/* Dar ekranda arama kutusu ikonların yanında kalan genişliği alır (taşmaz). */
@media (max-width: 1023px) {
    .cd-page .fi-ta-ctn .fi-ta-header-toolbar > :last-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cd-page .fi-ta-search-field {
        flex: 1 1 120px;
        width: auto;
        min-width: 0;
    }
}

/* ============================================================================
 * 12. FORM, DÜĞME, POPUP, ETİKET, SEGMENT SEÇİCİ (Docs §6 + Console aşama 3: docs/theme-claude-platform.md §5.7, §5.9). Panelin iç
 *     sayfaları (.cd-page) ve popup'ları. Console'a göre: alanlar 32 px, alan başlığı 14 / 14 500 (alana 8), segment seçici 32 px. Giriş ekranları §13.
 * ========================================================================== */
.cd-page {
    --cd-field-h: 28px;        /* form alanı: referansın Create agent formunda canlıda ölçüldü 2026-11-12 (Name, Model 28; textarea 56 = 2 satır); eskiden 32 */
    --cd-field-px: 12px;
    --cd-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
    --cd-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
    --cd-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    /* Popup başlık satırındaki alanın (segment seçici) yüksekliği: konumlandırma (cover-lab-theme-panel.css) bu değeri kullanır. */
    --cd-seg-h: var(--cd-control-h);
}

/* ---------------------------------------------------------------------------
 * Düğmeler (§6.1): 32 px, iç boşluk 0 12, köşe 8, 14 / 20. Asıl (Kaydet vb.) = dolu birincil (koyuda beyaz, açıkta siyah) 500;
 * ikincil (gri) = %10 dolgu; tehlikeli (Sil) = sitenin kırmızısı, beyaz yazı. Düğme ikonları yok, yazı cümle düzeninde (kullanıcı kararları).
 * ------------------------------------------------------------------------ */
.cd-page .fi-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--cd-control-h);
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: var(--cd-radius) !important;
    background: var(--cd-fill-secondary) !important;
    box-shadow: var(--cd-shadow-btn-secondary) !important; /* Console ikincil düğmesi: açıkta çizgi + gölge, koyuda yalnızca gölge */
    --tw-ring-shadow: 0 0 #0000 !important;
    color: var(--cd-text-primary) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .fi-btn:hover,
html:not(.cl-pointer) .cd-page .fi-btn:focus-visible {
    background: var(--cd-fill-secondary-hover) !important;
}

.cd-page .fi-btn .fi-btn-label,
.cd-page .fi-btn .fi-btn-icon {
    color: inherit !important;
}

.cd-page .fi-btn .fi-btn-icon {
    display: none !important;
}

/* "+ Yeni ..." ve "+ Oluştur ⌄" (sayfa başlığındaki asıl düğme): referansın "+ Create"ı (kullanıcı kararı 2026-11-01, ölçüldü): "+" ikon kutusu
   20 (çizgisi 13 × 13, cl-row-plus), kutu düğmenin solundan 8, yazıya 4; sağda iç boşluk 12. Önce ikon 16, arası 6 ("artı küçük kalmış"). */
.cd-page .fi-btn.cl-create-btn .fi-btn-icon:not(.animate-spin) {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

.cd-page .fi-btn.cl-create-btn {
    /* Referansın başlık düğmesi (Files › Upload file, Agents › Create agent; canlıda ölçüldü 2026-11-12): 28 yüksek, ikon düğmenin soluna 5, yazıdan sağ kenara 9. */
    gap: 4px !important;
    min-height: 28px;
    height: 28px;
    padding: 0 9px 0 5px !important;
}

/* Sayfa başlığındaki ikonsuz düğmeler ("Güncelle" vb.) da referansın başlık düğmesi gibi: 28 yüksek, iç boşluk 9. */
.cd-page .fi-header .fi-ac .fi-btn:not(.cl-create-btn):not(.cl-send-btn) {
    min-height: 28px;
    height: 28px;
    padding: 0 9px !important;
}

/* "Gönder" düğmelerinde HER ZAMAN kâğıt uçak ikonu: pencerelerdeki (Filament) gönder düğmesi de, başlıktaki gibi, baştaki 20 px ikon, soldan 8, yazıya 4, sağ 12. */
.cd-page .fi-btn.cl-send-btn .fi-btn-icon:not(.animate-spin),
.fi-modal-window .fi-btn.cl-send-btn .fi-btn-icon:not(.animate-spin) {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

.cd-page .fi-btn.cl-send-btn,
.fi-modal-window .fi-btn.cl-send-btn {
    gap: 4px !important;
    padding: 0 12px 0 8px !important;
}

/* Açılır menülü "+ Oluştur ⌄" (Genel Bakış sayfaları; referansın Agents › Overview › Create'i): yazının 4 sağında 16 px aşağı ok, %60 soluk,
   sağ iç boşluğa 3 px taşar; menü düğmenin 6 altında, sağa hizalı (Filament açılır menüsü, Console Menu). */
.cd-page .fi-btn.cl-create-menu::after {
    content: '';
    width: 16px;
    height: 16px;
    margin-right: -3px;
    background: currentColor;
    opacity: 0.6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* İkonlu ikincil düğme (formdaki Arşivle / Arşivden çıkar; kullanıcı kararı 2026-10-17): referansın ikonlu ikincil düğmesi,
   "Sıfırla" ile aynı ölçü: iç boşluk 0 12 0 8, ikon 20, ikon–yazı 4. */
.cd-page .fi-btn.cl-btn-with-icon {
    gap: 4px !important;
    padding: 0 12px 0 8px !important;
}

.cd-page .fi-btn.cl-btn-with-icon .fi-btn-icon:not(.animate-spin) {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

.cd-page .fi-btn:is(.fi-color-primary, .fi-btn-color-primary, .fi-color-success, .fi-btn-color-success) {
    background: var(--cd-fill-primary) !important;
    box-shadow: none !important;
    color: var(--cd-on-primary) !important;
    font-weight: 500 !important;
}

.cd-page .fi-btn:is(.fi-color-primary, .fi-btn-color-primary, .fi-color-success, .fi-btn-color-success):hover {
    background: var(--cd-fill-primary-hover) !important;
}

.cd-page .fi-btn:is(.fi-color-danger, .fi-btn-color-danger) {
    background: var(--cd-fill-danger) !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

.cd-page .fi-btn:is(.fi-color-danger, .fi-btn-color-danger):hover {
    background: var(--cd-fill-danger-hover) !important;
}

html:not(.cl-pointer) .cd-page .fi-btn:focus-visible {
    box-shadow: var(--cd-focus-ring) !important;
}

/* Zorunlu alanlar dolana kadar kapalı asıl düğme (referanstaki gibi, kullanıcı kararı 2026-10-11): cover-lab-panel.js `.cl-btn-blocked`
   + aria-disabled verir (Filament'in kendi `disabled` bağlarına karışmamak için öznitelik değil sınıf). Soluk, üzerine gelince değişmez,
   imleç ok. Referansın kapalı düğmesi gibi %40 (önce %70). */
.cd-page :is(.fi-btn, .cd-btn):is(:disabled, .cl-btn-blocked) {
    opacity: 0.4 !important;
    cursor: default !important;
}

.cd-page .cd-btn--secondary.cl-btn-blocked:hover {
    background: var(--cd-fill-secondary) !important;
}

.cd-page .fi-btn.cl-btn-blocked:hover {
    background: var(--cd-fill-secondary) !important;
}

.cd-page .fi-btn:is(.fi-color-primary, .fi-btn-color-primary, .fi-color-success, .fi-btn-color-success).cl-btn-blocked:hover {
    background: var(--cd-fill-primary) !important;
}

/* Bağlantı biçimli eylemler (.fi-link: "Tümünü seç", "Sıfırla" vb.): sitenin metin bağlantısı gibi; ikon yok. */
.cd-page .fi-link {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
}

.cd-page .fi-link,
.cd-page .fi-link span {
    color: var(--cd-text-accent) !important;
}

.cd-page .fi-link:hover span {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.cd-page .fi-link .fi-link-icon {
    display: none !important;
}

.cd-page .fi-link.fi-color-danger,
.cd-page .fi-link.fi-color-danger span {
    color: var(--cd-text-danger) !important;
}

/* Genel ikon düğmesi (popup ×, satır dışı ikonlar): hayalet, soluk; üzerine gelince zemin + birincil. */
.cd-page .fi-icon-btn {
    border-radius: var(--cd-radius) !important;
    color: var(--cd-text-muted) !important;
    background: transparent !important;
}

.cd-page .fi-icon-btn:hover,
html:not(.cl-pointer) .cd-page .fi-icon-btn:focus-visible {
    background: var(--cd-fill-ghost-hover) !important;
    color: var(--cd-text-primary) !important;
}

/* ---------------------------------------------------------------------------
 * Alanlar (Console §5.7): 32 px, köşe 8, alan zemini + 1 px iç halka, iç boşluk 0 12; yazı 14 / 20 birincil, yer tutucu soluk;
 * odakta Console'un odak gölgesi (1 px vurgu mavisi + 6 px yumuşak mavi parıltı).
 * Birim (%, $, g/m²…) kutunun içinde soluk. Hata: kırmızı halka + kırmızı ileti.
 * ------------------------------------------------------------------------ */
.cd-page .fi-input-wrp {
    min-height: var(--cd-field-h) !important;
    border-radius: var(--cd-radius) !important;
    background-color: var(--cd-fill-field) !important;
    box-shadow: var(--cd-field-ring) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    transition: box-shadow var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .fi-input-wrp.fi-disabled,
.cd-page .fi-input-wrp:has(:disabled) {
    background-color: var(--cd-bg-neutral) !important;
    opacity: 1;
}

.cd-page :is(.fi-input, .fi-select-input) {
    padding: calc((var(--cd-field-h) - 22px) / 2) var(--cd-field-px) !important;
}

/* Çok satırlı alan: referansın Textarea'sı 8 12 (üç satır 76). */
.cd-page .fi-fo-textarea textarea {
    padding: 8px var(--cd-field-px) !important;
}

.cd-page :is(.fi-input, .fi-select-input, .fi-fo-textarea textarea) {
    font-family: var(--cd-font-sans);
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-primary) !important;
    background: transparent !important;
}

.cd-page :is(.fi-input, .fi-fo-textarea textarea)::placeholder {
    color: var(--cd-text-muted) !important;
    opacity: 1;
}

.cd-page .fi-input-wrp :is(.fi-input-wrp-prefix, .fi-input-wrp-suffix) {
    width: auto !important;
    padding: 0 var(--cd-field-px) !important;
    border: 0 !important;
    color: var(--cd-text-muted) !important;
    font-size: 14px !important;
}

.cd-page .fi-input-wrp:has(.fi-input-wrp-prefix) .fi-input {
    padding-inline-start: 0 !important;
}

.cd-page .fi-input-wrp:has(.fi-input-wrp-suffix) .fi-input {
    padding-inline-end: 0 !important;
}

.cd-page .fi-input-wrp-label {
    font-size: 14px !important;
    color: var(--cd-text-muted) !important;
}

.cd-page .fi-input-wrp-icon {
    width: 16px !important;
    height: 16px !important;
    color: var(--cd-text-muted) !important;
}

/* Yerel seçim kutusu: sağda soluk ok (16), boş değer seçiliyken metin yer tutucu renginde. */
.cd-page select.fi-select-input {
    padding-inline-end: 36px !important;
    background-image: none !important;
}

.cd-page .fi-input-wrp:has(> .fi-input-wrp-input > select.fi-select-input):not(.fi-pagination .fi-input-wrp) {
    position: relative;
}

.cd-page .fi-input-wrp:has(> .fi-input-wrp-input > select.fi-select-input):not(.fi-pagination .fi-input-wrp)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--cd-field-px);
    translate: 0 -50%;
    width: 16px;
    height: 16px;
    background: var(--cd-text-muted);
    -webkit-mask: var(--cd-chevron) center / contain no-repeat;
    mask: var(--cd-chevron) center / contain no-repeat;
    pointer-events: none;
}

.cd-page select.fi-select-input:has(option[value=""]:checked) {
    color: var(--cd-text-muted) !important;
}

.cd-page select.fi-select-input option {
    background: var(--cd-surface-popover);
    color: var(--cd-text-primary);
}

/* Ayar formu sayfası (Console düzen B: Organization, Billing; docs/theme-claude-platform.md §3.3): içerik 768 px'lik ortalı sütunda,
   alan blokları arası 16. Sayfaya .cl-form-page verilir (ör. Profil). Tam sayfa yeni kayıt / düzenleme ekranları da bu düzeni kullanır. */
.cd-page .fi-page.cl-form-page {
    width: 100%;
    max-width: 768px;
    margin-inline: auto;
}

/* Alanlar arası: alt alta 16, yan yana 12 (referansın alan satırı "flex items-end gap-sm"; kullanıcı kararı 2026-10-13, önce yan yana da 16). */
.cd-page .fi-page.cl-form-page .fi-fo-component-ctn {
    row-gap: 16px !important;
    column-gap: 12px !important;
}

/* Profil › Görünüm (tema seçimi; kullanıcı kararı 2026-10-11): referansın Ayarlar › General › Appearance bölümü, ölçüldü. Üstte 1 px çizgi
   (%10), bölüm iç boşluğu 32; solda başlık 15 / 20 500 birincil + 4 px altında açıklama 14 / 20 ikincil, sağda (aralık 20, dikey ortada)
   ikonlu segment seçici: iz %5, 32 yüksek, iç boşluk 1, köşe 8; seçenek 30 × 30 kare, köşe 6, ikon 20, seçili olmayan ikincil → üzerine
   gelince birincil; seçili olan başparmak (açıkta beyaz, koyuda %10) + içte 1 px %10 halka + 0 1 2 gölge, köşe 7. Dar ekranda seçici alta kayar. */
.cl-appearance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    /* Bölümün üst ve alt boşluğu her zaman eşit, 32: çizgi → içerik 32 (padding), içerik → sonraki bölümün
       çizgisi 32 (sayfanın bölüm aralığı, Filament gap-y-8). Ayrıca margin-top verilmez: önce 32 + 32 = 64 oluyordu. */
    margin-top: 0;
    padding-top: 32px;
    border-top: 1px solid var(--cd-border);
}

.cl-appearance-text {
    flex: 1 1 176px;
    min-width: 0;
}

.cl-appearance h2 {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-appearance p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

/* Profil › İki adımlı doğrulama (kullanıcı kararı 2026-10-21; filament.partials.two-factor-settings): Görünüm satırıyla aynı düzen; açık
   durumda başlığın 8 sağında "Açık" rozeti; sağda düğmeler (aralar 8); kurulum ve kurtarma kodları satırın altında, tam genişlikte. */
.cl-2fa h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-2fa-actions,
.cl-2fa-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.cl-2fa-body {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.cl-2fa-body h3 {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-2fa-body p {
    margin: 0;
}

.cl-2fa .cl-2fa-note {
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cl-2fa-secret {
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--cd-text-secondary);
}

.cl-2fa-qr {
    width: fit-content;
    padding: 8px;
    border-radius: 8px;
    background: #FFFFFF; /* QR okunsun: iki modda beyaz */
}

.cl-2fa-code {
    max-width: 200px;
}

.cl-2fa-codes {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 4px 32px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--cd-bg-neutral);
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--cd-text-primary);
}

.cl-2fa-body .cl-2fa-buttons {
    margin-left: 0;
}

.cl-theme-seg {
    display: inline-flex;
    flex: none;
    margin-left: auto;
    box-sizing: border-box;
    height: var(--cd-seg-h);
    padding: 1px;
    border-radius: var(--cd-radius);
    background: var(--cd-seg-track);
}

.cl-theme-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 7px; /* iz köşesi (8) − 1, başparmakla aynı */
    background: transparent;
    color: var(--cd-text-secondary);
    cursor: var(--cd-cursor-interactive);
    transition: color var(--cd-dur-fast) var(--cd-ease-out), box-shadow var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-theme-seg button svg {
    width: var(--cd-icon);
    height: var(--cd-icon);
}

.cl-theme-seg button:hover,
.cl-theme-seg button[aria-checked="true"] {
    color: var(--cd-text-primary);
}

.cl-theme-seg button[aria-checked="true"] {
    border-radius: 7px;
    background: var(--cd-seg-thumb);
    box-shadow: inset 0 0 0 1px var(--cd-seg-thumb-ring), 0 1px 2px rgba(0, 0, 0, 0.05);
}

html:not(.cl-pointer) .cl-theme-seg button:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

/* Başlıksız durum seçicisi (Aktif | Pasif; .cl-modal-head-field): popup'ta × düğmesinin solundaydı; tam sayfada başlık satırının
   sağında, başlıkla aynı hizada (kırıntı yolu 20 + 8 aralık → başlık satırı 28 px'te başlar, seçici 32 px). */
.cd-page .fi-page.cl-form-page {
    position: relative;
}

/* Geniş form (ürün ağacı, fiyat, rol izinleri): 1200 px. */
.cd-page .fi-page.cl-form-page--wide {
    max-width: 1200px;
}

/* Orta form: 992 (portalın Genel Bakış kabıyla aynı standart; 768 ile 1200 arası): kullanıcı formu, Telefon kutusu + WhatsApp düğmesi 768'de
   kısa kalıyordu, 1200 fazla genişti. */
.cd-page .fi-page.cl-form-page--medium {
    max-width: 992px;
}

/* Dar bölümlü form: 640 (kullanıcı kararı 2026-11-04; kullanıcı ve yetkili kişi formları): solda 224'lük bölüm adı ve açıklaması, 28 aralık,
   alanlara ~388 kalır. */
.cd-page .fi-page.cl-form-page--compact {
    max-width: 640px;
}

/* Küçük form: 448 (referansın Organization formu, max-w-md; standartta 768'den sonraki dar sütun): az alanlı formlar (müşteri grubu, ödeme
   şekli; kullanıcı kararı 2026-10-13). */
.cd-page .fi-page.cl-form-page--small {
    max-width: 448px;
}

/* Tam sayfa yeni kayıt / düzenleme (Console "Workspaces / Create workspace"): başlığın üstünde kırıntı yolu (14 / 20; üst öğe soluk
   bağlantı, ayraç "/" soluk, geçerli sayfa ikincil 500; aralar 12), başlık ile arası 16 (referans). */
.cd-page .cl-form-header {
    display: contents;
}

/* Başlık bloğu (başlık, açıklama, düzenlemede sağdaki damga) üst çubuğun altında yapışık kalır; kırıntı kayar (kullanıcı kararı 2026-11-12, kayıt
   sayfalarıyla aynı). */
.cd-page .cl-form-sticky {
    position: sticky;
    top: var(--cd-topbar-h);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
    margin-bottom: 8px;
    padding: 8px 0;
    background: var(--cd-page-bg);
}

.cd-page .cl-form-header:not(.cl-record-header) > .cl-breadcrumb {
    margin-bottom: -6.5px; /* KIRINTI ALTI BOŞLUK STANDARDI: kırıntı yazısı → başlık yazısı 21,5 (sayfanın bütün kırıntılı başlıkları; aşağıdaki kayıt kuralıyla aynı ölçü) */
}

/* Düzenleme sayfasında başlığın sağında "Oluşturuldu" / "Oluşturan" (kullanıcı kararı 2026-10-18; referansın panelindeki "Created" /
   "Created by" satırları, panellerin yazı standardıyla: etiket 12 / 17 soluk, değer 12 / 17; burada etiket 72): başlık bölümü iki sütun,
   sağdaki blok kırıntı yolunun hizasından başlar, sağa yaslı; dar ekranda (< 768) açıklamanın altına iner. */
.cd-page .cl-form-sticky--creation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 8px;
    align-items: start !important;
}

.cd-page .cl-form-sticky--creation > :not(.cl-form-creation) {
    grid-column: 1;
}

.cd-page .cl-form-creation {
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 6px;
}

.cd-page .cl-form-creation .cl-detail-row {
    grid-template-columns: 72px auto;
}

@media (max-width: 767px) {
    .cd-page .cl-form-sticky--creation {
        grid-template-columns: minmax(0, 1fr);
    }

    .cd-page .cl-form-creation {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Oluşturan: rolün ikonu (16, ikincil) + 6 aralıkla ad (birincil) ve altında e-posta (soluk); "Sistem" soluk. Panelde de aynı. */
.cl-creator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* AKTİF KULLANICININ E-POSTASI "adres (sen)" (kullanıcı kararı 2026-11-06; ContactLink::youSuffix): "(sen)" soluk. */
.cl-you {
    color: var(--cd-text-muted);
    white-space: nowrap;
}

.cl-detail-row--creator {
    align-items: start;
}

.cd-page .cl-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-muted);
}

.cd-page .cl-breadcrumb a {
    color: var(--cd-text-muted);
    text-decoration: none;
}

.cd-page .cl-breadcrumb a:hover {
    color: var(--cd-text-primary);
}

.cd-page .cl-breadcrumb-current {
    color: var(--cd-text-secondary);
    font-weight: 500;
}

/* Alt çubuk: İptal + Kaydet sağda, düzenlemede Sil solda. */
.cd-page .cl-form-footer > .cl-form-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Silinemeyen kayıtta (kullanıcı kararı 2026-10-13; bildirim yerine): Sil kapalı (%40), nedeni düğmenin 8 altında 13 / 17 soluk. Neden
   kendi alanında satır kırar; İptal + Kaydet hep aynı satırda kalır (dar formda çubuk ikiye bölünmesin). */
.cd-page .cl-form-side {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.cd-page .cl-form-side-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cd-page .cl-form-footer:has(> .cl-form-side) {
    flex-wrap: nowrap;
}

.cd-page .cl-delete-blocked {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* Tam sayfa formların alt çubuğu (Console "Create workspace" / "Create agent", ölçüldü 2026-10-12; yeni kayıt VE düzenleme, kullanıcı
   kararı 2026-10-13): form sütunu genişliğinde, üstte 1 px %10 çizgi, iç boşluk 12 0, aralarında 12. Çubuk HER ZAMAN ekranın altında: sayfa
   en az ekran boyu kadar uzar, form kalan yüksekliği doldurur ve çubuk formun dibine itilir; form uzunsa ekranın altına yapışır. */
.cd-page .cl-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding: 12px 0;
    border-top: 1px solid var(--cd-border);
    background: var(--cd-page-bg);
}

/* Dokunmatik cihazda klavye açıkken (bir alana odaklanılmışken) alt çubuk yapışık kalmaz: iOS'ta görünür alan klavyenin üstüne daralır ve çubuk formun ortasında
   alanların üstünde asılı kalıyordu; klavye açıkken çubuk formun sonundaki yerinde (statik) durur. */
@media (pointer: coarse) {
    .cd-page .fi-page.cl-form-page--sticky form#form:has(input:focus, textarea:focus, select:focus) .cl-form-footer {
        position: static;
    }
}

.cd-main:has(.cl-form-page--sticky) {
    padding-bottom: 0;
}

.cd-page .fi-page.cl-form-page--sticky {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 24px);
}

.cd-page .fi-page.cl-form-page--sticky > section {
    flex: 1;
    padding-bottom: 0 !important;
}

.cd-page .fi-page.cl-form-page--sticky > section > div:last-child,
.cd-page .fi-page.cl-form-page--sticky form#form {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.cd-page .fi-page.cl-form-page--sticky form#form {
    row-gap: 24px;
}

/* Filament formunun satır aralığı (24) yerine referansın ölçüsü: form → düğme satırı 16. */
.cd-page .fi-page.cl-form-page form#form {
    row-gap: 16px;
}

/* Alan başlığı (Console: 14 / 14 500 birincil, alana 8), ipucu, hata */
.cd-page .fi-fo-field-wrp-label span:not(.cl-info-tip, .cl-info-tip *) {
    font-size: 14px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    color: var(--cd-text-primary) !important;
}

.cd-page :is(.fi-fo-field-wrp-helper-text, .fi-fo-field-wrp-hint) {
    font-size: 13px !important;
    line-height: 17.875px !important; /* referansın notu 13 / 17,875 */
    color: var(--cd-text-muted) !important;
}

/* Alan uyarısı, TÜM portal (panel formları ve giriş ekranları; referanstaki uyarı, kullanıcı kararı 2026-10-11): başta 16 px "ünlem yuvarlağı" (Tabler alert-circle; çizgi 24 ızgarada
   30 / 16 = 1,875), ikona 4, yazı 13 / 17,875 (leading-snug) tehlike kırmızısı, sola yaslı; ikon yazının ilk satırına 1 px aşağıdan oturur.
   Alanla uyarı arası 8 (Filament'in gap-y-2'si = referansın gap-xs'i). */
.fi-fo-field-wrp-error-message {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px !important;
    line-height: 17.875px !important;
    font-weight: 400;
    text-align: left;
    color: var(--cd-text-danger) !important;
}

.fi-fo-field-wrp-error-message::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Salt okunur bilgi (Placeholder) */
.cd-page .fi-fo-placeholder {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

/* Zengin metin / dosya yükleme gövdeleri: alan zemini, köşe 8, halka. */
.cd-page :is(.fi-fo-rich-editor, .fi-fo-markdown-editor, .fi-fo-file-upload .filepond--panel-root) {
    border-radius: var(--cd-radius) !important;
    background: var(--cd-fill-field) !important;
    box-shadow: var(--cd-field-ring) !important;
}

/* ---------------------------------------------------------------------------
 * ALANLARIN ORTAK DURUMLARI — TEK YER (Console'dan ölçüldü; kullanıcı kararı 2026-10-10). Portaldaki HER giriş alanı burada listelenir ve
 * üzerine gelince / odakta / hatalıyken buradaki kurallarla görünür (yukarıdaki --cd-field-ring* / --cd-focus-ring* değişkenleri):
 *   normal  → --cd-field-ring (her alan kendi kuralında)
 *   hover   → --cd-field-ring-hover (yalnızca fareli cihazlarda; odakta, hatalıyken, devre dışıyken değişmez), 60 ms
 *   odak    → --cd-focus-ring (Console: inset zemin + 1 px mavi + 6 px parıltı)
 *   hata    → --cd-field-ring-invalid, odakta --cd-focus-ring-danger
 * Kapsam (`--cd-field` listesi): Filament alanları `.fi-input-wrp` (yazı, sayı, şifre, seçim / Choices, tarih, metin kutusu, tablo arama,
 * "sayfa başına", tablo hücresindeki giriş kutuları; panel ve giriş ekranları), kenar menüdeki arama kutusu `.cd-search-btn`, zengin metin /
 * markdown / dosya yükleme, ürün ağacı miktar kutusu `.cl-tree-qty`, filtre menüsündeki tarih alanı `.cl-date-input` (odak halkası yok), birleşik alan `.cl-compound-box` (kutu kendi kuralında, durumları
 * aynı değişkenlerle). YENİ BİR ALAN TÜRÜ
 * EKLENİRSE YALNIZCA BU LİSTEYE EKLENİR.
 * Öncelik: alanların kendi kuralları (!important, farklı özgüllükte) bu durumları ezmesin diye seçicilere `:not(#cd-state)` eklenir
 * (hiçbir öğeye bu kimlik verilmez; yalnızca kimlik düzeyinde öncelik sağlar).
 * ------------------------------------------------------------------------ */
.fi-input-wrp,
.cd-search-btn,
:is(.fi-fo-rich-editor, .fi-fo-markdown-editor, .filepond--panel-root),
.cl-tree-qty,
.cl-date-input {
    transition: box-shadow var(--cd-dur-fast) var(--cd-ease-in-out) !important;
}

@media (hover: hover) {
    .fi-input-wrp:hover:not(:focus-within, .fi-disabled, :has(:disabled)):not(.fi-fo-field-wrp:has(.fi-fo-field-wrp-error-message) *):not(#cd-state),
    .cd-search-btn:hover:not(:focus-visible):not(#cd-state),
    :is(.fi-fo-rich-editor, .fi-fo-markdown-editor):hover:not(:focus-within):not(#cd-state),
    .fi-fo-file-upload:hover .filepond--panel-root:not(#cd-state),
    .cl-tree-qty:hover:not(:focus, :disabled):not(#cd-state),
    .cl-date-input:hover:not([data-invalid]):not(#cd-state) {
        box-shadow: var(--cd-field-ring-hover) !important;
    }
}

.fi-input-wrp:focus-within:not(#cd-state),
html:not(.cl-pointer) .cd-search-btn:focus-visible:not(#cd-state),
:is(.fi-fo-rich-editor, .fi-fo-markdown-editor):focus-within:not(#cd-state),
.cl-tree-qty:focus:not(#cd-state) {
    outline: none;
    box-shadow: var(--cd-focus-ring) !important;
}

/* Filtre menüsündeki tarih alanı odakta parıltı ve mavi halka ALMAZ: normal çizgide kalır; hatalıyken kırmızı çizgi. */
.cl-date-input[data-invalid]:not(#cd-state) {
    box-shadow: var(--cd-field-ring-invalid) !important;
}

/* Seçim kutusu türü alanlar (Choices, "sayfa başına"; Console Combobox, 2026-10-11 ölçüldü): liste AÇIKKEN ve FAREYLE odaklanınca mavi odak
   halkası YOK — normal çizgi, üzerine gelince %20; halka yalnızca klavyeyle gelinince (html.cl-pointer: son etkileşim fare / dokunma,
   cover-lab-panel.js). Hatalı alanlar kendi kuralını korur (kaydetmeden sonra ilk hatalı alana kırmızı halka). Yazı alanları değişmez. */
:is(html.cl-pointer .fi-input-wrp:has(.choices, select):focus-within, .fi-input-wrp:has(.choices.is-open)):not(.fi-fo-field-wrp:has(.fi-fo-field-wrp-error-message) *):not(#cd-state):not(#cd-select) {
    box-shadow: var(--cd-field-ring) !important;
}

@media (hover: hover) {
    :is(html.cl-pointer .fi-input-wrp:has(.choices, select):focus-within, .fi-input-wrp:has(.choices.is-open)):hover:not(.fi-fo-field-wrp:has(.fi-fo-field-wrp-error-message) *):not(#cd-state):not(#cd-select) {
        box-shadow: var(--cd-field-ring-hover) !important;
    }
}

.fi-fo-field-wrp:has(.fi-fo-field-wrp-error-message) .fi-input-wrp:not(#cd-state) {
    box-shadow: var(--cd-field-ring-invalid) !important;
}

.fi-fo-field-wrp:has(.fi-fo-field-wrp-error-message) .fi-input-wrp:focus-within:not(#cd-state) {
    box-shadow: var(--cd-focus-ring-danger) !important;
}

/* Tablo hücresini dolduran giriş kutuları (Fiyat Kontrol, Ek İskonto…): normalde halkasız; dış gölge komşu hücrelere taşmasın diye odak ve
   hover halkası İÇE çizilir (aynı renkler). */
.fi-ta-cell .fi-input-wrp:focus-within:not(#cd-state):not(#cd-cell) {
    box-shadow: inset 0 0 0 1px var(--cd-fill-accent), inset 0 0 6px 1px var(--cd-focus-glow) !important;
}

/* ---------------------------------------------------------------------------
 * Seçim kutusu (Choices.js): alanla aynı kutu; açılır liste sitenin açılır menüsü; çoklu seçimde değerler nötr çip.
 * ------------------------------------------------------------------------ */
.cd-page .fi-fo-select .choices,
.cd-page .fi-fo-select .choices__inner {
    min-height: calc(var(--cd-field-h) - 2px) !important;
}

.cd-page .fi-fo-select .choices__inner {
    padding-inline: var(--cd-field-px) 36px !important;
    border: 0 !important;
    border-radius: var(--cd-radius) !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-fo-select .choices__placeholder,
.cd-page .fi-fo-select .choices__input::placeholder {
    color: var(--cd-text-muted) !important;
    opacity: 1 !important;
}

.cd-page .fi-fo-select .choices__input {
    background: transparent !important;
    color: var(--cd-text-primary) !important;
    font-size: 14px !important;
}

.cd-page .fi-fo-select .choices[data-type*="select-one"]::after,
.cd-page .fi-fo-select .choices[data-type*="select-multiple"]::after {
    border: 0 !important;
}

/* Choices başlamadan önceki ilk an (kullanıcı bildirimi 2026-10-13, form açılınca kayma): sunucunun çizdiği <select> 36 px yüksek ve farklı iç
   boşlukluydu; Choices onu 32 px'lik kutuyla değiştirince altındaki her şey 4 px yukarı kayıyordu. İlk andan son hâlin ölçüsünde: aynı yükseklik,
   yazı, iç boşluk ve sağda aynı ok (Choices başlayınca select gizlenir, bu kurallar devreden çıkar). */
.cd-page .fi-fo-select .fi-input-wrp-input:has(> select.h-9:not(.choices__input)) {
    position: relative;
}

.cd-page .fi-fo-select select.h-9:not(.choices__input) {
    height: calc(var(--cd-field-h) - 2px) !important;
    padding: 0 34px 0 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-primary) !important;
    appearance: none;
}

.cd-page .fi-fo-select .fi-input-wrp-input:has(> select.h-9:not(.choices__input))::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    translate: 0 -50%;
    background: var(--cd-text-muted);
    -webkit-mask: var(--cd-chevron) center / contain no-repeat;
    mask: var(--cd-chevron) center / contain no-repeat;
    pointer-events: none;
}

/* Tek seçimli kutuda sağda aşağı ok (referansın Combobox'ı, ölçüldü 2026-10-12: değer soldan 8, ok 16 px soluk, kenara 10): × (seçimi
   temizle) düğmesi olan kutularda ok yok (sağda × durur). Kutu açıkken ok aynı kalır. */
.cd-page .fi-fo-select:has(.choices[data-type*="select-one"]):not(:has(.choices__button)) .choices__inner {
    padding-inline: 8px 34px !important;
}

.cd-page .fi-fo-select .choices[data-type*="select-one"]:not(:has(.choices__button))::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    translate: 0 -50%;
    border: 0 !important;
    background: var(--cd-text-muted);
    -webkit-mask: var(--cd-chevron) center / contain no-repeat;
    mask: var(--cd-chevron) center / contain no-repeat;
    pointer-events: none;
}

.cd-page .fi-fo-select .choices__list--dropdown {
    top: calc(100% + 2px + var(--cd-dropdown-gap)) !important; /* alanın görünen kenarından 6 (Console Combobox); Choices kutusu alandan 2 kısa (--cd-field-h − 2px), üste yaslı */
    padding: 4px !important;
    border: 0 !important;
    border-radius: var(--cd-radius-popover) !important;
    background: var(--cd-surface-popover) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-popover) !important;
    z-index: 50 !important;
}

.cd-page .fi-fo-select .choices__list--dropdown .choices__input {
    /* Referansın Combobox araması: listenin en üstünde kenardan kenara, zeminsiz, altında 1 px çizgi, 8 16. */
    width: calc(100% + 8px) !important;
    margin: -4px -4px 4px !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cd-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cd-page .fi-fo-select .choices__list--dropdown .choices__item {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 4px 12px !important; /* referans: 4 12, en az 32 */
    border-radius: var(--cd-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-fo-select .choices__list--dropdown .choices__item.is-highlighted {
    background: var(--cd-fill-menu-hover) !important;
}

.cd-page .fi-fo-select .choices__list--dropdown .choices__item.is-selected {
    /* Referans: seçili seçeneğin sağında 20 px vurgu renginde tik, yazı normal. */
    position: relative;
    padding-right: 36px !important;
}

.cd-page .fi-fo-select .choices__list--dropdown .choices__item--selectable.is-selected::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: var(--cd-text-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.cd-page .fi-fo-select .choices__list--dropdown .choices__item--disabled {
    color: var(--cd-text-muted) !important;
}

/* Çoklu seçimde seçilen değerler (referansın çipi): 22 yüksek, %5 zemin, köşe 5,5, 12 / 15 500 ikincil, sağda 18 × 18 ×. */
.cd-page .fi-fo-select .choices__list--multiple .choices__item {
    display: inline-flex !important;
    align-items: center;
    height: 22px;
    margin: 2px 4px 2px 0 !important;
    padding: 0 2px 0 8px !important;
    border: 0 !important;
    border-radius: 5.5px !important;
    background: var(--cd-bg-neutral) !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 500 !important;
    color: var(--cd-text-secondary) !important;
}

.cd-page .fi-fo-select .choices__list--multiple .choices__button {
    margin-left: 4px !important;
    padding-left: 0 !important;
    border: 0 !important;
    background-color: var(--cd-text-muted) !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    opacity: 1 !important;
    width: 18px;
    height: 18px;
    border-radius: 3.5px !important;
}

/* Tek seçimli listede × (seçimi temizle): soluk çizim, kutunun sağındaki kare hücrenin ortasında. */
.cd-page .choices[data-type*="select-one"] .choices__button {
    background-color: var(--cd-text-muted) !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.14' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.14' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    opacity: 1 !important;
}

/* Filtre menüsündeki alanlar: aynı alan, küçük hâli (32 px; sitenin kontrol yüksekliği). */
.cd-page .fi-ta-filters {
    --cd-field-h: var(--cd-control-h);
    --cd-field-px: 10px;
}

.cd-page .fi-ta-filters .fi-input-wrp,
.cd-page .fi-ta-filters .fi-fo-select .choices,
.cd-page .fi-ta-filters .fi-fo-select .choices__inner {
    min-height: var(--cd-field-h) !important;
    height: auto !important;
}

.cd-page .fi-ta-filters :is(.fi-input, .fi-select-input, .fi-fo-select .choices__input) {
    height: auto !important;
    padding-block: 6px !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.cd-page .fi-ta-filters select.fi-select-input,
.cd-page .fi-ta-filters .fi-fo-select .choices__list--single .choices__item {
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-ta-filters select.fi-select-input:has(option[value=""]:checked) {
    color: var(--cd-text-muted) !important;
}

.cd-page .fi-ta-filters .fi-fo-select .choices__inner:has(.choices__list--multiple .choices__item) {
    gap: 4px;
    padding-block: 4px !important;
}

/* ---------------------------------------------------------------------------
 * Onay kutusu ve radyo (§6.13): 18 × 18, köşe 5 (radyo yuvarlak); boşken alan zemini + güçlü halka; işaretliyken vurgu mavisi + beyaz tik.
 * (Sitenin dili: eski "tiksiz yeşil kutu" kararının yerine geçer.)
 * ------------------------------------------------------------------------ */
.cd-page :is(.fi-checkbox-input, .fi-radio-input) {
    /* Referansın md onay kutusu / radyosu: 20 × 20, zeminsiz, 1 px %20 kenar (üzerinde %40); tik 16, radyo noktası 10. */
    width: 20px !important;
    height: 20px !important;
    margin-top: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--cd-border-strong) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    cursor: var(--cd-cursor-interactive);
}

.cd-page .fi-checkbox-input {
    border-radius: 5px !important;
}

.cd-page .fi-radio-input {
    border-radius: 9999px !important;
}

.cd-page .fi-checkbox-input:checked {
    background: var(--cd-fill-accent) var(--cd-check) center / 16px 16px no-repeat !important;
    box-shadow: none !important;
}

.cd-page .fi-checkbox-input:indeterminate {
    background: var(--cd-fill-accent) var(--cd-dash) center / 16px 16px no-repeat !important;
    box-shadow: none !important;
}

.cd-page .fi-radio-input:checked {
    background: var(--cd-fill-accent) radial-gradient(circle, #FFFFFF 0 5px, transparent 5.5px) !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    .cd-page :is(.fi-checkbox-input, .fi-radio-input):not(:checked, :disabled):hover {
        box-shadow: inset 0 0 0 1px var(--cd-border-stronger) !important;
    }
}

/* Onay kutusu → yazı 8, yazı 14 / 20 (referans). */
.cd-page label.fi-fo-checkbox-list-option-label {
    column-gap: 8px !important;
    align-items: flex-start;
}

.cd-page label.fi-fo-checkbox-list-option-label > .grid {
    line-height: 20px !important;
}

html:not(.cl-pointer) .cd-page :is(.fi-checkbox-input, .fi-radio-input):focus-visible {
    box-shadow: var(--cd-focus-ring) !important;
}

/* Kapalı onay kutusu / radyo ve yazısı soluk (%40; kapalı düğme ve segment seçiciyle aynı), ör. rol sayfasında sabit rollerin portal tikleri
. İmleç kapalı denetimlerin genel kuralından (ok) gelir. */
.cd-page label:has(> :is(.fi-checkbox-input, .fi-radio-input):disabled) {
    opacity: 0.4;
}

.cd-page .fi-checkbox-input:checked:disabled {
    background: var(--cd-fill-accent) var(--cd-check) center / 16px 16px no-repeat !important;
}

/* Anahtar (Filament Toggle; portalda şu an kullanılmıyor, eklenirse sitenin anahtarı §6.4): iz 32,4 × 18, topuz 14, açıkken vurgu mavisi. */
.cd-page .fi-fo-toggle {
    width: 32.4px !important;
    height: 18px !important;
    padding: 2px;
    border-radius: 9999px !important;
    background: var(--cd-switch-track) !important;
    box-shadow: none !important;
}

.cd-page .fi-fo-toggle.fi-color-primary,
.cd-page .fi-fo-toggle[aria-checked="true"] {
    background: var(--cd-fill-accent) !important;
}

/* ---------------------------------------------------------------------------
 * Segment seçici (Console §5.9, Playground "Form | Code"; Aktif | Pasif, Tümü | Sadece Fiyat): iz %5 zemin, 32 px, köşe 8, iç boşluk 1;
 * seçenek köşe 6, iç boşluk 0 12, 14 / 20; seçili seçenek "başparmak" zemini (açıkta beyaz + halka, koyuda %10) ve birincil yazı;
 * seçili olmayan ikincil yazı.
 * Olumsuz seçenek (Pasif) seçiliyken yazısı sitenin kırmızısı (kullanıcı kararı 2026-10-10'un yeni temadaki karşılığı).
 * ------------------------------------------------------------------------ */
.cd-page .cl-segmented {
    display: flex;
    width: max-content;
    align-items: stretch;
    gap: 1px;
    box-sizing: border-box;
    height: var(--cd-seg-h);
    padding: 1px;
    border: 0;
    border-radius: var(--cd-radius);
    background: var(--cd-seg-track);
}

.cd-page .cl-segmented-option {
    position: relative;
    display: flex;
}

.cd-page .cl-segmented-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cd-page .cl-segmented-option > span {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 7px; /* referans: iz köşesi (8) − 1 */
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-secondary);
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out), color var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .cl-segmented-option > span:hover {
    color: var(--cd-text-primary);
}

/* Kayan başparmak (cover-lab-panel.js; referansın SegmentedControl'ü): izin içinde, seçili seçeneğin altında; yer ve genişlik 200 ms
   cubic-bezier(.165, .84, .44, 1). Betik çalışınca (.cl-seg-js) seçili seçeneğin kendi zemini kalkar, başparmak çizer. */
/* Kayan başparmak üç tür izde ortak: yazılı .cl-segmented, ikonlu .cl-icon-seg, Profil › Görünüm .cl-theme-seg. */
.cd-page .cl-segmented,
.cd-page .cl-icon-seg,
.cl-theme-seg {
    position: relative;
}

.cl-seg-thumb {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    z-index: 0;
    border-radius: 7px;
    background: var(--cd-seg-thumb);
    box-shadow: inset 0 0 0 1px var(--cd-seg-thumb-ring), 0 1px 2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms cubic-bezier(0.165, 0.84, 0.44, 1), width 200ms cubic-bezier(0.165, 0.84, 0.44, 1),
        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cd-page .cl-seg-js .cl-segmented-option,
.cd-page .cl-icon-seg.cl-seg-js .cl-icon-seg-option,
.cl-theme-seg.cl-seg-js button {
    position: relative;
    z-index: 1;
}

.cd-page .cl-seg-js .cl-segmented-input:checked + span,
.cd-page .cl-icon-seg.cl-seg-js .cl-icon-seg-input:checked + .cl-icon-seg-thumb,
.cl-theme-seg.cl-seg-js button[aria-checked="true"] {
    background: transparent !important;
    box-shadow: none !important;
}

/* Klavye odağı başparmağın üstünde de görünsün. */
html:not(.cl-pointer) .cl-theme-seg.cl-seg-js button:focus-visible,
html:not(.cl-pointer) .cd-page .cl-icon-seg.cl-seg-js .cl-icon-seg-input:focus-visible + .cl-icon-seg-thumb {
    box-shadow: var(--cd-focus-ring) !important;
}

.cd-page .cl-segmented-input:checked + span {
    background: var(--cd-seg-thumb);
    /* Referansın başparmağı (ölçüldü 2026-10-13): içte 1 px %10 çerçeve + 0 1px 2px %5 gölge, iki modda. */
    box-shadow: inset 0 0 0 1px var(--cd-seg-thumb-ring), 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--cd-text-primary);
}

.cd-page .cl-segmented-input--negative:checked + span {
    color: var(--cd-text-danger);
}

html:not(.cl-pointer) .cd-page .cl-segmented-input:focus-visible + span {
    box-shadow: var(--cd-focus-ring);
}

.cd-page .cl-segmented-input:disabled + span {
    cursor: default;
    opacity: 0.4;
}

/* ---------------------------------------------------------------------------
 * Etiketler (§6.12 + §2.3; kullanıcı kararı 2026-10-10: sitenin renk sistemi): tonlu zemin + aynı tonda yazı, çerçevesiz, köşe 5, 12 / 16 500;
 * küçük harf kuralı sürer (paketleme etiketleri hariç). Tür → renk: ana parça yeşil, yardımcı sarı, referans turuncu, SinglePack camgöbeği,
 * MultiPack pembe, diğer paketleme gri; rol / müşteri grubu / ödeme şekli kendi seçilen renginde (App\Support\RoleColors).
 * ------------------------------------------------------------------------ */
.cl-tag {
    display: inline-flex;
    align-items: center;
    height: 20px; /* referansın Badge sm'i: 20, 0 8, köşe 5, 12 / 15 500 */
    padding: 0 8px;
    border: 0;
    border-radius: 5px;
    background: var(--cl-tag-bg, var(--cd-tint-gray-bg));
    color: var(--cl-tag-fg, var(--cd-tint-gray-fg));
    font-family: var(--cd-font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-transform: lowercase;
    white-space: nowrap;
}

.cl-tag--single,
.cl-tag--multi,
.cl-tag--pack {
    text-transform: none;
}

.cl-tag--role-red { --cl-tag-bg: var(--cd-tint-red-bg); --cl-tag-fg: var(--cd-tint-red-fg); }
.cl-tag--role-orange, .cl-tag--reference { --cl-tag-bg: var(--cd-tint-orange-bg); --cl-tag-fg: var(--cd-tint-orange-fg); }
.cl-tag--role-yellow, .cl-tag--auxiliary { --cl-tag-bg: var(--cd-tint-yellow-bg); --cl-tag-fg: var(--cd-tint-yellow-fg); }
.cl-tag--role-green, .cl-tag--main { --cl-tag-bg: var(--cd-tint-green-bg); --cl-tag-fg: var(--cd-tint-green-fg); }
.cl-tag--role-cyan, .cl-tag--multi { --cl-tag-bg: var(--cd-tint-aqua-bg); --cl-tag-fg: var(--cd-tint-aqua-fg); } /* MultiPack su yeşili, SinglePack pembe (kullanıcı kararı 2026-11-05; önce tersiydi) */
.cl-tag--role-blue { --cl-tag-bg: var(--cd-tint-blue-bg); --cl-tag-fg: var(--cd-tint-blue-fg); }
.cl-tag--role-lavender { --cl-tag-bg: var(--cd-tint-violet-bg); --cl-tag-fg: var(--cd-tint-violet-fg); }
.cl-tag--role-pink, .cl-tag--single { --cl-tag-bg: var(--cd-tint-magenta-bg); --cl-tag-fg: var(--cd-tint-magenta-fg); }
.cl-tag--role-gray, .cl-tag--pack { --cl-tag-bg: var(--cd-tint-gray-bg); --cl-tag-fg: var(--cd-tint-gray-fg); }

/* Filament rozetleri: referansın Badge sm'i (20 yüksek, 0 8, köşe 5, 12 / 15 500, tonlu zemin). */
.cd-page .fi-badge {
    min-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 5px !important;
    background: var(--cd-tint-gray-bg) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    color: var(--cd-tint-gray-fg) !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 500 !important;
}

.cd-page .fi-badge * {
    color: inherit !important;
}

.cd-page .fi-badge.fi-color-success { background: var(--cd-tint-green-bg) !important; color: var(--cd-tint-green-fg) !important; }
.cd-page .fi-badge.fi-color-danger { background: var(--cd-tint-red-bg) !important; color: var(--cd-tint-red-fg) !important; }
.cd-page .fi-badge.fi-color-warning { background: var(--cd-tint-yellow-bg) !important; color: var(--cd-tint-yellow-fg) !important; }
.cd-page .fi-badge:is(.fi-color-info, .fi-color-primary) { background: var(--cd-tint-blue-bg) !important; color: var(--cd-tint-blue-fg) !important; }

/* ---------------------------------------------------------------------------
 * Kartlar ve bölümler (§6.10): zeminsiz, 1 px halka, köşe 12. Bölüm başlığı 15 / 20 500 birincil (alt çizgi yok), açıklama 13 soluk.
 * Popup ve bölüm başlıkları cümle düzeninde; sayfa başlıkları menüdeki adla birebir.
 * ------------------------------------------------------------------------ */
.cd-page :is(.fi-section, .fi-wi-stats-overview-stat, .fi-fo-tabs, .fi-in-tabs, .fi-fo-repeater-item) {
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px var(--cd-border) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* Zeminsiz bölümler (rol popup'ının üst satırı ve izin bölümleri; kullanıcı kararları 2026-10-09): çerçeve yok. */
.cd-page :is(.cl-modal-role .fi-section, .fi-section.cl-section-plain) {
    box-shadow: none !important;
    border-radius: 0 !important;
}

.cd-page :is(.fi-section-content-ctn, .fi-section-header, .fi-section-footer) {
    border-color: var(--cd-border) !important;
}

.cd-page .fi-section-header-heading {
    padding: 0 !important;
    font-family: var(--cd-font-sans);
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-section-header-heading::after {
    content: none !important;
}

.cd-page .fi-section-header-description {
    font-size: 13px !important;
    color: var(--cd-text-muted) !important;
}

.cd-page :is(.fi-modal-heading, .fi-section-header-heading) {
    text-transform: lowercase;
}

.cd-page :is(.fi-modal-heading, .fi-section-header-heading)::first-letter {
    text-transform: uppercase;
}

/* Başlıkta geçen kayıt adı (kişi / firma / ürün kodu) yazıldığı gibi kalır (kullanıcı kararı 2026-10-17; RecordStatus::headingWithName). */
.cd-page :is(.fi-modal-heading, .fi-section-header-heading) .cl-keep-case {
    text-transform: none;
}

.cd-page .fi-btn-label,
.cd-page .fi-ac-link-action span {
    display: inline-block;
}

.cd-page .fi-btn-label::first-letter {
    text-transform: uppercase;
}

/* Gösterge kartları: iç boşluk 16; etiket 14 soluk, değer 32 / 40 (Inter, büyük boyutta Inter Display), açıklama 13 soluk. */
.cd-page .fi-wi-stats-overview-stat {
    padding: 16px !important;
}

/* Geride kalan KolayBi senkronu (kullanıcı kararı 2026-10-25; App\Filament\Widgets\AdminOverview): değer ve açıklama tehlike kırmızısı.
   Tam yetkiliye kart Hata Kayıtları'nı açan bağlantıdır; klavye odağında odak halkası. */

html:not(.cl-pointer) .cd-page a.fi-wi-stats-overview-stat:focus-visible {
    outline: 0;
    box-shadow: var(--cd-focus-ring) !important;
}

.cd-page .fi-wi-stats-overview-stat-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--cd-text-muted) !important;
}

.cd-page .fi-wi-stats-overview-stat-value {
    font-family: var(--cd-font-sans);
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-wi-stats-overview-stat-description {
    font-size: 13px !important;
    color: var(--cd-text-muted) !important;
}

/* Sekmeler (§6.3): 28 px, iç boşluk 0 10, 14 / 20 500; seçili birincil yazı + %8 / %5 hap zemin (köşe 7); seçili olmayan soluk. */
.cd-page .fi-tabs {
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cd-page .fi-tabs-item {
    height: var(--cd-control-h-sm);
    padding: 0 10px !important;
    border-radius: var(--cd-radius-sm) !important;
    background: transparent !important;
    color: var(--cd-text-muted) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.cd-page .fi-tabs-item:hover {
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-tabs-item.fi-active {
    background: var(--cd-fill-menu-hover) !important;
    color: var(--cd-text-primary) !important;
    box-shadow: none !important;
}

.cd-page :is(.fi-tabs-item-label, .fi-tabs-item-icon) {
    color: inherit !important;
}

/* ---------------------------------------------------------------------------
 * Popup (§6.7; sitenin arama penceresi): yüzen yüzey, köşe 12, 1 px halka + büyük gölge; arka perde koyuda %50, açıkta %40.
 * Genişlik tek ayardan (--cd-modal-w 520; Console Dialog md). İç boşluk referanstaki gibi (2026-10-11): kenarlar 24 (--cd-modal-pad),
 * başlığın üstü 20, başlık → açıklama 4, başlık bloğu → içerik 12 (--cd-modal-gap-head), içerik → düğme satırı 16 (--cd-modal-gap-foot).
 * Başlık 16 / 24 500 birincil, sola yaslı, ikonsuz, alt çizgisiz; × soluk ikon düğme. Düğme satırı SAĞA yaslı, aralar 8 (sitenin pencere düzeni).
 * ------------------------------------------------------------------------ */
.cd-page .fi-modal-window {
    width: 100% !important;
    max-width: var(--cd-modal-w) !important;
    border-radius: var(--cd-radius-popover) !important;
    background: var(--cd-surface-popover) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-lg) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* Sayfa yenilemeden geçişte ilerleme çubuğu YOK (kullanıcı kararı 2026-10-16; referansta gezinme göstergesi yok, ölçüldü). Livewire'ın
   `navigate.show_progress_bar = false` ayarı Livewire 3.8.9'da betiği çökertiyor ("Alpine is not defined"; Livewire hiç başlamıyor), bu yüzden
   çubuk burada gizlenir. */
#nprogress {
    display: none !important;
}

/* "Kaydedilmemiş değişiklikler" penceresi (kullanıcı kararı 2026-10-16; referansın "Unsaved changes" AlertDialog'u ölçüldü: 400 geniş, başlık
   15 / 500, altında açıklama, sağa yaslı ikincil "Kal" (açılınca odakta) + tehlike "Ayrıl", arka plan karartılı; cover-lab-panel.js). Yüzey
   popup'larla aynı (popover zemini, köşe, halka + gölge). Sayfa yenilemeden geçişte kaydedilmemiş form varken açılır. */
.cl-leave {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cl-leave-backdrop {
    position: absolute;
    inset: 0;
    background: var(--cd-backdrop);
}

.cl-leave-dialog {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    border-radius: var(--cd-radius-popover);
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-lg);
    --cd-focus-inset: var(--cd-surface-popover);
}

.cl-leave-title {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-leave-body {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cl-leave-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* Popup × düğmesi (Console Dialog'un Close düğmesi; kullanıcı isteği 2026-10-11): 32 × 32 hayalet düğme, köşe 8, popup'ın üst ve sağ kenarından
   16 (Filament'in kabı 16 içeride; düğmenin -6 kenar boşluğu kaldırılır), ikon 20 px BİRİNCİL renkte (soluk değil); üzerine gelince hayalet zemin. */
.cd-page .fi-modal-close-btn {
    width: var(--cl-modal-close-size) !important;
    height: var(--cl-modal-close-size) !important;
    margin: 0 !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-modal-close-btn svg {
    width: var(--cd-icon) !important;
    height: var(--cd-icon) !important;
}

.cd-page .fi-modal-close-overlay {
    background: var(--cd-backdrop) !important;
}

.cd-page .fi-modal-header {
    align-items: flex-start !important;
    padding: calc(var(--cd-modal-pad) - 4px) var(--cd-modal-pad) 0 !important; /* başlık üstten 20 (Console: p-xl 24, başlık -mt-1) */
}

.cd-page .fi-modal-header:last-child {
    padding-bottom: var(--cd-modal-pad) !important;
}

.cd-page .fi-modal-header > div:has(.fi-modal-icon) {
    display: none !important;
}

.cd-page .fi-modal-header .text-center {
    text-align: left !important;
}

.cd-page .fi-modal-heading {
    margin-inline-start: 0 !important; /* onay pencerelerinde Filament × için iki yana 24 verir; başlık açıklamayla aynı hizadan başlar (sağdaki kalır) */
    padding: 0 !important;
    font-family: var(--cd-font-sans);
    font-size: 22px !important;   /* Console Dialog başlığı (text-title font-semibold): 22 / 28 580 (kullanıcı isteği 2026-10-11; önce 16 / 24 500) */
    line-height: 28px !important;
    font-weight: 580 !important;
    letter-spacing: 0 !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .fi-modal-heading::after {
    content: none !important;
}

/* Onay penceresi (referansın ConfirmationDialog'u; Filament'te onaylı eylemlerin başlığı ortalı, .fi-modal-header.flex-col): başlık 15 / 20 500,
   × yok (Esc ve İptal kapatır); açılınca odak onay düğmesinde (cover-lab-panel.js "ONAY PENCERESİ"). */
.cd-page .fi-modal-window:has(> .fi-modal-header.flex-col) .fi-modal-heading {
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.cd-page .fi-modal-window:has(> .fi-modal-header.flex-col) .fi-modal-close-btn {
    display: none !important;
}

.cd-page .fi-modal-description {
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-secondary) !important;
    margin-top: 4px !important; /* Console: başlık ile açıklama arası 4 (gap-1) */
}

.cd-page .fi-modal-content {
    padding: var(--cd-modal-gap-head) var(--cd-modal-pad) var(--cd-modal-gap-foot) !important;
}

.cd-page .fi-modal-content:first-child {
    padding-top: var(--cd-modal-pad) !important;
}

.cd-page .fi-modal-content:last-child {
    padding-bottom: var(--cd-modal-pad) !important;
}

.cd-page .fi-modal-footer {
    margin-top: 0 !important;
    padding: 0 var(--cd-modal-pad) var(--cd-modal-pad) !important;
}

.cd-page .fi-modal-header + .fi-modal-footer {
    padding-top: var(--cd-modal-gap-foot) !important;
}

.cd-page .fi-modal-footer-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100%;
}

.cd-page .fi-modal-footer-actions .fi-btn {
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Ortalanmamış pencerelerde (yeni yetkili kişi, kategoriyi değiştir, duyuru: Filament'te sıra asıl, İptal) referansın sırası: solda İptal,
   en sağda asıl düğme (site haritası 2026-11-05; Create API key: Cancel · Add). Onay pencereleri Filament'te zaten İptal, asıl sırasında. */
.cd-page .fi-modal-footer-actions:not(.flex-col-reverse) {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

/* Açılır menü öğeleri ikonsuz, yalnızca yazı. İSTİSNA: tablo satırının ⋮ menüsü Console'daki gibi ikonludur
   (Düzenle, Geçmiş; kullanıcı kararı 2026-10-10); yan panellerin ⋮ menüleri de (Hızlı bakış, İşlem Kayıtları; kullanıcı bildirimi 2026-10-17). */
.cd-page :is(.fi-dropdown-list-item-icon, .fi-dropdown-list-item > svg) {
    display: none !important;
}

/* Kayıt sayfasının başlığındaki ⋮ de ikonlu (referansın "More actions"ı; kullanıcı bildirimi 2026-11-05). */
.cd-page :is(tbody, .cl-detail-menu, .cl-record-head-actions, .cl-receipt-done__head-actions) .fi-dropdown-list-item-icon:not(.animate-spin) {
    display: block !important;
}

/* Yüzen yüzeyler: tarih seçici paneli ve bildirimler sitenin açılır yüzeyi. */
.cd-page .fi-fo-date-time-picker-panel,
.fi-no-notification {
    border-radius: var(--cd-radius-popover) !important;
    background: var(--cd-surface-popover) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-lg) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* BİLDİRİM (TOAST; referansın Toast'ı): sağ altta kenarlardan 16, 360 geniş, popover zemini, köşe 12, 12 16, ikon 20 ikincil + 12,
   başlık 14 / 20 500, açıklama 13 / 17 ikincil, kapat 24 (ikon 16 soluk). Uyarı / hata tonlu zeminle. */
.fi-no {
    inset: 16px !important;
}

.fi-no-notification {
    width: 360px !important;
    max-width: 100% !important;
}

.fi-no-notification > div {
    gap: 12px !important;
    padding: 12px 16px !important;
    background: transparent !important;
    font-family: var(--cd-font-sans);
}

.fi-no-notification > div > svg,
.fi-no-notification .fi-no-notification-icon {
    flex: none;
    width: 20px !important;
    height: 20px !important;
    color: var(--cd-text-secondary) !important;
}

.fi-no-notification > div > .grid {
    margin-top: 0 !important;
}

.fi-no-notification-title {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--cd-text-primary) !important;
}

.fi-no-notification-body {
    margin-top: 2px !important;
    font-size: 13px !important;
    line-height: 17px !important;
    color: var(--cd-text-secondary) !important;
}

.fi-no-notification-close-btn {
    width: 24px !important;
    height: 24px !important;
    margin: -2px -4px 0 0;
    border-radius: 8px !important;
    color: var(--cd-text-muted) !important;
}

.fi-no-notification-close-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.fi-no-notification.fi-status-warning {
    background: var(--cd-tint-yellow-bg) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border-warning), var(--cd-shadow-lg) !important;
}

.fi-no-notification.fi-status-danger {
    background: var(--cd-tint-red-bg) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border-danger), var(--cd-shadow-lg) !important;
}

.fi-no-notification:is(.fi-status-warning, .fi-status-danger) :is(.fi-no-notification-title, .fi-no-notification-body, svg) {
    color: inherit !important;
}

.fi-no-notification.fi-status-warning { color: var(--cd-tint-yellow-fg); }
.fi-no-notification.fi-status-danger { color: var(--cd-text-danger); }

/* ---------------------------------------------------------------------------
 * Kayıt geçmişi (Geçmiş popup'ı): her olay nötr kart (%5 zemin, köşe 8, iç boşluk 10 14); soluk üst bilgi.
 * ------------------------------------------------------------------------ */
.cd-page .cl-history {
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
}

/* ---------------------------------------------------------------------------
 * Ürün ağacı kurucusu (sürükle-bırak): parça kartları nötr kart (köşe 8), hover hayalet-seçili; bırakma alanı kesik çizgili (köşe 12),
 * üzerine gelince vurgu mavisi çizgi; miktar kutusu küçük alan (28 px, köşe 6).
 * ------------------------------------------------------------------------ */
.cd-page .cl-tree-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cd-page :is(.cl-tree-list, .cl-tree-box) {
    gap: 6px;
}

/* Alanlar kesikli çerçeveli (kullanıcı kararı 2026-10-13; önce yalnızca bırakma alanı); ürün ağacı tarafı iki ayrı kutu (2026-10-15). */
.cd-page :is(.cl-tree-list, .cl-tree-box) {
    padding: 6px;
    border: 1px dashed var(--cd-border-strong);
    border-radius: 12px;
}

.cd-page .cl-tree-card {
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--cd-radius);
    background: var(--cd-bg-neutral);
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
}

.cd-page .cl-tree-card:hover {
    background: var(--cd-fill-ghost-selected);
}

.cd-page :is(.cl-tree-supplier, .cl-tree-price) {
    color: var(--cd-text-muted);
}

.cd-page .cl-tree-qty {
    height: var(--cd-control-h-sm);
    padding: 0 8px;
    border-radius: 6px;
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
}

.cd-page .cl-tree-qty::placeholder {
    color: var(--cd-text-muted);
}

/* ============================================================================
 * 13. GİRİŞ EKRANLARI (şifresiz giriş ve bağlantı sayfası; admin ve B2B). Referans platform.claude.com/login; tüm ölçüler orada tarayıcıda
 *     ölçüldü (1440 × 900, 800 ve 375 px; docs/theme-claude-platform.md §13):
 *     - Üst şerit sabit, sayfa zemininde, 72 px (≥ 1104 px'te 84): solda ürün adı yazısı ("Cover Lab Portal", 22 / 22 500, dikey ortada),
 *       sağda bağlantılar (32 px hayalet düğme 14 / 20, köşe 8, iç boşluk 0 12, aralar 24; sonuncusu ikincil %10 dolgulu); hayalet bağlantı
 *       < 1000 px'te, ikincil < 640 px'te gizlenir. Yan kenar boşluğu `--cd-auth-gutter`.
 *     - Şeridin altındaki alan: 14 px aralıklı noktalı desen (ortada elipsle kaybolur); içerik bu alanda dikey ortada (iç boşluk 32 / 24).
 *     - Başlık 36 / 40 500 (< 500 px: 22 / 28), en fazla 20 karakter genişliğinde, satırlar dengeli; altında 12 px arayla açıklama 14 / 20 ikincil;
 *       başlık bloğu ile kart arası 40.
 *     - Kart 448 px, köşe 32, iç boşluk 24, 1 px çerçeve, büyük gölge, öğeler arası 16; alanlar 40 px köşe 10, 15 / 22, iç boşluk 0 16, İKONSUZ;
 *       odakta Console'un odak halkası (1 px mavi + 6 px parıltı); düğme tam genişlik dolu birincil (40 px, köşe 10, 15 / 22 500);
 *       dipnot kartın içinde en altta 13 / 17 soluk, ortalı.
 * ========================================================================== */
html:has(.fi-simple-layout) {
    background: var(--cd-page-bg) !important;
}

html:has(.fi-simple-layout) body {
    background: transparent !important;
}

.fi-simple-layout {
    position: relative;
    min-height: 100vh;
    background: var(--cd-page-bg) !important;
    color: var(--cd-text-primary) !important;
    font-family: var(--cd-font-sans) !important;
}

@media (min-width: 1104px) {
    :root {
        --cd-auth-bar-h: 84px;
    }
}

/* Noktalı desen: üst şerit ile seri şeridi arasındaki alanda (referanstaki gibi; seri şeridinin arkasında desen yok). */
.fi-simple-layout .fi-simple-main-ctn {
    position: relative;
}

.fi-simple-layout .fi-simple-main-ctn::before {
    content: "";
    position: absolute;
    inset: var(--cd-auth-bar-h) 0 0;
    z-index: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--cd-text-muted) 30%, transparent) 1px, transparent 1.2px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(65% 55% at 50% 45%, transparent 15%, #000 85%);
    mask-image: radial-gradient(65% 55% at 50% 45%, transparent 15%, #000 85%);
    pointer-events: none;
}

/* Üst şerit (AuthScreens::bodyEnd): sabit, sayfa zemininde; sağda bağlantılar. Ürün adı yazısı Filament'in .fi-logo'sudur (aşağıda). */
.cl-auth-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2; /* içeriğin ve footer'ın üstünde (kaydırınca altından geçerler; referanstaki gibi), ürün adı yazısının (.cl-auth-home, 3) altında */
    height: var(--cd-auth-bar-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 0 var(--cd-auth-bar-inset);
    background: var(--cd-page-bg);
}

.cl-auth-bar a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--cd-radius);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cd-dur-fast) var(--cd-ease-in-out);
}

.cl-auth-bar a:hover {
    background: var(--cd-fill-ghost-hover);
}

/* Üst şeritteki slogan: coverlab.com.tr'nin başlığındaki gibi iki satır ("work safe," / "feel comfortable"),
   orijinal Inter İtalik 400, sola yaslı, satırlar arası boşluksuz, şeridin dikey ortasında; yazı "Bize ulaşın" ile aynı 14 / 20; renk birincil
   (sitede mor zeminde beyaz). Dar ekranda (< 1000) gizli, slogan serilerin üstünde görünür. */
.cl-auth-bar .cl-auth-slogan--bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;   /* "Bize ulaşın" düğmesiyle aynı yazı ölçüsü (kullanıcı kararı 2026-10-11; sitede 17 / 22) */
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
}

.cl-auth-bar .cl-auth-slogan--bar span {
    display: block;
}

.cl-auth-bar a.cl-auth-bar-secondary {
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
}

.cl-auth-bar a.cl-auth-bar-secondary:hover {
    background: var(--cd-fill-secondary-hover);
}

html:not(.cl-pointer) .cl-auth-bar a:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

/* Telefonda (< 640) slogan YOK, üst şeritte yalnızca "Bize ulaşın": 375 px'te ürün adı ile düğme arasında
   51 px kalır, iki satırlık slogan (109) sığmaz. 640 px ve üstünde slogan şeritte düğmenin yanında. */
@media (max-width: 639px) {
    .cl-auth-bar .cl-auth-slogan--bar {
        display: none;
    }

    /* Telefonda "Bize ulaşın"ın sağ boşluğu üst / alt boşluğuna eşit: (şerit 72 − düğme 32) / 2 = 20. */
    .cl-auth-bar {
        padding-right: calc((var(--cd-auth-bar-h) - 32px) / 2);
    }
}

/* İçerik: şeridin altındaki alanda dikey ortada. */
.fi-simple-layout .fi-simple-main-ctn {
    padding-top: var(--cd-auth-bar-h);
}

/* Seri şeridi (AuthScreens::footer): dikey iç boşluk 48 (referanstaki logo şeridi); üstte slogan, altında seri adları. Seri adları coverlab.com.tr'deki
   gibi italik 600, seri renginde (`--cl-series-*`), ŞERİTSİZ (renkli şerit denendi, kullanıcı kararıyla kaldırıldı 2026-10-10), yuvanın ortasında.
   Ölçüler tek değerden orantılı (kullanıcı kararı): `--cl-series-band-h` yuva yüksekliği 45 (36'dan büyütüldü, kullanıcı kararı) → yazı h × 2/3 = 30, yuva genişliği h × 413/60 ≈ 310
   (coverlab.com.tr'deki seri başlığının oranı). Üzerine gelince yuva hafif zemin alır. */
.cl-auth-series {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    /* Referanstaki logo şeridi gibi tam 196 yüksek, üstten 48: böylece noktalı desen alanı referansla birebir (1440 × 900'de 84 → 704).
       Seriler şeridin dikey ortasında; footer şeridin hemen altında başlar. */
    height: var(--cd-auth-strip-h);
    padding: 48px var(--cd-auth-gutter) 0;
}

/* Tablet ve geniş ekranda (≥ 768; tablet kullanıcı kararı 2026-10-11, önce ≥ 1100) seriler yan yana, şeridin (196) DİKEY ORTASINDA. */
@media (min-width: 768px) {
    .cl-auth-series {
        justify-content: center;
        padding-top: 0;
    }
}

/* Telefonda (< 768) üç seri alt alta, şerit içeriğine göre uzar. */
@media (max-width: 767px) {
    .cl-auth-series {
        height: auto;
        padding-bottom: 48px;
    }
}

/* Telefon (< 768): referanstaki gibi desen alanı ekranın tamamı (üst şerit hariç), seri şeridi aşağı kaydırınca görünür. */
@media (max-width: 767px) {
    .fi-simple-layout .fi-simple-main-ctn {
        min-height: 100svh;
    }

    .cl-auth-series {
        height: auto;
        padding-bottom: 48px; /* referanstaki şerit gibi; Aveco logosu artık footer'da */
    }
}

/* Slogan: coverlab.com.tr'deki gibi küçük harf, orijinal Inter İtalik 400, birincil; yalnızca üst şeritte
   (.cl-auth-slogan--bar, ölçüsü orada), telefonda yok (2026-10-11; serilerin üstündeki slogan kaldırıldı). */
.cl-auth-slogan {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    font-style: italic;
    font-synthesis: none;
    text-align: center;
    color: var(--cd-text-primary);
}
/* ---------------------------------------------------------------------------
 * FOOTER (AuthScreens::siteFooter; kullanıcı kararı 2026-10-11): platform.claude.com/login'deki footer'ın küçük hâli. Giriş ekranı ve seri
 * şeridi ekranı doldurur, footer onların altında başlar (kaydırınca görünür; üst şerit referanstaki gibi sabit kalır). Referanstan ölçüldü:
 * zemin surface-panel (açıkta #FFFFFF, koyuda #1A1A19), üst / alt iç boşluk 64, içerik üst şeritle aynı 1440 çerçevede 12 sütunlu ızgara
 * (aralık 32). Sol sütun (4 sütun) referanstaki gibi: üstte Cover Lab logosu, dibinde Aveco logosu + şirket adı (13 / 19,5 soluk); bağlantı
 * sütunları 5. sütundan sona eşit beş sütun (Ürünler, Belgeler, İletişim, Portal, Politikalar); başlık 11 / 17 500 ikincil, başlıktan
 * bağlantılara 6, bağlantılar 12 px birincil, satır 24. Sitenin sayfaları: AuthScreens::siteLinks (tek liste).
 * ------------------------------------------------------------------------ */
.cl-auth-footer {
    position: relative;
    z-index: 0; /* üst şeridin (2) altında: kaydırınca şeridin altından geçer */
    padding: 64px 0;
    background: var(--cd-surface-panel);
    color: var(--cd-text-primary);
    font-family: var(--cd-font-sans);
}

.cl-auth-footer-inner {
    margin-inline: var(--cd-auth-bar-inset);
}

.cl-auth-footer-top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
}

/* Cover Lab logosu (coverlab.com.tr): açık modda mor + yeşil, koyu modda beyaz + yeşil (cover-lab-wordmark-on-light / -on-dark.png, 500 × 264,
   saydam payı yok); 64,4 genişlik (kullanıcı kararları 2026-10-11: 80 → %30 küçük 56 → %15 büyük 64,4). Görünüm değişmez, imleç el, klavye odağında odak halkası; yazısız olduğu için adı ipucuyla çıkar. */
.cl-auth-footer-brand {
    grid-column: 1 / span 4;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

.cl-auth-site {
    display: block;
    width: 64.4px;
    line-height: 0;
    cursor: pointer;
}

.cl-auth-site-logo {
    display: block;
    width: 100%;
    height: auto;
}

.cl-auth-site-logo--dark,
:root.dark .cl-auth-site-logo--light {
    display: none;
}

:root.dark .cl-auth-site-logo--dark {
    display: block;
}

html:not(.cl-pointer) .cl-auth-site:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: var(--cd-focus-ring);
}

.cl-auth-footer-cols {
    grid-column: 5 / span 8;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* Ürünler, Belgeler, İletişim, Portal, Politikalar */
    gap: 32px;
}

.cl-auth-footer-col h3 {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-secondary);
}

.cl-auth-footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-auth-footer a {
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
}

.cl-auth-footer-col a {
    display: inline-block;
    font-size: 12px;
    line-height: 24px;
}

/* Referanstaki gibi (Console .footer-column, 2026-10-11 ölçüldü): bir listede bir bağlantının üzerine gelince aynı listedeki DİĞER bağlantılar
   soluklaşır (text-muted), üzerine gelinen birincil kalır; alt çizgi yok, geçiş anında. */
.cl-auth-footer-col ul:has(a:hover) a:not(:hover) {
    color: var(--cd-text-muted);
}

html:not(.cl-pointer) .cl-auth-footer a:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

/* Sol sütunun dibi (referansta şirket logosu): Aveco logosu ve altında şirket adı. Logo referanstaki şirket logosu yüksekliğinde (14) (kullanıcı
   kararı 2026-10-11). Açık ve koyu modda AYNI logo, renk değiştirilmez: harfler soldan sağa koyudan açığa
   (#3C3C3C → #989898). */
.cl-auth-footer-company {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* logo kendi oranında kalır (gerilmez) */
    gap: 8px;
}

.cl-auth-aveco {
    display: block;
    width: auto;
    height: 14px;
}

.cl-auth-footer-copy {
    margin: 0;
    font-size: 13px;
    line-height: 19.5px;
    color: var(--cd-text-muted);
}

/* Sosyal bağlantılar (referanstaki gibi): 24 × 24 kutuda 16 px soluk ikon, aralar 12; konum referanstaki gibi şirket logosunun altından
   (logonun altı → ikon kutusunun üstü 39; aradaki şirket adı dahil). LinkedIn işareti coverlab.com.tr'deki gibi DOLU (Simple Icons, CC0).
   Üzerine gelince birincil; yazısız ikon olduğu için adı ("LinkedIn") ipucuyla çıkar. */
.cl-auth-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 3.5px;  /* 8 (blok aralığı) + 19,5 (şirket adı) + 8 + 3,5 = logonun altından 39 */
    margin-left: -4px;  /* kutunun iç payı: ikonun görünen sol kenarı yazılarla aynı hizada (referansta da kutu 4 dışarıda) */
}

.cl-auth-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--cd-text-muted);
    transition: color var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-auth-footer-social a:hover {
    color: var(--cd-text-primary);
}

.cl-auth-footer-social-icon {
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
}

@media (max-width: 1023px) {
    /* 12 sütun + 11 × 32 aralık dar ekrana sığmaz (aralıklar tek başına 352): tek sütun, öğeler alt alta. */
    .cl-auth-footer-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-auth-footer-brand,
    .cl-auth-footer-cols {
        grid-column: 1 / -1;
    }

    /* Dar ekranda sol sütun üstte: logo, altında Aveco + şirket adı; sütunlar onun altında. Şirket bloğu sütunların altına iner. */
    .cl-auth-footer-brand {
        display: contents;
    }

    .cl-auth-site {
        grid-column: 1 / -1;
    }

    .cl-auth-footer-company {
        grid-column: 1 / -1;
        order: 2;
        margin-top: 16px;
    }
}

@media (max-width: 639px) {
    .cl-auth-footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

.cl-auth-series-list {
    --cl-series-band-h: 45px;
    display: grid;
    grid-template-columns: repeat(3, calc(var(--cl-series-band-h) * 413 / 60));
    justify-content: center;
    gap: 27px 16px; /* alt alta dizilince satır adımı referansın logo şeridindeki gibi 72 (45 + 27; referans 56 kutu + 16) */
    width: 100%;
}

.cl-auth-series-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--cl-series-band-h);
    border-radius: var(--cd-radius);
    color: var(--cl-series-color);
    font-size: calc(var(--cl-series-band-h) * 2 / 3);
    line-height: 1;
    font-weight: 600;
    font-style: italic;
    font-synthesis: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cd-dur-fast) var(--cd-ease-in-out);
}

.cl-auth-series-item:hover {
    background: var(--cd-fill-ghost-hover);
}

html:not(.cl-pointer) .cl-auth-series-item:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cl-auth-series-asp { --cl-series-color: var(--cl-series-asp); }
.cl-auth-series-chg { --cl-series-color: var(--cl-series-chg); }
.cl-auth-series-cmf { --cl-series-color: var(--cl-series-cmf); }

/* Telefonda (< 768) alt alta. Tablette yan yana ve yazı / yuva yüksekliği MASAÜSTÜYLE AYNI (30 / 45; kullanıcı kararı 2026-10-11): üç 310'luk
   yuva sığmadığında yalnızca yuva GENİŞLİĞİ daralır (en fazla 310, eşit üç sütun); yazı (Chemguard ≈ 165) 768 px'te de yuvaya sığar. */
@media (max-width: 767px) {
    .cl-auth-series-list {
        grid-template-columns: calc(var(--cl-series-band-h) * 413 / 60);
    }
}

@media (min-width: 768px) {
    .cl-auth-series-list {
        grid-template-columns: repeat(3, minmax(0, calc(var(--cl-series-band-h) * 413 / 60)));
    }
}

.fi-simple-layout .fi-simple-main {
    width: 100%;
    max-width: calc(var(--cd-auth-card-w) + 48px) !important;
    margin: 0 !important;
    padding: 32px 24px !important;
    /* Filament'in varsayılan kartı yok: kart, formun kendisidir (aşağıda). */
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-simple-layout .fi-simple-page section.grid {
    gap: 40px !important;
}

.fi-simple-layout .fi-simple-header {
    gap: 12px;
}

/* Logo yok: platform.claude.com/login'deki "Claude Console" gibi üst şeridin solunda ürün adı yazısı
   "Cover Lab Portal" (Filament'in marka adı): 22 / 22 500 birincil (referansın ölçüsü; yazı tipi portalın tek yazı tipi Inter),
   soldan `--cd-auth-bar-inset` (şerit içeriği en fazla 1440, ortalı), şeridin dikey ortasında. Sayfayla kaymaz. */
.fi-simple-layout .fi-logo {
    display: block !important; /* Filament'in flex'i "Admin" çevresindeki boşlukları yutar */
    position: fixed;
    top: calc((var(--cd-auth-bar-h) - 22px) / 2);
    left: var(--cd-auth-bar-inset);
    z-index: 3;
    margin: 0 !important;
    font-family: var(--cd-font-sans) !important;
    font-size: 22px !important;
    line-height: 22px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--cd-text-primary) !important;
    white-space: nowrap;
}

/* Logo bağlantıdır (giriş ekranına döner; header/simple.blade.php): görünüm değişmez, imleç el; klavye odağında odak halkası.
   Tıklanabilir alan referanstaki gibi (`<a class="flex items-center h-[4.5rem] min-[69rem]:h-[5.25rem]">`): logo genişliğinde, üst
   şeridin TAM yüksekliğinde (72; ≥ 1104 px 84 = --cd-auth-bar-h), logo bu alanın dikey ortasında. Konumu bağlantı taşır, logo içinde durur. */
.fi-simple-layout .cl-auth-home {
    position: fixed;
    top: 0;
    left: var(--cd-auth-bar-inset);
    z-index: 3;
    display: flex;
    align-items: center;
    height: var(--cd-auth-bar-h);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.fi-simple-layout .cl-auth-home .fi-logo {
    position: static;
}

html:not(.cl-pointer) .fi-simple-layout .cl-auth-home:focus-visible {
    outline: none;
}

html:not(.cl-pointer) .fi-simple-layout .cl-auth-home:focus-visible .fi-logo {
    border-radius: 6px;
    box-shadow: var(--cd-focus-ring);
}

/* Ürün adı yazısı (giriş ekranları ve kenar menü; kullanıcı kararı 2026-10-10): "Cover Lab Admin Portal" / "Cover Lab B2B Portal"; panel adı
   orijinal Inter İtalik (sahte eğiklik değil; @font-face italik dosyası), admin'de paletin camgöbeği, B2B'de turuncusu. */
/* PORTALIN STANDART LOGOSU = CL logosu + panel adı (kullanıcı kararı 2026-10-11; AuthScreens::wordmark tek kaynak): logo ile yazı birlikte
   yazılmış gibi durur. Logo yüksekliği = yazının büyük harf yüksekliği (Inter cap height 0,7275 em, tarayıcıda ölçüldü; 17 px'te 12,4,
   22 px'te 16), alt kenarı yazının taban çizgisinde (vertical-align: baseline), üstü "A" / "P"nin tepesiyle aynı hizada. Logo ile yazı
   arasında gerçek bir boşluk karakteri var (HTML'de): aralık her boyutta Inter'in o boyuttaki boşluğu; kenar boşluğu verilmez.
   Koyu zeminde açık C'li (`cover-lab-logo-on-dark.png`; C = koyu modun ana yazı rengi #F0EFEC, kullanıcı kararı 2026-10-11), açık zeminde siyah C'li (`cover-lab-logo-on-light.png`; C = açık modun ana yazı rengi #0B0B0B, kullanıcı kararı 2026-10-11); saydam 500 × 389, çizim
   kenarlara dayalı. `.cd-logo img` kuralı (blok, 28 px) bu resmi etkilemesin diye ikinci seçici. */
.cl-wordmark-icon,
.cd-logo img.cl-wordmark-icon {
    display: inline-block;
    width: auto;
    height: 0.7275em;
    margin: 0;
    border-radius: 0;
    vertical-align: baseline;
}

.cl-wordmark-icon--dark,
.cd-logo img.cl-wordmark-icon--dark,
:root.dark .cl-wordmark-icon--light,
:root.dark .cd-logo img.cl-wordmark-icon--light {
    display: none;
}

:root.dark .cl-wordmark-icon--dark,
:root.dark .cd-logo img.cl-wordmark-icon--dark {
    display: inline-block;
}

:is(.cl-wordmark-admin, .cl-wordmark-b2b) {
    font-style: italic;
    font-synthesis: none;
}

/* Yazı kalınlığı = CL logosundaki C'nin çizgi kalınlığı: C'nin çizgisi logo yüksekliğinin 0,247'si (389 px'te 96);
   logo yüksekliği = büyük harf yüksekliği olduğundan Inter'in harf gövdesi / büyük harf yüksekliği oranı 0,247 olan kalınlık seçildi
   (fontTools ile Inter değişken dosyasından ölçüldü: 800 → 0,237, 850 → 0,255; opsz 17 ve 22'de aynı) ≈ 825; kullanıcı kararıyla
   ağırlık 600 (SemiBold) kullanılır (2026-10-11; 825, 800 ve 700 denendi). */
:is(.cl-wordmark-admin, .cl-wordmark-b2b, .cl-wordmark-portal) {
    font-weight: 600;
}

.cl-wordmark-admin {
    color: var(--cl-accent-admin); /* admin panelinin vurgu rengi (Colorway::ACCENTS, kurumsal mavi #8257FF), her modda aynı */
}

.cl-wordmark-b2b {
    color: var(--cl-accent-b2b); /* B2B panelinin vurgu rengi (Colorway::ACCENTS, referansın mavisi #2A78D6), her modda aynı */
}

/* "Portal" yazısı logodaki C ile AYNI renk (kullanıcı kararı 2026-10-11; iki panel): açık modda #0B0B0B, koyu modda #F0EFEC.
   C resimde sabit renkte olduğundan değerler sabit token'dır (C ile aynı kalır). */
.cl-wordmark-portal {
    color: var(--cl-logo-ink-light);
}

:root.dark .cl-wordmark-portal {
    color: var(--cl-logo-ink-dark);
}

.fi-simple-layout .fi-simple-header-heading {
    max-width: 20ch;
    margin-inline: auto;
    padding: 0 !important;
    font-family: var(--cd-font-sans);
    font-size: 36px !important;
    line-height: 40px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-wrap: balance;
    color: var(--cd-text-primary) !important;
}

@media (max-width: 499px) {
    .fi-simple-layout .fi-simple-header-heading {
        font-size: 22px !important;
        line-height: 28px !important;
    }
}

.fi-simple-layout .fi-simple-header-heading::after {
    content: none !important;
}

/* Başlığın altındaki açıklama (sayfanın getSubheading'i). */
.fi-simple-layout .fi-simple-header-subheading {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center;
    text-wrap: balance;
    color: var(--cd-text-secondary) !important;
}

/* Kart: formun kendisi. */
.fi-simple-layout .fi-simple-page form.fi-form {
    padding: 24px;
    border: 1px solid var(--cd-border);
    border-radius: 32px;
    background: var(--cd-page-bg);
    box-shadow: var(--cd-shadow-lg);
    row-gap: 16px !important;
}

/* "Google ile devam et" (referansın "Continue with Google"u): ikincil düğme, kartın en üstünde; tam genişlik 40 px, köşe 10, %10 dolgu,
   15 / 22 400 birincil; Google'ın renkli "G"si referanstaki gibi görünen 16,7 px (referans: 20 px kutu, 24 ızgarada G 19,6 × 20), yazıya 6
   (görünen kenardan; referansta 5,8). Altında "veya" ayırıcısı (referansın "OR"u: 12 / 17 ikincil, büyük harf). */
.fi-simple-layout .cl-auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary); /* Console ikincil düğmesi: açıkta çizgi + gölge, koyuda yalnızca gölge */
    color: var(--cd-text-primary);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    text-decoration: none;
    cursor: var(--cd-cursor-interactive);
}

.fi-simple-layout .cl-auth-google:hover {
    background: var(--cd-fill-secondary-hover);
}

html:not(.cl-pointer) .fi-simple-layout .cl-auth-google:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.fi-simple-layout .cl-auth-google-icon {
    width: calc(20px * 20 / 24); /* G çizimi kutuyu doldurur (48 ızgara): görünen boy referansınkiyle aynı */
    height: calc(20px * 20 / 24);
    flex: none;
}

.fi-simple-layout .cl-auth-or {
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    text-transform: uppercase;
    color: var(--cd-text-secondary);
}

/* Şifresiz giriş — "bağlantı gönderildi" ve kod kartları (kullanıcı kararı 2026-10-11; referanstan ölçüldü, docs/theme-claude-platform.md §13;
   login.blade.php). Kart aynı (448, iç boşluk 24). 1. hâl: üstte 32 px posta kutusu ikonu bağlantı renginde (içerik üstünden 9), 12 altında
   "Devam etmek için … bağlantıya tıklayın" (14 / 21 ikincil, ortalı) + e-posta (14 / 21 500 birincil), 16 altında alt alta üç bağlantı düğmesi
   (14 / 20 bağlantı renginde, alt çizgi %40, aralık 6). 2. hâl (.cl-auth-sent--code): metin → 16 → yeniden gönder / e-postayı değiştir
   satırları (14 / 20 ikincil) → 32 → kod açıklaması (14 / 20 ikincil) → 16 → kod alanı (yazı ortalı) → 16 → "E-posta adresini doğrula". */
.fi-simple-layout .cl-auth-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fi-simple-layout .cl-auth-sent-icon {
    flex: none;
    width: 32px;
    height: 32px;
    margin: 9px 0 12px;
    color: var(--cd-text-accent);
}

.fi-simple-layout .cl-auth-sent-text {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--cd-text-secondary);
}

.fi-simple-layout .cl-auth-sent-text strong {
    display: block;
    font-weight: 500;
    color: var(--cd-text-primary);
    overflow-wrap: anywhere;
}

.fi-simple-layout .cl-auth-sent-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

/* Bağlantı görünümlü düğme (yeniden gönder, e-postayı değiştir, kodu gir): bağlantı renginde, altı çizili (çizgi %40, aralık 3). */
.fi-simple-layout .cl-auth-textlink {
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    white-space: nowrap; /* bağlantı yazısı satır sonunda bölünmez */
    cursor: pointer;
}

html:not(.cl-pointer) .fi-simple-layout .cl-auth-textlink:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.fi-simple-layout .cl-auth-sent--code {
    align-items: stretch;
}

.fi-simple-layout .cl-auth-sent-help {
    margin-top: 16px;
}

.fi-simple-layout .cl-auth-sent-help p,
.fi-simple-layout .cl-auth-code-help {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.fi-simple-layout .cl-auth-sent .cl-auth-code-help {
    margin-top: 32px;
}

.fi-simple-layout .cl-auth-code-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.fi-simple-layout .fi-simple-page .cl-auth-code-field .fi-input {
    text-align: center !important;
}

.fi-simple-layout .cl-auth-sent--code .cl-auth-continue {
    margin-top: 16px;
}

/* Uyarı kutusu (referansın "Too many login attempts. Try again later." kutusu; kullanıcının ekran görüntüsünden): düğmenin altında, tam
   genişlik, iç boşluk 12 16, köşe 10, kırmızı ton zemin + 1 px kırmızı çerçeve (%50), solda 16 px üçgen ünlem ikonu, yazı 14 / 20 tehlike
   kırmızısı, sola yaslı. Gönderim hatasında "bize ulaşın" bağlantısı altı çizili. */
.fi-simple-layout .cl-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--cd-fill-danger) 50%, transparent);
    border-radius: 10px;
    background: var(--cd-tint-red-bg);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: var(--cd-text-danger);
}

.fi-simple-layout .cl-auth-alert-icon {
    flex: none;
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
    margin-top: 2px;
}

.fi-simple-layout .cl-auth-alert a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Panel sayfalarındaki uyarı kutusu (partials/alert; bildirim yerine, kullanıcı kararı 2026-10-13): giriş ekranının uyarı kutusuyla aynı. */
.cd-page .cl-alert {
    /* Referansın tehlike şeridi (Banner): köşe 12, 12 16, ikon 20 + 8, çerçeve border-danger. */
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--cd-border-danger);
    border-radius: 12px;
    background: var(--cd-tint-red-bg);
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-danger);
}

.cd-page .cl-alert-icon {
    flex: none;
    width: var(--cd-icon);
    height: var(--cd-icon);
}

/* Dipnot: kartın içinde en altta (login.blade.php). */
.fi-simple-layout .cl-auth-footnote {
    margin: 0;
    font-size: 13px;
    line-height: 17px;
    text-align: center;
    text-wrap: balance;
    color: var(--cd-text-muted);
}

.fi-simple-layout .fi-simple-page .fi-fo-component-ctn {
    gap: 16px !important;
}

/* Dipnotta "Gizlilik Politikası'nı" satır sonunda bölünmez. */
.fi-simple-layout .cl-auth-footnote .cl-nowrap {
    white-space: nowrap;
}

/* Dipnottaki bağlantı (Gizlilik Politikası): referanstaki gibi bağlantı renginde, altı çizili (3 px aralık; çizgi bağlantı renginin %40'ı), 400. */
.fi-simple-layout .cl-auth-footnote a {
    color: var(--cd-text-accent);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

/* "E-posta ile devam et" / "E-posta adresini doğrula": dolu birincil düğme (tam genişlik 40 px, köşe 10, 15 / 22 500). */
.fi-simple-layout .cl-auth-continue {
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--cd-fill-primary);
    color: var(--cd-on-primary);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    cursor: var(--cd-cursor-interactive);
}

.fi-simple-layout .cl-auth-continue:hover {
    background: var(--cd-fill-primary-hover);
}

html:not(.cl-pointer) .fi-simple-layout .cl-auth-continue:focus-visible {
    outline: none;
    background: var(--cd-fill-primary-hover);
    box-shadow: var(--cd-focus-ring);
}

.fi-simple-layout .cl-auth-continue:disabled {
    opacity: 0.7;
}

/* Alanlar */
.fi-simple-layout .fi-simple-page .fi-input-wrp {
    min-height: 40px !important;
    border-radius: 10px !important;
    background-color: var(--cd-fill-field) !important;
    box-shadow: var(--cd-field-ring) !important;
}

.fi-simple-layout .fi-simple-page .fi-input {
    padding: 9px 16px !important;
    font-size: 15px !important;
    line-height: 22px !important;
    color: var(--cd-text-primary) !important;
}

.fi-simple-layout .fi-simple-page .fi-input::placeholder {
    color: var(--cd-text-muted) !important;
}

/* Dokunmatik cihazda BÜTÜN yazı alanları 16 px (referansın kuralı: `(pointer: coarse)` → yazı en az 16; ölçüldü 2026-10-25: Console'un
   telefondaki bütün alanları 16). iPhone 16 px'ten küçük yazılı alana dokununca sayfayı yakınlaştırır. Önce yalnızca giriş ekranlarındaydı
   (kullanıcı bildirimi 2026-10-25: panelde alana dokununca sayfa büyüyordu). İki panel + giriş ekranları; alanların kendi 14 px kuralları
   !important olduğu için seçicide kimlik düzeyinde öncelik (`:not(#cd-touch)`; bu kimlik hiçbir öğeye verilmez). Alan yükseklikleri değişmez. */
@media (pointer: coarse) {
    :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"], [type="submit"], [type="button"]), textarea, select):not(#cd-touch) {
        font-size: 16px !important;
    }
}

.fi-simple-layout .fi-simple-page .fi-input-wrp :is(.fi-input-wrp-prefix, .fi-input-wrp-suffix) {
    width: auto !important;
    padding: 0 16px !important; /* ikon kenara yazıyla aynı uzaklıkta (alan iç boşluğu 16; referansın pl-md / pr-md'si) */
    border: 0 !important; /* Filament'in ikon hücresi ayırıcı çizgisi yok */
    color: var(--cd-text-muted) !important;
}

.fi-simple-layout .fi-simple-page .fi-input-wrp:has(.fi-input-wrp-prefix) .fi-input {
    padding-inline-start: 0 !important;
}

.fi-simple-layout .fi-simple-page .fi-input-wrp:has(.fi-input-wrp-suffix) .fi-input {
    padding-inline-end: 0 !important;
}

.fi-simple-layout .fi-simple-page .fi-input-wrp-icon {
    width: 16px !important;
    height: 16px !important;
    color: var(--cd-text-muted) !important;
}

.fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label span {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cd-text-primary) !important;
}

/* "Beni hatırla" + "Şifrenizi mi unuttunuz?" satırı: 14 / 20; onay kutusu panel ile aynı (18 px köşe 5, işaretliyken mavi + beyaz tik). */
.fi-simple-layout .fi-simple-page .fi-checkbox-input {
    width: 18px !important;
    height: 18px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background-color: var(--cd-fill-field) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border-strong) !important;
}

.fi-simple-layout .fi-simple-page .fi-checkbox-input:checked {
    background: var(--cd-fill-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
    box-shadow: none !important;
}

html:not(.cl-pointer) .fi-simple-layout .fi-simple-page .fi-checkbox-input:focus-visible {
    box-shadow: var(--cd-focus-ring) !important;
}

.fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label:has(.fi-checkbox-input) span {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--cd-text-secondary) !important;
}

.fi-simple-layout .fi-simple-page :is(.fi-link, .fi-link span) {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--cd-text-accent) !important;
    text-decoration: none !important;
}

.fi-simple-layout .fi-simple-page .fi-link:hover span {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.fi-simple-layout .fi-simple-page .fi-fo-field-wrp-hint {
    line-height: 20px;
}

/* Düğme: tam genişlik, dolu birincil. */
.fi-simple-layout .fi-simple-page .fi-form-actions .fi-ac {
    display: flex !important;
}

.fi-simple-layout .fi-simple-page .fi-btn {
    width: 100% !important;
    min-height: 40px;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--cd-fill-primary) !important;
    box-shadow: none !important;
    color: var(--cd-on-primary) !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 500 !important;
}

.fi-simple-layout .fi-simple-page .fi-btn:hover,
html:not(.cl-pointer) .fi-simple-layout .fi-simple-page .fi-btn:focus-visible {
    background: var(--cd-fill-primary-hover) !important;
}

.fi-simple-layout .fi-simple-page .fi-btn :is(.fi-btn-label, .fi-btn-icon) {
    color: inherit !important;
}

.fi-simple-layout .fi-simple-page .fi-btn .fi-btn-icon {
    display: none !important;
}

/* Alan altı açıklaması: uyarıyla aynı ölçek 13 / 17,875 soluk; alana 8 (Filament'in gap-y-2'si; referansın gap-xs'i). */
.fi-simple-layout .fi-simple-page .fi-fo-field-wrp-helper-text {
    font-size: 13px !important;
    line-height: 17.875px !important;
    color: var(--cd-text-muted) !important;
}

.fi-simple-layout .fi-simple-page .fi-icon-btn svg {
    color: var(--cd-text-muted) !important;
}

/* Şifre gözü (tüm portal): çizim maske olarak, rengi soluk yazı renginde (açık ve koyu modda görünür); üzerine gelince birincil. */
button[x-on\:click="isPasswordRevealed = true"]::after,
button[x-on\:click="isPasswordRevealed = false"]::after {
    background-color: var(--cd-text-muted);
    background-image: none !important;
    opacity: 1 !important;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

button[x-on\:click="isPasswordRevealed = true"]:hover::after,
button[x-on\:click="isPasswordRevealed = false"]:hover::after {
    background-color: var(--cd-text-primary);
}

button[x-on\:click="isPasswordRevealed = true"]::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 9c-2.4 2.667-5.4 4-9 4s-6.6-1.333-9-4M3 15l2.5-3.8M21 14.976l-2.492-3.776M9 17l.5-4M15 17l-.5-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 9c-2.4 2.667-5.4 4-9 4s-6.6-1.333-9-4M3 15l2.5-3.8M21 14.976l-2.492-3.776M9 17l.5-4M15 17l-.5-4'/%3E%3C/svg%3E");
}

button[x-on\:click="isPasswordRevealed = false"]::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0'/%3E%3Cpath d='M21 12c-2.4 4-5.4 6-9 6s-6.6-2-9-6c2.4-4 5.4-6 9-6s6.6 2 9 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0 2 2 0 0 0-4 0'/%3E%3Cpath d='M21 12c-2.4 4-5.4 6-9 6s-6.6-2-9-6c2.4-4 5.4-6 9-6s6.6 2 9 6'/%3E%3C/svg%3E");
}

/* Giriş bağlantısı sayfası (<panel>/magic-link; auth/magic-link.blade.php; kullanıcı kararı 2026-10-11; referansın /magic-link sayfası, ölçüldü):
   sayfa zemininde; üstte ortada portalın logosu (22 px, üstten 32); ekranın ortasında durum: yükleniyor işareti (20) veya bildirim — başlık
   22 / 28 500, 12 altında açıklama 14 / 20 ikincil (bağlantı ikincil renkte, altı çizili), 28 altında düğme (40, köşe 10, 0 16, 15 / 22 500;
   asıl dolu birincil, kopyala ikincil). Kod ekranı (başka cihaz; referansta görünüm ölçülemedi, metinleri birebir): kod 32 / 40 600 eşit
   genişlikli rakamlar, harf aralığı 0,2 em; "Kodu kopyala" ikincil düğme (ikon 16, kopyalanınca tik); altında "Bunun yerine burada giriş yap". */
body.cl-magic {
    min-height: 100svh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--cd-page-bg);
    color: var(--cd-text-primary);
    font-family: var(--cd-font-sans);
}

.cl-magic-head {
    display: flex;
    justify-content: center;
    padding-top: 32px;
}

.cl-magic-logo {
    font-size: 22px;
    line-height: 22px;
    font-weight: 600;
    color: var(--cd-text-primary);
    text-decoration: none;
    border-radius: 6px;
}

html:not(.cl-pointer) .cl-magic-logo:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cl-magic-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 86px; /* üstteki logo kadar alttan pay: içerik ekranın ortasında */
}

.cl-magic-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    text-align: center;
}

.cl-magic-state[hidden] {
    display: none;
}

.cl-magic-state h1 {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    text-wrap: balance;
}

.cl-magic-state p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
    text-wrap: balance;
    color: var(--cd-text-secondary);
}

.cl-magic-state p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

.cl-magic-state p strong {
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-magic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    margin-top: 28px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--cd-fill-primary);
    color: var(--cd-on-primary);
    font: inherit;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    text-decoration: none;
    cursor: var(--cd-cursor-interactive);
}

.cl-magic-btn:hover {
    background: var(--cd-fill-primary-hover);
}

.cl-magic-btn:disabled {
    opacity: 0.7;
}

html:not(.cl-pointer) .cl-magic-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cl-magic-btn--secondary {
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
    color: var(--cd-text-primary);
    font-weight: 400;
}

.cl-magic-btn--secondary:hover {
    background: var(--cd-fill-secondary-hover);
}

.cl-magic-btn-icon {
    flex: none;
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
}

.cl-magic-btn-icon[hidden] {
    display: none;
}

.cl-magic-code {
    margin-top: 28px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2em;
    padding-left: 0.2em; /* harf aralığının sondaki payı: rakamlar optik olarak ortada */
    user-select: all;
}

.cl-magic-code + .cl-magic-btn {
    margin-top: 16px;
}

.cl-magic-textlink {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    cursor: pointer;
}

html:not(.cl-pointer) .cl-magic-textlink:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cl-magic-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--cd-border);
    border-top-color: var(--cd-text-secondary);
    border-radius: 50%;
    animation: cl-magic-spin 0.8s linear infinite;
}

@keyframes cl-magic-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
 * 14. SAYFALARA ÖZGÜ YERLEŞİM VE İŞLEV KURALLARI (rol popup'ı, ürün ağacı kurucusu, Para Birimleri, tutarlar, hizalı tablolar, yan yana alanlar,
 *     seçim kutusu düzeni, popup başlık satırındaki alan, PNS-CL renk noktaları). Görünüm token'ları yukarıdaki bölümlerden gelir.
 * ========================================================================== */
/* ---------------------------------------------------------------------------
 * Ürün Ağaçları araç çubuğu: yedi filtre hapı (Giysi, Renk, Kumaş, Kalınlık, Paketleme, Tedarikçi, Durum) arama
 * kutusuyla tek satırda kalsın. 1440 px ekranda içerik 1144 (1440 − menü 256 − 2 × 20); haplar 901 + aralar 56 = 957, 256'lık aramayla 1213
 * (sığmaz). Arama kutusu bu sayfada 160'tan başlar (yer tutucu "Ürün koduyla ara" 113 + büyüteç 24 + 8 + 8 = 153), satırda boş kalan yeri
 * alarak 256'ya kadar büyür (geniş ekranda her zamanki 256). ₺ | $ sığmazsa alt satırın sağına geçer (.cl-toolbar-end). < 1024'te genel kural.
 * ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .cd-page .fi-resource-product-trees .fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field {
        flex: 1 0 160px;
        width: auto;
        max-width: 256px;
    }
}

/* ---------------------------------------------------------------------------
 * Seçim kutusu (Choices.js) düzeni: seçili değer / yer tutucu dikeyde ortalı; seçili değer etiketse etiket de ortalı; açılır liste HER ZAMAN kutunun
 * hemen altında. Çoklu seçimde bir değer seçilince yer tutucu ("Tümü") görünmez, hepsi kaldırılınca geri gelir.
 * ------------------------------------------------------------------------ */
.fi-fo-select .choices__inner {
    display: flex !important;
    align-items: center;
    padding-block: 0 !important;
}

.fi-fo-select .choices__list--single {
    display: flex !important;
    align-items: center;
    padding: 0 !important;
}

.fi-fo-select .choices__list--single .choices__item:has(.cl-tag) {
    display: flex;
    align-items: center;
    line-height: 0;
}

.fi-fo-select .choices:has(.choices__list--multiple .choices__item) .choices__input--cloned::placeholder {
    color: transparent !important;
}

.fi-fo-select .choices__list--dropdown {
    bottom: auto !important;
    margin: 0 !important;
}

/* Filtre menüsünde çok değer seçilince kutu taşmaz: seçilen değerler kutunun İÇİNDE alt satıra geçer, kutu aşağı uzar;
   değerler ve arama girişi aynı satır akışında (giriş son satırın kalan boşluğuna sığar). */
.fi-ta-filters .fi-fo-select .choices__list--multiple {
    margin: 0 !important;
    padding: 0 !important;
}

.fi-ta-filters .fi-fo-select .choices__inner:has(.choices__list--multiple .choices__item) {
    flex-wrap: wrap;
}

.fi-ta-filters .fi-fo-select .choices__list--multiple:has(.choices__item) {
    display: contents;
}

.fi-ta-filters .fi-fo-select .choices__inner:has(.choices__list--multiple .choices__item) .choices__input--cloned {
    flex: 1 1 0;
    width: auto !important;
    min-width: 1ch !important; /* Choices satır içi 5ch yazar; son satırda kalan dar boşluğa da sığsın */
    height: auto !important;
}

/* Kayıt geçmişi popup'ı: olaylar alt alta, en yeni üstte; uzunsa popup içinde kayar (görünüm §12). */
.cl-history {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
}

/* Zeminsiz bölüm (ör. rol popup'ının en üstündeki Rol + Tümünü seç; kullanıcı kararı 2026-10-09): zemin, çerçeve ve iç boşluk yok. */
.fi-section.cl-section-plain {
    background: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-section.cl-section-plain > .fi-section-content-ctn > .fi-section-content {
    padding: 0 !important;
}

/* Rol popup'ında izin bölümlerinin (Alt parça, Fiyat, Ürün…) zemini ve çerçevesi yok. */
.cl-modal-role .fi-section {
    background: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* Rol popup'ındaki izin bölümleri kenar menünün sırasıyla alt alta (kullanıcı kararı 2026-10-09; grup başlığı yok): yan iç boşluk yok (Rol kutusuyla
   aynı sol hizada); bölüm başlığı menüdeki sayfa adıyla birebir aynıdır (cümle düzeni kuralının istisnası). */
.cl-modal-role .cl-perm-page > .fi-section-header,
.cl-modal-role .cl-perm-page > .fi-section-content-ctn > .fi-section-content {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Başlık çizgisinde taşma yok: yazı çizginin başından başlar. */
.cl-modal-role .cl-perm-page .fi-section-header-heading {
    padding-right: 0;
    padding-left: 0;
    text-transform: none;
}

/* Başlık çizgisi ile izin kutuları arası 22 px (kullanıcı kararı 2026-10-09: eski 44 px'in yarısı): başlığın alt iç boşluğu 0, içeriğin üst
   iç boşluğu 18 px, kutunun kendi üst payı 4 px. */
.cl-modal-role .cl-perm-page > .fi-section-header {
    padding-bottom: 0 !important;
}

.cl-modal-role .cl-perm-page > .fi-section-content-ctn > .fi-section-content {
    padding-top: 18px !important;
}

/* Başlık altındaki ayırıcı çizgi yok. */
.cl-modal-role .fi-section-content-ctn {
    border-top: 0 !important;
}

/* Rol sayfasındaki izin bölümleri referansın "Create agent" bölümleri BİREBİR (kullanıcı kararları 2026-10-13; geniş düzen ölçüldü):
   kutu yok; bölüm üst / alt 32 (ilkinin üstü 0), altında 1 px %10 çizgi (sonuncuda yok); iki sütun: solda 224 (ok 16 + 6 + sayfa adı
   15 / 20 580), 28 aralık, sağda kalan genişlik: kapalıyken verilen izin sayısı ("2 izin", 14 / 20 soluk, satırı 20), açıkken izin
   çipleri + "İzin ekle" (başlıkla aynı üst hizada; "Tümünü seç" açılır listenin en üstünde). Kapalı bölüm 32 + 20 + 32. Hareket: ok 150 ms
   cubic-bezier(.4, 0, .2, 1); içerik ve özet 200 ms cubic-bezier(.165, .84, .44, 1) (grid 0fr ↔ 1fr + saydamlık). Telefonda (< 640) tek sütun, özet başlığın yanında. Filament'in daralt düğmesi gizli. */
.cd-page .cl-modal-role .fi-section.cl-perm-page {
    position: relative;
    display: grid;
    grid-template-columns: var(--cl-aside-w) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid var(--cd-border);
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Rol sayfası bölümlü form (kullanıcı kararı 2026-10-13; App\Filament\Forms\FormSection, .cl-form-aside): üst satır "Genel" bölümü, izinler
   kenar menünün gruplarına göre (Ürün, Satış, Finans, Yönetim) birer bölüm. Her grubun üstünde 32 + 1 px %10 çizgi + 32 (ilk grup da, çünkü
   gruplar ayrı kapta); grubun içindeki sayfa satırları (.cl-perm-page) aralarında kendi çizgileriyle, ilki grup başlığıyla aynı üst hizada
   (üst boşluk 0), sonuncunun alt boşluğu 0. */
.cd-page .fi-section.cl-role-head {
    border-radius: 0 !important;
}

.cd-page .fi-section.cl-form-aside.cl-perm-group {
    margin-top: 16px; /* formun 16'lık aralığına eklenir: çizginin üstü 32 */
    padding-top: 32px;
    border-top: 1px solid var(--cd-border);
}

.cd-page .cl-modal-role .cl-perm-group :first-child > .fi-section.cl-perm-page {
    padding-top: 0;
}

.cd-page .cl-modal-role .cl-perm-group :first-child > .fi-section.cl-perm-page .cl-perm-summary {
    top: 0; /* özet satırın üst boşluğundan (32) konumlanır; ilk satırda boşluk 0 */
}

.cd-page .cl-modal-role .cl-perm-group :last-child > .fi-section.cl-perm-page {
    padding-bottom: 0;
}

/* Bölümler arasında Filament'in 16'lık aralığı yok: her bölümün boşluğu yalnızca kendi üst / alt 32'si (çizgi → başlık = 32). */
.cd-page .cl-modal-role :has(> * > .fi-section.cl-perm-page) {
    row-gap: 0 !important;
    gap: 0 !important;
}

.cd-page .cl-modal-role :last-child > .fi-section.cl-perm-page {
    border-bottom: 0;
}

.cl-modal-role .cl-perm-page > .fi-section-header {
    grid-column: 1;
    grid-row: 1;
    padding: 0 !important;
    cursor: var(--cd-cursor-interactive);
}

.cl-modal-role .cl-perm-page > .fi-section-header .fi-icon-btn {
    display: none;
}

.cl-modal-role .cl-perm-page .fi-section-header-heading {
    display: block !important;
}

.cl-perm-head {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cl-perm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cl-perm-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cd-text-primary);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-perm-page[data-open] .cl-perm-chevron {
    transform: rotate(90deg);
}

.cl-perm-title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 580;
    color: var(--cd-text-primary);
    white-space: nowrap;
}

/* Kapalıyken sağ sütundaki özet (referansın "None"u): satır 20, yazı 14 soluk; açıkken 200 ms'de söner ve gizlenir. */
.cl-perm-summary {
    position: absolute;
    top: 32px;
    left: calc(var(--cl-aside-w) + 28px);
    right: 0;
    display: block;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0s;
}

.cl-perm-page[data-open] .cl-perm-summary {
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 200ms;
}

/* Sağ sütun: izinler; yükseklik 0 ↔ içerik 200 ms (grid 0fr ↔ 1fr, Filament'in anında gizleyen sınıfları geçersiz), hareket sırasında
   kırpılır (odak halkası için 8 taşma); kapanınca hareket bitince gizlenir. */
.cl-modal-role .cl-perm-page > .fi-section-content-ctn {
    grid-column: 2;
    grid-row: 1;
    position: relative !important;
    display: grid !important;
    grid-template-rows: 1fr;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: grid-template-rows 200ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0s;
}

.cl-modal-role .cl-perm-page:not([data-open]) > .fi-section-content-ctn {
    grid-template-rows: 0fr;
    visibility: hidden !important;
    transition: grid-template-rows 200ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 200ms;
}

.cl-modal-role .cl-perm-page > .fi-section-content-ctn > .fi-section-content {
    min-height: 0;
    padding: 0 !important;
    overflow: visible; /* açıkken "İzin ekle" listesi taşabilsin */
    overflow-clip-margin: 8px;
}

/* Açılma hareketi boyunca kırpılır (referansın data-animating'i); bitince taşabilir. */
.cl-modal-role .cl-perm-page[data-open] > .fi-section-content-ctn > .fi-section-content {
    animation: cl-perm-clip 200ms;
}

.cl-modal-role .cl-perm-page:not([data-open]) > .fi-section-content-ctn > .fi-section-content {
    overflow: clip;
    transform: translateY(20px);
}

/* Referanstaki gibi (kare kare ölçüldü 2026-10-13): kapanırken içerik, üstünde büyüyen özet satırı (20) kadar aşağı kayarak alttan kırpılır
   ve kaybolur; açılırken yukarı kayarak yerine gelir. Yükseklikle aynı süre ve eğri. */
.cl-modal-role .cl-perm-page > .fi-section-content-ctn > .fi-section-content {
    transition: transform 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes cl-perm-clip {
    from { overflow: clip; }
    to { overflow: clip; }
}

/* Filament'in onay kutuları: durum taşır, görünmez ve odak almaz. */
.cl-perm-boxes {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    visibility: hidden;
}

/* İçerikteki iki seçici: başlıkla aynı üst hizada, aralarında 12; portalın segment seçicisi (32). "Gizle"deyken
   Düzenle seçicisi ve sütunlar %40 soluk, basılamaz. */
.cl-perm-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cl-perm-columns.is-disabled {
    opacity: 0.4;
}

/* Sütunlar tablonun başlık satırı gibi (kullanıcı kararı 2026-10-13; önce aralıklı ayrı düğmelerdi): hücreler aralıksız yan yana, zeminsiz,
   altlarında tablodaki 1 px %5 satır çizgisi; hücre 32 yüksek, 0 12 (--cd-table-px), 13 / 17 500 (tablo başlığı). Seçili sütun (rol görür)
   tablo başlığının yazısı (13 / 17 500 ikincil) + hayalet-seçili zemin, seçili değil soluk yazı; üzerine gelince hayalet zemin. Seçicilerin 16
   altında. Birden fazla seçilir. */
.cl-perm-columns {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px; /* şerit iki satıra bölününce satırlar arası; yan yana hücreler aralıksız */
    margin-top: 16px;
}

.cl-perm-column {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--cd-table-px);
    border: 0;
    border-bottom: 1px solid var(--cd-border-subtle);
    border-radius: 0;
    background: transparent;
    font-size: var(--cd-table-head-f);
    line-height: var(--cd-table-head-lh);
    font-weight: 500;
    color: var(--cd-text-muted);
    white-space: nowrap;
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out), color var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-perm-column:hover:not(:disabled) {
    background: var(--cd-fill-ghost-hover);
}

.cl-perm-column[aria-pressed="true"] {
    background: var(--cd-fill-ghost-selected);
    color: var(--cd-text-secondary); /* tablo başlığının yazı rengi */
}

.cl-perm-column:disabled {
    cursor: default;
}

html:not(.cl-pointer) .cl-perm-column:focus-visible {
    position: relative;
    z-index: 1;
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

/* Ana sütunu kapalı bağlı sütun (ör. Peşin kapalıyken vadeliler): tek başına %40 soluk. */
.cl-perm-column.is-disabled {
    opacity: 0.4;
}

html:not(.cl-pointer) .cl-perm-column:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

@media (max-width: 639px) {
    .cd-page .cl-modal-role .fi-section.cl-perm-page {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-modal-role .cl-perm-page > .fi-section-content-ctn {
        grid-column: 1;
        grid-row: 2;
    }

    .cl-modal-role .cl-perm-page > .fi-section-content-ctn > .fi-section-content > * {
        padding-top: 12px;
    }

    .cl-perm-summary {
        left: calc(16px + 6px + 8em);
    }
}

/* Rol sayfasının üst satırı: Rol kutusu, hemen sağında İkon seçici, satırın sağ ucunda "Kısıtlı | Tam yetkili". Rol kutusu kısa alan gibi sabit
   320 px (kullanıcı kararı 2026-10-13; en uzun rol adı ≈ 160; önce satırın büyük bölümü, 670 px); alanlar arası 12 (formun yan aralığı). */
.cl-role-head .fi-section-content > .grid {
    display: flex !important;
    align-items: flex-end;
    gap: 12px;
}

.cl-role-head .fi-section-content > .grid > :has(> .cl-role-name) {
    flex: 0 1 320px;
    min-width: 0;
}

/* Telefonda Rol kutusu tam satır, İkon ve "Kısıtlı | Tam yetkili" alt satırda (yoksa kutu sıkışıyordu). */
@media (max-width: 639px) {
    .cl-role-head .fi-section-content > .grid {
        flex-wrap: wrap;
    }

    .cl-role-head .fi-section-content > .grid > :has(> .cl-role-name) {
        flex: 1 1 100%;
    }
}

/* Portal tikleri (Admin Portal, B2B Portal; kullanıcı kararı 2026-10-14) Rol satırında, İkon seçicisinin sağında: başlıksız, yan yana (aralarında 16),
   Rol kutusunun dikey ortasında; telefonda satır kayınca alt satırda. */
.cl-role-head .fi-section-content > .grid > :has(> .cl-role-panel-field) {
    flex: 0 0 auto;
    margin-left: 12px;
}

@media (max-width: 639px) {
    .cl-role-head .fi-section-content > .grid > :has(> .cl-role-panel-field) {
        margin-left: 0;
    }
}

.cl-role-panel-field .fi-fo-checkbox-list {
    display: flex !important;
    align-items: center;
    gap: 16px;
    height: var(--cd-field-h, 32px);
}

.cl-role-panel-field .fi-fo-checkbox-list > * {
    margin: 0 !important;
    padding: 0 !important;
}

.cl-role-panel-field .fi-fo-checkbox-list label {
    align-items: center;
    white-space: nowrap;
}

.cl-role-panel-field .fi-fo-checkbox-list label span {
    font-weight: 400;
    color: var(--cd-text-primary);
}

.cl-role-panel-field .fi-fo-checkbox-list .fi-checkbox-input {
    margin-top: 0 !important;
}

/* İzin bölümü başlığı: solda sayfa adı, sağ uçta bölümün "Tümünü seç" onay kutusu, ikisi aynı satırda ve dikeyde ortalı. */
.cl-modal-role .cl-perm-page .fi-section-header-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Aynı satırda birden çok alan (ör. Alt parça formunda Parça Kodu + Tür kutucukları; kullanıcı kararı 2026-10-12): ilk alan kalan genişliği
   alır, diğerleri içeriği kadar; aralarında 12 (referansın alan satırı "flex items-end gap-sm", ölçüldü 2026-10-13; önce 16), başlıklar aynı hizada. */
.cd-page .cl-field-row > .fi-fo-component-ctn,
.cd-page .cl-field-row > div > .fi-fo-component-ctn {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
}

/* Referansın mantığı (Organization formu: City w-48, State esnek, Postal code w-28): kısa alanlar (sayı, para birimi, birim, segment seçici)
   sabit genişlikte, diğer alanlar kalan genişliği eşit paylaşır. */
.cd-page .cl-field-row .fi-fo-component-ctn > * {
    flex: 1 1 0;
    min-width: 0;
}

.cd-page .cl-field-row .fi-fo-component-ctn > :has(.cl-w-number, .cl-w-unit, .cl-icon-seg, .cl-segmented),
.cd-page .cl-field-row .fi-fo-component-ctn > :is(.cl-w-number, .cl-w-unit) {
    flex: none;
}

/* Alt parçanın diğer tedarikçileri (kullanıcı kararları 2026-10-20, 2026-10-21; forms/components/supplier-list): referansın "Create environment ›
   Metadata" listesi (ölçüldü): başlıksız satırlar, satırlar arası 8, satırdaki öğeler arası 8 (alanlar dahil; formun satırlarındaki 12 değil),
   sağda 32 × 32 hayalet ikon düğmeleri; son satırdan 12 aşağıda sola yaslı hayalet "+ Tedarikçi ekle" (ikon 20, yazıdan önce, -4 dışarıda). */
.cl-supplier-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px; /* satırlar → "+ … ekle": kart listesindeki ile aynı 16 (aşağıdaki "EKLE DÜĞMESİNİN ÜSTÜ" kuralı) */
}

.cl-supplier-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-supplier-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cl-supplier-row-fields {
    flex: 1 1 0;
    min-width: 0;
}

.cl-supplier-row > .cd-btn {
    flex: none;
}

/* Fiyat kutusu → ↑ ve ↑ → çöp kutusu arasındaki GÖRÜNEN boşluklar eşit, 20,3 (kullanıcı kararı 2026-10-21; tarayıcıda ölçüldü): ↑ çizimi 32'lik
   kutuda kenarlardan 11, çöp kutusu 9,33 içeride. Düğmeler bitişik (11 + 9,33), fiyat kutusu → ilk düğme 9,33 (+ 11). */
.cl-supplier-row > .cd-btn:first-of-type {
    margin-inline-start: 1.33px;
}

.cl-supplier-row > .cd-btn + .cd-btn {
    margin-inline-start: -8px;
}

.cd-page .cl-supplier-row-fields .cl-field-row > .fi-fo-component-ctn,
.cd-page .cl-supplier-row-fields .cl-field-row > div > .fi-fo-component-ctn {
    gap: 8px;
}

/* İskontolar › Adet iskontosu: adet kutusu solda, oran kutusu sağa yaslı, çöp kutusunun hemen solunda (ticari
   iskontoların oran sütunuyla aynı yerde biter, arada boşluk kalmaz). */
.cd-page .cl-supplier-row-fields .cl-tier-row > .fi-fo-component-ctn,
.cd-page .cl-supplier-row-fields .cl-tier-row > div > .fi-fo-component-ctn {
    justify-content: space-between;
}

/* Uzun tedarikçi adı satırı iki satıra bölüp yükseltmesin: seçili değer tek satır, sığmazsa "…" (satırdaki seçim kutuları). */
/* Yalnızca seçili değerin satırı kırpılır; .choices ve .choices__inner KIRPILMAZ, yoksa açılan liste de görünmez (kullanıcı bildirimi
   2026-10-21: "kutulardaki menüler çalışmıyor"). */
.cd-page .cl-field-row .choices__list--single {
    min-width: 0;
    overflow: hidden;
}

.cd-page .cl-field-row .choices {
    min-width: 0;
}

.cd-page .cl-field-row .choices__list--single .choices__item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Ana tedarikçi satırı ile diğer tedarikçi satırları aynı kolonlarda (kullanıcı bildirimi 2026-10-21: yeni satır eklenince boş fiyat kutusu
   daralıyor, tedarikçi kutusu genişliyordu): fiyat kutusu her satırda sabit 80 (yazılan değere göre değişmez), ana satırda da öğeler arası 8,
   ana satırın "/ birim" kısmı diğer satırların iki ikon düğmesi kadar (8 + 32 + 8 + 32 = 80). Böylece tedarikçi kutuları eşit genişlikte,
   fiyat ve para birimi kutuları alt alta. */
.cd-page .cl-supplier-main > .fi-fo-component-ctn,
.cd-page .cl-supplier-main > div > .fi-fo-component-ctn {
    gap: 8px;
}

.cd-page :is(.cl-supplier-main, .cl-supplier-row) .cl-compound-item:first-child .fi-input-wrp input:not([type="hidden"]):not(#cd-compound):not(#cd-supplier) {
    field-sizing: fixed;
    width: 80px; /* "12.345,67" sığar */
}

/* Birim Genel bölümünde: ana satırın sağında diğer satırların iki ikon düğmesi kadar boşluk. */
@media (min-width: 640px) {
    .cd-page .cl-supplier-main {
        margin-inline-end: 73.33px; /* 8 + 1,33 + 32 + 32: diğer satırların düğmeleri */
    }
}

/* Telefonda (< 640) tedarikçi adı okunsun: tedarikçi kutusu tam genişlik, fiyat altında; diğer tedarikçilerde ↑ ve
   çöp kutusu fiyatın satırında sağda. Fiyat kutuları alt alta hizalı kalır. */
@media (max-width: 639px) {
    .cd-page :is(.cl-supplier-main, .cl-supplier-row-fields .cl-field-row) > .fi-fo-component-ctn,
    .cd-page :is(.cl-supplier-main, .cl-supplier-row-fields .cl-field-row) > div > .fi-fo-component-ctn {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .cd-page :is(.cl-supplier-main, .cl-supplier-row-fields .cl-field-row) .fi-fo-component-ctn > :first-child {
        flex-basis: 100%;
    }

    .cl-supplier-rows {
        gap: 16px; /* satır içi 8'den ayrılsın: her tedarikçi iki satır */
    }

    .cl-supplier-row {
        position: relative;
        display: block;
    }

    .cl-supplier-row > .cd-btn {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .cl-supplier-row > .cd-btn:not(:last-child) {
        right: 32px;
        margin: 0;
    }

    .cl-supplier-row > .cd-btn + .cd-btn {
        margin: 0;
    }
}

.cl-supplier-add svg {
    margin-inline-start: -4px;
}

/* Başlıksız alanların bulunduğu satır (ör. Birim Fiyatı + başlıksız Para Birimi + Birim): alanlar alttan hizalı. */
.cd-page .cl-field-row--bottom > .fi-fo-component-ctn,
.cd-page .cl-field-row--bottom > div > .fi-fo-component-ctn {
    align-items: flex-end;
}

/* Sayı alanları referansın kısa alanı gibi daraltılır (kullanıcı kararları 2026-10-13; referansın Organization formu ölçüldü: satır flex,
   alanlar arası 12, kısa alanlar sabit — posta kodu w-28 = 96, şehir w-48 = 165 —, bir alan kalan genişliği alır): sayı alanı 96 px (w-28);
   "% / ay" birimi ve fiyat sığar. Sınıf merkezî (AppServiceProvider: sayısal TextInput → .cl-w-number). Satırda (.cl-field-row) sayı alanı
   kalan genişliği almaz; önce 160 px denendi. */
.cd-page .fi-fo-field-wrp.cl-w-number {
    width: 96px;
    max-width: 100%;
}

.cd-page .fi-fo-field-wrp.cl-w-number--wide {
    width: 110px;
}

/* Dört ondalıklı oran ve uzun birim ("0,1333 % / gün"; İskontolar › Günlük İskonto, kullanıcı kararı 2026-10-21). */
.cd-page .fi-fo-field-wrp.cl-w-number.cl-w-number--wider {
    width: 150px;
}

/* Başlığı kutudan uzun sayı alanı (ör. "Taban Kâr Marjı") başlığı kadar genişler, başlık tek satırda kalır (kullanıcı bildirimi 2026-10-17:
   başlık iki satıra düşüp kutuyu aşağı itiyordu). */
.cd-page .fi-fo-field-wrp.cl-w-number {
    min-width: min-content;
}

.cd-page .fi-fo-field-wrp.cl-w-number .fi-fo-field-wrp-label {
    white-space: nowrap;
}

/* Dar alanların uyarısı (sayı 96, para birimi 72, birim 104; kullanıcı bildirimi 2026-10-17: uyarı alanın genişliğine sıkışıp kelime kelime
   alt alta düşüyordu): uyarı alanın genişliğinden bağımsız, yazısı kadar geniş (en fazla 480) akar; alanı genişletmez (negatif sağ kenar
   boşluğuyla genişlik katkısı sıfır), sağdaki boş alana taşar. Telefonda (< 640) eskisi gibi alanın içinde kırılır (ekran dışına taşmasın).
   Yeni dar alan türü bu listeye eklenir. */
@media (min-width: 640px) {
    .cd-page .fi-fo-field-wrp:is(.cl-w-number, .cl-w-unit) .fi-fo-field-wrp-error-message {
        width: max-content;
        max-width: 480px;
        margin-inline-end: -480px;
    }
}

/* Aynı satırda birden çok dar alan uyarı verirse uyarılar üst üste binmesin: her sonraki uyarı bir satır (17,875 + 4) aşağıda başlar. */
.cd-page .fi-fo-component-ctn > :has(.fi-fo-field-wrp-error-message) ~ :has(.fi-fo-field-wrp-error-message) .fi-fo-field-wrp-error-message {
    margin-top: 21.875px;
}

.cd-page .fi-fo-component-ctn > :has(.fi-fo-field-wrp-error-message) ~ :has(.fi-fo-field-wrp-error-message) ~ :has(.fi-fo-field-wrp-error-message) .fi-fo-field-wrp-error-message {
    margin-top: 43.75px;
}

.cd-page .cl-field-row .cl-w-unit {
    width: 104px;
}

/* Alt parça formunda Birim, üst satırdaki Tür seçicisiyle aynı genişlikte: üç seçenek 30 + iç boşluk 1 + 1 = 92. */
.cd-page .cl-field-row .cl-w-unit.cl-w-type {
    width: 92px;
}

/* Birleşik alan (App\Filament\Forms\Components\CompoundField, .cl-compound; kullanıcı kararı 2026-10-13; ör. alt parçada "2,12 ₺ ⌄ / adet ⌄"):
   istenen sayıda alan TEK kutu gibi, tek başlıkla görünür; her biri yine ayrı yazılır / seçilir. Başlık alan başlığı gibi (14 / 14 500, alana 8);
   kutu (zemin + halka, köşe 8) satırın arkasına çizilir, içteki alanların kendi zemini ve halkası yok; ayırıcı ("/") soluk, 14. Durumlar
   alanların ortak kurallarıyla: üzerine gelince %20, yazılırken ya da klavyeyle odakta odak halkası, hatalıyken kırmızı (hata yazısı kutunun
   altında, ilgili alanın altında). Genişlik alan başına (CompoundField::widths); verilmeyen alan içeriği kadar. */
.cd-page .cl-compound {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Başlık diğer alan başlıklarıyla aynı 14 / 14 (önce 21 yüksek çiziliyordu, kutu yan alandan 7 aşağıda kalıyordu; 2026-10-18). */
.cd-page .cl-compound-label {
    display: flex;
    line-height: 14px;
}

.cd-page .cl-compound-box {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

.cd-page .cl-compound-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--cd-field-h);
    border-radius: 8px;
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
    pointer-events: none;
    transition: box-shadow var(--cd-dur-fast) var(--cd-ease-in-out);
}

.cd-page .cl-compound-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex: none;
    width: var(--cl-compound-w, auto);
}

/* Genişliği verilmeyen alanlar:
   - Seçim kutusu EN UZUN SEÇENEĞİ kadar sabit: seçenekler görünmez olarak (.cl-compound-sizer, 14 px, soldan 8, sağdan 30 = değer ile ok
     arası 4 + ok 16 + sağa 10) alanla aynı ızgara hücresine yazılır; seçim değişince kutu kıpırdamaz, en uzun seçenekte değer ile ok arası 4.
   - Yazı / sayı alanı yazılan değer kadar (field-sizing: content; en az 32, en fazla 160; değerin sağında 4, böylece "2,12 ₺" bitişik
     okunur). Desteklemeyen tarayıcıda 72. */
.cd-page .cl-compound-cell {
    display: grid;
    min-width: 0;
}

.cd-page .cl-compound-cell > * {
    grid-area: 1 / 1;
    min-width: 0;
}

/* Alanın kendi genişliği (ör. sayı alanının merkezî 96'sı) birleşik alanda geçmez: genişliği hücre / içerik belirler. */
.cd-page .cl-compound-cell > .fi-fo-field-wrp:not(#cd-compound) {
    width: auto !important;
    max-width: none;
}

.cd-page .cl-compound-sizer {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0 30px 0 8px;
    font-size: 14px;
    white-space: nowrap;
}

.cd-page .cl-compound-item:not([style]) .fi-fo-select .choices__inner:not(#cd-compound) {
    width: 100%;
    padding-right: 30px !important;
}

.cd-page .cl-compound-item:not([style]) .fi-fo-select .choices__list--dropdown {
    min-width: 100%;
    width: max-content;
}

.cd-page .cl-compound-item:not([style]) .fi-input-wrp input:not([type="hidden"]):not(#cd-compound) {
    field-sizing: content;
    width: auto;
    min-width: 32px;
    max-width: 160px;
    padding-right: 4px !important;
}

@supports not (field-sizing: content) {
    .cd-page .cl-compound-item:not([style]) .fi-input-wrp input:not([type="hidden"]):not(#cd-compound) {
        width: 72px;
    }
}

.cd-page .cl-compound-sep {
    flex: none;
    height: var(--cd-field-h);
    line-height: var(--cd-field-h);
    font-size: 14px;
    color: var(--cd-text-muted);
}

/* İçteki alanların kendi zemini ve çerçevesi HİÇBİR durumda yok (açık liste, odak, hata dahil; kullanıcı kararı 2026-10-13): üç kimlik
   düzeyi, alanların ortak durum kurallarından (#cd-state, #cd-select) önce gelir. Durumları yalnızca bütün kutu (::before) gösterir. */
.cd-page .cl-compound .fi-input-wrp:not(#cd-state):not(#cd-select):not(#cd-compound),
.cd-page .cl-compound .fi-input-wrp:is(:hover, :focus-within):not(#cd-state):not(#cd-select):not(#cd-compound) {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Seçim kutusunun iç katmanının (Choices) odak çizgisi de çizilmez: liste açıkken seçeneğin çevresinde ayrı çerçeve yok. */
.cd-page .cl-compound :is(.choices, .choices__inner, select):not(#cd-state):not(#cd-select):not(#cd-compound) {
    outline: none !important;
}

@media (hover: hover) {
    .cd-page .cl-compound-box:hover::before {
        box-shadow: var(--cd-field-ring-hover);
    }
}

.cd-page .cl-compound-box:has(input:focus, textarea:focus)::before,
html:not(.cl-pointer) .cd-page .cl-compound-box:focus-within::before {
    box-shadow: var(--cd-focus-ring);
}

.cd-page .cl-compound-box:has(.fi-fo-field-wrp-error-message)::before {
    box-shadow: var(--cd-field-ring-invalid);
}

.cd-page .cl-compound-box:has(.fi-fo-field-wrp-error-message):focus-within::before {
    box-shadow: var(--cd-focus-ring-danger);
}

/* Telefon (kullanıcı kararı 2026-10-18; kullanıcı formu, App\Support\PhoneNumber): birleşik alan sütun genişliğinde; solda ülke kodu 92
   (kutuda bayrak + "+90"; listede bayrak + ad + soluk kod; liste 280 geniş, adla ya da kodla aranır), sağda numara kalan genişlikte.
   Bayrak 20 × 15, köşe 2, içte %10 halka (beyaz zeminli bayraklar kutudan ayrılsın), yazıya 8. */
.cd-page .cl-phone,
.cd-page .cl-phone .cl-compound-box {
    width: 100%;
}

.cd-page .cl-phone .cl-compound-item:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.cd-page .cl-phone .cl-compound-item:last-child .cl-compound-cell,
.cd-page .cl-phone .cl-compound-item:last-child .fi-fo-field-wrp {
    width: 100%;
}

.cd-page .cl-phone .cl-compound-item:last-child .fi-input-wrp input:not([type="hidden"]):not(#cd-compound) {
    field-sizing: fixed;
    width: 100%;
    max-width: none;
}

/* Ülke kodu kutusu SABİT 92 (UserResource; kullanıcı kararı 2026-10-18: ok her zaman aynı yerde, alan sabit uzunlukta). Boşluklar sıkı ama
   okunur: kutu kenarı → bayrak 8, bayrak → kod 6, en geniş kodda ("+420") kod → ok 4, ok 16, ok → numaranın ilk rakamı 8 (ok sağa 2 +
   numara alanı soldan 6). Kutunun içi hücreyi doldurur (yoksa seçilen koda göre daralıp oku kaydırıyordu). */
.cd-page .cl-phone .cl-compound-item:first-child :is(.cl-compound-cell, .fi-fo-field-wrp, .fi-input-wrp, .fi-input-wrp-input, .choices):not(#cd-compound):not(#cd-phone) {
    width: 100% !important;
}

.cd-page .cl-phone .cl-compound-item .fi-fo-select .choices__inner:not(#cd-compound) {
    width: 100%;
    padding-right: 22px !important;
}

.cd-page .cl-phone .fi-fo-select .choices::after {
    right: 2px !important;
}

.cd-page .cl-phone .cl-compound-item:last-child .fi-input-wrp input:not([type="hidden"]):not(#cd-compound) {
    padding-left: 6px !important;
}

/* Seçenek: "Almanya <b>+49</b>"; bayrak ::before'da (--cl-flag, BAYRAKLAR bölümü): 20 × 15, köşe 2, içte %10 çizgi (beyaz zeminli bayraklar
   ayrılsın), yazıya 8; kod sağa yaslı soluk. Kutuda ad gizli (font-size 0): bayrak + "+49". */
.cd-page .cl-phone .choices__item {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.cd-page .cl-phone .choices__item::before {
    content: "";
    flex: none;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    background: var(--cl-flag, var(--cd-fill-ghost-hover)) center / cover no-repeat;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cd-page .cl-phone .choices__item b {
    flex: none;
    margin-left: auto;
    padding-left: 4px;
    font-weight: 400;
    color: var(--cd-text-muted);
}

/* Kutuda gizli ad (boyutsuz yazı) yine esnek öğe sayılır ve bir aralık daha ekliyordu (bayrak ile kod arası 16; 3 haneli kod oka biniyordu):
   aralık sıfır, kod bayraktan 8. */
.cd-page .cl-phone .choices__inner .choices__item {
    gap: 0;
    font-size: 0;
}

.cd-page .cl-phone .choices__inner .choices__item b {
    margin-left: 6px;
    padding-left: 0;
    font-size: 14px;
    color: inherit;
}

.cd-page .cl-phone .choices__list--dropdown {
    width: 280px;
    min-width: 280px;
}

/* WhatsApp düğmesi (kullanıcı kararı 2026-10-18; ContactLink::whatsapp, standart ikon düğmesi .cd-btn--icon): formda Telefon kutusunun 12
   sağında, kutuyla alttan hizalı, ikincil düğme (32 × 32, ikon 20); tabloda numaranın 4 sağında, küçük boy (24 × 24, ikon 16). Kapalıyken %40 (standart);
   ipucu (nedeni) sarmalayıcıda, çünkü kapalı düğme fareyi almaz. Tablolar, kartlar ve panellerde de standart boy (32 × 32, ikon 20;
   2026-10-18'de 24 × 24'ten büyütüldü). */
.cd-page .cl-phone-row > .fi-fo-component-ctn {
    display: flex !important;
    align-items: flex-end;
    gap: 8px;
}

.cd-page .cl-phone-row > .fi-fo-component-ctn > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.cd-page .cl-phone-row > .fi-fo-component-ctn > :last-child {
    flex: none;
}

.cd-page .cl-phone-row .fi-fo-placeholder,
.cd-page .cl-phone-row .fi-fo-field-wrp:has(.cl-whatsapp) {
    display: flex;
}

/* Formda ikincil düğme: referansın ikincil düğmesinin dolgusu: %10 + çizgi / gölge; ölçüler ikon düğmesi
   standardından (32 × 32, köşe 8, ikon 20); üzerine gelince ikincil hover; kapalıyken %40 (dolgu kalır). */
/* İkon WhatsApp yeşili (kullanıcı kararı 2026-10-18; --cl-whatsapp, iki modda aynı); hover'da da değişmez. */
.cd-btn.cl-whatsapp {
    color: var(--cl-whatsapp);
}

.cd-btn.cl-whatsapp--secondary {
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
}

@media (hover: hover) {
    .cd-btn.cl-whatsapp--secondary:not(:disabled):hover {
        background: var(--cd-fill-secondary-hover);
    }
}

.cd-btn.cl-whatsapp--secondary:disabled {
    background: var(--cd-fill-secondary);
}

.cl-whatsapp-wrap {
    display: inline-flex;
    border-radius: var(--cd-radius);
    outline: none;
}

.cl-whatsapp-wrap .cd-btn:disabled {
    pointer-events: none;
}

html:not(.cl-pointer) .cl-whatsapp-wrap:focus-visible {
    box-shadow: var(--cd-focus-ring);
}

/* İLETİŞİM BLOĞU — PORTAL STANDARDI (ContactLink::contact; kullanıcı kararı 2026-11-05, müşteri hızlı bakışının yetkili kişi satırı): üstte
   e-posta, altında telefon (+ cep numarasında WhatsApp düğmesi yanında); ikisi birincil renkte, bulunduğu yerin boyunda. Telefon satırı 24
   yüksek, WhatsApp düğmesi (32) üstten ve alttan 4 taşar; satırlar arası 6 ile düğme e-postaya değmez, arada görünürde 2 (kullanıcı kararı
   2026-11-05: 8 fazla açıktı; tablo ve panel). Önce WhatsApp iki satırın sağında 40 × 40'tı (2026-10-18). */
.cl-contact {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    vertical-align: middle;
}

.cl-contact-line--phone {
    min-height: 24px;
}

.cl-contact-line {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 17px;
    color: var(--cd-text-primary);
}

.cl-contact-line > .cl-you {
    margin-left: 0.3em; /* flex satırda link ile arasındaki boşluk karakteri yutulur */
}

.cl-contact-line > .cl-contact-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-page .cl-contact .cl-whatsapp {
    margin-block: -4px !important;
}

/* Büyük WhatsApp düğmesi (40 × 40; eski iki satırlık blok için, artık kullanılmıyor). */
.cd-btn.cl-whatsapp--lg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.cd-btn.cl-whatsapp--lg svg {
    width: 24px;
    height: 24px;
}

.cl-phone-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* İkonlu segment seçici (App\Filament\Forms\Components\IconSegmented; ör. alt parça Tür'ü; kullanıcı kararı 2026-10-12): Profil › Görünüm
   seçicisiyle (.cl-theme-seg) aynı görünüm: 32 iz (%5, köşe 8, iç boşluk 1), seçenek 30 × 30 kare, ikon 20 ikincil; üzerine gelince ve
   seçiliyken birincil; seçili seçenek başparmak (köşe 7, iç halka %10 + hafif gölge). Gerçek radyo düğmeleri (klavye odağında odak halkası). */
.cd-page .cl-icon-seg {
    display: inline-flex;
    box-sizing: border-box;
    height: var(--cd-seg-h);
    padding: 1px;
    border-radius: var(--cd-radius);
    background: var(--cd-seg-track);
}

.cd-page .cl-icon-seg-option {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: 1;
}

.cd-page .cl-icon-seg-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cd-page .cl-icon-seg-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 7px; /* iz köşesi (8) − 1, başparmakla aynı */
    color: var(--cd-text-secondary);
    cursor: var(--cd-cursor-interactive);
    transition: color var(--cd-dur-fast) var(--cd-ease-out), box-shadow var(--cd-dur-fast) var(--cd-ease-out);
}

.cd-page .cl-icon-seg-option:hover .cl-icon-seg-thumb,
.cd-page .cl-icon-seg-input:checked + .cl-icon-seg-thumb {
    color: var(--cd-text-primary);
}

.cd-page .cl-icon-seg-input:checked + .cl-icon-seg-thumb {
    border-radius: 7px;
    background: var(--cd-seg-thumb);
    box-shadow: inset 0 0 0 1px var(--cd-seg-thumb-ring), 0 1px 2px rgba(0, 0, 0, 0.05);
}

html:not(.cl-pointer) .cd-page .cl-icon-seg-input:focus-visible + .cl-icon-seg-thumb {
    box-shadow: var(--cd-focus-ring);
}

/* Yazılı, tam genişlik hâl (IconSegmented::labelled(); kullanıcı kararı 2026-10-21): referansın "Create environment › Hosting" seçicisi
   (ölçüldü): iz form genişliğinde, seçenekler eşit genişlikte (flex 1), içerik ortada: ikon 20 + 6 + adı 14 / 20, iç boşluk 0 12; seçilmemiş
   ikincil, seçili ve üzerine gelince birincil. Seçicinin altındaki not alanın yardımcı yazısı (13 / 17,875 soluk, 8 altında). */
.cd-page .cl-icon-seg.cl-icon-seg--labelled {
    display: flex;
    width: 100%;
}

.cd-page .cl-icon-seg--labelled .cl-icon-seg-option {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: auto;
}

.cd-page .cl-icon-seg--labelled .cl-icon-seg-thumb {
    gap: 8px; /* ikonun GÖRÜNEN kenarı → yazı (kutular aşağıda çizime göre daraltılır) */
    padding: 0 12px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

/* İçerik düğmeye ortalı, GÖRÜNEN kenarlara göre (kullanıcı kararı 2026-10-21; tarayıcıda ölçüldü): tür ikonlarının çizimi 20'lik kutusunda
   farklı boşluk bırakır (ana 2,9 / 2,9, yardımcı 4,9 / 4,9 — çizim 2026-10-24'te ortalandı, önce 7,9 / 1,8 —, referans 7,9 / 7,9); kutu çizime daraltılır, böylece ikon + yazı her seçenekte
   tam ortada ve ikon → yazı her seçenekte 8. Yeni ikon eklenirse boşlukları ölçülüp buraya yazılır. */
.cd-page .cl-icon-seg--labelled .cl-part-icon--main {
    margin-inline: -2.9px;
}

.cd-page .cl-icon-seg--labelled .cl-part-icon--auxiliary {
    margin-inline: -4.9px;
}

.cd-page .cl-icon-seg--labelled .cl-part-icon--reference {
    margin-inline: -7.9px;
}

.cd-page .cl-icon-seg-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Telefonda (< 640) üç seçenek sığmaz: adın son kelimesi gizlenir ("Ana parça" → "Ana"); ekran okuyucu adı tam (radyonun aria-label'ı). */
@media (max-width: 639px) {
    .cd-page .cl-icon-seg-tail {
        display: none;
    }
}

.cd-page .cl-icon-seg-input:disabled + .cl-icon-seg-thumb {
    cursor: default;
    opacity: 0.4; /* segment seçicinin kapalı seçeneğiyle aynı */
}

/* Alt parça türünün ikonu (kullanıcı kararı 2026-10-12; resources/svg/part-*.svg ile aynı çizim, CSS maskesi: tablo hücresinde Filament
   SVG'yi temizler). 20 × 20, renk yazının rengi (currentColor); çizgi 24 ızgarada 1,5 = 20 px'de ekranda 1,25 (ikon standardı). */
.cl-part-icon {
    display: inline-block;
    flex: none;
    width: var(--cd-icon);
    height: var(--cd-icon);
    background: currentColor;
    -webkit-mask: var(--cl-part-icon) center / contain no-repeat;
    mask: var(--cl-part-icon) center / contain no-repeat;
}

.cl-part-icon--main { --cl-part-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.5' r='1.75'/%3E%3Cpath d='M7.75 5.5H16.5A3.25 3.25 0 0 1 16.5 12H15.4'/%3E%3Cpath d='M12 8.6L15.4 12L12 15.4L8.6 12Z'/%3E%3Cpath d='M8.6 12H7.5A3.25 3.25 0 0 0 7.5 18.5H16.25'/%3E%3Ccircle cx='18' cy='18.5' r='1.75'/%3E%3C/svg%3E"); }
.cl-part-icon--auxiliary { --cl-part-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.375' cy='7.25' r='1.75'/%3E%3Cpath d='M10.125 7.25H14.125A3.25 3.25 0 0 1 14.125 13.75A3.25 3.25 0 0 0 10.875 17V18.5'/%3E%3C/svg%3E"); }
.cl-part-icon--reference { --cl-part-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='1.75'/%3E%3C/svg%3E"); }

/* Tabloda: Parça Kodu hücresinin solunda türün ikonu (ikincil renk), referansın Workspaces tablosundaki ad işareti gibi dikey ortada ve
   yazıya 12; sağında kod + altında gri ad. Üzerine gelince adı ipucu. */
.cl-code-cell.cl-code-cell--marked {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.cl-code-cell--marked > .cl-part-icon {
    color: var(--cd-text-secondary);
}

/* GİYSİ İKONU (kullanıcı kararı 2026-11-07; docs/garment-icons.md, App\Support\GarmentIcon): Ürün Ağaçları'nda kodun solunda, 39,1 × 37'lik
   yuvanın ortasında (satırı uzatmaz; kodlar alt alta hizalı), yazıya 12. Dolgu ürünün rengi (--cl-garment-fill = --cl-pns-*), kenar o rengin
   %30 koyusu (SVG'nin kendi stilinde). "Koruyucu" ürünlerde yuvanın sağ üst köşesinde yeşil kalkan; çevresinde sayfa zemini renginde 2 px. */
.cl-garment {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 39.1px;
    height: 37px;
}

.cl-garment-icon,
.cl-garment-icon > svg,
.cl-garment-shield > svg {
    display: block;
}

.cl-garment-shield {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0;
}

.cl-garment svg path {
    vector-effect: non-scaling-stroke;
}

/* İkonu olmayan satırda (ör. rolsüz kullanıcı) ikonun yeri: yazı diğer satırlarla hizalı kalır. */
.cl-code-cell--marked > .cl-icon-spacer {
    flex: none;
    width: var(--cd-icon);
}

.cl-code-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Tür filtresi seçeneklerinde adın solunda türün ikonu (yazıya 8). */
.cl-part-icon-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ARŞİVLİ SATIR GRİ (kullanıcı kararı 2026-10-17; referansın DataTable `tr[data-dimmed]`'i, önce pasif satır için ölçüldü; App\Support\RecordStatus):
   birincil yazı soluk (--cd-text-muted), ikincil ve soluk yazı "disabled" (koyuda %35 beyaz), renkli işaretler (renk yuvarlağı, tür ikonu,
   etiket / rozet, görsel) %50; ⋮ düğmesi ve hücredeki alanlar etkilenmez (yalnızca ⋮'u taşımayan hücreler soluklaşır). */
.cd-page .fi-ta-ctn tbody tr.cl-row-dimmed > td:not(:has(.fi-ta-actions)) {
    /* Referansın soluk satırı: hücredeki bütün yazılar tek ton soluk (#898781). */
    --cd-text-primary: var(--cd-gray-400);
    --cd-text-secondary: var(--cd-gray-400);
    --cd-text-muted: var(--cd-gray-400);
}

.cd-page .fi-ta-ctn tbody tr.cl-row-dimmed > td :is(.cl-dot, .cl-part-icon, .cl-tag, .fi-badge, img) {
    opacity: 0.5;
}

/* Durum rozeti "Aktif" / "Arşivlendi" — referansın "Archived" rozeti (Credential vaults satırında ölçüldü 2026-10-17): 20 yüksek, iç boşluk
   0 8, köşe 5, nötr zemin (%5), ikincil yazı 12 / 15 500; arşivde başta 16 px arşiv ikonu (Tabler archive, CSS maskesi), yazıya 4
   (App\Support\RecordStatus::badge). Tabloda adın 8 sağında (arşivli satır soluk değil); düzenleme sayfasında başlığın 12 sağında; Geçmiş ve
   İşlem Kayıtları'nda durum değişikliğinin değeri. */
.cl-status-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    background: var(--cd-bg-neutral); /* referansın bg-neutral'ı (koyuda %5 beyaz) */
    color: var(--cd-text-secondary);
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.cl-status-badge--archived {
    gap: 4px;
}

.cl-status-badge--archived::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2'/%3E%3Cpath d='M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10'/%3E%3Cpath d='M10 12l4 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2'/%3E%3Cpath d='M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10'/%3E%3Cpath d='M10 12l4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fi-header-heading:has(.cl-status-badge) {
    display: flex;
    align-items: center;
}

.fi-header-heading .cl-status-badge {
    margin-left: 12px;
}

/* Ayrıntı panelinin başlığında da adın 12 sağında (başlık satırı aralığı 8 + 4; referansın panelindeki gibi). */
.cl-detail-title .cl-status-badge {
    margin-left: 4px;
}

/* Arşivli kaydın ilk hücresinde adın 8 sağında "Arşivlendi" rozeti (referansın "Archived" rozeti). */
/* Hücrede alt alta liste (kullanıcı kararı 2026-10-19; Tedarikçiler › Kullanıcılar): her öğe kendi satırında, satır arası boşluksuz. */
.cl-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cl-dim-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.cl-dim-name > .cl-status-badge {
    flex: none;
    margin-left: 8px;
}

/* Arşivli kaydın adı başka yerlerde geçtiğinde de rozet adın 8 sağında: seçim kutuları (seçili değer ve
   liste), komut paleti sonuçları, ürün ağacı kartlarının tedarikçisi. */
:is(.choices__item, .cd-palette-option-label, .cl-tree-supplier, .cl-tree-card .cl-code-main) .cl-status-badge {
    margin-left: 8px;
}

/* Ürün ağacında arşivlenmiş parça olan ürünün kodunun 6 sağında uyarı işareti: Tabler alert-triangle 16 px,
   turuncu ton (tint yazı rengi, iki modda okunur); üzerine gelince adı ipucu (cover-lab-tooltips.js). */
.cl-warn-icon {
    flex: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: middle;
    background: var(--cd-tint-orange-fg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Arşivli kayıt HER TABLODA gri: kendi satırı zaten gri (cl-row-dimmed); başka bir tabloda adı geçtiğinde de
   (Kullanıcılar › Cari, Alt Parçalar / Liste Fiyatları / Ürün Ağaçları › Tedarikçi, İşlem / Hata Kayıtları › Kayıt, Kullanıcı …) adı, arşivli
   satırın birincil yazısıyla aynı griyle yazılır; rozet kendi rengini korur. Adın kabı rozeti doğrudan taşıyan öğedir (RecordStatus::withTip). */
.cd-page .fi-ta-ctn tbody td :is(span, a, div):has(> .cl-status-badge--archived) {
    color: var(--cd-gray-400);
}

/* "Ürün Kodu" hücresi: referansın API keys › "Key" hücresi gibi (ölçüldü): üstte ürün kodu 14 / 20 birincil,
   hemen altında giysi 13 / 17 soluk. */
.cl-code-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cl-code-main {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    white-space: nowrap;
}

.cl-code-sub {
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
    white-space: nowrap;
}

/* "Kumaş" hücresi (renk + kumaş tipi + kalınlık; kullanıcı kararı 2026-10-12): referansın API keys › "Linked account" hücresi gibi (ölçüldü):
   solda 20 px renk yuvarlağı dikey ortada, yazıya 6; sağında üstte kumaş tipi 14 / 20 ikincil, hemen altında kalınlık 13 / 17 soluk. */
.cl-fabric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cl-fabric .cl-dot {
    flex: none;
    width: 20px;
    height: 20px;
}

.cl-fabric-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cl-fabric-type {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
    white-space: nowrap;
}

.cl-fabric-sub {
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
    white-space: nowrap;
}

/* PNS-CL renk noktası: daire, renk --cl-pns-* token'ından. Etrafında, yuvarlağa bitişik (aralık 0) 2 px çember, rengi yuvarlağın kendi renginin
   %20 koyusu (kullanıcı kararı 2026-10-14: beyaz yuvarlak açık modda görünmüyordu; her renkte, her yerde). Çember kutunun dışına çizilir
   (box-shadow), yerleşim değişmez. */
.cl-dot {
    --cl-dot-color: var(--cl-pns-w);
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cl-dot-color);
    /* Çember yuvarlağın İÇİNE çizilir: dışa taşan çember filtre menüsünde ve seçim kutularında kırpılıyordu; dış çap
       değişmez (16, Kumaş hücresinde 20), çember 2 px, rengi yuvarlağın renginin %30 koyusu (önce %20). */
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cl-dot-color) 70%, #000);
}

/* Seçim kutusu seçeneklerinde ve seçili etiketinde nokta satır içi, dikeyde ortalı. */
.choices__item .cl-dot {
    display: inline-block;
    vertical-align: middle;
}
.cl-dot--w { --cl-dot-color: var(--cl-pns-w); }
.cl-dot--y { --cl-dot-color: var(--cl-pns-y); }
.cl-dot--o { --cl-dot-color: var(--cl-pns-o); }
.cl-dot--r { --cl-dot-color: var(--cl-pns-r); }
.cl-dot--g { --cl-dot-color: var(--cl-pns-g); }
.cl-dot--b { --cl-dot-color: var(--cl-pns-b); }
.cl-dot--a { --cl-dot-color: var(--cl-pns-a); }

/* Ürün ağacı kurucusu (sürükle-bırak): solda parça kartları, sağda bırakma kutusu; yerleşen kartta zorunlu miktar alanı.
   Yalnızca token kullanır; köşe 0, gölge yok. */
.cl-tree {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: var(--cd-tree-gap);
}

/* İki alan arasında yön işareti (kullanıcı kararları 2026-10-13; önce yuvarlak içinde küçük ok denendi): çerçevesiz, büyük ince ">" (Tabler
   chevron, 40 px kutu, çizgi 1,5, soluk renk), kutuların dikey ortasında. Telefonda alanlar alt alta, işaret aşağıyı gösterir. */
.cl-tree-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 40px;
    height: 40px;
    margin-top: 26px; /* başlık satırı (20 + 6): işaret kutuların ortasında */
    color: var(--cd-text-muted);
}

.cl-tree-arrow svg {
    width: 40px;
    height: 40px;
}

.cl-tree-arrow svg path {
    vector-effect: non-scaling-stroke;
    stroke-width: 1.5px;
}

@media (max-width: 700px) {
    .cl-tree {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-tree-arrow {
        justify-self: center;
        margin-top: 0;
        rotate: 90deg;
    }
}

/* Listedeki alt parça sayısı: kutunun 8 altında, sağa yaslı, tablo sayacı gibi 14 / 20 soluk. */
.cl-tree-count {
    margin: 8px 0 0;
    padding-right: 44px; /* kartların sağ kenarıyla aynı hiza: daraltma düğmesinin yerine (36 + 8) taşmaz */
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: var(--cd-text-muted);
}

/* Nedeni altında yazan kalıcı kapalı düğme (kapalı Sil gibi, %40; kullanıcı kararı 2026-10-13: yeni kayıtta / adres kaydedilmemişken "Davet
   e-postası gönder"). Zorunlu alan bekleyen Kaydet'in %70'inden ayrı. Neden yazısı düğmenin 8 altında (formun 16'lık satır aralığından -8). */

/* Hata Kayıtları ayrıntı paneli: uzun mesaj / adres / sınıf adı satır içinde kırılır; yığın en altta eşit
   genişlikli rakamlı 11 / 16 ikincil yazı, alan zemininde, köşe 8, iç boşluk 12, yatay kayar. */
.cl-detail-row dd.cl-error-message {
    overflow-wrap: anywhere;
    white-space: normal;
}

.cl-error-trace {
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    border-radius: 8px;
    background: var(--cd-fill-field);
    font-family: var(--cd-font-sans);
    font-variant-numeric: tabular-nums slashed-zero;
    font-size: 11px;
    line-height: 16px;
    color: var(--cd-text-secondary);
    white-space: pre;
}

/* Hız Kayıtları ayrıntı paneli (kullanıcı kararı 2026-10-16; partials/speed-details): tek tek ölçümler küçük tabloda, panelin bilgi
   listeleriyle aynı yazı (12 / 17); başlık satırı soluk 500, satırlar arasında tablonun %5 çizgisi, sayılar sağa yaslı ve eşit genişlikli;
   %90'dan yavaş ölçümün süresi tehlike rengi. */
.cl-speed-samples-title {
    margin: 0 0 8px;
}

.cl-speed-samples table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 17px;
    font-variant-numeric: tabular-nums;
}

.cl-speed-samples th,
.cl-speed-samples td {
    padding: 6px 8px;
    text-align: left;
    white-space: nowrap;
}

.cl-speed-samples :is(th, td):first-child {
    padding-left: 0;
}

.cl-speed-samples :is(th, td):last-child {
    padding-right: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-speed-samples th {
    font-weight: 500;
    color: var(--cd-text-muted);
}

.cl-speed-samples td {
    color: var(--cd-text-primary);
}

.cl-speed-samples .cl-num {
    text-align: right;
}

.cl-speed-samples td.cl-speed-slow {
    color: var(--cd-text-danger);
}

/* Formun bölümleri (kullanıcı kararı 2026-10-13; referansın "Create deployment" bölümleri, ölçüldü): Filament Section::aside() (.cl-form-aside).
   Çerçeve, zemin ve iç boşluk yok; geniş ekranda solda 224 px'lik (--cl-aside-w) sütunda bölüm adı 15 / 20 580 birincil ve 8 altında açıklama 14 / 20
   ikincil, 28 aralıkla sağda alanlar; dar ekranda alt alta (aralık 16). İlk bölüm dışındakilerin üstünde 32 + 1 px %10 çizgi + 32. */
.cd-page .fi-section.cl-form-aside {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important; /* Filament'in items-start'ı dar ekranda alanları daraltıyordu */
    gap: 16px;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

@media (min-width: 1100px) {
    .cd-page .fi-section.cl-form-aside {
        flex-direction: row;
        align-items: flex-start !important;
        gap: 28px;
    }

    .cd-page .fi-section.cl-form-aside > .fi-section-header {
        flex: 0 0 var(--cl-aside-w);
        width: var(--cl-aside-w);
    }
}

.cd-page .fi-section.cl-form-aside > .fi-section-header {
    padding: 0 !important;
}

.cd-page .fi-section.cl-form-aside > .fi-section-header > div > .grid {
    gap: 8px !important;
}

.cd-page .fi-section.cl-form-aside .fi-section-header-heading {
    font-weight: 580 !important;
    text-transform: none;
}

.cd-page .fi-section.cl-form-aside .fi-section-header-heading::first-letter {
    text-transform: none;
}

.cd-page .fi-section.cl-form-aside .fi-section-header-description {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-secondary) !important;
}

.cd-page .fi-section.cl-form-aside > .fi-section-content-ctn {
    flex: 1 1 0;
    min-width: 0;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.cd-page .fi-section.cl-form-aside > .fi-section-content-ctn > .fi-section-content {
    padding: 0 !important;
}

.cd-page :not(:first-child) > .fi-section.cl-form-aside {
    margin-top: 16px; /* formun 16'lık aralığına eklenir: çizginin üstü 32 */
    padding-top: 32px;
    border-top: 1px solid var(--cd-border);
}

/* Kart alanları ekranın altına kadar uzar: formdan ağaca kadar her kap esnek sütun olur, sayfa (en az ekran boyu)
   kalan yüksekliği kutulara verir; kart çoksa kutu içinde kayar, en az 260. CSS ile (betikle ölçülseydi açılışta kayma olurdu). */
.cd-page .fi-page.cl-form-page--sticky form#form :is(div, section):has(.cl-tree) {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.cd-page .fi-page.cl-form-page--sticky form#form .cl-tree {
    flex: 0 0 auto; /* kart listeleri kırpılmaz, kendi boylarında uzar */
    min-height: 0;
}

.cd-page .fi-page.cl-form-page--sticky form#form :is(.cl-tree-list, .cl-tree-box) {
    flex: none;
    min-height: 0;
    max-height: none;
}

/* Ürün ağacı bölümü (.cl-tree-section): yukarıdaki esnek sütun kuralı bölümü de sütuna çevirir; geniş ekranda bölüm adı solda, kartlar sağda
   kalır ve kart alanı yine ekranın altına kadar uzar. */
@media (min-width: 1100px) {
    .cd-page .fi-page.cl-form-page--sticky form#form section.fi-section.cl-form-aside.cl-tree-section {
        flex-direction: row;
        align-items: stretch !important;
    }
}

.cl-tree-title {
    margin-bottom: 6px;
    color: var(--cd-text-secondary);
}

/* ÜRÜN AĞACI KURUCUSU — İKİ HAVUZ (kullanıcı kararı 2026-11-08; önce ana / yardımcı bölümleri ayrıydı): solda alt parçalar (tek liste, başlıkta "Yardımcı parça | Ana parça"
   seçici), sağda ürün ağacı (tek liste: ana parça en üstte, rozetli). İki sütun yan yana, aralarında yön işareti; başlık satırı iki tarafta aynı yükseklikte (seçici 28), böylece
   iki listenin öndeki kartları aynı hizada başlar. */
.cl-tree-col {
    min-width: 0;
}

.cl-tree-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
}

/* Listeler kırpılmaz (açılan liste en çok 3,5 kart gösterir, gerisi kayar: aşağıdaki KART YIĞINI); yükseklik kartlara göre. */
.cl-tree-list,
.cl-tree-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: visible;
    min-width: 0;
}

/* NOT KARTLARI (yer tutucu): ağaç tarafında ana parça yokken en üstte uyarı tonlu "Ana parça gerekli", yardımcı parça yokken en altta "Yardımcı parçalar"; soldaki liste boşalınca sönük not.
   Kart gibi çerçeveli (köşe 12, 1 px halka, zemin yok), kart boyunda (95), yazı çerçevenin ortasında; sürüklenmez, tıklanmaz. Listenin içinde (kartlarla aynı yığın) durdukları için
   öndeki kartın hizası ve yığın kuralları değişmez; ana parça yokken öndeki kart bu nottur. */
.cl-tree-card.cl-tree-card--note {
    box-sizing: border-box;
    min-height: 95px;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    box-shadow: inset 0 0 0 1px var(--cd-border) !important;
    pointer-events: none;
    cursor: default;
}

.cl-tree-card.cl-tree-card--warn {
    box-shadow: none !important; /* çerçeveyi kutunun halkası (.cl-tree-box.is-empty::after) çizer: kartın 4 dışında */
}

.cl-tree-card--note .cl-part-icon,
.cl-tree-card--note .cl-code-main {
    color: var(--cd-text-secondary);
}

.cl-tree-card--note .cl-code-cell {
    max-width: 100%;
    min-width: 0;
}

.cl-tree-card--note .cl-code-text {
    min-width: 0;
    white-space: normal;
}

.cl-tree-card--note .cl-code-sub {
    white-space: normal;
}

.cl-tree-card--quiet .cl-code-main {
    color: var(--cd-text-muted);
}

/* Ağaçtaki ana parça kartının rozeti: kod hücresi ile fiyat arasında sağa yaslı. */
.cl-tree-card-top > .cl-tree-main-badge {
    flex: none;
    margin-left: auto;
    margin-right: 4px;
}

/* Kaydırma çubuğu görünmez (liste yine fare tekerleğiyle kayar); sürüklerken sağ kenarda çubuk çıkmaz. */
.cl-tree-list,
.cl-tree-box {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cl-tree-list::-webkit-scrollbar,
.cl-tree-box::-webkit-scrollbar {
    display: none;
}

.cl-tree-box {
    padding: 6px;
    border: 1px dashed var(--cd-border);
}

.cl-tree-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px var(--cd-tree-gap) 6px 6px;
    background: var(--cd-bg-neutral);
    cursor: grab;
}

.cl-tree-card:hover {
    background: var(--cd-fill-ghost-selected);
}

.cl-tree-card.is-blocked {
    opacity: 0.4;
    cursor: default;
}

.cl-tree-card--placed {
    cursor: grab;
}

/* Alt satır: fiyat solda, miktar kutusu en sağda (tedarikçinin altında; kullanıcı kararı 2026-10-12). Tür etiketi yok (ikon kodun solunda). */
.cl-tree-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: var(--cd-control-h-sm); /* miktar kutusu olmayan (soldaki) kartlar da aynı yükseklikte */
}

/* Alt satırda tedarikçi kodla aynı hizada başlar (ikon 20 + aralık 12); sağ üstte birim fiyat (kullanıcı kararı 2026-10-15: tedarikçi ile fiyat
   yer değiştirdi). Uzun tedarikçi adı miktar kutusuna dayanınca "…" ile kesilir. */
.cl-tree-card-bottom .cl-tree-supplier {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: calc(var(--cd-icon) + 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.cl-tree-card-top > .cl-tree-price {
    flex: none;
    text-align: right;
}

.cl-tree-price {
    white-space: nowrap;
    color: var(--cd-text-secondary);
}

.cl-tree-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Dar sütunda kartın içeriği taşmaz: kod ve ad sığmazsa "…" ile kısalır, fiyat yerinde kalır; kart sütundan geniş olmaz. */
.cl-tree-card {
    min-width: 0;
}

.cl-tree-card-top > .cl-code-cell,
.cl-tree-card-top .cl-code-text {
    min-width: 0;
}

.cl-tree-card-top .cl-code-main,
.cl-tree-card-top .cl-code-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Türün ikonu kodun solunda (Alt Parçalar tablosundaki gibi, ikincil renk; kullanıcı kararı 2026-10-12); üzerine gelince adı ipucu. */
.cl-tree-type {
    display: inline-flex;
    flex: none;
    color: var(--cd-text-secondary);
}

/* Tedarikçi: kartın sağ üst köşesinde, kodla aynı satırda, sağa yaslı. */
.cl-tree-supplier {
    flex: none;
    text-align: right;
    white-space: nowrap;
}

/* Miktar girişi (yalnızca yer tutucu "Miktar"; etiket yok; varsayılan 1): alan standardının küçük hâli, ok tuşları ve odak çizgisi yok. */
.cl-tree-qty {
    flex: 0 0 auto;
    width: 5.5em;
    min-width: 0;
    height: calc(14px * 1.6);
    padding: 0 6px;
    color: var(--cd-text-primary);
    background: var(--cd-fill-field);
    border: 0;
    font-size: 14px;
    line-height: calc(14px * 1.6);
    -moz-appearance: textfield;
    appearance: textfield;
}

.cl-tree-qty::-webkit-outer-spin-button,
.cl-tree-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cl-tree-qty::placeholder {
    color: var(--cd-text-muted);
    opacity: 1;
}

.cl-tree-qty:focus {
    outline: 0;
}

/* Tablo kutusu taşan içeriği kırpmaz: filtre açılır listeleri kısa bir tablodan uzun olabilir (altındaki seçenekler kırpılıp görünmez olurdu).
   Yatay kaydırma tablo gövdesinin (.fi-ta-content) kendi kaydırmasıdır; köşe ve gölge olmadığı için kutunun kırpması gerekmez. */
.fi-ta-ctn {
    overflow: visible !important;
}

/* Para Birimleri sayfası: üst satırda Dolar ve Euro kartları yan yana (Güncelle sayfa başlığının
   sağında); altında tam genişlikte kur tablosu (aradaki boşluk Filament'in içerik aralığı).
   Kartlar referansın Dashboard kartı (Organization credits; Console Card, ölçüldü): zemin surface-1 (sayfa zemini) + 1 px %10 iç halka,
   köşe 12, iç boşluk 16, en az 136 yüksek, geniş ekranda 306 geniş; içi dikey, aralık 10; görsel şeridinin altında (ad satırı yok,
   kullanıcı kararı 2026-10-12) döviz alış ve döviz satış yan yana (kullanıcı kararı 2026-10-12; iki eşit sütun, arası 12): etiket 13 / 16 soluk, altında
   kur 28 / 36 580 birincil (kullanıcı kararı 2026-10-12; 22 ve 33 denendi); kartlar eşit genişlikte, en az 306, içerik sığmazsa genişler; kaynak / tarih notu yok (tabloda var).
   Kartlar arası 12 (referansın kart aralığı). */
.cl-rates-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cl-rate-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* Kur kartı + grafik TEK kart: dış kart (.cl-rate-pair) çerçeve (1 px %10 iç halka, köşe 12) ve zemin;
   kur kartı onun ÜSTÜNDE ayrı bir kart gibi durur (kendi halkası, köşesi 12, zemini; dış kartın sol kenarını örter), grafik sanki onun
   altından sağa doğru çıkar. Gölge yok (kullanıcı kararı 2026-11-01: portalın ve referansın kartları gölgesiz; önce hafif gölgesi vardı).
   Renkli görsel şeridinin dört köşesi de yuvarlak (12). Parçalar eski kartların ölçüsünde (306 × 172). */

/* YAN YANA / ALT ALTA — HER ZAMAN ALANIN GENİŞLİĞİNİ DOLDURUR (kullanıcı kararları 2026-11-01; Panel ve Döviz Kurları): bir para biriminin
   kartında kur kartı ile grafik yan yana; ideal ölçüler kur kartı 306 (kurlar 28 px), grafik 306 (çizim 274). ALIŞ İLE SATIŞ HER ZAMAN YAN
   YANA. Kart 612'den darsa grafik ideal genişliğine (306) kadar yer alır, kur kartı en az 232 kalır (kurlar yan yana en az 20 px) ve kur yazısı
   kartın genişliğine göre küçülür (en fazla 28). Alan 924'ten genişse Dolar ve Euro yan yana, yarı yarıya; darsa alt alta, tam genişlikte (kur
   kartı 306, grafik kalan yer). Alan 612'den darsa (telefon, kenar menülü tablet) kur kartı ile grafik de alt alta. Kurallar ekrana değil
   kartların alanına bakar (container query). */
.cl-rate-cards {
    container: cl-rate-cards / inline-size;
    /* Kap içerikten genişlik alamaz (inline-size): üst kap sola yaslasa da (.cl-rates-top) bulunduğu alanın tamamını kaplar. */
    align-self: stretch;
}

/* Kabın kendisi sorgulanamaz: sütun sayısı bir üst kabın (.cl-rates-top) genişliğinden. */
.cl-rates-top {
    container: cl-rates / inline-size;
}

@container cl-rates (min-width: 924px) {
    .cl-rate-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Grafik (kullanıcı kararı 2026-10-12; kur kartıyla birleşik, sağ parça): görsel şeridi yok. Sağ üstte Alış | Satış seçicisi, altta çizim
   (2026-11-01'den beri raporların küçük grafiğinin stilinde; aşağıda). Çizgi her iki seride de küçük grafiklerin mavisi (--cd-text-accent;
   kullanıcı kararı 2026-11-02; önce Alış yeşildi); seçicide tek seri görünür. */

/* Nokta çizimin üstünde ayrı öğe (çizim esneyince yuvarlak kalsın; cover-lab-panel.js yerleştirir). */

:is(.cl-rate-chart__tip, .cl-rate-chart__dot)[hidden] {
    display: none;
}

/* Tablolardaki tutarlar: para birimine göre renk ayrımı yok; sınıflar (App\Support\Money) korunur. */
.cl-money--try {
    color: var(--cd-text-primary);
}

.cl-money--usd {
    color: var(--cd-text-primary);
}

.cl-money--eur {
    color: var(--cd-text-primary);
}

/* Fiyat hücreleri (Liste Fiyatı, Müşteri Fiyatı) diğer hücrelerle aynı kalınlıkta, 400 (kullanıcı kararı 2026-10-17: yazı kalınlıkları standarda
   çekildi; önce 700'dü, referansın tablolarında kalın yok). .cl-price sınıfı yer tutucu olarak kalır. */

/* Fiyat ve Bindirilmiş Maliyet hücrelerinin alt satırı ("%30 Kâr → 0,72 $", "%6 Genel Gider → 0,14 $"; kullanıcı kararı 2026-10-17):
   gri (tutar renginden bağımsız). */
.cl-sub-cell .cl-code-sub,
.cl-sub-cell .cl-code-sub * {
    color: var(--cd-text-muted);
}

/* Fiyat formu › hesap (forms/components/price-calculation; kullanıcı kararı 2026-10-20): maliyetten liste fiyatına satırlar; etiket birincil, tutar
   sağa yaslı birincil; ara toplamların (Bindirilmiş Maliyet, Liste Fiyatı) üstünde 1 px %10 çizgi ve 500; kâr taban kârın altındaysa kırmızı. */
.cl-price-calc {
    max-width: 560px;
}

/* Hesabın sağ üstünde ₺ | $ (kullanıcı kararı 2026-10-21; Fiyat kontrol panelindeki seçicinin aynısı, 28 yüksek), satırlara 4. */
.cl-price-calc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

/* Şelalenin kimin fiyatı olduğu: solda soluk 13 / 17. */
.cl-price-calc-caption {
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cd-page .cl-price-calc-cur {
    --cd-seg-h: 28px;
    flex: none;
}

.cd-page .cl-price-calc-cur .cl-segmented-option > span {
    padding: 0 10px;
}

.cl-price-calc-list {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Satır iki sütun: solda ad ve yüzde ("Ana Bayi İskontosu %15", "Kâr %15,25"), sağda değer; ok yok
   (ortadaki ok sütunu denendi, kaldırıldı). */
.cl-price-calc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.cl-price-calc-row dt {
    color: var(--cd-text-primary); /* bütün satır adları birincil; yanlarındaki yüzde / ayrıntı soluk */
}

.cl-price-calc-row dt span {
    margin-left: 4px; /* şelalede satırın ayrıntısı: "Ana Bayi %15", "Peşin %12", "90 gün vade" (2026-10-21) */
    font-weight: 400;
    color: var(--cd-text-muted);
}

/* Fiyat şelalesinde düşülen kalemler (ticari iskonto, vade farkı, maliyet, genel gider) adı, ayrıntısı ve değeriyle gri (2026-10-21). */
.cl-price-calc-row.cl-price-calc-row--deduct dt,
.cl-price-calc-row.cl-price-calc-row--deduct dd {
    color: var(--cd-text-muted); /* .cl-price-calc-row dd'nin birincil renginden sonra gelmese de geçerli (daha belirgin seçici) */
}

/* Fiyat şelalesinde son satır (Kâr) taban kâr marjının altındaysa kırmızı (2026-10-21). */
.cl-price-calc-row.is-below-floor dd {
    color: var(--cd-text-danger);
}

.cl-price-calc-row dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    color: var(--cd-text-primary);
}

.cl-price-calc-row--sum {
    border-top: 1px solid var(--cd-border);
    font-weight: 500;
}

/* Kâr satırında yüzde adın yanında, adla aynı renk ve kalınlıkta, parantezsiz (parantez muhasebede eksi demek): "Kâr %15,25". */

.cl-price-calc-empty {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--cd-text-muted);
}

/* Toplu Güncelle penceresinin bölümleri (PricingBulkAction; kullanıcı kararları 2026-10-20): her bölüm açılır başlık (rol sayfasındaki açılır
   bölümler gibi: ok 16, açıkken 90° döner, 150 ms; başlık 14 / 20 500, altında açıklama 13 / 18 ikincil; kapalıyken sağda soluk "Değişmez").
   Kullanıcı güncelleyeceği bölümü açar, kapalı bölüm güncellenmez. Açıkken alanlar başlığın 12 altında, ok sütununun hizasından (22).
   Her bölümün (ilki dahil) üstünde 16 + 1 px %10 çizgi + 16. */

/* Her bölümün üstünde çizgi, ilki (Genel gider) dahil: açıklamayla bölümler arasında. */

/* Bir tutar (sayı + para birimi simgesi) hiçbir zaman satır sonunda bölünmez; birden çok para birimli maliyette tutarlar arasında kırılabilir. */
.cl-money--try,
.cl-money--usd,
.cl-money--eur {
    white-space: nowrap;
}

/* Müşteri formu › İskonto değerleri (kullanıcı kararı 2026-10-21; CustomerResource::discountValuesHtml): girilen alan yok, sistem yazar. Dört sütun
   (Ticari, Ödeme, Özel, Net): üstte başlık (alan başlığı 14 / 14 500), 8 altında BEYAZ değer 14 / 20 (birincil), gerekirse altında soluk not
   13 / 17 (Ödeme'de ödeme şekli · vade); sütunlar arasında "+", "+", "→" soluk, değerin satırında. Uyarı ikonu başlığın yanında (.cl-info-tip--warn). */
.cl-discount-values {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 16px;
    row-gap: 12px;
}

.cl-dv {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 56px;
}

.cl-dv-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-dv-value {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
}

.cl-dv-sub {
    margin-top: -4px;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
    white-space: nowrap;
}

/* Müşteri formunda Özel İskonto kutusu zincirin içinde: Ticari + Ödeme, Özel kutusu, → Net tek satırda;
   değerler ve işaretler kutunun dikey ortasında (değer satırı kutu boyunda 32). */
.cl-discount-form > .fi-fo-component-ctn,
.cl-discount-form > div {
    display: flex !important;
    flex-wrap: nowrap; /* Ticari, Ödeme, Özel, Net ve KolayBi Sabit tek satırda; telefonda kırılır */
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 12px;
}

.cl-discount-form .cl-discount-values {
    flex-wrap: nowrap;
    column-gap: 10px;
}

@media (max-width: 639px) {
    .cl-discount-form > .fi-fo-component-ctn,
    .cl-discount-form > div,
    .cl-discount-form .cl-discount-values {
        flex-wrap: wrap;
    }
}

.cl-discount-form .fi-fo-component-ctn > *,
.cl-discount-form > div > * {
    grid-column: auto !important;
}

.cl-discount-form .cl-dv-value {
    line-height: 32px;
}

.cl-discount-form .cl-dv-sep {
    padding-top: 28px; /* başlık 14 + 8 + (32 − 20) / 2 */
}

.cl-discount-form .cl-w-number {
    width: 90px;
}

/* "=" düğmesi: Net ile KolayBi Sabit arasında, değerlerin satırında; 32 × 32 ikincil düğme, "=" ortada.
   İnaktifken (değerler eşit, sabit iskonto yok, eşitlenemez) %40 soluk ve üzerine gelince değişmez; ipucu yine çıkar. */
.cl-discount-form .cl-dv-label {
    white-space: nowrap; /* "KolayBi Sabit" tek satır */
}

/* "=" düğmesinin iki yanındaki boşluk eşit: Net ve KolayBi Sabit sütunları içerikleri kadar (56'lık en az genişlik
   yok), düğmeyle aralarında yalnızca satırın aralığı. */
.cl-discount-form .cl-dv {
    min-width: 0;
}

.cl-dv-sep {
    padding-top: 22px; /* başlık 14 + 8: değerin satırında */
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-muted);
}

/* Oranlı açılır liste seçeneği (ör. müşteri formunda "%5 Bayi", "%12 Peşin"; kullanıcı kararı 2026-10-12): önce oran birincil renkte, bir
   boşluk, sonra açıklama (ad) soluk. Seçili kutuda ve listede aynı. */
.cl-option-rate {
    color: var(--cd-text-primary);
}

.cl-option-desc {
    color: var(--cd-text-muted);
}

/* Diğer Cariler seçeneğinde cari kodu adın 8 sağında (açılır listede ad ile kod arasındaki boşluk düşüyor, kod ada yapışıyordu; 2026-11-04). */
.cl-option-code {
    margin-left: 8px;
}

/* TEK SEÇİMLİ AÇILIR LİSTELERDE × (seçimi temizle) DÜĞMESİ (kullanıcı kararı 2026-10-10; tüm portal): × çiziminin sağ, üst ve alt boşlukları
   EŞİTTİR. Düğme, kutunun sağ ucundaki kare hücredir (kutu yüksekliği × kutu yüksekliği; alan standardındaki ikon hücresi kuralı) ve çizim bu hücrenin
   tam ortasındadır; böylece büyük (51 px) ve küçük (37,5 px) kutularda boşluklar kendiliğinden eşit olur. Choices.js'in varsayılanı (top 50% +
   sabit -10 px, sağda 36 px pay) çizimi 2 px yukarıda ve sağdan uzakta bırakıyordu. */
.choices[data-type*="select-one"] .choices__button {
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1;
    margin: 0 !important;
}

/* KAYIT AYRINTI PANELİ (kullanıcı kararı 2026-10-12; ör. İşlem Kayıtları › Ayrıntılar): referansın sağdan açılan ayrıntı paneli (Console API keys
   › bir anahtara tıklayınca; ölçüldü). Filament slide-over + `.cl-detail-panel`, içerik partials/activity-details. Ekranın sağında, üst / sağ /
   alt kenarlardan 8 içeride, 560 geniş, köşe 12, panel yüzeyi + 1 px %10 halka + büyük gölge; arka perde KARARTMAZ (dışarı tıklayınca kapanır);
   açılış / kapanış 200 ms sağa kayarak. Üst satır 24: kaydın türü 13 / 17 500 ikincil; × 24 × 24 hayalet düğme (üstten 12, sağdan 16).
   Başlık satırı (üst satıra 12) 28: ikon 18 ikincil + ad 16 / 20 500 (aralarında 8). Bilgi listesi (başlığa 20): satır ızgarası 120 px soluk
   etiket + 16 + değer birincil, 12 / 17, satırlar arası 8, gruplar arası 28; iç boşluk yanlarda 16, altta 24. */
.cd-page .fi-modal-window.cl-detail-panel {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: min(var(--cl-detail-w, 560px), calc(100vw - 16px)) !important;
    max-width: none !important;
    height: auto !important;
    border: 1px solid var(--cd-border) !important; /* gerçek çerçeve: içe çizilen halka yapışkan başlığın zemininin altında kalıyordu */
    border-radius: 12px !important;
    background: var(--cd-surface-panel) !important;
    box-shadow: var(--cd-shadow-lg) !important;
    transition-duration: var(--cd-dur-base) !important;
    transition-timing-function: var(--cd-ease-out) !important;
}

/* Yan panelin iskeleti (kullanıcı kararı 2026-10-15; cover-lab-panel.js): tıklandığı an panelin yerinde ve görünüşünde, 200 ms kayarak açılır;
   sunucunun paneli gelince geçişsiz üstüne oturur (html.cl-detail-instant) ve iskelet kalkar. Çubuklar referansın iskeleti (Console API keys
   yüklenirken ölçüldü: --cds-skeleton-base, yazı yüksekliğinde 1em, köşe 8, üzerinde 2 sn doğrusal sonsuz soldan sağa parıltı; hareket azaltılmışsa
   parıltı yok). Düzen panelinki: üst satır 24 (tür 13), başlık satırı 28 (ikon 18 + ad 16), bilgi listesi 120'lik etiket + 16 + değer (12 / 17),
   satırlar arası 8, gruplar arası 28. */
.cl-detail-skeleton {
    position: fixed;
    z-index: 40;
    top: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    width: min(var(--cl-detail-w, 560px), calc(100vw - 16px));
    padding: 12px 16px 24px;
    border: 1px solid var(--cd-border);
    border-radius: 12px;
    background: var(--cd-surface-panel);
    box-shadow: var(--cd-shadow-lg);
    animation: cl-detail-skeleton-in var(--cd-dur-base) var(--cd-ease-out);
    pointer-events: none;
}

@keyframes cl-detail-skeleton-in {
    from { transform: translateX(calc(100% + 8px)); }
    to { transform: translateX(0); }
}

.cl-sk {
    position: relative;
    display: block;
    flex: none;
    height: 1em;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: var(--cd-fill-ghost-hover);
    font-size: 12px;
}

.cl-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, var(--cd-fill-ghost-hover), transparent 65%); /* referansın sweep bandı */
    animation: cl-sk-shimmer 2s linear infinite;
}

/* TABLO İSKELETİ (kullanıcı kararı 2026-10-16; hız planı madde 3; referansın Skeleton / SkeletonGroup'u ölçüldü): tablo verisi sonradan gelirken
   gerçek araç çubuğu ve sütun başlıklarının altında 10 iskelet satırı (vendor/filament-tables/index.blade.php, "cl-skeleton"). Çubuk 1em
   yüksek, köşe 8, zemin iskelet rengi (koyuda %7,5 beyaz); sayfa çizildiği karede görünür ve üzerinden AKAN PARILTI hemen başlar (kullanıcı
   kararı 2026-10-16: referansın gecikmesiz "sweep" modu — 105° bant, %35–%65 arası parlak, 2 sn doğrusal, soldan sağa; önce 0,5 sn gecikip
   "nefes alan" moddu, "geç geliyor / akış yok" bulundu). Yan panellerin iskeletiyle (.cl-sk) aynı parıltı. Satırlarda üzerine gelme / tıklama yok. */
.cl-tsk {
    display: block;
    height: 1em;
    max-width: 100%;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    background: var(--cd-fill-ghost-hover);
}

.cl-tsk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, var(--cd-fill-ghost-hover), transparent 65%);
    animation: cl-sk-shimmer 2s linear infinite;
}

.cd-page .fi-ta-ctn tbody tr.cl-tsk-row {
    pointer-events: none;
}

.cd-page .fi-ta-ctn tbody td.cl-tsk-end .cl-tsk {
    margin-left: auto;
}

/* Onay kutusu sütununun iskeleti (toplu işlemli tablolar; kullanıcı bildirimi 2026-10-18: iskelette bu sütun yoktu, ilk sütunun çubuğu 40 px'lik
   kutu sütununa kayıp satırdan satıra değişen genişlikte çiziliyordu): her satırda kutunun yerinde ve boyunda sabit kare (16 × 16, köşe 4,
   soldan 12). */
.cd-page .fi-ta-ctn tbody tr.cl-tsk-row > td.fi-ta-selection-cell {
    padding: 0 0 0 12px !important;
}

.cl-tsk.cl-tsk--check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* Satır, tablonun standart satır yüksekliğinde (referansın satırı ≈ 45; çoğu tabloda hücre iki satırlı): veri gelince sayfa sıçramaz. */
.cd-page .fi-ta-ctn tbody tr.cl-tsk-row > td {
    height: 45px;
}

/* İçeriği baştan değiştiren çağrı sürerken (cl-reload; ör. Müşteri Fiyatları'nda müşteri seçimi): eski satırların / boş durumun yerinde
   iskelet, sayaç gizli. Satırsızken de sütun başlıkları görünür, altında boş durum (kullanıcı kararı 2026-10-18: Müşteri Fiyatları boşken
   dolu hâli gibi; önce tablo tamamen gizliydi); gövde (gizli iskelet) yalnızca çağrı sürerken. */
.cd-page .fi-ta-ctn tbody tr.cl-tsk-row--reload,
.fi-ta-content.cl-reload-empty:not(.cl-reloading) > table > tbody,
.fi-ta-content.cl-reloading .cl-reload-empty-state,
.cd-page .fi-ta-content.cl-reloading tbody tr.fi-ta-row:not(.cl-tsk-row) {
    display: none;
}

.cd-page .fi-ta-content.cl-reloading tbody tr.cl-tsk-row--reload {
    display: table-row;
}

.fi-ta-content.cl-reloading ~ .cl-pager {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cl-tsk::after { display: none; }
}

@keyframes cl-sk-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .cl-sk::after { display: none; }
}

.cl-sk--13 { font-size: 13px; }
.cl-sk--16 { font-size: 16px; }
.cl-sk--icon { width: 18px; height: 18px; border-radius: 5px; }

.cl-sk-top {
    display: flex;
    align-items: center;
    height: 24px;
}

.cl-sk-title {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    margin-top: 12px;
}

.cl-sk-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.cl-sk-group + .cl-sk-group {
    margin-top: 28px;
}

.cl-sk-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    height: 17px;
}

/* PANEL YIĞINI (kullanıcı kararları 2026-10-24, 2026-10-30; cover-lab-panel.js "PANEL YIĞINI"): panelin içinden açılan başka kaydın hızlı
   bakışı açık panelin ÜSTÜNDE, normal yerinde ve genişliğinde açılır (sağdan kayarak, panelin 200 ms'si) ve alttakini TAMAMEN örter: bütün
   cihazlarda alttaki paneller kaymaz, kenarı görünmez (2026-10-30; önce her kat 24 px sola kayıp kenarından görünüyordu), kaydırılamaz. Üstteki
   kapanınca sağa kayarak gider, alttaki yeniden görünür. Üst katlar Filament'in panel kabının (z 40) üstünde. */

.cd-page .fi-modal-window.cl-detail-panel.cl-stack-panel {
    z-index: 41;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(calc(100% + 8px));
    transition-property: transform;
}

.cd-page .fi-modal-window.cl-detail-panel.cl-stack-panel.is-open {
    transform: translateX(0);
}

.cd-page .fi-modal-window.cl-detail-panel.cl-stack-under {
    overflow: hidden !important;
    transform: translateX(-14px) !important; /* referans: alttaki kat 14 sola kayar, kenarı görünür */
    transition: transform var(--cd-dur-base) var(--cd-ease-out);
}

.cl-stack-dim {
    position: absolute;
    z-index: 20; /* panelin yapışkan başlığının (z 10) da üstünde */
    left: 0;
    right: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--cd-backdrop);
    opacity: 0;
    cursor: var(--cd-cursor-interactive);
    transition: opacity var(--cd-dur-base) var(--cd-ease-out);
}

.cl-stack-dim.is-on {
    opacity: 1;
}

.cl-stack-skeleton {
    display: flex;
    flex-direction: column;
}

/* Üst üste açılan panelin sol üstünde geri oku (kullanıcı kararı 2026-10-30; cover-lab-panel.js "PANEL YIĞINI"): türün solunda küçük ikon
   düğmesi (24 × 24, panelin ▲ ▼ ×'i gibi), ipucunda alttaki panelin adı; basınca bir geri. Yalnızca üst katlarda. */
.cl-stack-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: -4px; /* okun çizimi panelin sol hizasına yakın */
}

html.cl-detail-instant .cd-page .fi-modal-window.cl-detail-panel {
    transition: none !important;
}

.cd-page .fi-modal:has(.cl-detail-panel) .fi-modal-close-overlay {
    background: transparent !important;
}

.cd-page .cl-detail-panel .fi-modal-header {
    padding: 12px 16px 0 !important; /* çerçevenin içinden (referans gibi) */
    border-bottom: 0 !important;      /* Filament'in panel kipindeki yapışkan başlık çizgisi; referansta yok */
    background: var(--cd-surface-panel) !important;
}

.cd-page .cl-detail-panel .fi-modal-heading {
    font-size: 13px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    color: var(--cd-text-secondary) !important;
}

.cd-page .cl-detail-panel .fi-modal-header > .absolute {
    top: 12px !important;
    right: 16px !important;
    inset-inline-end: 16px !important;
}

.cd-page .cl-detail-panel .fi-modal-close-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
}

.cd-page .cl-detail-panel .fi-modal-close-btn svg {
    width: 15px !important;  /* referansın × çizimi 16 px yazı tipinde 8,7 × 8,7 (ölçüldü); Tabler x 15 px'te 7,5 + 1,25 çizgi = 8,75 */
    height: 15px !important;
}

/* Üst satır: tür + işlem numarası (12 / 17 soluk; referansın kimliği gibi basınca kopyalanır, üzerine gelince hayalet zemin). */
.cd-page .cl-detail-panel .fi-modal-heading {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.cd-page .cl-detail-panel .fi-modal-heading,
.cd-page .cl-detail-panel .fi-modal-heading::first-letter {
    text-transform: none !important; /* tür adı zaten cümle düzeninde gelir; esnek kutuda ::first-letter çalışmaz */
}

/* ▲ ▼ (önceki / sonraki kayıt; referansın PrevNext'i: 24 × 24 hayalet düğme, ikon 15, birincil; kapalıyken soluk): ×'in hemen solunda,
   aralıksız (× Filament'in kabında, sağdan 17'de; başlık satırı ona yer bırakır). */
.cd-page .cl-detail-panel .fi-modal-header > div:has(.fi-modal-heading) {
    flex: 1 1 auto;
    min-width: 0;
}

.cd-page .cl-detail-panel .fi-modal-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-detail-nav {
    display: flex;
    margin-left: auto;
}

.cl-detail-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-detail-nav-btn svg {
    width: 15px;
    height: 15px;
}

.cl-detail-nav-btn:not(:disabled):hover {
    background: var(--cd-fill-ghost-hover);
}

.cl-detail-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

html:not(.cl-pointer) .cl-detail-nav-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

/* ⋮ başlık satırının sağında (referans: 28 × 28 hayalet düğme, ikon 20 birincil, panelin sağ iç kenarına yaslı). */
.cl-detail-menu {
    margin-left: auto;
    flex: none;
}

.cd-page .cl-detail-menu .fi-icon-btn {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .cl-detail-menu .fi-icon-btn svg {
    width: var(--cd-icon) !important;
    height: var(--cd-icon) !important;
}

/* İkinci paneldeki düzenle ikonu (⋮'nin yerinde; kullanıcı kararı 2026-10-24): ⋮ ile aynı yer ve ölçü (28 × 28, köşe 7, ikon 20); görünüm
   portalın ikon düğmesi (.cd-btn--icon). */
.cd-page .cl-detail-edit {
    margin-left: auto;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

/* İzin yoksa kapalı (kapalı düğme standardı: %40, ok imleci, hover yok); üzerine gelince ipucu nedenini söyler. */
.cd-page .cl-detail-edit[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    background: transparent;
}

.cd-page .cl-detail-panel .fi-modal-content {
    gap: 0 !important;
    padding: 12px 16px 24px !important; /* başlık satırı üst satıra 12 (referans: üst satır 21–45, başlık 57) */
}

.cl-detail-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.cl-detail-title-icon {
    display: inline-flex;
    flex: none;
    color: var(--cd-text-secondary);
}

.cl-detail-title-icon svg {
    width: 18px;
    height: 18px;
    --cd-icon-stroke: 1.6px; /* referansın başlık ikonu daha kalın (ikon yazı tipinde 578 ağırlık) */
}

/* Fiyat kontrol ikonu (çizgi ve balon) başlıkta da standart çizgi kalınlığında (kullanıcı kararı 2026-10-17; portalın standart çizgisi
   --cd-icon-stroke 1,25 px, :root). */
.cl-price-check .cl-detail-title-icon svg {
    --cd-icon-stroke: 1.25px;
}

.cl-detail-title-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Yan panel başlığının altında açıklama satırı YOK (kullanıcı kararı 2026-10-30; referans gibi: üstte sayfanın adı, ikon ve kaydın adı).
   Panelin konusu listenin başlığında (partials/report-source), faturanın türü "Tür" bilgi satırında (partials/invoice-quickview). */

.cl-report-source-context {
    font-weight: 400;
    color: var(--cd-text-muted);
}

.cl-detail-title h2 {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-detail-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 20px;
}

.cl-detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.cl-detail-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    font-size: 12px;
    line-height: 17px;
}

.cl-detail-row dt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cd-text-muted);
}

.cl-detail-row dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Ayrıntı ve Geçmiş panellerinde değer TEK SATIRDA akar: değerin içindeki ikon, rozet, etiket blok / flex
   çizilse de satır atlatmaz; "eski → yeni" yan yana, sığmazsa yazı gibi kırılır. */
.cl-detail-row dd > :not(.cl-detail-subject) {
    vertical-align: middle;
}

.cl-detail-row dd > :is(div, .fi-badge, .cl-status-badge, .cl-part-icon) {
    display: inline-flex;
}

/* İkonlu değerler (rol, parça türü) panelin satır yüksekliğinde (kullanıcı bildirimi 2026-10-16: Kullanıcılar › Geçmiş'te Rol satırı kaymıştı;
   20 px ikon satırı 17'den 25'e uzatıyor, eski ve yeni değer farklı hizada duruyordu): ikon küçük boy (16), hücre 17 yüksek ve satırın üstüne
   hizalı; eski → yeni aynı hizada, yazı etiketle aynı satırda. */
.cl-detail-row dd :is(.cl-role-cell, .cl-part-icon-label),
.cl-detail-row dd:has(.cl-role-cell, .cl-part-icon-label) > * {
    height: 17px;
    vertical-align: top;
}

.cl-detail-row dd .cl-part-icon {
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
}

/* Geçmiş paneli (⋮ › Geçmiş; partials/record-history): her işlem bir grup (gruplar arası 28, bilgi listesiyle aynı); grubun başında tablodaki
   "İşlem" rozeti + 8 aralıkla soluk "tarih · kişi" (12 / 17); altında 8 aralıkla alanlar. Başlık satırının sağında küçük "Tümü | Sadece
   Fiyat" seçicisi (24 yüksek, seçenek 0 8, 13 / 16; Döviz Kurları'ndaki Alış | Satış ile aynı boy). Kayıt yoksa soluk tek satır. */
.cl-detail-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl-detail-event-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cl-detail-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cl-detail-list:empty {
    display: none;
}

.cd-page .cl-detail-seg {
    --cd-seg-h: 24px;
    margin-left: auto;
    flex: none;
}

.cd-page .cl-detail-seg .cl-segmented-option > span {
    padding: 0 8px;
    font-size: 13px;
    line-height: 16px;
}

.cl-detail-empty {
    margin: 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* Tablodaki rozetin aynısı (İşlem): yazısı kadar geniş, tablodaki ölçüde. */
.cd-page .cl-detail-row .cl-detail-badge {
    width: max-content;
}

/* Değerin konusu (ör. ürüne özel iskontoda ürün kodu): değerin başında, birincil, 8 aralık. */
.cl-detail-subject {
    margin-right: 8px;
}

.cl-detail-old,
.cl-detail-arrow {
    color: var(--cd-text-muted);
}

.cl-detail-arrow {
    margin: 0 4px;
}

/* POPUP BAŞLIK SATIRINDAKİ ALAN (kullanıcı kararı 2026-10-10; ör. Fiyatlar popup'ında Durum: Aktif | Pasif): alan formun akışından çıkar, popup'ın
   sağ üstünde, × düğmesinin solunda durur; dikey ortası × çiziminin dikey ortasıyla aynı, × ile arası popup iç boşluğu (--cd-modal-pad).
   × düğmesi (Filament) popup'ın sağ/üst kenarından --cl-modal-close-inset içeride, --cl-modal-close-size karelik kutunun ortasındaki çizimdir. */
.fi-modal-window {
    --cl-modal-close-inset: 16px;
    --cl-modal-close-size: 28px; /* referansın Create session penceresinde Close 28 × 28 (canlıda ölçüldü 2026-11-12) */
    --cl-modal-close-glyph: 11.25px; /* Tabler x görünen genişliği: 20 px ikonda 24 karenin 6–18 arası (10) + yuvarlak uçlu 1,25 px çizgi */
}

/* ---------------------------------------------------------------------------
 * SEKMELER — referansın Workload identity sekmeleri (kullanıcı kararı 2026-10-25; ölçüldü: Issuers | Rules | Authentication events): altı
 * 1 px %10 çizgili şerit, aralar 2; sekme 32 yüksek, 0 12, 14/20, köşe 8 8 0 0, alt çizgiye -1 taşar; seçili 500 birincil + 2 px birincil alt
 * çizgi; diğerleri 400 soluk, üzerine gelince birincil. Kalın yazının genişliği baştan ayrılır (.cl-tab-sizer): seçilince sekme genişlemez.
 * Kapalı sekme (sonraki sürüm) %40, ipucu sarmalayıcıda (.cl-tab-wrap).
 * ------------------------------------------------------------------------ */
.cl-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    border-bottom: 1px solid var(--cd-border);
}

.cl-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 32px;
    margin-bottom: -1px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-muted);
    white-space: nowrap;
    transition: box-shadow var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-tab-label {
    position: absolute;
}

.cl-tab-sizer {
    visibility: hidden;
    font-weight: 500;
}

.cl-tab[aria-selected="true"],
.cl-tab[aria-current="page"] {
    font-weight: 500;
    color: var(--cd-text-primary);
    border-bottom-color: var(--cd-text-primary);
}

@media (hover: hover) {
    .cl-tab:not(:disabled):hover {
        color: var(--cd-text-primary);
    }
}

.cl-tab:disabled {
    opacity: 0.4;
}

/* Sayfa sekmeleri (Yönetim › Kayıtlar; kullanıcı kararı 2026-11-01): referansın Notifications / Workload identity sekmeleri (ölçüldü 2026-11-01):
   sekme bir bağlantıdır (?sekme=), seçili olanı aria-current="page"; şerit başlığın / açıklamanın 24 altında (sayfa başlığı ile içerik arası 16
   + 8), içerik şeridin 16 altında. Bağlantı olduğu için altı çizilmez. */
/* SEKMELERİN ÜSTÜNDEKİ BOŞLUK STANDARDI (kullanıcı kararı 2026-11-13; müşteri sayfasındaki ölçü esas): sekme yazısının kutu üstü, üstündeki içeriğin
   (bilgi satırı, açıklama, hap) alt kenarından HER YERDE 24. Kayıt sayfaları (`.cl-record-tabs`) bunu zaten verir; bu sınıf (sekmeli sayfalar) 8 değil
   1,5 üst boşluk alır (sekme düğmesinin iç boşluğu 6,5 ekler). */
.cl-page-tabs {
    margin-top: 1.5px;
    margin-bottom: 16px;
}

/* Sekme şeridi olan rapor sayfasında (Gelir Tablosu │ Genel Gider) şerit → ilk kart 16: raporun kendi üst boşluğu (12) şeridin altına eklenmez. */
.cl-page-tabs + .cl-report {
    padding-top: 0;
}

a.cl-tab,
a.cl-tab:hover {
    text-decoration: none;
}

html:not(.cl-pointer) .cl-tab:focus-visible {
    outline: 0;
    box-shadow: var(--cd-focus-ring);
}

/* ---------------------------------------------------------------------------
 * RAPORLAR (App\Filament\Pages\ReportPage; kullanıcı kararları 2026-10-25, 2026-10-26). Başlığın sağında ₺ | $ ve Dönem hapı; indirme
 * ikonu tablonun araç çubuğunun sağ ucunda. Özet kartlar referansın Agents ›
 * Overview kartları (köşe 12, 1 px halka, iç boşluk 16, aralar 12; etiket 14/20 500 ikincil; değer 22/28 580 ve sağında 110 × 32 çizgi; not
 * 12/17 soluk, değere 4; kartlar arası 16); sekmeler kartların 24 altında, görünüm seçici sekmelerin 16 altında, tablo seçicinin 16 altında (referansta sekme → araç çubuğu →
 * tablo 16). Tablo portalın tablosu gibi kutusuz: başlık 13/17 500 ikincil, hücre 14/20, satır çizgisi 1 px %5; bölüm başlığı 12/17 500 soluk
 * büyük harf; toplamlar 500 ve üstünde 1 px %10 çizgi; oran satırı soluk; yaprak satırlar 24 içeride. Tutarlar sağa yaslı, rakamlar tabular.
 * ------------------------------------------------------------------------ */
.cl-report {
    display: flex;
    flex-direction: column;
    padding-top: 12px; /* sayfa açıklaması → ilk kart 28 (referansın Claude Code sayfası; başlıkla arası 16 + 12; kullanıcı kararı 2026-10-26) */
}

/* Grafik kartlarının hemen altındaki araç çubuğu kartlarla arasını 16 tutar (kartın 16'lık alt boşluğuna kendi üst boşluğu eklenmesin). */
.cl-report-charts + .cl-report-panel > .cl-report-toolbar:first-child {
    margin-top: 0;
}

/* Dışa aktar düğmesi (referansın "Export"u): indirme ikonu 16, yazıyla arası 6 (düğmenin gap'i). */
.cl-report-download-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.cl-report-download-icon svg {
    width: 100%;
    height: 100%;
}

.cl-report-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px; /* kartlar arası 16 (referans; kullanıcı kararı 2026-10-26; önce 24) */
}

.cl-report-cards + .cl-report-toolbar {
    margin-top: 0;
}

@media (max-width: 767px) {
    .cl-report-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Alacak & Borç göstergeleri telefonda iki sütun (kullanıcı bildirimi 2026-10-26: altı kart alt alta tablodan önce çok uzun kaydırma
       istiyordu); kartlar arası 12, rakam 18/24, ad 13/17 ve sığmazsa alt satıra geçer. */
    .cl-report-cards.cl-report-cards--kpi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cl-report-cards--kpi .cl-report-card {
        gap: 8px;
        padding: 12px;
    }

    .cl-report-cards--kpi .cl-report-card-label {
        font-size: 13px;
        line-height: 17px;
    }

    .cl-report-cards--kpi .cl-report-card-value {
        font-size: 18px;
        line-height: 24px;
    }
}

.cl-report-card {
    display: flex;
    flex-direction: column;
    gap: 8px; /* referans (Cost › Total cost): ad → değer 8 */
    min-width: 0;
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-report-card-label {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-secondary);
}

.cl-report-card-value {
    font-size: 22px;
    line-height: 28px;
    font-weight: 580;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cl-report-card-note {
    margin: -8px 0 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
    white-space: nowrap;
}

/* GRAFİK KARTLARI (kullanıcı kararı 2026-10-26; referansın Claude Code › Sessions / Spend kartı, ölçüldü): 3 sütun, aralar 16 (rapor 896'dan
   darsa tek sütun); kart köşe 12, 1 px halka, iç boşluk 16, başlık satırı (28) ile grafik arası 16. Başlık 15/20 500 birincil; sağda Grafik |
   Tablo seçici 54 × 28 (seçenek 26 × 26, köşe 5; iz köşe 7; ikonlar 20, referansın çizimi). Grafik 176: çizim alanı 144 (üstte 8), altında ay yazıları; Y yazıları 12/17
   soluk, çizim alanının 8 solunda sağa yaslı. Izgara 1 px %10, eksen (en alt çizgi) --cl-chart-axis; çizgi 2 px, alan aynı renk %10; son
   noktada 8 px nokta + 2 px sayfa rengi halka. Fare: kesikli (3 3) dikey çizgi, nokta, ipucu (köşe 8, iç boşluk 6 8, ay 12/17 ikincil,
   tutar 13/17 500). Tablo görünümü aynı yükseklikte kayar: başlık 32, 13/17 500 ikincil; satır 6 12, 14/20; çizgiler %5. */
.cl-report {
    container-type: inline-size;
}

.cl-chart-c1 { --cl-chart-color: var(--cl-chart-1); }
.cl-chart-c2 { --cl-chart-color: var(--cl-chart-2); }
.cl-chart-c3 { --cl-chart-color: var(--cl-chart-3); }
.cl-chart-c4 { --cl-chart-color: var(--cl-chart-4); }
.cl-chart-c5 { --cl-chart-color: var(--cl-chart-5); }
.cl-chart-c7 { --cl-chart-color: var(--cl-chart-7); }
.cl-chart-c8 { --cl-chart-color: var(--cl-chart-8); }
.cl-chart-crest { --cl-chart-color: var(--cl-chart-rest); }
.cl-chart-c2b { --cl-chart-color: var(--cl-chart-2b); }
.cl-chart-c2c { --cl-chart-color: var(--cl-chart-2c); }
.cl-chart-c4b { --cl-chart-color: var(--cl-chart-4b); }
.cl-chart-cciro { --cl-chart-color: var(--cl-chart-ciro); }
.cl-chart-clate1 { --cl-chart-color: var(--cl-chart-late1); }
.cl-chart-clate2 { --cl-chart-color: var(--cl-chart-late2); }
.cl-chart-clate3 { --cl-chart-color: var(--cl-chart-late3); }
.cl-chart-clate4 { --cl-chart-color: var(--cl-chart-late4); }

.cl-report-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px; /* kartlar arası her yerde 16 (referansın Claude Code sayfası ölçüldü; kullanıcı kararı 2026-10-26; önce 24) */
}

/* Dört kartlı sayfa (Raporlar › Genel Gider) ikişerli iki satır. */
.cl-report-charts--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tek kart (Raporlar › Nakit Akışı; kullanıcı kararı 2026-10-30) tam genişlikte. */
.cl-report-charts--single {
    grid-template-columns: minmax(0, 1fr);
}

@container (max-width: 895px) {
    .cl-report-charts {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cl-chart-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
}

.cl-chart-title {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cd-page .cl-segmented.cl-chart-seg {
    --cd-seg-h: 28px;
    gap: 0;
    border-radius: 7px;
}

.cd-page .cl-segmented.cl-chart-seg .cl-segmented-option > span {
    justify-content: center;
    width: 26px;
    padding: 0;
    border-radius: 5px;
}

.cd-page .cl-chart-seg .cl-segmented-option svg {
    width: var(--cd-icon); /* referans: ikon 20 (seçenek 26) */
    height: var(--cd-icon);
}

.cl-chart-view[hidden],
.cl-chart-table[hidden] {
    display: none;
}

.cl-chart-view > .cl-cur {
    display: block;
}

html:not([data-cl-currency="USD"]) .cl-chart-view > .cl-cur--usd,
html[data-cl-currency="USD"] .cl-chart-view > .cl-cur--try {
    display: none;
}

.cl-chart {
    height: 176px;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-chart-frame {
    display: flex;
    height: 152px;
    padding-top: 8px;
    box-sizing: border-box;
}

.cl-chart-yaxis {
    position: relative;
    flex: none;
    /* En uzun yazısı kadar (kullanıcı bildirimi 2026-10-31; partials/report-chart-card --cl-yaxis-w), çizime 8. */
    width: var(--cl-yaxis-w, 48px);
    margin-right: 8px;
}

.cl-chart-yaxis > span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}

.cl-chart-plot {
    position: relative;
    flex: 1;
    min-width: 0;
    touch-action: pan-y;
}

.cl-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cl-chart-grid {
    stroke: var(--cd-border);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.cl-chart-grid:first-of-type { /* en alttaki (ilk çizilen) çizgi eksen */
    stroke: var(--cl-chart-axis);
}

.cl-chart-area {
    fill: var(--cl-chart-color);
    fill-opacity: 0; /* referansın çizgi grafiğinde alan dolgusu yok (küçük grafiklerin dolgusu ayrı: .cl-spark-*) */
}

/* Kesikli çizgi (kullanıcı kararı 2026-10-31; ör. Genel Gider › fiyatlardaki genel gider): grafiğin kendi çizgisiyle aynı kalınlıkta, kesikli;
   açıklamasında kare yerine kısa kesikli çizgi. */
.cl-chart-line.cl-chart-line--dashed {
    stroke-dasharray: 5 4;
}

.cl-chart-legend-swatch.cl-chart-legend-swatch--dashed {
    width: 14px;
    height: 0;
    border-radius: 0;
    background: none;
    border-top: 2px dashed var(--cl-chart-color);
}

/* Eksiye geçen çizginin sıfırın altındaki kısmı: çizgi ve alanı kırmızı. */
.cl-chart-neg {
    --cl-chart-color: var(--cl-chart-8);
}

.cl-chart-line {
    fill: none;
    stroke: var(--cl-chart-color);
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Referans çizgisi (ör. Genel Gider › Adet Başına Genel Gider: Liste Fiyatları'ndaki tutar; kullanıcı kararı 2026-10-26): 1 px kesikli,
   ikincil yazı renginde; adı çizginin hemen üstünde, sola yaslı, 12/17 soluk. */
.cl-chart-ref {
    stroke: var(--cd-text-secondary);
    stroke-width: 1px;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.cl-chart-ref-label {
    position: absolute;
    left: 4px;
    transform: translateY(calc(-100% - 2px));
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-secondary);
    white-space: nowrap;
    pointer-events: none;
    /* Referans: grafiğin üstündeki yazının çevresinde 3 px zemin rengi halka (çubukların üstünde okunur). */
    paint-order: stroke fill;
    -webkit-text-stroke: 6px var(--cd-page-bg);
}

/* İkinci referans çizgisinin (Genel Gider › Son 12 ay) adı sağda: iki çizgi yakınsa yazılar üst üste binmesin. */
.cl-chart-ref-label--end {
    left: auto;
    right: 4px;
}

.cl-chart-dot {
    position: absolute;
    width: 6px; /* referans: fareyle gelinen noktası 6 */
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--cl-chart-color);
    box-shadow: 0 0 0 2px var(--cd-page-bg);
    pointer-events: none;
}

/* Uyarı noktası (Nakit Akışı: nakdin eksiye düştüğü dönem; kullanıcı kararları 2026-10-30): tehlike kırmızısı. */
.cl-chart-dot--danger {
    background: var(--cd-text-danger);
}

.cl-chart-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--cl-chart-axis);
    pointer-events: none;
}

.cl-chart-dot[hidden],
.cl-chart-cursor[hidden],
.cl-chart-tip[hidden] {
    display: none;
}

.cl-chart-tip {
    position: absolute;
    top: 0;
    left: 0; /* yeri transform ile (cover-lab-panel.js "RAPOR GRAFİĞİ": yaylı takip; kullanıcı kararı 2026-10-28) */
    z-index: 2;
    will-change: transform;
    display: flex;
    flex-direction: column;
    gap: 6px; /* referans: başlık → değer 6 */
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-popover);
    white-space: nowrap;
    pointer-events: none;
}

.cl-chart-tip-label {
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cl-chart-tip-value {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

/* Çok çizgili grafik (Nakit Akışı: Kayıtlı, Beklenen, Kötümser; kullanıcı kararı 2026-10-30), referansın Usage › Token usage kartı
   ölçüldü (2026-10-30): çizgilerin adları grafiğin 16 altında (10 × 10 renkli kare, köşe 2, yazıya 8; ad 13/17 ikincil; satır aralığı 8, adlar
   arası 16). İpucunda tarihin 6 altında her çizgi bir satır: kare, değer 13/17 500 birincil, ad 13/17 ikincil; sütunlar ve satırlar arası 8. */
.cl-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cl-chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cl-chart-legend-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--cl-chart-color);
}

/* Çizgi grafikte işaret kare değil 10 × 2 kısa çizgi, köşe 1 (referans; lejant ve ipucu). Çubuk grafikte kare kalır. */
.cl-chart-card:not(:has(.cl-chart--bars)) .cl-chart-legend-swatch:not(.cl-chart-legend-swatch--dashed),
.cl-chart:not(.cl-chart--bars) .cl-chart-tip .cl-chart-legend-swatch:not(.cl-chart-legend-swatch--dashed) {
    height: 2px;
    border-radius: 1px;
}

.cl-chart-tip:has(.cl-chart-tip-row) {
    gap: 0;
}

.cl-chart-tip-value:has(.cl-chart-tip-row) {
    display: grid;
    grid-template-columns: 10px auto 1fr;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.cl-chart-tip-row {
    display: contents;
}

.cl-chart-tip-amount {
    font-weight: 500;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
}

.cl-chart-tip-name {
    font-weight: 400;
    color: var(--cd-text-secondary);
}

/* YIĞILMIŞ ÇUBUK (referansın BarChart'ı, Console Atlası): çubuk ay aralığının ortasında, aralığın %37,5'i genişliğinde (2026-11-04); tek
   parçalı çubukta yalnızca sıfırdan en uzak uç yuvarlak (köşe 4), sıfıra oturan kenar düz; yığılmış çubukta her parça köşe 4, parçalar
   arası 1. Fare çubuğun ayına gelince dikey çizgi yok, ipucunda parçalar ve Toplam. Genişlik çizim alanından (kap birimi cqw). */
.cl-chart--bars .cl-chart-plot {
    container-type: inline-size;
}

.cl-chart-bar {
    /* DİKEY ÇUBUK STANDARDI: genişlik ay aralığının %37,5'i (önce %75: çok kalındı), uç köşe her çubukta 4
       (tek parçalı ve yığılmış aynı; önce tek parçalıda genişliğin dörtte biriydi, ~9 px). */
    --cl-bar-w: calc(37.5cqw * var(--cl-bar-scale, 1) / var(--cl-bar-n, 12)); /* --cl-bar-scale: grafiğe özel incelik (Aylık Ciro 0,5; kullanıcı kararı 2026-11-13) */
    --cl-bar-r: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--cl-bar-w);
    transform: translateX(-50%);
    pointer-events: none;
}

.cl-chart-seg {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    min-height: 3px;
    border-radius: 0;
    background: var(--cl-chart-color);
    background-clip: padding-box;
}

.cl-chart-seg--end-top {
    border-top-left-radius: var(--cl-bar-r);
    border-top-right-radius: var(--cl-bar-r);
}

.cl-chart-seg--end-bottom {
    border-bottom-left-radius: var(--cl-bar-r);
    border-bottom-right-radius: var(--cl-bar-r);
}

/* Yığılmış: her parça köşe 4, aralarında 1 (parçanın iki yanında 0,5 saydam kenar). */
.cl-chart-bar:has(> .cl-chart-seg + .cl-chart-seg) > .cl-chart-seg {
    border-block: 0.5px solid transparent;
    border-radius: 4px;
}

/* YIĞILMIŞ ÇUBUKTA EN AZ KALINLIK YOK — REFERANSIN DEĞERİ (kullanıcı kararı 2026-11-13; referansın Usage › Token usage yığılmış grafiği canlıda ölçüldü): parça gerçek orantılı
   yüksekliğinde çizilir, en az kalınlık YOKTUR (0,1 px'lik parça bile çizilir; köşe yarıçapı yüksekliğin yarısına küçülür, tarayıcı bunu kendiliğinden yapar); parçalar arası 1 px.
   Tek serili çubuk grafiğin 3 px'lik tabanı (.cl-chart-seg) aynen durur. */
.cl-chart--stacked .cl-chart-seg { min-height: 0; }

/* SIFIR ÇİZGİSİNE OTURAN KENAR HER ZAMAN KESKİN — PORTAL GENELİ KURAL: tek ya da yığılmış, her dikey çubukta
   sıfıra değen parçanın o kenarı köşesiz (artıda en alttaki parçanın altı, eksideki parçanın üstü); yalnızca sıfırdan uzak uç yuvarlak. */
.cl-chart-bar > .cl-chart-seg.cl-chart-seg.cl-chart-seg--base-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.cl-chart-bar > .cl-chart-seg.cl-chart-seg.cl-chart-seg--base-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.cl-chart--bars .cl-chart-cursor {
    display: none;
}

/* Fareyle gelinen ayın bandı (referansın Usage grafiği ölçüldü 2026-10-31: ayın aralığı genişliğinde, çizim alanı boyunca, çerçeve renginin
   yarısı — koyuda %5 beyaz; köşesiz; çubukların arkasında). */
.cl-chart-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--cd-border);
    opacity: .5;
    pointer-events: none;
}

.cl-chart-band[hidden] {
    display: none;
}

.cl-chart-tip-sep {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--cd-border);
}

.cl-chart-tip-total .cl-chart-legend-swatch {
    visibility: hidden;
}

/* Gelir Tablosu › grafik modunun TEK GRAFİĞİ: SATIŞIN DAĞILIMI (kullanıcının çizimi; kullanıcı kararları 2026-10-31;
   partials/report-income-ladder): içinde bulunulan aydan geriye 12 ay, sade liste. Üç sütunlu ızgara — ay | çubuk | ciro yeri: ay sütunu
   en uzun olabilecek ay yazısı ("Ağustos 2030") kadar, çubuk 16 sonra; ciro yeri en uzun ciro yazısı + 8 kadar (görünmez kopyalar,
   max-content): en uzun çubuğun cirosu kartın iç kenarında biter, sağ boşluk soldakine (16) eşit. Bütün satırlar aynı: ay 13/17 ikincil,
   çubuk 24 yüksek (parçalar köşe 6, aralar 2, tek renk, içinde yazı yok), ciro çubuğun 8 sağında 13/17 500 birincil; satırlar arası 20.
   Altında parçaların açıklaması. */
.cl-ladder {
    margin-top: 8px;
}

.cl-ladder .cl-cur.cl-ladder-body {
    display: block;
    padding-top: 8px;
}

html:not([data-cl-currency="USD"]) .cl-ladder .cl-cur--usd.cl-ladder-body,
html[data-cl-currency="USD"] .cl-ladder .cl-cur--try.cl-ladder-body {
    display: none;
}

.cl-ladder-plot {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    row-gap: 20px; /* kullanıcı bildirimi 2026-10-31: 12 sıkışıktı */
    align-items: center;
}

.cl-ladder-plot > .cl-ladder-row {
    display: contents;
}

.cl-ladder-period {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cl-ladder-period-sizer {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
}

.cl-ladder-track {
    position: relative;
    margin-left: 16px;
}

.cl-ladder-segs {
    display: flex;
    gap: var(--cl-bar-gap);
}

/* ÇUBUK STANDARDI: kalın (20, köşe 6; önce 24 ve her parça yuvarlaktı); yalnızca dış uçlar yuvarlak. */
.cl-ladder-seg {
    flex: 1 1 0;
    min-width: var(--cl-bar-min);
    box-sizing: border-box;
    height: var(--cl-bar-thick);
    background: var(--cl-chart-color);
}

.cl-ladder-seg:first-child {
    border-top-left-radius: var(--cl-bar-thick-radius);
    border-bottom-left-radius: var(--cl-bar-thick-radius);
}

.cl-ladder-seg:last-of-type {
    border-top-right-radius: var(--cl-bar-thick-radius);
    border-bottom-right-radius: var(--cl-bar-thick-radius);
}

.cl-ladder-total,
.cl-ladder-total-sizer {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cl-ladder-total {
    position: absolute;
    top: 50%;
    margin-left: 8px;
    transform: translateY(-50%);
    color: var(--cd-text-primary);
}

.cl-ladder-total-sizer {
    visibility: hidden;
    height: 0;
    padding-left: 8px;
}

.cl-ladder-period-short,
.cl-ladder-period-sizer--short {
    display: none;
}

/* Telefonda (< 768) ay kısa ("10.26") ve aralar dar (kullanıcı kararı 2026-10-31: çubuklara yer kalmıyordu): ay sütunu "12.30" genişliğinde,
   ay → çubuk 6, çubuk → toplam 4. */
@media (max-width: 767px) {
    .cl-ladder-period-name,
    .cl-ladder-period-sizer:not(.cl-ladder-period-sizer--short) {
        display: none;
    }

    .cl-ladder-period-short,
    .cl-ladder-period-sizer--short {
        display: block;
        font-variant-numeric: tabular-nums;
    }

    .cl-ladder-track {
        margin-left: 6px;
    }

    .cl-ladder-total {
        margin-left: 4px;
    }

    .cl-ladder-total-sizer {
        padding-left: 4px;
    }
}

/* SATIŞ VE KÂRLILIK › GRAFİK (kullanıcı kararları 2026-10-31; partials/report-sales-profit-chart): rapor tablosunun satırlarında Müşteri |
   Adet | çubuk. Müşteri / seri çubuğu Gelir Tablosu'nun grafik modundaki gibi (20 yüksek, parçalar köşe 6, aralar 2, içinde yazı yok), ortak
   ölçekte; bitiminde 8 boşlukla kısa Ciro ve Net Marj 13/17 500 (hücrenin sağında en uzun yazı kadar yer ayrılır, görünmez kopya). Açılan ürün
   satırlarının çubuğu referansın Caching › Cache miss tokens çubuğu (ölçüldü; zeminsiz, kullanıcı kararı): parçalar 8 yüksek, dış köşeler 4,
   iç köşeler 2, aralar 1; renkler ve yazılar normal. Ciro ve Net Marj'ın sıralaması gizli sütunlarda (.cl-sp-sortcol); başlıktaki iki düğme
   onlara basar, ok sıralanan düğmenin solunda. */
.cl-report-table.cl-sp-bars {
    min-width: 640px;
}

/* Telefonda çubuk sütununa yer kalsın: yukarıdaki en az genişliği sonraki `.cl-report-table--fixed` kuralı (aynı özgüllük) eziyor, tablo ekrana
   sığacak kadar daralıp çubuk ile Ciro yazısı üst üste biniyordu; tablo en az 640 olur, dar ekranda yana kayar. */
.cl-report-table.cl-report-table--fixed.cl-sp-bars {
    min-width: 640px;
}

.cl-report-table.cl-sp-bars .cl-sp-col-label {
    width: 320px;
}

.cl-report-table.cl-sp-bars .cl-sp-sortcol {
    display: none;
}

.cl-report-table.cl-sp-bars .cl-sp-bar-head {
    text-align: left;
    padding-left: 24px;
}

.cl-sp-sort-buttons {
    display: inline-flex;
    align-items: center;
}

.cl-sp-sort-sep {
    margin-right: 4px;
}

.cl-sp-sort {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: var(--cd-cursor-interactive);
}

.cl-sp-sort > .cl-report-sort-arrow {
    display: none;
}

.cl-sp-sort[data-dir] {
    color: var(--cd-text-primary);
}

.cl-sp-sort[data-dir] > .cl-report-sort-arrow {
    display: block;
}

.cl-sp-sort[data-dir="ascending"] > .cl-report-sort-arrow {
    transform: rotate(180deg);
}

html:not(.cl-pointer) .cl-sp-sort:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: var(--cd-focus-ring);
}

.cl-report-table.cl-sp-bars td.cl-sp-bar-cell {
    padding-left: 24px;
    vertical-align: middle;
}

.cl-sp-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
}

html:not([data-cl-currency="USD"]) .cl-sp-bar--usd,
html[data-cl-currency="USD"] .cl-sp-bar--try {
    display: none;
}

.cl-sp-track {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cl-sp-segs {
    display: flex;
    flex-shrink: 0;
    /* Müşteri seçilince çubuk satırı kaplayacak kadar uzar, seçim kalkınca kısalır. */
    transition: width 450ms var(--cd-ease-out);
    min-width: min-content; /* çok küçük çubukta parçalar en az 3 px; yazı çubuğun gerçek ucundan başlar */
    gap: var(--cl-bar-gap);
}

.cl-sp-seg {
    flex: 1 1 0;
    min-width: var(--cl-bar-min);
    height: var(--cl-bar-thick); /* ÇUBUK STANDARDI: kalın; yalnızca dış uçlar yuvarlak */
    background: var(--cl-chart-color);
}

.cl-sp-seg:first-child {
    border-top-left-radius: var(--cl-bar-thick-radius);
    border-bottom-left-radius: var(--cl-bar-thick-radius);
}

.cl-sp-seg:last-of-type {
    border-top-right-radius: var(--cl-bar-thick-radius);
    border-bottom-right-radius: var(--cl-bar-thick-radius);
}

.cl-sp-total,
.cl-sp-total-sizer {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cl-sp-total {
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--cd-text-primary);
}

.cl-sp-total-sizer {
    visibility: hidden;
    height: 0;
    padding-left: 8px;
}

.cl-sp-chart > .cl-ladder-legend {
    margin-top: 16px;
}

/* Zarar: maliyetler ciroyu aşınca çubuğun ciroyu aşan kısmı kırmızı taralı (paletin kırmızısı, 45° 3 / 3 px)
   parçaların üstünde, cironun bittiği yerde 2 px birincil renkte dikey çizgi (çubuktan 3 px taşar); çubuğun sonunda zarar tutarı kırmızı. */
.cl-sp-segs--loss {
    position: relative;
}

.cl-sp-loss {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(135deg, var(--cl-chart-8) 0 3px, color-mix(in srgb, var(--cl-chart-8) 45%, var(--cd-page-bg)) 3px 6px);
}

.cl-sp-ciro-line {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-right: -1px;
    border-radius: 1px;
    background: var(--cd-text-primary);
    pointer-events: none;
}

.cl-sp-loss-text {
    color: var(--cl-chart-8);
}

.cl-sp-loss-swatch {
    background: repeating-linear-gradient(135deg, var(--cl-chart-8) 0 2px, color-mix(in srgb, var(--cl-chart-8) 45%, var(--cd-page-bg)) 2px 4px);
}

.cl-sp-leaf .cl-sp-loss {
    border-radius: 0 var(--cl-bar-thin-radius) var(--cl-bar-thin-radius) 0;
}

.cl-sp-leaf .cl-sp-ciro-line {
    top: -2px;
    bottom: -2px;
}

/* Seçim kalkınca yeniden görünen satırlar soluktan belirir. */
.cl-sp-bars tbody > tr {
    transition: opacity 300ms var(--cd-ease-out);
}

@starting-style {
    .cl-sp-bars tbody > tr {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-sp-segs,
    .cl-sp-bars tbody > tr {
        transition: none;
    }
}

/* Açılan ürün satırı: ÇUBUK STANDARDI ince (10, köşe 5, parça arası 2; yalnızca dış uçlar yuvarlak). */
.cl-sp-leaf .cl-sp-seg {
    height: var(--cl-bar-thin);
}

.cl-sp-leaf .cl-sp-seg:first-child {
    border-top-left-radius: var(--cl-bar-thin-radius);
    border-bottom-left-radius: var(--cl-bar-thin-radius);
}

.cl-sp-leaf .cl-sp-seg:last-of-type {
    border-top-right-radius: var(--cl-bar-thin-radius);
    border-bottom-right-radius: var(--cl-bar-thin-radius);
}

.cl-ladder-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cl-ladder-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* KÜÇÜK GRAFİKLİ KARTLARIN IZGARASI: büyük kartların üstünde tek sırada (2–5 sütun, aralar 16). Kartın kendisi
   aşağıda (.cl-spark-card, 2026-11-02'den beri her öğesi referansın Caching kartları gibi). */
.cl-report-sparks {
    display: grid;
    grid-template-columns: repeat(var(--cl-spark-cols, 3), minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cl-report-sparks--1 { --cl-spark-cols: 1; }
.cl-report-sparks--2 { --cl-spark-cols: 2; }
.cl-report-sparks--4 { --cl-spark-cols: 4; }
.cl-report-sparks--5 { --cl-spark-cols: 5; }

/* Beş kartta (Tahsilat Performansı) kart küçük grafiğe ve tek satırlık başlığa yer bulamıyor: kartların durduğu ALAN 1320'den darsa üç sütun
   (kart içi ≥ 240; kullanıcı kararı 2026-11-13; önce ekran genişliği 1400'dü, kenar menü ve kenar boşlukları sayılmadığı için başlıklar alt satıra düşüyordu).
   Alan .cl-report (container-type: inline-size). */
@container (max-width: 1319px) {
    .cl-report-sparks--5 { --cl-spark-cols: 3; }
}

@media (max-width: 1023px) {
    .cl-report-sparks--4 { --cl-spark-cols: 2; }
}

/* Dört kart, kartların durduğu ALAN 960'tan darsa ikişerli: ekran genişliği kenar menünün 256'sını saymıyordu;
   1024–1200 ekranda kartın içi 136–180'e iniyor, not ve küçük grafik sığmıyordu. 1280'de dördü yan yana sığar (kart içi 200; en uzun not 186).
   Alan .cl-report (container-type: inline-size). */
@container (max-width: 959px) {
    .cl-report-sparks--4 { --cl-spark-cols: 2; }
}

@media (max-width: 639px) {
    .cl-report-sparks { --cl-spark-cols: 1; }
}

/* Üç kartta (modifiersiz ızgara) kartların durduğu ALAN 760'tan darsa (992 ekran: kart içi 213, 768: 139) kart başlığı ("Zamanında Ödenen" + rozet + ⓘ) alt satıra düşüyordu:
   iki sütun, tek kalan üçüncü kart tam satır; alan 496'dan darsa (768 ekran: kart içi 216'da başlık yine kırılıyor) tek sütun (kullanıcı kararı 2026-11-13). */
@container (max-width: 495px) {
    .cl-report-sparks:not(.cl-report-sparks--1):not(.cl-report-sparks--2):not(.cl-report-sparks--4):not(.cl-report-sparks--5) { --cl-spark-cols: 1; }
}
@container (min-width: 496px) and (max-width: 759px) {
    .cl-report-sparks:not(.cl-report-sparks--1):not(.cl-report-sparks--2):not(.cl-report-sparks--4):not(.cl-report-sparks--5) { --cl-spark-cols: 2; }
    .cl-report-sparks:not(.cl-report-sparks--1):not(.cl-report-sparks--2):not(.cl-report-sparks--4):not(.cl-report-sparks--5) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cl-spark-card {
    position: relative;
    box-sizing: border-box;
    /* KÜÇÜK GRAFİKLİ KART — PORTAL STANDARDI (kullanıcı kararı 2026-11-02: "her elementini" referansın Caching › üst kartları gibi, ölçüldü):
       iç boşluk 16, köşe 12, 1 px %10 halka; başlık satırı 24 (ad + ⓘ solda, değişim rozeti sağda), 12 altında değer satırı 32 (değer solda,
       110 × 32 grafik sağda, alttan hizalı), 8 altında not 12/17 soluk. Yan yana kartlar ızgarada aynı yükseklikte (en az 112). */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 112px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-spark-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}

.cl-spark-title {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-spark-title .cl-info-tip {
    height: 20px;
}

.cl-spark-card .cl-info-tip-pop {
    max-width: 320px;
    width: max-content;
}

.cl-spark-change {
    display: inline-flex;
    flex: none;
}

/* DEĞİŞİM ROZETİ — PORTAL GENELİ (kullanıcı kararı 2026-11-02; referansın Caching kartları ölçüldü): 20 yüksek, iç boşluk 0 8, köşe 5, ok 16
   ile yazı arası 4, 12/15 500; iyi yeşil, kötü kırmızı tonlu zemin, değişmediyse gri (HasReportMetrics::changeBadge). */
.cl-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cl-change--good { background: var(--cd-tint-green-bg); color: var(--cd-tint-green-fg); }
.cl-change--bad { background: var(--cd-tint-red-bg); color: var(--cd-tint-red-fg); }
.cl-change--flat { background: var(--cd-bg-neutral); color: var(--cd-text-secondary); }

.cl-change-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: -3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.cl-change-icon path { vector-effect: non-scaling-stroke; }

.cl-change-icon--down { transform: rotate(180deg); }

.cl-spark-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
}

.cl-spark-value {
    display: flex;
    align-items: flex-end;
    min-height: 32px;
    font-size: 22px;
    line-height: 22px;
    font-weight: 580;
    letter-spacing: -0.01em;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Not (referansın "vs previous 7 days"ı): 12/17 soluk, değer satırının 4 altında (Console Atlası). */
.cl-spark-note {
    margin: -8px 0 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-spark-plot {
    position: relative;
    flex: 0 1 110px;
    min-width: 64px;
    height: 32px;
}

/* Yazılı küçük kart (grafiksiz; partials/report-stat-card): not kart genişliğinde, sığmazsa "…". Kesme kutusu yazının altına / üstüne 4 px
   taşar (padding + eksi margin): satır yüksekliği yazı boyuna eşit (22/22) olduğu için ğ, y, ç gibi harflerin alt kısmı kesiliyordu (kullanıcı
   bildirimi 2026-10-31); yerleşim değişmez. */
.cl-stat-card .cl-spark-note,
.cl-stat-card .cl-spark-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-stat-card .cl-spark-value {
    display: block;
    min-height: 0;
    padding-block: 4px;
    margin-block: -4px;
}

.cl-spark {
    display: block;
    width: 100%;
    height: 32px;
    overflow: visible;
    /* Küçük grafik HER ZAMAN referansın vurgu mavisi (kullanıcı kararı 2026-11-02 ve 2026-11-13: ölçü renkleri küçük kartlara uygulanmaz; referansın
       --cds-text-accent'i: açıkta #184F95, koyuda #6DA7EC). */
    color: var(--cd-text-accent);
    cursor: default;
}

/* Küçük grafikte farenin yerinin noktası (referans ölçüldü 2026-10-31): 8 × 8 yuvarlak, çizginin renginde, sayfa zemini renginde 1 px halka;
   en yakın ayın noktasına atlar (fareyle kaymaz; ipucu kutusu fareyi izler). */
.cl-spark-dot {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 1px solid var(--cd-page-bg);
    border-radius: 9999px;
    background: var(--cd-text-accent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cl-spark-dot[hidden] {
    display: none;
}

/* Küçük grafiğin ipucu (referans ölçüldü 2026-10-31): grafiğin 6 altında, en yakın noktanın 8 solundan başlar; ipucu zemini, köşe 12, iç
   boşluk 6 8; üstte ay 12/17 ikincil, 8 altında değer 12/17 500. */
.cl-spark-tip {
    position: absolute;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 12px;
    background: var(--cd-tooltip-bg);
    box-shadow: inset 0 0 0 1px var(--cd-tooltip-ring, transparent);
    font-size: 12px;
    line-height: 17px;
    white-space: nowrap;
    pointer-events: none;
}

.cl-spark-tip[hidden] {
    display: none;
}

.cl-spark-tip-label {
    color: var(--cd-tooltip-fg);
    opacity: .8;
}

.cl-spark-tip-value {
    font-weight: 500;
    color: var(--cd-tooltip-fg);
    font-variant-numeric: tabular-nums;
}

/* .cl-cur'un "contents"ı SVG'yi çizdirmez: küçük grafik blok, yalnızca seçili para biriminin grafiği görünür. */
.cl-spark.cl-cur {
    display: block;
}

html:not([data-cl-currency="USD"]) .cl-spark.cl-cur--usd,
html[data-cl-currency="USD"] .cl-spark.cl-cur--try {
    display: none;
}

.cl-row-spark.cl-spark {
    width: 96px; /* tablo hücresinde küçük grafik: kartlardaki çizimin aynısı (.cl-spark), yalnızca boyu küçük */
    height: 28px;
    margin-left: auto; /* sayı sütunu gibi sağa yaslı */
}

td:has(> .cl-rev-cell) { text-align: right; }

/* Küçük grafiğin negatife geçen kısmı Zarar kırmızısında (kullanıcı kararı 2026-11-14; partials/spark-svg): çizgi, dolgu (gradyan) ve fare noktası. */
.cl-spark-neg { color: var(--cl-chart-8); }

.cl-spark-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.cl-chart-xaxis {
    position: relative;
    height: 24px;
    margin-left: calc(var(--cl-yaxis-w, 48px) + 8px);
}

.cl-chart-xaxis > span {
    position: absolute;
    top: 3px; /* referans: yazının taban çizgisi eksenin 16 altında */
    white-space: nowrap;
}

/* Dar kartta (telefon) ara ayların yazısı gizlenir, yazılar üst üste binmesin. */
.cl-chart-card {
    container-type: inline-size;
}

@container (max-width: 400px) {
    .cl-chart-x--minor { display: none; }
}

.cl-chart-x--center { transform: translateX(-50%); }
.cl-chart-x--end { transform: translateX(-100%); }

.cl-chart-table {
    height: 176px;
    margin: 0 -12px;
    overflow-y: auto;
}

/* Grafik yüksekliği kartın genişliğine göre (referans: üçlü kartta 176, yarım kartta 200, tam genişlikte 240). */
@container (min-width: 440px) {
    .cl-chart,
    .cl-chart-table { height: 200px; }
    .cl-chart-frame { height: 176px; }
}

@container (min-width: 800px) {
    .cl-chart,
    .cl-chart-table { height: 240px; }
    .cl-chart-frame { height: 216px; }
}

/* Yüksek grafik (Raporlar › Nakit Akışı tek grafiği; kullanıcı kararı 2026-10-30: "1,5 katı"): 176 × 1,5 = 264. */
.cl-chart-card--tall .cl-chart,
.cl-chart-card--tall .cl-chart-table {
    height: 264px;
}

/* Çizim alanı da büyür (264 − 24 ay yazıları); önce 152'de kalıyor, altında boşluk kalıyordu. */
.cl-chart-card--tall .cl-chart-frame {
    height: 240px;
}

.cl-chart-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cl-chart-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 32px;
    padding: 0 12px;
    background: var(--cd-page-bg);
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-secondary);
    text-align: left;
    border-bottom: 1px solid var(--cd-border-subtle);
}

.cl-chart-table tbody th,
.cl-chart-table tbody td {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-primary);
    text-align: left;
    border-bottom: 1px solid var(--cd-border-subtle);
}

.cl-chart-table th:last-child,
.cl-chart-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cl-chart-table tbody tr:last-child > * {
    border-bottom: 0;
}

/* Ölçü kartında değer ve not (kullanıcı kararı 2026-10-26: özet kart grafik kartına katıldı): başlığın 8 altında, not değerin 4 altında. */
.cl-chart-kpi {
    margin-top: -8px;
}

/* Değerin yanında gri not (Müşteri Fiyatları › Alım: "son 12 ay · son 6 ay −%33"; kullanıcı kararı 2026-10-31): 13/17 ikincil, 8 sağında. */
.cl-chart-kpi-note {
    margin-left: 8px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 400;
    color: var(--cd-text-secondary);
}

/* Grafiğin kapsamını söyleyen tek cümle (orta ve büyük kartlar; kullanıcı kararı 2026-11-13: ⓘ yalnızca küçük kartlarda, bunlarda açıklama başlığın altında; referansın Usage › Token usage kartı): başlığın 8 altında, 13/17 ikincil. */
.cl-chart-desc {
    margin: -13px 0 0; /* kartın 16 aralığından geri: başlık yazısı → cümle 8 */
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

/* Açıklamanın altında ikinci satır (köprü kartlarında dönemin özeti): açıklamadan 4 aşağıda. */
.cl-chart-desc.cl-chart-desc--next {
    margin-top: -9px; /* kartın 16 aralığından geri: açıklama → özet 4 */
}

/* Formülün öğeleri (2026-10-31'den beri kartta değil, ⓘ'de: .cl-chart-info): uzunsa satır öğe ortasından kırılmaz. */

.cl-formula-op {
    margin: 0 2px;
}

.cl-formula-term {
    white-space: nowrap;
}

.cl-formula-value {
    color: var(--cd-text-secondary);
    font-variant-numeric: tabular-nums;
}

.cl-report-up {
    color: var(--cd-text-success);
}

.cl-report-down {
    color: var(--cd-text-danger);
}

/* Hücrede değerin altındaki kısa not (Satış ve Kârlılık › Net Marj: "< Taban kâr %15", "2 ürün taban altı"; kullanıcı kararı 2026-10-28):
   12/17 soluk not grisi, tek satır. */
.cl-report-cell-note {
    display: block;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
    white-space: nowrap;
}

.cl-report-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.cl-report-scroll {
    overflow-x: auto;
    overflow-y: hidden; /* yalnızca yana kayar; satır çizgisi örtüsünün 1 px'i dikey kaydırma çubuğu açmasın */
}

/* Sekme içeriği (Gelir Tablosu, Satış): seçili olmayan gizli. */
.cl-report-panel[hidden] {
    display: none;
}

/* İki satırlı başlık (Satış: dönem adı birkaç sütunun üstünde): üst satırda dönem, altında sütun adları; dönem başlığının altında %5 çizgi
   yalnızca kapsadığı sütunlarda. */
.cl-report-table .cl-report-head-group th {
    border-bottom: 0;
    padding-bottom: 2px;
}

.cl-report-table .cl-report-head-group th[scope="colgroup"] {
    color: var(--cd-text-primary);
    border-bottom: 1px solid var(--cd-border-subtle);
    padding-bottom: 6px;
}

.cl-report-table .cl-report-head-group th[rowspan] {
    border-bottom: 1px solid var(--cd-border-subtle);
}

/* Ayrıntı panelinde kalemin işareti (Kârlılık: "Taban altı"): başlığın 6 sağında, tehlike rengi. */
.cl-report-flag {
    margin-left: 6px;
    color: var(--cd-text-danger);
}

/* Çok sütunlu rapor tabloları (Satış, Kârlılık): sayı sütunlarının yan boşluğu 8 (12 yerine), 1600'lük kaba sığsın. */
.cl-report-table--sales :is(th, td).cl-report-num {
    padding-left: 8px;
    padding-right: 8px;
}

/* Tıklanır tutarın kendi rengi (ör. Taban altı sayısı kırmızı). */
.cl-report-amount.cl-report-down {
    color: var(--cd-text-danger);
}

/* Alacak & Borç: bugünün borç göstergeleri dört sütun (telefonda iki, --kpi kuralı); tablo kartında yaşlandırma
   çubuğu (partials/report-aging-bar): sekmelerin 16 altında (sekmelerin 8'i + 8) 8 yüksek tek çubuk (dış uçlar köşe 4, iç 2, dilimler arası 1), 12 altında dilimlerin açıklaması
   (renk karesi 10 × 10 köşe 2 + ad 13/17 ikincil; altında tutar 14/20 500 ve pay 12/17 soluk), tablo 24 altında. Renkler riske göre. */
.cl-report-cards--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
    .cl-report-cards.cl-report-cards--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cl-report-side[hidden] {
    display: none;
}

.cl-aging {
    margin: 8px 0 24px; /* sekmelerin 8'iyle birlikte 16 */
}

.cl-aging-bar {
    display: flex;
    gap: var(--cl-bar-gap);
    height: var(--cl-bar-thin); /* referansın parça çubuğu: 8, zeminsiz, dış köşe 4, iç köşe 2, arası 1 */
}

.cl-aging-seg {
    min-width: var(--cl-bar-min);
    border-radius: var(--cl-bar-inner-radius);
    background: var(--cl-aging-color);
}

.cl-aging-seg:first-child {
    border-top-left-radius: var(--cl-bar-thin-radius);
    border-bottom-left-radius: var(--cl-bar-thin-radius);
}

.cl-aging-seg:last-child {
    border-top-right-radius: var(--cl-bar-thin-radius);
    border-bottom-right-radius: var(--cl-bar-thin-radius);
}

.cl-aging-legend {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.cl-aging-legend li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cl-aging-name {
    display: inline-flex;
    flex-wrap: wrap; /* "31–60 gün geç · 27 fatura" dar sütunda (768 ve telefon) taşıp yandakine biniyordu: fatura sayısı alta iner */
    align-items: center;
    gap: 0 8px;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cl-aging-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.cl-aging-value {
    padding-left: 18px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cl-aging-share {
    padding-left: 18px;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
    .cl-aging-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Riske göre renkler: alacakta vadesi gelmemiş → 90+ gün; borçta vadesi geçmiş → 60+ gün. */
.cl-aging-seg--current, .cl-aging-seg--m2p { --cl-aging-color: var(--cl-chart-3); }
.cl-aging-seg--d30, .cl-aging-seg--m1 { --cl-aging-color: var(--cl-chart-4); }
.cl-aging-seg--d60, .cl-aging-seg--w1 { --cl-aging-color: var(--cl-chart-2); }
.cl-aging-seg--d90, .cl-aging-seg--late { --cl-aging-color: var(--cd-fill-danger); }
.cl-aging-seg--d90p { --cl-aging-color: color-mix(in srgb, var(--cd-fill-danger) 65%, #000); }
.cl-aging-seg--m2 { --cl-aging-color: var(--cl-chart-1); }
.cl-aging-swatch { background: var(--cl-aging-color); }

/* Gösterge kartları → tablo kartı / araç çubuğu 16 (Raporlar standardı; kullanıcı bildirimi 2026-10-29: Tahsilat Performansı ve
   Alacak & Borç'ta 8'di). */
.cl-report-cards--kpi {
    margin-bottom: 16px;
}

/* Pay sütunu: tutarın yanında küçük, soluk. */

.cl-report-scroll[hidden] {
    display: none;
}

.cl-report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    white-space: nowrap;
}

.cl-report-table thead th {
    padding: 5px 12px; /* kart içi tablo başlığı referansta 28 yüksek: 5 + 17 + 5 + 1 çizgi (KART İÇİ TABLO BAŞLIĞI KURALI) */
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-secondary);
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid var(--cd-border-subtle);
}

/* Gelir tablosunda sütun başlıklarının altındaki çizgi referansın Claude Code › Team tablosu gibi (kullanıcı kararları 2026-10-26; bir ara
   kaldırılmıştı): 1 px %5, iki yandan 12 içeride (tablonun kenarına değmez). Hücre başına arka plan görüntüsü: ilk ve son hücrede 12'lik
   pay; telefonda sabit ad hücresinin zemin rengi çizginin altında kalır. */
.cl-report-table.cl-report-table--income thead th {
    border-bottom: 0;
    background-image: linear-gradient(var(--cd-border-subtle), var(--cd-border-subtle));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
}

.cl-report-table.cl-report-table--income thead th:first-child {
    background-size: calc(100% - 12px) 1px;
    background-position: 100% 100%;
}

.cl-report-table.cl-report-table--income thead th:last-child {
    background-size: calc(100% - 12px) 1px;
    background-position: 0 100%;
}

.cl-report-th {
    display: block;
}

/* Satış Analizi, Kârlılık, Alacak & Borç tabloları da sabit sütunlu (kullanıcı kararı 2026-10-26; partials/report-colgroup). Satır adı
   sütununa sığmayan ad (uzun ticari mal adları) tek satırda "…" ile kesilir, tamamı üzerine gelince ipucunda (.cl-truncate,
   cover-lab-tooltips.js yalnızca kesilmişse gösterir). */
.cl-report-table.cl-report-table--fixed {
    --cl-label-min: 264px; /* iki kelimelik ad + grup rozeti + ödeme harfi yan yana sığsın (kullanıcı kararı 2026-10-31; önce 184, ad "NO…" kalıyordu) */
    table-layout: fixed;
    width: 100%;
    min-width: calc(var(--cl-label-min) + var(--cl-cols-w, 0px));
}

.cl-report-table.cl-report-table--fixed .cl-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gelir tablosunun sütunları sabit genişlikte (kullanıcı bildirimi 2026-10-26: bölüm açılıp kapanınca sütunlar kayıyordu). Genişlikler
   <colgroup>'ta (ReportPage::AMOUNT_WIDTH / DIFF_WIDTH), satır adı sütunu kalan yeri alır; dar ekranda tablo en az kendi toplamı kadar
   geniştir ve kaydırılır. Sığmayan yazı kesilmez, taşar (genişlikler en uzun değerden bol). */
.cl-report-table.cl-report-table--income {
    --cl-label-min: 320px; /* tablo çerçevesinin 2 px'i tam genişlikte yatay kaydırma açmasın (önce 336) */
    table-layout: fixed;
    width: 100%;
    min-width: calc(var(--cl-label-min) + var(--cl-cols-w, 0px)); /* sütunların toplamı tablonun style'ında (--cl-cols-w) */
}

/* TELEFONDA RAPOR TABLOLARI: satır adı sütunu dar (192) ve solda sabit, rakam sütunları yana kayar; ad
   sığmazsa alt satıra geçer. Sabit hücrenin zemini sayfa zemini (bantlı satırda bandın rengi sayfa zemininin üstünde), altından kayan
   rakamlar görünmez. */
@media (max-width: 767px) {
    .cl-report-table.cl-report-table--income,
    .cl-report-table.cl-report-table--fixed {
        --cl-label-min: 192px; /* "Toplam Satışlardaki Payı" tek satırda kalsın, ilk rakam sütunu yine tam görünsün (önce 176) */
    }

    /* Bölüm başlığı tek satırda kalır, yanındaki boş bant hücrelerinin üstüne taşar (kapalı bölümün başlıktaki rakamları olan Amortisman ve
       Vergi kısa). */
    .cl-report-table.cl-report-table--income tbody > .cl-report-section > th:first-child {
        white-space: nowrap;
        overflow: visible;
    }

    .cl-report-table > thead th.cl-report-label-col, /* iki satırlı başlıkta ikinci satırın ilk hücresi (Ciro, Adet…) değil */
    .cl-report-table--static > thead > tr > th:first-child, /* Entegrasyonlar / Sistem tabloları: başlığın ilk hücresi de gövdedeki gibi sabit (kullanıcı bildirimi 2026-11-12: başlık kayıp "ıkron" kalıyordu) */
    .cl-report-table > tbody > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--cd-page-bg);
    }

    .cl-report-table.cl-report-table--income tbody > tr > th:first-child,
    .cl-report-table.cl-report-table--fixed tbody > tr > th:first-child {
        white-space: normal;
    }

    /* Sabit hücre opak (sayfa zemini) ve köşesiz: yana kaydırınca altından geçen rakamlar görünmez. */
    /* Entegrasyonlar / Sistem tabloları: sabit ad sütunu diğer rapor tablolarındaki gibi 192 ve açıklaması alt satıra geçer; yoksa uzun açıklama sütunu ekranın
       neredeyse tamamına yayıp "Durum"u altında bırakıyordu (kullanıcı bildirimi 2026-11-12, iPhone). */
    .cl-report-table--static > thead > tr > th:first-child,
    .cl-report-table--static > tbody > tr > th:first-child {
        width: 192px;
        min-width: 192px;
        max-width: 192px;
        white-space: normal;
    }

    .cl-report-table--static > tbody > tr > th:first-child .cl-report-cell-note {
        white-space: normal;
    }

    .cl-report-table.cl-report-table.cl-report-table.cl-report-table--income tbody > tr > :first-child {
        position: sticky; /* çizgi şeridinin "position: relative"inden baskın */
        background-color: var(--cd-page-bg); /* yalnızca renk: kârın üstündeki kalın çizgi (arka plan görüntüsü) sabit hücrede de görünür */
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.cl-report-table th.cl-report-num,
.cl-report-table td.cl-report-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cl-report-table thead th.cl-report-num {
    text-align: right;
}

.cl-report-label-col {
    width: 100%;
    min-width: 240px;
    text-align: left;
    font-weight: 400;
}

/* RAPOR TABLOSU HİYERARŞİSİ — standart (kullanıcı kararı 2026-10-25; referansın Rate limits tablosu ölçüldü: grup başlığı 14/20 500
   birincil, altına yaslı, alt boşluk 6, gruplar arası fazladan boşluk; alt satırların etiketi 14/20 400 İKİNCİL, değerleri birincil; grubun son
   satırının altında çizgi yok). Satır türleri ve görünümleri, her rapor tablosunda (.cl-report-table) aynı:
     bölüm başlığı (.cl-report-section)  16/24 580 birincil, üstte 36 (ilkinde 16) boşluk, altta 6, altında %5 çizgi;
     1. seviye (.cl-report-lvl-1)        etiket ikincil, tutar birincil; başlık satırı (heading) etiketi 500;
     2. seviye (.cl-report-lvl-2)        20 içeride, etiket ve tutar ikincil;
     3. seviye (.cl-report-lvl-3)        40 içeride, etiket ve tutar soluk;
     alt toplam (--total)                 500 birincil, üstünde %10 çizgi;
     ana sonuç (--result)                 zeminsiz (2026-10-26'da gri bant kaldırıldı), 580 birincil, üstünde ve altında 8 boşluk;
     son sonuç (--result.--final)         600;
     oran (--ratio)                       12/17 soluk, bağlı olduğu satıra yapışık.
   Satır çizgileri %5; sonuç satırlarında çizgi yok. */
.cl-report-table tbody th,
.cl-report-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--cd-border-subtle);
}

/* Seçici tablonun genel hücre kuralından (tbody th, padding 8 12) baskın olmalı; önce değildi ve başlıklar 8 boşlukla yapışık çiziliyordu
. Referansın grup başlığı satırı 63: üstte 36, yazı 20, altta 6, çizgi 1. Yazı 16/24 580 (kullanıcı
   kararı 2026-10-26: "biraz daha büyük"; referansın bölüm başlığı 15/20 500 fark edilmiyordu), satır 67. */
.cl-report-table tbody > .cl-report-section > th {
    padding: 36px 12px 6px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 580;
    color: var(--cd-text-primary);
    text-align: left;
    border-bottom: 1px solid var(--cd-border-subtle);
}

/* Bölüm başlığının tutar hücreleri: yalnızca bölüm kapalıyken dolu (toplamın rakamları); başlıkla aynı boşluk
   ve satır yüksekliği, yazı 14 500 (toplam satırı gibi). */
.cl-report-table tbody > .cl-report-section > td {
    padding: 36px 12px 6px;
    line-height: 24px;
    font-weight: 500;
    color: var(--cd-text-primary);
    border-bottom: 1px solid var(--cd-border-subtle);
}

/* Kapalı bölümün başlığında tutarın altındaki pay (oran satırı gibi 12/17 soluk, kullanıcı kararı 2026-10-26). */
.cl-report-section-ratio[hidden] {
    display: none;
}

/* Başlığın altındaki etiket: başlığın yazısıyla aynı hizada (ok 16 + 4). */
.cl-report-section-ratio--label {
    padding-left: 16px;
}

.cl-report-section-ratio {
    display: block;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    color: var(--cd-text-muted);
}

/* Kapalı bölümün başlığında alt çizgi yok: altında doğrudan toplam / sonuç gelir, onların çizgisiyle çift
   çizgi olmasın (Amortisman, Vergi kapalıyken). */
.cl-report-table tbody > .cl-report-section:has(.cl-report-section-toggle[aria-expanded="false"]) > * {
    border-bottom: 0;
}

.cl-report-table tbody > .cl-report-section:first-child > * {
    padding-top: 16px;
}

/* Bölümün son satırı: altında çizgi yok (boşluk ve bir sonraki başlık ayırır). */
.cl-report-table tbody > tr:has(+ .cl-report-section) > * {
    border-bottom: 0;
}

.cl-report-lvl-1 > th {
    color: var(--cd-text-secondary);
}

.cl-report-row--heading > th {
    font-weight: 500;
}

/* Gelir tablosunda bölüm başlığı, ilk kademe, toplam ve kâr aynı hizada (28; referansın Rate limits tablosunda grup başlığı ve satırları
   aynı hizada). Oklu satırda ok yazının soluna asılır (ok 16 + 4, düğmenin −4 payı). Alt kademeler aşağıda (KADEME VE BAĞ ÇİZGİSİ). */
.cl-report-table.cl-report-table--income tbody > tr > th { padding-left: 28px; }
.cl-report-table.cl-report-table--income tbody > tr > th:has(> .cl-report-toggle) { padding-left: 12px; }

/* KADEME (kullanıcı kararları 2026-10-26: neyin neye bağlı olduğu, neyin açılıp kapandığı anlaşılsın): okun altındaki açılır başlık
   16 içeride, açılır olmayan satır bağlı olduğu başlığın yazısı hizasında (aşağıdaki kural). Bağ çizgileri denendi, kaldırıldı. */
/* Kural (kullanıcı kararları 2026-10-26; bütün rapor tablolarında): bir okun altındaki AÇILIR başlık her zaman 16 içeride (oku üstteki
   başlığın yazısı hizasında); açılır OLMAYAN satır bağlı olduğu başlığın yazısı hizasında. Gelir tablosunda bölüm başlığı oku 8 / yazısı 28;
   1. kademe açılır başlık (Pazarlama, Satış ve Dağıtım Giderleri) oku 24 / yazısı 44; 2. kademe açılır (Pazarlama) oku 40 / yazısı 60;
   yapraklar: bölümün altındakiler 28, 1. kademe başlığın altındakiler 44, 2. kademeninkiler (Ağırlama Gideri…) 60. */
.cl-report-table.cl-report-table--income tbody > tr.cl-report-lvl-2 > th { padding-left: 44px; }
.cl-report-table.cl-report-table--income tbody > tr.cl-report-lvl-3 > th { padding-left: 60px; }
.cl-report-table.cl-report-table--income tbody > tr.cl-report-lvl-1 > th:has(> .cl-report-toggle) { padding-left: 28px; }
/* Açılır başlığın altındaki yaprakların adı bir ton daha soluk: başlıklarıyla aynı hizada oldukları için
   "kardeş" sanılmasınlar; başlık (oklu) ikincil, yaprak soluk. Tutarlar kademenin renginde kalır. */
.cl-report-table.cl-report-table--income tbody > tr:is(.cl-report-lvl-2, .cl-report-lvl-3) > th:not(:has(> .cl-report-toggle)) {
    color: var(--cd-text-muted);
}

.cl-report-table.cl-report-table--income tbody > tr.cl-report-lvl-2 > th:has(> .cl-report-toggle) { padding-left: 44px; }
.cl-report-table.cl-report-table--income tbody > tr.cl-report-lvl-3 > th:has(> .cl-report-toggle) { padding-left: 60px; }

.cl-report-table tbody .cl-report-lvl-2 > th {
    padding-left: 28px; /* yaprak, bağlı olduğu açılır satırın yazısı hizasında (kullanıcı kararı 2026-10-26; önce 32) */
}

.cl-report-lvl-2 > th,
.cl-report-lvl-2 > td {
    color: var(--cd-text-secondary);
}

.cl-report-table tbody .cl-report-lvl-3 > th {
    padding-left: 44px;
}

.cl-report-lvl-3 > th,
.cl-report-lvl-3 > td {
    color: var(--cd-text-muted);
}

/* Satırın altındaki açıklama (ör. Stoktaki Artış / Azalış: "Stok alımları − satılan ürünlerin maliyeti"). */
.cl-report-hint {
    display: block;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* GELİR TABLOSU SATIR BANTLARI: bölüm başlığı hafif gri, toplam ve payı yeşil, kâr ve payı pembe; köşeler 8.
   Gri bandın alt köşeleri, yeşil bandın üst köşeleri düz: bölüm kapanınca ikisi tek blok olur. Zemini boyalı satırın üstünde ve altında
   çizgi yok. Satırlar arası boşluk saydam çerçevede kalır (zemin padding-box'ta), bu yüzden köşe yarıçapı dikeyde çerçeve kadar büyüktür
   (iç köşe 8). */
.cl-report-table.cl-report-table--income tbody > .cl-report-section > * {
    padding-top: 8px;
    border-top: 0; /* bölümler arası ekstra boşluk yok, standart satır aralığı (kullanıcı kararı 2026-10-26; önce 28) */
    background: var(--cl-band-section);
    background-clip: padding-box;
}

.cl-report-table.cl-report-table--income tbody > .cl-report-section:first-child > * {
    padding-top: 8px;
    border-top: 0;
}

.cl-report-table.cl-report-table--income tbody > .cl-report-section > :first-child { border-radius: 8px 0 0 0 / 36px 0 0 0; }
.cl-report-table.cl-report-table--income tbody > .cl-report-section > :last-child { border-radius: 0 8px 0 0 / 0 36px 0 0; }
.cl-report-table.cl-report-table--income tbody > .cl-report-section:first-child > :first-child { border-radius: 8px 0 0 0; }
.cl-report-table.cl-report-table--income tbody > .cl-report-section:first-child > :last-child { border-radius: 0 8px 0 0; }
/* Toplamı olmayan bölüm (Amortisman, Vergi, Bilgi) kapalıyken altında yeşil bant yok: gri bandın alt köşeleri de yuvarlak. */

.cl-report-table.cl-report-table--income tbody .cl-report-row--total > *,
.cl-report-table.cl-report-table--income tbody .cl-report-row--ratio:not(.cl-report-row--of-result) > * {
    border-top: 0;
    border-bottom: 0;
    background: var(--cl-band-total);
}

.cl-report-table.cl-report-table--income tbody .cl-report-row--total:not(:has(+ .cl-report-row--ratio)) > :first-child,
.cl-report-table.cl-report-table--income tbody .cl-report-row--ratio:not(.cl-report-row--of-result) > :first-child { border-bottom-left-radius: 8px; }
.cl-report-table.cl-report-table--income tbody .cl-report-row--total:not(:has(+ .cl-report-row--ratio)) > :last-child,
.cl-report-table.cl-report-table--income tbody .cl-report-row--ratio:not(.cl-report-row--of-result) > :last-child { border-bottom-right-radius: 8px; }

/* Toplam bandının altında satır kalırsa (pay satırı) arada boşluk yok; bantla sonraki satır arası 8. */
.cl-report-table.cl-report-table--income tbody .cl-report-row--ratio:not(.cl-report-row--of-result) > * {
    padding-bottom: 8px;
}

/* Kâr satırları (ve payları): zemin yok (kullanıcı kararı 2026-10-26; önce pembe, mavi, gri, gradyan denendi). */
.cl-report-table.cl-report-table--income tbody .cl-report-row--result > *,
.cl-report-table.cl-report-table--income tbody .cl-report-row--of-result > * {
    background: var(--cl-band-result);
    background-clip: padding-box;
}

/* Kârın üstünde kalın çizgi (kullanıcı kararları 2026-10-26: "bayağı kalın", sonra "birazcık incelt"): 2 px %20, bölümler arası 28'lik boşluğun altında, yazının 8
   üstünde; satır çizgileri gibi iki yandan 12 içeride. */
.cl-report-table.cl-report-table--income tbody > .cl-report-row--result > * {
    background-image: linear-gradient(var(--cd-border-strong), var(--cd-border-strong));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 0;
    background-origin: padding-box;
}

.cl-report-table.cl-report-table--income tbody > .cl-report-row--result > :first-child {
    background-size: calc(100% - 12px) 2px;
    background-position: 100% 0;
}

.cl-report-table.cl-report-table--income tbody > .cl-report-row--result > :last-child {
    background-size: calc(100% - 12px) 2px;
    background-position: 0 0;
}

/* SATIR ÇİZGİLERİ (kullanıcı kararı 2026-10-26; referansın Rate limits tablosu ölçüldü): bölüm başlığının ve her satırın altında 1 px %5
   çizgi; bloğun son satırının (sonraki satır bölüm başlığı ya da kâr) altında çizgi yok, ardından 28 boşluk; toplamla payı, kârla payı
   arasında çizgi yok (pay bağlı olduğu satıra yapışık). Kapalı bölümün başlığı bloğun son satırıysa (toplamı yoksa) altında çizgi yok.
   (Zeminli bantlar varken bu çizgiler kaldırılmıştı.) */
.cl-report-table.cl-report-table--income tbody > .cl-report-section > * {
    border-bottom: 1px solid var(--cd-border-subtle);
}

.cl-report-table.cl-report-table--income tbody > .cl-report-section--alone.cl-report-section--closed > *,
.cl-report-table.cl-report-table--income tbody > .cl-report-row--ratio > *,
.cl-report-table.cl-report-table--income tbody > .cl-report-row--result > *,
.cl-report-table.cl-report-table--income tbody > tr:has(+ .cl-report-section) > *,
.cl-report-table.cl-report-table--income tbody > tr:has(+ .cl-report-row--ratio) > *,
.cl-report-table.cl-report-table--income tbody > tr:has(+ .cl-report-row--result) > * {
    border-bottom: 0;
}

/* Kapalı bölümün başlığı, altında toplamı varsa (toplam her zaman görünür) çizgiyle ayrılır; toplamı yoksa bloğun son satırıdır. */
.cl-report-table.cl-report-table--income tbody > .cl-report-section.cl-report-section--closed:not(.cl-report-section--alone) > * {
    border-bottom: 1px solid var(--cd-border-subtle);
}

/* Satır çizgileri iki yandan 12 içeride, tablonun kenarına değmez (referansın Claude Code › Team tablosu; kullanıcı kararı 2026-10-26).
   Çizgi hücrenin alt kenarı; ilk ve son hücrede kenarın dış 12 px'i sayfa zemini renginde kısa bir şeritle örtülür (çizgi olmayan
   satırda şerit görünmez: altı zaten zemin rengi). */
.cl-report-table.cl-report-table--income tbody > tr > :is(:first-child, :last-child) {
    position: relative;
}

.cl-report-table.cl-report-table--income tbody > tr > :is(:first-child, :last-child)::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 12px;
    height: 1px;
    background: var(--cd-page-bg);
    pointer-events: none;
}

.cl-report-table.cl-report-table--income tbody > tr > :first-child::after { left: 0; }
.cl-report-table.cl-report-table--income tbody > tr > :last-child::after { right: 0; }

/* PAKETLER (kullanıcı kararı 2026-10-26: "başlık başlık, altında kâr; bir paket olarak görünsün"): bir kâra kadarki bölümler ve o kâr
   bir pakettir (Satışlar + Satılan Malın Maliyeti + Brüt Satış Kârı; Faaliyet Giderleri + EBITDA; …). Paketin içinde ekstra boşluk yok:
   bölümler ve kâr standart satır aralığıyla, aralarında satır çizgisi. Paketler arasında 28 boşluk (kârın / payının ardından gelen bölüm
   başlığının üstünde) ve paketin son satırının altında çizgi yok. */
.cl-report-table.cl-report-table.cl-report-table--income tbody > tr:has(+ .cl-report-section) > * {
    border-bottom: 1px solid var(--cd-border-subtle);
}

.cl-report-table.cl-report-table.cl-report-table--income tbody > tr:is(.cl-report-row--result, .cl-report-row--of-result):has(+ .cl-report-section) > * {
    border-bottom: 0;
}

.cl-report-table.cl-report-table.cl-report-table--income tbody > tr:is(.cl-report-row--result, .cl-report-row--of-result) + .cl-report-section > * {
    border-top: 28px solid transparent;
}

/* Toplam satırının üstünde ayrı çizgi yok: üstündeki satırın çizgisi yeter (çift çizgi olmasın). */
.cl-report-table.cl-report-table--income tbody > .cl-report-row--total > * {
    border-top: 0;
}

/* Bölümler ve kârlar arasında ekstra boşluk yok (kullanıcı kararı 2026-10-26; önce 28); kârın payının altında boşluk yok (önce 8 vardı ve kârdan sonraki boşluk 36 oluyordu). */
.cl-report-table.cl-report-table--income tbody > tr.cl-report-row--of-result > * {
    border-bottom: 0;
}

/* Kâr, üstündeki bölümün hemen altında, satırlar arası standart boşlukla (kullanıcı kararı 2026-10-26; önce 28'lik ara vardı): ayrımı
   üstündeki kalın çizgi yapar. Kârdan sonraki bölüm yine 28 aşağıda. */
.cl-report-table.cl-report-table--income tbody > tr.cl-report-row--result > * {
    border-top: 0;
}

.cl-report-table.cl-report-table--income tbody .cl-report-row--result > :first-child { border-top-left-radius: 8px 36px; }
.cl-report-table.cl-report-table--income tbody .cl-report-row--result > :last-child { border-top-right-radius: 8px 36px; }
.cl-report-table.cl-report-table--income tbody .cl-report-row--of-result > :first-child { border-bottom-left-radius: 8px; }
.cl-report-table.cl-report-table--income tbody .cl-report-row--of-result > :last-child { border-bottom-right-radius: 8px; }

/* Paketler arası boşluk satırdan da istenebilir (kullanıcı kararı 2026-10-30, Nakit Akışı: Dönem Başı Nakit, Tahsilatlar, Ödemeler, Net Nakit
   Akışı, Dönem Sonu Nakit ayrı paketler): 'gap' satırının (--gap) üstünde 28, öncekinin altında çizgi
   yok; sonuç satırının kalın çizgisi boşluğun altında kalır. */
.cl-report-table.cl-report-table.cl-report-table--income tbody > tr:has(+ .cl-report-row--gap) > * {
    border-bottom: 0;
}

.cl-report-table.cl-report-table.cl-report-table--income tbody > tr.cl-report-row--gap > * {
    border-top: 28px solid transparent;
}

/* TABLO KART DEĞİLDİR — KART İÇİ / KART DIŞI KURALI (kullanıcı kararı 2026-11-13; referansın 7 sayfası canlıda ölçüldü, CLAUDE.md §9.3): referansta tablo hiçbir zaman
   kartta değildir (Caching › Cache usage breakdown, Claude Code › Team, Rate limits): sayfa zemininde bölüm başlığı (15/20 500), aynı satırın sağ ucunda araç çubuğu
   ve başlığın 16 altında tablo; tablo bölümün genişliğinden 12 + 12 taşar, hücre boşluğu yazıyı başlık hizasına getirir. Bölümler arası 40 (16 sayfa aralığı + 24). Önce
   (2026-10-26) köşe 12, iç boşluk 16 ve %10 halkalı karttı; referansın tablosu kart sanılmıştı. Sınıf adı geçmiş için `cl-report-table-card` kaldı. */
/* BÖLÜMLER ARASI HER YERDE 40 — TÜM ANALİZ SAYFALARI, TEK STANDART (kullanıcı kararı 2026-11-14; referans canlıda ölçüldü: Caching, Claude Code usage — üst kapta aralık 28 + tablo / grafik bölümünün
   `mt-sm` 12'si = 40; kart → tablo bölümü 40, tablo bölümü → tablo / grafik bölümü 40): bölüm kendi alt boşluğunu (16) taşır, üst boşluğu 24; ardışık iki bölüm 16 + 24 = 40, kart bloğu (kendi alt
   boşluğu 16) → bölüm de 40. Önce yalnızca kart blokları 16 taşıyordu, tablo → tablo 24 kalıyordu (Tahsilat, Ödeme, Nakit Akışı, Alacak & Borç). */
.cl-report-table-card {
    margin-top: 24px;
    margin-bottom: 16px;
}

/* Bölümün SON öğesinin kendi alt boşluğu bölümün alt boşluğuna eklenmez (yaşlandırma çubuğunun 24'ü aralığı 48 yapıyordu): bölümler arası yalnızca standart 40. */
.cl-report-table-card > :last-child {
    margin-bottom: 0;
}

/* Bölüm kabı dikey flex: ardışık iki bölümün alt / üst boşlukları BİRLEŞMEZ (blok kapta 16 ile 24 birleşip 24'e iniyordu; Tahsilat, Ödeme, Alacak & Borç), toplam 16 + 24 = 40 kalır. */
.cl-report-panel {
    display: flex;
    flex-direction: column;
}

/* Sayfanın ilk öğesiyse (ya da ilk öğenin ilk bölümüyse) üstte ek boşluk yok. */
.cl-report > .cl-report-table-card:first-child,
.cl-report > :first-child > .cl-report-table-card:first-child {
    margin-top: 0;
}

.cl-report-table-card-head {
    /* Referansın kart başlığı (ölçüldü 2026-10-31; kullanıcı kararı 2026-10-31, portal geneli; 2026-10-29'dan beri seçiciler başlığın alt
       satırındaydı): solda başlık + açıklama, sağda aynı satırda üstten hizalı seçiciler; sığmazsa seçiciler alt satıra iner. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.cl-report-table-card-heading {
    display: flex;
    flex: 1 1 max(64px, 45%);
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cl-report-table-card-desc {
    margin: 0;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

/* Seçiciler her zaman sağa yaslı; sığmayıp alt satıra inince de sağda kalır (kullanıcı bildirimi 2026-10-31: ".cl-report-table-card
   .cl-report-toolbar"un margin: 0'ı aynı ağırlıkta ve sonra yazıldığı için margin-left: auto'yu eziyordu, alt satıra inen seçiciler sola
   yaslanıyordu; seçici bu yüzden üç sınıflı). */
.cl-report-table-card .cl-report-table-card-head > .cl-report-toolbar {
    /* Kartın genişliğini aşmaz: sığmayan seçiciler kendi içinde alt satıra iner ve sağa yaslı kalır (kullanıcı bildirimi 2026-10-31:
       flex: 0 0 auto küçülemiyordu, Tahsilat Performansı'nın filtreleri dar ekranda kartın sağından taşıyordu). */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-end;
    margin-left: auto;
    gap: 12px;
}

.cl-report-table-card-title {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-report-table-card .cl-report-toolbar {
    margin: 0;
    flex-wrap: wrap;
}

/* Sekmeli tablo kartı (kullanıcı kararları 2026-10-28; Satış ve Kârlılık: Müşteriler | Ürünler): sekmeler başlık satırının (solda dönem,
   sağda seçici ve Dışa aktar) 16 altında, kartın genişliğinde, alt çizgileri boydan boya; tablo 8 altında. */
.cl-report-table-card-tabs {
    margin: -4px 0 8px;
}

.cl-report-table-card-title,
.cl-report-download {
    white-space: nowrap;
}

.cl-report-table-card .cl-report-scroll {
    margin: 0 -12px;
}

/* Kaydırma kabı kartın kenarına 12 px taşar (tablonun hücre boşluğu yazıyı başlık hizasına getirir). Kabın içindeki tablo dışı her öğe
   (lejant, not …) başlık ve tablo yazısıyla aynı hizada başlar; kartın kenarına dayanmaz (kullanıcı bildirimi 2026-10-31, portal geneli). */
.cl-report-table-card .cl-report-scroll > :not(table, .cl-report-drill-slot) {
    margin-left: 12px;
    margin-right: 12px;
}

/* Eksi tutarlar parantez içinde (muhasebe gösterimi); renk değişmez. */
.cl-report-neg {
    white-space: nowrap;
}

/* Grafik kartı başlığındaki ⓘ referansın kart başlığı gibi (Caching › "Uncached input tokens ⓘ", ölçüldü 2026-10-29): ikon 16, yazıdan 8
   sağda, başlık satırına (20) dikeyde ortalı. Form başlıklarında kap 14 yüksek; burada satırın yüksekliği. */
.cl-chart-title {
    display: flex;
    align-items: center;
}

.cl-chart-title .cl-info-tip {
    height: 20px;
}

/* Rapor grafik kartlarının ⓘ'si: hesabın açıklaması örnekli, satır satır (metindeki satır sonları korunur),
   formlarınkinden geniş (320). */
.cl-chart-card .cl-info-tip-pop {
    max-width: 320px;
    width: max-content;
}

/* ⓘ'nin içi (kullanıcı kararı 2026-10-31; HasReportMetrics::chartInfoHtml): geçen ay ve değişim, formül, not, tanım + örnek; bölümler arası 8.
   İpucu zemininde renkler ipucu yazısından (soluk kısımlar %70); değişim olumluysa yeşil, olumsuzsa kırmızı. Tanım metninin satır sonları korunur. */
.cl-chart-info {
    display: flex;
    white-space: normal;
    flex-direction: column;
    gap: 8px;
}

.cl-chart-info-row {
    display: block;
}

.cl-chart-info-text {
    display: block;
    white-space: pre-line;
}

.cl-chart-info .cl-formula-op,
.cl-chart-info .cl-formula-text {
    opacity: .7;
}

.cl-chart-info .cl-formula-value {
    color: inherit;
}

/* Karşılaştırmada olumlu yeşil, olumsuz kırmızı; ipucu zemini iki temada da koyu: koyu temanın tonları. */
.cl-chart-info .cl-report-up {
    color: var(--cl-tip-up);
}

.cl-chart-info .cl-report-down {
    color: var(--cl-tip-down);
}

/* Müşteri rozetleri (atlasın Rozet › etiket + durum; 2026-11-03): nötr grup etiketi, vurgu renginde grup önerisi, tonlu yazılı ödeme durumu
   ("Zamanında" / "Geç" / "Riskli"); aralarında 4. Tabloda da atlasın sm boyu (20, 0 8, köşe 5, 12/15). */
.cl-cust-badges {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

/* "Sistem" rozeti (kullanıcı kararı 2026-11-05; referansın Skills › Source "Anthropic" rozeti: bg-tint-blue + text-accent). */
.cl-status-badge--system { background: var(--cd-tint-blue-bg); color: var(--cd-text-accent); }
.cl-status-badge--move-up { background: var(--cd-tint-blue-bg); color: var(--cd-tint-blue-fg); }
.cl-status-badge--move-down { background: var(--cd-tint-yellow-bg); color: var(--cd-tint-yellow-fg); }

/* Tabloda da atlasın sm boyu (20, 0 8, köşe 5, 12/15; kullanıcı kararı 2026-11-03: xs boyu 18 küçük geliyordu, ciro rozetiyle aynı boy). */
.cd-page .fi-ta-ctn tbody .cl-status-badge,
.cl-report-table tbody .cl-status-badge,
.cl-grade-badge[class*="cl-pay-text--"] {
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 15px;
}

.cl-status-badge--pay-green { background: var(--cd-tint-green-bg); color: var(--cd-tint-green-fg); }
.cl-status-badge--pay-yellow { background: var(--cd-tint-yellow-bg); color: var(--cd-tint-yellow-fg); }
.cl-status-badge--pay-red { background: var(--cd-tint-red-bg); color: var(--cd-tint-red-fg); }

/* Rapor tablolarının müşteri satırında (Satış ve Kârlılık, Alacak & Borç, Tahsilat Performansı) ödeme durumu harfi ve grup rozeti adın 8
   sağında. */
.cl-report-table .cl-report-label-col .cl-status-badge {
    flex: none;
    margin-left: 8px;
}

.cl-report-table .cl-status-badge--pay {
    flex: none;
    margin-left: 8px;
}

/* Rapor tablosu kartının başlık satırında arama ve filtreler (kullanıcı kararı 2026-10-29; Tahsilat Performansı; referansın Team kartı gibi
   sağa yaslı, Dışa aktar'ın solunda): arama kutusu liste tablolarınınkiyle aynı (256, büyüteç 16, X); haplar aynı; menüler sağa yaslı
   haplardan taşmasın diye hapın sağ kenarına hizalı açılır. */
.cd-page .cl-report-search .fi-input-wrp .fi-input-wrp-prefix {
    width: auto !important;
    padding: 0 0 0 8px !important;
}

.cd-page .cl-report-search .fi-input-wrp .fi-input {
    padding: 6px 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .cl-report-search:not(:has(input:placeholder-shown)) .fi-input-wrp .fi-input {
    padding-right: 33px !important;
}

.cd-page .cl-report-table-card-head .cl-filter-menu {
    left: auto;
    right: 0;
}

/* Rapor kartının filtre hapında uzun değer (müşteri unvanı) en fazla 200 geniş, "…" ile kısalır; hap araç çubuğunu alt satıra itmez
. */
.cd-page .cl-report-table-card .cl-filter-pill-value,
.cd-page .cl-report-header-end .cl-filter-pill-value {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
}

/* Alt seçenek (Satış ve Kârlılık › Kod: serinin altındaki ürün kodları; kullanıcı kararı 2026-10-31) 16 içeride. */
.cd-page .cl-filter-option.cl-filter-option--child {
    padding-left: 28px;
}

/* Sayfa başlığındaki Müşteri seçicisinin menüsü hapın sağ kenarına hizalı (başlığın sağında; kullanıcı kararı 2026-10-31). */
.cd-page .cl-report-header-end .cl-filter-menu {
    left: auto;
    right: 0;
}

/* Satış ve Kârlılık'ın araması: eşleşmeyen satırlar gizli; açık / kapalı grupların hidden'ından bağımsız. */
.cl-report-table tr.cl-search-hide {
    display: none;
}

.cl-report-search-empty {
    margin: 16px 0 0;
    text-align: center;
}

.cl-report-table .cl-report-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--cd-text-muted);
}

/* Ortalama gecikme gün sayısı müşterinin ödeme durumu renginde (kullanıcı kararı 2026-10-29; PaymentStatus::textClass): rozetlerin tint
   yazı renkleri. */
.cl-pay-text--green { color: var(--cd-tint-green-fg); }
.cl-pay-text--yellow { color: var(--cd-tint-yellow-fg); }
.cl-pay-text--red { color: var(--cd-tint-red-fg); }

/* Tahsilat Performansı tablosunun altında harflerin açıklaması (referansın grafik açıklaması gibi: 12/17, öğeler arası 16; rozet + ad
   ikincil + tanım soluk). */
.cl-pay-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 16px;
    font-size: 12px;
    line-height: 17px;
}

.cl-pay-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cl-pay-legend__text {
    color: var(--cd-text-muted);
}

/* Nakit tahmininde eksiye düşen dönem sonu nakit ve nakit açığı kırmızı (kullanıcı kararı 2026-10-29; Nakit Akışı › Tahmin). */
.cl-report-table .cl-report-amount.cl-report-amount--danger {
    color: var(--cd-text-danger);
}

/* Tablo kartının araç çubuğunda bir görünüme bağlı parça (Nakit Akışı › Tahmin'de Ay | Yıl | 12 ay gizli). */

.cl-report-row--total > th,
.cl-report-row--total > td {
    font-weight: 500;
    color: var(--cd-text-primary);
    border-top: 1px solid var(--cd-border);
}

/* Ana sonuç satırı (Brüt Satış Kârı, EBITDA, …): zeminsiz (kullanıcı kararı 2026-10-26: gri bantlar kaldırıldı); adı büyük harf 16/24
   (bölüm başlığı gibi), üstündeki boşluk altındakine eşit, yazı 580; son sonuç (Dönem Net Kârı) 600. Altında çizgi yok. */
.cl-report-table tbody .cl-report-row--result > *,
.cl-report-table tbody .cl-report-row--of-result > * {
    border-bottom: 0;
    color: var(--cd-text-primary);
}

.cl-report-table tbody .cl-report-row--result > * {
    border-top: 27px solid transparent; /* üstteki boşluk alttakine eşit (kullanıcı kararı 2026-10-26; ölçüldü) */
    font-weight: 580;
    /* Bölümün sonunu vurgulayan çizgi (kullanıcı kararları 2026-10-26; önce 1 px %10, "daha kalın"): boşluğun altında, yazının 8 üstünde,
       2 px %20 (--cd-border-strong). */
    background: linear-gradient(var(--cd-border-strong), var(--cd-border-strong)) top / 100% 2px no-repeat;
    background-origin: padding-box;
    background-clip: padding-box;
}

/* Sonuçtan ya da bölüm başlığından hemen önceki satırın alt çizgisi yok: sonucun kalın çizgisiyle çift
   çizgi olmasın. Gizli alt satırları olan grup da (--block-end, sunucu işaretler) kapsanır. */
.cl-report-table tbody tr:has(+ .cl-report-row--result) > *,
.cl-report-table tbody .cl-report-row--block-end > * {
    border-bottom: 0;
}

/* Açık grubun altında alt satırları var: grup satırının çizgisi kalır (son çizgi alt satırların sonunda kalkar). */
.cl-report-table tbody .cl-report-row--block-end:has(.cl-report-toggle[aria-expanded="true"]) > * {
    border-bottom: 1px solid var(--cd-border-subtle);
}

/* Ana sonucun adı bölüm başlığı gibi (büyük harf görünümden; 16/24). */
.cl-report-table tbody .cl-report-row--result > th {
    font-size: 16px;
    line-height: 24px;
}

.cl-report-table tbody .cl-report-row--of-result > * {
    border-bottom: 8px solid transparent;
    color: var(--cd-text-muted);
}

.cl-report-table tbody .cl-report-row--result.cl-report-row--final > * {
    font-weight: 600;
}

.cl-report-row--ratio > th,
.cl-report-row--ratio > td {
    padding-top: 0;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    color: var(--cd-text-muted);
}

/* Oran satırı bağlı olduğu satıra yapışık: aralarında çizgi yok. */
.cl-report-table tbody .cl-report-row--total:has(+ .cl-report-row--ratio) > *,
.cl-report-table tbody .cl-report-row--result:has(+ .cl-report-row--ratio) > * {
    border-bottom: 0;
}

/* Oran satırı üstteki satırına yapışık (kullanıcı bildirimi 2026-10-26: "iyice yaklaştır"; önce toplamların altında 8 boşluk kalıyordu, genel
   hücre kuralı padding-top 0'ı eziyordu): üstteki satırın alt boşluğu 2, oranın üst boşluğu 0 → yazılar arası ≈ 7. */
.cl-report-table tbody .cl-report-row:has(+ .cl-report-row--ratio) > * {
    padding-bottom: 2px;
}

.cl-report-table tbody .cl-report-row--ratio > * {
    padding-top: 0;
}

/* Gelir tablosunda "Toplam Satışlardaki Payı" yazısı ve değerleri birincil renkte (koyuda beyaz; kullanıcı kararı 2026-10-26; önce soluk). */
.cl-report-table.cl-report-table--income tbody .cl-report-row--ratio > *,
.cl-report-table.cl-report-table--income .cl-report-section-ratio {
    color: var(--cd-text-primary);
}

.cl-report-diff {
    color: var(--cd-text-secondary);
}

/* Rapor tablolarında müşteri adı standart hücreyle (kullanıcı kararı 2026-10-31; .cl-dim-name): ad, yanında grup rozeti ve ödeme harfi; sütuna
   sığmazsa ad "…" ile kısalır, rozetler adın yanında kalır, alt satıra düşmez ve yan sütuna taşmaz. */
.cl-report-label-col .cl-dim-name,
.cl-report-label-col .cl-report-toggle {
    max-width: 100%;
}

.cl-report-label-col .cl-dim-name > .cl-truncate {
    min-width: 0;
}

.cl-report-toggle {
    display: inline-flex;
    align-items: center;
    text-align: left; /* ad alt satıra geçerse sola yaslı (telefonda dar sütun) */
    gap: 4px;
    margin-left: -4px;
    padding: 0 4px 0 0;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    color: inherit;
}

.cl-report-chevron {
    display: inline-flex;
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
    color: var(--cd-text-muted);
    transition: transform 150ms var(--cd-ease-out);
}

/* Açılan satırlar yumuşak gelir (kullanıcı kararı 2026-10-26; referansın Create agent bölümleri: ok 150 ms, içerik 200 ms): satır görünür
   olunca 200 ms'de saydamlıktan belirir ve 4 px yukarıdan yerine oturur. Kapanış anlık (tablo satırının yüksekliği yumuşak küçültülemiyor;
   kapanırken bekleyen satır altındakileri bir an yerinde tutar). Sayfa ilk açılırken çalışmaz (data-cl-animate ilk çizimden sonra konur). */
.cl-report[data-cl-animate] .cl-report-table tbody > tr {
    transition: opacity 200ms var(--cd-ease-out), translate 200ms var(--cd-ease-out);
}

@starting-style {
    .cl-report[data-cl-animate] .cl-report-table tbody > tr {
        opacity: 0;
        translate: 0 -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-report[data-cl-animate] .cl-report-table tbody > tr {
        transition: none;
    }
}

.cl-report-chevron svg {
    width: 100%;
    height: 100%;
}

.cl-report-toggle[aria-expanded="true"] .cl-report-chevron {
    transform: rotate(90deg);
}

/* RAPOR SIRALAMA (kullanıcı kararı 2026-10-29; cover-lab-panel.js): rapor tablolarının sütun başlığı tıklanır; sıralanan sütunun başlığında
   yazının solunda 14 px ok (aşağı: büyükten küçüğe, yukarı: küçükten büyüğe). Birden çok sütunu kapsayan başlık (Gecikmiş) tıklanmaz. */
.cl-report-table thead th[data-cl-sortable] {
    cursor: var(--cd-cursor-interactive);
}

@media (hover: hover) {
    .cl-report-table thead th[data-cl-sortable]:hover {
        color: var(--cd-text-primary);
    }
}

/* KART İÇİ TABLO BAŞLIĞI KURALI (kullanıcı kararı 2026-11-13; referansın Caching › Cache usage breakdown tablosu canlıda ölçüldü, CLAUDE.md §8.11):
   başlık hücrenin tamamı tıklanır, 28 yüksek, iç boşluk 0 12, 13 / 17 500 ikincil renk; üzerine gelince yazı birincil olur (sıralanmış başlık da ikincil kalır,
   birincil yalnızca üzerine gelince). SAYI sütununun başlığı SAĞA yaslıdır ve yazısının sağ kenarı sayıların sağ kenarıyla aynı hizada (sağdan 12); yazı sütununun
   başlığı SOLA yaslı. SIRALAMA OKU (16 px, yazıya 4) her sıralanabilir başlıkta ayrılmıştır, yazıyı hiç kaydırmaz: SAĞA yaslı başlıkta okun yeri yazının SOLUNDA,
   SOLA yaslı başlıkta yazının SAĞINDA. Sıralanmamış başlıkta ok görünmez, üzerine gelince %35 soluk belirir (ilk basışın yönünü gösterir: sayıda aşağı, yazıda yukarı);
   sıralanmış başlıkta ikincil renk, aşağı ok büyükten küçüğe, yukarı ok küçükten büyüğe. Üçüncü basışta sıralama kalkar, ok yeniden görünmez olur. */
.cl-report-sort-arrow {
    /* (Satış Özeti ve Kaynak paneli başlıkları da kullanır; kart içi tablo başlığınınki aşağıda .cl-report-table thead th > ...) */
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: -18px;
    vertical-align: -2px;
    vector-effect: non-scaling-stroke;
}
.cl-report-table thead th > .cl-report-sort-arrow {
    width: 16px;
    height: 16px;
    margin-left: 4px; /* sola yaslı başlık: ok yazının 4 sağında (JS yazıdan sonra koyar) */
    vertical-align: -3px;
    color: transparent;
}
.cl-report-table thead th.cl-report-num > .cl-report-sort-arrow { margin-left: -20px; } /* sağa yaslı başlık: ok yazının 4 solunda (JS yazıdan önce koyar) */
.cl-report-table thead th[data-cl-first="asc"] > .cl-report-sort-arrow { transform: rotate(180deg); }
@media (hover: hover) {
    .cl-report-table thead th[data-cl-sortable]:hover > .cl-report-sort-arrow { color: var(--cd-text-disabled); }
}
.cl-report-table thead th[aria-sort] > .cl-report-sort-arrow { color: var(--cd-text-secondary); }
@media (hover: hover) {
    .cl-report-table thead th[aria-sort]:hover > .cl-report-sort-arrow { color: var(--cd-text-primary); }
}
.cl-report-table thead th[aria-sort="ascending"] > .cl-report-sort-arrow { transform: rotate(180deg); }
.cl-report-table thead th[aria-sort="descending"] > .cl-report-sort-arrow { transform: none; }
/* Üçüncü basıştan sonra fare başlıktayken ok hemen kaybolur, soluk ipucu da çıkmaz (JS fare ayrılınca işareti kaldırır). */
@media (hover: hover) {
    .cl-report-table thead th.cl-sort-cleared > .cl-report-sort-arrow { color: transparent !important; }
}

/* Sıralanabilir başlıkta yazı satır içi (ok yazının yanına otursun). Başlığı tanımı olan sütunda yazı noktalı altı çizili, tanım üzerine gelince ipucunda (referans: "Write amort."; ⓘ yok). */
.cl-report-table thead th[data-cl-sortable] > .cl-report-th { display: inline; }
.cl-report-table thead .cl-th-define {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

html:not(.cl-pointer) .cl-report-table thead th[data-cl-sortable]:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
    border-radius: 6px;
}

/* Açılır kapanır satırın tamamı tıklanır (kullanıcı kararı 2026-10-26: "mümkün olduğunca geniş"): tıklama cover-lab-panel.js "RAPOR SATIRI"
   ile (satırın boyalı alanı; satırlar arası saydam boşluk ve tutar düğmeleri hariç). Önce okun düğmesine satırı kaplayan görünmez ::after
   katmanı veriliyordu; Safari tablo satırını bu katmanın sınırı saymıyor, katman bütün tabloya yayılıp imleci her yerde el yapıyor ve
   tıklamaları yanlış satıra götürüyordu. */
.cl-report-table tbody > tr:has(> th > .cl-report-toggle) {
    cursor: var(--cd-cursor-interactive);
}

/* Bölüm başlığının oku: başlık yazısıyla aynı boy ve kalınlık; ok başlığın solunda, gruplarınki gibi. */
.cl-report-section-toggle {
    font-weight: inherit;
}

/* Tıklanır rakam (kullanıcı kararı 2026-10-29: "bir şey tıklanabilirse altı çizili olmalı"; önce yalnızca üzerine gelince çiziliydi): portalın
   metin bağlantısı gibi altı HER ZAMAN çizili, çizgi yazının renginde %40; üzerine gelince tam renk. */
.cl-report-amount {
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cd-dur-fast) var(--cd-ease-out);
}

@media (hover: hover) {
    .cl-report-amount:hover {
        text-decoration-color: currentColor;
    }
}

/* Alt çizgi yazının RENGİNDE (kullanıcı kararı 2026-10-29, referans gibi): bağlantının içindeki yazı kendi renginde boyalıysa (ödeme
   durumu sarı / kırmızı, artış / azalış, marj kademesi) çizgi de o renkte; bağlantı yazının rengini alır (çizgi bağlantının renginden çizilir). */
:is(.cl-qv-link, .cl-report-amount, a):has(> .cl-pay-text--green) { color: var(--cd-tint-green-fg); }
:is(.cl-qv-link, .cl-report-amount, a):has(> .cl-pay-text--yellow) { color: var(--cd-tint-yellow-fg); }
:is(.cl-qv-link, .cl-report-amount, a):has(> .cl-pay-text--red) { color: var(--cd-tint-red-fg); }
:is(.cl-qv-link, .cl-report-amount, a):has(> .cl-report-up) { color: var(--cd-text-success); }
:is(.cl-qv-link, .cl-report-amount, a):has(> .cl-report-down) { color: var(--cd-text-danger); }

html:not(.cl-pointer) .cl-report-amount:focus-visible,
html:not(.cl-pointer) .cl-report-toggle:focus-visible {
    outline: 0;
    box-shadow: var(--cd-focus-ring);
}

.cl-report-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* Yönetim Raporu › ayrıntı paneli (partials/report-source): üstte satırın adı ve toplamı, altında kaynak kayıtlar (tarih, başlık, not, tutar). */
.cl-report-source-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.cl-report-source-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* PANELLERDE ÇİZGİ YOK, BÖLÜMÜN BAŞLIĞI SOL ÜSTTE — PORTAL GENELİ KURAL: yan panellerde bölümler ve kayıtlar
   çizgiyle ayrılmaz (önce değer satırının altında, kayıtların arasında, Hesap'ın üstünde, fatura kalemlerinde ve hız ölçümlerinde 1 px %5
   çizgi vardı); bölümleri boşluk ve sol üst köşedeki başlık (14/20 500 birincil, .cl-quickview-heading) ayırır. Listesi olan her bölümün başlığı var
   (rapor panelinde "Faturalar" / "Ödemeler" / "Kayıtlar", report-source $listTitle). Yeni panel içeriği de çizgisiz yazılır; kesir çizgisi ve
   fiyat şelalesinin toplam çizgisi hesabın parçası, bölüm ayırıcı değil. */
.cl-report-source-section > .cl-quickview-heading {
    margin: 0 0 8px;
}

.cl-report-source-list li {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 12px;
    font-size: 12px;
    line-height: 17px;
}

.cl-report-source-date {
    color: var(--cd-text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-report-source-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cd-text-primary);
}

.cl-report-source-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cd-text-muted);
}

/* Açık faturaların vade durumu: vadesi gelmemiş gri (varsayılan), gecikmiş ikincil; olumsuzsa ödeme eşikleriyle
   sarı / kırmızı (.cl-pay-text--*). */

.cl-report-source-sub.cl-pay-text--yellow { color: var(--cd-tint-yellow-fg); }
.cl-report-source-sub.cl-pay-text--red { color: var(--cd-tint-red-fg); }

.cl-report-source-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================================
 * 15. GENEL İŞLEV KURALLARI (tüm portal ve giriş ekranları)
 * ========================================================================== */

/* FARE İMLECİ — referansın (platform.claude.com) kuralları BİREBİR (kullanıcı kararı 2026-10-13; referansın stil dosyaları ve
   detectPlatform'u okundu, Dashboard / API keys / Usage'da ölçüldü):
   - Bağlantı görünümündeki her şey (yazı bağlantıları, kenar menü sayfaları, kart bağlantıları, logo) HER ZAMAN el.
   - Etkileşimli denetimler (düğme, ikon düğmesi, düğme görünümlü bağlantı, filtre hapı, seçim kutusu, sekme, menü / liste seçeneği,
     onay kutusu, radyo, segment, anahtar, sıralama başlığı, tıklanabilir satır, açılır bölüm) `--cd-cursor-interactive`: tarayıcıda
     el, Claude masaüstü uygulamasında (Electron; cover-lab-tooltips.js → html.cl-desktop-app) ok.
   - Kapalı denetim (disabled / aria-disabled / data-disabled) ok. Yazı alanı I. Kenar menü tutamacı col-resize. Sürüklenebilir kart
     grab, sürüklerken grabbing. Açıklamalı kısaltma (abbr[title]) help. Grafik alanı ve düz yazı varsayılan (auto).
   Yeni bir etkileşimli öğe bileşen CSS'inde `cursor` yazmaz; düğme / rol taşıyorsa buradan alır, taşımıyorsa
   `cursor: var(--cd-cursor-interactive)` yazılır. Test: ThemeStandardTest::test_cursors_follow_the_console. */
html.cl-desktop-app {
    --cd-cursor-interactive: default;
}

button,
summary,
select,
input:is([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"]),
[role="button"],
[role="tab"],
[role="menuitem"],
[role="menuitemcheckbox"],
[role="menuitemradio"],
[role="option"],
[role="switch"],
[role="checkbox"],
[role="radio"],
.choices[data-type*="select"] .choices__inner,
.choices__list--dropdown .choices__item--selectable,
.fi-ta-header-cell .cursor-pointer {
    cursor: var(--cd-cursor-interactive);
}

/* Filament'in hazır `cursor-pointer` sınıfı da aynı değişkene uyar (bağlantılar hariç: onlar her zaman el). */
html.cl-desktop-app .cursor-pointer:not(a[href]) {
    cursor: default;
}

:where(a[href]:not([role])),
.fi-link,
.cl-qv-link {
    cursor: pointer;
}

/* Düğme görünümündeki bağlantı ("+ Yeni ...", "Google ile devam et") ve tıklanabilir tablo satırının hücre bağlantısı düğme sayılır
   (referansın Button render={<a>}'ı ve satırı). Rol taşıyan bağlantılar (menü / liste seçeneği) yukarıdaki kuraldan alır. */
a[href]:is(.fi-btn, .fi-icon-btn, .fi-dropdown-list-item, .cd-btn, .cl-toolbar-create, .cl-auth-google, .cl-auth-bar-secondary, .cl-magic-btn),
.fi-ta-col-wrp > a[href] {
    cursor: var(--cd-cursor-interactive);
}

:is(button, input, select, [role="button"], [role="tab"], [role^="menuitem"], [role="option"], [role="switch"], [role="checkbox"], [role="radio"], a):is(:disabled, [aria-disabled="true"], [data-disabled]) {
    cursor: default !important;
}

.cl-tree-card:not(.is-blocked):active,
[data-dragging] {
    cursor: grabbing;
}

abbr[title] {
    cursor: help;
}

/* Bekleme işareti (referansın busy Button'u): düğmenin yazısı saklanır (genişlik aynı kalır), ortada 12 px dönen halka (2026-11-06'ya kadar 16 px); düğme soluklaşmaz.
   Düğme dışındaki Filament bekleme ikonları gösterilmez. Görünürlüğü Livewire (wire:loading → display: inline-block) ve Filament'in form
   gönderimi (x-show="isProcessing") belirler. */
svg.animate-spin,
.animate-spin {
    display: none !important;
}

.cd-page .fi-btn > .animate-spin:is([style*="inline-block"], [x-show]:not([x-cloak]):not([style*="none"])) {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px !important;
    height: 12px !important;
    margin: -6px 0 0 -6px;
    color: var(--cd-text-primary);
    animation-duration: 1s !important; /* referansın busy düğmesi: 12 px, 1 sn lineer */
}

.cd-page .fi-btn:is(.fi-color-primary, .fi-btn-color-primary, .fi-color-success, .fi-btn-color-success) > .animate-spin:is([style*="inline-block"], [x-show]:not([x-cloak]):not([style*="none"])) {
    color: var(--cd-on-primary);
}

.cd-page .fi-btn:is(.fi-color-danger, .fi-btn-color-danger) > .animate-spin:is([style*="inline-block"], [x-show]:not([x-cloak]):not([style*="none"])) {
    color: #FFFFFF;
}

.cd-page .fi-btn:has(> .animate-spin:is([style*="inline-block"], [x-show]:not([x-cloak]):not([style*="none"]))) {
    opacity: 1 !important;
}

.cd-page .fi-btn:has(> .animate-spin:is([style*="inline-block"], [x-show]:not([x-cloak]):not([style*="none"]))) > :not(.animate-spin) {
    visibility: hidden;
}

.cd-page .fi-btn:has(> .animate-spin:is([style*="inline-block"], [x-show]:not([x-cloak]):not([style*="none"]))) > span[x-show][style*="none"] {
    display: inline !important; /* Filament gönderim sırasında yazıyı gizliyor; düğme daralmasın */
}

/* Sayı alanlarında artır/azalt okları yok; değer elle yazılır (kullanıcı kararı 2026-10-08; ↑/↓ tuşları cover-lab-panel.js'te kapalı). */
.fi-input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.fi-input[type='number']::-webkit-outer-spin-button,
.fi-input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Tarayıcının otomatik doldurduğu alan sarıya boyanmaz; yazı birincil renkte kalır. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cd-text-primary) !important;
    caret-color: var(--cd-text-primary);
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* Şifre gözü (tüm portal; kullanıcı kararı 2026-10-01, ikon standardına 2026-10-10'da alındı): gizliyken KAPALI göz (Tabler "eye-closed"),
   görünürken AÇIK göz (Tabler "eye"); alan içi ikonlarla aynı 16 px, çizgi 1,25 px. Çizim maske, rengi §13'te (soluk → üzerine gelince birincil). */
button[x-on\:click="isPasswordRevealed = true"] svg,
button[x-on\:click="isPasswordRevealed = false"] svg {
    display: none !important;
}

/* Şifre gözü: referansın küçük ikon düğmesi (Console "Copy": 20 × 20 kutu, 16 ikon, köşe 5): üzerine gelince hayalet zemin + ikon birincil.
   Kutu ikondan 2 px taşar (eksi kenar boşluğu), ikonun yeri değişmez. */
.fi-input-wrp button[x-on\:click="isPasswordRevealed = true"],
.fi-input-wrp button[x-on\:click="isPasswordRevealed = false"] {
    display: inline-flex; /* !important YOK: Filament gizli düğmeyi (göster / gizle'den biri) satır içi display: none ile saklar */
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0 !important;
    min-width: 0 !important;
    margin: -2px !important;
    border-radius: 5px !important;
    background: transparent !important;
    transition: background-color var(--cd-dur-fast) var(--cd-ease-in-out);
}

.fi-input-wrp button[x-on\:click="isPasswordRevealed = true"]:hover,
.fi-input-wrp button[x-on\:click="isPasswordRevealed = false"]:hover {
    background: var(--cd-fill-ghost-hover) !important;
}

button[x-on\:click="isPasswordRevealed = true"]::after,
button[x-on\:click="isPasswordRevealed = false"]::after {
    content: "";
    display: block;
}

/* İkon 16, düğme kutusu 20 (ikonun çevresinde 2; eksi kenar boşluğuyla yerleşim değişmez). */
button[x-on\:click="isPasswordRevealed = true"]::after,
button[x-on\:click="isPasswordRevealed = false"]::after {
    width: var(--cd-icon-sm) !important;
    height: var(--cd-icon-sm) !important;
}

button[x-on\:click="isPasswordRevealed = true"],
button[x-on\:click="isPasswordRevealed = false"] {
    width: calc(var(--cd-icon-sm) + 4px) !important;
    height: calc(var(--cd-icon-sm) + 4px) !important;
}

/* Giriş ekranı açılışı: başlık, açıklama ve kart yumuşakça belirir; desenin (0) üstünde, sabit üst şeridin (2) altında (kaydırınca
   şeridin altından geçerler). Ürün adı yazısı (.cl-auth-home, 3) BU KATMANA GİRMEZ: içeriğin kabı katman açmadığı için şeridin üstünde kalır. */
.fi-simple-layout .fi-simple-main {
    position: relative;
}

.fi-simple-layout .fi-simple-main :is(.fi-simple-header > :not(.cl-auth-home), .fi-simple-header ~ *) {
    position: relative;
    z-index: 1;
    animation: cd-fade-in 0.4s ease-out both;
}

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

@media (prefers-reduced-motion: reduce) {
    .fi-simple-layout .fi-simple-main :is(.fi-simple-header > :not(.cl-auth-home), .fi-simple-header ~ *) {
        animation: none;
    }
}

/* "Şifrenizi mi unuttunuz?" bağlantısı "Beni hatırla" ile aynı satırda, sağda. */
.fi-simple-layout .fi-simple-page .fi-fo-component-ctn {
    position: relative;
}

.fi-simple-layout .fi-simple-page .fi-fo-field-wrp > .grid > div:has(> .fi-fo-field-wrp-hint) {
    display: contents;
}

.fi-simple-layout .fi-simple-page .fi-fo-field-wrp-hint {
    position: absolute;
    right: 0;
    bottom: 0;
}

.fi-simple-layout .fi-simple-page .fi-fo-field-wrp-label:has(.fi-checkbox-input) {
    align-items: center;
}

/* Alan altı açıklamaları giriş ekranında uyarı gibi SOLA yaslı (kullanıcı kararı 2026-10-11; önce ortalıydı); alana Filament'in 8 px aralığı. */
.fi-simple-layout .fi-simple-page .fi-fo-field-wrp-helper-text {
    text-align: left;
}

/* Gönderimden sonra düğme gizlenince boş kalan eylem satırı yer kaplamaz. */
.fi-simple-layout .fi-simple-page .fi-form-actions:not(:has(*)) {
    display: none;
}

/* ---------------------------------------------------------------------------
 * TELEFONDA AÇILIR LİSTELER ALT PANEL = REFERANSIN ALT PANELİ, BİREBİR (kullanıcı kararı 2026-11-10; referansın kaynak kodundan okunan kurallar ve ölçüler:
 * docs/mobile-sheet-keyboard-reference.md). Dokunmatik ve < 640 px'te seçim kutuları (Choices), filtre hapı menüleri, Filament menüleri (⋮ vb.) ve kişi ekleme
 * menüsü ekranın altından açılan tek tip paneldir (.cl-sheet). Görünüm aşağıdaki "ALT PANEL" bloğunda; boy, duraklar, sürükleme ve klavye cover-lab-panel.js
 * "ALT PANEL MOTORU"nda. Hesap menüsü (< 768) ayrı kalıp, aşağıda.
 * ------------------------------------------------------------------------ */
@property --cl-sheet-dim { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cl-fade-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cl-fade-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes cl-fade-top { 0% { --cl-fade-top: 0px; } 100% { --cl-fade-top: 28px; } }
@keyframes cl-fade-bottom { 0% { --cl-fade-bottom: 28px; } 100% { --cl-fade-bottom: 0px; } }

/* Hesap menüsü telefonda (< 768) alttan açılan panel (kullanıcı kararı 2026-10-18; referansın telefondaki hesap menüsü ölçüldü): yukarıdaki
   alt panelin görünümü ve hareketi (300 ms kayma + karartma); öğeler en az 40, 15 / 22. Konumu JS'in yazdığı satır içi değerleri ezer. */
@media (max-width: 767px) {
    .cd-account-menu {
        --cl-sheet-ease: cubic-bezier(.165, .84, .44, 1);
        inset: auto 0 0 0 !important;
        z-index: 120;
        width: auto !important;
        padding: 36px 4px max(env(safe-area-inset-bottom), 8px); /* referans: tutamaç (14 + 4) + 18 */
        border-radius: 14px 14px 0 0;
        box-shadow:
            0 0 0 100vmax color-mix(in srgb, var(--cd-backdrop) calc(var(--cl-sheet-dim) * 100%), transparent),
            inset 0 1px 0 0 var(--cd-border),
            inset 1px 0 0 0 var(--cd-border),
            inset -1px 0 0 0 var(--cd-border),
            var(--cd-shadow-popover);
        translate: 0 0;
        transition:
            translate 300ms var(--cl-sheet-ease),
            --cl-sheet-dim 300ms var(--cl-sheet-ease),
            display 300ms allow-discrete;
    }

    .cd-account-menu[hidden] {
        display: none;
        translate: 0 calc(100% + 24px);
        --cl-sheet-dim: 0;
    }

    @starting-style {
        .cd-account-menu:not([hidden]) {
            translate: 0 calc(100% + 24px);
            --cl-sheet-dim: 0;
        }
    }

    .cd-account-menu::before {
        content: "";
        position: absolute;
        top: 14px;
        left: 50%;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--cd-border);
        translate: -50% 0;
    }

    /* Telefondaki hesap menüsü referansın alt panelindeki ölçülerle (Console Atlası, 2026-11-02): öğeler 40 yüksek, iç boşluk 9 10, 15 / 22;
       kimlik satırı 58,5 yüksek (iç boşluk 9 10 10,5, köşe 10), ad 15 / 22, rol 13 / 17. */
    .cd-account-menu .cd-menu-item {
        min-height: 40px;
        padding: 9px 10px;
        font-size: 15px;
        line-height: 22px;
    }

    .cd-account-menu .cd-account-identity {
        min-height: 58.5px;
        padding: 9px 10px 10.5px;
        border-radius: 10px;
    }

    .cd-account-menu .cd-account-identity .cd-account-title {
        font-size: 15px;
        line-height: 22px;
    }
}

/* ALT PANEL = REFERANSIN ALT PANELİ, BİREBİR (kullanıcı kararı 2026-11-10; kurallar referansın kaynak kodundan okundu: docs/mobile-sheet-keyboard-reference.md).
   Yalnızca dokunmatik ve < 640 px (referans: "(pointer: coarse) and (max-width: 639.98px)"). CSS ilk çizimi ve görünümü verir; boy, duraklar (default / tall), sürükleme
   ve klavye geometrisi cover-lab-panel.js "ALT PANEL MOTORU"ndadır (satır içi height / min-height / max-height / bottom yazar, referansın React stili gibi). */
@media (max-width: 639px) and (pointer: coarse) {
    html {
        --cl-sheet-slow: 1; /* panel hareket süreleri çarpanı (1 = normal hız; gözlem için büyütülebilir) */
        --cl-sheet-tall: calc((100dvh - env(safe-area-inset-top, 0px)) * .9); /* tall durağı (referans) */
    }
    html .cd-page .cl-sheet:not(#cd-sheet) {
        --cl-sheet-ease: cubic-bezier(.165, .84, .44, 1);
        position: fixed !important;
        inset: auto 0 0 0 !important; /* altta, tam genişlik; klavye açıkken JS bottom = klavye payı yazar */
        z-index: 120 !important;
        flex-direction: column;
        box-sizing: border-box;
        width: auto !important;
        height: auto; /* ilk kare: içerik boyu; JS boyu piksel olarak sabitler */
        min-height: 0 !important;
        max-height: var(--cl-sheet-tall) !important;
        margin: 0 !important;
        padding: 32px 4px max(env(safe-area-inset-bottom), 8px) !important; /* tutamaç satırı 32; alt boşluk güvenli alan ya da 8 (referans) */
        border: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        background: var(--cd-surface-popover) !important;
        box-shadow:
            inset 0 1px 0 0 var(--cd-border),
            inset 1px 0 0 0 var(--cd-border),
            inset -1px 0 0 0 var(--cd-border), /* halka yalnızca üstte ve yanlarda: en alt kenarda çizgi YOK */
            0 8px 24px rgba(0, 0, 0, .32),
            0 2px 6px rgba(0, 0, 0, .2) !important;
        overflow: visible !important; /* ::after alt yüzeyi panelin altına taşar; listeler kendi içinde kayar */
        transform: none !important;
        opacity: 1 !important; /* Alpine / Filament'in kapanış saydamlığı karışmaz: tek hareket translate */
        translate: 0 0;
        transition:
            translate calc(300ms * var(--cl-sheet-slow, 1)) var(--cl-sheet-ease),
            height calc(300ms * var(--cl-sheet-slow, 1)) var(--cl-sheet-ease),
            scale calc(300ms * var(--cl-sheet-slow, 1)) var(--cl-sheet-ease),
            display 300ms allow-discrete !important;
    }
    html:not(.dark) .cd-page .cl-sheet:not(#cd-sheet) {
        box-shadow:
            inset 0 1px 0 0 var(--cd-border),
            inset 1px 0 0 0 var(--cd-border),
            inset -1px 0 0 0 var(--cd-border),
            0 8px 24px rgba(0, 0, 0, .12),
            0 2px 6px rgba(0, 0, 0, .08) !important; /* referansın açık modu */
    }

    /* Alt panel her zaman ekranın tam genişliğinde (kullanıcı bildirimi 2026-11-05: müşteri sayfası › Fiyatlar'da ⋮ 217 px dar açılıyordu):
       masaüstünün genişlik kuralları (menü panelleri içerik kadar 128–320, filtre menüsü hapın genişliği, Oluştur menüsü) daha güçlü
       seçicilerle yazıldığı için telefonda alt paneli eziyordu. :not(#cd-sheet) bütün menü genişliği kurallarını geçer. */
    html .cd-page .cl-sheet:not(#cd-sheet) {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Panelin altında ekranın dibine kadar aynı renkte yüzey (referansın ::after'ı): klavye açıkken panel klavyenin üstünde biter, Safari'nin adres hapı ve klavye
       üstü çubuğunun arkası panel rengindedir; yukarı yaylanmada alt boşluk görünmez. */
    html .cd-page .cl-sheet:not(#cd-sheet)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 100dvh;
        background: var(--cd-surface-popover);
        pointer-events: none;
    }

    /* iOS'ta sayfa kabuğu (.cd-page, görünür alan yüksekliğinde) sabit öğeleri kendi alt kenarında keser: panelin ::after'ı Safari'nin alt çubuğunun ve klavye üstü
       çubuğun arkasına inemez, orada sayfa zemini görünürdü. Panel açıkken zeminin alt yarısı panel rengindedir (kabuğun altında kalan her yer), üst yarısı sayfa rengi
       (durum çubuğu bölgesi değişmez). */
    html:has(.cd-page .cl-sheet:not(#cd-sheet):not([style*="display: none"]):not([x-cloak]):not(.choices__list--dropdown:not(.is-active))),
    html:has(.cd-page .cl-sheet:not(#cd-sheet):not([style*="display: none"]):not([x-cloak]):not(.choices__list--dropdown:not(.is-active))) body {
        /* Katmanlar: (1) durum çubuğunun arkası = kutunun ÜSTÜNDE kalan alan (kutunun dışına konumlanan bir kare; yoksa menü rengi görünüp üstte gri blok oluşuyordu,
           kullanıcı bildirimi 2026-11-12, fiziksel iPhone), (2) üst yarı sayfa rengi, (3) alt yarı ve altı menü rengi. */
        background:
            linear-gradient(var(--cd-page-bg), var(--cd-page-bg)) 0 -100vh / 100% 100vh no-repeat,
            linear-gradient(var(--cd-page-bg), var(--cd-page-bg)) 0 0 / 100% 50% no-repeat,
            var(--cd-surface-popover) !important;
    }

    /* Sayfa kabı kendi zeminini taşır: kısa sayfada boş alan saydam kalıp html'in alt yarısındaki menü rengini göstermesin (menü açılınca ortada renk basamağı
       oluşuyordu). Menü rengi yalnızca kabın altında, Safari çubuklarının arkasında görünür. */
    html:has(.cd-page .cl-sheet:not(#cd-sheet):not([style*="display: none"]):not([x-cloak]):not(.choices__list--dropdown:not(.is-active))) .cd-page {
        background: var(--cd-page-bg);
    }

    /* Açık panel sütun düzeninde (liste kalan yükseklikte kayar); Filament ve Alpine açıkken satır içi "display: block" / "" yazar. */
    html .cd-page .cl-sheet:not(#cd-sheet):not([style*="display: none"]):not([x-cloak]):not(.choices__list--dropdown:not(.is-active)) {
        display: flex !important;
    }

    /* Kapalı (ve kapanırken) panel ekranın altında: translate(0, 100% + 1,5rem) (referans). */
    html .cd-page .cl-sheet:not(#cd-sheet):is([style*="display: none"], .choices__list--dropdown:not(.is-active)) {
        translate: 0 calc(100% + 24px);
    }

    @starting-style {
        html .cd-page .cl-sheet:not(#cd-sheet):not([style*="display: none"]):not([x-cloak]):not(.choices__list--dropdown:not(.is-active)) {
            translate: 0 calc(100% + 24px);
        }
    }

    /* KARARTMA = referansın ayrı karartma öğesi: menü açılınca cover-lab-panel.js menünün HEMEN ÖNÜNE (aynı ebeveyn, aynı katman bağlamı) bir .cl-sheet-scrim ekler; menü
       sayfada da, yan panelin (z 40) içinde de olsa karartma her zaman tam arkasındadır (kullanıcı bildirimi 2026-11-10: yan paneldeki ⋮ karartılmış açılıyordu; .cd-page::after
       sayfanın katmanında kalıp yan panelin üstüne biniyordu). Renk --cd-backdrop (koyu %50, açık %40), yalnızca saydamlık geçişi 300 ms; sürüklerken 1 − kayma / boy
       (--cl-root-dim). Dokunuşu tutmaz (dışarı dokunuş kapatır, alttaki öğeye geçmez: cover-lab-panel.js). */
    html .cd-page .cl-sheet-scrim {
        position: fixed;
        inset: 0;
        z-index: 119;
        background: var(--cd-backdrop);
        opacity: 0;
        pointer-events: none;
        transition: opacity calc(300ms * var(--cl-sheet-slow, 1)) cubic-bezier(.165, .84, .44, 1);
    }
    html .cd-page .cl-sheet-scrim.is-on {
        opacity: var(--cl-root-dim, 1);
    }
    html:has(.cl-sheet-dragging) .cd-page .cl-sheet-scrim { transition: none; }

    /* Sürüklerken panel parmağı gecikmesiz izler (height / translate satır içi). */
    html .cd-page .cl-sheet-dragging {
        transition: display 300ms allow-discrete !important;
    }

    /* Panel açıkken sayfa kaymaz. */
    html:has(.cd-page .cl-sheet:not(#cd-sheet):not([style*="display: none"]):not([x-cloak]):not(.choices__list--dropdown:not(.is-active))) {
        overflow: hidden;
    }

    /* Tutamaç: 32'lik satırın içinde 36 × 4 hap, panelin 14 altında (referans). */
    html .cd-page .cl-sheet:not(#cd-sheet)::before {
        content: "";
        position: absolute;
        top: 14px;
        left: 50%;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--cd-border);
        translate: -50% 0;
    }

    /* Tablonun kenar solma maskesi açık menüyü kırpmasın: §11'deki genel kural (her ekran genişliğinde). */

    /* Listenin kendisi panelin kalan yüksekliğinde kayar; kaydırılabilen üst / alt kenar solar (referansın scroll-fade-y'si; değerler cover-lab-panel.js). */
    html .cd-page .fi-fo-select .choices__list--dropdown .choices__list,
    html .cd-page .cl-filter-menu .cl-filter-scroll,
    html .cd-page .fi-dropdown-panel > *,
    html .cd-page .cl-rep-menu .cl-rep-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        padding: 4px 0 !important; /* referans: içerik sarmalayıcısının 4'lük boşluğu (arama kutusu ile ilk satır arası da 4) */
        overflow-y: auto !important;
        overscroll-behavior: contain;
        mask-image: linear-gradient(to bottom, transparent, #000 var(--cl-fade-top), #000 calc(100% - var(--cl-fade-bottom)), transparent) !important;
        animation: none !important;
    }

    html .cd-page .cl-sheet:not(#cd-sheet) :is(.choices__list[role="listbox"], .cl-filter-scroll, .fi-dropdown-list, .cl-rep-list) {
        padding: 4px 0 !important; /* masaüstü menü kurallarını (ör. .fi-dropdown-list padding 0) geçer */
    }

    /* Arama kutusu (uzun liste): tam genişlik, zeminsiz, altında çizgi (referans: 39 yüksek, 16 / 22, iç boşluk 8 20). */
    html .cd-page .fi-fo-select .choices__list--dropdown .choices__input,
    html .cd-page .cl-filter-menu .cl-filter-search,
    html .cd-page .cl-rep-menu .cl-rep-search,
    html .cd-page .cl-rep-menu .cl-rep-search:focus {
        flex: none;
        width: calc(100% + 8px) !important;
        margin: 0 -4px !important;
        padding: 8px 20px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--cd-border) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 16px !important;
        line-height: 22px !important;
    }

    /* Seçenekler (referansın Combobox seçeneği): en az 40, iç boşluk 4 16, köşe 10, 15 / 22. */
    html .cd-page .fi-fo-select .choices__list--dropdown .choices__item,
    html .cd-page .cl-filter-menu .cl-filter-option,
    html .cd-page .cl-rep-menu .cl-rep-option {
        min-height: 40px;
        padding: 4px 16px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }

    /* Menü öğeleri (referansın Menu öğesi; ⋮ ve diğer Filament menüleri): 40 yüksek, iç boşluk 9 12 (ikon panelin 16'sında), ikon 20, ikondan yazıya 10, köşe 10, 15 / 22. */
    html .cd-page .fi-dropdown-panel .fi-dropdown-list-item {
        min-height: 40px;
        gap: 10px !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }
    html .cd-page .fi-dropdown-panel .fi-dropdown-list-item :is(.fi-dropdown-list-item-image, .fi-icon, svg) {
        width: 20px !important;
        height: 20px !important;
    }
    /* Menü ayracı iki yandan 10 içeride, üstte / altta 4 (referans). */
    html .cd-page .fi-dropdown-panel .cl-menu-sep {
        margin: 4px 10px;
        background: var(--cd-border);
    }

    /* Listenin altındaki sabit satırlar (kişi seçicide "+ Cariye yetkili kişi ekle"; referansın "Create workspace" satırları): ayraç iki yandan 16 içeride, altında 4;
       satır 40, iç boşluk 0 16, köşe 10, 15 / 22, ikon 20 soluk. */
    html .cd-page .cl-rep-menu .cl-rep-menu-sep {
        margin: 0 16px;
    }
    html .cd-page .cl-rep-menu .cl-rep-footer-item {
        min-height: 40px;
        margin-top: 4px;
        padding: 0 16px;
        border-radius: 10px;
        font-size: 15px;
        line-height: 22px;
    }
    html .cd-page .cl-rep-menu .cl-rep-footer-item svg {
        color: var(--cd-text-muted);
    }

    /* Paneldeki form (filtre menüsünün "Özel aralık"ı; referansın Custom range'i): iç boşluk 12 16, satırlar 12; etiket 15 / 15 500, alana 8; alan 40, köşe 10,
       yazı 16 (iOS yakınlaştırmasın), iç boşluk 0 16; sağdaki takvim düğmesi 24 × 24 köşe 6, ikon 16; Uygula tam genişlik 28. */
    html .cd-page .cl-sheet .cl-date-range {
        padding: 12px 16px;
    }
    html .cd-page .cl-sheet .cl-date-label {
        font-size: 15px;
        line-height: 15px;
    }
    html .cd-page .cl-sheet .cl-date-input {
        height: 40px;
        padding: 0 16px;
        border-radius: 10px;
    }
    html .cd-page .cl-sheet .cl-date-input input {
        font-size: 16px;
        line-height: 22px;
    }
    html .cd-page .cl-sheet .cl-date-cal-btn {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        margin-right: -4px;
    }
    /* Tarih alanının takvimi alt panelde (referansın takvimi panelde): tam genişlik, iç 0 12 8; başlık satırı 40 (oklar 28 × 28 köşe 10, ay adı 15 / 21 500);
       gün adları 13 / 17 soluk; günler 40 × 40 köşe 10, yazı 15. Gün seçilince panel kapanır. */
    html .cd-page .cl-sheet .cl-datef__cal {
        width: auto;
        padding: 0 12px 8px;
    }
    html .cd-page .cl-sheet .cl-datef__cal-head {
        min-height: 40px;
        padding-bottom: 8px;
    }
    html .cd-page .cl-sheet .cl-datef__cal-head .cd-btn {
        width: 28px;
        height: 28px;
        border-radius: 10px;
    }
    html .cd-page .cl-sheet .cl-datef__cal-title {
        font-size: 15px;
        line-height: 21px;
    }
    html .cd-page .cl-sheet :is(.cl-datef__cal-week, .cl-datef__cal-days) {
        grid-template-columns: repeat(7, 40px);
        justify-content: space-between;
    }
    html .cd-page .cl-sheet .cl-datef__cal-days {
        row-gap: 8px;
    }
    html .cd-page .cl-sheet .cl-datef__cal-week span {
        height: 32px;
        font-size: 13px;
        line-height: 17px;
    }
    html .cd-page .cl-sheet .cl-datef__day {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 15px;
        line-height: 21px;
    }

    /* Takvim panelin içinde (referans): ay okları 28 × 28 köşe 10, ay adı 15 / 21 500; gün hücreleri 40 × 40 köşe 10, adım 48. */
    html .cd-page .cl-sheet .cl-calendar-arrow {
        width: 28px;
        height: 28px;
        border-radius: 10px;
    }
    html .cd-page .cl-sheet .cl-calendar-label {
        font-size: 15px;
        line-height: 21px;
    }
    html .cd-page .cl-sheet :is(.cl-calendar-weekdays, .cl-calendar-days) {
        grid-template-columns: repeat(7, 40px);
        gap: 8px;
        justify-content: space-between;
    }
    html .cd-page .cl-sheet .cl-calendar-day {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 15px;
        line-height: 21px;
    }
}

/* Boş durum (Bildirimler; kullanıcı kararı 2026-10-18): ortalı; portalın standart boş durum ikonu (tabloların boş durumu: %5 zemin, köşe 8,
   iç boşluk 12, 24 px soluk ×), 16 altında başlık 14 / 20 500 ikincil, 8 altında açıklama 13 / 17 ikincil; içeriğin 64 altından başlar. */
.cl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 64px;
    text-align: center;
    color: var(--cd-text-secondary);
}

.cl-empty-state-icon {
    display: flex;
    padding: 12px;
    border-radius: var(--cd-radius);
    background: var(--cd-bg-neutral);
    color: var(--cd-text-muted);
}

.cl-empty-state-title {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.cl-empty-state-text {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 17px;
}

/* B2B Ürünler › yan panel (2026-10-19; önce Ürün › Stok'ta da): beden tablosu panelin satır ölçüsünde (12 / 17), sayılar sağa yaslı, başlık soluk; bitmiş beden
   kırmızı (tint), toplam satırı üstte %10 çizgi + 500. Altında "Hareket ekle" düğmesi, boş durum yazısı soluk. */
.cl-size-table {
    width: 100%;
    margin: 8px 0 0;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 17px;
    font-variant-numeric: tabular-nums;
}

.cl-size-table th {
    padding: 0 0 6px;
    font-weight: 400;
    color: var(--cd-text-muted);
    text-align: right;
}

.cl-size-table td {
    padding: 5px 0;
    border-top: 1px solid var(--cd-border-subtle);
    color: var(--cd-text-primary);
    text-align: right;
}

.cl-size-table :is(th, td):first-child {
    text-align: left;
}

.cl-size-table tr.is-empty td {
    color: var(--cd-tint-red-fg);
}

.cl-size-table tfoot td {
    border-top-color: var(--cd-border);
    font-weight: 500;
}

.cl-stock-empty {
    margin: 8px 0 28px;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* Soluk yazı (Gider Tipleri › "Grupsuz"; 2026-10-19). */
.cl-muted {
    color: var(--cd-text-muted);
}

/* Bildirimler listesi (2026-10-19): satırlar arasında %5 çizgi, satır 16 0; başlık 14 / 20 500 birincil, metin 14 / 20 ikincil, zaman 13 / 17
   soluk (aralar 2); sağda düğme, başlıkla üstten hizalı; bu açılışta okunmamış bildirimin solunda 6 px vurgu noktası (başlığın ortasında). */
.cl-notifications {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-notification {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0 16px 16px;
    border-bottom: 1px solid var(--cd-border-subtle);
}

.cl-notification.is-unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 23px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cd-fill-accent);
}

.cl-notification__main {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-notification__title,
.cl-notification__body,
.cl-notification__time {
    margin: 0;
}

.cl-notification__title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-notification__body {
    margin-top: 2px;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cl-notification__time {
    margin-top: 2px;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cl-notification__action {
    flex: none;
    gap: 4px;
    padding-right: 4px; /* referansın Open →'ı: yazıdan oka 4, oktan sağ kenara 4 */
}

.cl-notification__action svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-left: 0;
}

/* NET MARJ RENK KADEMESİ (kullanıcı kararı 2026-10-28; App\Support\MarginTier, portalın her fiyat / kâr gösteriminde): değerin kendisi net
   kâr marjına göre boyanır — zarar kırmızı, tabanın altı sarı, taban ile hedef arası normal (birincil), hedef ve üstü yeşil; altındaki not gri. */
.cl-margin--loss { color: var(--cd-text-danger); }
.cl-margin--below { color: var(--cd-tint-yellow-fg); }
.cl-margin--ok { color: var(--cd-text-primary); }
.cl-margin--target { color: var(--cd-text-success); }

/* İçindeki tutar kademenin rengini alır: tutarların sabit birincil rengi (.cl-money--*) yazıyı beyaz bırakıyordu. */
.cl-margin :is(.cl-money--try, .cl-money--usd, .cl-money--eur) {
    color: inherit;
}

/* Müşteri Fiyatları › İskontolu Fiyat (kullanıcı kararları 2026-10-17; önceki uyarı ikonunun yerine): fiyat normal renkte (birincil), yanında
   neyin altında / eşitinde olduğu seviyenin renginde, 13 / 17 ("1,87 $ < Taban fiyat"): bindirilmiş maliyet kırmızı, taban fiyat turuncu,
   liste fiyatı sarı (tint yazı renkleri, iki modda okunur). */

.cl-price-level--floor .cl-price-level-label { color: var(--cd-tint-red-fg); } /* taban kârın altı kırmızı (2026-10-20) */

.cl-price-level-label {
    font-size: 13px;
    line-height: 17px;
}

/* ---------------------------------------------------------------------------
 * Filtre menüsündeki ÖZEL TARİH ARALIĞI ve TAKVİM — referansın Usage › Range › "Custom range"i BİREBİR (kullanıcı kararı 2026-10-13;
 * platform.claude.com'da ölçüldü; partials/table-filter-date-range). Menünün liste kutusunun altında: son seçeneğe 8, menü kenarlarına 16,
 * Uygula → menü altı 12; başlık 13 / 17 500 ikincil → alana 8; alan 32 (alan zemini + halka, köşe 8, yazı 14, soldan 12, sağda 32 × 32 takvim
 * düğmesi ikon 16 soluk); alan → sonraki başlık 12; son alan → Uygula 12; Uygula tam genişlik küçük asıl düğme 28, köşe 7, 14 / 500.
 * Takvim alanın 8 altında akışın içinde kart: zemin surface-1 (sayfa zemini), iç boşluk 12, köşe 8, 1 px %10 halka; gezinme satırı alt
 * çizgi 0,5 px %10, 8 + 8; oklar 22 × 22 hayalet köşe 8, ikon 16; ay adı 14 / 20 500 ortada; gün adları 12 soluk 8 0; günler 7 × 32 kutu,
 * aralık 8, köşe 8, 14 birincil; üzerine gelince hayalet zemin; komşu ay soluk; bugün surface-2; seçili dolu birincil (üzerine gelince
 * fill-primary-hover); kapalı (gelecek) soluk ve basılamaz.
 * ------------------------------------------------------------------------ */
.cd-page .cl-date-range {
    display: flex;
    flex-direction: column;
    padding: 8px 12px; /* referans (Console Atlası): 8 12 */
}

.cd-page .cl-date-field + .cl-date-field {
    margin-top: 12px;
}

.cd-page .cl-date-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px; /* referans: alan başlığı 14 / 14 500 */
    line-height: 14px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cd-page .cl-date-input {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--cd-control-h);
    padding: 0 12px;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
}

.cd-page .cl-date-input input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text-primary);
    outline: none;
    box-shadow: none;
}

.cd-page .cl-date-input input::placeholder {
    color: var(--cd-text-muted);
}

.cd-page .cl-date-cal-btn {
    flex: none;
    margin-right: -4px; /* referansın me-outset'i: düğme alanın sağ kenarına 8 */
}

html:not(.cl-pointer) .cd-page :is(.cl-date-cal-btn, .cl-calendar-arrow):focus-visible {
    outline: none; /* odak parıltısı yok */
}

/* Takvim düğmesi basıldıktan sonra zemini değişmiş kalmaz: takvim açıkken de zemin yalnızca üzerindeyken. */
.cd-page .cl-date-cal-btn[aria-expanded="true"]:not(:hover) {
    background: transparent;
}

.cd-page .cl-date-error {
    display: flex;
    gap: 4px;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 17.875px;
    color: var(--cd-text-danger);
}

.cd-page .cl-calendar {
    margin-top: 8px;
    padding: 12px;
    border-radius: var(--cd-radius);
    background: var(--cd-page-bg);
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cd-page .cl-calendar-nav {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 0.5px solid var(--cd-border);
}

/* Ay okları standart ikon düğmesi (.cd-btn .cd-btn--icon); yalnızca referansın ölçüsü: 22 × 22, köşe 8, ikon 16. */
.cd-page .cl-calendar-arrow {
    flex: none;
    width: 22px;
    height: 22px;
}

.cd-page .cl-calendar-arrow svg {
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
}

@media (hover: hover) {
    .cd-page .cl-calendar-day:hover:enabled:not(.is-active) {
        background: var(--cd-fill-ghost-hover);
    }

    .cd-page .cl-calendar-day.is-active:hover:enabled {
        background: var(--cd-fill-primary-hover);
    }
}

.cd-page .cl-calendar-label {
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cd-page .cl-calendar-weekdays,
.cd-page .cl-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 32px);
    justify-content: center;
    gap: 8px;
}

.cd-page .cl-calendar-weekdays span {
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
    line-height: 16.8px;
    color: var(--cd-text-muted);
}

.cd-page .cl-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--cd-radius);
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
}

.cd-page .cl-calendar-day.is-other {
    color: var(--cd-text-muted);
}

.cd-page .cl-calendar-day.is-now:not(.is-active) {
    background: var(--cd-surface-panel);
}

.cd-page .cl-calendar-day.is-active {
    background: var(--cd-fill-primary);
    color: var(--cd-on-primary);
}

.cd-page .cl-calendar-day:disabled {
    color: var(--cd-text-muted);
    opacity: 0.5;
    background: transparent;
}

html:not(.cl-pointer) .cd-page :is(.cl-calendar-day, .cl-date-apply):focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cd-page .cl-date-apply {
    margin-top: 12px;
    width: 100%;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: var(--cd-fill-primary);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-on-primary);
    cursor: var(--cd-cursor-interactive);
}

@media (hover: hover) {
    .cd-page .cl-date-apply:hover {
        background: var(--cd-fill-primary-hover);
    }
}

/* Telefonda (alt panel) tarih aralıklı Zaman menüsü = referansın "Custom range"i: seçenek listesi kalan yükseklikte küçülür ve kendi içinde kayar (altı solar),
   tarih bölümü (alanlar, Uygula) listenin altında sabit kalır; takvim açılınca yer yetmezse tarih bölümü kendi içinde kayar. Panelin boyu motordan (yazı alanı var: yarım boy). */
@media (max-width: 639px) and (pointer: coarse) {
    html .cd-page .cl-filter-menu--range .cl-date-range {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Zaman hapının iki yanındaki ay okları (referansın Usage › Range › Previous / Next month'u, kullanıcı kararı 2026-10-13; ölçüldü): hapa 8,
   32 × 32 hayalet ikon düğmesi (köşe 8, ikon 20, üzerine gelince hayalet zemin); kapalıyken %40 soluk, zemin almaz. Yalnızca seçim bir
   takvim ayıyken çizilir (partials/table-filter-month-arrow). */
.cd-page .cl-filter-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.cd-page .cl-month-arrow:disabled {
    pointer-events: none; /* soluk görünüm standart (.cd-btn:disabled); üzerine gelince ipucu sarmalayıcıdan (nedeni söyler) */
}

.cd-page .cl-month-arrow-wrap {
    display: inline-flex;
    border-radius: var(--cd-radius);
    outline: none;
}

html:not(.cl-pointer) .cd-page .cl-month-arrow-wrap:focus-visible {
    box-shadow: var(--cd-focus-ring);
}

/* Rol hücresi: rol düz yazıdır, gri (RoleIcons::cell). */
.cl-role-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cl-role-cell-name {
    color: var(--cd-text-secondary);
}

/* CARİ ADI (kullanıcı kararı 2026-10-23; RecordStatus::cariName): müşteri ve tedarikçi adı (KolayBi'deki resmi unvan) her yerde yalnızca ilk iki
   kelimesiyle, tamamı ipucunda. 2026-10-24'ten beri İSTİSNA YOK (kullanıcı kararı: "her yerde her şekilde"): Müşteri Fiyatları, seçim
   kutuları, filtre menüleri, açılır menüler ve komut paleti de kısa ad gösterir. Tam ad HTML'de durur (ipucu ve sıralama için; açılır
   listelerde arama onu görmez, yalnızca görünen kısa ad üzerinden). */
.cl-full-name { display: none; }
.cl-short-name { display: inline; }

/* Alt Parçalar › Özellikler sütunu (kullanıcı kararı 2026-10-13; PartResource::propertiesHtml): üstte açıklama 14 / 20 ikincil, altında
   kumaş · kalınlık 13 / 17 soluk (Kumaş sütunuyla aynı ölçüler); uzun açıklama 320 px'te "…" ile kesilir (tablo hücreleri satır kırmaz). */
.cl-props {
    display: flex;
    flex-direction: column;
    gap: 4px; /* açıklama → kumaş (renk + cins + gramaj; ürün tablolarının Kumaş hücresi, kullanıcı kararı 2026-10-21) */
    min-width: 0;
    max-width: 320px;
}

.cl-props-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-props-main {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

/* Kullanıcı formu › "Davet e-postası gönder": E-posta alanıyla aynı satırda, alanın kutusuyla aynı hizada. */

/* E-posta ve telefon bağlantıları (kullanıcı kararı 2026-10-18; App\Support\ContactLink: mailto: / tel:; portalın her yerinde): referansın
   TextLink'i, ürün kodu bağlantısıyla aynı: altı HER ZAMAN çizili, 3 px aralık, çizgi yazı renginin %40'ı; üzerine gelince ve klavye odağında
   tam renk, 60 ms. Yazı rengi bulunduğu yerden gelir (soluk satırda soluk). Vurgu rengi (referansın TextLink'inin varsayılanı) denendi,
   beğenilmedi. */
a.cl-contact-link {
    border-radius: 2px;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cd-dur-fast) var(--cd-ease-out), box-shadow var(--cd-dur-fast) var(--cd-ease-out);
    cursor: pointer;
}

a.cl-contact-link:hover {
    text-decoration-color: currentColor;
}

html:not(.cl-pointer) a.cl-contact-link:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    text-decoration-color: currentColor;
    box-shadow: var(--cd-focus-ring);
}

/* Ürün Kodu bağlantısı (kullanıcı kararları 2026-10-13; ProductResource::codeColumn(linkToSite); Ürün Ağaçları, Liste Fiyatları, Müşteri
   Fiyatları): kod ürünün coverlab.com.tr sayfasını yeni sekmede açar. Referansın TextLink'i (.cds-text-link-underline, ölçüldü): altı HER ZAMAN
   çizili, 3 px aralık, çizgi yazı renginin %40'ı; üzerine gelince ve klavye odağında çizgi tam renk, 60 ms. Renk: ürün kodu HER ZAMAN
   birincil (koyu modda beyaz; kullanıcı kararı; referansta bağlantı rengi bağlama göre verilir). */
.cl-code-cell a.cl-code-link {
    border-radius: 2px;
    color: var(--cd-text-primary);
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cd-dur-fast) var(--cd-ease-out), box-shadow var(--cd-dur-fast) var(--cd-ease-out);
    cursor: pointer;
}

.cl-code-cell a.cl-code-link:hover {
    text-decoration-color: currentColor;
}

html:not(.cl-pointer) .cl-code-cell a.cl-code-link:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    text-decoration-color: currentColor;
    box-shadow: var(--cd-focus-ring);
}

/* Ürün Ağaçları › Maliyet: "ana parça + diğer parçalar = maliyet" (kullanıcı kararları 2026-10-13; ProductTreeResource::costBreakdownHtml):
   toplam maliyet 14 / 20 birincil; ana parça ve diğer parçalar tutarları ile + ve = giysi adı yazısı gibi 13 / 17 gri; yazılar aynı taban çizgisinde;
   aralar bir boşluk kadar (4). Tutarların ne olduğu sütun başlığında ikonlarla: "Maliyet (ikon + ikon)" (kullanıcı kararı 2026-10-15; önce her
   hücrede tutarların altında ikon satırı vardı). */
.cl-cost {
    display: inline-flex;
    column-gap: 4px;
    align-items: baseline;
    white-space: nowrap;
}

.cl-cost-total {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
}

/* ------------------------------------------------------------- Fiyat kontrol paneli
   Liste Fiyatları / Müşteri Fiyatları › ⋮ › Fiyat kontrol (partials/price-check, .cl-detail-panel içinde): üstte Ticari ve Ödeme hapları
   (partials/discount-pill, aralarında 8), 16 altında Satış Fiyatı alanı (başlık 14 / 14 500, alana 8; alan 200, değiştirilince sağında 8 aralıkla
   "İskontolu fiyata dön" ikon düğmesi), 24 altında fiyat şelalesi (.cl-price-calc, fiyat formundakinin görünümü). Fiyat çizgisi kaldırıldı. */
.cl-price-check-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-price-check-label {
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-price-check-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.cl-price-check-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-price-check-field {
    width: 200px;
}

.cl-price-check-calc {
    margin-top: 24px;
}

/* Şelale satırındaki ⓘ (Vade Maliyeti): dt'deki ayrıntı span'lerinin soluk rengi / 4 sol boşluğu ipucu kutusuna uygulanmaz. */
.cl-price-calc-row dt .cl-info-tip {
    margin-left: 8px;
    color: inherit;
    /* İkon (16) yazının ortasında: kendiliğinden alt kenarı taban çizgisinde duruyordu (ortası büyük harf
       ortasının 3 px üstünde); 3 px aşağı. */
    vertical-align: -3px;
}

.cl-price-calc-row dt .cl-info-tip-pop {
    margin-left: 0;
    font-weight: 400;
    color: var(--cd-tooltip-fg);
}

/* Şelalede iskonto satırının adı (ör. "Ana Bayi İskontosu") satır adıdır: dt'deki ayrıntı span'inin soluk rengi ve 4 sol boşluğu ona uygulanmaz. */
.cl-price-calc-row dt .cl-price-check-name {
    margin-left: 0;
    color: inherit;
}

/* ------------------------------------------------------------- HIZLI BAKIŞ (kullanıcı kararı 2026-10-17; referansın satır Quickview'i, kodundan okundu)
   Satır sonundaki "Hızlı bakış" düğmesi (QuickViewAction): ⋮'nin solunda (eylem kabının sağdan 100%'ü), dikey ortada; iç boşluk 4 4 4 8.
   iç boşluk 6 6 6 8 (36 yüksek, ⋮'ye 6). Normalde görünmez ve basılamaz; satırın üzerine gelince ya da satırda klavye odağı varken görünür (efektsiz, referanstaki gibi). Arkası satırın
   zemini (sayfa zemini + hover tonu), solunda 32 px solma (yazıların üstüne binmesin). Düğme referansın ikincil xs düğmesi: 24 yüksek, köşe 6,
   iç boşluk 0 4 0 8, 13 / 19, ikon 16 sağda, yazıya 4; ikincil dolgu + çizgi. Yan panel açıkken düğmeler gizli (satıra tıklamak o kaydı panelde
   açar). Dokunmatikte her zaman görünür, akışta (kendi hücresinde) ve yalnızca ikon (24 × 24). */
.cd-page .fi-ta-actions:has(> .cl-row-quickview) {
    position: relative;
}

.cl-row-quickview {
    --cl-row-end-tint: transparent;
    position: absolute;
    right: 100%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px; /* ek bağlantı düğmeleri (Fiyatlar) ile Hızlı bakış arası */
    padding: 6px 6px 6px 8px; /* referans: 36 yüksek, ⋮'ye 6 */
    /* Tablo yana kayıyorsa satır sonunun görünmeyen kısmı kadar sola (cover-lab-panel.js "HIZLI BAKIŞ KAYDIRMASI"; dokunmatikte yok). */
    transform: translate(calc(var(--cl-qv-shift, 0px) * -1), -50%);
    background: linear-gradient(var(--cl-row-end-tint), var(--cl-row-end-tint)), var(--cd-page-bg);
    opacity: 0;
    pointer-events: none;
}

.cl-row-quickview::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 32px;
    background: inherit;
    -webkit-mask-image: linear-gradient(to right, transparent, #00000029 25%, #00000080 50%, #000000d6 75%, #000);
    mask-image: linear-gradient(to right, transparent, #00000029 25%, #00000080 50%, #000000d6 75%, #000);
}

.cd-page .fi-ta-ctn tbody tr:hover .cl-row-quickview {
    --cl-row-end-tint: var(--cd-fill-ghost-hover);
}

/* Hızlı bakış düğmesi satırın üzerine gelince ya da KLAVYEYLE odaklanınca görünür; fareyle basılan ⋮ düğmesinin odağı (focus-within) onu açık tutmaz: ⋮ menüsü açıkken imleç başka satıra geçince düğme kaybolur. */
.cd-page .fi-ta-ctn tbody tr:hover .cl-row-quickview,
html:not(.cl-pointer) .cd-page .fi-ta-ctn tbody tr:has(:focus-visible) .cl-row-quickview {
    opacity: 1;
}

.cd-page .fi-ta-ctn tbody tr:hover .cl-row-quickview .cl-quickview-btn,
html:not(.cl-pointer) .cd-page .fi-ta-ctn tbody tr:has(:focus-visible) .cl-row-quickview .cl-quickview-btn {
    pointer-events: auto;
}

/* Yan paneli (hızlı bakış, Geçmiş, Fiyat kontrol, ayrıntılar) açık kaydın satırı işaretli (referansın tr[data-active]: %10 ton; cover-lab-panel.js `cl-row-active`). */
.cd-page .fi-ta-ctn tbody tr.cl-row-active {
    --cl-row-fill: color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
}

/* Yan panel açıkken satır sonu düğmeleri yok (referans: panel açıkken çizilmez). */
body:has(.fi-modal-open .cl-detail-panel) .cl-row-quickview {
    display: none;
}

.cl-quickview-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 4px 0 8px; /* referans: 0 8, ikon -4 dışarıda → sağ 4 */
    border: 0;
    border-radius: 6px;
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
    color: var(--cd-text-primary);
    font: inherit;
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    cursor: var(--cd-cursor-interactive);
    pointer-events: none;
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-quickview-btn:hover {
    background: var(--cd-fill-secondary-hover);
}

.cl-quickview-btn svg {
    flex: none;
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
}

html:not(.cl-pointer) .cl-quickview-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

@media (pointer: coarse), (hover: none) {
    .cl-row-quickview {
        position: static;
        transform: none;
        padding: 0;
        opacity: 1;
        background: none;
    }

    .cl-row-quickview::before {
        content: none;
    }

    .cl-row-quickview .cl-quickview-btn {
        pointer-events: auto;
    }

    /* Dokunmatikte yalnızca ikon (referansın mobil Quickview'i ölçüldü, 2026-10-24: ikon düğmesi 24 × 24, köşe 6, ikincil dolgu + gölge,
       ikon 16 birincil, yazı yok; kendi hücresinde, yazıların üstüne binmez). Adı aria-label'da. Ek bağlantılar (Fiyatlar) da yalnızca ikon. */
    .cl-row-quickview .cl-quickview-btn {
        justify-content: center;
        width: 24px;
        padding: 0;
    }

    .cl-row-quickview .cl-quickview-btn > span {
        display: none;
    }
}

/* Hızlı bakış paneli (partials/product-quickview): başlık satırının sağında düzenleme sayfasını açan küçük ikon düğmesi; fiyat satırları
   tablodaki iki satırlı hücre (tutar + gri not); ürün ağacı: başlık 13 / 17 500 ikincil, satırlar 12 / 17: tür ikonu 16 + kod + gri ad, sağda miktar. */
/* Panelin ⋮'si (referansın "More actions"ı): 28 × 28, köşe 7, ikon 20, kayıt adı satırının sağında (ayrı "Aç" düğmesi yok). */
.cd-page .cl-quickview-menu .fi-icon-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
}

.cd-page .cl-quickview-menu .fi-icon-btn svg {
    width: var(--cd-icon) !important;
    height: var(--cd-icon) !important;
}

.cl-quickview-prices .cl-detail-row {
    align-items: start;
}

/* Tablodan gelen hücre içerikleri (tutar + gri not, maliyet "ana + diğer = toplam") panelde standart boyda: 12 / 17 (tabloda 14 / 20 ve 13 / 17;
   kullanıcı kararı 2026-10-18). */
.cl-detail-row dd :is(.cl-code-main, .cl-code-sub, .cl-cost),
.cl-detail-row dd :is(.cl-code-sub, .cl-cost) * {
    font-size: 12px;
    line-height: 17px;
}

/* Rapor yan panelinde listenin altında kayıt sayısı ve toplam: listenin hemen altında, çizgisiz; değer satırı gibi 500. */
.cl-report-source-list + .cl-report-source-summary {
    margin-top: 4px;
}

.cl-report-source-summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 0;
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Rapor yan panelinde listenin altındaki açıklama notu (Nakit Akışı bakiye satırları; kullanıcı kararı 2026-10-30): soluk 13/17. */
.cl-report-source-note {
    margin-top: 12px;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* Geçmiş'te değerin yanındaki açıklama notu (ör. maliyetin neden değiştiği; kullanıcı kararı 2026-10-24): parantez içinde, soluk. */
.cl-detail-note {
    color: var(--cd-text-muted);
}

/* Yan panellerde ürünün web sayfası bağlantısı tam adresiyle (kullanıcı kararı 2026-10-24; hızlı bakış, Geçmiş, İşlem Kayıtları): portalın metin
   bağlantısı (altı çizili %40, üzerine gelince tam renk), uzun adres satır sonunda bölünür. */
/* Yeni sekmede açılan metin bağlantısının sonunda ↗ (referansın "Learn more ↗"i; kullanıcı kararı 2026-11-06). */
.cl-ext-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    vertical-align: -3px;
}

a.cl-detail-url {
    border-radius: 2px;
    color: inherit;
    overflow-wrap: anywhere;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cd-dur-fast) var(--cd-ease-out);
    cursor: pointer;
}

a.cl-detail-url:hover {
    text-decoration-color: currentColor;
}

/* Hızlı bakışın içindeki tıklanır ad (kullanıcı kararı 2026-10-24; App\Support\QuickViews::link): o kaydın hızlı bakışını açar. Görünüm
   portalın metin bağlantısı (referansın TextLink'i, a.cl-contact-link ile aynı): yazı rengi bulunduğu yerden, altı her zaman çizili, 3 px
   aralık, çizgi %40; üzerine gelince ve klavye odağında tam renk, 60 ms. Düğme olduğu için tarayıcı düğme görünümü sıfırlanır. */
.cl-qv-link {
    appearance: none;
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cd-dur-fast) var(--cd-ease-out);
}

/* Adı saran blok / flex öğeler (cari adı .cl-dim-name, rol hücresi) altı çizgiyi içeri geçirmez: yazıyı taşıyan öğe çizgiyi kendisi çizer. */
.cl-qv-link :is(.cl-dim-name, .cl-role-cell-name, .cl-full-name, .cl-short-name) {
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-qv-link:hover,
.cl-qv-link:hover :is(.cl-dim-name, .cl-role-cell-name, .cl-full-name, .cl-short-name) {
    text-decoration-color: currentColor;
}

html:not(.cl-pointer) .cl-qv-link:focus-visible {
    outline: 0;
    text-decoration-color: currentColor;
    box-shadow: var(--cd-focus-ring);
}

/* Liste içeren bilgi satırı (Ürün ağacı, Kullanıcılar): etiket listenin ilk satırıyla üstten hizalı. */
.cl-detail-row:has(> dd > .cl-quickview-parts) {
    align-items: start;
}

/* SIĞMAYAN LİSTE BAŞLIĞIN ALTINA, TAM GENİŞLİĞE — PORTAL GENELİ KURAL (kullanıcı kararı 2026-10-30; yalnızca listeler): yan panelin bilgi
   satırındaki liste (değeri <ul> / <ol>: Ürün ağacı, Ürün ağaçları, Alt parçalar …) panel daralınca (içerik 480'den dar, ör. telefonda 359'luk
   panel) 120'lik etiket sütununun karşısına sığmaz, kodlar bölünürdü: o zaman etiket kendi satırında kalır, liste etiketin 8 altında en soldan
   başlayıp panelin bütün genişliğine yayılır. Geniş panelde (560) liste etiketin karşısında kalır. Panelin içeriği kap (container) olarak ölçülür. */
.cd-page .cl-detail-panel .fi-modal-content {
    container: cl-panel / inline-size;
}

@container cl-panel (max-width: 480px) {
    .cl-detail-row:has(> dd > :is(ul, ol)) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }
}

/* Listedeki kod bölünmez (sığmazsa ad kısalır). */
.cl-quickview-part > :first-child {
    flex: none;
    white-space: nowrap;
}

.cl-detail-row dd .cl-sub-cell {
    display: inline-flex;
    flex-direction: column;
}

/* YAN PANELLERİN YAZI STANDARDI (kullanıcı kararı 2026-10-18; referansın API keys ayrıntı paneli ölçüldü): üst satırdaki tür 13 / 17 500
   ikincil, başlık (kaydın adı) 16 / 20 500 birincil, bilgi satırlarının etiketi 12 / 17 soluk ve değeri 12 / 17 birincil (fiyat satırları
   dahil; önce 14 / 20'ydi), değerin yanındaki ikincil bilgi 13 / 17 soluk. Bölüm başlıkları HER PANELDE 14 / 20 500 BİRİNCİL, içerik 8 altında
   (referansın panel bölüm başlığı, 3 Kasım 2026 taraması: Networking, Credentials, Transcript; 2026-10-18 – 2026-11-03 arası 13 / 17 gri). */
.cl-quickview-heading,
.cl-speed-samples-title {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

/* Müşteri hızlı bakışı › Kullanıcılar: bilgi satırı; etiketin karşısında ad (12 / 17 birincil), adın 16 yanında iletişim, dikey ortada
   (kullanıcı kararları 2026-10-18; sağ kenara itmek denendi, uzak bulundu). */
.cl-quickview-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cl-quickview-user > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-quickview-parts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-quickview-parts li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-primary);
}

.cl-quickview-parts .cl-part-icon {
    flex: none;
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
    color: var(--cd-text-secondary);
}

.cl-quickview-part {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.cl-quickview-part-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cd-text-muted);
}

.cl-quickview-qty {
    margin-left: auto;
    flex: none;
    color: var(--cd-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Ürün Ağaçları › Hızlı bakış: miktarın yanında parçanın bu üründeki maliyeti (birim fiyat × miktar), birincil; aralarında soluk "·". */
.cl-quickview-part-cost {
    margin-left: 4px;
    color: var(--cd-text-primary);
}

.cl-quickview-part-cost::before {
    content: "· ";
    color: var(--cd-text-muted);
}

.cl-quickview .cl-detail-row dd .cl-dot {
    display: inline-block;
    width: var(--cd-icon-sm);
    height: var(--cd-icon-sm);
    margin-right: 6px;
    vertical-align: -3px;
}

/* Ayrıntı panelinin alt çubuğu (kullanıcı kararı 2026-10-17; referansın quickview panelindeki "Rendered | API" çubuğu ölçüldü): panelin altına
   yapışık, 40 yüksek, iç boşluk 8 16, panel zemininde, içerik sağa yaslı. Geçmiş panelinde "Tümü | Sadece Fiyat" burada. İçerik kısaysa da
   panelin en altında (içerik sütunu en az panel boyu). */
.cd-page .cl-detail-panel .fi-modal-content:has(.cl-detail-footer) {
    flex: 1 1 auto;
    padding-bottom: 0 !important;
}

/* Alt çubuk HER ZAMAN panelin en altında (kullanıcı bildirimi 2026-10-17: içerik kısalınca — ör. "Sadece Fiyat" — yukarı çıkıyordu): panelden
   çubuğa kadar her sarmalayıcı yüksekliği aktarır; önden yüklenen panellerin içerik sarmalayıcısı (.cl-detail-content-slot) dahil. */
.cl-detail-content-slot:has(> .cl-detail > .cl-detail-footer),
.cl-detail:has(> .cl-detail-footer) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.cl-detail-footer {
    /* Seçiciler (₺ | $, Tümü | Fiyat) ve dışarı açan düğmeler HER ZAMAN panelin sağ alt köşesinde: içerik kısaysa panelin
       en altında (yukarıdaki esnek zincir), uzunsa kaydırırken görünür alanın altına yapışır. */
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px;
    margin: auto -16px 0;
    padding: 8px 16px;
    background: var(--cd-surface-panel);
}

.cl-detail:has(> .cl-detail-footer) > .cl-detail-body {
    padding-bottom: 24px;
}

/* ===========================================================================================================================================
 * TOPLU İŞLEM — referansın Credential vaults satır seçimi BİREBİR (kullanıcı kararı 2026-10-18; ölçüldü: masaüstü 1640 px ve telefon 375 px).
 * Kullanıcılar, Alt Parçalar, Ürün Ağaçları, Liste Fiyatları, Müşteriler (App\Filament\Tables\Actions\BulkRecordActions; çubuk
 * partials/table-bulk-bar; davranış cover-lab-panel.js "TOPLU İŞLEM").
 *   Sütun 40 geniş, hücrenin tamamı tıklanır (başlıkta 32, satırda satır boyu; telefonda da), kutu soldan 12, dikey ortada.
 *   Kutu 16 × 16 (referansın Checkbox xs), köşe 4; boşken 1 px %20 çerçeve, üzerine gelince %40; işaretliyken vurgu dolgusu + beyaz tik
 *   (üzerine gelince vurgunun hover tonu); bir kısmı seçiliyken (başlık) vurgu dolgusu + çizgi.
 *   Seçili satır hover gibi hayalet zemin (uçları köşe 8), çevresindeki satır çizgileri yok (referansın tr[data-selected]).
 *   Çubuk: ekranın altından 24, tablonun ortasında, popover yüzeyi, köşe 12, halka + gölge, iç boşluk 6, aralar 8, 28'lik düğmeler.
 * ========================================================================================================================================= */
.cd-page .fi-ta-ctn :is(th, td).fi-ta-selection-cell {
    position: relative;
    width: 40px !important;
    min-width: 40px;
    padding: 0 !important;
}

.cd-page .fi-ta-ctn .fi-ta-selection-cell > div {
    padding: 0 !important;
}

.cd-page .fi-ta-ctn .fi-ta-selection-cell label {
    position: absolute;
    inset: 0;
    z-index: 2; /* satırın bağlantı katmanının (::after) üstünde */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 12px;
    cursor: var(--cd-cursor-interactive);
}

.cd-page .fi-ta-ctn .fi-ta-selection-cell .fi-checkbox-input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--cd-border-strong) !important;
}

@media (hover: hover) {
    .cd-page .fi-ta-ctn .fi-ta-selection-cell label:hover .fi-checkbox-input:not(:checked):not(:indeterminate) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-text-primary) 40%, transparent) !important;
    }

    .cd-page .fi-ta-ctn .fi-ta-selection-cell label:hover .fi-checkbox-input:is(:checked, :indeterminate) {
        background-color: var(--cd-fill-accent-hover) !important;
    }
}

.cd-page .fi-ta-ctn .fi-ta-selection-cell .fi-checkbox-input:checked {
    background: var(--cd-fill-accent) var(--cd-check) center / 14px 14px no-repeat !important;
    box-shadow: none !important;
}

.cd-page .fi-ta-ctn .fi-ta-selection-cell .fi-checkbox-input:indeterminate {
    background: var(--cd-fill-accent) var(--cd-dash) center / 14px 14px no-repeat !important;
    box-shadow: none !important;
}

html:not(.cl-pointer) .cd-page .fi-ta-ctn .fi-ta-selection-cell .fi-checkbox-input:focus-visible {
    box-shadow: var(--cd-focus-ring) !important;
}

/* Seçili satır: hover'daki hayalet zemin (§11 "Hover / seçili / açık satır"; aralarında 1 px aralık); kendi ve üstündeki satırın çizgisi yok. */
.cd-page .fi-ta-ctn tbody tr:has(> .fi-ta-selection-cell .fi-ta-record-checkbox:checked) > td::after,
.cd-page .fi-ta-ctn tbody tr:has(+ tr > .fi-ta-selection-cell .fi-ta-record-checkbox:checked) > td::after {
    content: none;
}

/* Küçük düğme (referansın Button size="sm"): 28 yüksek, köşe 7, iç boşluk 0 10; ikonlu yalnızca ikon 28 × 28. Renk / hover standart (.cd-btn). */
.cd-btn--sm {
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
}

/* Yazılı xs düğme (referansın Button xs: 24, 0 8, köşe 6, 13 / 17; panel başlığındaki Aç / PDF / KolayBi'de aç). */
.cd-btn--xs:not(.cd-btn--icon) {
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 17px;
}

.cd-btn--sm.cd-btn--icon {
    width: 28px;
    padding: 0;
}

.cd-btn--sm:not(.cd-btn--icon) svg {
    margin-left: -4px; /* referansın -ms-1: ikon soldan 6, yazıya 6 */
}

.cl-bulk-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    translate: -50% 0;
    z-index: 30;
    max-width: calc(100vw - 32px);
}

.cl-bulk-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 12px;
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-popover);
    color: var(--cd-text-primary);
    white-space: nowrap;
    --cd-focus-inset: var(--cd-surface-popover);
}

.cl-bulk-count {
    padding: 0 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-secondary);
}

.cl-bulk-sep {
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 4px 6px;
    border: 0;
    background: var(--cd-border);
}

/* Kapalı düğme fareyi almaz; ipucu (nedeni) sarmalayıcıda. */
.cl-bulk-action {
    display: inline-flex;
    border-radius: 7px;
}

.cl-bulk-action .cd-btn:disabled {
    pointer-events: none;
}

/* Açılış / kapanış: 16 px aşağıdan kayarak ve solarak (referanstan ölçüldü: ≈ 200 ms, yumuşak bitiş). */
.cl-bulk-anim {
    transition: opacity 200ms var(--cd-ease-out), transform 200ms var(--cd-ease-out);
}

.cl-bulk-off {
    opacity: 0;
    transform: translateY(16px);
}

/* Telefonda (< 640) üç işlem birden görünürken (Arşivle + Arşivden çıkar + Sil) düğmeler yalnızca ikon (28 × 28; adları ipucunda): çubuk 343'e sığar. */
@media (max-width: 639px) {
    .cl-bulk-card:has(.cl-bulk-action:not([style*="display: none"]) ~ .cl-bulk-action:not([style*="display: none"]) ~ .cl-bulk-action:not([style*="display: none"])) .cl-bulk-action .cd-btn {
        width: 28px;
        padding: 0;
    }

    .cl-bulk-card:has(.cl-bulk-action:not([style*="display: none"]) ~ .cl-bulk-action:not([style*="display: none"]) ~ .cl-bulk-action:not([style*="display: none"])) .cl-bulk-action .cd-btn svg {
        margin-left: 0;
    }

    .cl-bulk-card:has(.cl-bulk-action:not([style*="display: none"]) ~ .cl-bulk-action:not([style*="display: none"]) ~ .cl-bulk-action:not([style*="display: none"])) .cl-bulk-label {
        display: none;
    }
}

/* ÇEK TARAMA (App\Filament\Pages\CekTarama; kullanıcı kararı 2026-10-21). Düğmeler yan yana (aralar 12); kamera görüntüsü en fazla 480
   geniş, kare, köşe 12, ortasında %80'lik kare çerçeve (2 px beyaz, köşe 12; çevresi karartılır) ve altında ipucu. Sonuç: kart (sayfa zemini +
   %10 iç halka, köşe 12, iç boşluk 16); başlık 15 / 20 500, satırlar ayrıntı panellerinin bilgi satırları gibi (etiket 140 soluk, değer
   birincil, 14 / 20, aralar 8); en altta karekodun ham hâli soluk ve kırılabilir. */
.cl-cheque-scan {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
}

.cl-cheque-scan__camera {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.cl-cheque-scan__camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-cheque-scan__guide {
    position: absolute;
    inset: 10%;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.cl-cheque-scan__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: 0;
    text-align: center;
    font-size: 13px;
    line-height: 17px;
    color: #fff;
}

/* BAYRAKLAR: başlangıç (scripts/flags_css.py üretir) */
.cl-phone [data-value="AC"] { --cl-flag: url("../images/flags/sh.svg"); }
.cl-phone [data-value="AD"] { --cl-flag: url("../images/flags/ad.svg"); }
.cl-phone [data-value="AE"] { --cl-flag: url("../images/flags/ae.svg"); }
.cl-phone [data-value="AF"] { --cl-flag: url("../images/flags/af.svg"); }
.cl-phone [data-value="AG"] { --cl-flag: url("../images/flags/ag.svg"); }
.cl-phone [data-value="AI"] { --cl-flag: url("../images/flags/ai.svg"); }
.cl-phone [data-value="AL"] { --cl-flag: url("../images/flags/al.svg"); }
.cl-phone [data-value="AM"] { --cl-flag: url("../images/flags/am.svg"); }
.cl-phone [data-value="AO"] { --cl-flag: url("../images/flags/ao.svg"); }
.cl-phone [data-value="AR"] { --cl-flag: url("../images/flags/ar.svg"); }
.cl-phone [data-value="AS"] { --cl-flag: url("../images/flags/as.svg"); }
.cl-phone [data-value="AT"] { --cl-flag: url("../images/flags/at.svg"); }
.cl-phone [data-value="AU"] { --cl-flag: url("../images/flags/au.svg"); }
.cl-phone [data-value="AW"] { --cl-flag: url("../images/flags/aw.svg"); }
.cl-phone [data-value="AX"] { --cl-flag: url("../images/flags/ax.svg"); }
.cl-phone [data-value="AZ"] { --cl-flag: url("../images/flags/az.svg"); }
.cl-phone [data-value="BA"] { --cl-flag: url("../images/flags/ba.svg"); }
.cl-phone [data-value="BB"] { --cl-flag: url("../images/flags/bb.svg"); }
.cl-phone [data-value="BD"] { --cl-flag: url("../images/flags/bd.svg"); }
.cl-phone [data-value="BE"] { --cl-flag: url("../images/flags/be.svg"); }
.cl-phone [data-value="BF"] { --cl-flag: url("../images/flags/bf.svg"); }
.cl-phone [data-value="BG"] { --cl-flag: url("../images/flags/bg.svg"); }
.cl-phone [data-value="BH"] { --cl-flag: url("../images/flags/bh.svg"); }
.cl-phone [data-value="BI"] { --cl-flag: url("../images/flags/bi.svg"); }
.cl-phone [data-value="BJ"] { --cl-flag: url("../images/flags/bj.svg"); }
.cl-phone [data-value="BL"] { --cl-flag: url("../images/flags/bl.svg"); }
.cl-phone [data-value="BM"] { --cl-flag: url("../images/flags/bm.svg"); }
.cl-phone [data-value="BN"] { --cl-flag: url("../images/flags/bn.svg"); }
.cl-phone [data-value="BO"] { --cl-flag: url("../images/flags/bo.svg"); }
.cl-phone [data-value="BQ"] { --cl-flag: url("../images/flags/bq.svg"); }
.cl-phone [data-value="BR"] { --cl-flag: url("../images/flags/br.svg"); }
.cl-phone [data-value="BS"] { --cl-flag: url("../images/flags/bs.svg"); }
.cl-phone [data-value="BT"] { --cl-flag: url("../images/flags/bt.svg"); }
.cl-phone [data-value="BW"] { --cl-flag: url("../images/flags/bw.svg"); }
.cl-phone [data-value="BY"] { --cl-flag: url("../images/flags/by.svg"); }
.cl-phone [data-value="BZ"] { --cl-flag: url("../images/flags/bz.svg"); }
.cl-phone [data-value="CA"] { --cl-flag: url("../images/flags/ca.svg"); }
.cl-phone [data-value="CC"] { --cl-flag: url("../images/flags/cc.svg"); }
.cl-phone [data-value="CD"] { --cl-flag: url("../images/flags/cd.svg"); }
.cl-phone [data-value="CF"] { --cl-flag: url("../images/flags/cf.svg"); }
.cl-phone [data-value="CG"] { --cl-flag: url("../images/flags/cg.svg"); }
.cl-phone [data-value="CH"] { --cl-flag: url("../images/flags/ch.svg"); }
.cl-phone [data-value="CI"] { --cl-flag: url("../images/flags/ci.svg"); }
.cl-phone [data-value="CK"] { --cl-flag: url("../images/flags/ck.svg"); }
.cl-phone [data-value="CL"] { --cl-flag: url("../images/flags/cl.svg"); }
.cl-phone [data-value="CM"] { --cl-flag: url("../images/flags/cm.svg"); }
.cl-phone [data-value="CN"] { --cl-flag: url("../images/flags/cn.svg"); }
.cl-phone [data-value="CO"] { --cl-flag: url("../images/flags/co.svg"); }
.cl-phone [data-value="CR"] { --cl-flag: url("../images/flags/cr.svg"); }
.cl-phone [data-value="CU"] { --cl-flag: url("../images/flags/cu.svg"); }
.cl-phone [data-value="CV"] { --cl-flag: url("../images/flags/cv.svg"); }
.cl-phone [data-value="CW"] { --cl-flag: url("../images/flags/cw.svg"); }
.cl-phone [data-value="CX"] { --cl-flag: url("../images/flags/cx.svg"); }
.cl-phone [data-value="CY"] { --cl-flag: url("../images/flags/cy.svg"); }
.cl-phone [data-value="CZ"] { --cl-flag: url("../images/flags/cz.svg"); }
.cl-phone [data-value="DE"] { --cl-flag: url("../images/flags/de.svg"); }
.cl-phone [data-value="DJ"] { --cl-flag: url("../images/flags/dj.svg"); }
.cl-phone [data-value="DK"] { --cl-flag: url("../images/flags/dk.svg"); }
.cl-phone [data-value="DM"] { --cl-flag: url("../images/flags/dm.svg"); }
.cl-phone [data-value="DO"] { --cl-flag: url("../images/flags/do.svg"); }
.cl-phone [data-value="DZ"] { --cl-flag: url("../images/flags/dz.svg"); }
.cl-phone [data-value="EC"] { --cl-flag: url("../images/flags/ec.svg"); }
.cl-phone [data-value="EE"] { --cl-flag: url("../images/flags/ee.svg"); }
.cl-phone [data-value="EG"] { --cl-flag: url("../images/flags/eg.svg"); }
.cl-phone [data-value="EH"] { --cl-flag: url("../images/flags/eh.svg"); }
.cl-phone [data-value="ER"] { --cl-flag: url("../images/flags/er.svg"); }
.cl-phone [data-value="ES"] { --cl-flag: url("../images/flags/es.svg"); }
.cl-phone [data-value="ET"] { --cl-flag: url("../images/flags/et.svg"); }
.cl-phone [data-value="FI"] { --cl-flag: url("../images/flags/fi.svg"); }
.cl-phone [data-value="FJ"] { --cl-flag: url("../images/flags/fj.svg"); }
.cl-phone [data-value="FK"] { --cl-flag: url("../images/flags/fk.svg"); }
.cl-phone [data-value="FM"] { --cl-flag: url("../images/flags/fm.svg"); }
.cl-phone [data-value="FO"] { --cl-flag: url("../images/flags/fo.svg"); }
.cl-phone [data-value="FR"] { --cl-flag: url("../images/flags/fr.svg"); }
.cl-phone [data-value="GA"] { --cl-flag: url("../images/flags/ga.svg"); }
.cl-phone [data-value="GB"] { --cl-flag: url("../images/flags/gb.svg"); }
.cl-phone [data-value="GD"] { --cl-flag: url("../images/flags/gd.svg"); }
.cl-phone [data-value="GE"] { --cl-flag: url("../images/flags/ge.svg"); }
.cl-phone [data-value="GF"] { --cl-flag: url("../images/flags/gf.svg"); }
.cl-phone [data-value="GG"] { --cl-flag: url("../images/flags/gg.svg"); }
.cl-phone [data-value="GH"] { --cl-flag: url("../images/flags/gh.svg"); }
.cl-phone [data-value="GI"] { --cl-flag: url("../images/flags/gi.svg"); }
.cl-phone [data-value="GL"] { --cl-flag: url("../images/flags/gl.svg"); }
.cl-phone [data-value="GM"] { --cl-flag: url("../images/flags/gm.svg"); }
.cl-phone [data-value="GN"] { --cl-flag: url("../images/flags/gn.svg"); }
.cl-phone [data-value="GP"] { --cl-flag: url("../images/flags/gp.svg"); }
.cl-phone [data-value="GQ"] { --cl-flag: url("../images/flags/gq.svg"); }
.cl-phone [data-value="GR"] { --cl-flag: url("../images/flags/gr.svg"); }
.cl-phone [data-value="GT"] { --cl-flag: url("../images/flags/gt.svg"); }
.cl-phone [data-value="GU"] { --cl-flag: url("../images/flags/gu.svg"); }
.cl-phone [data-value="GW"] { --cl-flag: url("../images/flags/gw.svg"); }
.cl-phone [data-value="GY"] { --cl-flag: url("../images/flags/gy.svg"); }
.cl-phone [data-value="HK"] { --cl-flag: url("../images/flags/hk.svg"); }
.cl-phone [data-value="HN"] { --cl-flag: url("../images/flags/hn.svg"); }
.cl-phone [data-value="HR"] { --cl-flag: url("../images/flags/hr.svg"); }
.cl-phone [data-value="HT"] { --cl-flag: url("../images/flags/ht.svg"); }
.cl-phone [data-value="HU"] { --cl-flag: url("../images/flags/hu.svg"); }
.cl-phone [data-value="ID"] { --cl-flag: url("../images/flags/id.svg"); }
.cl-phone [data-value="IE"] { --cl-flag: url("../images/flags/ie.svg"); }
.cl-phone [data-value="IL"] { --cl-flag: url("../images/flags/il.svg"); }
.cl-phone [data-value="IM"] { --cl-flag: url("../images/flags/im.svg"); }
.cl-phone [data-value="IN"] { --cl-flag: url("../images/flags/in.svg"); }
.cl-phone [data-value="IO"] { --cl-flag: url("../images/flags/io.svg"); }
.cl-phone [data-value="IQ"] { --cl-flag: url("../images/flags/iq.svg"); }
.cl-phone [data-value="IR"] { --cl-flag: url("../images/flags/ir.svg"); }
.cl-phone [data-value="IS"] { --cl-flag: url("../images/flags/is.svg"); }
.cl-phone [data-value="IT"] { --cl-flag: url("../images/flags/it.svg"); }
.cl-phone [data-value="JE"] { --cl-flag: url("../images/flags/je.svg"); }
.cl-phone [data-value="JM"] { --cl-flag: url("../images/flags/jm.svg"); }
.cl-phone [data-value="JO"] { --cl-flag: url("../images/flags/jo.svg"); }
.cl-phone [data-value="JP"] { --cl-flag: url("../images/flags/jp.svg"); }
.cl-phone [data-value="KE"] { --cl-flag: url("../images/flags/ke.svg"); }
.cl-phone [data-value="KG"] { --cl-flag: url("../images/flags/kg.svg"); }
.cl-phone [data-value="KH"] { --cl-flag: url("../images/flags/kh.svg"); }
.cl-phone [data-value="KI"] { --cl-flag: url("../images/flags/ki.svg"); }
.cl-phone [data-value="KM"] { --cl-flag: url("../images/flags/km.svg"); }
.cl-phone [data-value="KN"] { --cl-flag: url("../images/flags/kn.svg"); }
.cl-phone [data-value="KP"] { --cl-flag: url("../images/flags/kp.svg"); }
.cl-phone [data-value="KR"] { --cl-flag: url("../images/flags/kr.svg"); }
.cl-phone [data-value="KW"] { --cl-flag: url("../images/flags/kw.svg"); }
.cl-phone [data-value="KY"] { --cl-flag: url("../images/flags/ky.svg"); }
.cl-phone [data-value="KZ"] { --cl-flag: url("../images/flags/kz.svg"); }
.cl-phone [data-value="LA"] { --cl-flag: url("../images/flags/la.svg"); }
.cl-phone [data-value="LB"] { --cl-flag: url("../images/flags/lb.svg"); }
.cl-phone [data-value="LC"] { --cl-flag: url("../images/flags/lc.svg"); }
.cl-phone [data-value="LI"] { --cl-flag: url("../images/flags/li.svg"); }
.cl-phone [data-value="LK"] { --cl-flag: url("../images/flags/lk.svg"); }
.cl-phone [data-value="LR"] { --cl-flag: url("../images/flags/lr.svg"); }
.cl-phone [data-value="LS"] { --cl-flag: url("../images/flags/ls.svg"); }
.cl-phone [data-value="LT"] { --cl-flag: url("../images/flags/lt.svg"); }
.cl-phone [data-value="LU"] { --cl-flag: url("../images/flags/lu.svg"); }
.cl-phone [data-value="LV"] { --cl-flag: url("../images/flags/lv.svg"); }
.cl-phone [data-value="LY"] { --cl-flag: url("../images/flags/ly.svg"); }
.cl-phone [data-value="MA"] { --cl-flag: url("../images/flags/ma.svg"); }
.cl-phone [data-value="MC"] { --cl-flag: url("../images/flags/mc.svg"); }
.cl-phone [data-value="MD"] { --cl-flag: url("../images/flags/md.svg"); }
.cl-phone [data-value="ME"] { --cl-flag: url("../images/flags/me.svg"); }
.cl-phone [data-value="MF"] { --cl-flag: url("../images/flags/mf.svg"); }
.cl-phone [data-value="MG"] { --cl-flag: url("../images/flags/mg.svg"); }
.cl-phone [data-value="MH"] { --cl-flag: url("../images/flags/mh.svg"); }
.cl-phone [data-value="MK"] { --cl-flag: url("../images/flags/mk.svg"); }
.cl-phone [data-value="ML"] { --cl-flag: url("../images/flags/ml.svg"); }
.cl-phone [data-value="MM"] { --cl-flag: url("../images/flags/mm.svg"); }
.cl-phone [data-value="MN"] { --cl-flag: url("../images/flags/mn.svg"); }
.cl-phone [data-value="MO"] { --cl-flag: url("../images/flags/mo.svg"); }
.cl-phone [data-value="MP"] { --cl-flag: url("../images/flags/mp.svg"); }
.cl-phone [data-value="MQ"] { --cl-flag: url("../images/flags/mq.svg"); }
.cl-phone [data-value="MR"] { --cl-flag: url("../images/flags/mr.svg"); }
.cl-phone [data-value="MS"] { --cl-flag: url("../images/flags/ms.svg"); }
.cl-phone [data-value="MT"] { --cl-flag: url("../images/flags/mt.svg"); }
.cl-phone [data-value="MU"] { --cl-flag: url("../images/flags/mu.svg"); }
.cl-phone [data-value="MV"] { --cl-flag: url("../images/flags/mv.svg"); }
.cl-phone [data-value="MW"] { --cl-flag: url("../images/flags/mw.svg"); }
.cl-phone [data-value="MX"] { --cl-flag: url("../images/flags/mx.svg"); }
.cl-phone [data-value="MY"] { --cl-flag: url("../images/flags/my.svg"); }
.cl-phone [data-value="MZ"] { --cl-flag: url("../images/flags/mz.svg"); }
.cl-phone [data-value="NA"] { --cl-flag: url("../images/flags/na.svg"); }
.cl-phone [data-value="NC"] { --cl-flag: url("../images/flags/nc.svg"); }
.cl-phone [data-value="NE"] { --cl-flag: url("../images/flags/ne.svg"); }
.cl-phone [data-value="NF"] { --cl-flag: url("../images/flags/nf.svg"); }
.cl-phone [data-value="NG"] { --cl-flag: url("../images/flags/ng.svg"); }
.cl-phone [data-value="NI"] { --cl-flag: url("../images/flags/ni.svg"); }
.cl-phone [data-value="NL"] { --cl-flag: url("../images/flags/nl.svg"); }
.cl-phone [data-value="NO"] { --cl-flag: url("../images/flags/no.svg"); }
.cl-phone [data-value="NP"] { --cl-flag: url("../images/flags/np.svg"); }
.cl-phone [data-value="NR"] { --cl-flag: url("../images/flags/nr.svg"); }
.cl-phone [data-value="NU"] { --cl-flag: url("../images/flags/nu.svg"); }
.cl-phone [data-value="NZ"] { --cl-flag: url("../images/flags/nz.svg"); }
.cl-phone [data-value="OM"] { --cl-flag: url("../images/flags/om.svg"); }
.cl-phone [data-value="PA"] { --cl-flag: url("../images/flags/pa.svg"); }
.cl-phone [data-value="PE"] { --cl-flag: url("../images/flags/pe.svg"); }
.cl-phone [data-value="PF"] { --cl-flag: url("../images/flags/pf.svg"); }
.cl-phone [data-value="PG"] { --cl-flag: url("../images/flags/pg.svg"); }
.cl-phone [data-value="PH"] { --cl-flag: url("../images/flags/ph.svg"); }
.cl-phone [data-value="PK"] { --cl-flag: url("../images/flags/pk.svg"); }
.cl-phone [data-value="PL"] { --cl-flag: url("../images/flags/pl.svg"); }
.cl-phone [data-value="PM"] { --cl-flag: url("../images/flags/pm.svg"); }
.cl-phone [data-value="PR"] { --cl-flag: url("../images/flags/pr.svg"); }
.cl-phone [data-value="PS"] { --cl-flag: url("../images/flags/ps.svg"); }
.cl-phone [data-value="PT"] { --cl-flag: url("../images/flags/pt.svg"); }
.cl-phone [data-value="PW"] { --cl-flag: url("../images/flags/pw.svg"); }
.cl-phone [data-value="PY"] { --cl-flag: url("../images/flags/py.svg"); }
.cl-phone [data-value="QA"] { --cl-flag: url("../images/flags/qa.svg"); }
.cl-phone [data-value="RE"] { --cl-flag: url("../images/flags/re.svg"); }
.cl-phone [data-value="RO"] { --cl-flag: url("../images/flags/ro.svg"); }
.cl-phone [data-value="RS"] { --cl-flag: url("../images/flags/rs.svg"); }
.cl-phone [data-value="RU"] { --cl-flag: url("../images/flags/ru.svg"); }
.cl-phone [data-value="RW"] { --cl-flag: url("../images/flags/rw.svg"); }
.cl-phone [data-value="SA"] { --cl-flag: url("../images/flags/sa.svg"); }
.cl-phone [data-value="SB"] { --cl-flag: url("../images/flags/sb.svg"); }
.cl-phone [data-value="SC"] { --cl-flag: url("../images/flags/sc.svg"); }
.cl-phone [data-value="SD"] { --cl-flag: url("../images/flags/sd.svg"); }
.cl-phone [data-value="SE"] { --cl-flag: url("../images/flags/se.svg"); }
.cl-phone [data-value="SG"] { --cl-flag: url("../images/flags/sg.svg"); }
.cl-phone [data-value="SH"] { --cl-flag: url("../images/flags/sh.svg"); }
.cl-phone [data-value="SI"] { --cl-flag: url("../images/flags/si.svg"); }
.cl-phone [data-value="SJ"] { --cl-flag: url("../images/flags/sj.svg"); }
.cl-phone [data-value="SK"] { --cl-flag: url("../images/flags/sk.svg"); }
.cl-phone [data-value="SL"] { --cl-flag: url("../images/flags/sl.svg"); }
.cl-phone [data-value="SM"] { --cl-flag: url("../images/flags/sm.svg"); }
.cl-phone [data-value="SN"] { --cl-flag: url("../images/flags/sn.svg"); }
.cl-phone [data-value="SO"] { --cl-flag: url("../images/flags/so.svg"); }
.cl-phone [data-value="SR"] { --cl-flag: url("../images/flags/sr.svg"); }
.cl-phone [data-value="SS"] { --cl-flag: url("../images/flags/ss.svg"); }
.cl-phone [data-value="ST"] { --cl-flag: url("../images/flags/st.svg"); }
.cl-phone [data-value="SV"] { --cl-flag: url("../images/flags/sv.svg"); }
.cl-phone [data-value="SX"] { --cl-flag: url("../images/flags/sx.svg"); }
.cl-phone [data-value="SY"] { --cl-flag: url("../images/flags/sy.svg"); }
.cl-phone [data-value="SZ"] { --cl-flag: url("../images/flags/sz.svg"); }
.cl-phone [data-value="TA"] { --cl-flag: url("../images/flags/sh.svg"); }
.cl-phone [data-value="TC"] { --cl-flag: url("../images/flags/tc.svg"); }
.cl-phone [data-value="TD"] { --cl-flag: url("../images/flags/td.svg"); }
.cl-phone [data-value="TG"] { --cl-flag: url("../images/flags/tg.svg"); }
.cl-phone [data-value="TH"] { --cl-flag: url("../images/flags/th.svg"); }
.cl-phone [data-value="TJ"] { --cl-flag: url("../images/flags/tj.svg"); }
.cl-phone [data-value="TK"] { --cl-flag: url("../images/flags/tk.svg"); }
.cl-phone [data-value="TL"] { --cl-flag: url("../images/flags/tl.svg"); }
.cl-phone [data-value="TM"] { --cl-flag: url("../images/flags/tm.svg"); }
.cl-phone [data-value="TN"] { --cl-flag: url("../images/flags/tn.svg"); }
.cl-phone [data-value="TO"] { --cl-flag: url("../images/flags/to.svg"); }
.cl-phone [data-value="TR"] { --cl-flag: url("../images/flags/tr.svg"); }
.cl-phone [data-value="TT"] { --cl-flag: url("../images/flags/tt.svg"); }
.cl-phone [data-value="TV"] { --cl-flag: url("../images/flags/tv.svg"); }
.cl-phone [data-value="TW"] { --cl-flag: url("../images/flags/tw.svg"); }
.cl-phone [data-value="TZ"] { --cl-flag: url("../images/flags/tz.svg"); }
.cl-phone [data-value="UA"] { --cl-flag: url("../images/flags/ua.svg"); }
.cl-phone [data-value="UG"] { --cl-flag: url("../images/flags/ug.svg"); }
.cl-phone [data-value="US"] { --cl-flag: url("../images/flags/us.svg"); }
.cl-phone [data-value="UY"] { --cl-flag: url("../images/flags/uy.svg"); }
.cl-phone [data-value="UZ"] { --cl-flag: url("../images/flags/uz.svg"); }
.cl-phone [data-value="VA"] { --cl-flag: url("../images/flags/va.svg"); }
.cl-phone [data-value="VC"] { --cl-flag: url("../images/flags/vc.svg"); }
.cl-phone [data-value="VE"] { --cl-flag: url("../images/flags/ve.svg"); }
.cl-phone [data-value="VG"] { --cl-flag: url("../images/flags/vg.svg"); }
.cl-phone [data-value="VI"] { --cl-flag: url("../images/flags/vi.svg"); }
.cl-phone [data-value="VN"] { --cl-flag: url("../images/flags/vn.svg"); }
.cl-phone [data-value="VU"] { --cl-flag: url("../images/flags/vu.svg"); }
.cl-phone [data-value="WF"] { --cl-flag: url("../images/flags/wf.svg"); }
.cl-phone [data-value="WS"] { --cl-flag: url("../images/flags/ws.svg"); }
.cl-phone [data-value="XK"] { --cl-flag: url("../images/flags/xk.svg"); }
.cl-phone [data-value="YE"] { --cl-flag: url("../images/flags/ye.svg"); }
.cl-phone [data-value="YT"] { --cl-flag: url("../images/flags/yt.svg"); }
.cl-phone [data-value="ZA"] { --cl-flag: url("../images/flags/za.svg"); }
.cl-phone [data-value="ZM"] { --cl-flag: url("../images/flags/zm.svg"); }
.cl-phone [data-value="ZW"] { --cl-flag: url("../images/flags/zw.svg"); }
/* BAYRAKLAR: bitiş */

/* İŞARETLİ SATIR: yan paneldeki ▲ ▼ ile gezerken işaretli satır ekran dışına çıkarsa en yakın kenara kaydırılır
   (cover-lab-panel.js syncActive); üstte sabit üst çubuğun altında, altta ekranın kenarında 16 px pay kalır. */
.cd-page .fi-ta-ctn tbody tr {
    scroll-margin-top: calc(var(--cd-topbar-h) + 16px);
    scroll-margin-bottom: 16px;
}

/* İSKONTOLU FİYAT SEÇİCİLERİ (Liste Fiyatları; kullanıcı kararları 2026-10-24, 2026-10-25; partials/table-discount-picker): araç çubuğunda
   filtre satırında Durum'un önünde (aşağıda display: contents); Kâr hesabı panelinde iki hap yan yana, aralarında 8. */
.cd-page .cl-discount-picker {
    display: flex;
    flex-wrap: wrap; /* telefonda iki hap sığmazsa alt alta, sağa yaslı */
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.cd-page .cl-discount-picker .cl-filter-pill-wrap {
    position: relative;
}

/* Araç çubuğunun sağ grubunda, ₺ | $'ın solunda (kullanıcı kararı 2026-11-05; önce filtre satırında): kap kendisi kutu oluşturmaz, iki hap
   grubun aralığıyla (8) dizilir. */
.cd-page .cl-discount-picker--toolbar {
    display: contents;
}

.cd-page .cl-filter-menu--end {
    left: auto;
    right: 0;
}

/* Fiyat formu › "Tabandan hesapla" (kullanıcı kararları 2026-10-24; forms/components/list-price-from-floor): Liste Fiyatı alanının 4 sağında
   32 × 32 standart ikincil ikon düğmesi (köşe 8, %10 dolgu + ikincil çizgi / gölge; .cl-reset-btn ile aynı), ikon 20 birincil; klavye odağında
   portalın odak halkası; kapalıyken (aria-disabled) %40. Satırdaki 12 aralık yerine 4: -8 sol boşluk. Önce alana bitişik (ortak kenarlı) idi. */
.cd-page .cl-field-row .fi-fo-component-ctn > :has(.cl-list-price-calc) {
    flex: none;
    margin-left: -8px;
}

.cd-page .cl-list-price-calc {
    padding-top: 22px; /* yanındaki Liste Fiyatı alanıyla aynı hizada: başlığı ⓘ'siz (14) + başlık–alan aralığı (8) */
}

.cl-attached-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cd-control-h);
    height: var(--cd-control-h);
    padding: 0;
    border: 0;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-secondary);
    box-shadow: var(--cd-shadow-btn-secondary);
    color: var(--cd-text-primary);
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-attached-btn svg {
    width: var(--cd-icon);
    height: var(--cd-icon);
}

/* Hesap makinesi ikonunun çizgisi 1 px (kullanıcı kararı 2026-10-24; portalın tek istisnası): uzun düz çizgilerden oluşan ikon standart
   1,25 px'te (--cd-icon-stroke) diğer ikonlardan kalın görünüyordu. */
.cl-attached-btn svg[stroke="currentColor"] :is(path, circle, rect, line, polyline, polygon, ellipse) {
    stroke-width: 1px;
}

@media (hover: hover) {
    .cl-attached-btn:not([aria-disabled="true"]):hover {
        background: var(--cd-fill-secondary-hover);
    }
}

html:not(.cl-pointer) .cl-attached-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

.cl-attached-btn[aria-disabled="true"] {
    opacity: 0.4;
}

/* Telefonda (< 640) satır sığmıyor: alanlar alt satıra akar (cl-field-row--wrap). Genel Gider + Liste Fiyatı + bitişik düğme ilk satırda kalır,
   Taban Kâr Marjı alta geçer (düğme alanından ayrılmaz). */
@media (max-width: 639px) {
    .cd-page .cl-field-row--wrap > .fi-fo-component-ctn,
    .cd-page .cl-field-row--wrap > div > .fi-fo-component-ctn {
        flex-wrap: wrap;
        row-gap: 16px;
    }
}

/* Panellerdeki seçiciler HER ZAMAN sağ alt köşede, alt çubukta (kullanıcı kararı 2026-10-25; partials/panel-footer): birden fazlaysa yan yana,
   aralarında 8. ₺ | $ Geçmiş'in "Tümü | Fiyat"ıyla aynı küçük seçici (.cl-detail-seg, 24 yüksek). */
.cl-detail-footer {
    gap: 8px;
}

.cd-page .cl-detail-footer > .cl-detail-seg {
    margin-left: 0;
}

/* Yan panelin bilgi satırında telefonun yanındaki WhatsApp düğmesi (32 × 32) satırı uzatmaz (kullanıcı bildirimi 2026-10-29: müşteri panelinde
   E-posta ile Telefon arasında fazladan boşluk vardı): satır diğerleri gibi 17 yüksek, düğme satırın ortasında taşar. */
.cl-detail-row .cl-phone-cell {
    max-height: 17px;
    align-items: center;
}

.cl-detail-row .cl-phone-cell .cl-whatsapp {
    margin-block: -8px;
}

/* Fatura özeti paneli (partials/invoice-quickview; kullanıcı kararı 2026-10-29): bölüm başlığı yan panellerin standardı (13/17 500 gri),
   kalem satırında tarih sütunu yok. */
.cl-detail-section-title {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-secondary);
}

.cl-invoice-lines {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    line-height: 17px;
}

/* Faturadaki gibi sütunlar: Ürün kalan yeri alır, rakamlar sağa yaslı ve hizalı. */
.cl-invoice-lines th:nth-child(2), .cl-invoice-lines td:nth-child(2) { width: 84px; }
.cl-invoice-lines th:nth-child(3), .cl-invoice-lines td:nth-child(3) { width: 84px; }
.cl-invoice-lines th:nth-child(4), .cl-invoice-lines td:nth-child(4) { width: 96px; }

.cl-invoice-lines th {
    padding: 6px 0 6px 12px;
    text-align: right;
    font-weight: 500;
    color: var(--cd-text-secondary);
}

.cl-invoice-lines td {
    padding: 8px 0 8px 12px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text-primary);
}

.cl-invoice-lines :is(th, td):first-child {
    padding-left: 0;
    text-align: left;
    white-space: normal;
}

.cl-invoice-lines__code {
    display: block;
}

/* μWV Testi paneli (Ürün, Δm, µwv): son sütun birimiyle ("5,804 g/m²·Pa·h") daha geniş. */
.cl-invoice-lines--mu th:nth-child(2), .cl-invoice-lines--mu td:nth-child(2) { width: 84px; }
.cl-invoice-lines--mu th:nth-child(3), .cl-invoice-lines--mu td:nth-child(3) { width: 150px; }
/* Δm ve µwv sütunlarının başlığı ve değerleri gri (ikincil), ürün adı birincil kalır. */
.cl-invoice-lines--mu :is(th, td):not(:first-child) { color: var(--cd-text-secondary); }

/* Uzun ürün adı kesilmez, alt satırlara sarar. */
.cl-invoice-lines__name {
    display: block;
    color: var(--cd-text-muted);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * YÖNETİM › SİSTEM (kullanıcı kararı 2026-11-01; App\Filament\Pages\Sistem): üç rapor tablosu kartı alt alta, aralar 16 (rapor kartları gibi).
 * Satır adı normal ağırlıkta, altında gri not; geride kalan / başarısız senkron kırmızı ve Hata Kayıtları'na bağlantı (altı çizili, rengiyle).
 * ------------------------------------------------------------------------ */
.cl-system {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cl-system-table tbody th {
    font-weight: 400;
    text-align: left;
}

.cl-system-table :is(th, td) {
    vertical-align: top;
}

.cl-system-table--facts tbody th {
    width: 200px;
    color: var(--cd-text-secondary);
}

.cl-system-table tbody tr:last-child > * {
    border-bottom: 0;
}

.cl-system-command {
    font-variant-numeric: tabular-nums slashed-zero;
}

.cl-system-problem {
    color: var(--cd-tint-red-fg);
}

/* ---------------------------------------------------------------------------
 * PANEL (açılış; kullanıcı kararı 2026-11-01, App\Filament\Pages\AdminDashboard): referansın Dashboard'u (ölçüldü 2026-11-01). Başlıkta selamlama
 * ve iki düğme; KPI kartları portalın küçük kart standardında (112, köşe 12, iç boşluk 16; .cl-stat-card), üç sütun, aralar 12; kartın tamamı
 * bağlantı (referansın CardLink'i: başlıktaki bağlantının ::after'ı kartı kaplar, altı çizili değil). Bölümler arası 24, bölüm başlığı 15/20
 * 580, başlık → içerik 12. Seriler referansın "Models" kartları: üstte 88'lik şerit (serinin rengi %14, içinde serinin adı italik 600 rengiyle;
 * giriş ekranının seriler şeridi gibi; ad yalnızca burada), altta çipler 12/15 500.
 * ------------------------------------------------------------------------ */
.cl-dash {
    display: flex;
    flex-direction: column;
    gap: 24px;
    container: cl-dash / inline-size;
}

.cl-dash-kpis {
    display: grid;
    /* Referansın Dashboard'u: kartlar kendiliğinden dizilir (en az 280'lik sütunlar). */
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px;
}

/* Referansın Dashboard'u (kullanıcı kararı 2026-11-14): üst sırada üç kart, altında sayfa genişliğinde dördüncü (Token volume); dar kapta tek sütun. */
@container cl-dash (min-width: 700px) {
    .cl-dash-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cl-dash-card--wide {
        grid-column: 1 / -1;
    }
}

@container cl-dash (max-width: 699px) {
    .cl-dash-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Kartın içindeki eylem düğmesi (referansın "Add funds"ı): kartın tamamını kaplayan bağlantının üstünde, değerin sağında. */
.cl-dash-card-action {
    position: relative;
    z-index: 1;
    margin-left: auto;
}

/* Sayfa genişliğindeki kart (referansın "Token volume"u): değer solda, çubuk grafik sağda ve kartın büyük bölümünü kaplar; çubuklar vurgu mavisi,
   yükseklik en büyük aya oranlı, en az 2 px; üzerine gelince ay ve değer ipucu. */
.cl-dash-bars {
    /* Kartın yüksekliğini değiştirmez (136 kalır): başlık satırının altında, sağda, kartın altına kadar uzanır; altta gün numaraları. */
    position: absolute;
    top: 52px;
    right: 16px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Not metni (≈ 290 px) grafiğe binmesin: grafik kartın solundan en az 340 px sonra başlar. */
    width: min(560px, calc(100% - 340px));
}

.cl-dash-bars-plot,
.cl-dash-bars-axis {
    display: flex;
    gap: 8px;
}

.cl-dash-bars-plot {
    flex: 1 1 auto;
    align-items: flex-end;
    min-height: 0;
}

/* Gün numaraları çubuklarla aynı yer ızgarasında: her yer çubuk genişliğinde, numara yerin ortasında. */
.cl-dash-bars-axis {
    flex: none;
    height: 18px;
    font-size: 12px;
    line-height: 14px;
    color: var(--cd-text-secondary);
}

.cl-dash-bars-axis span {
    position: relative;
    flex: 0 0 calc((100% - (var(--cl-days, 31) - 1) * 8px) / var(--cl-days, 31));
}

.cl-dash-bars-axis i {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Bugünün işareti: bugünün yerinin altında küçük vurgu noktası (dolu günlerin nerede bittiğini gösterir). */
.cl-dash-today {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--cd-text-accent);
}

.cl-dash-bar {
    flex: 0 0 calc((100% - (var(--cl-days, 31) - 1) * 8px) / var(--cl-days, 31));
    /* En az 6 px: küçük ama sıfır olmayan gün de görünür (yükseklik karekök ölçeğinde). */
    height: max(6px, var(--cl-bar-h));
    /* Bu grafiğe özel (kullanıcı kararı 2026-11-14): çubukların üstü keskin; standart çubuk grafiklerin köşe yuvarlaklığı değişmez. */
    border-radius: 0;
    background: var(--cd-fill-accent, #2A78D6);
    z-index: 1;
}

.cl-dash-bar--zero {
    height: 2px;
    border-radius: 0;
    opacity: 0.45;
}

.cl-dash-bar--empty {
    height: 2px;
    border-radius: 0;
    background: var(--cd-border-strong);
}

@media (hover: hover) {
    .cl-dash-bar:not(.cl-dash-bar--empty):hover {
        background: var(--cd-text-accent);
    }
}

/* Operasyon kartlarının şeridi: grafik renklerinin pastel tonu, ortada siyah ikon (portalın görsel tarzı). */
.cl-dash-serie-icon {
    width: 40px;
    height: 40px;
    color: #141413;
}

/* Referansın model kartlarındaki düz pastel zeminler gibi: sabit pastel, üstünde siyah ikon (iki temada aynı). */
.cl-dash-tone-1 { background: #A9C7F2; }
.cl-dash-tone-2 { background: #F2C0A2; }
.cl-dash-tone-3 { background: #B9DFB0; }
.cl-dash-tone-4 { background: #D4C6F2; }
.cl-dash-tone-5 { background: #F2E0A4; }

.cl-dash .cl-dash-series {
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}

/* Kısayollar (referansın "Resources" kartları, canlıda ölçüldü): 168 yüksek, iç boşluk 16, başlık ikon + ad 14/20 580, açıklama 12/17, eylem düğmeleri altta. */
.cl-dash-res {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cl-dash-res-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 168px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-dash-res-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 580;
    color: var(--cd-text-primary);
}

.cl-dash-res-icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.cl-dash-res-text {
    margin: 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cl-dash-res-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

@container cl-dash (max-width: 879px) {
    .cl-dash-res {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container cl-dash (max-width: 459px) {
    .cl-dash-res {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sayfa altı bağlantıları (referansın "API status · Help and support"u, canlıda ölçüldü): sayfanın en altında ortada, 13 / 17, soluk renk (--cd-text-muted),
   altı çizili (aralık 3, çizgi yazının %40'ı), aralar 16, alttan 24. İçerik kısa olsa da sayfanın altına yaslanır. */
.cd-page .cl-dash {
    /* Başlık satırı ve sayfa iç boşlukları düşülür (başlık bloğu ≈ 96, alt iç boşluk 32); sayfa gereksiz kaydırılmaz. */
    min-height: calc(100dvh - var(--cd-topbar-h, 48px) - 128px);
}

.cl-dash-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: auto;
    padding: 16px 0 24px;
    font-size: 13px;
    line-height: 17px;
}

.cd-page .cl-dash-footer a,
.cd-page .cl-dash-footer a:hover {
    color: var(--cd-text-muted);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .cd-page .cl-dash-footer a:hover {
        text-decoration-color: currentColor;
    }
}

.cl-dash-footer a:hover {
    color: var(--cd-text-primary);
}

.cl-dash-card {
    position: relative;
}

/* Panel kartındaki oran halkası: referansın Dashboard › Spend this month halkası koddan alındı (48 × 48, r 22, çizgi 4, iz --border-strong, ilerleme
   vurgu dolgusu, -90° döner, uçlar düz; kullanıcı kararı 2026-11-13). */
.cl-dash-ring {
    display: flex;
    flex-shrink: 0;
}

.cl-dash-ring svg {
    transform: rotate(-90deg);
}

.cl-dash-ring .cl-dash-ring-track {
    stroke: var(--cd-border-strong);
}

.cl-dash-ring .cl-dash-ring-fill {
    stroke: var(--cd-fill-accent, #2A78D6);
    transition: stroke-dashoffset 300ms;
}

.cl-dash-card-link,
.cl-dash-card-link:hover {
    color: inherit;
    text-decoration: none;
}

.cl-dash-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

html:not(.cl-pointer) .cd-page .cl-dash-card-link:focus-visible {
    outline: 0;
}

html:not(.cl-pointer) .cd-page .cl-dash-card-link:focus-visible::after {
    box-shadow: var(--cd-focus-ring);
}

.cl-dash-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cl-dash-heading {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 580;
    color: var(--cd-text-primary);
}

.cl-dash-heading-row .cl-dash-heading {
    margin-bottom: 0;
}

.cl-dash-more {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cl-dash-series {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cl-dash-serie {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-dash-serie-band {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    border-bottom: 1px solid var(--cd-border);
    background: var(--cl-series-color);
}

/* Şeritteki işaret: pastel zemin üstünde siyah (#141413), portalın görsel tarzı. */
.cl-dash-serie-mark {
    font-size: 26px;
    line-height: 28px;
    font-weight: 600;
    font-style: italic;
    color: #141413;
}

.cl-dash-serie-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 16px;
}

.cl-dash-serie-title {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 580;
    color: var(--cd-text-primary);
}

.cl-dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* referans: etiketler arası 4 */
}

.cl-dash-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    background: var(--cd-fill-ghost-hover);
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    color: var(--cd-text-secondary);
    white-space: nowrap;
}

.cl-dash-list {
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
    padding: 4px 16px;
}

.cl-dash-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 44px;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    border-bottom: 1px solid var(--cd-border-subtle);
}

.cl-dash-row:last-child {
    border-bottom: 0;
}

/* Ad (rozetiyle) küçülmez; sığmazsa not alt satıra, sağa yaslı geçer (ad ile not üst üste binmez). */
.cl-dash-row-text {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
}

.cl-dash-row-note {
    margin-left: auto;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
    white-space: nowrap;
}

a.cl-dash-row-note {
    color: var(--cd-text-secondary);
}

.cl-dash-row--danger,
.cl-dash-row--danger a {
    color: var(--cd-tint-red-fg);
}

.cl-dash-row-icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--cd-text-muted);
}

.cl-dash-empty {
    margin: 0;
    padding: 12px 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-muted);
}

@container cl-dash (max-width: 700px) {
    .cl-dash-series {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container cl-dash (max-width: 420px) {
    .cl-dash-series {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .cl-dash-row-note {
        margin-left: 0;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
 * BÖLÜM GENEL BAKIŞ (kullanıcı kararı 2026-11-01; App\Filament\Pages\SectionOverview; referansın Spending › Overview'u ölçüldü 2026-11-01):
 * KPI kartları küçük kart standardında (112, köşe 12, iç boşluk 16), üç sütun, aralar 16; kartın sağ üstünde vurgu renginde "…'ı aç"
 * (14/20, altı çizili; referansın "Open cost"u). Grup başlığı 15/20 500, başlık → kartlar 16, gruplar arası 28. Grupta grafik kartı ile liste
 * kartı yan yana (iki eşit sütun, 16); liste kartı: başlık 15/20 500 + 8 sağında gri nitelik (14/20), satırlar 44+ (ad 14/20, altında not
 * 13/17 soluk, sağda tutar 14/20). Kaynaklar: bölümün diğer sayfaları, üç sütun; ad 14/20 500, açıklama 14/20 ikincil, sağda ok.
 * ------------------------------------------------------------------------ */
.cl-overview {
    display: flex;
    flex-direction: column;
    gap: 16px; /* kartlar arası (kart sayfalarında bölüm başlığı yok; kullanıcı kararı 2026-11-04) */
    container: cl-overview / inline-size;
}

/* Kaynaklar (kart sayfalarında kalan tek başlıklı bölüm) kartlardan 28 ayrı. */
.cl-overview > .cl-overview-group:has(> #cl-ov-resources) {
    margin-top: 12px;
}

/* Referansın Spending › Overview düzeni (SectionOverview::usesSections): başlıklı bölümler arası 28, başlık → kartlar 16, kartlar arası 16. */
.cl-overview--sections {
    gap: 28px;
}

.cl-overview--sections .cl-overview-kpi {
    position: relative;
}

/* Referansın Build › Overview boşlukları (kullanıcı kararı 2026-11-14; Messages overview canlıda ölçüldü: kap gap 28, bölüm mt-sm 12 → bloklar arası 40;
   başlık satırı → içerik 16; kartlar arası 16; açıklama → KPI 36; KPI kartı 121 = 16 + başlık 24 + 12 + değer 32 + 4 + not 17 + 16). */
.cl-overview--sections > .cl-overview-kpis {
    margin-top: 20px;
}

.cl-overview--sections > .cl-overview-group {
    margin-top: 12px;
}

/* KPI kartı olmayan sayfada (Kaynaklar) ilk kartlar açıklamadan 36 sonra başlar (referansın Resources overview'u: 128 → 164). */
.cl-overview--sections > .cl-overview-group:first-child {
    margin-top: 20px;
}

.cl-overview--sections .cl-overview-kpi-head {
    min-height: 24px;
}

.cl-overview--sections .cl-overview-kpi .cl-spark-value {
    display: flex;
    align-items: center;
    height: 32px;
    margin: 0;
}

/* Kartın tamamını kaplayan bağlantı akıştan çıkar (yoksa flex aralığı kartın altına 12 ekler). */
.cl-overview--sections .cl-overview-kpi > .cl-dash-card-link {
    position: absolute;
    inset: 0;
}

.cl-overview--sections .cl-overview-kpi .cl-spark-note {
    margin-top: -8px;
}

.cl-overview-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Başlık kesilmez: yer yoksa bağlantı başlığın altına iner ve kart uzar (geniş ekranda tek satır, kart 112). */
.cl-overview-kpi {
    height: auto;
    min-height: 112px;
}

.cl-overview-kpi-head {
    /* Referans: bağlantı başlık satırında kalır, kartlar aynı boyda; sığmayan başlık "…" ile kısalır. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cl-overview-kpi-head .cl-spark-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-overview-link {
    flex: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-accent);
    white-space: nowrap;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cd-dur-fast) var(--cd-ease-out);
}

.cl-overview-link:hover {
    text-decoration-color: currentColor;
}

html:not(.cl-pointer) .cd-page .cl-overview-link:focus-visible {
    outline: 0;
    text-decoration-color: currentColor;
}

.cl-chart-head-link {
    margin-left: auto;
}

/* Genel Bakış kartlarında başlık ve niteliği tek satır (referans: Daily cost · last 30 days). */
.cl-overview .cl-chart-title {
    white-space: nowrap;
}

.cl-overview-heading {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-overview-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.cl-overview-chart > .cl-chart-card {
    height: 100%;
}

.cl-overview-list {
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-overview-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    margin-bottom: 16px; /* referans (Recent invoices): başlık → liste 16 */
}

.cl-overview-list-title {
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-overview-qualifier {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--cd-text-muted);
}

.cl-overview-row {
    /* Referansın kart içi listesi: satır çizgileri kartın iç boşluğuna 12 taşar, ilk satırın üstünde de çizgi; satır 8 12. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 45px;
    margin: 0 -12px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-top: 1px solid var(--cd-border-subtle);
}

.cl-overview-row-main {
    min-width: 0;
}

.cl-overview-row-text {
    display: flex;
    align-items: center;
    gap: 8px; /* alt parça satırında solda türün ikonu */
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
}

.cl-overview-row-note {
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cl-overview-row-value {
    flex: none;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cl-overview-empty {
    margin: 0;
    padding: 12px 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-muted);
}

.cl-overview-resources {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cl-overview-resource,
.cl-overview-resource:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .cl-overview-resource:hover {
        background: var(--cd-fill-ghost-hover);
    }
}

html:not(.cl-pointer) .cd-page .cl-overview-resource:focus-visible {
    outline: 0;
    box-shadow: var(--cd-focus-ring);
}

.cl-overview-resource {
    align-items: flex-start;
    gap: 16px;
}

/* Referansın Resources kartının ikon karosu (platform.claude.com › Messages › Overview, canlıda ölçüldü): 36 × 36, köşe 8, vurgu zemini,
   vurgu renginde 20 px ikon; metin üstten başlar, ok dikey ortada. */
.cl-overview-resource-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--cd-bg-accent);
    color: var(--cd-text-accent);
}

.cl-overview-resource-tile svg {
    width: 20px;
    height: 20px;
}

.cl-overview-resource-chevron {
    align-self: center;
}

/* Kart yüksekliği referansın 74'ü: iç boşluk 16 + ad 20 + 2 + tek satır açıklama 20 + 16; uzun açıklama "…" ile kısalır, kart büyümez. */
.cl-overview-resource-text {
    gap: 2px;
}

.cl-overview-resource-name,
.cl-overview-resource-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-overview-resource-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.cl-overview-resource-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-overview-resource-desc {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cl-overview-resource-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cd-text-muted);
}

@container cl-overview (max-width: 860px) {
    .cl-overview-kpis,
    .cl-overview-resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cl-overview-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container cl-overview (max-width: 520px) {
    .cl-overview-kpis,
    .cl-overview-resources {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
 * KAYIT SAYFASI — MÜŞTERİ SAYFASI (Aşama 4b, kullanıcı kararı 2026-11-01; CustomerResource::pageHeader, ViewCustomer, EditCustomer): başlıkta
 * kırıntı yolu (form sayfalarınınki), ad + rozet 22/28 500, altında gri konum; sağda ₺ | $ ve sekmenin asıl eylemi (aralar 12); altında sekme
 * şeridi (.cl-tabs; açıklamanın 24 altında, içerik şeridin 16 altında — Kayıtlar'ın sekmeleri gibi). Özet'te kartlar köşe 12, iç boşluk 16,
 * 1 px %10 halka; iki kart yan yana (16), dar alanda alt alta. Bilgi satırı: solda ad 14/20 ikincil (160), sağda değer 14/20, altında gri not.
 * ------------------------------------------------------------------------ */
.cd-page .fi-header.cl-record-header {
    display: block;
}

/* KAYIT SAYFASI BAŞLIĞI KAYARKEN (kullanıcı kararı 2026-11-12; referansın Agent sayfası ölçüldü: sticky top-below-chrome, 8 üst, sayfa zemini):
   kırıntı sayfayla birlikte kayar, başlık bloğu + sekme şeridi üst çubuğun altında yapışık kalır. Başlığın kendisi display: contents olur
   (yapışkan öğe kabın içinde kalmasın, sayfanın bütününde yapışsın). */
.cd-page .fi-header.cl-record-header {
    display: contents;
}

/* Boşluklar referansın Agent sayfasından ölçüldü: üst çubuk → kırıntı 12, kırıntı üstünden başlığın üstüne 48 (kırıntı 20 + 4 + 16 satır aralığı + bloğun üst 8'i). */
.cd-page .fi-header.cl-record-header > .cl-breadcrumb {
    margin-bottom: -6px; /* kırıntı yazısı → başlık yazısı 21,5 (başlık bloğunun 8'lik üst boşluğu ve satır yüksekliği eklenir) */
}

/* KIRINTI BOŞLUKLARI — PORTAL GENELİ STANDART (kullanıcı kararı 2026-11-13; referansın Agent sayfası canlı ölçüldü, kırıntı ve başlık yazı kutusuna göre):
   üst çubuğun altı → kırıntı yazısı 21, kırıntı yazısı → başlık yazısı 21,5. Kırıntısı olan her sayfa (kayıt sayfaları, tam sayfa formlar, makbuz
   sayfaları) bu ikisini kullanır; masaüstü ve telefonda aynı. */
.cd-main:has(.fi-page .cl-record-header) {
    padding-top: 19.5px;
}

.cd-page .cl-record-sticky {
    position: sticky;
    top: var(--cd-topbar-h);
    z-index: 10;
    padding: 8px 0 0;
    background: var(--cd-page-bg);
}

/* Kayıt sayfası (referansın ayrıntı sayfası): kırıntı → başlık 16; başlığın altındaki bilgi satırı 13 / 17 soluk, 4 altında; sekmeler 16 altında. */
.cd-page .cl-record-header > .cl-breadcrumb {
    margin-bottom: -6px;
}

.cd-page .cl-record-header .fi-header-subheading {
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 17px !important;
    color: var(--cd-text-muted) !important;
}

.cl-record-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
}

.cl-record-head-text {
    min-width: 0;
    flex: 1 1 0;
}

/* Telefonda ⋮ başlığın altına düşmez: referansta başlıkla aynı satırda, sağ kenarda, başlığın üstüyle hizalı (28 × 28). */
@media (max-width: 767px) {
    .cl-record-head-row {
        flex-wrap: nowrap;
    }

    .cl-record-head-row > .cl-record-head-actions {
        flex: none;
        margin-top: -2px;
    }
}

/* Bilgi satırı (kullanıcı kararı 2026-11-05; referansın Agent sayfası ölçüldü: kimlik · "Last updated Oct 26" · [resim 20] Aytaç, 13 / 17
 * soluk, aralar 2 16): konum, son güncelleme, güncelleyen. Resim ile ad arası 6 (referans). */
.cd-page .cl-record-header .cl-record-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 16px;
}

.cl-record-meta .cl-person {
    gap: 6px;
}

/* Başlığın ⋮'si (HasCustomerPageMenu; referansın "More actions"ı): 28 × 28, ikon 20, asıl düğmenin 8 sağında. */
.cl-record-head-actions .cl-record-menu .fi-icon-btn,
.cl-record-head-actions .fi-dropdown-trigger > .fi-icon-btn {
    width: 28px;
    height: 28px;
    /* Filament'in ikon düğmesindeki −8 kenar boşluğu aradaki 8'i yiyordu: referans gibi asıl düğmeden 8 ayrı. */
    margin: 0 !important;
}

/* Kaydın raporları: ⋮'nin solunda yan yana oklu düğmeler (RecordReports::buttons; kullanıcı kararı 2026-11-06): yazının 4 sağında 16 px sağ ok. */
.cl-report-open-customer {
    gap: 4px;
    padding: 0 12px 0 8px;
}

.cl-report-open-customer svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-left: 0;
}

.cl-record-head-actions .cl-record-report {
    min-height: 28px;
    height: 28px;
    /* Başlıktaki asıl / ikincil düğme referansın "▷ Start session"ı gibi (canlıda ölçüldü 2026-11-06): 32 yüksek, ikon 20 düğmenin soluna 8,
       ikondan yazıya 4, yazıdan sağ kenara 12. */
    flex: none;
    gap: 4px;
    padding: 0 9px 0 5px;
}

.cl-record-head-actions .cl-record-report svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-left: 0;
}

/* Sondaki ikonlu (↗ yeni sekme) 32'lik başlık düğmesi: soldaki ikonlu düğmenin aynası — yazının soluna 12, yazıdan ikona 4, ikon 20, ikondan sağ kenara 8. */

/* Telefonda dışarıdaki başlık düğmeleri ⋮ menüsüne katlanır (kullanıcı kararı 2026-11-09; referansın Agent sayfası: dar ekranda "Start session" gizlenir, menüde belirir):
   `.cl-phone-fold` dışarıdaki düğme (yalnızca geniş ekranda), `.cl-phone-only` menüdeki karşılığı (yalnızca dar ekranda). */
.fi-dropdown-list-item.cl-phone-only { display: none; }

@media (max-width: 767px) {
    .cl-record-head-actions > .cl-phone-fold { display: none; }

    .fi-dropdown-list-item.cl-phone-only { display: flex; }
}

/* Düğmeler başlığın satırına ortalı (başlık 32; referansta "Start session" ile ⋮ başlık satırının ortasında). */
.cl-record-head-actions {
    min-height: 32px;
}

.cl-record-head-actions .fi-dropdown,
.cl-record-head-actions .fi-dropdown-trigger {
    display: flex;
    flex: 0 0 auto;
}

.cl-record-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Müşteri sayfası › Analiz: satışın altında tahsilat (kullanıcı kararı 2026-11-05: tek sayfa); iki analiz arası kartlar arası kadar (16). */
.cl-analysis-collection {
    margin-top: -16px; /* kayıt sayfasının içerik kabı (grid gap-y-8) 32 verir: -16 ile iki analiz arası net 16 (önce +16 ile 48 çıkıyordu; ölçüm 2026-11-14) */
}

/* Sekmenin araç satırı (kullanıcı kararı 2026-11-05; filament.partials.record-tab-toolbar): içeriğin kabının ilk öğesi, sağa yaslı, aralar 12;
   ilk karta uzaklık kabın aralığı (16), kendi boşluğu yok (KAYIT SAYFASI BOŞLUKLARI: 16'yı yalnızca kapsayıcının aralığı verir). */
.cl-record-tab-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cl-record-header .cl-record-tabs {
    margin-top: 16px;
    margin-bottom: 0;
}

.cl-record-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    container: cl-record / inline-size;
}

.cl-record-card {
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-record-card-title {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cl-record-facts {
    margin: 0;
}

.cl-record-facts > div {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cd-border-subtle);
}

.cl-record-facts > div:last-child {
    border-bottom: 0;
}

.cl-record-facts dt {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cl-record-facts dd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
}

@container cl-record (max-width: 520px) {
    .cl-record-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* Müşteri sayfasının sekmeleri (Aşama 4c, kullanıcı kararı 2026-11-01): Fiyatlar (MusteriFiyatlari), Satışlar (MusteriSatislari), Tahsilat
   (MusteriTahsilati) kendi sayfalarıdır, başlıkları müşteri sayfasının ortak başlığı. Fiyatlar'da tablonun üstündeki iskonto satırı 2026-11-05'te
   kalktı (kullanıcı kararı); Tahsilat'ta kartlar küçük kart standardında (112), dörtlü (kap 860'tan darsa iki, 520'den
   darsa bir sütun), değerleri tıklanır; boş durum 14/20 ikincil. */

.cl-record-empty {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

/* Müşteri sayfasının sekme şeridi dar ekranda yana kayar (Aşama 4c: altı sekme telefona sığmıyor, Kullanıcılar ve Bilgiler dışarıda
   kalıyordu): kaydırma çubuğu gizli, alt çizgi iç gölgeyle (kaydırma kabı kenarlığın üstüne taşan sekme çizgisini kırpmasın), seçili sekme
   açılışta görünür yere kaydırılır (customer-page-head). */
.cl-record-header .cl-record-tabs {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--cd-border);
}

.cl-record-header .cl-record-tabs::-webkit-scrollbar {
    display: none;
}

.cl-record-header .cl-record-tabs .cl-tab {
    margin-bottom: 0;
}

/* OLUŞTUR MENÜSÜ (Genel Bakış sayfalarının "+ Oluştur ⌄"u; kullanıcı kararı 2026-11-01, referansın Agents › Overview › Create menüsü ölçüldü):
   panel içerik kadar geniş (Filament'in sabit 224'ü değil), iç boşluk 4, öğeler panelin kenarından 4 (listenin kendi 4'ü kalkar); öğe 32 yüksek,
   6 10, ikon 20 birincil + 8 + yazı 14/20 400 (açılır menülerin genel "ikonsuz" kuralının istisnası, ⋮ menüleri gibi). */
.cd-page .fi-dropdown-panel.cl-create-menu-panel {
    width: max-content !important;
    min-width: 0 !important;
}

.cd-page .fi-dropdown-panel.cl-create-menu-panel .fi-dropdown-list-item-icon:not(.animate-spin) {
    display: block !important;
}

/* MÜŞTERİLER › CİRO HÜCRESİ (kullanıcı kararı 2026-11-01, deneme): kısa tutar (K / M) + 8 sağında son 12 ayın küçük çizgi grafiği
   (96 × 28; raporların küçük grafiğinin stili, referansın mavisi). Tutarlar sağa yaslı sabit genişlikte, grafikler alt alta hizalı. */
.cl-rev-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Fareyle gelinen çeyreğin noktası ve değer kutusu (küçük grafik kartlarındakiler): body'de tek örnek, ekrana sabit; tablonun kaydırma kabı
   kırpmaz, alttaki satırlar örtmez (cover-lab-panel.js "KÜÇÜK GRAFİK"). */
.cl-spark-dot--float,
.cl-spark-tip--float {
    position: fixed;
    z-index: 60;
}

/* Tablo başlığındaki ⓘ yazıya hizalı; başlığın hücreyi kaplayan tıklama katmanının (::after) üstünde, yoksa fare ⓘ'ye ulaşmaz.
   Satırların hücre içerikleri de katmanlı (z 1) ve sonra çizildiği için açılan kutu onların da üstünde olmalı (z 30).
   ⓘ sıralama okunun sağında: başlık yazısının kabı çözülür (display: contents), yazı, ok ve ⓘ aynı satırın
   öğeleri olur; ⓘ en sona (order 1). */
.fi-ta-header-cell-label:has(> .cl-info-tip) {
    display: contents;
}

.fi-ta-header-cell-label .cl-info-tip {
    position: relative;
    z-index: 30;
    order: 1;
    vertical-align: middle;
}

/* MÜŞTERİLER — DAR EKRANLAR (kullanıcı kararı 2026-11-01; 375 / 768 / 1024 / 1280 / 1440 ölçüldü): 1440'tan dar ekranda tablo daralır; geniş
   ekranda değişmez. Ödeme Performansı başlığı iki satır (başlık içerikten uzundu), Müşteri Grubu'nda öneri iki satır (üstte mevcut grup,
   altında "→ Bayi"), Yıllık Kâr'da soldaki vade farkı rakamı gizli (çubuk ve net kâr kalır). Ciro grafiği 1500'ün altında zaten gizli. */
@media (max-width: 1439px) {
    .cd-page .fi-ta-ctn th.fi-table-header-cell-payment [role="button"] {
        white-space: normal;
    }

    .cd-page .fi-ta-ctn th.fi-table-header-cell-payment .fi-ta-header-cell-label {
        max-width: 84px;
    }
}

/* ============================================================================
 * HATA SAYFALARI (resources/views/errors; referansın "Page not found" / erişim yok sayfası): sayfa zemininde, üstte ortada portalın logosu
 * (üstten 32), 132 altında başlık 22 / 28 500, 8 altında tek cümle 14 / 20 ikincil, 24 altında asıl "Geri dön" (32, köşe 8, 0 12, 14 / 20 500).
 * ========================================================================== */
body.cl-error-page {
    min-height: 100svh;
    margin: 0;
    background: var(--cd-page-bg);
    color: var(--cd-text-primary);
    font-family: var(--cd-font-sans);
}

.cl-error-head {
    display: flex;
    justify-content: center;
    padding-top: 32px;
}

.cl-error-logo {
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    color: var(--cd-text-primary);
    text-decoration: none;
    border-radius: 6px;
}

.cl-error-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 64px;
    text-align: center;
}

.cl-error-main h1 {
    max-width: 512px;
    margin: 132px 0 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    text-wrap: balance;
}

.cl-error-main p {
    max-width: 512px;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cl-error-back {
    display: inline-flex;
    align-items: center;
    height: var(--cd-control-h);
    margin-top: 24px;
    padding: 0 12px;
    border-radius: var(--cd-radius);
    background: var(--cd-fill-primary);
    color: var(--cd-on-primary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
}

.cl-error-back:hover {
    background: var(--cd-fill-primary-hover);
}

html:not(.cl-pointer) :is(.cl-error-back, .cl-error-logo):focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

/* HİÇ KAYIT YOK (partials/table-empty-state; referansın tablo boş durumu): tablonun yerinde çerçeveli alan (köşe 12, %10 halka, 56 24),
   48 px çizgi ikon birincil, 12 altında başlık 14 / 20 500, 4 altında cümle 13 / 17 ikincil, 12 altında ikincil küçük düğme. */
.cd-page .cl-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-inline: 12px; /* tablo kabı 12 taşar; çerçeve başlık hizasında */
    padding: 56px 24px;
    border-radius: var(--cd-radius-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border);
    text-align: center;
}

.cd-page .cl-empty-box-icon {
    width: 48px;
    height: 48px;
    color: var(--cd-text-primary);
}

.cd-page .cl-empty-box-title {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cd-page .cl-empty-box-text {
    max-width: 400px;
    margin: 0;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cd-page .cl-empty-box-btn {
    margin-top: 12px;
    text-decoration: none;
}

.cd-page .cl-empty-box-btn svg {
    width: 20px;
    height: 20px;
}

/* Sayfa başlığındaki düğmeler arası 8 (referansın başlık eylemleri; Filament'in gap-3'ü 12). */
.cd-page .fi-header .fi-ac {
    gap: 8px !important;
}

/* Tam sayfa formda açıklama → ilk alan 24 (referansın Create workspace'i; Filament'in aralığı 16). */

/* Tıklanan kart (Panel KPI, Seriler; referansın Card.Link'i): üzerine gelince hayalet dolgu, basınca hafif içe çökme. */
@media (hover: hover) {
    .cl-dash-card:has(.cl-dash-card-link):hover,
    .cl-dash-serie:hover {
        background: var(--cd-fill-ghost-hover);
    }
}

.cl-dash-card:has(.cl-dash-card-link):active,
.cl-dash-serie:active {
    scale: 0.995;
}

/* Panel'in KPI kartı (referansın Dashboard kartı): en az 136, ad 14 / 20 400 ikincil, değer 22 / 28, not 14 / 20 ikincil. */
.cd-page .cl-dash-card {
    min-height: 136px;
}

.cd-page .cl-dash-card .cl-spark-title {
    font-weight: 400;
    color: var(--cd-text-secondary);
}

.cd-page .cl-dash-card .cl-report-card-value,
.cd-page .cl-dash-card .cl-spark-value {
    line-height: 28px;
}

.cd-page .cl-dash-card .cl-spark-note {
    margin-top: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

/* Çizginin ucundaki sabit nokta (referansın LineChart'ı): 8 px, çevresinde 4 px zemin halkası. */
.cl-chart-end {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--cl-chart-color);
    box-shadow: 0 0 0 4px var(--cd-surface-panel, var(--cd-page-bg));
    pointer-events: none;
}

/* Devam eden ay (referansın gapBand'i): son ayın aralığı ince çapraz taralı, çizim alanı boyunca. */
.cl-chart-partial {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg, var(--cd-border) 0 1px, transparent 1px 6px);
    opacity: .6;
    pointer-events: none;
}

/* Referansın grafiklerinde ortalama / hedef / taban kesikli çizgileri yok: değerleri ⓘ'de. */
.cl-chart-ref,
.cl-chart-ref-label {
    display: none;
}

/* Grafikte veri yok (referansın grafik boş durumu): grafiğin yerinde ortada 32'lik %5 yuvarlak içinde 16'lık ikon, 8 altında "Veri yok" 13/17 soluk. */
.cl-chart.cl-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cl-chart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--cd-bg-neutral);
}

.cl-chart-empty-icon svg {
    width: 16px;
    height: 16px;
}

/* Dışa aktar (referansın Export'u): 28 × 28 hayalet ikon düğmesi (referansın ikon düğmeleri 28; canlıda ölçüldü 2026-11-12), adı ipucunda. */
.cd-page .cl-report-download.cd-btn--icon {
    width: 28px;
    height: 28px;
    padding: 0;
}

.cd-page .cl-report-download.cd-btn--icon .cl-report-download-icon svg {
    width: 20px;
    height: 20px;
}

/* Satır sonu (⋮) sütunu 56 (referans: 8 12 + 28 + pay). */
.cd-page .fi-ta-ctn tbody td:has(> .fi-ta-actions),
.cd-page .fi-ta-ctn tbody td.fi-ta-actions-cell {
    min-width: 56px;
}

/* ANAHTAR (referansın Switch'i): iz 36 × 20 tam yuvarlak (kapalıyken --cd-switch-track), topuz 16 beyaz, 2 içeride; açıkken vurgu dolgusu ve
   topuz 16 sağa; 120 ms. Yazı 14 / 20, anahtara 8. Kapalı denetim %40. Odak halkası yalnızca klavyede. */
.cd-page .cl-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
}

.cd-page .cl-switch.is-disabled {
    opacity: .4;
    cursor: default;
}

.cd-page .cl-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cd-page .cl-switch-track {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: 9999px;
    background: var(--cd-switch-track);
    transition: background-color var(--cd-dur-snap) var(--cd-ease-out);
}

.cd-page .cl-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform var(--cd-dur-snap) var(--cd-ease-out);
}

.cd-page .cl-switch-input:checked + .cl-switch-track {
    background: var(--cd-fill-accent);
}

.cd-page .cl-switch-input:checked + .cl-switch-track::after {
    transform: translateX(16px);
}

html:not(.cl-pointer) .cd-page .cl-switch-input:focus-visible + .cl-switch-track {
    box-shadow: var(--cd-focus-ring);
}

.cd-page .cl-perm-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

/* Hızlı bakış düğmesi panel açıkken basılı (referansın pressed hâli). */
.cd-page tr.cl-row-active .cl-quickview-btn {
    background: var(--cd-bg-pressed) !important;
    color: var(--cd-text-accent) !important;
}

.cd-topbar-btn {
    position: relative;
}

.cl-bell-count {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9999px;
    background: var(--cd-fill-danger);
    box-shadow: 0 0 0 2px var(--cd-surface-chrome);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
}

/* Kendiliğinden kaydeden formda (İskontolar, Profil) Kaydet / İptal yok (referansın ayar formları). */
.cd-page form[data-cl-autosave] .cl-autosave-actions {
    display: none !important;
}

/* Yan panel boyutlandırma tutamacı — REFERANSIN ResizeHandle'ı (Console › API keys paneli ölçüldü 2026-11-03; cover-lab-panel.js "PANEL
   BOYUTU"): panelin sol kenarının tam üstünde 12 px'lik görünmez alan (col-resize); ortada 3 × 48 tam yuvarlak hap, soluk renkte (--cd-text-muted),
   dinlenirken görünmez; üzerine gelince 200 ms bekleyip 200 ms'de belirir, çıkınca aynı beklemeyle söner; sürüklerken ikincil renkte, beklemesiz
   120 ms; klavye odağında hap panel boyu, vurgu renginde. Sürüklerken panelin geçişi kapalı (genişlik imleci geciksiz izler). Telefonda yok. */
.cl-panel-resize {
    position: fixed;
    z-index: 60;
    width: 12px;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.cl-panel-resize-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 100%;
    max-height: 48px;
    border-radius: 9999px;
    background: currentColor;
    color: var(--cd-text-muted);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, color 200ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
    pointer-events: none;
}

.cl-panel-resize[hidden] { display: none; }

@media (hover: hover) {
    .cl-panel-resize:hover .cl-panel-resize-pill { opacity: 1; }
}

html.cl-panel-resizing .cl-panel-resize-pill {
    color: var(--cd-text-secondary);
    opacity: 1;
    transition-duration: 120ms;
    transition-delay: 0ms;
}

html:not(.cl-pointer) .cl-panel-resize:focus-visible .cl-panel-resize-pill {
    max-height: none;
    background: var(--cd-text-accent);
    opacity: 1;
    transition-delay: 0ms;
}

/* Sürüklerken panel ve iskeleti geçişsiz (Filament'in "transition: all 200 ms"i genişliği geciktiriyordu). */
html.cl-panel-resizing .cd-page .fi-modal-window.cl-detail-panel,
html.cl-panel-resizing .cl-detail-skeleton {
    transition: none !important;
}

html.cl-panel-resizing,
html.cl-panel-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

@media (max-width: 767px) {
    .cl-panel-resize { display: none; }
}

/* Kimlik çipi — REFERANSIN PANELİNDEKİ KİMLİK (kullanıcı kararı 2026-11-06; ölçüldü): span role=button, 12 / 17 soluk yazı, iç boşluk 2 4 ve aynı
   kadar eksi kenar boşluğu (yerleşimi değiştirmez), köşe 6; üzerine gelince hayalet zemin (60 ms); ipucunda tam kimlik + kopyalama simgesi ve "Kopyala". */
.cd-page .cl-id-chip {
    display: inline-block;
    max-width: calc(100% + 8px);
    margin: -2px -4px -2px 4px;
    padding: 2px 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text-muted);
    cursor: default;
    transition: color 60ms cubic-bezier(0.4, 0, 0.2, 1), background-color 60ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cd-page .cl-id-chip:hover {
    background: var(--cd-fill-ghost-hover);
}

html:not(.cl-pointer) .cd-page .cl-id-chip:focus-visible {
    box-shadow: var(--cd-focus-ring);
    outline: 0;
}

.cd-page .cl-id-chip-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Kimlik çipinin ipucu: tam kimlik, 8 sağında kopyalama simgesi (14) + 4 + "Kopyala". */
.cd-tooltip-rich .cl-copy-tip,
.cd-tooltip-rich .cl-copy-tip-action {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.cd-tooltip-rich .cl-copy-tip { gap: 8px; }
.cd-tooltip-rich .cl-copy-tip-action { gap: 4px; }

/* Boş durum görseli (referansın EmptyState'i): 64 px çizgi resim. */
.cd-page .cl-empty-box-icon {
    width: 64px;
    height: 64px;
    stroke-width: 1.5;
}

/* TAM SAYFA FORM BAŞLIĞI ÜSTTE SABİT (referansın Create workspace'i: başlık bloğu üst çubuğun altına yapışık, zemin sayfa zemini): kırıntı
   üst çubuğun 8 altında; başlık bloğu kayarken üstte kalır, açıklama → ilk alan 24. */
.cd-main:has(.fi-page .cl-form-header:not(.cl-record-header)) {
    padding-top: 19.5px;
}

/* SAYFA BAŞLIĞI KAYAR; YAPIŞAN ŞERİTLER REFERANSIN KURALINA GÖRE (kullanıcı kararı 2026-11-13; referans platform.claude.com masaüstünde ve telefonda
   canlı ölçüldü; ölçüm tablosu CLAUDE.md §9.3 "KAYDIRMA DAVRANIŞI"): başlık bloğu (başlık, açıklama, sağdaki düğmeler) kırıntısız sayfalarda
   (liste, Genel Bakış, ayar, rapor, Panel) YAPIŞMAZ, sayfayla birlikte kayar. Yapışanlar yalnızca (1) kayıt sayfasının başlığı + sekmeleri
   (`.cl-record-sticky`), (2) tam sayfa formun başlığı + alt çubuğu (`.cl-form-sticky`, `.cl-form-footer`), (3) sayfa geneli süzgeç şeridi olan
   raporda yalnızca o şerit (`.cl-report-pillbar`; aşağıdaki "SÜZGEÇ ŞERİDİ YAPIŞIR" bloğu). Başlığın ilk konumu (üst çubuğun 24 altı,
   --cl-head-top) değişmez: üst boşluk başlığın kendi iç boşluğudur. */
.cd-main:has(.fi-page > section > .fi-header:not(.cl-record-header):not(.cl-form-header)) {
    padding-top: 0;
}

.cd-page .fi-header:not(.cl-record-header):not(.cl-form-header) {
    position: static;
    margin: 0 0 -8px;
    padding: var(--cl-head-top, 24px) 0 8px;
}

@media (min-width: 1280px) {
    .cd-main--dashboard {
        --cl-head-top: 48px;
    }
}

/* Liste sayfalarının alt boşluğu 32 (referans); Panel'de 0. */
@media (min-width: 768px) {
    .cd-main.cd-main--wide {
        padding-bottom: 32px;
    }

    .cd-main.cd-main--dashboard {
        padding-bottom: 0;
    }
}

/* Bildirimler › Okunmamış sekmesi: yalnızca bu açılışta okunmamış olanlar; hiçbiri yoksa not. */
.cl-notifications--unread-only .cl-notification:not(.is-unread) {
    display: none;
}

.cl-notifications--unread-only .cl-notifications:not(:has(.is-unread))::after {
    content: "Okunmamış bildirim yok.";
    display: block;
    padding: 24px 0;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
    text-align: center;
}

/* YATAY YIĞILMIŞ ÇUBUKLAR — ATLASIN TEK BİÇİMİ (Caching › By reason; 2026-11-03): 8 yüksek, düz renkli parçalar, iç köşe 2, dış uçlar 4, arası 1.
   Gelir Tablosu / Genel Gider ay çubukları, Satış ve Kârlılık, Müşteriler › Yıllık Kâr. Zarar düz kırmızı parça; işaret çizgisi, tarama ve içi
   boş çerçeve yok (atlasta yok). */
.cl-ladder-seg,
.cl-sp-seg {
    height: var(--cl-bar-thin);
    border-radius: var(--cl-bar-inner-radius);
}

.cl-ladder-seg:first-child,
.cl-sp-seg:first-child {
    border-top-left-radius: var(--cl-bar-thin-radius);
    border-bottom-left-radius: var(--cl-bar-thin-radius);
}

.cl-ladder-seg:last-of-type,
.cl-sp-seg:last-of-type {
    border-top-right-radius: var(--cl-bar-thin-radius);
    border-bottom-right-radius: var(--cl-bar-thin-radius);
}

.cl-sp-ciro-line {
    display: none;
}

.cl-sp-loss,
.cl-sp-leaf .cl-sp-loss {
    top: 0;
    bottom: 0;
    border-radius: var(--cl-bar-inner-radius) var(--cl-bar-thin-radius) var(--cl-bar-thin-radius) var(--cl-bar-inner-radius);
    background: var(--cl-chart-8);
}

.cl-sp-loss-swatch {
    background: var(--cl-chart-8);
}

/* ATLAS PARTİSİ F (2026-11-03): */
/* Renk işareti YUVARLAK (kullanıcı kararı 2026-11-03: atlasın 12 × 12 karesi, özellikle beyaz üründe, onay kutusu gibi okunuyordu): 12 px,
   Kumaş hücresinde 16 px; 1 px %20 iç çerçeve (beyaz yuvarlak açık zeminde de seçilsin). */
.cl-dot,
.cl-fabric .cl-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--cd-border-strong);
}

.cl-fabric .cl-dot {
    width: 16px !important;
    height: 16px !important;
}

/* Rol hücresi atlasın kişi hücresi: işaret → ad 6. */
.cl-role-cell {
    gap: 6px;
}

/* Uyarı işareti atlasın yalnız ikonlu durum rozeti: 20 × 20 kare, köşe 5, uyarı tonu, ikon 16. */
.cl-warn-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background-color: var(--cd-tint-yellow-bg);
    -webkit-mask: none;
    mask: none;
    position: relative;
}

.cl-warn-icon::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--cd-tint-yellow-fg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ⓘ'nin uyarı hâli yok: hep soluk ⓘ. */
.cl-info-tip--warn svg {
    color: var(--cd-text-muted) !important;
}

/* WhatsApp düğmesi atlasın ikon düğmesi: marka yeşili yok, ikon birincil, 32 × 32. */
.cl-whatsapp,
.cl-whatsapp--lg {
    color: var(--cd-text-primary) !important;
}

.cl-whatsapp--lg {
    width: 32px !important;
    height: 32px !important;
}

.cl-whatsapp--lg svg {
    width: 20px !important;
    height: 20px !important;
}

/* Seri adı atlasın renk karesi + düz ad: italik / renkli yazı yok. */
.cd-page .cl-series .fi-ta-text-item-label {
    font-style: normal;
    font-weight: 400 !important;
    color: var(--cd-text-primary) !important;
}

.cd-page .cl-series .fi-ta-text-item-label::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--cd-border-strong);
    vertical-align: -1px;
    background: var(--cl-series-color, var(--cd-text-muted));
}

.cd-page .cl-series-asp { --cl-series-color: var(--cl-series-asp); }
.cd-page .cl-series-chg { --cl-series-color: var(--cl-series-chg); }
.cd-page .cl-series-cmf { --cl-series-color: var(--cl-series-cmf); }

/* Ödeme harfleri açıklaması atlasın lejantı: rozet + 8 + açıklama 13 / 17 ikincil, aralar 16. */
.cl-pay-legend {
    gap: 8px 16px !important;
}

.cl-pay-legend__text {
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

/* ATLAS PARTİSİ G (2026-11-03): grafikler. */
/* Seri rengi değişmez: sıfırın altı ayrıca boyanmaz, eksi haftalar için ayrı kırmızı nokta yok (atlasın çizgi grafiği). */
.cl-chart-neg {
    --cl-chart-color: inherit;
}

.cl-chart-dot--danger {
    background: var(--cl-chart-color);
}

/* Taralı bant atlasın gapBand'i: 45°, aralık 8, 1,2 px ızgara renginde. */
.cl-chart-partial {
    background: repeating-linear-gradient(45deg, var(--cd-border) 0 1.2px, transparent 1.2px 8px);
    opacity: 1;
}

/* Tek büyük grafik 300 (atlas). */
.cl-chart-card--tall .cl-chart,
.cl-chart-card--tall .cl-chart-table {
    height: 300px;
}

.cl-chart-card--tall .cl-chart-frame {
    height: 276px;
}

/* Grafik kartında büyük değer yok (atlasın grafik kartı: başlık + açıklama + grafik); değer üstteki değişimli kartta. */
.cl-chart-card .cl-chart-kpi {
    display: none;
}

/* Parça çubuklarının izi (atlasın StackedMeter'i: %15 gri iz üstünde parçalar). */
.cl-aging-bar {
    border-radius: var(--cl-bar-thin-radius);
    background: color-mix(in srgb, var(--cd-text-muted) 15%, transparent);
}

/* Satırda ayrı "Hızlı bakış" düğmesi yok (atlasın satırı: yalnızca ⋮; satıra basınca panel açılır). İstisna: satırı kaydın kendi sayfasını
   açan listeler (Müşteriler; referansın Agents listesi): düğme satırın üzerine gelince ⋮'nin solunda (.cl-row-quickview--button; kullanıcı
   kararı 2026-11-03). İkinci istisna: satırın başka yan panelini açan kısayol düğmeleri (.cl-row-quickview--panels; müşteri sayfası › Fiyatlar
   › "Kâr hesabı", kullanıcı kararı 2026-11-04): masaüstünde satırın üzerine gelince, dokunmatikte sabit ikon. Üst panelin geri oku yok (Esc / × kapatır). */
.cd-page .cl-row-quickview:not(.cl-row-quickview--button, .cl-row-quickview--panels),
.cd-page .cl-stack-head [data-cl-stack-back] {
    display: none !important;
}

/* Ay okları ‹ › hapın iki yanında yok (atlasın tarih aralığı hapı). */
.cd-page .cl-month-arrow {
    display: none !important;
}

/* ATLAS PARTİSİ H (2026-11-03): paneller, listeler, kartlar. */
/* Durum sözcükleri (gecikme, ödendi, Riskli …) atlasın tonlu durum rozeti; renkli düz yazı yok. */
.cl-pay-text--yellow,
.cl-pay-text--red,
.cl-pay-text--green {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4.5px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}

.cl-pay-text--yellow { background: var(--cd-tint-yellow-bg); color: var(--cd-tint-yellow-fg) !important; }
.cl-pay-text--red { background: var(--cd-tint-red-bg); color: var(--cd-tint-red-fg) !important; }
.cl-pay-text--green { background: var(--cd-tint-green-bg); color: var(--cd-tint-green-fg) !important; }

/* NET MARJ ROZETİ (kullanıcı kararı 2026-11-06; MarginTier): kâr / zarar marjı tonlu küçük rozet, kademe rengiyle (zarar kırmızı, tabanın altı sarı,
   hedef ve üstü yeşil, arası nötr gri); satırın geri kalanı gri, fiyat beyaz. Boyut ve biçim durum rozetiyle (.cl-pay-text--*) aynı. */
.cl-margin-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4.5px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--cd-fill-ghost-hover);
    color: var(--cd-text-muted) !important;
}
.cl-margin-badge--loss { background: var(--cd-tint-red-bg); color: var(--cd-tint-red-fg) !important; }
.cl-margin-badge--below { background: var(--cd-tint-yellow-bg); color: var(--cd-tint-yellow-fg) !important; }
.cl-margin-badge--target { background: var(--cd-tint-green-bg); color: var(--cd-tint-green-fg) !important; }

/* Üst üste iki marj rozeti satırı (Fatura Kârı / Net Kâr) birbirine yapışmasın. */
.cl-code-sub:has(.cl-margin-badge) { display: block; margin-top: 4px; }
.cl-code-sub:has(.cl-margin-badge) .cl-margin-badge { margin: 0 2px; }

/* Kayıt kartındaki bilgi listesi atlasın Panel › bilgi listesi: etiket 120 + 16, 12 / 17; çizgi yok, satırlar arası 8. */
.cl-record-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl-record-facts > div {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    border-bottom: 0;
}

.cl-record-facts dt {
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

.cl-record-facts dd {
    font-size: 12px;
    line-height: 17px;
}

/* Panel › Dikkat listesi atlasın liste kartı satırı (Genel Bakış listesiyle aynı): satır 45, 8 12, çizgiler kenara 12 taşar. */
.cl-dash-list {
    padding: 16px;
}

.cl-dash-row {
    min-height: 45px;
    margin: 0 -12px;
    padding: 8px 12px;
    border-top: 1px solid var(--cd-border-subtle);
    border-bottom: 0 !important;
}

.cl-dash-row--danger,
.cl-dash-row--danger * {
    color: var(--cd-text-primary);
}

/* Kaynaklar kartları referansın Resources kartı gibi (kullanıcı kararı 2026-11-14; canlıda ölçüldü): sayfa genişliğine yayılan eşit sütunlar (üç; dar kapta
   iki / bir), aralar 16, ad 14 / 20 500, açıklama 14 / 20 ikincil, sağda ok, solda ikon karosu. Temel kurallar yukarıda (.cl-overview-resource*). */

/* Bildirim satırı atlasın liste kartı satırı: satır çizgisi %5, 12 0. */
.cl-notification {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--cd-border-subtle) !important;
}

/* Panelde kalem tablosu atlasın kart tablosu ölçüleri: başlık 32, 13 / 17 500 ikincil; hücre 8 12; çizgi %5. */
.cl-invoice-lines th {
    height: 32px;
    padding: 0 12px !important;
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 500 !important;
    color: var(--cd-text-secondary) !important;
}

.cl-invoice-lines td {
    padding: 8px 12px !important;
    border-top: 1px solid var(--cd-border-subtle) !important;
}

/* Kâr hesabı panelindeki Satış Fiyatı atlasın paneldeki sayı alanı: 28, köşe 7, 0 10, 112 geniş. */
.cl-price-check-field .fi-input-wrp,
.cl-price-check-field input {
    min-height: 28px !important;
    height: 28px;
    border-radius: 7px !important;
}

.cl-price-check-field {
    width: 112px !important;
}

/* Alana bitişik ikon düğmesi: ikon çizgisi standart 1,25 (1 px istisnası yok). */
.cl-attached-btn svg {
    stroke-width: var(--cd-icon-stroke) !important;
}

/* Tablo kartı içindeki sekmeler atlasın yazılı segmenti (28): kart başlığının altında. */
.cl-report-table-card-tabs .cl-tabs {
    display: inline-flex;
    gap: 1px;
    height: 28px;
    padding: 1px;
    border-radius: 7px;
    background: var(--cd-seg-track);
    box-shadow: none !important;
}

.cl-report-table-card-tabs .cl-tab {
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px;
    color: var(--cd-text-secondary);
}

.cl-report-table-card-tabs .cl-tab::after {
    content: none !important;
}

.cl-report-table-card-tabs .cl-tab[aria-current="page"],
.cl-report-table-card-tabs .cl-tab[aria-selected="true"],
.cl-report-table-card-tabs .cl-tab.is-active {
    background: var(--cd-seg-thumb);
    box-shadow: inset 0 0 0 1px var(--cd-seg-thumb-ring) !important;
    color: var(--cd-text-primary);
}

/* Gelir tablosu atlasın toplamlı tablosu: kâr satırının üstünde kalın çizgi yok, toplam / kâr yalnızca 500 ağırlık; oran satırı gri not. */
.cl-report-table.cl-report-table--income tbody > .cl-report-row--result > * {
    background-image: none !important;
    font-weight: 500;
}

.cl-report-table.cl-report-table--income tbody .cl-report-row--ratio > * {
    font-size: 13px !important;
    line-height: 17px !important;
    color: var(--cd-text-muted) !important;
}

/* 12 ay ↔ aylık geçişinde hareket yok (atlas). */
[class*="cl-swap-"] {
    transition: none !important;
    animation: none !important;
}

/* Fiyat dökümü atlasın bilgi listesi: çizgi yok, toplam satırı yalnızca 500; düşülen satırlar soluk değil ikincil. */
.cl-price-calc-row--sum {
    border-top: 0 !important;
}

.cl-price-calc-row.cl-price-calc-row--deduct dt,
.cl-price-calc-row.cl-price-calc-row--deduct dd {
    color: var(--cd-text-secondary);
}

/* Birleşik alan atlasın yan yana alanları: her alan kendi kutusunda (32, köşe 8, alan zemini + halka), aralar 12; tek dış kutu yok. */
.cd-page .cl-compound-box {
    gap: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cd-page .cl-compound-box::before {
    content: none !important;
}

.cd-page .cl-compound-box .cl-compound-cell {
    border-radius: var(--cd-radius) !important;
    background: var(--cd-fill-field) !important;
    box-shadow: var(--cd-field-ring) !important;
}

.cd-page .cl-compound-sep {
    display: none !important;
}

/* Form içi satır listesi atlasın kart tablosu satırı: satırlar arasında 1 px %5 çizgi, satır 8 0. */
.cd-page .cl-supplier-row {
    padding: 8px 0;
    border-top: 1px solid var(--cd-border-subtle);
}

/* İskontolar (Ticari iskontolar, Adet iskontosu): satırlar arasında çizgi yok; satırları listenin 8 aralığı ayırır. */
.cd-page .cl-discount-list .cl-supplier-row {
    padding: 0;
    border-top: 0;
}

/* Giriş kodu atlasın büyük yazı alanı: 15 / 22, eşit genişlikli rakamlar, harf aralığı yok. */
.cl-magic-code {
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
}

/* Kurtarma kodları atlasın kod yazılı rozeti: %5 zemin, köşe 5, 0 8, 12 / 15 eşit genişlikli. */
.cl-2fa-codes li,
.cl-2fa-codes code {
    padding: 0 8px;
    border-radius: 5px;
    background: var(--cd-bg-neutral);
    font-size: 12px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* ATLAS PARTİSİ J (2026-11-03): döviz kartları atlasın değişimli kartı; iki kart yan yana (dar alanda alt alta), aralar 16. */
.cl-rate-cards.cl-rate-cards--spark {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
    gap: 16px !important;
}

/* Başlıklı ikonlu seçici (Alt parça › Tür, Müşteri › Grup) atlasın kart seçeneği: seçenekler yan yana kartlar (köşe 12, iç 12, 1 px %10 halka),
   aralar 8; seçili kartın halkası vurgu renginde; kayan başparmak yok. */
.cd-page .cl-icon-seg.cl-icon-seg--labelled {
    height: auto !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
}

.cd-page .cl-icon-seg--labelled .cl-icon-seg-option {
    min-height: 44px;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px var(--cd-border);
    background: transparent !important;
}

.cd-page .cl-icon-seg--labelled .cl-icon-seg-option:has(.cl-icon-seg-input:checked) {
    box-shadow: inset 0 0 0 2px var(--cd-fill-accent);
}

.cd-page .cl-icon-seg--labelled .cl-icon-seg-thumb {
    padding: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500;
    color: var(--cd-text-primary);
}

.cd-page .cl-icon-seg--labelled .cl-seg-thumb {
    display: none !important;
}

/* ATLAS PARTİSİ K (2026-11-03): Gelir Tablosu / Genel Gider grafik modu atlasın toplamlı tablosu + parça çubuğu: satır 45, 1 px %5 çizgi,
   hücre 8 12; ay 14 / 20 ikincil; çubuk sütunu; toplam sağa yaslı 14 / 20 birincil. */
.cl-ladder-plot {
    row-gap: 0 !important;
    margin: 0 -12px;
}

.cl-ladder-plot > .cl-ladder-row > * {
    display: flex;
    align-items: center;
    min-height: 45px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-top: 1px solid var(--cd-border-subtle);
}

.cl-ladder-plot > .cl-ladder-row:first-child > * {
    border-top: 0;
}

.cl-ladder-period {
    font-size: 14px !important;
    line-height: 20px !important;
}

.cl-ladder-track {
    margin-left: 0 !important;
}

.cl-ladder-total {
    justify-content: flex-end;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--cd-text-primary) !important;
}

/* Toplam çubuğun ucunda değil, kendi sağa yaslı sütununda (atlas: çubuğun üstüne / ucuna yazı yok). */
.cl-ladder-track .cl-ladder-total {
    display: none !important;
}

.cl-ladder-plot > .cl-ladder-row > .cl-ladder-total-sizer {
    justify-content: flex-end;
    height: auto;
    padding-left: 12px;
    visibility: visible;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text-primary);
}

/* Satış ve Kârlılık çubukları: Ciro ve marj çubuğun ucunda değil, hücrenin sağındaki sütunda sağa yaslı (atlas: çubuğun üstüne yazı yok).
   Sütunun genişliğini en uzun yazı (.cl-sp-total-sizer) ayırır. Çubuğun altında %15 gri iz. */
.cl-sp-bar {
    position: relative;
}

.cl-sp-bar .cl-sp-total {
    position: absolute;
    top: 50%;
    right: 0;
    margin-left: 0;
    transform: translateY(-50%);
    text-align: right;
    font-weight: 400;
}

.cl-sp-track {
    border-radius: var(--cl-bar-thin-radius);
    background: color-mix(in srgb, var(--cd-text-muted) 15%, transparent);
    margin-right: 12px;
}

/* Bölgeli çizgi: sıfırın üstü ölçünün rengi (Net Kâr yeşil), altı Zarar kırmızısı (ölçü renkleri, kullanıcı kararı 2026-11-13; önce tek renkti). */

/* Müşteri › İskonto atlasın yan başlıklı satırları: her kalem bir satır (başlık solda 14 / 14 500, değer sağda ikincil 14 / 20), satırlar
   arası 16; "+ → =" işaretleri yok; Özel İskonto kendi alanında; "=" düğmesi satırın sağında. */
.cl-discount-form > .fi-fo-component-ctn,
.cl-discount-form > div,
.cl-discount-form .cl-discount-values {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    row-gap: 16px !important;
}

.cl-discount-form .cl-dv {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 32px;
}

.cl-discount-form .cl-dv-value {
    line-height: 20px;
    text-align: right;
    color: var(--cd-text-secondary);
}

.cl-discount-form .cl-dv-sep {
    display: none !important;
}

.cl-discount-form .cl-dv-label {
    flex: 1 1 auto;
}

.cl-discount-form .cl-dv-sub {
    margin-top: 0;
    order: 3;
}

/* ATLAS PARTİSİ L (2026-11-03): ürün ağacı kurucusu atlasın kart tablosu: kutular köşe 12, %10 halka (kesikli çizgi yok); parçalar satır
   (zemin yok, 8 12, aralarında %5 çizgi; üzerine gelince hayalet dolgu, köşe 8); büyük ok yok; miktar 28'lik küçük sayı alanı. Sürükle-bırak
   aynı. */
.cl-tree-arrow {
    visibility: hidden;
}

/* Bölüm kutusunun kendi çerçevesi yok; çerçeve kartlarda: aşağıdaki "KART YIĞINI". Parça sürüklenirken bırakılabilecek bölüm
   vurgu renginde dış çizgi alır. */
.cl-tree-box,
.cl-tree-list {
    align-self: start; /* kutu ızgara satırını doldurmaz, kartlarının boyunda kalır (düğme ve vurgu kart bloğuna göre) */
    padding: 0 44px 0 0 !important; /* sağda daraltma düğmesinin yeri (36 + 8): bütün bölümlerde kartlar aynı genişlikte */
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none;
}

/* Kart seçilince (üzerine basar basmaz; sürüklemek gerekmez) bırakılabileceği bölüm hafifçe nabız gibi vurgulanır: vurgu renginde
   dış çizgi ve zemin yavaşça belirip söner. Vurgu yalnızca KARTLARIN alanını kaplar, sağdaki daraltma düğmesinin yerini kapsamaz (32 sağdan, 4 dışa taşar);
   kartın üstüne gelince (is-over) sabit çizgi. */
@keyframes cl-tree-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-fill-accent) 22%, transparent);
        background-color: color-mix(in srgb, var(--cd-fill-accent) 2%, transparent);
    }

    50% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-fill-accent) 75%, transparent);
        background-color: color-mix(in srgb, var(--cd-fill-accent) 9%, transparent);
    }
}

.cl-tree-box::after,
.cl-tree-list::after {
    content: "";
    position: absolute;
    top: var(--cl-ring-top, -4px); /* kart bloğunun görünen üst kenarının 4 üstü (Alpine ringTop; yığında arkadaki kartların kenarı hesaba katılır) */
    bottom: -4px;
    left: -4px;
    right: 40px; /* kart bloğunun 4 dışı; sağdaki daraltma düğmesinin yerini (44) kapsamaz */
    border-radius: 16px; /* kartın köşesi 12 + boşluk 4: halka kartlarla eş merkezli */
    pointer-events: none;
    opacity: 0;
    z-index: 30; /* yığındaki kartların (z-index 1–3) ve açılırken inen kartların (en çok 20) ÜSTÜNDE: vurgu zemini kartları da boyar, yığıktaki bölüm de komple boyanır */
}

.cl-tree-box.is-target::after,
.cl-tree-list.is-target::after {
    opacity: 1;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-fill-accent) 22%, transparent);
    animation: cl-tree-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cl-tree-box.is-target::after,
    .cl-tree-list.is-target::after {
        animation: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--cd-fill-accent) 50%, transparent);
    }
}

/* Ağaçta parça var ama ana parça yok: kartların hepsini saran çerçeve; ağaç boşken not kartını saran aynı çerçeve (kullanıcı kararı 2026-11-08; renk uyarı çerçevesi, ölçü vurgu
   çerçevesi: içerikten 4 büyük) ; ana parça eksikliğinin nedeni Kaydet'in ipucunda. */
.cl-tree-box.is-missing::after,
.cl-tree-box.is-empty::after {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--cd-border-warning); /* boş ağaçtaki çerçeveyle aynı renk ve ölçü: kartların (ya da boş not kartının) 4 dışı */
}

.cl-tree-box.is-over::after,
.cl-tree-list.is-over::after {
    opacity: 1;
    animation: none;
    background: transparent; /* sürüklerken bırakılacak bölümde yalnızca dış çizgi sabitlenir; kartların ve zeminin rengi değişmez */
    box-shadow: 0 0 0 2px var(--cd-fill-accent);
}

.cl-tree-box,
.cl-tree-list {
    gap: 0 !important;
}

.cl-tree-card {
    padding: 8px 12px !important;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: 0 -1px 0 var(--cd-border-subtle);
}

.cl-tree-card:first-child {
    box-shadow: none;
}

.cl-tree-card:hover {
    background: var(--cd-fill-ghost-hover) !important;
}

/* KART YIĞINI (kullanıcı kararı 2026-11-08; Atlas "Durumlar" › Bildirim yığını): ağaç kurucusunda her parça atlasın nötr Bildirim kartı gibi: popover zemini, köşe
   12, 1 px halka + hafif gölge, iç 12 16. Bir bölümde birden fazla kart varsa kartlar ARKA ARKAYA dizilir (.is-stacked): öndeki tam, arkadakiler her sırada 14 px
   yukarıda ve %4 küçük, yalnızca üst kenarları görünür (en çok iki kart arkada; fazlası gizli); bölüm başlığının sağındaki düğme kartları alt alta açar
   (.cl-tree-stack-btn; tercih tarayıcıda). Arkadaki kartlar tıklanmaz. */
.cl-tree-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: calc(var(--cl-stack-n, 0) * 14px); /* öndeki kartların hizası: satırdaki iki bölümden yığını yüksek olanın arkadaki kenarları kadar (rowN) */
}

/* Açılan liste en çok 3,5 kart gösterir (kullanıcı kararı 2026-11-08; önce kırpılmıyordu): yarım kart kaydırılabildiğini söyler, çubuk görünmez. Kart yüksekliği
   iç 12 + kod / ad 37 + 6 + alt satır 32 + iç 12 = 99. */
.cl-tree-cards:not(.is-stacked) {
    max-height: calc(3.5 * 99px + 3 * 8px + var(--cl-stack-n, 0) * 14px);
    padding-bottom: 28px; /* kaydırma sonunda son kart alttaki solmanın (28) altında kalmaz */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Kartlar AÇIKKEN liste ve vurgu / uyarı çerçevesi her zaman en büyük yükseklikte (3,5 kart), kaç kart olursa olsun: çerçeve kart sayısına göre oynamaz. */
.cl-tree-cards.is-open {
    min-height: calc(3.5 * 99px + 3 * 8px + var(--cl-stack-n, 0) * 14px);
}

.cl-tree-cards:not(.is-stacked)::-webkit-scrollbar {
    display: none;
}

/* Kırpılan kenarlar yumuşakça solar: tablonun yatay kaydırma solması (.scroll-fade-x, yukarıda) dikeyde, kart gruplarının üstünde ve altında:
   kaydırılabilen kenar 28 px'te solar (üstteki kaydırınca belirir, alttaki sona gelince kaybolur). Kaydırmaya bağlı CSS animasyonu; desteklemeyen tarayıcıda solma
   olmaz, kaydırma çalışır. */
@property --cl-fade-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cl-fade-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes cl-fade-top { 0% { --cl-fade-top: 0px; } 100% { --cl-fade-top: 28px; } }
@keyframes cl-fade-bottom { 0% { --cl-fade-bottom: 28px; } 100% { --cl-fade-bottom: 0px; } }

.cl-tree-cards:not(.is-stacked) {
    /* Solma (gradyan) SABİT: üstte ve altta her zaman 28 px, kaydırmaya bağlı daralıp açılmaz. Üstte ilk kart hizalama boşluğunun (28) altında başlar,
       altta iç boşluk (28) son kartı solmanın üstünde tutar; vurgu / uyarı çerçevesi bu bölgenin tamamını (üst ve alt solmanın dış kenarları) 4 boşlukla sarar. */
    --cl-fade-top: 28px;
    --cl-fade-bottom: 28px;
    mask-image: linear-gradient(to bottom,
        transparent,
        #0000000d calc(var(--cl-fade-top) * .15), #00000026 calc(var(--cl-fade-top) * .3), #0000004d calc(var(--cl-fade-top) * .45),
        #00000080 calc(var(--cl-fade-top) * .6), #000000b3 calc(var(--cl-fade-top) * .75), #000000d9 calc(var(--cl-fade-top) * .87),
        #000 var(--cl-fade-top),
        #000 calc(100% - var(--cl-fade-bottom)),
        #000000d9 calc(100% - var(--cl-fade-bottom) * .87), #000000b3 calc(100% - var(--cl-fade-bottom) * .75), #00000080 calc(100% - var(--cl-fade-bottom) * .6),
        #0000004d calc(100% - var(--cl-fade-bottom) * .45), #00000026 calc(100% - var(--cl-fade-bottom) * .3), #0000000d calc(100% - var(--cl-fade-bottom) * .15),
        transparent);
}

.cl-tree-card,
.cl-tree-card:first-child {
    padding: 12px 16px !important;
    border-radius: 12px !important;
    background: var(--cd-surface-popover) !important;
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-tooltip) !important;
}

.cl-tree-card:hover {
    background: var(--cd-surface-popover) linear-gradient(var(--cd-fill-ghost-hover), var(--cd-fill-ghost-hover)) !important;
}

.cl-tree-cards.is-stacked {
    display: grid;
}

.cl-tree-cards.is-stacked > .cl-tree-card {
    grid-area: 1 / 1;
    align-self: end;
    transform-origin: 50% 100%;
    /* Yığına toplanırken kartlar kendi yerlerinden yığının konumuna JS'te (toggleStack, Element.animate) yürütülür: CSS geçişi (transition) yalnızca transform'u
       süzer, kartların yerleşim konumundaki atlamayı süzmez ve animasyonu ezer; bu yüzden burada geçiş yok (kullanıcı kararı 2026-11-08, kare kare incelendi). */
}

.cl-tree-cards.is-stacked > .cl-tree-card:nth-of-type(1) { z-index: 3; }

.cl-tree-cards.is-stacked > .cl-tree-card:nth-of-type(2) { z-index: 2; transform: translateY(-14px) scale(0.96); }

.cl-tree-cards.is-stacked > .cl-tree-card:nth-of-type(3) { z-index: 1; transform: translateY(-28px) scale(0.92); }

.cl-tree-cards.is-stacked > .cl-tree-card:nth-of-type(n + 4) { z-index: 0; transform: translateY(-28px) scale(0.92); opacity: 0; }

.cl-tree-cards.is-stacked > .cl-tree-card:nth-of-type(n + 2) {
    pointer-events: none;
}

.cl-tree-cards.is-stacked > .cl-tree-card:nth-of-type(n + 2) > * {
    visibility: hidden;
    opacity: 0;
    transition: opacity 80ms linear, visibility 0s linear 200ms; /* yığına toplanırken arkadaki kartların yazısı hemen söner (boş kabuklar yürür), gizleme yürüyüş (200 ms) bitince */
}

/* Yığındaki öndeki kart tutulup sürüklenirken (kaynak kart gizlenir) arkasındaki kartın içeriği, kartın küçültülmüş oranında (yığındaki ölçek) görünür. */
.cl-tree-cards.is-stacked.is-dragging-front > .cl-tree-card:nth-of-type(2) > * {
    visibility: visible;
    opacity: 1;
    transition: none;
}

/* Açılırken öndeki kart (listenin ilk kartı) HER ZAMAN en üstte ve yerinde kalır; diğer kartlar onun ALTINDAN çıkıp sırayla aşağı
   dökülerek kendi yerlerine dizilir: her kart öndeki kartın yerinden başlar (kendi sırası kadar yukarıdan), öndeki kartın arkasında kalarak (z-index sıraya göre
   azalır) iner; her sırada 30 ms gecikme (en çok 8 sıra), 260 ms. Yığına dizilirken geçiş (transition) çalışır. */
@keyframes cl-tree-fan {
    /* Başlangıç = kartın yığındaki görünümü (arkadaki kenarlar yerinde kalır, kaybolup yeniden belirmez): her kart öndeki kartın yerine çekilir (kendi sırası kadar yukarıdan),
       yığındaki kaydırması (--k × 14) ve küçülmesi (--k × %4) uygulanır; --o: yığında görünür mü (ilk üç kart 1, sonrakiler 0). */
    from {
        z-index: calc(20 - var(--i, 0));
        opacity: var(--o, 0);
        transform: translateY(calc(var(--i, 0) * (-100% - 8px) - var(--k, 2) * 14px)) scale(calc(1 - var(--k, 2) * 0.04));
    }

    35% {
        opacity: 1;
    }

    to {
        z-index: calc(20 - var(--i, 0));
        opacity: 1;
        transform: none;
    }
}

.cl-tree-cards:not(.is-stacked) > .cl-tree-card {
    --i: 8;
    --k: 2;
    --o: 0;
    transform-origin: 50% 100%; /* yığındakiyle aynı: küçülme kartın alt ortasından */
}

.cl-tree-cards.is-fanning:not(.is-stacked) > .cl-tree-card {
    animation: cl-tree-fan 260ms cubic-bezier(0.165, 0.84, 0.44, 1) calc(var(--i) * 30ms) backwards;
}

.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(1) { --i: 0; --k: 0; --o: 1; z-index: 25; }

.cl-tree-cards.is-fanning:not(.is-stacked) > .cl-tree-card:nth-of-type(1) { animation: none; } /* öndeki kart açılırken diğerlerinin (en çok 19) ÜSTÜNDE: arkadaki kartların yazıları içinden görünmez */
.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(2) { --i: 1; --k: 1; --o: 1; }
.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(3) { --i: 2; --k: 2; --o: 1; }
.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(4) { --i: 3; }
.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(5) { --i: 4; }
.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(6) { --i: 5; }
.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(7) { --i: 6; }
.cl-tree-cards:not(.is-stacked) > .cl-tree-card:nth-of-type(8) { --i: 7; }

/* Açılırken arkadaki kartların yazısı kartlar öndeki kartın altından çıkana kadar (animasyonun ilk yarısı) görünmez: yığındaki kartın kenarında yazı parlamaz. */
@keyframes cl-tree-fan-content {
    from, 55% { opacity: 0; }
    to { opacity: 1; }
}

.cl-tree-cards.is-fanning:not(.is-stacked) > .cl-tree-card:nth-of-type(n + 2) > * {
    animation: cl-tree-fan-content 260ms linear calc(var(--i, 0) * 30ms) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .cl-tree-cards.is-fanning:not(.is-stacked) > .cl-tree-card:nth-of-type(n + 2) > * { animation: none; }

    .cl-tree-cards.is-fanning:not(.is-stacked) > .cl-tree-card { animation: none; }

    .cl-tree-cards.is-stacked > .cl-tree-card:nth-of-type(n + 2) > * { transition: none; }
}

/* Daraltma düğmesi kart bloğunun SAĞ YANINDA, yazısız: büyük (36) zeminsiz ikon düğmesi (üzerine gelince hayalet zemin), köşe 10, öndeki kartın ortasında SABİT; bölüm
   kutusunun sağındaki ayrılmış 44'lük yerde durur, vurgu (nabız) onu kapsamaz. */
.cl-tree-stack-btn {
    position: absolute;
    top: calc(var(--cl-stack-n, 0) * 14px + 47.5px); /* öndeki kartın (95) ortası: yığın açılıp kapanınca düğme yerinden oynamaz */
    right: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    transform: translateY(-50%);
}

.cl-tree-stack-btn svg {
    width: 20px;
    height: 20px;
}

.cl-tree-qty {
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 7px !important;
    text-align: center; /* miktar kutusunda yazı (ve yer tutucu) kutunun ortasında */
}

/* Rol izin bölümleri atlasın ayar satırları: her sayfa açık (katlanır bölüm yok), ok ve kapalı özet yok. */
.cl-modal-role .cl-perm-chevron,
.cl-perm-summary {
    display: none !important;
}

.cl-modal-role .cl-perm-page > .fi-section-content-ctn {
    grid-template-rows: 1fr !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cl-modal-role .cl-perm-page > .fi-section-content-ctn > * {
    min-height: 0;
    overflow: visible !important;
}

.cl-modal-role .cl-perm-page > .fi-section-header {
    cursor: default !important;
}

.cl-modal-role .cl-perm-page:not([data-open]) > .fi-section-content-ctn {
    grid-template-rows: 1fr !important;
    visibility: visible !important;
}

.cl-modal-role .cl-perm-page:not([data-open]) > .fi-section-content-ctn > .fi-section-content {
    overflow: visible !important;
    transform: none !important;
}

/* 1440'tan dar ekranda soldaki rakam her satırda gizli (parça çubukta görünür); sağdaki net sonuç kalır. */

/* RENK KARARI 2026-11-03 — ÇUBUK PARÇALARI (tek yer App\Support\ReportColors):
   KALEMLER (kimlik): Maliyet mavi (1), Genel Gider turuncu (2, tonları 2b / 2c), Vade Farkı / Finansman sarı (4), Net Kâr yeşil (3),
   Amortisman pembe (5), Vergi mor (7), Zarar kırmızı (8), kalan / bilinmeyen gri (rest; atlasın chart-reference'ı).
   DURUM (risk; kalem renkleriyle karışmaz): vadesi gelmemiş gri, gecikme arttıkça late1 sarı → late2 turuncu-kırmızı → late3 kırmızı →
   late4 koyu kırmızı (referansın durum paleti: warning, serious, critical). */
:root {
    /* ÖLÇÜ RENKLERİ (kullanıcı kararı 2026-11-13; renk seçici docs/renk-secenekleri; tek yer App\Support\ReportColors). Açık mod. */
    --cl-chart-rest: #6B6A64;
    --cl-chart-ciro: #6B6A64;
    --cl-chart-netkar: #09704D;
    --cl-chart-brut: #44B98A;
    --cl-chart-fatura: #1E9DB1;
    --cl-chart-4b: #F3C24F;
    /* Gecikme: sarıdan koyu kırmızıya tek ramp (başka renge kayma yok). */
    --cl-chart-late1: #E39A00;
    --cl-chart-late2: #E06A0C;
    --cl-chart-late3: #CC3A25;
    --cl-chart-late4: #8A1C1C;
    /* Cover Lab (Asepro + Chemguard + Comfort) kurumsal mor: logodaki C (#3E00AA); koyu modda aynı morun parlak tonu (#8257FF, "Core" yazısı). */
    --cl-chart-coverlab: #3E00AA;
}

:root.dark {
    --cl-chart-rest: #727068;
    --cl-chart-ciro: #C3C2B7;
    --cl-chart-netkar: #0A6445;
    --cl-chart-brut: #5CC59A;
    --cl-chart-fatura: #2FB5C9;
    --cl-chart-4b: #E3B34A;
    --cl-chart-late1: #F5AE1E;
    --cl-chart-late2: #EE7A1F;
    --cl-chart-late3: #DE4630;
    --cl-chart-late4: #9E2222;
    --cl-chart-coverlab: #8257FF;
}

/* Alacak yaşlandırması: vadesi gelmemiş gri, 1–30 sarı, 31–60 turuncu-kırmızı, 61–90 kırmızı, 90+ koyu kırmızı.
   Borç vade takvimi: vadeye 31 günden çok kalan gri, 8–30 sarı, 0–7 turuncu-kırmızı, vadesi geçmiş kırmızı. */
.cl-aging-seg--current, .cl-aging-seg--m2p, .cl-aging-seg--m2 { --cl-aging-color: var(--cl-chart-gray); }
.cl-aging-seg--d30, .cl-aging-seg--m1 { --cl-aging-color: var(--cl-chart-late1); }
.cl-aging-seg--d60, .cl-aging-seg--w1 { --cl-aging-color: var(--cl-chart-late2); }
.cl-aging-seg--d90, .cl-aging-seg--late { --cl-aging-color: var(--cl-chart-late3); }
.cl-aging-seg--d90p { --cl-aging-color: var(--cl-chart-late4); }

/* Tablo başlığındaki ⓘ hep görünür, referansın rengiyle (Caching › Write amort.: soluk gri, üzerine gelince ikincil; 2026-11-03). */
.fi-ta-header-cell .cl-info-tip-btn {
    color: var(--cd-text-muted);
}

.fi-ta-header-cell .cl-info-tip-btn:hover,
.fi-ta-header-cell .cl-info-tip-btn[aria-expanded="true"] {
    color: var(--cd-text-secondary);
}

/* Başlıktaki ⓘ yazının hemen sağında, sıralama okunun önünde (referans: "Write amort. ⓘ"; kullanıcı kararı 2026-11-03, önce okun sağındaydı
   ve sıralanmamış sütunda okun saydam yeri ⓘ'yi yazıdan uzaklaştırıyordu). */
.fi-ta-header-cell [role="button"]:has(.cl-info-tip) > .fi-ta-header-cell-sort-icon {
    order: 2;
}

/* Başlıkta yazı → ⓘ çizimi 8 (referans): başlığın flex aralığı (4) eklendiği için kendi boşluğu 4. */
.fi-ta-header-cell-label .cl-info-tip {
    margin-left: 4px;
}

/* Üç durumlu sıralamada üçüncü basıştan sonra ok o başlıkta hemen kaybolur; fare başlıktan çıkıp yeniden gelince soluk görünür
   (referansın liste tablosu; cover-lab-panel.js sortBy, .cl-sort-cleared). */
.cd-page .fi-ta-ctn thead th.cl-sort-cleared svg:not(.cl-info-tip svg) {
    color: transparent !important;
}

/* Müşteriler › Müşteri hücresi: adın yanında grup önerisi rozeti (kullanıcı kararı 2026-11-03; atlasın tonlu rozeti "↑ Ana Bayi"):
   yükselme vurgu, düşme uyarı tonunda; tablodaki rozet ölçüsü (18 / 0 6 / köşe 4,5 / 11/14). */
.cl-name-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* İskonto seçici menüsünde bölüm başlığı (kullanıcı kararı 2026-11-03; referansın menü bölüm başlığı): 12/17 soluk, 8 12 4; ilkinde üst 4. */
.cl-filter-section {
    padding: 8px 12px 4px;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
    cursor: default;
    user-select: none;
}

.cl-filter-section:first-child {
    padding-top: 4px;
}

/* ÖDEME DURUMU ROZETLERİ İKONLU (kullanıcı kararı 2026-11-03; atlasın durum rozeti: "Active" circle-check, "Expired" alert-circle): Zamanında
   circle-check, Geç clock (saat), Riskli alert-circle (Tabler). İkon başta, yazıya 4, 16 (atlasın 20'lik rozeti; tablolarda da). Yalnızca durum
   rozetinde (.cl-grade-badge); gecikme sözcükleri ("29 gün gecikti") ikonsuz. */
.cl-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cl-grade-badge::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: -3px;
    background: currentColor;
    -webkit-mask: var(--cl-grade-icon) center / contain no-repeat;
    mask: var(--cl-grade-icon) center / contain no-repeat;
}

.cl-grade-badge--green { --cl-grade-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200%22/%3E%3Cpath%20d%3D%22M9%2012l2%202l4%20-4%22/%3E%3C/svg%3E"); }
.cl-grade-badge--yellow { --cl-grade-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200%22/%3E%3Cpath%20d%3D%22M12%207v5l3%203%22/%3E%3C/svg%3E"); }
.cl-grade-badge--red { --cl-grade-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200%22/%3E%3Cpath%20d%3D%22M12%208v4%22/%3E%3Cpath%20d%3D%22M12%2016h.01%22/%3E%3C/svg%3E"); }

/* MÜŞTERİ ROZETİ: GRUP + ÖDEME DURUMU TEK ROZETTE: gri grup rozetinin sağ ucunda rozet yüksekliğinde kare parça;
   zemini ödeme durumunun tonu, üstünde yalnızca ikon (Zamanında ✓, Geç saat, Riskli ünlem; .cl-grade-badge--*'nın ikonu), ipucu açıklaması. */
.cl-status-badge--with-pay {
    padding: 0;
    gap: 0;
    background: none !important;
}

/* Gri zemin yalnızca grup adının arkasında (renkli kare yarı saydam tonlu: altında gri kalınca griye çalıyordu). */
.cl-cust-group {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 6px 0 8px;
    border-radius: 5px 0 0 5px;
    background: var(--cd-bg-neutral); /* grup rozetinin zemini */
}

/* Liste Fiyatları › Toplu Güncelle (kullanıcı kararları 2026-11-05; PricingBulkAction): pencere form düzeninde, standart genişlikte (520):
   solda bölümün adı ve açıklaması (FormSection), sağda değer kutusu (96) ve 8 sağında o satırın "Uygula"sı (ikincil, 32); kutu ve düğme SAĞA
   YASLI, Uygula'ların sağ kenarı Kapat'ınkiyle aynı sütunda (sağda boşluk yok). İstek sürerken düğmenin yazısı saklanır, ortada 16 px dönen
   halka (referansın busy Button'u). */
.cd-page .cl-bulk-apply-row > .fi-fo-component-ctn,
.cd-page .cl-bulk-apply-row > div > .fi-fo-component-ctn {
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-end;
}

.cd-page .cl-bulk-apply-row .fi-fo-component-ctn > :has(> .cl-bulk-apply),
.cd-page .cl-bulk-apply-row .fi-fo-component-ctn > :has(.cl-bulk-apply) {
    flex: none !important;
    width: auto !important;
}

.cd-page .fi-modal-window.cl-bulk-pricing .fi-section.cl-form-aside > .fi-section-content-ctn {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-bulk-apply {
    position: relative;
    flex: none;
}

.cl-bulk-apply[data-busy] {
    color: transparent !important;
}

.cl-bulk-apply[data-busy]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    box-sizing: border-box;
    border: 1.5px solid var(--cd-text-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: cl-bulk-apply-spin 800ms linear infinite;
}

@keyframes cl-bulk-apply-spin {
    to { transform: rotate(360deg); }
}

/* İskontolar › Ticari iskontolar: grup adı kilitli, düz yazı (14/20 birincil), yanında 8 aralıkla soluk müşteri
   sayısı (13/17); satır oran kutusunun yüksekliğinde (32), dikeyde ortalı. Placeholder'ın kendi başlık / boşlukları kalkar. */
.cl-discount-label {
    display: flex;
    align-items: center;
    min-height: var(--cd-field-h, 32px);
}

.cl-discount-label .cl-discount-name {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
}

.cl-discount-label .cl-discount-count {
    margin-left: 8px;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* Net iskonto: grup ile ödeme ikonu arasında, mor tonlu parça (ödeme durumu yeşil / sarı / kırmızı, grup önerisi
   mavi; mor başka bir anlam taşımıyor), rakamlar sabit genişlikli; ödeme ikonu yoksa sağ köşeleri rozetin yarıçapında. */
.cl-cust-disc {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 6px;
    background: var(--cd-tint-violet-bg);
    color: var(--cd-tint-violet-fg);
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.cl-cust-disc:last-child {
    padding-right: 8px;
    border-radius: 0 5px 5px 0;
}

/* Renkli kare: sağ köşeleri rozetin köşe yarıçapında (5), ikon 16. */
.cl-cust-pay {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    flex: none;
    border-radius: 0 5px 5px 0;
    cursor: default;
}

.cl-cust-pay::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--cl-grade-icon) center / contain no-repeat;
    mask: var(--cl-grade-icon) center / contain no-repeat;
}

.cl-cust-pay.cl-grade-badge--green { background: var(--cd-tint-green-bg); color: var(--cd-tint-green-fg); }
.cl-cust-pay.cl-grade-badge--yellow { background: var(--cd-tint-yellow-bg); color: var(--cd-tint-yellow-fg); }
.cl-cust-pay.cl-grade-badge--red { background: var(--cd-tint-red-bg); color: var(--cd-tint-red-fg); }

/* Tablolarda da iç boşluk grup adının parçasında. */
.cd-page .fi-ta-ctn tbody .cl-status-badge--with-pay,
.cl-report-table tbody .cl-status-badge--with-pay {
    padding: 0;
}

/* Müşteri sayfası › Fiyatlar › Adet · 12 ay: kısa sayı (18K) bir boy büyük, 16 / 20. */
.cl-qty-big {
    font-size: 16px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* MÜŞTERİ ADI İLE ROZETİ ARASINDA HER ZAMAN 8 — PORTAL GENELİ: ad nerede yazılırsa yazılsın (tablo,
   yan panelin bilgi satırı, fatura paneli › Cari, rapor satırı, başlık) rozet adın 8 sağında; aralığı kendi gap'i veren kaplarda (flex gap)
   bu kural geçersiz kılınır, iki kat olmaz (test BadgeSpacingTest). */
.cl-dim-name > .cl-cust-badges,
:is(.cl-short-name, .cl-full-name, .cl-qv-link, .cl-truncate, .cl-name) + .cl-cust-badges {
    margin-left: 8px;
}

/* Yan panelin başlığındaki yazılı düğmeler ("Aç", "PDF", "KolayBi'de aç"; referansın Open / Download / Update'i, xs 24; kullanıcı kararı
   2026-11-03): ⋮'nin solunda, sağa yaslı, aralar 8. */
.cl-detail-title .cl-detail-open {
    flex: none;
    margin-left: auto;
}

/* Yazının 4 sağında 16 px ok (referansın Open'ı: ikon yazıdan sonra, sağ boşluk 4). */
.cl-detail-title .cl-detail-open {
    gap: 4px;
    padding-right: 4px;
}

.cl-detail-title .cl-detail-open svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-left: 0; /* oklu düğmede ok ile yazı arası referans gibi 4: yazı → ok kutusu (ölçüldü 2026-11-06); .cd-btn--sm svg'nin −4'ü ok için geçerli değil */
}

.cl-detail-title .cl-detail-open ~ * {
    margin-left: 0 !important;
}

/* Oksuz yazılı düğme ("Düzenle"; kullanıcı kararı 2026-11-06): sol ve sağ iç boşluk eşit (yukarıdaki sağ 4, ok içindi). */
.cl-detail-title .cl-detail-open:not(:has(svg)) {
    padding-left: 8px;
    padding-right: 8px;
}

/* Panelde e-postanın yanındaki "Davet gönder": satırın sağ ucunda, yazının solunda 16 px kağıt uçak ikonu. */
.cl-detail-row dd:has(> .cl-panel-invite) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-detail-row dd > .cl-panel-invite {
    flex: none;
    margin-left: auto;
    gap: 4px;
    padding: 0 8px 0 4px; /* baştaki ikonlu küçük düğme: ikon solda, yazıya 4 */
}

.cl-detail-row dd > .cl-panel-invite svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-left: 0;
}

/* Bölüm başlığı + sağında bağlantı (referansın "Transcript · View session"i; 12 / 17). */
.cl-quickview-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.cl-quickview-section-head > a {
    font-size: 12px;
    line-height: 17px;
}

/* Müşteri hızlı bakışı › Kullanıcılar bölümü: kişi başına bir satır, ad 12 / 17 ve 16 yanında iletişim; satırlar arası 8. */
.cl-quickview-users {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 17px;
}

/* KIRMIZI YALNIZCA EN SONDAKİ EN AĞIR İŞ (site haritası, kullanıcı kararı 2026-11-05; referansın ⋮ menüsü: Delete kırmızı, Delete varken
   Archive normal; Delete olmayan Agent sayfasında Archive kırmızı): Sil her zaman kırmızı (yazı ve ikon, koyuda #EC7E7E tonu
   --cd-text-danger); Arşivle yalnızca menüde Sil yokken (müşteri, tedarikçi). Arşivden çıkar normal. */
.cd-page .fi-dropdown-list-item:is([wire\:click*="'delete'"], [data-action="delete"]),
.cd-page .fi-dropdown-list-item:is([wire\:click*="'delete'"], [data-action="delete"]) .fi-dropdown-list-item-icon,
.cd-page .fi-dropdown-list:not(:has(.fi-dropdown-list-item:is([wire\:click*="'delete'"], [data-action="delete"]))) .fi-dropdown-list-item:is([wire\:click*="'archive'"], [data-action="archive"], [wire\:click*="'customerArchive'"], [wire\:click*="'supplierArchive'"]),
.cd-page .fi-dropdown-list:not(:has(.fi-dropdown-list-item:is([wire\:click*="'delete'"], [data-action="delete"]))) .fi-dropdown-list-item:is([wire\:click*="'archive'"], [data-action="archive"], [wire\:click*="'customerArchive'"], [wire\:click*="'supplierArchive'"]) .fi-dropdown-list-item-icon {
    color: var(--cd-text-danger) !important;
}

/* Telefonda (< 600) panel ekran genişliğinde olduğu için alttaki katın 14 px sola kayması ekranın dışında kalıyordu: kat kaymaz, üstteki panel
   14 px daha dar açılır, alttakinin sol kenarı (karartmalı) görünür kalır (referansın "alttaki katın kenarı görünür" kuralı; kullanıcı kararı
   2026-11-03). */
@media (max-width: 599px) {
    .cd-page .fi-modal-window.cl-detail-panel.cl-stack-under {
        transform: none !important;
    }

    .cd-page .fi-modal-window.cl-detail-panel.cl-stack-panel {
        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
    }
}

/* Ürün paneli › Alımlar: son 12 ayın adedi Atlas'ın küçük grafikli kartında; altında "Son alışlar" listesi. */
.cl-quickview-spark {
    margin-bottom: 20px;
}

.cl-quickview-subheading {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

/* Kartın tamamı bağlantı olan küçük grafikli kartta (Panel › döviz kurları) ⓘ bağlantı katmanının üstünde, üzerine gelinebilir (2026-11-03). */
.cl-dash-card .cl-spark-title .cl-info-tip {
    position: relative;
    z-index: 1;
}

/* Küçük kartın notu tek satır, parçalar "·" ile; sığmazsa alt satıra sarar, kesilmez. */
.cl-spark-note.cl-spark-note--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* KAYIT SAYFASI BOŞLUKLARI — PORTAL GENELİ: sekmelerin altı → ilk kart 16, kartlar arası (yan yana ve alt alta)
   her yerde 16. Rapor sayfasının üst boşluğu (sayfa açıklaması → ilk kart 28) sekmeli kayıt sayfasında yok; bloğun son kartının alt boşluğu,
   kapsayıcının gap'iyle iki kat olmaz. Kontrol: test RecordSpacingTest, kontrol listesi docs/review-checklist.md. */
.fi-page:has(.cl-record-tabs) .cl-report {
    padding-top: 0;
    gap: 16px;
}

/* Kartlar arası 16'yı YALNIZCA kapsayıcının aralığı (gap) verir (kullanıcı bildirimi 2026-11-04: Tahsilat sekmesinde kartların kendi üst / alt
   boşlukları aralığa eklenip 32 ve 48 oluyordu): sekmeli kayıt sayfasında kapsayıcının doğrudan çocuklarının kendi üst / alt boşluğu yok. Yeni
   kart da bu sayede kendiliğinden 16 aralıkla gelir. */
.fi-page:has(.cl-record-tabs) .cl-report > *,
.fi-page:has(.cl-record-tabs) .cl-record-body > * {
    margin-top: 0;
    margin-bottom: 0;
}

.fi-page:has(.cl-record-tabs) .cl-report > :last-child,
.fi-page:has(.cl-record-tabs) .cl-report-panel > :last-child {
    margin-bottom: 0;
}

.fi-page:has(.cl-record-tabs) .cl-report-panel > .cl-report-table-card + .cl-report-table-card {
    margin-top: 40px;
}

/* ZARARIN GÖSTERİMİ — PORTAL STANDARDI: TARALI KIRMIZI (kullanıcı kararı 2026-11-03; atlas partisindeki "zarar düz kırmızı" kuralının yerine):
   135° çizgiler, kırmızı 2 px + soluk kırmızı 3 px. Çubuklardaki her zarar parçası ve lejant örneği bununla. */
:root {
    --cl-loss-fill: repeating-linear-gradient(135deg, var(--cl-chart-8) 0 2px, color-mix(in srgb, var(--cl-chart-8) 25%, transparent) 2px 5px);
}

.cl-sp-loss-swatch,
.cl-sp-loss,
.cl-sp-leaf .cl-sp-loss {
    background: var(--cl-loss-fill) !important;
}

/* Zarar rakamının rengi zararın kaynağından: yalnızca vade farkından yiyen net zarar sarı, faturadaki zarar
   (genel giderden / maliyetten yiyen) kırmızı. Müşteriler › Kâr · 12 ay ve müşteri sayfası › Aylık Satış ve Kâr. */
/* Sarı kırmızıyla karışmasın: grafik sarısından (--cl-chart-4) daha açık, sarıya yakın ton; açık temada okunur
   koyu sarı. */
:root { --cl-term-loss-text: #A87800; }
:root.dark { --cl-term-loss-text: #F7CB45; }

/* ZARAR VE VADESİ GEÇMİŞ ALACAK KIRMIZI — YALNIZCA İSTİSNA BOYANIR (kullanıcı kararı 2026-11-03; kurumsal tabloların yaygın uygulaması):
   Müşteriler › Fatura Kârı, Net Kâr, Net Marj'da zarar ve Vadesi Geçmiş tutarı; kârlı rakamlar normal renkte. İçindeki bağlantı da kırmızı. */
.cl-loss-text,
.cl-loss-text a,
.cl-loss-text .cl-qv-link {
    color: var(--cd-text-danger) !important;
}

/* FİLTRE MENÜSÜNÜN GENİŞLİĞİ — PORTAL GENELİ KURAL (kullanıcı kararı 2026-11-03; önce her menü sabit 320 / 336'ydı): içerik hapın genişliğine
   sığıyorsa menü hap kadar geniş (--cl-pill-w, açılırken cover-lab-panel.js "FİLTRE MENÜSÜ GENİŞLİĞİ" yazar); sığmıyorsa en uzun seçenek
   kadar, sol ve sağ boşluk eşit kalarak sağa doğru genişler (sağa yaslı menüde sola). Ekrandan taşmaz. Arama kutusu genişliği belirlemez
   (contain). Tarih aralığının takvimi kendi ölçüsünde kalır. Telefonda alt panel (tam genişlik) aynen. */
.cd-page .cl-filter-menu:not(.cl-filter-menu--range),
.cd-page .cl-filter-menu--wide:not(.cl-filter-menu--range) {
    width: max-content;
    min-width: var(--cl-pill-w, 0px);
    /* Üst sınır 480 (tam unvanlı müşteri listesi 821'e çıkıyordu); daha uzun seçenek "…" ile kısalır. */
    max-width: min(480px, calc(100vw - 32px));
    /* Menü hapın görünen çerçevesinin (sarmalayıcı) sol kenarına oturur. */
    left: 0;
}

/* Sağa yaslı menüler (--end, rapor kartının başlığı, sayfa başlığının sağı, grafik kartının başlığındaki hap — 2026-11-04) hapın sağ kenarına oturur ve sola doğru genişler. */
.cd-page .cl-filter-menu--end:not(.cl-filter-menu--range),
.cd-page .cl-report-table-card-head .cl-filter-menu:not(.cl-filter-menu--range),
.cd-page .cl-report-header-end .cl-filter-menu:not(.cl-filter-menu--range),
.cd-page .cl-chart-head-pill .cl-filter-menu:not(.cl-filter-menu--range) {
    left: auto;
    right: 0;
}

.cd-page .cl-filter-menu .cl-filter-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-page .cl-filter-menu .cl-filter-search {
    contain: inline-size;
}

/* MÜŞTERİLER — SÜTUN ARALARI EŞİT (kullanıcı kararı 2026-11-03; referansın Cache usage breakdown'ı: artan genişliği yalnızca grafik sütunu
   alır, diğer sütunlar içeriği kadar): grafik sütunları (Kâr / Zarar, Alacak Durumu) dışındaki sütunlar içeriği kadar dar (width 1%), tablo
   ekranı doldururken kalan yer iki grafik sütununa gider; böylece görünen aralar her yerde hücre boşluğu kadar (12 + 12). Sütun kilidi
   (cover-lab-panel.js lockColumns) bu yerleşimi ölçüp sabitler. */
.cd-page .fi-ta-table:has(th.fi-table-header-cell-profit-bar) thead th:not(.fi-table-header-cell-profit-bar):not(.fi-table-header-cell-open-bar) {
    width: 1%;
}

/* Grafik sütunlarında Filament'in iç sarmalayıcıları (max-w-max, text-item) tam genişlik: çubuk hücreyi doldursun. */
.cd-page td:is(.fi-table-cell-profit-bar, .fi-table-cell-open-bar) .fi-ta-text > div,
.cd-page td:is(.fi-table-cell-profit-bar, .fi-table-cell-open-bar) .fi-ta-text > div > div,
.cd-page td:is(.fi-table-cell-profit-bar, .fi-table-cell-open-bar) .fi-ta-text-item,
.cd-page td:is(.fi-table-cell-profit-bar, .fi-table-cell-open-bar) .fi-ta-text-item-label {
    width: 100%;
    max-width: none;
}

/* Müşterinin Satışlar sekmesi: kartların altındaki bloklar arası 16 (kayıt sayfası boşlukları). */
.cl-report-panel > .cl-customer-block + *,
.cl-report-panel > * + .cl-customer-block {
    margin-top: 16px;
}

/* Geç Ödeme Bedeli SARI TARALI: kârın ucundan yenen parça; vade farkının sarısıyla 135° tarama (zarar taramasının
   aynı deseni, renk sarı). Kâr Dökümü'nün özet çubuğu, Geç Ödeme Bedeli satırı ve lejant. */
/* Geç Ödeme Bedeli SARI TARALI — iki ekranda (kullanıcı kararı 2026-11-04; önce Kâr Dökümü'nde yeşil, köprüde kırmızı taralıydı): vade farkının
   sarısıyla 135° tarama; sarı onu vade farkının ailesine (paranın maliyeti) bağlar, tarama faturası kesilmemiş hesaplanan bedel olduğunu söyler;
   kırmızı yalnızca sonuç zarara kalır. */
:root { --cl-late-fill: repeating-linear-gradient(135deg, var(--cl-chart-4) 0 2px, color-mix(in srgb, var(--cl-chart-4) 25%, transparent) 2px 5px); }

/* SATIŞLAR 2 (öneri sekmesi, 2026-11-04). Durum kartı: küçük kart ölçüsünde, solda rozet + cümle, altında soluk öneri. */
.cl-diag { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cl-diag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-diag-text { font-size: 14px; line-height: 20px; color: var(--cd-text-primary); }
.cl-diag-advice { font-size: 12px; line-height: 17px; color: var(--cd-text-muted); }
.cl-status-badge--pay-gray { background: color-mix(in srgb, var(--cd-text-muted) 15%, transparent); color: var(--cd-text-secondary); }
/* Kâr köprüsü: atlasın dikey çubuğu; düşülen kalemler havada (tek parça, iki ucu yuvarlak), geç ödeme yeşil taralı. */
.cl-bridge .cl-chart-bar { width: min(var(--cl-bar-w), 32px); --cl-bar-r: 4px; }
.cl-bridge .cl-chart-xaxis { height: 40px; }

.cl-bridge .cl-chart-seg { border-radius: var(--cl-bar-r); }
.cl-bridge .cl-chart-seg--late { background: var(--cl-late-fill); }
.cl-bridge .cl-chart-xaxis span { white-space: normal; text-align: center; transform: translateX(-50%); max-width: 11%; line-height: 15px; }
.cl-bridge .cl-chart-zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--cd-border-strong); pointer-events: none; }

/* Yarım genişlikte köprü: eksen yazıları iki satır sığsın. */
.cl-report-charts--pairs .cl-bridge .cl-chart-xaxis span { font-size: 11px; line-height: 14px; max-width: 16%; }

/* Kâr Köprüsü — yatay şelale. Satır: ad 200 | çubuk alanı | tutar 112; atlasın toplamlı tablosu (45, %5 çizgi). */
.cl-hb { margin-top: 16px; }
html:not([data-cl-currency="USD"]) .cl-hb.cl-cur--usd,
html[data-cl-currency="USD"] .cl-hb.cl-cur--try { display: none; }
.cl-hb { --cl-hb-label: 200px; --cl-hb-amt: 112px; --cl-hb-share: 96px; --cl-hb-gap: 16px; }
.cl-hb-row, .cl-hb-axis { display: grid; grid-template-columns: var(--cl-hb-label) var(--cl-hb-amt) minmax(0, 1fr) var(--cl-hb-share); gap: var(--cl-hb-gap); align-items: center; }
.cl-hb-body { position: relative; }
.cl-hb-lines { position: absolute; top: 0; bottom: 0; left: calc(var(--cl-hb-label) + var(--cl-hb-amt) + 2 * var(--cl-hb-gap)); right: calc(var(--cl-hb-share) + var(--cl-hb-gap)); pointer-events: none; z-index: 2; }
.cl-hb-row { position: relative; }
.cl-hb-row { height: 45px; border-bottom: 1px solid var(--cd-border-subtle); }
.cl-hb-row:last-child { border-bottom: 0; }
.cl-hb-label { font-size: 14px; line-height: 20px; color: var(--cd-text-secondary); }
.cl-hb-row--sub .cl-hb-label, .cl-hb-row--sub .cl-hb-amt { color: var(--cd-text-primary); font-weight: 500; }
.cl-hb-amt { font-size: 14px; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; color: var(--cd-text-primary); }
.cl-hb-row--sub .cl-hb-amt.cl-loss-text { color: var(--cd-text-danger); }
.cl-hb-track { position: relative; height: 100%; }

.cl-hb-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--cd-border-strong); }
.cl-hb-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; min-width: var(--cl-bar-end-min); border-radius: 4px; background: var(--cl-chart-color); }
.cl-hb-bar.cl-hb-bar--late { background: var(--cl-late-fill); }
/* Sıfır çizgisine oturan uç düz. */
.cl-hb-bar.cl-hb-bar--flat-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cl-hb-bar.cl-hb-bar--flat-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cl-hb-axis { height: 20px; }

/* Dar köprüde "Son 7 ay · 33 müşteri" gibi iki parçalı ad rastgele kırılmasın: ikinci parça altına iner, soluk (kullanıcı kararı 2026-11-13) */
@container (max-width: 640px) {
    .cl-hb-label-sep { display: none; }
    .cl-hb-label-more { display: block; font-size: 12px; line-height: 17px; font-weight: 400; color: var(--cd-text-muted); }
}
@container (max-width: 640px) { .cl-hb { --cl-hb-label: 112px; --cl-hb-amt: 72px; --cl-hb-share: 56px; --cl-hb-gap: 8px; } }
.cl-hb-head { font-size: 13px; line-height: 17px; font-weight: 500; color: var(--cd-text-secondary); text-align: right; }
.cl-hb-share { color: var(--cd-text-secondary); }
.cl-hb-row--sub .cl-hb-share { color: var(--cd-text-primary); }

/* Kâr Köprüsü: ara toplamlar 16 kalın (seviye), düşülen kalemler 12 (adım). Kullanıcı kararı 2026-11-04. */

/* Grafik kartının başlığındaki seçici (ör. Aylık Satış ve Kâr › Ürün): Grafik | Tablo'nun solunda, 12 ara. */
.cl-chart-head .cl-chart-head-pill { margin-left: auto; }

/* Satış Özeti › ürün lejantı (önce Aylık Alım Adedi ile ortaktı; kart 2026-11-04'te kaldırıldı). */
.cl-mq-legend { margin-top: 16px; }
.cl-chart-card .cl-mq-legend li .cl-chart-legend-swatch.cl-chart-legend-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--cl-chart-color); } /* çubuk lejantı kare (çizgi grafiğinin çizgi işaretini ezer) */

/* SATIŞLAR 2 › AYLIK SATIŞ ÖZETİ: satır 32, %5 çizgi; sütunlar Ay | Adet | Ciro | (çubuk) | Kâr | (çubuk)
   (Adet yalnızca rakam; sıra satışın akışı: adet, ciro, kâr; 2026-11-04): her ölçünün rakamı kendi başlıklı sütununda sağa yaslı, sağındaki çubuk sütununun başlığı boş. Çubuk 8 yüksek, sıfıra oturan kenar
   düz, dış uç 4; Kâr'ın sıfır ekseni satırlar boyunca kesintisiz (çizgi satır çizgisinin üstünden geçer). */
.cl-ms2-table { --ms2-cols: 160px 64px 80px minmax(0, 1fr) 80px minmax(0, 1fr) 88px; margin-top: 12px; }
.cl-ms2-row { display: grid; grid-template-columns: var(--ms2-cols); column-gap: 16px; align-items: center; height: 32px; border-bottom: 1px solid var(--cd-border-subtle); }
.cl-ms2-row:last-child { border-bottom: 0; }
.cl-ms2-head { font-size: 13px; line-height: 17px; font-weight: 500; color: var(--cd-text-secondary); }
.cl-ms2-head .cl-ms2-num { text-align: right; }
.cl-ms2-month { font-size: 14px; line-height: 20px; color: var(--cd-text-secondary); white-space: nowrap; }
.cl-ms2-when-closed, .cl-ms2-when-open { display: contents; }
.cl-ms2-c-qty { grid-column: 2; grid-row: 1; }
.cl-ms2-c-ciro { grid-column: 3; grid-row: 1; }
.cl-ms2-c-cbar { grid-column: 4; grid-row: 1; }
.cl-ms2-c-pnum { grid-column: 5; grid-row: 1; }
.cl-ms2-c-profit { grid-column: 6; grid-row: 1; }
.cl-ms2-c-margin { grid-column: 7; grid-row: 1; } /* Kâr Marjı */
.cl-ms2-ghead { padding-left: 0; }
/* Yıl satırları: Tümünü aç / kapat ile; yıl satırı 14/20 500 birincil; kapalıyken ana çubuk aylarınkinden kalın (12), açıkken değer yok. */
.cl-ms2-year .cl-ms2-month { color: var(--cd-text-primary); font-weight: 500; }
/* Tümünü aç / kapat düğmesi rapor kartlarının kuralıyla araç grubunun EN SOLUNDA, hapın solunda, araları 12 (başlığın gap'i; kullanıcı kontrolü
   2026-11-04: önce hapın sağında, 20 aralıktı). */
.cl-ms2 .cl-chart-head .cl-ms2-fold { order: 1; margin-left: auto; }
.cl-ms2 .cl-chart-head .cl-chart-head-pill { order: 2; margin-left: 0; }
.cl-ms2-year:not(.is-closed) .cl-ms2-when-closed,
.cl-ms2-year.is-closed .cl-ms2-when-open { display: none; }
.cl-ms2-year .cl-ms2-bar, .cl-ms2-year .cl-ms2-stack { height: 12px; margin-top: -6px; }
.cl-ms2-year .cl-ms2-amt, .cl-ms2-year .cl-ms2-pamt { font-weight: 500; }
.cl-ms2-mrow .cl-ms2-month { padding-left: 36px; }
.cl-ms2-track { position: relative; height: 100%; }

.cl-ms2-bar { position: absolute; top: 50%; height: 8px; margin-top: -4px; min-width: var(--cl-bar-end-min); background: var(--cl-chart-color); border-radius: 0 4px 4px 0; }
.cl-ms2-bar--neg { border-radius: 4px 0 0 4px; }
.cl-ms2-amt { font-size: 14px; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; color: var(--cd-text-primary); white-space: nowrap; }
.cl-ms2-none { color: var(--cd-text-muted); }
@container (max-width: 760px) {
    .cl-ms2-table { --ms2-cols: 96px 48px 64px minmax(0, 1fr) 64px minmax(0, 1fr) 64px; }
    .cl-ms2-row { column-gap: 8px; }
}

/* Aylık Satış Özeti › Tümü seçiliyken ciro ürün ürün parçalı: atlasın parça çubuğu, 8 yüksek, arası 1, iç köşe 2,
   sağ dış uç 4, sıfıra oturan sol kenar düz. */
.cl-ms2-stack { position: absolute; top: 50%; left: 0; height: 8px; margin-top: -4px; display: flex; gap: 1px; min-width: 2px; }
.cl-ms2-stack > i { display: block; height: 100%; min-width: 2px; flex-basis: 0; background: var(--cl-chart-color); border-radius: 2px; }
.cl-ms2-stack > i:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cl-ms2-stack > i:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.cl-ms2 .cl-chart-card .cl-mq-legend li .cl-chart-legend-swatch.cl-chart-legend-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--cl-chart-color); } /* çubuk lejantı kare (çizgi grafiğinin çizgi işaretini ezer) */
.cl-mq-legend li.cl-legend-dim { opacity: .4; } /* seçili olmayan ürün soluk (Aylık Satış Özeti, 2026-11-04) */

/* MENÜNÜN YÖNÜ — REFERANSIN KURALI (kullanıcı kararı 2026-11-04; cover-lab-panel.js "FİLTRE MENÜSÜ GENİŞLİĞİ" › align): hapın sol kenarına
   hizalı sağa açılır, sağa sığmazsa sağ kenarına hizalı sola. Yön açılışta ölçülür; sayfadaki yere göre yazılmış eski kurallar bunun altında kalır. */
.cd-page .cl-filter-pill-wrap > .cl-filter-menu[data-cl-align="start"] { left: 0 !important; right: auto !important; }
.cd-page .cl-filter-pill-wrap > .cl-filter-menu[data-cl-align="end"] { left: auto !important; right: 0 !important; }

/* Aylık Satış Özeti › Kâr sütunu: rakam çubuğun karşı tarafında, sıfır çizgisinin 8 yanında (zararda sağında,
   kârda solunda). İzin iki yanında 80 px rakam payı (.cl-ms2-ptrack padding), çubuk ve sıfır çizgisi iç alanda (.cl-ms2-pin). */
.cl-ms2-ptrack { position: relative; height: 100%; }
.cl-ms2-pin { position: relative; display: block; height: 100%; }
.cl-ms2-pin::before { content: ""; position: absolute; top: 0; bottom: -1px; left: var(--cl-zero); width: 1px; background: var(--cd-border-strong); }
.cl-ms2-pamt { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--cd-text-primary); white-space: nowrap; }

.cl-ms2-pamt.cl-loss-text { color: var(--cd-text-danger); }

/* Satış Özeti › sıralama: başlık düğmesi, ok yazının solunda 14 px; sıralanmayan sütunda saydam, başlığın
   üzerine gelince soluk, sıralı sütunda ikincil (artanda yukarı döner). Son satırın çizgisi grubun son ayında. */
.cl-ms2-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; cursor: var(--cd-cursor-interactive); }
.cl-ms2-num .cl-ms2-sort { flex-direction: row; justify-content: flex-end; width: 100%; }
.cl-ms2-sort .cl-report-sort-arrow { width: 16px; height: 16px; margin-left: -20px; color: transparent; opacity: 1; } /* ok akıştan çıkar (yazıyı kaydırmaz), yazının 4 solunda */
@media (hover: hover) {
    .cl-ms2-sort:hover .cl-report-sort-arrow { color: var(--cd-text-disabled); }
}
.cl-ms2-sort[data-dir] .cl-report-sort-arrow { color: var(--cd-text-secondary); }
@media (hover: hover) {
    .cl-ms2-sort[data-dir]:hover .cl-report-sort-arrow { color: var(--cd-text-primary); }
}
/* Üçüncü basıştan sonra fare başlıktayken ok hemen kaybolur (referans), fare ayrılınca hover ipucu döner. */
.cl-ms2-sort.cl-sort-cleared .cl-report-sort-arrow { color: transparent !important; }
.cl-ms2-sort[data-dir="asc"] .cl-report-sort-arrow { transform: rotate(180deg); }
.cl-ms2-group:last-child > .cl-ms2-months > .cl-ms2-row:last-child,
.cl-ms2-group:last-child > .cl-ms2-year.is-closed { border-bottom: 0; }
.cl-ms2-row:last-child { border-bottom: 1px solid var(--cd-border-subtle); }
.cl-ms2-head { border-bottom: 1px solid var(--cd-border-subtle); }

/* Satış Özeti › Ciro çubuğu: iki ucu da yuvarlak (4; çubuk izin içinde, sıfır çizgisi yok), altında %15 gri
   iz (Müşteriler › Kâr / Zarar'ın izi); satışı olmayan satırda da boş iz. Yıl satırında 12. */
.cl-ms2-c-cbar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: color-mix(in srgb, var(--cl-chart-rest) 15%, transparent); }
.cl-ms2-year .cl-ms2-c-cbar::before { height: 12px; margin-top: -6px; }
.cl-ms2-c-cbar > .cl-ms2-bar { border-radius: 4px; }
.cl-ms2-c-cbar > .cl-ms2-stack > i:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

/* Satış Özeti › Kâr çubuğu: Ciro'nunki gibi altında %15 gri iz (izin iki ucu yuvarlak 4), satışı olmayan ayda
   da boş iz; çubuğun dış ucu yuvarlak, sıfır çizgisine oturan kenarı portal kuralıyla keskin. Yıl satırında 12. */
.cl-ms2-pin::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: color-mix(in srgb, var(--cl-chart-rest) 15%, transparent); z-index: 0; }
.cl-ms2-year .cl-ms2-pin::after { height: 12px; margin-top: -6px; }
.cl-ms2-year:not(.is-closed) .cl-ms2-pin::after { display: none; }
.cl-ms2-pin > .cl-ms2-bar { z-index: 1; }
.cl-ms2-pin::before { z-index: 2; }

/* ANALİZLERDE AÇILAN ALT SATIRIN GRAFİĞİ HER ZAMAN İNCE ÇİZGİ (kullanıcı kararı 2026-11-14): Satış Özeti'nde yıl satırının altındaki ay satırları (Ciro, Ciro Dağılımı, Kâr çubukları) 2 px. */
.cl-ms2-mrow .cl-ms2-bar,
.cl-ms2-mrow .cl-ms2-stack { height: 2px; margin-top: -1px; min-width: 2px; }
.cl-ms2-mrow .cl-ms2-c-cbar > .cl-ms2-bar { border-radius: 1px; }
.cl-ms2-mrow .cl-ms2-bar { border-radius: 0 1px 1px 0; }
.cl-ms2-mrow .cl-ms2-bar--neg { border-radius: 1px 0 0 1px; }
.cl-ms2-mrow .cl-ms2-stack > i,
.cl-ms2-mrow .cl-ms2-c-cbar > .cl-ms2-stack > i:first-child { border-radius: 1px; }
.cl-ms2-mrow .cl-ms2-c-cbar::before,
.cl-ms2-mrow .cl-ms2-pin::after { height: 2px; margin-top: -1px; border-radius: 1px; }

/* SIRALAMA OKU — PORTAL GENELİ KURAL: üçüncü basışta (sıralama kaldırılıp açılış sırasına dönülünce) ok o
   anda kaybolur; griye dönüp sönme yok (okun renk / saydamlık geçişi kapalı), fare başlıktan çıkıp yeniden gelince soluk görünür. Liste
   tabloları (.cl-sort-cleared, cover-lab-panel.js sortBy), rapor tabloları (ok kaldırılır), Satış ve Kârlılık ve Satış Özeti başlık düğmeleri. */
.cd-page .fi-ta-ctn thead th svg:not(.cl-info-tip svg),
.cl-report-sort-arrow { transition: none !important; }
.cd-page .fi-ta-ctn thead th.cl-sort-cleared svg:not(.cl-info-tip svg) { opacity: 0 !important; }

/* Satış Özeti › dar ekran (kullanıcı kararı 2026-11-04: grafikler gizlenmez, tablo yana kayar): tablo en az 640 geniş, kart daralınca
   kendi içinde yatay kayar; rakam ve grafik sütunları yerinde kalır. */
.cl-ms2-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px; }
.cl-ms2-scroll .cl-ms2-row { min-width: 640px; } /* tablo kabı display: contents (para birimi), genişlik satırlarda */
.cl-ms2-scroll > .cl-mq-legend { position: sticky; left: 0; }

/* Kâr Köprüsü: sütunlar ad | Tutar | grafik | Ciroya Oranı; bütün çubuklar aynı kalınlıkta (12; ara toplamlar
   artık kalın değil); her satırda grafik sütunu boyunca %15 gri zemin (iki ucu yuvarlak 4); sıfıra oturan kenar keskin (portal kuralı). */
.cl-bridge .cl-hb-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; border-radius: 4px; background: color-mix(in srgb, var(--cl-chart-rest) 15%, transparent); }
.cl-bridge .cl-hb-bar { z-index: 1; }

/* ==========================================================================================================================================
   GRİ BAŞLIKLI SATIR GRİ — PORTAL GENELİ KURAL: bir tablo satırının başlık sütunundaki yazı griyse o
   satırdaki yazıların hiçbiri o griden parlak olmaz; tutarlar, yüzdeler ve bağlantılar başlığın renginde. Zaten daha soluk olan notlar
   ve anlam taşıyan renkler (zarar kırmızısı .cl-loss-text, gecikme sarı / kırmızı, artış / azalış) olduğu gibi kalır. Yazıların boyu da
   başlığın boyu (aşağıda). Yeni tabloda gri
   başlıklı satır yazılırsa hücreleri de bu listeye girer. Kaynak bilgi listeleri (etiket | değer) bu kuralın dışında.
   ========================================================================================================================================== */
/* Rapor tabloları: 1. kademe satırı (başlık ikincil) — Gelir Tablosu, Genel Gider, Nakit Akışı, Satış ve Kârlılık, Alacak & Borç,
   Tahsilat Performansı, müşteri sayfasının tabloları. */
.cl-report-table tbody > tr.cl-report-lvl-1 > td { color: var(--cd-text-secondary); }
/* Gelir tablosu düzeninde okun altındaki yaprak (başlık soluk): hücreler de soluk. */
/* :has içinde :has geçersiz sayılır; okun varlığı satırdan aranır. */
.cl-report-table.cl-report-table--income tbody > tr:is(.cl-report-lvl-2, .cl-report-lvl-3):not(:has(> th > .cl-report-toggle)) > td { color: var(--cd-text-muted); }
/* Hücrenin içinde kendi rengini birincil yazan öğeler gri satırda satırın rengini alır. */
.cl-report-table tbody > tr:is(.cl-report-lvl-1, .cl-report-lvl-2, .cl-report-lvl-3) > td :is(.cl-sp-total, .cl-margin--loss, .cl-margin--below, .cl-margin--ok, .cl-margin--target):not(.cl-loss-text) { color: inherit !important; }
/* YAZI BOYU BAŞLIĞIN BOYU: satırdaki yazılar başlık sütunundaki yazıyla aynı boyda. Rapor tablolarının bölüm
   başlığı ve ana sonuç satırı (Brüt Satış Kârı, EBITDA, Dönem Net Kârı …) 16 / 24: rakamları da 16 / 24 (önce 14). */
.cl-report-table tbody > :is(.cl-report-section, .cl-report-row--result) > td { font-size: 16px; line-height: 24px; }
/* Satış ve Kârlılık grafik modu: çubuğun yanındaki ciro (ve yer ayıran gizli ölçüsü) satır başlığının boyunda (önce 13 / 17). */
.cl-sp-total, .cl-sp-total-sizer { font-size: 14px; line-height: 20px; }
/* Kâr Köprüsü: düşülen kalemler (başlık ikincil). */
.cl-hb-row:not(.cl-hb-row--sub) .cl-hb-amt:not(.cl-loss-text) { color: var(--cd-text-secondary); }

/* Satış Özeti: ay satırları (başlık ikincil). */
.cl-ms2-mrow .cl-ms2-amt:not(.cl-loss-text, .cl-ms2-none) { color: var(--cd-text-secondary); }
/* Gelir Tablosu / Genel Gider grafik modu: ay satırı (başlık ikincil). */
.cl-ladder-plot > .cl-ladder-row > .cl-ladder-total-sizer { color: var(--cd-text-secondary); }

/* Satış Özeti lejantı: ürünlerden sonra Kâr Göstergesi'nin Kâr / Zarar'ı; iki grup arası 32 (öğeler arası 16 + 16). */
.cl-mq-legend > .cl-legend-group { margin-left: 16px; }

/* ===== MÜŞTERİ SAYFASI › TAHSİLAT — YENİ DÜZEN (kullanıcı isteği 2026-11-04; Satışlar sekmesinin kalıbı) =====
   Gecikme Dağılımı (.cl-dd): Kâr Köprüsü'nün satırı (45, %5 çizgi): dilim | çubuk (8, %15 gri iz, sol kenar düz, sağ uç 4) | Fatura | Tutar | Payı.
   Ödeme Özeti tablosu ve Aylık Tahsilat grafiği 2026-11-04'te kalktı. */
.cl-dd { margin-top: 12px; }
.cl-dd-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 128px 96px 64px; column-gap: 16px; align-items: center; height: 45px; border-bottom: 1px solid var(--cd-border-subtle); }
.cl-dd-row:last-child { border-bottom: 0; }
.cl-dd-head { height: 32px; font-size: 13px; line-height: 17px; font-weight: 500; color: var(--cd-text-secondary); }
.cl-dd-label { font-size: 14px; line-height: 20px; color: var(--cd-text-secondary); white-space: nowrap; }
.cl-dd-num { font-size: 14px; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; color: var(--cd-text-primary); white-space: nowrap; }
.cl-dd-head .cl-dd-num { font-size: 13px; line-height: 17px; color: var(--cd-text-secondary); }
.cl-dd-unpaid { font-size: 12px; line-height: 17px; color: var(--cd-text-muted); }
.cl-dd-track { position: relative; height: 100%; }
.cl-dd-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: color-mix(in srgb, var(--cl-chart-rest) 15%, transparent); }
.cl-dd-bar { position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; min-width: 8px; border-radius: 4px; background: var(--cl-chart-color); }
/* 899 px'e kadar (kenar menü + dar kart): sabit sütunlar 512 px istiyordu, 768 px'te sayfayı 48 px yana taşırıyordu (canlı test 2026-11-14). */
@media (max-width: 899px) {
    .cl-dd-row { grid-template-columns: 96px minmax(32px, 1fr) 32px 64px 40px; column-gap: 8px; }
    .cl-dd-label { white-space: normal; line-height: 17px; font-size: 13px; }
    .cl-dd-unpaid { display: none; }
}

/* Kartın tamamı bağlantıyken (Panel) başlıktaki ⓘ bağlantı katmanının üstünde: ⓘ'ye basmak kartı açmaz (2026-11-04). */
.cl-dash-card .cl-info-tip { position: relative; z-index: 1; }

/* Formun genişliğinde segment seçici (referansın Create deployment › Trigger "Manual | Schedule"i, ölçüldü 2026-11-04): iz formun genişliğinde,
   seçenekler eşit genişlikte, yazı ortada. İlk kullanım Müşteri › Müşteri Grubu. */
.cd-page .cl-segmented.cl-segmented--fill {
    width: 100%;
}

.cd-page .cl-segmented--fill > .cl-segmented-option {
    flex: 1 1 0;
    min-width: 0;
}

.cd-page .cl-segmented--fill > .cl-segmented-option > span {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* MÜŞTERİ › İSKONTO SÜTUN SÜTUN (kullanıcı kararı 2026-11-04: "sütun gibi dizelim, değerleri altlarına"; ATLAS PARTİSİ K'nin yan başlıklı
   satırlarının yerine): Ticari, Ödeme, Özel, Net, KolayBi Sabit yan yana, her birinde üstte ad (14/14 500, alan başlığı), 8 altında değer
   (14/20, Özel'de 96'lık kutu), kaynağı (grup, vade) değerin altında soluk 13/17; sütunlar arası 32, değerler alt alta hizalı; "+ → =" işaretleri
   yok. "KolayBi Sabit'e eşitle" en sonda, değerlerin satırında (küçük ikincil). Dar alanda alt satıra iner. */
.cd-page .fi-section .cl-discount-form > .fi-fo-component-ctn,
.cd-page .fi-section .cl-discount-form > div,
.cl-discount-form > .fi-fo-component-ctn,
.cl-discount-form > div {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    column-gap: 32px !important;
    row-gap: 16px !important;
}

.cl-discount-form .cl-discount-values {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    column-gap: 32px !important;
}

.cl-discount-form .cl-dv {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 0 !important;
}

.cl-discount-form .cl-dv-label {
    flex: 0 0 auto !important;
    font-size: 14px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    color: var(--cd-text-primary) !important;
}

.cl-discount-form .cl-dv-value {
    order: 2 !important;
    min-width: 0 !important;
    line-height: 32px !important;
    text-align: left !important;
    color: var(--cd-text-primary) !important;
}

.cl-discount-form .cl-dv-sub {
    order: 3 !important;
    margin-top: -8px !important;
    font-size: 13px !important;
    line-height: 17px !important;
    color: var(--cd-text-muted) !important;
}

.cl-discount-form .fi-fo-field-wrp:has(input[id$="discount_percent"]),
.cl-discount-form .fi-fo-field-wrp.cl-w-number:has(input[id$="discount_percent"]) {
    width: 96px !important;
    max-width: 96px !important;
}

.cl-discount-form .fi-fo-field-wrp:has(input[id$="discount_percent"]) > .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* SÜTUNLAR SAYFA BOYUNCA: Ticari, Ödeme, Özel, Net ve KolayBi Sabit aynı satırda eşit aralıklarla yayılır,
   KolayBi Sabit en sağda (justify-content: space-between); sarmalayıcılar display: contents ile açılır, her sütun satırın kendi öğesi olur.
   "KolayBi Sabit'e eşitle" bunların altında, sağa yaslı. Yeni müşteri formunda (KolayBi Sabit yokken) Net en sağda. */
.cd-page .fi-section .cl-discount-form > .fi-fo-component-ctn {
    justify-content: space-between !important;
    column-gap: 8px !important; /* aralığı space-between dağıtır; sabit 96'lık beş sütun tek satıra sığsın */
}

/* Sütunlar sabit genişlikte (kullanıcı bildirimi 2026-11-05: grup değişince "%0" → "%15", "Satıcı" → "Ana Bayi" sütunları kaydırıyordu):
   her sütun 96 (Özel'in kutusu kadar); aralar space-between ile değişmez, değer değişince hiçbir sütun yer değiştirmez. */
.cl-discount-form .cl-dv {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
}

.cl-discount-form .cl-dv-value,
.cl-discount-form .cl-dv-sub {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cl-discount-form > .fi-fo-component-ctn > div:has(.cl-discount-values),
.cl-discount-form > .fi-fo-component-ctn > div:has(.cl-discount-values) :has(.cl-discount-values),
.cl-discount-form .cl-discount-values {
    display: contents !important;
}

/* Müşteri sayfası › Yetkili Kişiler (2026-11-04): tablonun kabında kap sorgusu yok; container-type sabit konumlu açılır menüleri (⋮) kaba göre
   yerleştirip düğmeden uzakta açıyordu. */
.cl-record-body.cl-record-body--table {
    container-type: normal;
}

/* ==========================================================================
   KART SEÇENEK — ATLASIN RadioGroup.Card'ı (kullanıcı kararı 2026-11-04; Console Atlası › Form › Kart seçenek; OptionCards / OptionCard):
   kart köşe 12, 1 px %10 kenar, iç 12, panel zemini; solda 20'lik yuvarlak radyo (tek kartlı aç / kapa da yuvarlak, atlastaki gibi), 16 sağında başlık 14/20 500 ve altında tek satır
   açıklama 13/17,875 soluk; seçili kartta vurgu kenarı ve açık mavi zemin. Kartlar arası 8; sütun sayısı --cl-oc-cols (dar ekranda 1).
   ========================================================================== */
.cl-option-cards {
    display: grid;
    grid-template-columns: repeat(var(--cl-oc-cols, 1), minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 639px) {
    .cl-option-cards { grid-template-columns: minmax(0, 1fr); }
}
.cl-option-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--cd-border);
    background: var(--cd-surface-panel);
    cursor: var(--cd-cursor-interactive);
    transition: border-color 120ms var(--cd-ease-out), background-color 120ms var(--cd-ease-out);
}
@media (hover: hover) {
    .cl-option-card:hover { border-color: var(--cd-border-strong); }
}
.cl-option-card:has(.cl-option-card-input:checked) {
    border-color: var(--cd-border-accent);
    background: var(--cd-bg-accent-subtle);
}
.cl-option-card:has(.cl-option-card-input:disabled) { opacity: .4; cursor: default; }
.cl-option-card-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}
.cl-option-card-mark {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--cd-border-strong);
    background: var(--cd-surface-panel);
}
.cl-option-card-mark--radio { border-radius: 50%; }
.cl-option-card-input:checked + .cl-option-card-mark--radio {
    border-color: var(--cd-fill-accent);
    background: var(--cd-fill-accent) radial-gradient(circle, #FFFFFF 0 5px, transparent 5.5px);
}
html:not(.cl-pointer) .cl-option-card-input:focus-visible + .cl-option-card-mark { box-shadow: var(--cd-focus-ring); }
.cl-option-card-text { display: flex; flex-direction: column; min-width: 0; }
.cl-option-card-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); }
.cl-option-card-desc { font-size: 13px; line-height: 17.875px; color: var(--cd-text-muted); }

/* ==========================================================================
   MÜŞTERİ SAYFASI › ÖZET (kullanıcı kararları 2026-11-04; partials/customer-overview): KART SAYFASINDA BÖLÜM BAŞLIĞI YOK; kartlar sırayla,
   aralar 16 (kapsayıcının gap'i), kartların kendi dış boşluğu yok. Cari kartı tam genişlikte, içinde iki grup yan yana (aralar 32; dar
   alanda alt alta); altında Satış durumu | İskonto yan yana (dar alanda alt alta); iskonto değerinin hemen yanında kaynağı (8 aralık, gri).
   ========================================================================== */
.cl-cust-overview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cl-cust-overview > *,
.cl-cust-overview .cl-diag,
.cl-cust-overview .cl-report-sparks,
.cl-cust-overview .cl-report-charts {
    margin: 0;
}

/* SAYFA GEÇİŞİ ANINDA (kullanıcı kararları 2026-11-05; cover-lab-panel.js aynı adlı bölüm): bellekte olmayan sayfaya geçerken içeriğin yerinde
   açılacak sayfanın hatırlanan şeklinde iskelet (kartlar, tablolar, başlıklar gerçek yerlerinde ve boylarında; yan panellerin .cl-sk
   parıltısı); sayfa gelince kalkar. Kart çerçevesi küçük kart standardında (köşe 12, %10 halka), tablo satırları %5 çizgili. */
.cl-tab-skeleton { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.cl-shape-card { position: absolute; box-sizing: border-box; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cd-border); }
.cl-shape-row { position: absolute; box-shadow: inset 0 -1px 0 var(--cd-border-subtle); }
.cl-tab-skeleton .cl-shape-bar { position: absolute; display: block; max-width: none; }
.cl-tab-skeleton .cl-shape-bar--th { opacity: .6; }

/* Bölüm başlığının karşı ucundaki küçük bağlantı (referansın Session paneli › "View session →", canlıda ölçüldü 2026-11-06): 20 yüksek, yazı 12 / 400,
   iç boşluk 6, yazıdan oka 4, ok 16 (sağ kenara 2: ok −4 taşar), altı çizili değil, birincil renk. */
.cl-section-link {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 4px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    color: var(--cd-text-primary);
    text-decoration: none;
}

.cl-section-link:hover {
    background: var(--cd-fill-ghost-hover);
}

.cl-section-link svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-right: -4px;
}

/* ============================================================================================================================
   BEKLEYEN İŞ ŞERİDİ (site haritası, kullanıcı kararı 2026-11-05; HasPendingStrip, partials/pending-strip): liste sayfasının üstünde tek
   satır, referansın bilgi şeridi (köşe 12, 12 16, ikon 20 + 8, %10 halka); basınca yan panel ya da süzülmüş liste. Bekleyen cariler
   panelinde her cari bir satır: ad + gri ayrıntı, altında üç küçük düğme.
   ============================================================================================================================ */
.cl-pending-strip {
    /* İçeriği kadar geniş (kullanıcı kararı 2026-11-05: sayfaya yayılmasın); dar ekranda en fazla kabın genişliği. */
    display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; justify-self: start;
    padding: 12px 16px; border-radius: 12px; text-align: left;
    background: var(--cd-bg-accent-subtle, color-mix(in srgb, var(--cd-text-accent) 8%, transparent));
    box-shadow: inset 0 0 0 1px var(--cd-border-subtle-strong, color-mix(in srgb, currentColor 10%, transparent));
    color: var(--cd-text-primary); font-size: 14px; line-height: 20px; text-decoration: none;
    cursor: var(--cd-cursor-interactive);
}
.cl-pending-strip-icon svg { width: 20px; height: 20px; color: var(--cd-text-accent); display: block; }
.cl-pending-strip-text { flex: 0 1 auto; font-weight: 500; }
.cl-pending-strip-arrow { margin-left: 8px; }
.cl-pending-strip-arrow svg { width: 16px; height: 16px; color: var(--cd-text-secondary); display: block; }
@media (hover: hover) { .cl-pending-strip:hover .cl-pending-strip-arrow svg { color: var(--cd-text-primary); } }
.cl-pending-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cl-pending-item { display: flex; flex-direction: column; gap: 8px; }
.cl-pending-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-pending-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); }
.cl-pending-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Paneldeki yeni kayıt düğmeleri ("+ Müşteri olarak ekle", "+ Ürün ağacı oluştur"; kural: yeni kayıt açan her düğmenin başında "+"):
   xs düğmede "+" 16, düğmenin solundan 4, yazıya 4. */
.cd-btn--xs.cl-pending-add { padding-left: 4px; gap: 4px; }
.cd-btn--xs.cl-pending-add svg { width: 16px; height: 16px; flex: none; }

/* Müşteri › İskonto › "Ödeme" başlığının yanındaki ünlem yazıya yakın: görünen boşluk 4
   (ikon kutusu 16, çizimi kutunun ~2 içinde: 2 aralık + 2 iç boşluk). */
.cl-discount-form .cl-dv-label:has(.cl-info-tip) { gap: 2px !important; }
.cl-discount-form .cl-dv-label .cl-info-tip { margin-left: 0 !important; }

/* MÜŞTERİ SAYFASI › BİLGİLER = DÜZENLEME FORMU (referansın Agent › Configuration'ı, ölçüldü 2026-11-05; kullanıcı kararı 2026-11-05): bölümlü
   form 768 geniş, kayıt sayfasının içinde solda. Değişiklik varken içerik alanının ortasında, alttan 24 yüzen çubuk: 40 yüksek, iç boşluk 6,
   köşe 12, popover zemini + %10 halka, aralar 8; yazı 14/20 0 8, düğmeler 28 ("Vazgeç" hayalet, "Kaydet" dolu asıl). */
.cl-info-form { max-width: 768px; }
/* Ürün sayfası › Bilgiler: bir standart adım dar, 640 (kullanıcı kararı 2026-11-06; bölümlü form en az 640). */
.cl-info-form--compact { max-width: 640px; }
/* Ürün ağacı sayfası › Bilgiler: ağaç formu kayıt sayfasının tam genişliğinde, 1200 (kullanıcı kararı 2026-11-08; formun genişliği FormWidthTest). */
.cl-info-form--wide { max-width: none; }
/* ÜRÜN SAYFASI › BİLGİLER FİYAT SATIRI: dört kutu (Genel Gider, Liste Fiyatı, Taban ve Hedef Kâr Marjı) EŞİT genişlikte (en geniş başlığa
   "Taban Kâr Marjı ⓘ" göre 129) ve form müşteri sayfasıyla aynı 768; tek satıra 588 gerekir (516 var), bu yüzden 2 × 2: Taban | Hedef Kâr Marjı,
   altında Genel Gider | Liste Fiyatı [Hedeften hesapla]. */
.cd-page .cl-field-row--equal .fi-fo-field-wrp.cl-w-number { width: 129px; min-width: 129px; }
.cd-page .cl-field-row--equal > .fi-fo-component-ctn {
    display: grid !important;
    grid-template-columns: 129px 129px auto !important;
    align-items: end;
    column-gap: 12px !important;
    row-gap: 16px !important;
}
.cd-page .cl-field-row--equal > .fi-fo-component-ctn > * { flex: none !important; min-width: 0; }
.cd-page .cl-field-row--equal > .fi-fo-component-ctn > :nth-child(1) { grid-column: 1; grid-row: 1; }
.cd-page .cl-field-row--equal > .fi-fo-component-ctn > :nth-child(2) { grid-column: 2; grid-row: 1; }
.cd-page .cl-field-row--equal > .fi-fo-component-ctn > :nth-child(3) { grid-column: 1; grid-row: 2; }
.cd-page .cl-field-row--equal > .fi-fo-component-ctn > :nth-child(4) { grid-column: 2; grid-row: 2; }
.cd-page .cl-field-row--equal > .fi-fo-component-ctn > :nth-child(5) { grid-column: 3; grid-row: 2; }
/* BÖLÜM ÇİZGİSİNİN ÜSTÜ VE ALTI EŞİT — STANDART (kullanıcı kararı 2026-11-06; referansın bölümü py-8 + alt çizgi: çizginin 32 üstü, 32 altı): bölümler
   arası aralığı yalnızca bölümün kendi margin 16 + padding 32'si verir; kabın satır aralığı 16 olmalı (24 olunca çizginin üstü 40 oluyordu). */
.cl-info-form .fi-fo-component-ctn { row-gap: 16px !important; }
.cl-unsaved-bar {
    position: fixed; bottom: 24px; z-index: 30;
    /* İçerik alanının ortasında; translateX(-50%) yerine auto kenar boşlukları (kullanıcı bildirimi 2026-11-06: çubuk açılırken yana kayıyordu —
       yüzde dönüşümü çubuk görününce hesaplanıyordu). */
    left: var(--cd-sidebar-w, 256px); right: 0; width: max-content; margin-inline: auto;
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 6px; border-radius: 12px;
    background: var(--cd-surface-popover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-text-primary) 10%, transparent), var(--cd-shadow-popover, 0 4px 16px rgba(0,0,0,.25));
}
.cl-unsaved-bar-text { padding: 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); white-space: nowrap; }
/* REFERANSIN "Unsaved changes" ÇUBUĞU BİREBİR (Agent › Configuration, ölçüldü 2026-11-06; kullanıcı kararı 2026-11-06): kutu 40 yüksek, iç boşluk 6, aralar 8,
   köşe 12, popover zemini, 1 px %10 iç halka + iki katmanlı panel gölgesi (0 8 24 .32 ve 0 2 6 .2); yazı 14/20 500; düğmeler 28, köşe 7, 0 10 (Vazgeç hayalet 400,
   Kaydet dolu asıl 500). GELİŞ / GİDİŞ: alttan 16 px yukarı kayarak ve belirginleşerek gelir, aynı yoldan aşağı kayarak ve silinerek gider; 200 ms, ease-out. */
.cd-page .cl-unsaved-bar {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-text-primary) 10%, transparent), 0 8px 24px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .2);
}
.cd-page .cl-unsaved-bar .cd-btn { padding-inline: 10px; }
.cl-unsaved-motion { transition: opacity 200ms var(--cd-ease-out), transform 200ms var(--cd-ease-out); }
.cl-unsaved-from { opacity: 0; transform: translateY(16px); }
.cl-unsaved-to { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) { .cl-unsaved-bar { left: 0; } }

/* PROFİL — REFERANSIN SETTINGS › PROFILE'I (ölçüldü 2026-11-05; kullanıcı kararı 2026-11-05): 768'lik sütunda satırlar, aralar 16; solda etiket
   14/20 500 birincil (fotoğraf satırında altında açıklama 14/20 ikincil), sağda değer. Kutular 224 × 32, köşe 8, %5 zemin, 0 12; e-posta 14/20
   ikincil. Fotoğraf satırında "Fotoğraf yükle" (32) ile 40'lık yuvarlak arası 16. Satırların sonu ile Görünüm'ün çizgisi arası 32 (sayfa aralığı). */
.cl-profile { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } /* başlık → ilk satır 24 (sayfa aralığı 16 + 8) */
.cl-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 32px; }
.cl-profile-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-profile-row:has(> .cl-profile-email) { min-height: 0; }
.cl-profile-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); }
.cl-profile-title--field { line-height: 14px; }
.cl-profile-desc { font-size: 14px; line-height: 20px; color: var(--cd-text-secondary); }
.cl-profile-value { display: flex; align-items: center; gap: 16px; flex: none; }
.cl-profile-value--field { flex-direction: column; align-items: flex-end; gap: 4px; }
.cl-profile-email { font-size: 14px; line-height: 20px; color: var(--cd-text-secondary); }
.cl-profile-input {
    width: 224px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
    background: var(--cd-field-bg, color-mix(in srgb, var(--cd-text-primary) 5%, transparent));
    box-shadow: var(--cd-field-ring, none); color: var(--cd-text-primary); font: inherit; font-size: 14px; line-height: 20px;
}
.cl-profile-input::placeholder { color: var(--cd-text-muted); }
html:not(.cl-pointer) .cl-profile-input:focus-visible, .cl-profile-input:focus { outline: none; box-shadow: var(--cd-focus-ring); }

.cl-profile-error { font-size: 13px; line-height: 17px; color: var(--cd-text-danger); }
.cl-profile-row--photo .cl-profile-value { gap: 8px; }
.cl-profile-row--photo .cl-avatar { margin-left: 8px; } /* düğme → yuvarlak 16 (aralık 8 + 8) */
@media (max-width: 520px) { .cl-profile-row { flex-wrap: wrap; } .cl-profile-input { width: 100%; } .cl-profile-value--field { width: 100%; align-items: stretch; } }

/* Yuvarlak profil resmi (App\Support\Avatar; referansın Avatar'ı): tam yuvarlak, %10 zemin, baş harf 14/20 500 birincil; fotoğraf kırpılarak. */
.cl-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
    width: var(--cl-avatar-size, 40px); height: var(--cl-avatar-size, 40px); border-radius: 9999px;
    background: color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
    color: var(--cd-text-primary); font-size: 14px; line-height: 20px; font-weight: 500;
}
.cl-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* PROFİL › İKİ ADIMLI DOĞRULAMA ANAHTARI (kullanıcı kararları 2026-11-05: "switch olsun"; sonra "referanstaki gibi mavi"): referansın Switch'i
   (portalın .cl-switch'iyle aynı ölçü): iz 36 × 20 tam yuvarlak, kapalıyken anahtar izi rengi, açıkken vurgu mavisi (--cd-fill-accent);
   topuz 16 beyaz, 2 içeride, 16 sağa kayar; 120 ms. Solunda durum yazısı 14/20 ikincil; kurulum sürerken iz soluk mavi, topuz ortada. */
.cl-2fa-switch {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
    color: var(--cd-text-secondary); font: inherit; font-size: 14px; line-height: 20px; cursor: var(--cd-cursor-interactive);
}
.cl-2fa-switch-track {
    position: relative; flex: none; width: 36px; height: 20px; border-radius: 9999px;
    background: var(--cd-switch-track); transition: background-color var(--cd-dur-snap) var(--cd-ease-out);
}
.cl-2fa-switch-thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--cd-dur-snap) var(--cd-ease-out);
}
.cl-2fa-switch-thumb svg { display: none; }
.cl-2fa-switch.is-on .cl-2fa-switch-track { background: var(--cd-fill-accent); }
.cl-2fa-switch.is-on .cl-2fa-switch-thumb { transform: translateX(16px); }
.cl-2fa-switch.is-pending .cl-2fa-switch-track { background: color-mix(in srgb, var(--cd-fill-accent) 45%, var(--cd-switch-track)); }
.cl-2fa-switch.is-pending .cl-2fa-switch-thumb { transform: translateX(8px); }
html:not(.cl-pointer) .cl-2fa-switch:focus-visible { outline: none; }
html:not(.cl-pointer) .cl-2fa-switch:focus-visible .cl-2fa-switch-track { box-shadow: var(--cd-focus-ring); }
@media (prefers-reduced-motion: reduce) { .cl-2fa-switch-thumb, .cl-2fa-switch-track { transition: none; } }

/* Kullanıcı + profil resmi (App\Support\Avatar::person; kullanıcı kararı 2026-11-05: portal genelinde kullanıcılar profil resmiyle): yuvarlak,
   adın 8 solunda, dikey ortada; ad kendi satırında kısalabilir. Küçük yuvarlakta (16–20) baş harf 11 / 12. */
.cl-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; vertical-align: middle; }
.cl-person-name { min-width: 0; }
.cl-avatar[style*="--cl-avatar-size: 16px"], .cl-avatar[style*="--cl-avatar-size: 20px"] { font-size: 11px; line-height: 12px; }
.cl-avatar[style*="--cl-avatar-size: 24px"] { font-size: 12px; line-height: 16px; }

/* PROFİL FOTOĞRAFI MENÜSÜ VE KIRPMA PENCERESİ (referansın "Change photo ⌄" menüsü ve "Crop photo" penceresi, ölçüldü 2026-11-05). Menü düğmenin
   6 altında sağa hizalı, içerik kadar geniş, iç boşluk 4, öğe 32 (6 10, 14/20), "Kaldır" tehlike kırmızısı. Pencere 400 geniş, köşe 12, popover
   zemini + %10 halka, iç boşluk 24; başlık 22/28 580, 4 altında açıklama 14/20 ikincil; 16 altında 288'lik kare alan (köşe 12, yuvarlak maske,
   dışı %50 karartılmış, imleç grab); 16 altında −/+ (28) ve kaydırıcı; 16 altında solda Sıfırla, sağda İptal ve Kaydet (aralar 8). */
.cl-photo-menu { position: relative; }
.cl-photo-menu-btn { gap: 4px; padding-right: 8px; }
.cl-photo-menu-btn svg { width: 16px; height: 16px; opacity: .6; }
.cl-photo-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 160px; padding: 4px; border-radius: 8px;
    background: var(--cd-surface-popover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-text-primary) 10%, transparent), 0 4px 16px rgba(0, 0, 0, .25);
    display: flex; flex-direction: column;
}
.cl-photo-menu-item {
    display: flex; align-items: center; height: 32px; padding: 6px 10px; border: 0; border-radius: 6px; background: none;
    color: var(--cd-text-primary); font: inherit; font-size: 14px; line-height: 20px; text-align: left; white-space: nowrap; cursor: var(--cd-cursor-interactive);
}
@media (hover: hover) { .cl-photo-menu-item:hover { background: var(--cd-fill-ghost-hover); } }
.cl-photo-menu-item--danger { color: var(--cd-text-danger); }

.cl-crop-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); }
/* Referansın ölçüleri (2026-11-05): 400 geniş, köşe 12, popover zemini, yalnızca 1 px %10 halka (büyük gölge yok), iç boşluk 24; başlık 22/28
   580 (üstte −4), 4 altında açıklama 14/20 ikincil; açıklamanın 12 altında 288'lik alan; 16 altında yakınlaştırma satırı (32); 16 altında
   düğmeler. Toplam 512 yüksek. */
.cl-crop-dialog {
    width: 400px; max-width: calc(100vw - 32px); padding: 24px; border-radius: 12px; background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd-text-primary) 10%, transparent);
}
.cl-crop-title { margin: -4px 0 0; font-size: 22px; line-height: 28px; font-weight: 580; color: var(--cd-text-primary); }
.cl-crop-desc { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--cd-text-secondary); }
.cl-crop-area {
    position: relative; display: block; width: 288px; max-width: 100%; aspect-ratio: 1; height: auto; margin: 12px auto 0; padding: 0; border: 0;
    border-radius: 12px; overflow: hidden; background: var(--cd-surface-panel); cursor: grab; touch-action: none; user-select: none; outline: none;
}
.cl-crop-area:active { cursor: grabbing; }
html:not(.cl-pointer) .cl-crop-area:focus-visible { box-shadow: var(--cd-focus-ring); }
.cl-crop-img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; transform-origin: 0 0; user-select: none; }
/* Yuvarlak maske: %50 karartma, ortası radial maskeyle oyulur (referansın kendisi). */
.cl-crop-mask {
    position: absolute; inset: 0; pointer-events: none; background: rgba(0, 0, 0, .5);
    -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(100% - 1px), #000 100%);
    mask-image: radial-gradient(circle closest-side, transparent calc(100% - 1px), #000 100%);
}
.cl-crop-zoom { display: flex; align-items: center; gap: 12px; width: 288px; max-width: 100%; height: 32px; margin: 16px auto 0; }
.cd-page .cl-crop-step { width: 28px; height: 28px; border-radius: 7px; }
.cd-page .cl-crop-step svg { width: 20px; height: 20px; }
/* Soluk hâl referansta %50 (portalın kapalı düğmesi %40). */
.cd-page .cd-btn.cl-crop-step:disabled, .cd-page .cd-btn.cl-crop-reset:disabled { opacity: .5 !important; cursor: default; background: none; }
/* Kaydırıcı (referansın Slider'ı): iz 28 yüksek (32'lik kutuda 2 içeride), köşe 8, %10 zemin; tutamacın ortasına kadar %35 dolgu; tutamaç 24 × 28
   beyaz, köşe 8, 0 0 12 gölge (%24); tutamaç izin içinde 0 … (genişlik − 24) arasında. */
.cl-crop-slider { position: relative; flex: 1 1 auto; min-width: 0; height: 28px; margin: 2px 0; border-radius: 8px;
    cursor: var(--cd-cursor-interactive); touch-action: none; outline: none; }
.cl-crop-slider-track { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--cd-text-primary) 10%, transparent); }
.cl-crop-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cl-crop-t, 0) * (100% - 24px) + 12px);
    background: color-mix(in srgb, var(--cd-text-primary) 35%, transparent); }
.cl-crop-slider-thumb { position: absolute; top: 0; left: calc(var(--cl-crop-t, 0) * (100% - 24px)); width: 24px; height: 28px; border-radius: 8px;
    background: #FFFFFF; box-shadow: 0 0 12px rgba(11, 11, 11, .24); }
html:not(.cl-pointer) .cl-crop-slider:focus-visible .cl-crop-slider-thumb { box-shadow: var(--cd-focus-ring); }
.cl-crop-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.cl-crop-footer-end { display: flex; gap: 8px; }

/* Formlardaki çoklu seçim (kullanıcı bildirimi 2026-11-05: müşteri › Bilgiler › Diğer Cariler'de seçili cari 70 px'e sıkışıp harf harf alt satıra
   kayıyordu; arama girişi yerin çoğunu alıyordu): filtre menülerindeki gibi çipler ve arama girişi aynı satır akışında; çip hiçbir zaman
   bölünmez (tek satır, sığmazsa kutunun genişliğinde "…"), giriş son satırın kalan boşluğunu alır, kutu gerekince aşağı uzar. */
.cd-page .fi-fo-select .choices__inner:has(.choices__list--multiple .choices__item) {
    flex-wrap: wrap;
    height: auto !important;
    min-height: var(--cd-field-h, 32px);
}
.cd-page .fi-fo-select .choices__list--multiple:has(.choices__item) { display: contents; }
.cd-page .fi-fo-select .choices__inner:has(.choices__list--multiple .choices__item) .choices__input--cloned {
    flex: 1 0 0;
    width: auto !important;
    min-width: 0 !important; /* kutuya tıklanmamışken yer kaplamaz: çip tek satırda kalır, kutu 32 */
}
.cd-page .fi-fo-select .choices.is-focused .choices__inner:has(.choices__list--multiple .choices__item) .choices__input--cloned {
    min-width: 48px !important; /* yazarken alan açılır (sığmazsa alt satırda) */
}
.cd-page .fi-fo-select .choices__list--multiple .choices__item {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Son çipin sağ boşluğu yok: tek çip kutuyu tam dolduruyorsa giriş alt satıra düşmesin (kutu 32 kalsın). */
.cd-page .fi-fo-select .choices__list--multiple .choices__item:last-child { margin-right: 0 !important; }

/* FATURA DURUMU — TEK İKONLU ROZET (kullanıcı kararı 2026-11-14; InvoiceStatus; referansın Atlas "Rozet 2" ikonlu rozeti: 20 yüksek, 0 8, köşe 5, ikon 16 + 4, 12/15 500):
   ikon ve tonlu zemin / yazı durumu söyler (Vadesi gelmedi gri saat, Ödenmedi kırmızı ünlem, Kısmen ödendi sarı yarı daire, Ödendi yeşil tik; geç ödenen yeşil tikli saat),
   yazı ödeme zamanlamasını. Üzerine gelince ipucu durumun adını söyler. */
.cl-inv-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}

.cl-inv-badge > svg { flex: none; width: 16px; height: 16px; }

.cl-inv-badge--gray { background: var(--cd-fill-ghost-hover); color: var(--cd-text-secondary); }
.cl-inv-badge--green { background: var(--cd-tint-green-bg); color: var(--cd-tint-green-fg); }
.cl-inv-badge--yellow { background: var(--cd-tint-yellow-bg); color: var(--cd-tint-yellow-fg); }
.cl-inv-badge--red { background: var(--cd-tint-red-bg); color: var(--cd-tint-red-fg); }

/* Müşteri sayfası › Bilgiler › Fiyatlar: portföydeki ürünlerin kodu, liste fiyatı ve müşteri fiyatı; kartın içinde. */
.cl-portfolio-prices {
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border-subtle);
    padding: 8px 16px;
}

.cl-portfolio-prices table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}

.cl-portfolio-prices th {
    padding: 8px 0;
    text-align: left;
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-muted);
}

.cl-portfolio-prices td {
    padding: 10px 0;
    border-top: 1px solid var(--cd-border-subtle);
    color: var(--cd-text-primary);
    font-variant-numeric: tabular-nums;
}

.cl-portfolio-prices th:not(:first-child),
.cl-portfolio-prices td:not(:first-child) {
    text-align: right;
}

.cl-portfolio-prices-empty {
    margin: 0;
    padding: 8px 0;
    color: var(--cd-text-muted);
}

/* Açılır bölüm (kullanıcı kararı 2026-11-06; Müşteri › Bilgiler › Fiyatlar): form bölümüyle aynı yerleşim (solda 224'lük başlık sütunu, 28 aralık,
   sağda içerik, üstte 32 + çizgi + 32), başlığın solunda ok (açıkken 90° döner, 150 ms); içerik 200 ms grid 0fr ↔ 1fr. Referansın "Create agent" bölümü gibi. */
.cl-collapsible-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--cd-border);
}

@media (min-width: 1100px) {
    .cl-collapsible-aside {
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
    }

    .cl-collapsible-aside-head {
        flex: 0 0 var(--cl-aside-w);
        width: var(--cl-aside-w);
    }
}

.cl-collapsible-aside-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    line-height: 20px;
    font-weight: 580;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
}

.cl-collapsible-aside-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--cd-text-secondary);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-collapsible-aside[data-open] .cl-collapsible-aside-chevron {
    transform: rotate(90deg);
}

.cl-collapsible-aside-desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
}

.cl-collapsible-aside-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cl-collapsible-aside-body {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 200ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 200ms;
}

.cl-collapsible-aside[data-open] .cl-collapsible-aside-body {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 200ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0s;
}

.cl-collapsible-aside-inner {
    min-height: 0;
    overflow: clip;
}

/* Açıkken içerik taşabilir (odak halkası, açılır listeler); açılma hareketi boyunca referansın data-animating'i gibi kırpılır (üstten ve yanlardan taşmaya
   izin verir, alttan keser). */
.cl-collapsible-aside[data-open] .cl-collapsible-aside-inner {
    overflow: visible;
    animation: cl-collapsible-clip 200ms;
}

@keyframes cl-collapsible-clip {
    from, to { clip-path: inset(-8px -100vw 0 -100vw); }
}

/* Fiyatlar kartında müşteri fiyatı sütunu: fiyat sağa yaslı, altında ayrıntı satırları gri 13 / 17. */
.cl-portfolio-prices .cl-code-cell { align-items: flex-end; }

/* Kapalıyken bölüm tek satır: açıklama da içerikle birlikte kapanır (kullanıcı kararı 2026-11-06; referansın kapalı bölümü). */
.cl-collapsible-aside-desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cl-collapsible-aside[data-open] .cl-collapsible-aside-desc-wrap {
    grid-template-rows: 1fr;
}

/* Açıklama metni: kapanırken 60 ms'de hemen söner, açılırken 100 ms bekleyip 60 ms'de belirir (referansın duration-fast + delay-100'ü). */
.cl-collapsible-aside-desc {
    opacity: 0;
    transition: opacity 60ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-collapsible-aside[data-open] .cl-collapsible-aside-desc {
    opacity: 1;
    transition-delay: 100ms;
}

.cl-collapsible-aside-desc-inner {
    min-height: 0;
    overflow: clip;
}

/* Kapalıyken üst / alt boşluk da küçülür: bölüm yalnızca başlık satırı kadar. */
@media (max-width: 1099.98px) {
    .cl-collapsible-aside { transition: gap 200ms cubic-bezier(0.165, 0.84, 0.44, 1); }

    .cl-collapsible-aside:not([data-open]) {
        gap: 0;
    }
}

/* Kapalı bölümün özeti sağ sütunda, içeriğin ÜSTÜNDE ve akışta (referansın Collapsible'ı, kare kare ölçüldü 2026-11-06): kapanırken satırın yüksekliği 0 → 20
   büyür ve içeriği aşağı iter, 200 ms'de belirir (opacity + yükseklik, aynı eğri); açılırken söner ve daralır. Dar ekranda yok. */
.cl-collapsible-aside-summary {
    display: none;
}

@media (min-width: 1100px) {
    .cl-collapsible-aside-summary {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        visibility: hidden;
        transition: grid-template-rows 200ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1), visibility 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .cl-collapsible-aside:not([data-open]) .cl-collapsible-aside-summary {
        grid-template-rows: 1fr;
        opacity: 1;
        visibility: visible;
    }

    .cl-collapsible-aside-summary-inner {
        min-height: 0;
        overflow: clip;
        font-size: 14px;
        line-height: 20px;
        color: var(--cd-text-secondary);
    }

    .cl-collapsible-aside-summary-inner > * { display: flex; align-items: center; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-collapsible-aside, .cl-collapsible-aside * { transition: none !important; animation: none !important; }
}

/* İSKONTO ROZETLERİ — portal geneli (kullanıcı kararı 2026-11-06; App\Support\DiscountBadge): ticari / ödeme / özel iskonto gri, net iskonto mor
   (müşteri rozetindeki net parçasıyla aynı), KolayBi sabit iskontosu mavi. Boyut ve biçim durum rozetiyle aynı (20 yüksek değil 18, 11 / 14). */
.cl-disc-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4.5px;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    background: var(--cd-fill-ghost-hover);
    color: var(--cd-text-muted) !important;
}

.cl-disc-badge--net { background: var(--cd-tint-violet-bg); color: var(--cd-tint-violet-fg) !important; }
.cl-disc-badge--fixed,
.cl-disc-badge--accent { background: var(--cd-tint-blue-bg); color: var(--cd-tint-blue-fg) !important; }

/* Müşteri formunun İskonto bölümünde iskonto rozetlerinin yazısı Özel kutusundaki yazı kadar (14 / 20; kullanıcı kararı 2026-11-06); başka yerlerde
   (müşteri rozeti, tablo hücresi) boy değişmez. */
.cl-discount-form .cl-disc-badge {
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Müşteri › İskonto kalemleri arası işaretler: Ticari • Ödeme → Net ↔ KolayBi Sabit; rozet satırıyla aynı dikey ortada
   (etiket 14 + 8 boşluk altında 24'lük rozet). */
.cd-page .cl-discount-form .cl-dv-link {
    display: flex !important;
    flex: none;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin-top: 9px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--cd-text-muted);
}

.cd-page .cl-discount-form > .fi-fo-component-ctn {
    column-gap: 16px !important;
}

/* Küçük segment (referansın Capabilities sayfası "No restrictions | Allowed domains | Blocked domains", atlas: segment › sm 28; kullanıcı kararı 2026-11-07):
   iz 28, köşe 7; seçenek 0 10, köşe 6; başparmak köşe 6. Formda Müşteri Grubu ve Alt Parça Türü seçicileri bu ölçüde (genişlik .cl-segmented--fill ile). */
.cd-page .cl-segmented.cl-segmented--sm {
    height: 28px;
    border-radius: 7px;
}

.cd-page .cl-segmented--sm .cl-segmented-option > span {
    padding: 0 10px;
    border-radius: 6px;
}

.cd-page .cl-segmented--sm > .cl-seg-thumb {
    border-radius: 6px;
}

/* Segment seçenek notu: ad ve gri not (adla aynı boyda) birlikte seçeneğin ortasında. */
.cd-page .cl-segmented--fill .cl-segmented-option > span { justify-content: center; white-space: nowrap; }
.cd-page .cl-seg-name { display: inline-flex; gap: 6px; }
.cd-page .cl-seg-hint { color: var(--cd-text-muted); font-variant-numeric: tabular-nums; }

/* Müşteri › İskonto: etiket ve rozet sütunun solunda aynı hizada. */
.cd-page .cl-discount-form .cl-dv { flex-direction: column; align-items: flex-start !important; text-align: left; }
/* Sütun genişliği rozet kadar (etiket sağa taşar): ayraçlar iki rozetin tam ortasında, etiket ve rozet sol hizalı. */
.cd-page .cl-discount-form .cl-dv { flex: none !important; width: auto !important; min-width: 0 !important; }
.cd-page .cl-discount-form .cl-dv > .cl-dv-label { display: block; width: 0; overflow: visible; white-space: nowrap; }
/* Son sütunun (KolayBi Sabit) başlığı taşmaz: yanında ayraç olmadığı için sütun başlığı kadar geniş. */
.cd-page .cl-discount-form .cl-dv--last > .cl-dv-label { width: auto; }
/* Ticari, Ödeme ve Net birbirine yakın, soldan başlar; KolayBi Sabit biraz ayrı. */
.cd-page .fi-section .cl-discount-form > .fi-fo-component-ctn { justify-content: flex-start !important; column-gap: 16px !important; }
.cd-page .cl-discount-form .cl-dv--last { margin-left: 32px; }
/* KolayBi Sabit satırın en sağına yaslı; başlığı taşmasın diye sütun başlığı kadar geniş. */
.cd-page .cl-discount-form .cl-dv--last { margin-left: auto; }

/* SEKMELİ YAN PANEL (kullanıcı kararı 2026-11-06; referansın Session paneli ölçüldü: sekme 24 yüksek, 0 8, 13/19 500, seçili birincil yazı + %7,5 dolgu
   (köşe 6, yatayda 1 px içeride), diğerleri soluk, üzerine gelince ikincil yazı + ghost dolgu). Şerit panelin başlık satırında, kimlik çipinden önce. */
.cd-page .cl-ptabs { display: inline-flex; align-items: center; gap: 0; margin-inline: -8px 4px; }
.cd-page .cl-ptab {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--cd-text-muted);
    cursor: var(--cd-cursor-interactive);
}
.cd-page .cl-ptab::before {
    content: "";
    position: absolute;
    inset: 0 1px;
    z-index: -1;
    border-radius: 6px;
    transition: background-color var(--cd-dur-fast) var(--cd-ease-out);
}
.cd-page .cl-ptab[aria-selected="true"] { color: var(--cd-text-primary); }
.cd-page .cl-ptab[aria-selected="true"]::before { background: color-mix(in srgb, var(--cd-text-primary) 7.5%, transparent); }
.cd-page .cl-ptab[aria-selected="false"]:hover { color: var(--cd-text-secondary); }
.cd-page .cl-ptab[aria-selected="false"]:hover::before { background: var(--cd-fill-ghost-hover); }
.cd-page .cl-ptab-section[hidden] { display: none; }

/* Sekmeli panelde alt çubuk (₺ | $) sekme değişse de panelin en sağ altında: sarmalayıcılar yüksekliği aktarır. */
.cd-page .cl-detail-panel .fi-modal-content:has(.cl-ptab-sections) { flex: 1 1 auto; padding-bottom: 0 !important; }
.cl-ptab-sections { display: flex; flex: 1 1 auto; flex-direction: column; }
.cl-ptab-section:not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; }
.cl-ptab-section > .cl-detail { flex: 1 1 auto; }
/* Önden yüklenen sekmeli panelin içerik sarmalayıcısı da yüksekliği aktarır: yoksa ₺ | $ içeriğin sonunda kalıyordu. */
.cl-detail-content-slot:has(> .cl-ptab-sections) { display: flex; flex: 1 1 auto; flex-direction: column; }

/* Hesapla panelinde Net Kâr rozetinin ipucu metni altta düz yazı (kullanıcı kararı 2026-11-06; ünlem yok). */
.cl-price-check-note { margin: 8px 0 0; font-size: 13px; line-height: 17px; color: var(--cd-text-muted); }
.cl-price-calc-row dt .cl-margin-badge { margin-left: 4px; vertical-align: 1px; }

/* Hesapla şelalesinde iskonto yüzdeleri rozet: adın yanında 6 boşlukla. */
.cl-price-calc-row dt .cl-disc-badge { margin-left: 6px; vertical-align: 1px; }

/* Hesapla › Satış Fiyatı: giriş alanı kutunun tam yüksekliğinde (32), yazı satırın tam ortasında (kullanıcı bildirimi 2026-11-06; önce 28 yüksekti ve
   yazı 2 px yukarıda duruyordu). */
.cd-page .cl-price-check-field.fi-input-wrp,
.cd-page .cl-price-check-field { min-height: 32px !important; height: 32px; }
.cd-page .cl-price-check-field input { height: 32px !important; min-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 32px !important; }

/* Hesapla şelalesindeki rozetlerin (iskonto oranları, Fatura / Net Kâr marjı) yazısı müşteri fiyatı panelindekiyle aynı: 12 / 500. */
.cd-page .cl-price-calc-row dt .cl-disc-badge,
.cd-page .cl-price-calc-row dt .cl-margin-badge {
    font-size: 12px !important;
    line-height: 18px;
    font-weight: 500;
}

/* Yan panelde Alımlar'daki küçük grafikli kart (Adet · 12 ay): zemini portalın ana zemin rengi, panelden bir ton koyu. */
.cd-page .cl-quickview .cl-quickview-spark.cl-spark-card { background: var(--cd-page-bg); }
/* YAN PANELDEKİ KARTLARIN ZEMİNİ SAYFANIN ANA ZEMİNİ: panele konan her küçük grafikli / yazılı kart (Net Marj, Alımlar, Adet · 12 ay …) panelin
   zemininden ayrışsın diye sayfa zeminini (--cd-page-bg) alır; hangi panel ve sekmede olursa olsun. */
.cd-page .cl-detail-panel :is(.cl-spark-card, .cl-stat-card) { background: var(--cd-page-bg); }

/* Başlık düğmesi baştaki ikonlu (kullanıcı kararı 2026-11-06; "+ Portföye ekle" / "− Portföyden çıkar": portalın "+ Yeni …" artısı): ikon solda 4, yazıya 4. */
.cl-detail-title .cl-detail-open.cl-detail-btn-lead { padding: 0 8px 0 4px; gap: 4px; }
.cl-detail-title .cl-detail-open.cl-detail-btn-lead svg { width: 16px; height: 16px; }

/* TOAST HAREKETİ (referansın Toast'ı ölçüldü 2026-11-06; kullanıcı kararı 2026-11-06): gelirken alttan kendi boyu kadar (%100) yukarı kayar ve belirginleşir,
   giderken küçülür (0,85) ve silinir; ikisi de 200 ms ease-out, dönüşüm kaynağı alt kenar. Filament'in sağdan 48 px kaydırması ve 300 ms'i yerine. */
.fi-no-notification {
    transition-duration: 200ms !important;
    transition-timing-function: var(--cd-ease-out) !important;
    transform-origin: bottom;
}
.fi-no-notification.translate-x-12 { --tw-translate-x: 0px !important; --tw-translate-y: 100% !important; }
.fi-no-notification.scale-95 { --tw-scale-x: 0.85 !important; --tw-scale-y: 0.85 !important; }

/* Düğme meşgulken (kaydediliyor): yazı saklanır, genişlik aynı kalır, ortada 12 px dönen halka (referansın "Save" düğmesi ölçüldü 2026-11-06: halka yazının
   renginde, 1 sn lineer sonsuz dönüş; düğme soluklaşmaz). Filament dışı düğmeler (.cd-btn: Kaydedilmemiş değişiklikler çubuğu vb.). */
.cd-page :is(.cd-btn, .fi-btn):not(.cl-kolaybi-sync)[aria-busy="true"] { position: relative; opacity: 1; pointer-events: none; }
.cd-page :is(.cd-btn, .fi-btn):not(.cl-kolaybi-sync)[aria-busy="true"] { color: transparent !important; --cl-busy-ring: var(--cd-text-primary); }
.cd-page :is(.cd-btn.cd-btn--primary, .fi-btn:is(.fi-color-primary, .fi-btn-color-primary)):not(.cl-kolaybi-sync)[aria-busy="true"] { --cl-busy-ring: var(--cd-on-primary); }
.cd-page :is(.cd-btn, .fi-btn):not(.cl-kolaybi-sync)[aria-busy="true"] > * { visibility: hidden; }
.cd-page :is(.cd-btn, .fi-btn):not(.cl-kolaybi-sync)[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    box-sizing: border-box;
    border: 1.5px solid var(--cl-busy-ring);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cl-btn-spin 1s linear infinite;
}
@keyframes cl-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cd-page :is(.cd-btn, .fi-btn):not(.cl-kolaybi-sync)[aria-busy="true"]::after { animation-duration: 3s; } }

/* Açılır bölümün kapalı özeti zengin (rozetli) olunca: rozetler ve ayraçlar tek satırda ortalı (kullanıcı kararı 2026-11-06; İskonto: %15 • %0 → %15). */
.cl-discount-summary { display: inline-flex; align-items: center; gap: 6px; }
.cl-discount-summary .cl-dv-sep { display: inline-flex; align-items: center; color: var(--cd-text-muted); }
.cl-discount-summary .cl-dv-gap { width: 10px; }
@media (min-width: 1100px) {
    .cl-collapsible-aside .cl-collapsible-aside-summary--rich { display: inline-flex; align-items: center; height: 20px; }
}
.cd-page .cl-discount-summary .cl-dv-sep { height: 16px; margin: 0; padding: 0; line-height: 0; align-self: center; transform: none; }

/* ROZETLERDE İMLEÇ HER ZAMAN OK — PORTAL GENELİ KURAL: rozetin / etiketin / çipin üzerine gelince (ipucu çıksa da çıkmasa da)
   yazı imleci (I) ya da el çıkmaz, imleç ok kalır; içindeki yazı da dahil. Bir bağlantı ya da düğmenin İÇİNDEKİ rozet de ok gösterir. */
:is(.cl-status-badge, .cl-margin-badge, .cl-disc-badge, .cl-grade-badge, .cl-suggest-badge, .cl-tag, .cl-id-chip, .cl-change, .cl-you, .cl-cust-badges, .fi-badge, .cl-cust-group, .cl-cust-pay, .cl-cust-disc, .cl-cust-badge, .cl-fabric, [data-cd-tip]:not(a, button, [role="button"], input, label, summary)),
:is(.cl-status-badge, .cl-margin-badge, .cl-disc-badge, .cl-grade-badge, .cl-suggest-badge, .cl-tag, .cl-id-chip, .cl-change, .cl-cust-badges, .fi-badge, .cl-cust-badge) * {
    cursor: default !important;
}

/* ÜRÜN SAYFASI › ANALİZ › Müşterilere Göre: Satış Özeti'nin ızgarası, başlıklar tek satırda; müşteri adı kısalır. */
.cl-pc .cl-ms2-head > * { white-space: nowrap; }
.cl-pc .cl-ms2-month.cl-truncate { overflow: hidden; text-overflow: ellipsis; padding-left: 0; min-width: 0; }
.cl-pc .cl-pc-rows { display: contents; }

/* MÜŞTERİ TEMSİLCİSİ SEÇİCİ (kullanıcı kararı 2026-11-06; referansın Deployments › Credential vaults › "Add vault" düğmesi ve açılan menüsü ölçüldü: menü 320 geniş,
   popover zemini, köşe 12, panel gölgesi, üstte 37 yüksek arama (8 16, altında çizgi), satırlar iki satırlı: ad 14 / 20, altında 13 / 17 soluk). Seçili temsilci
   aynı iki satırlı kalıpla satır; solda profil resmi 32, sağda kaldır. */
.cl-rep { position: relative; }

.cl-rep-add { position: relative; display: inline-block; }

/* "Temsilci ekle" düğmesi referansın "Add vault" düğmesi gibi (ölçüldü): BOYASIZ (şeffaf zemin, çerçeve yok), 32 yüksek, köşe 8, solda 16 px artı simgesi + 6 + 14 / 20 yazı;
   üzerine gelince ve menü açıkken hayalet zemin (60 ms). */
.cl-rep-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px; /* referansın "Add vault" düğmesi 28 */
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
    transition: background-color 60ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-rep-trigger[aria-disabled="true"] { opacity: 0.4; background: transparent; cursor: default; }

/* "+ … EKLE" DÜĞMESİNİN ÜSTÜNDEKİ KARTTAN UZAKLIĞI (kullanıcı kararı 2026-11-09; referansta Agents › Tools kartının altındaki "Add MCP server" ölçüldü: kartın alt kenarından düğme kutusunun üstüne
   16 (kartın alt kenarından düğmedeki ikonun görünen kenarına 24); portal geneli: kartın / satır listesinin alt kenarından "+ … ekle" kutusuna 16). */
.cl-rcp-cards ~ .cl-rcp-footer { margin-top: 8px; } /* alıcı seçici: kartlar arası gap 8 + 8 = 16 */
.cl-rcp-cards + .cl-rcp { margin-top: 16px; } /* makbuz sayfası: kartlar ile "+ Alıcı ekle" satırı */

/* Alıcılar alt satırı: solda "+ Alıcı ekle", sağ uçta (varsa) ek eylem, ör. "+ Yetkili kişi ekle". */
.cl-rcp-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }

/* ÇİFT KATLI GRİ KART (kullanıcı kararı 2026-11-09; referansın Agents › Configuration › Tools kartı, ölçüldü: zemin %5 beyaz, köşe 12, dış çerçeve = içeride 1 px %10 halka (shadow-card-ring), katlar 1 px %10 çizgiyle ayrılır):
   üst kat başlık satırı (12 16), alt kat içerik (16); Çek İşlemleri çek kartları. */
.cd-page .cl-tier-cards .fi-fo-repeater-item {
    background: var(--cd-fill-field, color-mix(in srgb, var(--cd-text-primary) 5%, transparent)) !important;
    box-shadow: var(--cd-field-ring) !important;
    border-radius: 12px;
}

.cd-page .cl-tier-cards .fi-fo-repeater-item-content { border-top: 1px solid var(--cd-border-subtle-strong, color-mix(in srgb, var(--cd-text-primary) 10%, transparent)); }

/* Çek kartı (kullanıcı kararı 2026-11-09; referansın Built-in tools kartı): üst kat başlık + sağda içeride × (Filament silme eylemi, çöp kutusu değil); alt kat "Çek bilgileri" satırı
   (.cl-card-row, "Tool permissions" gibi: 1 px çizgiyle ayrılı, üzerine gelince hayalet zemin, solda ok) ve açıkken alanlar (.cl-cheque-fields). */
.cd-page .cl-tier-cards .fi-fo-repeater-item-content { padding: 0; }
.cd-page .cl-tier-cards .fi-fo-repeater-item-content > .fi-fo-component-ctn { gap: 0 !important; row-gap: 0 !important; }
.cd-page .cl-tier-cards .cl-cheque-fields { padding: 16px; border-top: 1px solid var(--cd-border-subtle); }

/* ÇEK KARTI BAŞLIĞI (kullanıcı kararı 2026-11-09; referansın Agents › Tools › Built-in tools kartı ölçüldü): dolgu 12, öğeler arası 12; solda 32 × 32 ikon karosu (zemin yüzey-3 = açılır menü zemini,
   1 px %10 çerçeve, köşe 8,64 = 0,27 × 32, gölge shadow-sm, ikon 20), yanında başlık 14/20 500 ve altında 13/19 soluk özet; sağda 24 × 24 ×. */
.cd-page .cl-tier-cards .fi-fo-repeater-item-header { padding: 12px; gap: 12px; }
.cd-page .cl-tier-cards .fi-fo-repeater-item-header h4 { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; font-weight: 400; }
.cl-card-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--cd-border);
    border-radius: 8.64px;
    background: var(--cd-surface-popover);
    box-shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--cd-text-primary);
}
:root.dark .cl-card-tile { box-shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 2px 8px rgba(0, 0, 0, 0.24); }
.cl-card-tile svg { width: 20px; height: 20px; }
.cl-card-titles { display: flex; flex-direction: column; min-width: 0; }
.cl-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); }
.cl-card-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 19px; font-weight: 400; color: var(--cd-text-muted); }
.cd-page .cl-tier-cards .fi-fo-repeater-item-header .fi-icon-btn { width: 24px; height: 24px; margin: 0; border-radius: 6px; }
.cd-page .cl-tier-cards .fi-fo-repeater-item-header .fi-icon-btn svg { width: 16px; height: 16px; }

/* "Bilgiler" şeridi (referansın Tool permissions satırı): kap tüm şerit (üzerine gelince hayalet zemin), solda açma düğmesi (dolgu 12 16, 14/20 normal, ikincil renk), sağ uçta küçük "Karekodu tara" düğmesi. */
.cl-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-right: 16px;
}

@media (hover: hover) {
    .cl-card-row:hover { background: var(--cd-fill-ghost-hover); }
}

.cl-card-row__toggle {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 12px 0 12px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-align: left;
    color: var(--cd-text-secondary);
    cursor: var(--cd-cursor-interactive);
}

html:not(.cl-pointer) .cl-card-row__toggle:focus-visible { outline: 0; box-shadow: var(--cd-focus-ring); }

.cl-card-row > .cd-btn { flex: none; }

.cl-card-head__extra { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px; }

.cl-card-row__chevron { display: inline-flex; flex: none; color: inherit; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.cl-card-row__chevron svg { width: 16px; height: 16px; }
.cl-card-row__chevron.is-open { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .cl-card-row__chevron { transition: none; }
}

/* Çekler alt satırı: solda "+ Çek ekle", sağda "İmzala". */
.cl-cheque-actions { display: flex; align-items: center; gap: 12px; }

/* İmza çubuğu: Alıcılar'ın altında, çizgiyle ayrılı; solda soluk özet, sağda İmzala. */

.cl-rep-trigger svg { width: 16px; height: 16px; flex: none; }

.cl-rep-trigger:hover,
.cl-rep-trigger[aria-expanded="true"] { background: var(--cd-fill-ghost-hover); }

html:not(.cl-pointer) .cl-rep-trigger:focus-visible { box-shadow: var(--cd-focus-ring); outline: 0; }

.cl-rep-row,
.cl-rep-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cl-rep-row {
    padding: 8px 8px 8px 12px;
    border-radius: 12px;
    /* Seçili temsilci gri zeminli kart: alıcı kartlarıyla (.cl-rcp-card) aynı zemin ve aynı çerçeve (kart halkası, aşağıda). */
    background: var(--cd-fill-field, color-mix(in srgb, var(--cd-text-primary) 5%, transparent));
    box-shadow: var(--cd-field-ring);
}

.cl-rep-row .cd-btn { margin-left: auto; flex: none; }

/* LOGO YÜKLEME: logo yokken "+ Logo ekle" (yukarıdaki boyasız .cl-rep-trigger); logo varken küçük önizleme (en çok 32 yüksek,
   128 geniş) ve yanında standart (32) çöp kutusu ikon düğmesi. */
.cl-logo-row { display: flex; align-items: center; gap: 8px; min-height: 32px; }

.cl-logo-thumb { display: block; max-height: 32px; max-width: 128px; width: auto; height: auto; object-fit: contain; }

.cl-rep-text { display: flex; flex-direction: column; min-width: 0; }

.cl-rep-name { font-size: 14px; line-height: 20px; color: var(--cd-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cl-rep-mail { font-size: 13px; line-height: 17px; color: var(--cd-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cl-rep-avatar { display: inline-flex; flex: none; }

.cl-rep-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    max-height: 320px;
    background: var(--cd-surface-popover);
    border-radius: 12px;
    box-shadow: var(--cd-shadow-panel, 0 2px 8px rgba(0, 0, 0, .24)), inset 0 0 0 1px var(--cd-border);
    overflow: hidden;
}

/* Altta yer yoksa menü düğmenin üstüne açılır (cover-lab-panel.js "KİŞİ EKLEME MENÜSÜ HER ZAMAN GÖRÜNÜR"). */
.cd-page .cl-rep-menu[data-cl-flip="up"] { top: auto; bottom: calc(100% + 6px); }

.cl-rep-search {
    flex: none;
    height: 37px;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid var(--cd-border-subtle);
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    outline: 0;
    box-shadow: none;
}

/* Arama kutusunda odak çizgisi / halkası YOK (referansın menüsü: yalnızca imleç; kullanıcı bildirimi 2026-11-06: mavi çizgi çıkıyordu). Kural KAPSAYICIYA BAĞLI DEĞİL, menünün kendisine bağlı (.cl-rep-menu): kişi ekleme menüsü hangi kapta çizilirse çizilsin (Temsilci ekle `.cl-rep`, Alıcı ekle `.cl-rcp`) mavi çizgi çıkmaz (kullanıcı bildirimi 2026-11-09: kap değişince çıkıyordu; kalıcı çözüm, `ThemeStandardTest`). */
.cd-page .cl-rep-menu .cl-rep-search:focus {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: var(--cd-border-subtle) !important;
}

.cl-rep-search::placeholder { color: var(--cd-text-muted); }

.cl-rep-list { overflow-y: auto; padding: 4px; }

.cl-rep-option {
    width: 100%;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: var(--cd-cursor-interactive);
}

.cl-rep-option:hover { background: var(--cd-fill-ghost-hover); }

html:not(.cl-pointer) .cl-rep-option:focus-visible { background: var(--cd-fill-ghost-hover); outline: 0; }

/* Menünün alt satırı (referansın Skills menüsündeki "+ Create skill" satırı, ölçüldü 2026-11-09): 1 px çizgi (kenarlardan 12, üst / alt 4), altında 32 yüksek, 0 12, köşe 8, ikon + yazı aralığı 8 satır; menü iç boşluğu 4. */
.cl-rep-menu-sep { flex: none; height: 1px; margin: 4px 16px; background: var(--cd-border); }
.cl-rep-menu-footer { flex: none; padding: 0 4px 4px; }
.cl-rep-menu-footer .cl-contact-add { display: block; }
.cl-rep-footer-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; line-height: 20px; color: var(--cd-text-primary); text-align: left; cursor: var(--cd-cursor-interactive); }
.cl-rep-footer-item svg { flex: none; width: 20px; height: 20px; }
/* MENÜ İÇİ "+ … EKLE" SATIRLARININ ARTISI — PORTAL GENELİ (kullanıcı kararı 2026-11-12; referansın "+ Create skill" satırındaki simge ölçüldü: 20 px, SOLUK renk rgb(137,135,129) = --cd-text-muted, yazı birincil
   renkte kalır): şekil referansın artısı (cl-menu-plus: 20 px kutuda 14,2 px görünür boy, çizgi ≈1,4 px; ok cl-menu-arrow-up-right: 16 px kutuda 10,8 px, çizgi ≈1,3 px); yeni menü içi ekleme satırı da bu sınıfla yazılır, kendi artı rengi yazılmaz. */
.cl-rep-footer-item > svg:first-child,
.cl-rep-footer-item > .cl-select-footer__plus { color: var(--cd-text-muted); }
/* Portal bütün ikonlarda çizgiyi ekranda sabit 1,25 px yapar (vector-effect + --cd-icon-stroke); menü içi ekleme satırının artısı ve oku referansın ölçüsünde (artı ≈1,4 px, ok ≈1,3 px; Anthropicons
   glifleri tuvalde büyütülüp ölçüldü, kullanıcı kararı 2026-11-12) ayrı yazılır. */
html .cd-page .cl-rep-footer-item > svg:first-child :is(path),
html .cd-page .cl-rep-footer-item > .cl-select-footer__plus svg :is(path) { stroke-width: 1.4px; }
html .cd-page .cl-rep-footer-item .cl-ext-icon :is(path) { stroke-width: 1.3px; }
.cl-rep-footer-item:hover { background: var(--cd-fill-ghost-hover); }
.cl-rep-footer-item[aria-disabled="true"] { opacity: .4; }
.cl-rep-footer-item[aria-disabled="true"]:hover { background: transparent; }

.cl-rep-empty { margin: 0; padding: 12px; font-size: 14px; line-height: 20px; color: var(--cd-text-muted); }

/* E-posta HİÇBİR ZAMAN iki satıra bölünmez (kullanıcı kararı 2026-11-06; ör. ".com.tr"nin "tr"si alt satıra düşüyordu): bağlantılı e-posta tek satır. */
a.cl-contact-link[href^="mailto:"] {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* DÜZENLEME PANELİ (kullanıcı kararı 2026-11-06; EditsInPanel): (1) alt çubuk (İptal / Kaydet) panelle aynı koyu zeminde, altta farklı tonda açık bir şerit
   kalmaz; (2) rol gibi kart seçeneklerde radyo işareti kartın satırında dikey ortalı (üste yapışık değil). */
.cd-page .cl-detail-panel .fi-modal-footer {
    background-color: transparent;
    border-top-width: 0; /* üstte çizgi yok */
    /* İptal / Kaydet panelin en altına değil, formun hemen altına. */
    position: static;
    margin-top: 0;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* İçerik kalan boşluğu doldurmaz (Filament flex-1): alt çubuk içeriğin hemen altında durur. Alt çubuğu olmayan (hızlı bakış) panelde etkisi yok:
   içerik zaten doğal yüksekliğinde. */
.cd-page .cl-detail-panel .fi-modal-content:has(~ .fi-modal-footer) {
    flex: none;
}

.cl-detail-panel .cl-option-card {
    align-items: center;
}

.cl-detail-panel .cl-option-card .cl-option-card-mark {
    margin-top: 0;
}

/* FORM ALANLARINDA YAZI KUTUNUN SATIR ORTASINDA (kullanıcı kararı 2026-11-06; telefon ülke kodu + numara, İsim, E-posta …): alan kutusu 32, içindeki
   giriş / açılır liste 30 (5 + 20 + 5) ve kutunun üstüne yapışıyordu: yazı 1 px yukarıdaydı. Kutu 1 px iç boşlukla içeriği ortalar (kutu 32 kalır). */
.cd-page .fi-fo-field-wrp .fi-input-wrp-input:is(:has(> input.fi-input), :has(> div > .choices)) {
    padding-block: 1px;
}

/* Alt parça türünün ikonu başka bir yazının solunda (panel başlığı, genel bakış satırı, işlem kayıtları; kullanıcı kararı 2026-11-07). */
.cl-detail-title-icon .cl-part-icon {
    width: 18px;
    height: 18px;
}

.cl-overview-row-text > .cl-part-icon,
.cl-part-inline > .cl-part-icon {
    color: var(--cd-text-secondary);
}

.cl-part-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

/* İMZA ALANI (kullanıcı kararı 2026-11-08; çek makbuzu): tek tuval, parmakla imza. Zemin alan zemini, köşe 8, halka alanlarınki; sayfa imza atarken kaymaz
   (touch-action: none). Çizgi koyu modda açık mavi, açıkta koyu mavi (makbuza her zaman koyu mavi mürekkep gider); imza alanında yazı yok. */
.cl-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.cl-sign-pad { position: relative; width: 100%; }

.cl-sign-canvas {
    display: block;
    width: 100%;
    height: 160px;
    border-radius: 8px;
    background: var(--cd-field-bg, var(--cd-page-bg));
    box-shadow: inset 0 0 0 1px var(--cd-border);
    touch-action: none;
}

/* TAM EKRAN İMZA FORMU (kullanıcı kararı 2026-11-09; pencere değil): sayfanın, üst çubuğun ve kenar menünün üstünü tamamen kaplar. Üstte başlık + ×, ortada kayan gövde (özet + imza alanı),
   altta Temizle (solda) ve Kaydet (sağda). İmza alanı çerçeveli, ana zeminde; yüksekliği ekrana göre. */
.cl-sign-screen {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: var(--cd-page-bg);
    color: var(--cd-text-primary);
}

.cl-sign-screen__bar,
.cl-sign-screen__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 12px 16px;
}

/* Alt çubuk düğmeleri formun alt çubuğuyla AYNI yerleşimde (kullanıcı kararı 2026-11-10; .cl-form-footer): yanlardan form sütununun kenar boşluğu (24; geniş ekranda 768'lik form
   sütununun kenarı), üst / alt 12, düğmeler arası 12, asıl işlem grubu sağda. Çizgi tam genişlikte kalır. */
.cl-sign-screen__bar,
.cl-sign-screen__foot {
    position: relative;
    padding-inline: max(24px, calc((100% - 768px) / 2));
}
.cl-sign-screen__foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* Ayırıcı çizgiler (başlığın altındaki ve düğmelerin üstündeki) formlardaki çizgiyle AYNI genişlikte: ekranın tamamı değil form sütunu kadar (24 kenar,
   geniş ekranda 768), rengi formun alt çubuğunun çizgisi (--cd-border). */
.cl-sign-screen__bar::after,
.cl-sign-screen__foot::before {
    content: "";
    position: absolute;
    left: max(24px, calc((100% - 768px) / 2));
    right: max(24px, calc((100% - 768px) / 2));
    height: 1px;
    background: var(--cd-border);
}
.cl-sign-screen__bar::after { bottom: 0; }
.cl-sign-screen__foot::before { top: 0; }
.cl-sign-screen__foot .cl-sign-screen__save { margin-left: auto; }

.cl-sign-screen__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; color: var(--cd-text-primary); }

.cl-sign-screen__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-sign-screen__summary-line { margin: 0; font-size: 14px; line-height: 20px; color: var(--cd-text-muted); }

/* İmza alanı: özet ile alt çubuğun çizgisi arasındaki bütün boşluk, kenardan kenara, çerçevesiz. Tuval alanı tamamen doldurur; imzanın yerini yalnızca bir çizgi gösterir. */
.cl-sign-screen__pad { position: relative; flex: 1; min-height: 220px; }
.cl-sign-screen__pad .cl-sign,
.cl-sign-screen__pad .cl-sign-pad { position: static; }
.cl-sign-screen .cl-sign-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: 0; background: transparent; box-shadow: none; }

/* Kâğıdı imzalar gibi: "Teslim alan" ve uygulamayı açan kişinin adı alanın ortasında, biraz yukarıda (makbuzun PDF'indeki yazıyla aynı: ikisi 16/22, rol normal, ad kalın, birincil renk);
   imza bu yazının altına atılır; çizgi yok. Tuval alanın tamamını kaplar, yazı tuvalin altındadır (dokunmayı engellemez). */
.cl-sign-screen__paper {
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: calc(100% - 48px);
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.cl-sign-screen__role { font-size: 16px; line-height: 22px; font-weight: 400; color: var(--cd-text-primary); }
.cl-sign-screen__name { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--cd-text-primary); }

/* ÇEK TARAMA › MAKBUZ: karekod panelinin altındaki "okundu" notu, alıcı satırı, "Makbuzu oluştur" düğmesinin yeri ve sonuç ekranı. */
.cl-cheque-scan__ok { margin: 0; font-size: 14px; line-height: 20px; color: var(--cd-text-primary); }

.cl-receipt-done { display: flex; flex-direction: column; gap: 16px; }

.cl-receipt-done__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.cl-receipt-done__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--cd-text-primary); }

.cl-receipt-done__list { margin: 0; display: grid; gap: 8px; }

.cl-receipt-done__list > div { display: flex; gap: 16px; font-size: 14px; line-height: 20px; }

.cl-receipt-done__list dt { width: 120px; flex: none; color: var(--cd-text-muted); }

.cl-receipt-done__list dd { margin: 0; color: var(--cd-text-primary); }

.cl-receipt-done__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

.cl-receipt-done__head-actions { display: flex; align-items: center; gap: 8px; }

.cl-receipt-recipients__count { margin-left: 8px; font-size: 13px; line-height: 17px; font-weight: 400; color: var(--cd-text-muted); }

.cl-rcp-tick__note { color: var(--cd-text-muted); }
.cl-rcp-tick__addr { display: inline-block; color: inherit; /* adres / numara birincil renkte (koyuda beyaz); yöntemi olmayan satır .is-off ile soluk */ overflow-wrap: anywhere; }
.cl-rcp-tick__text { min-width: 0; }
.cl-rcp-wa { display: inline-block; vertical-align: -1.4px; line-height: 0; color: inherit; } /* ikonun GÖRÜNEN alt kenarı (çizim 24 ızgarada 3–21 arası, çizgi payıyla) numaranın rakamlarının alt kenarıyla (taban çizgisi) aynı hizada */
.cl-rcp-wa svg { display: block; width: 16px; height: 16px; }
.cl-rcp-dot { color: var(--cd-text-muted); }
.cl-rcp-sent { display: inline-flex; align-items: flex-start; gap: 4px; min-width: 0; }
/* Gönderilmiş yöntem: telefonda (< 768) yalnızca uçak + ipucu; diğer ekranlarda uçak ve yanında açık yazı, ipucu yok. */
.cl-rcp-sent--phone { display: none; }
@media (max-width: 767px) {
    .cl-rcp-sent--phone { display: inline-flex; }
    .cl-rcp-sent--wide { display: none; }
}
.cl-rcp-tick { max-width: 100%; }
.cl-rcp-tick__note--failed { color: var(--cd-text-danger); }
.cl-rcp-tick__note--sent { color: var(--cd-text-success, #1a8a4a); }

/* Sil: tehlikeli düğme (kırmızı, beyaz yazı; portal standardı), sağ uçta. */

/* MAKBUZ ALICILARI (kullanıcı kararı 2026-11-09; referansın Agents › Configuration › Tools kartı ölçüldü: kart köşe 12, %5 alan zemini, 516 geniş; satır dolgusu
   4 16 4 12, satırları ayıran 1 px %10 çizgi; kartlar arası 8). Kart: üstte profil resmi (32) + ad 14/20 + altında 13/17 soluk + sağda kaldır; altında, çizgiyle
   ayrılmış satırda YALNIZCA gönderim tikleri (E-posta, WhatsApp). "+ Alıcı ekle" temsilci seçicisinin boyasız düğmesi ve menüsüdür (.cl-rep-*). */
.cl-rcp { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }

.cl-rcp-cards { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.cl-rcp-item { display: flex; width: 100%; }

.cl-rcp-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    background: var(--cd-fill-field, color-mix(in srgb, var(--cd-text-primary) 5%, transparent));
    /* KART HALKASI: referansın bütün gri kartları (Tools kartı vb.; shadow-card-ring) zemin %5 + içeride 1 px %10 halka taşır. */
    box-shadow: var(--cd-field-ring);
}

/* Üst kat: profil resmi + ad + e-posta, sağda içeride × (kaldır). Kart açılır-kapanır değil. */
.cl-rcp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 8px 8px 8px 12px;
    color: var(--cd-text-primary);
}

/* Kart başlığı: 20 px profil resmi + kişinin tam adı; e-posta ve telefon altta tiklerin yanında. */
.cl-rcp-head { gap: 8px; min-height: 40px; box-sizing: border-box; } /* × olsa da olmasa da başlık aynı yükseklikte: tik değişince kart boyu oynamaz */
.cl-rcp-card { overflow: hidden; } /* başlık zemini kartın köşelerine uyar */
.cl-rcp-head--toggle { cursor: var(--cd-cursor-interactive); transition: background-color 60ms; }
@media (hover: hover) { .cl-rcp-head--toggle:hover { background: var(--cd-fill-ghost-hover); } }
html:not(.cl-pointer) .cl-rcp-head--toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cd-text-accent); }
.cl-rcp-head--toggle > .cl-card-row__chevron { color: var(--cd-text-muted); }
/* Kapalıyken adın sağında seçili yöntemlerin ikonları (+ gönderilmişse yeşil uçak). */
.cl-rcp-summary { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--cd-text-muted); }
.cl-rcp-summary__icon { display: inline-flex; }
.cl-rcp-summary__icon svg { width: 16px; height: 16px; }
.cl-rcp-summary__icon--sent { color: var(--cd-text-success, #0CA30C); }
/* Gövde (tikler): referansın disclosure'ı gibi yükseklik 0fr ↔ 1fr, 200 ms. */
.cl-rcp-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms cubic-bezier(0.165, 0.84, 0.44, 1); }
.cl-rcp-body.is-open { grid-template-rows: 1fr; }
.cl-rcp-body__inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .cl-rcp-body { transition: none; } }
.cl-rcp-name { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }

.cl-rcp-head .cd-btn { flex: none; }

.cl-rcp-ticks {
    display: flex;
    flex-direction: column; /* üstte E-posta, altında WhatsApp */
    align-items: flex-start;
    gap: 6px;
    padding: 8px 16px 8px 12px;
    border-top: 1px solid var(--cd-border-subtle);
}

.cl-rcp-tick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--cd-text-primary); }

.cl-rcp-tick.is-off { color: var(--cd-text-muted); }

/* ÇEK TARAMA › SONUÇ: makbuz oluşunca gönderim satırları: solda alıcı (ad + yöntem · adres), sağda durum ya da "WhatsApp'ta gönder". */
.cl-receipt-cards { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }

.cd-page .cl-tier-cards .cl-readonly-fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }

.cd-page .cl-receipt-cards .fi-fo-repeater-item-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.cd-page .cl-receipt-cards .fi-fo-repeater-item-header .fi-badge { flex: none; width: auto; }

.cl-readonly-fields dt { font-size: 13px; line-height: 17px; font-weight: 500; color: var(--cd-text-muted); }

.cl-readonly-fields dd { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--cd-text-primary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.cl-receipt-done__sub { margin: 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); }

.cl-receipt-done__empty { margin: 0; font-size: 14px; line-height: 20px; color: var(--cd-text-muted); }

.cl-rcp-empty { margin: 0; font-size: 14px; line-height: 20px; color: var(--cd-text-muted); }

/* ÜRÜN AĞACI: sürüklenen kaynak kart tutulduğu yerden kaybolur */
.cl-tree-card.is-dragging { visibility: hidden; } /* görünmez ama yeri tutulur: satırlar bırakılınca kapanır */

/* Kalem tablolarında değerin yanındaki gri not (değişim yüzdesi, alış tarihi): 12 / 17 soluk, aynı satırda (satır yüksekliği sabit). */
.cl-ms2-sub {
    margin-left: 6px;
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-muted);
}

/* Makbuz yan paneli: kartların (çek / kart işlemi) altındaki Toplam satırı kartlardan 12 aşağıda. */
.cl-detail .cl-receipt-cards + .cl-detail-list { margin-top: 12px; }

/* Makbuz yan paneli › Gönderimler: alıcılar standart kişi gösterimiyle (profil resmi + ad + e-posta), sağda yöntem ve durum rozetleri. */
.cl-delivery-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cl-delivery-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-delivery-person .cl-rep-text { flex: 1; }
.cl-delivery-states { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.cl-delivery-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; color: var(--cd-text-muted); }

/* ÇEK KAREKODU POPUP'I: kamera çek kartında değil gövdeye taşınan pencerede açılır; sol üstte ×; karekod okununca bilgiler kendiliğinden yazılır ve pencere kapanır
   (Kaydet düğmesi yok). Telefonda tam ekran, geniş ekranda ortada 448'lik pencere (köşe 12, arka plan karartılı). */
html.cl-scan-open { overflow: hidden; }
.cl-scan-popup {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    flex-direction: column;
    background: var(--cd-surface-popover);
    color: var(--cd-text-primary);
}
.cl-scan-popup[x-cloak] { display: none; }
.cl-scan-popup__top { flex: none; display: flex; align-items: center; justify-content: flex-end; padding: 12px 16px; }
.cl-scan-popup__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; }
.cl-scan-popup .cl-cheque-scan__camera { width: 100%; }
@media (min-width: 640px) {
    .cl-scan-popup {
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
        width: 448px;
        max-height: min(720px, calc(100dvh - 48px));
        border-radius: 12px;
        box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--cd-backdrop, #000) 50%, transparent), inset 0 0 0 1px var(--cd-border);
    }
}

/* Karekod okununca (cover-lab-panel.js clChequeScan.apply): yazı eğriyle solar, yeşil halka dönerek birleşir, içinde tik çizilir. */
.cl-cheque-scan__hint { transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.cl-cheque-scan__hint.is-gone { opacity: 0; transform: translateY(6px); }
.cl-scan-done { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; opacity: 0; pointer-events: none; }
.cl-scan-done.is-on { opacity: 1; }
.cl-scan-done__ring, .cl-scan-done__tick { stroke: var(--cd-fill-accent, #2A78D6); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cl-scan-done__ring { stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transform-origin: 22px 22px; transform: rotate(-90deg); }
.cl-scan-done__tick { stroke-dasharray: 30; stroke-dashoffset: 30; }
.cl-scan-done.is-on .cl-scan-done__ring { animation: cl-scan-ring 700ms cubic-bezier(0.4, 0, 0.2, 1) 250ms forwards; }
.cl-scan-done.is-on .cl-scan-done__tick { animation: cl-scan-tick 280ms cubic-bezier(0.4, 0, 0.2, 1) 950ms forwards; }
@keyframes cl-scan-ring { from { stroke-dashoffset: 119.4; transform: rotate(-90deg); } to { stroke-dashoffset: 0; transform: rotate(270deg); } }
@keyframes cl-scan-tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cl-scan-done.is-on .cl-scan-done__ring { animation-duration: 1ms; } }

/* Karekod yakalanınca görüntü donar ve hafif kararır: üstündeki yeşil halka / tik net görünsün (clChequeScan.apply). */
.cl-cheque-scan__camera video { transition: filter 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.cl-cheque-scan__camera.is-frozen video { filter: brightness(0.55); }

/* Gönderildi = yeşil kâğıt uçak: alıcı kartındaki yöntem tikinin yanında ve yan panel Gönderimler'de; yazı iki yöntem de gönderilince sığmıyordu. */

.cl-sent-check svg { width: 16px; height: 16px; flex: none; }
.cl-sent-check { display: inline-flex; align-items: center; color: var(--cd-text-success, #0CA30C); }

/* Gönderilmiş alıcıda yöntem tikleri ALT ALTA, her birinin yanında "· ✈ · gönderen · tarih saat". */
.cl-rcp-ticks.is-stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.cl-rcp-ticks.is-stacked .cl-rcp-tick { flex-wrap: wrap; }

/* Gönderilmiş yöntem satırı: başta yeşil kâğıt uçak, yanında "Yöntem · gönderen · tarih saat"; uzun ad alt satıra asılı girintiyle kıvrılır, tarih bölünmez. */
.cl-rcp-sent-icon { display: inline-flex; height: 20px; align-items: center; color: var(--cd-text-success, #0CA30C); }
.cl-rcp-sent-icon svg { width: 16px; height: 16px; }
.cl-rcp-sent-text { min-width: 0; overflow-wrap: anywhere; color: var(--cd-text-muted); } /* uçaktan sonraki yazı gri; gönderilmemiş tikler normal renkte kalır */
.cl-rcp-nowrap { white-space: nowrap; }

/* BAŞTA İKONLU 32'LİK DÜĞME (kullanıcı kararı 2026-11-09; Makbuz formu İmzala, imza ekranı Gönder): standart sol 8 / sağ 12, ikon–yazı 4
   (§9.8 BUTON / BAĞLANTI İKON STANDARDI). Taban .cd-btn'nin 0 12'si ikonlu düğmede soldan 4 fazla bırakıyordu. */
.cd-page .cl-form-main .cd-btn:not(.cd-btn--icon):has(> svg:first-child),
.cl-sign-screen .cd-btn:not(.cd-btn--icon):has(> svg:first-child) {
    padding-left: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------
 * TARİH ALANI — TEK satır: alan yüksekliğinde hücre (köşe 8, alan zemini + halka, yazı 14/20); boşken soluk "Tarih seçin", seçilince "10 Ara 26",
 * sağda aşağı ok 16 (soluk). Basınca takvim hücrenin 6 altında küçük açılır yüzey: popover zemini, köşe 12, 1 px %10 halka + 0 8 24 / 0 2 6 gölge; iç 8, 196 geniş:
 * başlık 32 (oklar 24 hayalet, ay adı 14/20 500), gün adları 28 (12/17 soluk), günler 28 × 28 köşe 8, satır aralığı 2, bugün vurgu renginde 580, seçili vurgu dolgulu,
 * kapalı gün %35, ayın dışındaki günler boş. Referansın tarih alanı / takvimi platform.claude.com'da ölçüldü; bileşen App\Filament\Forms\Components\DateField.
 * ------------------------------------------------------------------------------------------------------------------------------------------------------ */
.cd-page .cl-datef { width: 100%; }

.cd-page .cl-datef__select {
    display: flex;
    align-items: center;
    height: var(--cd-field-h, 32px);
    border-radius: var(--cd-radius);
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    transition: box-shadow 150ms;
}

@media (hover: hover) {
    .cd-page .cl-datef__select:hover:not(:focus-within):not(#cd-state) { box-shadow: var(--cd-field-ring-hover, var(--cd-field-ring)); }
}

.cd-page .cl-datef__select:focus-within { box-shadow: var(--cd-focus-ring); }

.cd-page .cl-datef__trigger {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 12px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: var(--cd-cursor-interactive);
    outline: none;
}

.cd-page .cl-datef__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-page .cl-datef__placeholder { color: var(--cd-text-muted); }

.cd-page .cl-datef__chevron { display: inline-flex; flex: none; color: var(--cd-text-muted); transition: color 150ms; }
.cd-page .cl-datef__chevron svg { width: 16px; height: 16px; }
@media (hover: hover) { .cd-page .cl-datef__select:hover .cl-datef__chevron { color: var(--cd-text-secondary); } }

.cd-page .cl-datef__pop {
    position: fixed;
    z-index: 130;
    box-sizing: border-box;
    width: 212px;
    padding: 8px;
    border-radius: var(--cd-radius-popover);
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), 0 8px 24px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .2);
    color: var(--cd-text-primary);
    font-size: 14px;
    line-height: 20px;
}
.cd-page .cl-datef__pop[x-cloak] { display: none !important; }

.cd-page .cl-datef__cal { display: flex; flex-direction: column; width: 196px; }
.cd-page .cl-datef__cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; }
.cd-page .cl-datef__cal-title { font-weight: 500; color: var(--cd-text-primary); }
.cd-page .cl-datef__cal-week,
.cd-page .cl-datef__cal-days { display: grid; grid-template-columns: repeat(7, 28px); }
.cd-page .cl-datef__cal-days { row-gap: 2px; }
.cd-page .cl-datef__cal-week span { display: flex; align-items: center; justify-content: center; height: 28px; font-size: 12px; line-height: 17px; color: var(--cd-text-muted); }

.cd-page .cl-datef__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--cd-radius);
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
    outline: none;
}
.cd-page .cl-datef__day.is-other { visibility: hidden; } /* ayın dışındaki günler boş (referans) */
.cd-page .cl-datef__day.is-now:not(.is-active) { font-weight: 580; color: var(--cd-text-accent); }
.cd-page .cl-datef__day.is-active { background: var(--cd-fill-accent); color: #fff; font-weight: 400; }
.cd-page .cl-datef__day:disabled { color: var(--cd-text-disabled); background: transparent; cursor: default; }
@media (hover: hover) { .cd-page .cl-datef__day:hover:enabled:not(.is-active) { background: var(--cd-fill-ghost-hover); } }
html:not(.cl-pointer) .cd-page .cl-datef__day:focus-visible { box-shadow: var(--cd-focus-ring); }

@media (prefers-reduced-motion: reduce) { .cd-page .cl-datef__select, .cd-page .cl-datef__chevron { transition: none; } }

/* BİLDİRİM (TOAST) KONUMU — hiçbir zaman Kaydet / İmzala / İptal düğmelerinin ve "Kaydedilmemiş değişiklikler" çubuğunun üstünde çıkmaz.
   Masaüstünde: sayfada alt çubuk (.cl-form-footer, 57 yüksek) ya da yüzen çubuk (.cl-unsaved-bar, alttan 24 + 40) varsa bildirim onların 16 üstünden başlar (alttan 80).
   Telefonda (< 640): bildirim alttaki çubuğa hiç değmesin diye ÜSTTE, üst çubuğun 8 altında çıkar (iPhone'da Safari araç çubuğu da altta yer kaplıyor). */
@media (min-width: 640px) {
    html:has(.cd-page .cl-form-footer) .fi-no,
    html:has(.cd-page .cl-unsaved-bar:not([style*="display: none"])) .fi-no {
        bottom: 80px !important;
    }
}

@media (max-width: 639px) {
    html .fi-no {
        top: calc(var(--cd-topbar-h, 48px) + 8px) !important;
        bottom: auto !important;
        left: 16px !important;
        right: 16px !important;
    }

    html .fi-no .fi-no-notification {
        width: 100% !important;
        transform-origin: top;
    }

    /* Üstten gelip üste giderken hareket: gelirken yukarıdan kendi boyu kadar aşağı, giderken küçülüp silinir. */
    html .fi-no .fi-no-notification.translate-x-12 { --tw-translate-y: -100% !important; }
}

/* Telefonda alt panel (menü / liste) açıkken düğme ipuçları gizlenir: ⋮ düğmesine dokununca açılan "Diğer işlemler" ipucu dokunmatikte odakta kalıyor ve açılan
   alt panelin üstünde asılı duruyordu. Masaüstünde ipuçları aynen çalışır (alt panel yalnızca telefonda). */
@media (max-width: 639px) {
    html:has(.cd-page .cl-sheet:not(#cd-sheet):not([style*="display: none"]):not([x-cloak]):not(.choices__list--dropdown:not(.is-active))) [data-tippy-root] {
        display: none !important;
    }
}

/* OLUŞTURAN HÜCRESİ: oluşturan + oluşturulma tek sütunda; solda dikey ortalı 20 px profil resmi, yanında üstte kısa ad, altında zaman. */
.cl-created { display: inline-flex; align-items: center; gap: 6px; /* referansın API keys › Created hücresi (kalıp C): resim ile yazı arası 6 */ min-width: 0; vertical-align: middle; }
.cl-created-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cl-created-name { font-size: 14px; line-height: 20px; color: var(--cd-text-secondary); }
.cl-created-date { font-size: 13px; line-height: 17px; color: var(--cd-text-secondary); }

/* AR-GE › TESTLER ------------------------------------------------------------------------------------
   METİN BAĞLANTISI — referansın bağlantısı (Atlas `.r-link`: vurgu rengi, 1 px altı çizgi %40, aralık 3, üzerine gelince tam renk 60 ms; sonda 16 px ↗, yazıya 2,
   −3 aşağı). Standardın PDF'i bununla; yeni sayfa / dosya açan metin bağlantıları da. */
.cd-page a.cl-link {
    color: var(--cd-text-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    border-radius: 2px;
    transition: text-decoration-color 60ms;
}
.cd-page a.cl-link:hover { text-decoration-color: currentColor; }
.cd-page a.cl-link svg { display: inline-block; width: 16px; height: 16px; margin-left: 2px; vertical-align: -3px; }
/* GÖZ KARTLARI (iki katlı gri kart, .cl-tier-cards): ikon karosunda gözün harfi (14/20 500); kartın alanları alt katta 16 iç boşlukla. Kontrol gözünde (A) alt kat yok. */

/* Göz rozeti: harf 28 px yuvarlak, "A(app)" gibi uzun yazıda hap biçimi (genişlik yazıya göre); başlık yazısı yok. */
.cd-page .cl-lab-cards .cl-rep-avatar .cl-avatar { width: auto; min-width: 28px; height: 28px; padding: 0 8px; font-size: 13px; line-height: 20px; }
.cd-page .cl-lab-cards .cl-lab-card-fields { padding: 16px; }
/* Numune kartında Laminasyon ile Gramaj, üstteki Marka / Model satırları gibi eşit genişlikte (sayı alanının sabit 96 / 110 px'i burada geçersiz). */
.cd-page .cl-lab-card-fields .cl-field-row .fi-fo-component-ctn > :has(.cl-w-number, .cl-segmented),
.cd-page .cl-lab-card-fields .cl-field-row .fi-fo-component-ctn > :is(.cl-w-number) { flex: 1 1 0; min-width: 0; }
.cd-page .cl-lab-card-fields .cl-field-row .fi-fo-field-wrp.cl-w-number { width: auto; min-width: 0; }
/* GÖZ KARTI BAŞLIĞI = ALICI KARTININ BAŞLIĞI (kullanıcı kararı 2026-11-11; .cl-rcp-head ölçüleri): dolgu 8 8 8 12, öğeler arası 8, en az 40; solda ok (muted), 20 px harf karosu,
   ad 14/20 500, yanında gri "· kumaş markası modeli" (kart kapalıyken; muted 13/17), sağda 24 × 24 ×. A gözünde adın yanında "· Kontrol". Veriler sekmesi (--data) dışında. */
/* Kart kırpmaz (Laminasyon listesi kartın dışına taşar); başlığın hover zemini kartın üst köşelerine kendi köşesiyle uyar. */
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item { overflow: visible; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header { border-radius: 12px 12px 0 0; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item.fi-collapsed .fi-fo-repeater-item-header { border-radius: 12px; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header { padding: 8px 8px 8px 12px; gap: 8px; min-height: 40px; box-sizing: border-box; transition: background-color 60ms; }
@media (hover: hover) { .cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item:has(.cl-lab-card-fields) .fi-fo-repeater-item-header:hover { background: var(--cd-fill-ghost-hover); } }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header h4 { gap: 8px; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header::before { background: var(--cd-text-muted); }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header .fi-icon-btn { width: 24px; height: 24px; margin: 0; border-radius: 6px !important; color: var(--cd-text-primary) !important; } /* genel `.cd-page .fi-icon-btn` kuralı !important: alıcı kartı × düğmesiyle (.cd-btn--icon .cd-btn--xs) aynı değerler */
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header .fi-icon-btn svg { width: 16px; height: 16px; color: inherit; }
@media (hover: hover) { .cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header .fi-icon-btn:hover { background: var(--cd-fill-ghost-hover); } }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header ul { line-height: 0; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header li { display: flex; }
/* Filament'in kendi aç / kapa düğmelerinin kabı (li) gizli: boşta kalan 12 px'lik ızgara aralığı × düğmesini sağ kenardan 20'ye itiyordu; alıcı kartında × kenardan 8. */
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item-header li:has(.fi-icon-btn:is([title="Küçült"], [title="Genişlet"])) { display: none; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .cl-card-titles { display: contents; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .cl-card-title { flex: none; max-width: 70%; }
/* Adın yanında gri not "· …" (kalan yeri alır): A gözünde sabit, B, C … kartlarında yalnızca kart kapalıyken kumaş markası ve modeli. */
/* Kart açıklaması iki satır: üstte Marka · Model birincil renkte, varsa altında Not gri; 12 / 12 iki satır = 24 = başlığın iç yüksekliği (şerit büyümez),
   her satır tek satır, sığmayan "…". */
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .cl-card-note { flex: 1; min-width: 0; flex-direction: column; justify-content: center; font-size: 11px; line-height: 12px; color: var(--cd-text-muted); }
.cd-page .cl-lab-cards .cl-card-note > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .cl-card-note::before { content: none; } /* başlıkta gri satır, önünde nokta yok */
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .cl-card-note--closed { display: none; }
/* Tartım satırında ortadaki gri fark yazısı ("m₃₀ − m₀ = 0,444 g"); ipucu sütunu satırın ortasına yayılır. */
.cd-page .cl-lab-cards:not(.cl-lab-cards--data) .fi-fo-repeater-item.fi-collapsed .cl-card-note--closed { display: flex; }

/* Veriler'deki tartım kartlarında gri açıklama (Marka · Model · Not) kart açıkken de görünür (kullanıcı bildirimi 2026-11-12: kartın açıklaması boş kalıyordu); Bilgiler'de açıkken alanlar zaten altta. */
.cd-page .cl-lab-cards.cl-lab-cards--weights:not(.cl-lab-cards--data) .cl-card-note--closed { display: flex; }
/* Kart açıklaması: Marka · Model alıcı adının boyutunda ve beyaz, altında Not daha küçük ve gri. */
.cd-page .cl-lab-cards .cl-card-note-main { font-size: 14px; line-height: 16px; font-weight: 500; color: var(--cd-text-primary); } /* makbuzdaki alıcı kartının kişi adı gibi (.cl-rcp-name: 14 px, 500, birincil renk); satır yüksekliği 16: 16 + 12 = 28 = rozetin yüksekliği, şerit büyümez */
.cd-page .cl-lab-cards .cl-card-note-extra { font-size: 11px; line-height: 12px; font-weight: 400; color: var(--cd-text-muted); }
/* Kumaş kartı başlığı: AÇIKKEN yalnızca "Kumaş"; KAPALIYKEN "Kumaş" yerine iki satır (üstte tip beyaz, altında "Lamineli · 55 g/m²" gri; .cl-card-note--closed,
   Lab kartlarıyla ortak) ve kartın sağına yakın renk yuvarlağı (.cl-card-dot). Hiçbir şey yazılmadıysa kapalıyken de "Kumaş" kalır (--swap yok). */
.cd-page .cl-fabric-card .fi-fo-repeater-item.fi-collapsed .cl-card-title--swap { display: none; }
.cd-page .cl-fabric-card .fi-fo-repeater-item-header h4 { display: flex; align-items: center; flex: 1; min-width: 0; }
.cd-page .cl-fabric-card .cl-card-dot { display: none; margin-left: auto; margin-right: 4px; flex: none; }
.cd-page .cl-fabric-card .fi-fo-repeater-item.fi-collapsed .cl-card-dot { display: inline-flex; }
/* Açılır kapanır göz kartı (alıcı kartı gibi): ok başlığın solunda (açıkken aşağı), başlığın her yerine basılır; Filament'in sağdaki aç/kapa düğmeleri gizli.
   */
.cd-page .cl-lab-cards .fi-fo-repeater-item-header { cursor: var(--cd-cursor-interactive); }
.cd-page .cl-lab-cards .fi-fo-repeater-item-header .fi-icon-btn:is([title="Küçült"], [title="Genişlet"]) { display: none; }
.cd-page .cl-lab-cards .fi-fo-repeater-item:has(.cl-lab-card-fields) .fi-fo-repeater-item-header::before {
    content: '';
    flex: none;
    order: -1;
    width: 16px;
    height: 16px;
    background: var(--cd-text-secondary);
    transform: rotate(90deg);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.cd-page .cl-lab-cards .fi-fo-repeater-item.fi-collapsed:has(.cl-lab-card-fields) .fi-fo-repeater-item-header::before { transform: none; }
/* Koşullar (Veriler): telefonda (< 640) iki sütun; "Su Banyosu (Tb)" başlığı yanındaki alana taşıp çakışıyordu (iPhone testi 2026-11-12). */
@media (max-width: 639px) {
    .cd-page .cl-field-row.cl-lab-conditions > .fi-fo-component-ctn { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } /* .cl-field-row'un flex !important kuralını ezer */
    .cd-page .cl-field-row.cl-lab-conditions .fi-fo-component-ctn > * { flex: none; }
    .cd-page .cl-lab-conditions .fi-fo-field-wrp.cl-w-number { width: 100%; min-width: 0; }
}
/* TARTIM SATIRLARI (Veriler; kullanıcı kararı 2026-11-12; çek kartının alt katı gibi): her tartım bir satır, solda gri m₀ / m₁₅ … (14/20 soluk), sağda değer kutusu; satırlar arası 8. */
.cd-page .cl-lab-weight-rows { display: flex; flex-direction: column; gap: 8px; }
/* Satır üç sütun: solda m₀ / m₁₅ …, ortada değer kutusu, sağda gri fark yazısı ("m₁₂₀ − m₀ = 1,01 g"). Etiket ile ipucu aynı kapta geldiği için kap "contents" olur. */
.cd-page .cl-lab-weight-rows .fi-fo-field-wrp > div { display: grid; grid-template-columns: 44px 1fr 122px; align-items: center; column-gap: 12px; }
.cd-page .cl-lab-weight-rows .fi-fo-field-wrp > div > :first-child { display: contents; }
.cd-page .cl-lab-weight-rows .fi-fo-field-wrp-label { grid-column: 1; grid-row: 1; }
.cd-page .cl-lab-weight-rows .fi-fo-field-wrp > div > :last-child { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
.cd-page .cl-lab-weight-rows .fi-fo-field-wrp-hint { grid-column: 3; grid-row: 1; justify-self: end; }
.cd-page .cl-lab-weight-rows .fi-fo-field-wrp-label, .cd-page .cl-lab-weight-rows .fi-fo-field-wrp label span { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--cd-text-muted); }
.cd-page .cl-lab-weight-rows .cl-lab-diff { font-size: 12px; line-height: 17px; color: var(--cd-text-muted); white-space: nowrap; }
.cd-page .cl-lab-weight-rows .cl-lab-diff sub { font-size: 9px; line-height: 0; vertical-align: sub; }
.cd-page .cl-lab-weight-rows .fi-fo-field-wrp.cl-w-number { width: auto; }
.cd-page .cl-lab-weight-rows sub { font-size: 11px; line-height: 0; vertical-align: sub; }
/* Numune kartının alt grupları (giysi, kumaş): alanlar arası 16, gruplar arası 24. */
.cd-page .cl-lab-cards .cl-lab-card-fields { display: flex; flex-direction: column; gap: 24px; }

/* Giysi ile Kumaş arasında ayırma çizgisi: üstü ve altı 24 (üst: Filament ızgara aralığı 16 + 8 kenar boşluğu; alt: iç boşluk). */

.cd-page .cl-lab-cards .fi-fo-repeater-item-content:not(:has(.cl-lab-card-fields)) { display: none; }
.cd-page .cl-lab-cards .fi-fo-repeater-item:not(:has(.cl-lab-card-fields)) .fi-fo-repeater-item-content { display: none; }
/* "+ Numune ekle" kartların 16 altında, boyasız (Alıcı ekle / Çek ekle ile aynı .cl-rep-trigger; forms.components.lab-specimen-add). Filament'in kendi ekle düğmesi gizli. */
.cl-lab-add-row { margin-top: 0; }
.cl-lab-add-row .cl-rep-trigger svg { width: 16px; height: 16px; }

/* Sonuçlar bölümü: gözlerin Δm ve µwv tablosu (rapor tablosunun satır çizgileri), altında ara değerler ve sapmalar. */
.cl-lab-results { display: flex; flex-direction: column; gap: 12px; }

.cl-lab-results-note { margin: 16px 0 0; font-size: 13px; line-height: 17px; color: var(--cd-text-secondary); font-variant-numeric: tabular-nums; }
/* Standarttan sapmalar: sarı uyarı satırları (ikon 16 + 8, 13/17). */

/* Liste › Numuneler hücresi: numune adları alt alta (satırlar 20, aralar 2). */
.cl-lab-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-lab-line { display: grid; grid-template-columns: fit-content(240px); /* içerik kadar, en çok 240 (minmax(0, …) sütunu daraltıp metni yan sütunun üstüne taşırıyordu: kullanıcı iPhone testi 2026-11-12) */ align-items: baseline; font-size: 14px; line-height: 20px; }

.cl-lab-line--result { display: block; }
.cl-lab-mu { color: var(--cd-text-secondary); font-variant-numeric: tabular-nums; }
/* Hızlı bakış › Notlar: satır sonları korunur. */

/* Test Sonuçları: numunenin karşılaştırma çubuğu (ince parça çubuğu 8 yüksek, köşe 4; logaritmik ölçek, LabTestResults::barWidth). */
/* Açılan test satırı bağlı olduğu model satırının yazısı hizasında (Ciro tablosundaki alt satırlarla aynı: 36). */
.cl-lab-table tbody > tr.cl-report-lvl-1 > th { padding-left: 36px; }

.cl-lab-search { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 16px; } /* arama ve süzgeç haplarının hepsi sola yaslı, tablonun üstünde */
.cl-lab-valbar { display: flex; align-items: center; gap: 12px; }
.cl-lab-val { flex: none; min-width: 56px; font-variant-numeric: tabular-nums; }
.cl-lab-pct { flex: none; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: var(--cd-text-secondary); }
.cl-lab-valbar .cl-lab-bar { flex: 1 1 auto; min-width: 0; }
.cl-lab-bar { display: block; height: 8px; border-radius: 4px; background: var(--cd-border-subtle); overflow: hidden; }
.cl-lab-bar > span { display: block; height: 100%; min-width: 8px; border-radius: 4px; background: var(--cl-chart-1); }
/* Açılan test satırı: 2 px ince çizgi (yukarıdaki genel .cl-lab-bar kurallarından SONRA; aynı özgüllükte sıra belirler). */
.cl-lab-valbar .cl-lab-bar.cl-lab-bar--thin { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--cl-chart-rest) 15%, transparent); }
.cl-lab-valbar .cl-lab-bar.cl-lab-bar--thin > span { border-radius: 1px; min-width: 2px; }
.cl-lab-name .cl-code-main { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* AÇILIR KARTLAR HER ZAMAN AŞAĞIYA DOĞRU AÇILIR: kart açılırken altındakileri aşağı iter; üstündekiler yerinde kalır, sayfa kendiliğinden
   kaymaz. Tarayıcının kaydırma sabitlemesi (overflow-anchor) kart büyürken kaydırmayı değiştirip yukarıdakileri iterdiği için kartların bulunduğu alanda kapalıdır. */
html,
.cl-rcp,
.cl-rcp-cards,
.cl-rcp-item,
.cl-tier-cards,
.cl-collapsible-aside {
    overflow-anchor: none;
}

/* Rakip fiyat değişimi / ağırlık sapması kartları (Fiyat Analizi ve marka sayfası › Analiz): kartlar arası 16. */
.cl-competitor-cards { display: flex; flex-direction: column; gap: 16px; }

/* YAZI KUTUSUNUN HER YERİ (kullanıcı kararı 2026-11-11, portal geneli): birimi / ön eki olan kutuda ("g/m²", "₺", "adet") kutunun neresine gelinirse imleç yazı imleci olur
   (cover-lab-panel.js "YAZI KUTUSUNUN HER YERİ YAZI KUTUSUDUR" basınca o kutudaki yazı alanına odaklar). Açılır liste (Choices / select) ve yalnız okunur kutu kapsam dışı. */
.cd-page .fi-input-wrp:has(input:not([type=hidden], [type=checkbox], [type=radio], [type=file], [readonly], [disabled]), textarea):not(:has(.choices, select)),
.cd-page .fi-input-wrp:has(input:not([type=hidden], [type=checkbox], [type=radio], [type=file], [readonly], [disabled]), textarea):not(:has(.choices, select)) :is(.fi-input-wrp-prefix, .fi-input-wrp-suffix),
.cd-page .cl-compound-box :is(.cl-compound-suffix, .cl-compound-prefix, .cl-compound-sep) {
    cursor: text;
}

/* BİTİŞİK BİRLEŞİK ALAN (kullanıcı kararı 2026-11-11; CompoundField::joined()): fiyat girilen kutuda para birimi kutunun İÇİNDE. Atlas düzeni (her parça kendi kutusunda, aralar 12) yerine
   parçalar tek kutuda, aralarında boşluk yok: kutunun zemini ve halkası ::before'da, parçaların kendi zemini / halkası yok. Üzerine gelince / odakta / hatalıyken kutu tek parça tepki verir. */
.cd-page .cl-compound--joined .cl-compound-box {
    gap: 0 !important;
}

.cd-page .cl-compound--joined .cl-compound-box::before {
    content: "" !important;
}

.cd-page .cl-compound--joined .cl-compound-box .cl-compound-cell {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* "+ … EKLE" DÜĞMELERİ BASINCA KÜÇÜLMEZ (kullanıcı kararı 2026-11-11; referansın boyasız "+ Add …" düğmelerinde basınca küçülme yok): genel `.cd-btn:active` küçülmesi (%97,5, yukarıda) yalnızca
   dolu / ikincil düğmeler içindir; listelerin altındaki "+ Tedarikçi ekle", "+ Kademe ekle" (.cl-supplier-add, .cd-btn tabanlı) ile "+ Kumaş / Göz / Alıcı / Çek ekle" (.cl-rep-trigger)
   ve menü altındaki ekle satırları (.cl-rep-footer-item) aynı davranır: basınca ölçek değişmez. Yeni "+ … ekle" düğmesi bu listeye girer. */
.cd-page :is(.cl-supplier-add, .cl-rep-trigger, .cl-rep-footer-item):not(:disabled):active {
    scale: none;
}

/* Filament'in kendi (gri dolgulu, ortalı) Repeater "ekle" düğmesi `cl-hide-add` sınıflı Repeater'da HİÇ ÇİZİLMEZ (repeater görünüm geçersiz kılması; kullanıcı kararı 2026-11-12; önce CSS ile gizleniyordu); yerine boyasız "+ … ekle" (forms.components.repeater-add-row, .cl-rep-trigger) gelir (kullanıcı kararı 2026-11-11, "Hesap ekle"). */

/* Liste boşken "+ … ekle" etiketin 8 altındadır (alan başlığından alana 8 gibi), 24 değil (kullanıcı kararı 2026-11-11, "+ Hesap ekle"): boş Repeater çizilmez (boş kap bile 8'lik aralık ekler), ekle satırı, alanın kendi 8'lik içerik aralığı + formun 16'lık aralığı kadar (16 + 8 - 8) geri çekilir; ölçülen sonuç etiketten düğmeye 8. Kart / satır varken ekle satırı listenin 16 altındadır (yukarıdaki "EKLE DÜĞMESİNİN ÜSTÜ" kuralı). */
.cd-page .cl-hide-add:not(:has(.fi-fo-repeater-item)) { display: none; }
.cd-page .cl-lab-add-row--empty { margin-top: -16px; } /* sunucu, liste boşken görünüme `empty` verir (:has içinde :has geçersiz olduğundan CSS bunu kendisi bilemez) */

/* Kumaş kartının renk seçicisi: katman yapısı ve kalınlıkla aynı satırda en sağda, sabit genişlik; renkli yuvarlak + ad (.cl-part-icon-label) sığar. */

/* Kumaş kartının ikinci satırı: Kalınlık ve Renk kalan yeri eşit paylaşır, Lamineli tiki en sağda kendi genişliğinde; üçü arasındaki boşluk standart alan aralığı (12).
   Dar ekranda (alanlar 120'nin altına inecekse) tik alt satıra sarar. */
.cd-page .cl-field-row--thirds > .fi-fo-component-ctn {
    display: flex !important; /* .cl-field-row'un kuralı da flex; burada yalnızca yerleşim */
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 12px !important;
    row-gap: 16px !important;
}

.cd-page .cl-field-row--thirds > .fi-fo-component-ctn > * { min-width: 0; }
.cd-page .cl-field-row--thirds > .fi-fo-component-ctn > :nth-child(-n+2) { flex: 1 1 120px !important; width: auto; }
.cd-page .cl-field-row--thirds > .fi-fo-component-ctn > :nth-child(3) { flex: none !important; margin-left: auto; }
.cd-page .cl-field-row--thirds .fi-fo-field-wrp { width: 100%; max-width: none; }

/* Lamineli tiki standart onay kutusu (ekstra boyama yok; kullanıcı kararı 2026-11-12): kendi sütununda, kutuların hizasında dikey ortalı. */
.cd-page .cl-lam-check { display: flex; align-items: center; height: 32px; }

/* Model formunun iki sütunlu satırları (Pazar › Markalar › Modeller; kullanıcı kararı 2026-11-11): her alan satırın yarısı (aralar 12); sağ alan gizliyken sol alan yine yarım kalır
   (Koruma Kategorisi, Kategori III seçilene kadar). Fiyat kutusu kendi sütununu doldurur. */
.cd-page .cl-field-row--halves > .fi-fo-component-ctn > *,
.cd-page .cl-field-row--halves > div > .fi-fo-component-ctn > * {
    flex: 0 0 calc(50% - 6px) !important; /* sayı alanı içeren hücrenin "flex: none" kuralını (Fiyat) ezer */
}

/* Fiyat | Web Sayfası satırı: fiyat kendi genişliğinde, web sayfası kalan yeri alır. */
.cd-page .cl-field-row--halves.cl-garment-price > .fi-fo-component-ctn > :first-child {
    flex: 0 0 auto !important;
}

.cd-page .cl-field-row--halves.cl-garment-price > .fi-fo-component-ctn > :last-child {
    flex: 1 1 0 !important;
}

/* Model fiyat kutusu küçük: satırın yarısını doldurmaz; fiyat yazısı sabit 84, yanında para birimi (varsayılan $). */
.cd-page .cl-garment-price .cl-compound,
.cd-page .cl-garment-price .cl-compound-box {
    width: fit-content;
    max-width: 100%;
}

.cd-page .cl-garment-price .cl-compound-item:first-child .fi-input-wrp input:not([type="hidden"]):not(#cd-compound):not(#cd-garment) {
    field-sizing: fixed;
    width: 84px;
}

/* Giysi sınıflandırma seçenekleri (Pazar › Markalar › Modeller; kullanıcı kararı 2026-11-11): listede üstte ad, altında soluk Türkçe açıklama; seçilmiş kutuda / çipte yalnızca ad. */
.cd-page .choices__list--dropdown .choices__item:has(.cl-opt-desc) { height: auto; min-height: 32px; }
.cd-page .cl-opt { display: block; min-width: 0; flex: 1 1 auto; }
.cd-page .cl-opt-name { display: block; font-weight: 500; }
.cd-page .cl-opt-desc { display: block; margin-top: 1px; color: var(--cd-text-secondary); font-size: 13px; line-height: 17px; font-weight: 400; white-space: normal; }
.cd-page .choices__list--multiple .choices__item .cl-opt-desc,
.cd-page .choices__list--single .choices__item--selectable .cl-opt-desc { display: none; }

/* ÇOKLU SEÇİMDE AŞAĞI OK: tek seçimli kutudaki gibi sağda soluk aşağı ok; ok yoksa menü açılıp kapatılamıyordu. Çoklu seçimde × her çipin kendisindedir, bu
   yüzden ok her zaman durur. Oka basınca açık menü kapanır (cover-lab-panel.js "ÇOKLU SEÇİMDE OKLA KAPAT"). */
.cd-page .fi-fo-select:has(.choices[data-type*="select-multiple"]) .choices__inner {
    padding-inline-end: 34px !important;
}

.cd-page .fi-fo-select .choices[data-type*="select-multiple"]::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 10px;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    translate: 0 -50%;
    border: 0 !important;
    background: var(--cd-text-muted);
    -webkit-mask: var(--cd-chevron) center / contain no-repeat;
    mask: var(--cd-chevron) center / contain no-repeat;
    pointer-events: none;
}

/* Çoklu seçimde menünün içindeki arama kutusu (cover-lab-panel.js "ÇOKLU SEÇİMDE ARAMA MENÜNÜN İÇİNDE"): tek seçimli listedeki gibi kenardan kenara; alanda yalnızca çipler kalır. */
.cd-page .fi-fo-select .choices[data-type*="select-multiple"].cl-search-in-menu .choices__list--dropdown > .choices__input {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

/* EKLENDİKÇE DİZİLEN MİNİK KARTLAR (kullanıcı kararı 2026-11-11; forms.components.chip-picker; referansın Agents › Skills çipleri ölçüldü): çipler 26 yüksek, 1 px %10 çerçeve, %5 zemin, köşe 5,5,
   iç 2 2 2 6, 14/20, ikincil yazı (üzerine gelince birincil + hayalet zemin); sağda 20 × 20 × (köşe 5); çipler arası 8, çipler → "+ … ekle" 8. */
.cd-page .cl-chip-picker { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.cd-page .cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cd-page .cl-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 26px;
    padding: 2px 2px 2px 6px;
    border: 1px solid var(--cd-border);
    border-radius: 5.5px;
    background: var(--cd-bg-neutral);
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-secondary);
    transition: background-color 100ms, color 100ms;
}

.cd-page .cl-chip:hover { background: var(--cd-fill-ghost-hover); color: var(--cd-text-primary); }

.cd-page .cl-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-page .cl-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    cursor: var(--cd-cursor-interactive);
}

.cd-page .cl-chip-x svg { width: 14px; height: 14px; }

.cd-page .cl-chip-x:hover { background: var(--cd-fill-ghost-hover); color: var(--cd-text-primary); }

/* Menü seçeneklerinin açıklaması adın altında soluk (kişi menüsündeki e-posta satırı); çok satıra sarılır. */
.cd-page .cl-chip-picker .cl-rep-mail { white-space: normal; }
.cd-page .cl-chip-picker .cl-rep-menu { width: 300px; }

/* Koruma kategorisi kartı (Pazar › Markalar › Modeller; kullanıcı kararı 2026-11-11): Kategori I'in kartı boş (yalnızca başlık), Kategori III'ün kartında koruma tipleri minik kartlarla. */
.cd-page .cl-protection-card .fi-fo-repeater-item-content { padding: 12px 16px 16px; }
.cd-page .cl-protection-card .fi-fo-repeater-item-content:not(:has(.cl-chip-picker)),
.cd-page .cl-protection-card .fi-fo-repeater-item:not(:has(.cl-chip-picker)) .fi-fo-repeater-item-content { display: none; }

/* Çipin solundaki ikon (referansın Skills çipi: 14 px, yazıyla aralık 6; kullanıcı kararı 2026-11-11). */
.cd-page .cl-chip-icon { display: inline-flex; flex: none; padding-top: 1px; }
.cd-page .cl-chip-icon svg { width: 14px; height: 14px; }
.cd-page .cl-chip { gap: 6px; }
.cd-page .cl-chip .cl-chip-x { margin-inline-start: -4px; } /* ikon ve yazıdan sonra × 2 sağda kalır (iç boşluk 2) */

/* PORTALIN DIŞINA VERİLEN BAĞLANTILAR HER ZAMAN MAVİ (kullanıcı kararı 2026-11-11, portal geneli; referansın "Learn more ↗"i ölçüldü: yeni sekmede açılan metin bağlantısı koyu temada rgb(109 167 236) = vurgu rengi
   --cd-text-accent, açıkta #184F95): yeni sekmede açılan her METİN bağlantısı (target="_blank") vurgu renginde, sonundaki ↗ de aynı renkte (currentColor). Düğme biçimli bağlantılar (.cd-btn: "PDF'i aç ↗",
   "KolayBi'de aç ↗") ve giriş ekranları (.cd-page dışı; referansa birebir) bu kuralın dışında. Portal içi bağlantılar (e-posta, telefon, sayfa geçişleri) birincil renkte kalır. Altı çizili kuralı değişmez. */
.cd-page a[target="_blank"]:not(.cd-btn):not([class*="cd-btn"]) {
    color: var(--cd-text-accent);
}

/* YAN PANEL YAZI STANDARDI — REFERANSIN AJAN PANELİ (2026-11-11 taraması; ayrıntı CLAUDE.md §9.9 "YAN PANEL YAZI ÖLÇÜLERİ"):
   serbest metin (Notlar, Açıklama, Metin) başlıklı bölümdür: başlık 14/20 500 birincil, altında 8 aralıkla alan kutusu: zemin %5, köşe 8, iç 8 12, yazı 14/20 400 birincil. */
.cd-page .cl-detail-text {
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cd-bg-neutral);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cd-text-primary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cd-page .cl-quickview-section > .cl-detail-text { margin-top: 8px; }
.cd-page .cl-quickview-section-head + .cl-detail-text { margin-top: 8px; }

/* Panelin üst satırındaki tür yazısı: 13 / 17 500 ikincil (referans); Filament'in başlık sınıfı (leading-6) satır yüksekliğini 24 yapıyordu. */
.cd-page .cl-detail-panel .fi-modal-heading > span:first-child {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--cd-text-secondary);
}

/* YAN PANEL: TEST SATIRI — test numarası solda, sonucu satırın en sağında */
.cl-detail-test, .cl-detail-split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* BENCHMARK: hızlı bakış panelinin fotoğraf galerisi, üç sütun, gruplanmaz; kareye kırpılmış küçük görsel. */

.cl-detail-test__result, .cl-detail-split__end { text-align: right; white-space: nowrap; }

/* Marka panelinde Modeller: model adı (tıklanır) beyaz / birincil renkte, giysi çeşidi ve koruma soluk. */
.cd-page .cl-detail-model,
.cd-page .cl-detail-model .cl-qv-link {
    color: var(--cd-text-primary);
}

/* ⋮ MENÜ İKONU HER YERDE PARLAK (kullanıcı kararı 2026-11-11, portal geneli): kayıt sayfası başlığındaki ⋮, panelin ⋮'si ve satır ⋮'si birincil renkte
   (satır ⋮'si gibi; Filament'in `color('gray')` ikon düğmesi soluk gri veriyordu, ⋮ mat görünüyordu). "Diğer işlemler" adlı her ikon düğmesi ve `cl-record-menu` /
   `cl-row-menu` sınıfları kapsanır; yeni ⋮ menüsü bunlardan birini taşımalı. Üzerine gelince renk değişmez (hayalet zemin düğmenin kendi kuralından). */
.cd-page :is(.fi-icon-btn, .fi-icon-btn svg):is(.cl-record-menu, .cl-row-menu, [aria-label="Diğer işlemler"]),
.cd-page :is(.cl-record-menu, .cl-row-menu, [aria-label="Diğer işlemler"]) svg,
.cd-page .cl-detail-menu .fi-icon-btn,
.cd-page .cl-detail-menu .fi-icon-btn svg {
    color: var(--cd-text-primary) !important;
}

.cd-page :is(.cl-record-menu, .cl-row-menu, [aria-label="Diğer işlemler"]):hover,
.cd-page .cl-detail-menu .fi-icon-btn:hover {
    color: var(--cd-text-primary) !important;
}

/* ---------------------------------------------------------------------------
 * DOSYA YÜKLEME ALANI = REFERANSIN FileUpload'ı (kullanıcı kararı 2026-11-12; platform.claude.com › Skills › "Create skill" › FileUpload, kodundan
 * ölçüldü): alan zeminli kutu (köşe 12, 1 px iç halka), içerik ortalı, aralar 12, iç boşluk 16 (üstte ve altta ayrıca 11); başlık 14/20 500 birincil,
 * ipucu 13/17 soluk, "Dosya seç" ikincil küçük düğme (28), seçilen dosya çip (22 yüksek, köşe 5,5, 0 8, 12/15 500, ad + ×). Davranış cover-lab-panel.js
 * "DOSYA YÜKLEME ALANI". FilePond'un kendi arayüzü gizli kalır (yükleme mantığı çalışır).
 * ------------------------------------------------------------------------ */
.cd-page .fi-fo-file-upload[data-cl-file-ref] { position: relative; gap: 0; }
.cd-page .fi-fo-file-upload[data-cl-file-ref] > div:not(.cl-dropzone):has(.filepond--root) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}
.cd-page .cl-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 224px; /* yükleme penceresi daha yüksek: birden çok dosya çipi rahat sığar; çipler çoğalırsa alan uzar */
    padding: 27px 16px;
    border-radius: 12px;
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
    text-align: center;
}
.cd-page .cl-dropzone-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); }
.cd-page .cl-dropzone-hint { margin-top: -8px; max-width: 440px; font-size: 13px; line-height: 17px; color: var(--cd-text-muted); }
.cd-page .cl-dropzone-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cd-page .cl-dropzone-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.cd-page .cl-dropzone-files:empty { display: none; }
.cd-page .cl-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    height: 22px;
    padding: 0 8px;
    border-radius: 5.5px;
    background: var(--cd-fill-secondary);
    color: var(--cd-text-secondary);
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
}
.cd-page .cl-file-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cd-page .cl-file-chip-pct { color: var(--cd-text-muted); font-variant-numeric: tabular-nums; }
.cd-page .cl-file-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--cd-text-muted);
    cursor: var(--cd-cursor-interactive);
}
.cd-page .cl-file-chip button:hover { color: var(--cd-text-primary); background: var(--cd-fill-ghost-hover); }
/* Sürüklerken (referansın DropZone'u): sayfada herhangi bir yerde dosya varken kesikli vurgu, üstüne gelince dolu halka. */
.cd-page .cl-dropzone::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    outline: 1px dashed var(--cd-fill-accent);
    outline-offset: -1px;
    transition: opacity var(--cd-dur-snap) ease-out;
}
html[data-cl-dragging-file] .cd-page .cl-dropzone::after { opacity: 1; }
.cd-page .cl-dropzone[data-drag-over]::after { opacity: 1; outline: 2px solid var(--cd-fill-accent); outline-offset: -2px; background: color-mix(in srgb, var(--cd-fill-accent) 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .cd-page .cl-dropzone::after { transition: none; } }

/* Dosya alanı hazır olana kadar (Filament yükleyicisi tembel yüklenir): çıplak tarayıcı dosya kutusu görünmesin, yerinde alan zeminli kutu dursun. */
.cd-page .fi-fo-file-upload:not([data-cl-file-ref]) {
    min-height: 130px;
    border-radius: 12px;
    background: var(--cd-fill-field);
    box-shadow: var(--cd-field-ring);
}
.cd-page .fi-fo-file-upload:not([data-cl-file-ref]) > * { visibility: hidden; }

/* KAYDEDİLMEMİŞ DEĞİŞİKLİK ÇUBUĞU VARKEN SAYFANIN KAYDIRMA PAYI — STANDART (kullanıcı kararı 2026-11-12; referansın Agent › Configuration sayfası
   ölçüldü: çubuk fixed, alttan 24, 40 yüksek; içerik kabının alt iç boşluğu 96): kaydırmanın sonunda son içeriğin altından görünür alanın altına
   112 kalır (çubuk 40 + alttan 24 + çubuk ile içerik arası 48); son öğe (ör. "+ Göz ekle") çubuğun altında kalmaz, sayfa o kadar kaydırılabilir.
   Çubuk yokken (ya da gizliyken) pay eklenmez. */
.cd-main:has(.cl-unsaved-bar:not([style*="display: none"])) {
    padding-bottom: 112px;
}

/* KAYIT SAYFASI BAŞLIĞI BOŞLUKLARI — STANDART (kullanıcı kararı 2026-11-12; referans Agent sayfası masaüstü ve telefonda ölçüldü):
   üst çubuk → kırıntı, kırıntı → başlık, bilgi satırı → sekmeler. Masaüstü: 13 / 29,5 / 16 / 16 (yukarıdaki kurallar). Telefon (< 768): referansta
   üst çubuk → kırıntı ≈ 21, kırıntı → başlık ≈ 21,5; başlığın üstü yerinde kalır, aralık kırıntıya taşınır. */
/* Telefonda ayrı kural yok: kırıntı boşlukları masaüstüyle aynı (21 / 21,5; yukarıdaki "KIRINTI BOŞLUKLARI — PORTAL GENELİ STANDART"). */

/* MENÜNÜN ALTINDAKİ EKLEME SATIRI (kullanıcı kararı 2026-11-12, Select::footerLink; referansın Agent › Skills menüsündeki "+ Create skill ↗" satırı, web varyantında ölçüldü): ayraç iki yandan
   12 içeride, üstte / altta 4, 1 px %10; satır 28 yüksek, iç boşluk 0 12, köşe 8, ikon ile yazı arası 8, 14 / 20 birincil renk, üzerine gelince hayalet zemin; sol ikon 20 px soluk
   artı, yazının HEMEN sağında (aralık 4) 16 px ↗ yazı renginde (sağa yaslanmaz). */
.cd-page .choices__list--dropdown > .cl-select-footer[hidden] { display: none; }
/* Ekleme satırının üzerine gelince listedeki son vurgulu seçenek vurgusunu bırakır (kullanıcı kararı 2026-11-12; Choices vurguyu yalnızca başka seçeneğe geçince kaldırıyordu, iki satır birden vurgulu görünüyordu). */
html .cd-page .choices__list--dropdown:has(> .cl-select-footer:hover) .choices__item.is-highlighted { background: transparent !important; box-shadow: none !important; }
.cd-page .choices__list--dropdown > .cl-select-footer .cl-rep-menu-sep { margin: 4px 12px; height: 1px; background: var(--cd-border); }
.cd-page .choices__list--dropdown > .cl-select-footer a.cl-rep-footer-item:is(a, a:hover, a:visited) { color: var(--cd-text-primary); } /* menü satırı: dış bağlantı mavisi değil, yazı birincil (referansta ↗ de yazı renginde) */
.cd-page .choices__list--dropdown > .cl-select-footer .cl-rep-footer-item { min-height: 28px; padding: 0 12px; gap: 8px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--cd-text-primary); text-decoration: none; }
.cd-page .choices__list--dropdown > .cl-select-footer .cl-select-footer__plus { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--cd-text-muted); }
.cd-page .choices__list--dropdown > .cl-select-footer .cl-select-footer__plus svg { width: 20px; height: 20px; }
.cd-page .choices__list--dropdown > .cl-select-footer .cl-select-footer__label { display: inline-flex; align-items: center; gap: 4px; }
.cd-page .choices__list--dropdown > .cl-select-footer .cl-ext-icon { flex: none; width: 16px; height: 16px; margin: 0; color: currentColor; }
@media (pointer: coarse) and (max-width: 639.98px) {
    html .cd-page .cl-sheet > .cl-select-footer .cl-rep-footer-item { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 15px; line-height: 22px; }
    html .cd-page .cl-sheet > .cl-select-footer .cl-rep-menu-sep { margin: 0 12px 4px; }
}

/* MODEL BELGELERİ (kullanıcı kararı 2026-11-12; model panelinin Belgeler bölümü): her tür bir satır; güncel sürüm bağlantı ↗, "+N eski sürüm" eskileri açar, "Yeni sürüm yükle" seçilen dosyayı yeni sürüm yapar. */
.cl-garment-doc dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

.cl-garment-doc__upload { cursor: var(--cd-cursor-interactive); }
/* "+ Yeni sürüm ekle": boyasız ekleme düğmesi (standart "+ … ekle", .cl-rep-trigger); artı ve yazı yan yana. */

/* YAN PANELLERDE KUMAŞ BİLGİSİ PANEL İÇERİĞİNİN YAZI BOYUNDA: tablodaki Kumaş hücresi 14 / 20 + 13 / 17 ve 16 px renk yuvarlağıdır; yan panelde (içerik 12 / 17) kumaş tipi ve alt satırı 12 / 17, renk yuvarlağı aynı oranda (16 × 12 / 14) 14 px. */
.cl-detail .cl-fabric .cl-fabric-type,
.cl-detail .cl-fabric .cl-fabric-sub {
    font-size: 12px;
    line-height: 17px;
}

.cl-detail .cl-fabric .cl-dot {
    width: 14px !important;
    height: 14px !important;
}

/* YAN PANELLERDE "+ … EKLE" DÜĞMESİ PANEL İÇERİĞİNİN YAZI BOYUNDADIR: formlardaki boyasız ekleme düğmesi (.cl-rep-trigger) 14 / 20 + 16 px artıdır; yan panelde (içerik 12 / 17)
   yazı 12 / 17, kutu 24 yüksek, artı 14 px. Belgeler sekmesinde satırın sağ ucuna yaslıdır. */
.cl-detail .cl-rep-trigger {
    height: 24px;
    padding: 0 6px;
    gap: 4px;
    font-size: 12px;
    line-height: 17px;
}

.cl-detail .cl-rep-trigger svg {
    width: 14px;
    height: 14px;
}

.cl-garment-doc__upload { margin-left: auto; }

/* "Diğer belgeler" bölümünün altındaki "+ Belge ekle": listenin sağ ucuna yaslı, listeden 8 aşağıda (panelde ekleme düğmesi kuralı). */
.cl-garment-doc-add { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ŞİRKET › DOSYALAR: listedeki ve paneldeki etiket sırası; panelde "Kullanıldığı yerler" satırları. */

.cl-detail-text-line { margin: 0 0 4px; font-size: 12px; line-height: 17px; }
.cl-tag--file { text-transform: none; }

/* Model paneli › Belgeler: dosya seçme menüsü satırın sağ ucundaki düğmeden açıldığı için menü düğmenin sağ kenarına hizalı, sola açılır (panelin dışına taşmaz). */
.cl-garment-doc__upload .cl-rep-menu { left: auto; right: 0; }

/* DOSYALAR › TABLODAN ETİKETLEME (kullanıcı kararı 2026-11-12; referansın Settings › Workspaces › Tags hücresi, menüsü ve "Create tag" penceresi
   ölçüldü, web varyantı). Rozet .cl-ftag: 22 yüksek, 0 8, köşe 5,5, 12 / 15 500 ikincil, %5 zemin (referansta tek aralıklı yazı; portalda Inter).
   Hücre: etiketi yoksa soluk xs "+ Etiket ekle" (24, 0 8, köşe 6, 13 / 19, artı 16 soldan 4); varsa rozetler tek düğme (iç 4, dış -4, köşe 8,
   üzerine gelince hayalet zemin), aralar 4. Menü: hücrenin 4 altında, köşe 12, iç 16, en çok 320, popover zemini + 1 px halka + gölge; üstte
   soluk başlık 13 / 17 500, 8 altında rozetler (aralar 8, rozette 16 × 16 ×, ikon 12) ya da açıklama 13 / 17 soluk; 16 altında kenardan kenara
   çizgi; 16 altında ikincil sm "+ Etiket oluştur" (28, artı 20). Pencere 420 geniş. */
.cl-ftag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    max-width: 224px;
    padding: 0 8px;
    border-radius: 5.5px;
    background: var(--cd-fill-neutral);
    color: var(--cd-text-secondary);
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
}

.cl-ftags-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }

.cl-ftags { display: inline-flex; max-width: 100%; }

/* Rozetli hücrede düğme iç 4 / dış -4: payı menünün tetikleyici kabı taşır ki menü düğmenin görünen alt kenarından 4 aşağıda açılsın. */
.cl-ftags--chips > .fi-dropdown > .fi-dropdown-trigger { margin: -4px; }

/* Referansın Tags hücresindeki "+ Add tag"i (xs hayalet düğme, canlıda ölçüldü 2026-11-12): 24 yüksek, 0 8, köşe 6, 13 px soluk; ikon 16 düğmenin soluna 4, ikondan yazıya 6. */
.cd-btn.cl-ftags-add { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; line-height: 19px; gap: 6px; }

.cd-btn.cl-ftags-add svg { width: 16px; height: 16px; margin-left: -4px; }

.cl-ftags-trigger {
    display: block;
    max-width: 100%;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: var(--cd-cursor-interactive);
}

.cl-ftags-trigger .cl-ftag { cursor: inherit; }

@media (hover: hover) {
    .cl-ftags-trigger:hover,
    .cl-ftags-trigger[aria-expanded="true"] { background: var(--cd-fill-ghost-hover); }
}

.cd-page .fi-dropdown-panel.cl-ftags-pop {
    width: 320px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 0 !important;
    border-radius: var(--cd-radius-popover);
    background: var(--cd-surface-popover);
    box-shadow: inset 0 0 0 1px var(--cd-border), var(--cd-shadow-popover);
    --tw-ring-shadow: 0 0 #0000;
}

/* Menü içi (referansın Tags menüsü + portalın menü alt satırı standardı): üstte soluk başlık ve ×'li rozetler, çizgi, arama, etiket listesi, alt satır. */
.cd-page .fi-dropdown-panel .cl-ftags-menu { display: flex; flex-direction: column; max-height: 320px !important; overflow: hidden; }

.cl-ftags-pop-top { flex: none; padding: 16px 16px 0; }

.cl-ftags-pop-title { margin: 0; color: var(--cd-text-muted); font-size: 13px; line-height: 17px; font-weight: 500; }

.cl-ftags-pop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.cl-ftags-pop-sep { flex: none; height: 1px; margin-top: 16px; background: var(--cd-border); }

.cl-ftags-search {
    flex: none;
    height: 37px;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid var(--cd-border-subtle);
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    outline: 0;
    box-shadow: none;
}

.cd-page .cl-ftags-menu .cl-ftags-search:focus { outline: 0 !important; box-shadow: none !important; border-color: var(--cd-border-subtle) !important; }

.cl-ftags-search::placeholder { color: var(--cd-text-muted); }

.cl-ftags-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }

.cl-ftags-empty { margin: 0; padding: 8px 12px; font-size: 14px; line-height: 20px; color: var(--cd-text-muted); }

/* Etiket satırı: solda seçenek (basınca ekler), sağda "Etiketi sil" ikon düğmesi (üzerine gelince görünür; dokunmatikte hep). */
.cl-ftags-option { position: relative; display: flex; align-items: center; border-radius: 8px; }

.cl-ftags-pick { flex: 1; min-width: 0; padding: 6px 36px 6px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; line-height: 20px; color: var(--cd-text-primary); text-align: left; cursor: var(--cd-cursor-interactive); }

.cl-ftags-option:hover { background: var(--cd-fill-ghost-hover); }

.cl-ftags-delete {
    position: absolute;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cd-text-muted);
    opacity: 0;
    cursor: var(--cd-cursor-interactive);
}

.cl-ftags-delete svg { width: 16px; height: 16px; }

.cl-ftags-option:hover .cl-ftags-delete,
html:not(.cl-pointer) .cl-ftags-delete:focus-visible { opacity: 1; }

@media (pointer: coarse) { .cl-ftags-delete { opacity: 1; } }

@media (hover: hover) {
    .cl-ftags-delete:hover { background: var(--cd-fill-ghost-hover); color: #D03B3B; }
}

.cl-ftag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: -4px;
    padding: 0;
    border: 0;
    border-radius: 2.5px;
    background: transparent;
    color: inherit;
    cursor: var(--cd-cursor-interactive);
}

.cl-ftag-remove svg { width: 12px; height: 12px; }

@media (hover: hover) {
    .cl-ftag-remove:hover { background: var(--cd-fill-ghost-hover); color: var(--cd-text-primary); }
}

.cd-page .fi-modal-window.cl-ftags-modal { max-width: 420px !important; }

/* DOSYALAR › DOSYA HÜCRESİ: üstte ad (bağlantı), altında gri tek satır konu. Konu en çok 50 karakter
   (FileResource::TOPIC_MAX; 13 px yazıda ~290 px); sınırdan önce girilmiş daha uzun konu sütunu büyütmez, "…" + ipucu. */
.cl-file-cell .cl-code-sub {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KART İÇİNDEKİ TABLOLARDA HER SÜTUNUN KENDİ GENİŞLİĞİ VAR (kullanıcı kararı 2026-11-12; referansın Caching › Cache usage breakdown tablosu ölçüldü: table-fixed,
   min-width = sütun genişliklerinin toplamı (860), ilk sütun da sabit genişlikte (220), kart bundan genişse artan yer BÜTÜN sütunlara genişlikleri oranında
   paylaştırılır; sayısal sütunlar sağa yaslı, başlık 13/17 500). Eskiden yalnızca rakam sütunlarının genişliği vardı, ilk sütun kalan yeri tek başına yutuyor
   ve az sütunlu tabloda ad sütunu 800 px'e uzayıp rakamlar sağda küçük kalıyordu. İlk sütunun genişliği `--cl-label-min` (colgroup'ta `partials/report-colgroup`,
   gelir tablosunda `report-income-table`); sütunlar yine hiç kaymaz. Test `ThemeStandardTest::test_report_tables_give_every_column_a_width_like_the_reference`. */
.cl-report-table.cl-report-table--fixed > colgroup > col:first-child,
.cl-report-table.cl-report-table--income > colgroup > col:first-child {
    width: var(--cl-label-min);
}

/* GÖRÜNÜNCE KURULAN BLOK (hız, 2026-11-12): görünmeyen dönem / sekme tabloları <template x-if> içinde ilk görünüşte çizilir; sarmalayıcı yerleşimi değiştirmez. */
.cl-lazy { display: contents; }

/* SÜZGEÇ ŞERİDİ YAPIŞIR (kullanıcı kararı 2026-11-13; referansın Usage, Cost, Caching, Rate limits sayfaları ölçüldü: yalnızca sayfa geneli süzgeç
   şeridi üst çubuğun altına yapışır, başlık ve açıklama kayar; masaüstünde ve telefonda aynı). Şerit başlık kabının içinde olduğu için kap
   `display: contents` olur: şerit sayfanın akışında kardeş olur ve sayfa boyunca yapışık kalır. Başlığın konumu aynı kalır (üst boşluk başlığın iç boşluğu). */
.cd-page .cl-report-header--pills {
    display: contents;
}

.cd-page .cl-report-header--pills > div:first-child {
    padding-top: var(--cl-head-top, 24px);
}

.cd-page .cl-report-pillbar {
    position: sticky;
    top: var(--cd-topbar-h);
    z-index: 10;
    margin-top: 0;
    /* BOŞLUK STANDARDI (kullanıcı kararı 2026-11-13; referansın Usage sayfası ölçüldü): açıklamanın altı → ilk hap 29, son hap → sonraki içerik
       (kart, sekme şeridi) 16. Şeridin alt iç boşluğu tam 16: arkası opak olan şerit kartın üstünü kapatmasın (önce 21 + eksi kenar boşluğuydu,
       kartların üst kenarı 5 px kesiliyordu). Yapışınca referanstaki 20 / 21'e `.is-stuck` gölgesi ve çizgisi taşar (yerleşimi değiştirmez). */
    padding: 20px 0 16px;
    margin-top: -7px;
    background: var(--cd-page-bg);
    /* YAPIŞIK ŞERİT İÇERİK ALANININ KENARDAN KENARA GENİŞLİĞİNDE (kullanıcı kararı 2026-11-14; referansın Usage sayfası canlı ölçüldü: yapışık süzgeç şeridi kenar menünün hemen
       yanından ekranın sağ kenarına kadar, ve yapışınca alt çizgisi de aynı genişlikte — mx-[calc(50%-50cqi)] px-[calc(50cqi-50%)], kapsayıcı = içerik alanı `.cd-content`
       (container-type: inline-size)). Yazılar içeriğin hizasında kalır; yapışık şerit içeriği kayarken çizgi ekranı boydan boya keser. Yeni yapışık şerit de aynı iki
       satırı kullanır. */
    width: auto;
    margin-inline: calc(50% - 50cqi);
    padding-inline: calc(50cqi - 50%);
}

.cd-main--default,
.cd-main--settings,
.cd-main--dashboard {
    --cl-main-px: 16px;
}

@media (min-width: 768px) {
    .cd-main--default,
    .cd-main--settings,
    .cd-main--dashboard {
        --cl-main-px: 32px;
    }
}

/* Referans: şeridin alt çizgisi (1 px, %10) yalnızca yapıştığı anda görünür (üst çubuğa değince; geçişsiz). `.is-stuck` cover-lab-panel.js "YAPIŞIK ŞERİT ÇİZGİSİ". */
.cd-page .cl-report-pillbar.is-stuck {
    box-shadow: 0 5px 0 0 var(--cd-page-bg);
}

.cd-page .cl-report-pillbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: var(--cd-border);
    opacity: 0;
    pointer-events: none;
}

.cd-page .cl-report-pillbar.is-stuck::after {
    opacity: 1;
}

/* ANALİZLER SEKMELERİ YAPIŞIR (kullanıcı kararı 2026-11-13): Analizler bölümünde sekmeli sayfanın (Satış ve Kârlılık │ Faturalar, Gelir Tablosu │ Genel Gider)
   sekme şeridi kaydırınca üst çubuğun altına yapışır; sayfada yapışık süzgeç şeridi (`.cl-report-pillbar`) varsa onun hemen altına
   (yüksekliği cover-lab-panel.js "YAPIŞIK ŞERİT YÜKSEKLİĞİ" `--cl-pillbar-h` olarak yazar). */
.cd-page .cl-page-tabs--sticky {
    position: sticky;
    top: calc(var(--cd-topbar-h) + var(--cl-pillbar-h, 0px));
    z-index: 9;
    margin-top: -6.5px; /* sekme yazısının üstündeki boşluk 24 standardı: yapışkan şeridin 8'lik iç boşluğu 6,5 eksi kenar boşluğuyla dengelenir */
    padding-top: 8px;
    background: var(--cd-page-bg);
}

/* Süzgeç şeritli rapor (Alış ve Maliyet, Ödeme Performansı): son hap → ilk kart 16 (referansın Usage sayfası); başlıktan sonraki standart 28 + raporun 12'lik üst boşluğu buraya eklenmez. */
.cd-page:has(.cl-report-pillbar) .cl-report {
    margin-top: -28px;
}

/* GEÇİCİ üst çubuk tema seçicisi (kullanıcı kararı 2026-11-13; Profil › Görünüm'deki seçicinin aynısı; kullanıcı kendisi kaldıracak). */
.cd-topbar .cl-theme-seg--topbar { margin-right: 4px; }

/* CİRO VE NET MARJ KARŞILAŞTIRMASI (kullanıcı kararı 2026-11-13; partials/report-compare-lists): içinde çubuk olan rapor tablosu. Hücre: solda sabit
   genişlikte yazı (sağa yaslı), yanında çubuk izi (8 yüksek, %15 gri zemin); ciro çubuğu referansın mavisi, net marj çubuğu kademe renginde, sıfır çizgisi
   (zarar solda). */
.cl-cmpt-cell { display: flex; align-items: center; } /* çubuk ayrı sütunda (referansın "Input token composition" sütunu gibi); sayı kendi sütununda sağa yaslı */
.cl-cmpt-track { position: relative; flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--cl-chart-rest) 15%, transparent); }
.cl-cmpt-bar { position: absolute; top: 0; bottom: 0; min-width: var(--cl-bar-end-min); border-radius: 4px; background: var(--cl-chart-1); }
/* Açılan alt satırların (müşteri → ürün kodu, tedarikçi → kalem) çubuğu ince çizgi: 2 px (kullanıcı kararı 2026-11-14; Test Sonuçları'ndaki test satırlarıyla aynı). */
.cl-cmpt tr[data-cl-parent] .cl-cmpt-track { height: 2px; border-radius: 1px; }
.cl-cmpt tr[data-cl-parent] .cl-cmpt-bar { min-width: 2px; border-radius: 1px; }
.cl-cmpt-bar--loss { background: var(--cl-chart-8); }
.cl-cmpt-bar--below { background: var(--cl-chart-4); }
.cl-cmpt-bar--ok { background: var(--cd-text-primary); opacity: .55; }
.cl-cmpt-bar--target { background: var(--cl-chart-3); }
.cl-cmpt-bar--late { background: var(--cl-chart-late3); } /* vadesi geçmiş alacağın payı (Tahsilat Performansı): gecikme rengi */
.cl-cmpt-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--cd-border-strong); }

/* RAPOR TABLOSU SAYFALAMA (kullanıcı kararı 2026-11-13; cover-lab-panel.js "RAPOR TABLOSU SAYFALAMA"): kart içindeki uzun tablonun altında ‹ › (solda, 32 × 32)
   ve kayıt sayısı (sağda), Filament tablolarının sayfalamasıyla aynı görünüm. Kart kabı kendi alt boşluğunu taşır: kartlar arası her yerde 16. */
.cd-page .cl-rt-pager { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: var(--cd-control-h); padding-top: 12px; }
.cd-page .cl-rt-pager .cl-pager-count { margin-left: auto; font-size: 14px; line-height: 20px; color: var(--cd-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-page .cl-rt-pager .cl-pager-buttons[hidden] { display: none; }
.cd-page tr[hidden] { display: none; }
.cl-compare-wrap { margin-bottom: 0; } /* alt boşluğu içindeki tablo bölümü taşır (16; yukarıdaki BÖLÜMLER ARASI 40 standardı) */

/* FİLTRE MENÜSÜ YÖNÜ BELİRLENENE KADAR GÖRÜNMEZ (kullanıcı bildirimi 2026-11-13: dönem hapının menüsü açılırken soldan geliyormuş gibi kayıyordu): menünün yönü
   (data-cl-align) açılışın ilk karelerinde ölçülüp yazılıyor; o ana kadar menü `--end` (sağa yaslı) çiziliyor, sonra sola yaslıya atlıyordu. Yön yazılana
   kadar menü gizli (telefonda < 640 yön ölçülmez, alt panel). */
@media (min-width: 640px) {
    .cd-page .cl-filter-pill-wrap > .cl-filter-menu:not([data-cl-align]) { visibility: hidden; }
}

/* GRAFİK KARTI ÖLÇÜ SEÇİCİSİ (Ciro | Adet; kullanıcı bildirimi 2026-11-13): başlığın uzunluğu seçimle değişince seçici yerinde oynamasın diye
   Grafik | Tablo'nun hemen soluna, sağ uca yaslanır (ortada dolaşmaz). */
.cl-chart-head .cl-chart-metric-seg { margin-left: auto; }


/* DÖNEM (RANGE) SEÇİCİ (kullanıcı kararı 2026-11-13; partials/range-picker.blade.php, cover-lab-panel.js `clRangePicker`): referansın Usage › Range dialog'u canlıda ölçüldü
   (koyu tema): dialog köşe 14, popover zemini, %10 iç halka + gölge; solda hazır dönem listesi (iç 6, seçenek en az 28, 4 12, köşe 8, 14 / 20, seçili sağında 20 px vurgu
   tiki), 1 px çizgi (kenardan kenara), sağda takvim (iç 8, 196 geniş: başlık 32 = oklar 24 hayalet + ay adı 14 / 20 500; gün adları 28 yüksek 12 / 17 soluk; günler
   28 × 28 köşe 8, satır aralığı 2) ve altında sağa yaslı Uygula (satır iç boşluğu 0 8 8). Aralık her haftada tek BANT (--cd-bg-accent, köşe 8; o haftanın ilk seçili
   gününden sonuncusuna) ve başlangıç / bitiş günlerinde dolu KAPAK (--cd-fill-accent, 28 × 28, köşe 8; üzerine gelince --cd-fill-accent-hover, yazı beyaz); bugün
   vurgu renginde 580; bugünden sonraki günler --cd-text-disabled. Menü tetikleyicinin 6 altında (`.cl-filter-menu`), tetikleyici filtre hapı (`.cl-filter-pill-wrap`). */
.cd-page .cl-filter-menu.cl-range-menu {
    display: flex;
    align-items: stretch;
    width: max-content;
    max-width: calc(100vw - 32px);
    border-radius: 14px;
    overflow: visible;
}
.cd-page .cl-range-menu[x-cloak] { display: none !important; }
.cd-page .cl-range-menu[style*="display: none"] { display: none !important; }

.cd-page .cl-range-presets { flex: 1 1 auto; margin: 0; padding: 6px; list-style: none; outline: none; }
.cd-page .cl-range-preset {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: var(--cd-radius);
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
    white-space: nowrap;
    cursor: var(--cd-cursor-interactive);
    user-select: none;
}
.cd-page .cl-range-preset[data-highlighted="true"] { background: var(--cd-fill-ghost-hover); }
.cd-page .cl-range-preset-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cd-page .cl-range-preset[aria-selected="true"] .cl-filter-check { visibility: visible; }

.cd-page .cl-range-sep { flex: none; align-self: stretch; width: 1px; background: var(--cd-border); }
.cd-page .cl-range-side { flex: none; display: flex; flex-direction: column; box-sizing: content-box; width: 212px; }

.cd-page .cl-range-cal { box-sizing: border-box; display: flex; flex-direction: column; width: 212px; padding: 8px; }
.cd-page .cl-range-cal-head { display: flex; align-items: center; justify-content: space-between; height: 32px; padding-bottom: 8px; box-sizing: border-box; }
.cd-page .cl-range-cal-head .cd-btn { width: 24px; height: 24px; }
.cd-page .cl-range-cal-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cd-text-primary); }
.cd-page .cl-range-week { display: grid; grid-template-columns: repeat(7, 28px); }
.cd-page .cl-range-week span { display: flex; align-items: center; justify-content: center; height: 28px; font-size: 12px; line-height: 17px; color: var(--cd-text-muted); }
.cd-page .cl-range-weeks { display: flex; flex-direction: column; row-gap: 2px; }
.cd-page .cl-range-row { position: relative; display: grid; grid-template-columns: repeat(7, 28px); }
.cd-page .cl-range-band,
.cd-page .cl-range-cap { position: absolute; top: 0; bottom: 0; border-radius: var(--cd-radius); }
.cd-page .cl-range-band { background: var(--cd-bg-accent); }
.cd-page .cl-range-cap { width: calc(100% / 7); background: var(--cd-fill-accent); }
.cd-page .cl-range-band[style*="display: none"] { display: none; }

.cd-page .cl-range-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--cd-radius);
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    color: var(--cd-text-primary);
    cursor: var(--cd-cursor-interactive);
    outline: none;
}
.cd-page .cl-range-day.is-other { visibility: hidden; }
.cd-page .cl-range-day.is-now { font-weight: 580; color: var(--cd-text-accent); }
.cd-page .cl-range-day.is-edge { color: #fff; font-weight: 400; }
.cd-page .cl-range-day:disabled { color: var(--cd-text-disabled); cursor: default; }
@media (hover: hover) {
    .cd-page .cl-range-day:hover:enabled:not(.is-edge) { background: var(--cd-fill-ghost-hover); }
    .cd-page .cl-range-day.is-edge:hover:enabled { background: var(--cd-fill-accent-hover); }
}
html:not(.cl-pointer) .cd-page .cl-range-day:focus-visible { box-shadow: var(--cd-focus-ring); }

.cd-page .cl-range-apply { display: flex; justify-content: flex-end; padding: 0 8px 8px; }
.cd-page .cl-range-apply .cd-btn:disabled { opacity: .4; }

/* Telefon (referans: max-sm:flex-col): hazır dönemler üstte, çizgi yatay, takvim ortada. */
@media (max-width: 639.98px) {
    .cd-page .cl-filter-menu.cl-range-menu { flex-direction: column; width: 100%; max-width: none; }
    .cd-page .cl-range-sep { width: auto; height: 1px; }
    .cd-page .cl-range-side { align-self: center; }
}

/* Dönem değişince tablo yenilenirken soluk ve tıklanmaz (kullanıcı kararı 2026-11-13; sunucu cevabı canlıda 0,5–1 sn sürebilir): eski satırlar yerinde kalır, cevap gelince yenisi oturur. */
.cl-compare-wrap { transition: opacity 150ms var(--cd-ease-out); }
.cl-compare-wrap.cl-updating { opacity: .5; pointer-events: none; }

/* Telefonda tablo bölümünün başlığı (kullanıcı kararı 2026-11-13; başlık ile dönem seçicisi üst üste biniyordu): başlık satırın tamamını alır, yazısı sığmazsa alt satıra geçer;
   araç çubuğu (dönem seçici, seçiciler) altında sağa yaslı yeni satırda. */
@media (max-width: 639.98px) {
    .cl-report-table-card .cl-report-table-card-heading { flex: 1 1 100%; }
    .cl-report-table-card .cl-report-table-card-title { white-space: normal; }
}

/* TELEFONDA İLK SÜTUN: TABLO GÖRÜNÜMÜNDE SABİT, GRAFİK GÖRÜNÜMÜNDE SERBEST (kullanıcı kararı 2026-11-13, CLAUDE.md §8.11; yalnızca telefon, < 768): düz veri tabloları
   (rapor tabloları, grafik kartlarının Tablo görünümü) yana kayarken ilk sütun (ad / ay) solda sabit kalır; çubuk gibi grafik içeren tablolarda (müşteri / ürün ciro ve net marj
   tabloları) ve grafik görünümünde ilk sütun serbesttir, sütunlarla birlikte kayar. */
@media (max-width: 767px) {
    /* Grafikli tablo: ilk sütun serbest. */
    .cl-report-table.cl-cmpt > thead th:first-child,
    .cl-report-table.cl-cmpt > tbody > tr > :first-child {
        position: relative; /* sabit değil ama konumlu: başlıktaki mutlak konumlu sıralama oku kaydırma kabının dışına taşmasın */
        background-color: transparent;
    }

    /* Grafik kartının Tablo görünümü: çok sütunlu tablo (yığılmış grafiğin parçaları) sıkışmaz, yana kayar; ilk sütun (ay) solda sabit. */
    .cl-chart-table table { width: max-content; min-width: 100%; }
    .cl-chart-table :is(thead, tbody) > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--cd-page-bg);
        white-space: nowrap;
    }
    .cl-chart-table thead > tr > :first-child { z-index: 3; }
}

/* SIRALANABİLİR BAŞLIK YAZISI SEÇİLMEZ (kullanıcı bildirimi 2026-11-13; referansın başlık düğmesi `select-none`): hızlı arka arkaya basışta (çift / üçlü tıklama) başlık yazısı işaretlenmez. */
.cl-report-table thead th[data-cl-sortable],
.cd-page .fi-ta-ctn thead th,
.cl-ms2-sort {
    -webkit-user-select: none;
    user-select: none;
}

/* SIRALAMA OKU KAYDIRMA KABININ İÇİNDE KALIR (kullanıcı bildirimi 2026-11-13; telefonda Satış ve Kârlılık sayfası 216 px yana taşıyordu): ok başlıkta mutlak konumlu (yazıyı kaydırmasın diye);
   başlık konumlu olmazsa ok, kaydırma kabının dışındaki üst öğeye göre konumlanır, kabın kırpmasından kaçar ve geniş tablonun sağ uçtaki başlıklarının okları sayfayı genişletir.
   Başlık (ve düğme) konumlu: ok kabın içinde kırpılır ve tabloyla birlikte kayar. */
.cl-report-table thead th[data-cl-sortable],
.cl-ms2-sort {
    position: relative;
}

/* ÜST ÇUBUK TELEFONDA SIĞAR (kullanıcı bildirimi 2026-11-13): logo + büyüteç + görünüm seçici + zil + senkron + ☰ 375 px'e sığmıyor, ☰ ekranın dışında kalıyordu. Telefonda düğme aralığı 4,
   görünüm seçicinin ek boşluğu yok; 360 px'ten dar ekranda (geçici) görünüm seçici gizlenir, düğmeler her zaman erişilir. */
@media (max-width: 767px) {
    .cd-topbar-end { gap: 4px; }
    .cd-topbar .cl-theme-seg--topbar { margin-right: 0; }
}
@media (max-width: 359px) {
    .cd-topbar .cl-theme-seg--topbar { display: none; }
}

/* ÜST ÇUBUKTA CL İKONU REFERANSIN İKONU KADAR YÜKSEK (kullanıcı kararı 2026-11-13; referansın üst çubuğundaki Claude işareti canlıda ölçüldü: 20 × 20, çubuğun (48) ortasında): Core ve B2B
   üst çubuğunda CL işaretinin yüksekliği 20 px (genişlik oranla); giriş ekranlarındaki logo (harf yüksekliği) değişmez. İkon çubuğun dikey ortasına oturur. */
.cd-topbar-brand img.cl-wordmark-icon {
    height: 20px;
    vertical-align: middle;
}

/* Üst çubukta ikon ve "Core Portal" yazısı aynı dikey merkezde (kullanıcı kararı 2026-11-13; referansta ikon ve yazı aynı merkezde): satır içi akış yerine ortalı esnek satır; boşluklar 0,25 em (yazı boşluğu). */
.cd-topbar-brand.cd-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}
.cd-topbar-brand img.cl-wordmark-icon { vertical-align: baseline; }

/* GİRİŞ EKRANLARINDA DA CL İKONU 20 px (kullanıcı kararı 2026-11-14: "üst çubuktaki gibi"; üst çubuk kuralının eşi, Core ve B2B giriş ekranı): ikon 20 px yüksek, ikon ve "Core / B2B Portal"
   yazısı aynı dikey merkezde, aralık 0,25 em; logo bağlantısı (.cl-auth-home) şeridin dikey ortasında kalır. */
.fi-simple-layout .cl-auth-home .fi-logo {
    display: inline-flex !important; /* `.fi-simple-layout .fi-logo { display: block !important }` kuralını ezer */
    align-items: center;
    gap: 0.25em;
}
.fi-simple-layout .cl-auth-home .fi-logo img.cl-wordmark-icon {
    height: 20px;
    vertical-align: baseline;
}
.fi-simple-layout .cl-auth-home .fi-logo img.cl-wordmark-icon--dark,
:root:not(.dark) .fi-simple-layout .cl-auth-home .fi-logo img.cl-wordmark-icon--dark { display: none; }
:root.dark .fi-simple-layout .cl-auth-home .fi-logo img.cl-wordmark-icon--dark { display: inline-block; }
:root.dark .fi-simple-layout .cl-auth-home .fi-logo img.cl-wordmark-icon--light { display: none; }

/* Telefonda süzgeç şeridi: Dışa aktar alt satıra inince tek başına sola yaslı kalmaz, sağ uçta durur (kullanıcı kararı 2026-11-13). */
@media (max-width: 639.98px) {
    .cd-page .cl-report-pillbar-end { margin-left: auto; }
}

/* GRAFİKLERDE VE GRAFİK TABLOLARINDA YAZI HER ZAMAN BEYAZ (kullanıcı kararı 2026-11-13, CLAUDE.md §8.11): çubuk, çizgi ve dolgular renkli olur, ama yanındaki / içindeki yazı (tutar, yüzde, ad)
   birincil renkte kalır: net marj, net kâr, zarar, artış / azalış yazıları boyanmaz. Kapsam: grafik kartları, çubuklu tablolar (müşteri / ürün ciro, net kâr ve net marj; Satış Özeti), köprüler,
   Gelir Tablosu merdiveni. Durum rozetleri (arka planlı) ve özet kartlardaki değişim rozeti bu kuralın dışında. Gri notlar (ikincil / soluk) gri kalır. */
:is(.cl-cmpt, .cl-ms2, .cl-bridge, .cl-ladder, .cl-chart-card) :is(
    .cl-margin, .cl-margin--loss, .cl-margin--below, .cl-margin--ok, .cl-margin--target,
    .cl-loss-text, .cl-loss-text a, .cl-profit-text, .cl-report-up, .cl-report-down, .cl-term-loss-text
) {
    color: var(--cd-text-primary) !important;
}

/* KÖPRÜLER TELEFONDA GENİŞ VE YANA KAYAR (kullanıcı kararı 2026-11-13; Ciro Köprüsü, Müşteri Hareketi, Kâr Köprüsü): < 768'de köprü satırları daralıp
   çubuğu ezmez; çubuk sütunu en az 220, kart içinde yana kayar. Ad ve tutar sütunları İÇERİĞİ KADAR geniştir (ortak ızgara, alt ızgaralı satırlar): ad ile tutar
   arasında boş yer kalmaz (kullanıcı kararı 2026-11-13). */
@media (max-width: 767.98px) {
    .cl-bridge .cl-hb.cl-cur { display: grid; grid-template-columns: max-content max-content minmax(220px, 1fr) max-content; column-gap: 12px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .cl-bridge .cl-hb::-webkit-scrollbar { display: none; }
    .cl-bridge .cl-hb > .cl-hb-axis, .cl-bridge .cl-hb > .cl-hb-body, .cl-bridge .cl-hb-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: 12px; }
    .cl-bridge .cl-hb-label { white-space: nowrap; }
    .cl-bridge .cl-hb-lines { grid-column: 3; grid-row: 1 / -1; left: 0; right: 0; }
}

/* TELEFONDA İLK İKİ SÜTUN ARASI DAR (kullanıcı kararı 2026-11-13): çubuklu karşılaştırma tablolarında (.cl-cmpt) ad sütunu telefonda 168 (daha uzun ad "…" ile kısalır, tamamı ipucunda),
   böylece ad ile tutar arasında boş yer kalmaz; köprülerde ad ve tutar sütunları içerik kadar (yukarıdaki blok). */
@media (max-width: 767.98px) {
    .cl-report-table.cl-cmpt, .cl-cmpt { --cl-label-min: 168px; }
}

/* Köprüler telefonda kaydığı için kenar solmasını alır (KÖPRÜLER TELEFONDA bloğundaki kaydırma kabı; YANA KAYAN İÇERİKTE KENARLAR SOLAR). */
@supports (animation-timeline: scroll()) {
    @media (max-width: 767.98px) {
        .cd-page .cl-bridge .cl-hb.cl-cur {
            mask-image: linear-gradient(to right,
                transparent,
                #0000000d calc(var(--cl-fade-left) * .15), #00000026 calc(var(--cl-fade-left) * .3), #0000004d calc(var(--cl-fade-left) * .45),
                #00000080 calc(var(--cl-fade-left) * .6), #000000b3 calc(var(--cl-fade-left) * .75), #000000d9 calc(var(--cl-fade-left) * .87),
                #000 var(--cl-fade-left),
                #000 calc(100% - var(--cl-fade-right)),
                #000000d9 calc(100% - var(--cl-fade-right) * .87), #000000b3 calc(100% - var(--cl-fade-right) * .75), #00000080 calc(100% - var(--cl-fade-right) * .6),
                #0000004d calc(100% - var(--cl-fade-right) * .45), #00000026 calc(100% - var(--cl-fade-right) * .3), #0000000d calc(100% - var(--cl-fade-right) * .15),
                transparent);
            animation-name: cl-fade-left, cl-fade-right;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-duration: auto;
            animation-timeline: scroll(self inline);
            animation-range: 0px 28px, calc(100% - 28px) 100%;
        }
    }
}

/* GECİKME DAĞILIMI ÇUBUĞU (Tahsilat Performansı; kullanıcı kararı 2026-11-13): yaşlandırma çubuğunun dilimleri gecikme dilimleri (gri → sarı → turuncu → kırmızı) ve adın yanındaki soluk fatura sayısı. */
.cl-aging-seg--ontime { --cl-aging-color: var(--cl-chart-gray); }
.cl-aging-seg--late30 { --cl-aging-color: var(--cl-chart-late1); }
.cl-aging-seg--late60 { --cl-aging-color: var(--cl-chart-late2); }
.cl-aging-seg--late60p { --cl-aging-color: var(--cl-chart-late3); }
.cl-aging-note { color: var(--cd-text-muted); }
.cl-cmpt-bar--gray { background: var(--cl-chart-gray); } /* açık alacağın vadesi gelmemiş parçası (Tahsilat Performansı müşteri tablosu) */

/* Tahsilat Performansı birleşik müşteri tablosu: ad sütununun en dar hâli 208 (masaüstünde; telefonda .cl-cmpt'nin 168'i), tablo en az 1024: 1200 kapta kaymadan sığar. */
@media (min-width: 768px) {
    .cl-report-table.cl-payment-table { --cl-label-min: 208px; }
}

/* İpucu alt satırının açıklaması renk işaretiyle yan yana; birleşik müşteri tablosunun çubuk hücresi ipucu tutma alanı geniş. */
.cd-tooltip-sub-label { display: inline-flex; align-items: center; gap: 6px; }
/* İpucu için tutma alanı çubuğun 12 üstüne / altına uzar (satır yüksekliği Satış ve Kârlılık'ın müşteri tablosuyla aynı kalsın: 37). */
.cl-payment-table .cl-cmpt-cell { position: relative; }
.cl-payment-table .cl-cmpt-cell::before { content: ""; position: absolute; inset: -12px 0; }

/* İNAKTİF FİLTRE HAPI (kullanıcı kararı 2026-11-13; referansın Caching › Range hapı canlıda ölçüldü: sarmalayıcı %40 saydam, imleç ok, tıklanamaz, görünüm aynı): süzgeç o sayfa durumunda uygulanamıyorsa hap kalkmaz, inaktif olur. */
.cd-page .cl-filter-pill-wrap.is-disabled { opacity: 0.4; pointer-events: none; }
.cd-page .cl-filter-pill-wrap.is-disabled .cl-filter-pill { cursor: default; }

/* RAPOR TABLOSU BAŞLIĞINDA ⓘ — STANDART (kullanıcı kararı 2026-11-13; referansın Caching kart başlığı canlıda ölçüldü: ikon 16, düğme 24 / −4 / iç 4, yazıdan 8, satır kutusunun ortasında; partials/th-info):
   ⓘ yazının 8 sağında ASILI durur; sağa yaslı başlıkta yazı sayılarla aynı hizada kalır, sütun genişlemez, rowspan'lı başlıkta da yazıyla birlikte durur. */
.cl-th-info { position: relative; z-index: 2; display: inline-block; } /* sağa yaslı başlıkta ⓘ komşu başlığın üstüne taşar: üstte kalır, ipucu açılır */
/* ⓘ HER ZAMAN başlık yazısının hemen sağında (8), arada başka bir şey olmaz; ⓘ'li başlıkta sıralama oku yazının hemen SOLUNDA asılı durur (sola yaslı başlıkta da) */
.cl-report-table thead th:has(.cl-th-info) > .cl-report-sort-arrow { margin-left: -20px; }
.cl-th-info > .cl-info-tip {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 8px;
    transform: translateY(-50%);
}

/* Açık alacak çubuğunda parçaların birleşim noktası Gecikme Dağılımı çubuğu gibi (kullanıcı kararı 2026-11-13): dış köşe 4, iç köşe 2, parçalar arası 1 */
.cl-cmpt-bar--join-end { border-top-right-radius: 2px; border-bottom-right-radius: 2px; margin-right: 0; box-shadow: none; clip-path: inset(0 .5px 0 0); }
.cl-cmpt-bar--join-start { border-top-left-radius: 2px; border-bottom-left-radius: 2px; clip-path: inset(0 0 0 .5px); }


/* TABAN – HEDEF ÇİZGİLERİ (kullanıcı kararı 2026-11-14; Satış ve Kârlılık › Net Marj): dolgusuz ince çizgiler, taban turuncu, hedef yeşil. */
.cl-chart-bandedge {
    fill: none;
    stroke: var(--cl-chart-color);
    stroke-opacity: 0.7;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Güvenli nakit düzeyi çizgisi (kullanıcı kararı 2026-11-14; Nakit Akışı › Dönem Sonu Nakit): diğer referans çizgileri gizli, bu görünür. */
.cl-chart-ref.cl-chart-ref--buffer {
    display: inline;
    stroke-opacity: 0.7;
}

/* Sekmeli analiz sayfasında (Gelir Tablosu, Genel Gider) hap satırı varken raporun -28 üst boşluğu uygulanmaz: aradaki sekme şeridi zaten kendi boşluğunu taşır (kullanıcı kararı 2026-11-14; para birimi seçicisi başlığın altındaki hap satırına taşındı). */
.cd-page:has(.cl-report-pillbar):has(.cl-page-tabs--sticky) .cl-page-tabs-wrap .cl-report {
    margin-top: 0;
}

/* Sekmeli analiz sayfasında hap satırı + sekme şeridi (kullanıcı kararı 2026-11-14; RAPOR SAYFASI BOŞLUK STANDARDI): aralarında boşluk ve çizgi yok, iki şerit kesintisiz bitişik; son hap → sekme yazısı 24
   (sekme şeridinin üst iç boşluğu 24; sayfanın 16'lık öğe aralığı eksi kenar boşluğuyla eritilir), sekme yazısı → ilk kart 16. */
.cd-page:has(.cl-report-pillbar) .cl-page-tabs--sticky {
    margin-top: -17px;
    padding-top: 0; /* hap satırı 20 alt boşluk taşır (yapışınca çizgi onun son pikselinde); sekme düğmesinin kendi 5'iyle son hap → sekme yazısı tam 24 */
}
.cd-page:has(.cl-page-tabs--sticky) .cl-report-pillbar {
    padding-bottom: 20px; /* yapışınca boydan boya çizgi hapın 20 altında (üstündeki 20 ile aynı; kullanıcı kararı 2026-11-14), altında içeriği boş uçlu sekme çizgisi */
}
.cd-page:has(.cl-page-tabs--sticky) .cl-report-pillbar::after {
    bottom: 0;
}


/* Tablo bölümünün sekme şeridi dar ekranda (telefon) sayfayı yana taşırmaz (kullanıcı kararı 2026-11-14; Nakit Akışı › Kayıtlı │ Beklenen │ Kötümser │ Tahmin – Gerçekleşen, 377 px'ti): şerit kendi içinde yana kayar,
   kenarlar solar (.cl-fade-x kalıbı), çubuk görünmez. */
.cl-report-table-card-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.cl-report-table-card-tabs::-webkit-scrollbar { display: none; }
.cl-report-table-card-tabs .cl-tabs { flex-wrap: nowrap; white-space: nowrap; }
.cl-report-table-card-tabs .cl-tab { flex: 0 0 auto; }


/* Yapışık hap satırı + sekme şeridi: yapışınca sekme yazısı da hapın 24 altında kalır (şeritlerin birbirine 1 px binmesiyle; kullanıcı kararı 2026-11-14). */
.cd-page:has(.cl-report-pillbar) .cl-page-tabs--sticky {
    top: calc(var(--cd-topbar-h) + var(--cl-pillbar-h, 0px) - 1px);
}

/* Nakit Akışı: Yaklaşan Büyük Tahsilatlar / Ödemeler iki kart yan yana (kullanıcı kararı 2026-11-14); dar kapta alt alta (.cl-report-charts kuralı). */
.cl-report-lists > .cl-report-table-card {
    margin-top: 0;
    min-width: 0;
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}
.cl-report-lists .cl-report-table.cl-report-table { --cl-label-min: 120px; }

/* Nakit Akışı tablosunun Net Nakit Akışı / Dönem Sonu Nakit satırları standart yazı boyunda 14 / 20 (kullanıcı kararı 2026-11-14; gelir tablosu düzenindeki 16 / 24 sonuç satırı bu tabloda büyük görünüyordu). */
.cl-report-table.cl-report-table--plain-results tbody > .cl-report-row--result > * { font-size: 14px; line-height: 20px; }
/* Boyut aynı, fark renkle (kullanıcı kararı 2026-11-14): sonuç satırları (Net Nakit Akışı, Dönem Sonu Nakit) beyaz, kalın değil; Dönem Başı ve Toplam satırları gri. */
.cl-report-table.cl-report-table--plain-results tbody > .cl-report-row--result > * { font-weight: 400; color: var(--cd-text-primary); }
.cl-report-table.cl-report-table--plain-results tbody > :is(.cl-report-row--total, .cl-report-row--line) > * { color: var(--cd-text-secondary); font-weight: 400; }

/* ANALİZLERDE AÇILAN ALT SATIR FORMATI — HER YERDE AYNI (kullanıcı kararı 2026-11-14): açılır-kapanır satırın altındaki alt satır = ilk hücrede 36 içeride yazı, yazılar GRİ (ikincil renk; üst satır beyaz),
   grafik 2 px ince çizgi (yukarıdaki kurallar). Kullananlar: çubuklu karşılaştırma tabloları (.cl-cmpt: Satış ve Kârlılık, Alış ve Maliyet, Kalemlere Göre Gelir Tablosu, Kategorilere Göre Genel Gider),
   Satış Özeti ay satırları (.cl-ms2-mrow), Test Sonuçları test satırları (.cl-lab-table). Yeni açılır satırlı analiz tablosu bu formata uyar. */
.cl-report-table.cl-cmpt tbody > tr[data-cl-parent] > :is(th, td),
.cl-report-table.cl-cmpt tbody > tr[data-cl-parent] > :is(th, td) *,
.cl-lab-table tbody > tr.cl-report-lvl-1 > :is(th, td),
.cl-lab-table tbody > tr.cl-report-lvl-1 > :is(th, td) * { color: var(--cd-text-secondary); }


/* PLANLI ÖDEMELER (Nakit Akışı; kullanıcı kararı 2026-11-14): bölüm başlığının altındaki cari borç özeti ve satırdaki eylem düğmeleri. */
.cl-planned-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
}


/* TABLOLARDA KIRMIZI YAZI YOK, HER ZAMAN BEYAZ (kullanıcı kararı 2026-11-14; "GRAFİKLERDE VE GRAFİK TABLOLARINDA YAZI HER ZAMAN BEYAZ" kuralının bütün tablolara genişlemesi): rapor tablolarında ve liste tablolarında
   tutar, yüzde ve gün yazıları kırmızı boyanmaz (vadesi geçmiş tutar, zarar, kötüleşme, nakit eksisi); eksi parantez ya da işaret, çubuk ve durum rozetleriyle anlatılır. Rozetler (arka planlı) kuralın dışında. */
:is(.cl-report-table, .cl-cmpt, .fi-ta-ctn) :is(.cl-report-down, .cl-report-amount--danger, .cl-loss-text, .cl-loss-text a):not(.cl-status-badge):not(.cl-inv-badge),
:is(.cl-report-table, .cl-cmpt, .fi-ta-ctn) :is(.cl-qv-link, .cl-report-amount, a):has(> .cl-report-down) {
    color: var(--cd-text-primary) !important;
}


/* Operasyon bölümü, küçültülmüş (kullanıcı kararı 2026-11-14): beş kart tek sırada, her biri 64 yüksek; solda 36 × 36 pastel ikon karosu, yanında ad ve canlı
   sayı. Kartın tamamı bölümün Genel Bakış'ına bağlantı. */
.cl-dash-ops {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr));
    gap: 12px;
}

.cl-dash-hl,
.cl-dash-hl:hover {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .cl-dash-hl:hover {
        background: var(--cd-fill-ghost-hover);
    }
}

.cl-dash-hl:active {
    scale: 0.995;
}

/* Referansın model kartlarındaki pastel şerit (88 yüksek) ve üstündeki büyük çizgi çizimi; şeridin altında 1 px çizgi. */
.cl-dash-hl-band {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    border-bottom: 1px solid var(--cd-border);
    color: #141413;
}

.cl-dash-hl-band svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.25;
}

.cl-dash-hl-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 16px 16px;
}

.cl-dash-hl-label {
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

.cl-dash-hl-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 580;
    color: var(--cd-text-primary);
}

.cl-dash-hl-body .cl-dash-chips {
    margin-top: 8px;
}

/* Oran halkası kartın akışından çıkar (referansta olduğu gibi): üst sıradaki üç kartın değer ve not satırları aynı hizada kalır, halka sağ altta durur. */
.cl-dash-card:not(.cl-dash-card--wide) .cl-dash-ring {
    position: absolute;
    right: 16px;
    bottom: 16px;
}


/* Dikkat kartları yan yana (kullanıcı kararı 2026-11-14): en az 240 genişlikte eşit sütunlar; kart solda ikon, altında konu ve not. */
.cl-dash-attn {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px;
}

.cl-dash-attn-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 16px 14px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--cd-border);
}

.cl-dash-attn-card .cl-dash-row-icon {
    margin-bottom: 4px;
}

.cl-dash-attn-text {
    font-size: 14px;
    line-height: 20px;
    color: var(--cd-text-primary);
}

.cl-dash-attn-note {
    font-size: 12px;
    line-height: 17px;
    color: var(--cd-text-secondary);
}

/* Bölüm başlığının yanındaki dönem notu (kullanıcı kararı 2026-11-14): başlıktan 8 sağda, 14/20 soluk, ağırlıksız (kartların nitelik notu gibi: "Daily cost · last 30 days"). */
.cl-dash-heading-note {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--cd-text-muted);
}

/* Panel › Bu Ayki Günlük Ciro, dar kapta (telefon, tablet; kullanıcı bildirimi 2026-11-14, canlı testte 375 px'te sayfa 205 px, 768 px'te 84 px yana taşıyordu):
   çubuk grafiği kartın sağına yapıştırmak yerine değerin altına, tam genişliğe alır; 31 gün için aralar 3 px'e iner, çubuklar kartın içinde kalır. */
@container cl-dash (max-width: 699px) {
    .cl-dash-card--wide .cl-spark-body {
        flex-wrap: wrap;
    }

    .cl-dash-card--wide .cl-dash-bars {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        height: 96px;
        margin-top: 8px;
    }

    .cl-dash-card--wide .cl-dash-bars-plot,
    .cl-dash-card--wide .cl-dash-bars-axis {
        gap: 3px;
    }

    .cl-dash-card--wide .cl-dash-bar,
    .cl-dash-card--wide .cl-dash-bars-axis span {
        flex-basis: calc((100% - (var(--cl-days, 31) - 1) * 3px) / var(--cl-days, 31));
    }
}

/* Panel › Kısayollar: kartın tamamı bağlantı (başlıktaki bağlantının ::after'ı kartı kaplar); eylem düğmeleri bağlantının üstünde, kendi sayfalarına gider.
   Üzerine gelince hayalet dolgu, basınca hafif içe çökme (KPI kartlarıyla aynı). */
.cl-dash-res-card .cl-dash-res-actions {
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    .cl-dash-res-card:hover {
        background: var(--cd-fill-ghost-hover);
    }
}

.cl-dash-res-card:active {
    scale: 0.995;
}

/* Kayıt Analiz sekmelerinde çıplak tablo bölümü (kullanıcı kararı 2026-11-14): .cl-ms2 ızgarası kart içi 16'lık iç boşluk için tasarlanmıştı;
   çıplak bölümde kaydırma kabı bölümün kenarına 12 taşar (rapor tablosu standardı), satır yazıları başlık hizasında kalır. */
.cl-report-table-card .cl-ms2-scroll { margin: 0 -12px; padding: 0 12px; }

/* Müşteri sayfası › Analiz karnesi (kullanıcı kararı 2026-11-14): üç teşhis kartı yan yana (dar kapta alt alta), kartların altında ilgili rapora bağlantı. */
.cl-diag-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cl-diag-row > .cl-diag {
    margin-bottom: 0;
}

.cl-diag .cl-diag-link {
    align-self: flex-start;
    margin-top: auto;
}

/* Karnede kart ile alttaki bölümler arası 16 (kartlar arası standart). */
.cl-analysis-collection:empty { display: none; }

/* Gelir Tablosu │ Genel Gider (kullanıcı kararı 2026-11-14): ₺ | $ sekme şeridinin ALTINDA; sekme şeridi + ₺ | $ satırı TEK yapışkan blok (üst çubuğun altına yapışır,
   içerik alanının kenardan kenara arka planı ve yapışınca alt çizgisi referansın yapışık şeridi gibi). Blok alt boşluğu 16 (ilk karta uzaklık; sayfanın 16'lık öğe
   aralığı eksi kenar boşluğuyla eritilir: -12), sekme yazısının üstü açıklamanın 24 altında (ölçüldü 2026-11-14). */
.cd-page .cl-income-sticky {
    position: sticky;
    top: var(--cd-topbar-h);
    z-index: 10;
    margin-top: -5.5px;
    margin-bottom: -12px;
    margin-inline: calc(50% - 50cqi);
    padding: 8px calc(50cqi - 50%) 16px;
    background: var(--cd-page-bg);
}

.cd-page .cl-income-sticky .cl-page-tabs--sticky {
    position: static;
    margin-top: 0;
    padding-top: 0;
    background: none;
}

.cd-page .cl-income-toolbar {
    margin-top: 12px;
}

.cd-page .cl-income-sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--cd-border);
    opacity: 0;
    pointer-events: none;
}

.cd-page .cl-income-sticky.is-stuck::after {
    opacity: 1;
}