/* ==========================================================================
   Temeller
   Tipografi, rakamlar, odak ve hareket. Her yerde geçerlidir; dolayısıyla bütün
   ekranların tabanını tek seferde yükseltmenin en ucuz yeri burasıdır.
   ========================================================================== */

html {
    /* iOS Safari'nin yatay kipte metni şişirmesini engeller; o davranış, telefonlarda özenle
       kurulmuş yazı ölçeklerini sessizce bozar. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* Sistem arayüz yazı tipi kendi tarayıcısı için tasarlanmıştır; bu iki ayar, onun
       varsayılan değil bilinçli görünmesini sağlayan şeydir. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Gerçek kesme işaretleri, doğru bitişik harfler — yazı tipinin kendisinden gelen bedava incelik. */
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Kolonlar hâlinde duran sayılar hizalanmak zorundadır. Orantılı rakamlar, tutar ya da
   skor tablosunu tırtıklı gösterir ve okumayı yavaşlatır — operatörün gözü her satırda
   ondalığı yeniden bulmak zorunda kalır. */
.mud-table-cell,
.mud-table-cell *,
.mud-data-grid .mud-table-cell,
.mud-chip,
code, kbd, samp, pre {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Uzun ve anlamsız diziler — nesne kimlikleri, özetler, token'lar, parmak izleri —
   sözcük olarak okunmaz, karakter karakter karşılaştırılır. Eş aralıklı bir yazı tipi
   bunu mümkün kılar ve bir l/1 ya da O/0 karışıklığının olaya dönüşmesini önler. */
code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
}

/* Klavye odağı görünür olmak zorundadır. MudBlazor'ın varsayılanı, klavye kullanıcıları
   için hiç belirmeyen ince bir dalgalanmaya dayanır; bu da uygulamayı faresiz kullanılamaz
   bırakır. :focus-visible halkayı fare tıklamalarından uzak tutar, böylece hiçbir şey
   gürültülü görünmez. */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-input-slot:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* İşletim sisteminin azaltılmış hareket ayarına uyulur. Denge bozuklukları, bunu bir
   tercih değil bir doğruluk meselesi yapacak kadar yaygındır. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Taşma sınırlama
   Uygulamadaki süzgeç araç çubukları, masaüstünde kullanılabilir kalsınlar diye seçim
   kutularına ve arama alanlarına min-width verir (120–240px). 375px'lik bir telefonda
   bunlardan ikisi yan yana sığmaz ve sayfayı yana iter. Her satır içi biçimi tek tek
   sökmek yerine, görüş alanı bu alanların tasarlandığı genişlikten dar olduğunda
   kısıt kaldırılır.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .mud-input-control[style*="min-width"],
    .mud-select[style*="min-width"],
    [style*="min-width:220px"],
    [style*="min-width:240px"],
    [style*="min-width: 220px"],
    [style*="min-width: 240px"] {
        min-width: 100% !important;
    }

    /* İletişim kutuları her yerde Small + FullWidth'tir; bu, bazı iç içeriklerde yine de
       katı bir min-width bırakır. Kutu gövdeleri gerçekten sahip oldukları genişliği
       kullansın. */
    .mud-dialog {
        margin: 12px;
        width: calc(100% - 24px);
    }
}

/* Küçülemeyen bir tablo kendi kutusunun içinde kayar; sayfa gövdesi asla kaymaz.
   Bu olmadan tek bir hücredeki tek bir uzun kimlik, yerleşimin tamamını yana sürükler. */
.mud-table-container,
.mud-data-grid .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Anlamsız tanımlayıcılar satırı genişletmek yerine alt satıra kaydırılır. */
.mud-table-cell code,
.mud-table-cell .mud-chip-label {
    overflow-wrap: anywhere;
}

.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}

.mud-chip.mud-chip-size-medium {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-chip.mud-chip-size-small {
    font-size: var(--mud-typography-body2-size) !important;
}

.mud-chip {
    font-size: var(--mud-typography-default-size);
}
.mud-tabs {
    background-color: var(--mud-palette-surface);
}

.mud-input-control-margin-dense .mud-input > input.mud-input-root,
.mud-input-control-margin-dense div.mud-input-slot.mud-input-root {
    font-size: 0.90em;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-default-size) !important;
}


.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;

}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
}
.mud-table-dense .mud-table-cell {
    font-size: var(--mud-typography-body2-size) !important;
}


.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom:2px;
}

.mud-nav-link {
    white-space: normal !important;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

.mud-table.mud-data-grid .mud-toolbar {
    height: auto !important;
    padding: 1rem
}


.mud-table.mud-data-grid .mud-toolbar-gutters {
    height: auto !important;
    padding: 1rem
}

.mud-table.mud-data-grid .mud-table-toolbar {
    height: auto !important;
    padding: 1rem
}

.mud-table.mud-data-grid .mud-table-pagination-toolbar {
    height: auto !important;
    padding: 0rem !important;
}



.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}
/* ==========================================================================
   Kimlik doğrulama kabuğu
   Dizüstünde iki bölme, telefonda bir. Marka bölmesi süstür ve ilk o katlanır;
   her genişlikte ayakta kalmak zorunda olan tek şey formdur.
   ========================================================================== */

.auth-shell {
    min-height: 100dvh;          /* vh değil dvh: iOS Safari'nin adres çubuğu 100vh'yi
                                    görünen görüş alanından uzun yapar ve bu, oturum
                                    açma düğmesini ekranın dışına itiyordu. */
    display: grid;
    grid-template-columns: 1fr;
    background: var(--mud-palette-background);
}

.auth-shell-plain {
    place-items: center;
    padding: 2rem;
}

@media (min-width: 900px) {
    .auth-shell {
        /* Marka bölmesi daha büyük payı alır ama çok geniş bir ekranda sınırsızca
           büyümez; orada %60'lık bir bölme formu ıssızlıkta bırakırdı. */
        grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
    }
}

/* ---- marka bölmesi ---- */

.auth-aside {
    display: none;
    position: relative;
    overflow: hidden;
    background: #0B0D12;
    padding: 3.5rem;
    align-content: end;
}

@media (min-width: 900px) {
    .auth-aside { display: grid; }
}

.auth-aside-art {
    position: absolute;
    inset: 0;
    /* Grafiği metnin durduğu yerde soldurur; böylece metin, arkasından geçen bir çizgiyle
       hiç yarışmaz. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
}

.auth-aside-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- marka bölmesi: çizgeyi geçen sinyal ----
   8 saniyede bir dalga. Her öge bunun kısa bir diliminde canlanır, geri kalanında
   görünmezdir; böylece bölme zamanın çoğunda durgundur — bir parola alanının arkasında
   durur ve gözü çekmemelidir. İşaretlemede öge başına verilen --d, her katmanı kendisini
   besleyenin ardına kaydırır. */

.krino-flow path {
    /* Boşluk yoldan uzundur; böylece kesik çizgi hiç sarmalanmaz ve iki kez görünmez.
       İşaretlemedeki pathLength="100", gerçek uzunluğu ne olursa olsun tek bir sürenin
       her parçaya uymasını sağlayan şeydir. */
    stroke-dasharray: 9 200;
    stroke-dashoffset: 15;          /* başlangıcın hemen öncesine park edilmiş: görünmez */
    animation: krino-signal 8s linear infinite;
    animation-delay: var(--d, 0s);
    will-change: stroke-dashoffset;
}

@keyframes krino-signal {
    0%   { stroke-dashoffset: 15; opacity: 0; }
    2%   { opacity: 0.95; }
    /* Yol alma, döngünün ilk beşte birini kaplar; geri kalanı dinlenmedir. */
    18%  { opacity: 0.95; }
    20%  { stroke-dashoffset: -115; opacity: 0; }
    100% { stroke-dashoffset: -115; opacity: 0; }
}

.krino-pings circle {
    transform-box: fill-box;        /* ölçekleme, SVG başlangıç noktasına göre değil
                                       çemberin kendi merkezine göre; öteki hâlde halka
                                       bölmenin öbür ucuna fırlardı */
    transform-origin: center;
    opacity: 0;
    animation: krino-ping 8s ease-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes krino-ping {
    0%   { transform: scale(1);   opacity: 0; }
    3%   { opacity: 0.5; }
    14%  { transform: scale(3.4); opacity: 0; }
    100% { transform: scale(3.4); opacity: 0; }
}

.krino-nodes circle {
    animation: krino-node 8s ease-out infinite;
    animation-delay: var(--d, 0s);
}

/* Sinyal düğüme indiğinde düğüm parlar ve sonra yerine oturur. Çizgi kalınlığına
   dokunulmaz: onu büyütmek düğümün siluetini kaydırır ve bir titreme gibi okunur. */
@keyframes krino-node {
    0%   { stroke: #8B8BF0; }
    3%   { stroke: #C9C9FF; }
    16%  { stroke: #8B8BF0; }
    100% { stroke: #8B8BF0; }
}

/* Buradaki hareket büsbütün süstür; dolayısıyla ilk gidecek şey odur. Geriye, bölmenin
   önceden de sahip olduğu durağan çizge kalır. */
@media (prefers-reduced-motion: reduce) {
    .krino-flow,
    .krino-pings {
        display: none;
    }

    .krino-nodes circle {
        animation: none;
    }
}

.auth-aside-body {
    position: relative;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-aside-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-aside-mark {
    width: 44px;
    height: auto;
    /* Çivit rengini, tonunu kaydırmadan mürekkep zemininden ayır. */
    filter: brightness(1.45);
}

.auth-aside-wordmark {
    color: #F2F3F7;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.auth-aside-line {
    margin: 0;
    color: #F2F3F7;
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.auth-aside-sub {
    margin: 0;
    color: #9AA0B0;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 30rem;
}

/* ---- form bölmesi ---- */

.auth-main {
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
    background: var(--mud-palette-surface);
}

@media (min-width: 900px) {
    .auth-main { padding: 3rem; }
}

.auth-card {
    width: 100%;
    max-width: 25rem;           /* ~400px: bundan geniş bir oturum açma formu, tek bir
                                   karar değil bir ayarlar sayfası gibi okunur. */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-card-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

/* Marka bölmesi göründüğü anda logo ekranda zaten iki kere vardır; onu yinelemek yerine
   küçük olanı düşür. */
@media (min-width: 900px) {
    .auth-card-logo { display: none; }
}

/* Kimlik formları durağan olarak işlenir; dolayısıyla MudTextField değil, MudBlazor'a
   benzemesi için biçimlendirilmiş çıplak input kullanırlar. Uygulamanın geri kalanındaki
   nefes payını onlara da ver. */
.auth-card .mud-input-control { margin-block: 0 !important; }

.auth-card form > .mud-input-control + .mud-input-control { margin-top: 1rem !important; }

/* Durağan işlenen kimlik formları için görünür alan etiketleri. Bunlar çıplak input
   kullanır (MudTextField, bu sayfalarda olmayan etkileşimi ister); dolayısıyla etiket,
   MudBlazor'dan devralınmak yerine burada biçimlendirilir. */
.auth-field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    order: -1;                       /* işaretleme sırasına rağmen kendi input'unun üstünde durur */
}

.auth-card .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

/* Her iki temada da her zaman koyu zemin ve açık yazı. Palet belirteçleri temayla
   birlikte dönüyor ve bu şeridi soluklaştırıyor, alt başlığı da okunabilir karşıtlığın
   altına düşürüyordu. */
.dashboard-hero {
    background: linear-gradient(135deg, #4646B8 0%, #0B0D12 100%);
    border-radius: var(--mud-default-borderradius);
}

.dashboard-hero-title { color: #FFFFFF !important; }
.dashboard-hero-sub   { color: rgba(255, 255, 255, 0.78) !important; }

/* Boş bir grafik paneli çoğunlukla boşluktur. Mesajı ortalamak, ona bir simge ve bir
   gerekçe vermek, "burada bir şey yok"u "henüz yok, sebebi de şu"ya çevirir. */
.chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 220px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.chart-empty .mud-icon-root { opacity: 0.35; }
.chart-empty .mud-typography-caption { opacity: 0.75; max-width: 28ch; }

/* Tablo içinde boş sonuçlar. "Kayıt yok" ne olduğunu söyler; ikinci satır ne yapılacağını
   söyler ki birine bir destek kaydı yazdırmayan kısım odur. */
.table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.table-empty .mud-icon-root { opacity: 0.3; }
.table-empty .mud-typography-caption { opacity: 0.8; max-width: 34ch; }

/* Ekran düzeyinde boş durum (bkz. Components/EmptyState.razor). Görüş alanının tam
   ortasında değil yukarıda durur: uzun ve boş bir sayfanın ortasına iğnelenmiş bir durum
   hata gibi okunur, içerik kenarının hemen altındaki ise "henüz değil" diye okunur. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 1.5rem;
    text-align: center;
}

.empty-state-icon {
    color: var(--mud-palette-text-secondary);
    opacity: 0.32;
}

.empty-state-body {
    color: var(--mud-palette-text-secondary);
    max-width: 44ch;
}

.empty-state-action { margin-top: 0.5rem; }

/* ---------------------------------------------------------------------------
   MudDataGrid için duyarlı kolon önceliği

   MudTable bir kırılma noktasının altında kendini kartlara katlayabilir, ama bu yalnızca
   MudTd'nin, CSS'in ::before ile geri okuduğu bir data-label özniteliği yazması sayesinde
   çalışır. MudDataGrid böyle bir öznitelik üretmez; dolayısıyla aynı numara, etiketsiz
   değerlerden oluşan bir yığın çizer. Bu yüzden altı ızgara ekranı, 375px'lik bir telefonda
   on kolonluk bir tabloyla kalıyordu: teknik olarak yana kaydırılabilir, pratikte işe yaramaz.

   Bu yüzden ızgaralar kolonları katlamak yerine düşürür. Her kolon, hangi genişliğe kadar
   yaşadığıyla etiketlenir ve telefon genişliğinde kalanlar, telefondan sıralama yapan birinin
   gerçekten ihtiyaç duyduklarıdır: satırın ne olduğu, ne kadar kötü olduğu ve ayrıntı
   görünümüne giden bir yol. Burada gizlenen her şey ayrıntı ekranında bulunur.

   Etiketi hem HeaderClass hem CellClass taşımak zorunda — birini ötekisiz gizlemek satırdaki
   her hücreyi bir kolon sola kaydırır.
   --------------------------------------------------------------------------- */

@media (max-width: 959.98px) {
    .mud-table-cell.col-hide-md { display: none !important; }
}

@media (max-width: 599.98px) {
    .mud-table-cell.col-hide-sm { display: none !important; }
}

/* Uzun ve anlamsız değerler — kimlikler, birincil anahtarlar, yığın izleri — tablonun
   tamamını ekrandan geniş yapmak yerine telefon genişliğinde alt satıra kayar. */
@media (max-width: 599.98px) {
    .mud-data-grid .mud-table-cell { word-break: break-word; }
}

/* Ekran başlığı (bkz. Components/PageHeader.razor). Başlık ile eylemi bir şeridi paylaşır;
   sm'nin altında eylem kendi satırına düşer ve genişler, çünkü telefonda başparmak
   büyüklüğünde bir hedef, sağa yaslanmış bir hedeften iyidir. */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-text { min-width: 0; }

/* h5 18px'e düşer; boş durumun kendi başlığından yalnızca iki puan yukarıda — gözün
   birini sayfa, ötekini onun içeriği diye okuması için yeterli bir basamak değil. */
.page-header-title {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.page-header-description {
    color: var(--mud-palette-text-secondary);
    max-width: 68ch;
    margin-top: 0.125rem;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Paylaşımlı değil, üst üste: 390px'lik bir satırı bölüşen iki düğme, "Yeni tablo oluştur"
   ifadesini ekranın yarısı genişliğindeki bir düğmenin içinde iki satıra bölüyordu. Satır
   başına bir tane hem daha iyi okunur hem de her birine başparmak büyüklüğünde hedef verir. */
@media (max-width: 599.98px) {
    .page-header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}

/* Geliştirilmiş formlar için gönderim geri bildirimi (bkz. wwwroot/js/form-busy.js). Düğme
   etiketini korur — metni bir dönen göstergeyle değiştirmek düğmenin genişliğini zıplatır ve
   ne olduğunu doğrulayan o tek sözcüğü kaybettirir. */
.form-busy button[type="submit"],
.form-busy input[type="submit"] {
    position: relative;
    cursor: progress;
    opacity: 0.72;
}

.form-busy button[type="submit"]::after {
    content: "";
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-start: calc(50% - 0.5rem);
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: form-busy-spin 0.6s linear infinite;
}

@keyframes form-busy-spin {
    to { transform: rotate(360deg); }
}

/* Hareket tutan biri için durdurulamayan bir dönen gösterge hiç olmamasından kötüdür;
   bu yüzden sabit bir açıda durur ve sinyali onun yerine imleç taşır. */
@media (prefers-reduced-motion: reduce) {
    .form-busy button[type="submit"]::after { animation: none; }
}

/* ---------------------------------------------------------------------------
   Kural düzenleyicisi

   Kural bir ağaçtır ve ağacın gösterilme biçimi girintidir. Her grubun solundan aşağı bir
   ray iner; böylece göz, hangi koşulların birbirine ait olduğunu girinti piksellerini
   saymadan izleyebilir.
   --------------------------------------------------------------------------- */

.rule-builder {
    container-type: inline-size;
}

.rule-group {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

/* Kök, sayfanın kendi kartının içinde durur; dolayısıyla kenarlığı rayın kıl payı yanına
   düşüyor ve ikisi tek bir kalın çift çizgi gibi okunuyordu — en kötüsü girintinin en dar
   olduğu telefon genişliğinde. Çevredeki kart onu zaten çerçeveliyor. */
.rule-group-root {
    border: none;
    border-radius: 0;
    background: transparent;
}

.rule-group-root > .rule-group-header {
    padding-inline: 0;
}

.rule-group-root > .rule-group-children {
    padding-inline-end: 0;
}

/* İç içe gruplar renk verilmiş bir zemin üzerinde durur; böylece derinlik, bir şeyin ne
   kadar sağdan başladığından çıkarılmak yerine bir bakışta okunur. */
.rule-group:not(.rule-group-root) {
    background: var(--mud-palette-background-grey);
}

.rule-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.rule-mode-select { max-width: 15rem; }

.rule-group-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rule-group-empty {
    margin: 0;
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.rule-group-children {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

/* Ray. Satırlar tam genişliklerini korusun diye dolgunun içinde durur. */
.rule-group-children::before {
    content: "";
    position: absolute;
    inset-block: 0.75rem;
    inset-inline-start: 0.75rem;
    width: 1px;
    background: var(--mud-palette-divider);
}

.rule-group-child { position: relative; }

/* Kardeşler arasındaki ve / veya; kendine bir satır almak yerine rayın kenar boşluğuna
   asılır — bağlaç başına tam bir satır, her kuralın yüksekliğini ikiye katlar. */
.rule-joiner {
    position: absolute;
    /* Raya göre boyutlandırılmak yerine raya ortalanır: "ve" raydan geniştir, dolayısıyla
       sabit bir genişlik, sözcüğü etiketlediği çizginin bir yanına sarkıtıyordu. */
    inset-inline-start: -0.75rem;
    inset-block-start: -0.875rem;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    padding: 0.0625rem 0.25rem;
    line-height: 1;
}

/* Sağdan sola yazım inset'i çevirir ama translate'i çevirmez; bu da sözcüğü rayın öbür
   yönünde dışarı iterdi. */
[dir="rtl"] .rule-joiner { transform: translateX(50%); }

.rule-group:not(.rule-group-root) .rule-joiner {
    background: var(--mud-palette-background-grey);
}

/* Kök artık saydam; dolayısıyla sözcüğün, arkasındaki rayı maskelemek için eskiden
   üzerinde durduğu yüzey rengine değil sayfanın kendi zeminine ihtiyacı var. */
.rule-group-root > .rule-group-children > .rule-group-child > .rule-joiner {
    background: var(--mud-palette-background-grey);
}

.rule-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.rule-row-fields,
.rule-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rule-row-fields { flex: 1 1 22rem; min-width: 0; }

.rule-field-select { flex: 1 1 10rem; min-width: 8rem; }
.rule-operator-select { flex: 1 1 9rem; min-width: 8rem; }
.rule-value-slot { flex: 2 1 12rem; min-width: 8rem; }
.rule-aggregate-select { width: 8.5rem; }

/* Üç denetimin yan yana sığmayı bıraktığı noktanın altında her biri tam genişliği alır.
   Telefon genişliğinde bir satırı paylaşan üç seçim kutusunun hiçbiri, tuttuğu değeri
   gösterecek kadar geniş kalmaz. */
@container (max-width: 44rem) {
    .rule-row-fields,
    .rule-row-actions { width: 100%; }

    .rule-field-select,
    .rule-operator-select,
    .rule-value-slot,
    .rule-aggregate-select {
        flex: 1 1 100%;
        width: auto;
        min-width: 0;
    }
}

/* Yapıyı taşıyan şey girintidir; dolayısıyla telefonda büsbütün vazgeçilemez — ama
   denetimlere yer açmak için sıkılaştırılabilir. */
@container (max-width: 30rem) {
    .rule-group-children { padding-inline-start: 0.875rem; }
    .rule-group-children::before { inset-inline-start: 0.375rem; }
    .rule-joiner { inset-inline-start: -0.875rem; width: 0.875rem; }
}

/* ---------------------------------------------------------------------------
   Skor histogramı (bkz. Pages/Analytics/ScoreHistogram.razor)
   --------------------------------------------------------------------------- */

.score-histogram { width: 100%; }

.score-histogram-plot {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 180px;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.score-bar {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 1px 1px 0 0;
    /* Yalnızca renk canlanır. Yüksekliği de canlandırmak, yalnızca bantlama değişmişken
       her eşik dokunuşunu veri değişmiş gibi gösteriyordu. */
    transition: background-color 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .score-bar { transition: none; }
}

.score-histogram-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    padding-top: 0.25rem;
}

.score-histogram-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.score-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-variant-numeric: tabular-nums;
}

.score-legend-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Bağlantı çizgesi (bkz. Pages/LinkAnalysis/Index.razor)
   --------------------------------------------------------------------------- */

.link-graph-canvas {
    /* Yakınlaştırma denetimleri buna göre konumlanır. */
    position: relative;
    width: 100%;
    height: 520px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}

.link-graph-svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    /* Sürükleme, altındaki sayfayı kaydırmak yerine çizgeye ulaşmak zorundadır. */
    touch-action: none;
    user-select: none;
}

.link-graph-svg.is-panning { cursor: grabbing; }

.link-graph-canvas:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Genişlikler yakınlaştırma boyunca çizildikleri kalınlıkta tutulur: onları da ölçeklemek,
   yakınlaştırılmış bir çizgeyi kendi kenarlarının resmine çevirirdi. */
.link-graph-edge {
    stroke: var(--mud-palette-divider);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.link-graph-node { cursor: pointer; }
.link-graph-node:focus-visible { outline: none; }
.link-graph-node:focus-visible circle,
.link-graph-node:focus-visible polygon {
    stroke: var(--mud-palette-primary);
    stroke-width: 3;
}

.link-graph-entity {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* Analistin açtığı kayıt yalnızca daha büyük değil, dolgulu çizilir — yoğun bir çizgede tek
   başına bir boyut farkını kaçırmak kolaydır. */
.link-graph-entity.is-root {
    fill: #5B5BD6;
    stroke: #4646B8;
    stroke-width: 2;
}

.link-graph-identifier {
    fill: #F8BA03;
    stroke: var(--mud-palette-surface);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* Tanımlayıcı türleri baklava biçiminin yanı sıra renk tonuyla da ayrılabilir, çünkü bir
   bağlantının gücü türüne bağlıdır — paylaşılan bir cihaz, paylaşılan bir IP değildir. */
.link-graph-identifier.kind-Device { fill: #D2371E; }
.link-graph-identifier.kind-Card { fill: #FF6600; }
.link-graph-identifier.kind-Email { fill: #14AA5F; }
.link-graph-identifier.kind-Phone { fill: #0E9AA7; }
.link-graph-identifier.kind-IpAddress { fill: #8B8BF0; }
.link-graph-identifier.kind-BankAccount { fill: #B45FBF; }
.link-graph-identifier.kind-Wallet { fill: #7C3AED; }   /* mor — kripto hattı */
/* Başlangıçtaki gök mavisi #0EA5E9 değil, mavi: o renk Phone'un turkuazından yalnızca 13,5
   derece uzaktaydı ve her tanımlayıcı aynı 10px'lik baklava olarak çizilir, dolayısıyla onları
   ayıran tek şey renktir — bir para katırı halkasının döndüğü ayrımın ta kendisi. */
.link-graph-identifier.kind-Iban   { fill: #2563EB; }   /* mavi — banka hattı */

.link-graph-label {
    font-size: 10px;
    text-anchor: middle;
    fill: var(--mud-palette-text-secondary);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Tekerleğin yanı sıra tuvalde de sunulur, çünkü kaydırma tekerleği önceden orada olduğunu
   sezmeniz gereken bir harekettir; bir çift düğme değildir. */
.link-graph-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.link-graph-zoom {
    min-width: 1.875rem;
    height: 1.75rem;
    padding: 0 0.375rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

.link-graph-zoom + .link-graph-zoom { border-left: 1px solid var(--mud-palette-divider); }
.link-graph-zoom:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.link-graph-zoom:disabled { opacity: 0.4; cursor: default; }

.link-graph-zoom.is-readout {
    min-width: 3.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.link-graph-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.link-graph-hint { margin-left: auto; }

.link-legend-circle,
.link-legend-diamond {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    display: inline-block;
    border: 1.5px solid var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border-radius: 50%;
}

.link-legend-circle.is-root { background: #5B5BD6; border-color: #4646B8; }

.link-legend-diamond {
    border-radius: 2px;
    transform: rotate(45deg);
    background: #F8BA03;
    border-color: var(--mud-palette-surface);
}

/* Sürüklenen bir düğüm işaretçiyi izler; dolayısıyla el onun etrafında kapanır. */
.link-graph-node.is-dragging { cursor: grabbing; }

/* Bağlam menüsüyle gizlendi. opacity değil display: bir hayalet yine tıklamaları yakalar ve
   yine göz için sayılırdı. */
.link-graph-node.is-hidden,
.link-graph-edge.is-hidden { display: none; }

/* Seçim, cevabın parçası olanı süslemek yerine olmayan her şeyi soldurur — yoğun bir çizgede
   eklenen vurgu kaybolur, kaldırılan kalabalık kaybolmaz. */
.has-selection .link-graph-edge:not(.is-highlighted) { opacity: 0.25; }
.has-selection .link-graph-node:not(.is-selected):not(.is-neighbor) { opacity: 0.35; }

.link-graph-edge.is-highlighted {
    stroke: var(--mud-palette-primary);
    stroke-width: 2.25;
}

/* Tuval çerçevesinin içine konumlanan sağ tık menüsü. Yakınlaştırma denetimleri gibi
   biçimlendirilmiştir: kenarlıklı, gölgesiz, yüzey renginde. */
.link-graph-menu {
    position: absolute;
    z-index: 3;
    min-width: 11rem;
    padding: 0.25rem 0;
    display: none;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.link-graph-menu.is-open { display: block; }

.link-graph-menu button {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.link-graph-menu button:hover,
.link-graph-menu button:focus-visible { background: var(--mud-palette-action-default-hover); }

/* "Gizle"den geri dönüş yolu: yalnızca bir şey gizliyken, yakınlaştırma denetimlerinin boş
   bıraktığı köşede belirir. */
.link-graph-hidden-badge {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    display: none;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 1rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.link-graph-hidden-badge.is-visible { display: inline-flex; }

.link-graph-hidden-badge:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

/* Tuvalin üstündeki sade dilli açıklama. */
.link-graph-help ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.link-graph-help li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.link-graph-help li > .mud-icon-root,
.link-graph-help li > .link-legend-circle,
.link-graph-help li > .link-legend-diamond {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

@media (max-width: 599.98px) {
    .link-graph-canvas { height: 360px; }
}

/* ---------------------------------------------------------------------------
   Yanıt süresi grafiği (bkz. Pages/Analytics/ResponseTimeChart.razor)
   --------------------------------------------------------------------------- */

.response-time-chart { width: 100%; }

.response-time-chart svg {
    width: 100%;
    height: 120px;
    /* viewBox kapsayıcıya göre esnetilir; dolayısıyla onunla birlikte ölçeklenen bir çizgi,
       geniş ekranda dar ekrandakinden kalın çıkardı. */
    vector-effect: non-scaling-stroke;
}

.response-time-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Birinin hesabını verdiği çizgi p99'dur; dolayısıyla ilk okunan da odur. */
.response-time-line-p99 { stroke: var(--mud-palette-warning); }

/* Ortanca, daha sessiz: p99'un ne tür bir yavaşlık olduğunu söylemek için oradadır. */
.response-time-line-p50 {
    stroke: var(--mud-palette-primary);
    opacity: 0.55;
}

.response-time-chart-axis {
    display: flex;
    justify-content: space-between;
    padding-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.response-time-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Dil anahtarı ────────────────────────────────────────────────────────────
   Oturum açma kartının içinde değil altında: formun parçası değildir ve kartın içindeyken
   birinin doldurması gereken bir alan gibi okunuyordu. */
.auth-language {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.language-inline {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.language-inline-option {
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.4;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.language-inline-option:hover {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

.language-inline-option.is-current {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* İşaretsiz girdileri işaretli olanla hizada tutar; böylece işaret aralarında gezerken liste
   yana zıplamaz. */
.language-picker-gap {
    display: inline-block;
    width: 1.25rem;
    margin-right: .5rem;
}