/* * US Yazilim panel — derlemesiz marka cilasi. Filament'in kendi CSS'i uzerine * ince rotuslar (render hook ile 'e enjekte edilir; npm/vite YOK). * Marka rengi tek yerden: --us-brand. */ :root { --us-brand: #0400ad; /* logo.svg ile ayni */ --us-brand-600: #030085; --us-brand-050: #eceafb; } /* Giris ekrani: sade gri yerine markali degrade zemin + kart golgesi */ .fi-simple-layout { background: radial-gradient(1200px 600px at 50% -10%, var(--us-brand-050), transparent 60%), linear-gradient(180deg, #f8fafc 0%, #eef1f6 100%); } .dark .fi-simple-layout { background: radial-gradient(1200px 600px at 50% -10%, rgba(4, 0, 173, 0.22), transparent 60%), linear-gradient(180deg, #0b1220 0%, #0f172a 100%); } .fi-simple-main { box-shadow: 0 20px 45px -20px rgba(2, 6, 23, 0.35); border-radius: 1rem; } /* Ust bar: ince alt cizgi + hafif cam efekti */ .fi-topbar > nav { backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid rgba(148, 163, 184, 0.18); } /* Kenar cubugu marka vurgusu: aktif oge sol seridi */ .fi-sidebar-item-active .fi-sidebar-item-button { position: relative; } .fi-sidebar-item-active .fi-sidebar-item-button::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 60%; width: 3px; border-radius: 0 3px 3px 0; background: var(--us-brand); } /* Kenar cubugu zemini BEYAZ (kullanici tercihi). Filament varsayilani hafif gri; icerik alaniyla arasindaki sinir cizgiyle veriliyor. Karanlik modda beyaz zemin okunaksiz olurdu - orasi Filament'e birakildi. */ :root:not([data-theme='dark']):not(.dark) .fi-sidebar, :root:not([data-theme='dark']):not(.dark) .fi-sidebar-nav { background-color: #ffffff; } :root:not([data-theme='dark']):not(.dark) .fi-sidebar { border-right: 1px solid rgba(148, 163, 184, 0.18); } /* KARANLIK MODDA OKUNURLUK: menu ogeleri normal kalinliga cekilince (yukaridaki yogunluk ayari) koyu zeminde silik kaldi — Filament'in pasif oge rengi zaten sonuk gri. Kontrast elle yukseltiliyor; aktif oge marka rengiyle ayrisiyor. */ .dark .fi-sidebar-item-label, :root[data-theme='dark'] .fi-sidebar-item-label { color: rgb(203 213 225); /* slate-300 */ } .dark .fi-sidebar-item-button:hover .fi-sidebar-item-label, :root[data-theme='dark'] .fi-sidebar-item-button:hover .fi-sidebar-item-label { color: #ffffff; } .dark .fi-sidebar-item-active .fi-sidebar-item-label, :root[data-theme='dark'] .fi-sidebar-item-active .fi-sidebar-item-label { color: #ffffff; } .dark .fi-sidebar-item-icon, :root[data-theme='dark'] .fi-sidebar-item-icon { color: rgb(148 163 184); /* slate-400 */ } .dark .fi-sidebar-group-label, :root[data-theme='dark'] .fi-sidebar-group-label { color: rgb(148 163 184); opacity: 1; } /* Grup basliklari ANA ELEMANLAR: akordiyon kapali gelince menude once bunlar gorunuyor, yani gezinmenin ana ekseni bunlar. Kalin ve daha okunakli; opaklik da artirildi (0.7 iken silik duruyordu). */ .fi-sidebar-group-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; opacity: 0.9; } /* --------------------------------------------------------------- KENAR CUBUGU YOGUNLUGU Varsayilan Filament menusu bu kadar bolumde fazla yer kapliyordu: ogeler KALIN, aralar genis, yazi buyuk — 20+ ekranin yarisi goruntu disinda kaliyor ve surekli kaydirmak gerekiyordu. Amac: ayni listeyi tek ekrana sigdirmak. --------------------------------------------------------------- */ /* Yazi tipi bir tik kucuk, kalinlik NORMALE cekildi. Filament etiketi font-medium ile basiyor; menude her sey kalin olunca aktif oge ayirt edilemiyordu — vurgu artik yalnizca aktif ogede. */ .fi-sidebar-item-label { font-size: 0.8125rem; /* 13px */ font-weight: 400; } .fi-sidebar-item-active .fi-sidebar-item-label { font-weight: 600; } /* Satir yuksekligi ve aralar: SIKI. Filament varsayilani bu ekran sayisinda fazla dagiktu; ogeler arasi bosluk neredeyse sifira, satir ici dolgu minimuma cekildi. */ .fi-sidebar-item-button { padding-top: 0.2rem; padding-bottom: 0.2rem; gap: 0.5rem; } .fi-sidebar-nav .fi-sidebar-group + .fi-sidebar-group { margin-top: 0.1rem; } .fi-sidebar-group-items { gap: 0; } /* Grup basligi ile ilk oge arasi da kirpildi. */ .fi-sidebar-group-label { margin-bottom: 0.05rem; } /* GRUPLAR ARASI ASIL BOSLUK BURADAN GELIYOR. Filament her ikisine de Tailwind'in "gap-y-7"sini veriyor = 1.75rem satir araligi (vendor/.../sidebar/index.blade.php). Margin kirpmak tek basina ise yaramiyordu; ezilmesi gereken row-gap. Ayrica nav'da "py-8" (2rem) dikey dolgu var, o da kirpiliyor. */ .fi-sidebar-nav, .fi-sidebar-nav-groups { row-gap: 0.15rem; } .fi-sidebar-nav { padding-top: 0.5rem; /* Alt dolgu USTTEN GENIS: menu bitimi ekranin dibine yapismasin (kullanici istegi) — ust kirpma karari korunuyor. */ padding-bottom: 2.5rem; } /* Icerik de en dipte bitmesin: tablo/sayfalama ekranin dibine yapisiyordu — sayfa geneli alt bosluk. */ .fi-main { padding-bottom: 2.5rem; } /* Grup basligi dugmesinin kendi dikey dolgusu (kapali akordiyonlarda ust uste gelince toplami buyuyor). */ .fi-sidebar-group-button, .fi-sidebar-group > .fi-sidebar-group-label { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Ikonlar da metinle orantili kucultuldu. */ .fi-sidebar-item-icon { width: 1.1rem; height: 1.1rem; } /* Rozetler (11, 6, 194...) satiri sismesin. */ .fi-sidebar-item .fi-badge { font-size: 0.6875rem; padding-inline: 0.4rem; } /* --------------------------------------------------------------- INCE KAYDIRMA CUBUGU Varsayilan isletim sistemi cubugu menude kalin bir seritti ve icerigin bir kismini orterek "kaba" duruyordu. Firefox icin scrollbar-width, Chromium/WebKit icin ::-webkit-scrollbar; ikisi ayri standart oldugu icin ikisi de yazilmali. Cubuk yalnizca UZERINE GELINCE belirginlesir — surekli koyu bir serit menuyu bolmesin. --------------------------------------------------------------- */ .fi-sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.45) transparent; } .fi-sidebar-nav::-webkit-scrollbar { width: 6px; } .fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; } .fi-sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.35); border-radius: 999px; } .fi-sidebar-nav:hover::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.6); } /* Karanlik modda ayni cubuk zeminde kayboluyordu. .dark ve [data-theme='dark'] BIRLIKTE: Filament koyu modu Tailwind 'class' stratejisiyle isaretliyor, sistem tercihiyle eslesmeyebilir (bkz. yukaridaki sabit sutun notu — ayni tuzak). */ .dark .fi-sidebar-nav, :root[data-theme='dark'] .fi-sidebar-nav { scrollbar-color: rgba(148, 163, 184, 0.3) transparent; } .dark .fi-sidebar-nav::-webkit-scrollbar-thumb, :root[data-theme='dark'] .fi-sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.22); } .dark .fi-sidebar-nav:hover::-webkit-scrollbar-thumb, :root[data-theme='dark'] .fi-sidebar-nav:hover::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.45); } /* Istatistik kartlari: hafif hover kalkmasi */ .fi-wi-stats-overview-stat { transition: transform 0.15s ease, box-shadow 0.15s ease; } .fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(2, 6, 23, 0.35); } /* Sayfa basligini biraz daha guclu */ .fi-header-heading { letter-spacing: -0.01em; } /* ------------------------------------------------------------------ TABLOLAR: ilk sutun ve islem sutunu SABIT, ortasi yatay kayar. Tum panele uygulanir (2026-07-19). Genis tablolarda (Siteler, Hizmet Kalemleri) satirin kimin oldugunu ve butonlarini gormek icin sagi sola surmek gerekiyordu. Not: secim kutucugu (toplu islem) sabitlenmedi. Sabitlenseydi ilk veri sutununun sol payini piksel piksel tahmin etmek gerekirdi; yanlis tahmin 11 tabloda bindirme yapardi. Kutucuk ilk sutunun altina kayiyor. ------------------------------------------------------------------ */ /* Sabit hucreler satir arka planini TASIMALI; seffaf kalirsa altlarindan kayan icerik gorunur. Filament satir zeminini 'de tutuyor, 'de degil - o yuzden burada yeniden veriliyor. */ :root { --us-cell-bg: #ffffff; --us-cell-bg-hover: rgb(249 250 251); /* gray-50 */ --us-cell-bg-striped: rgb(249 250 251); } @media (prefers-color-scheme: dark) { :root { --us-cell-bg: rgb(17 24 39); /* gray-900 */ --us-cell-bg-hover: rgb(31 41 55); --us-cell-bg-striped: rgb(31 41 55); } } /* Filament koyu modu Tailwind 'class' stratejisi ile isaretliyor: . Bizim degiskenler yalnizca [data-theme] ve prefers-color-scheme'e bakiyordu; sistem acik modda + panelde koyu tema secilince ikisi de eslesmiyor ve sabit sutunlar BEYAZ kaliyordu. .dark (Filament'in ekledigi class) hepsini kapsar. */ :root[data-theme='dark'], .dark { --us-cell-bg: rgb(17 24 39); --us-cell-bg-hover: rgb(31 41 55); --us-cell-bg-striped: rgb(31 41 55); } :root[data-theme='light'] { --us-cell-bg: #ffffff; --us-cell-bg-hover: rgb(249 250 251); --us-cell-bg-striped: rgb(249 250 251); } /* Ilk veri sutunu (kutucuk varsa onun hemen sagindaki) */ .fi-ta-table > thead > tr > th:first-child, .fi-ta-table > tbody > tr > td:first-child:not(.fi-ta-selection-cell), .fi-ta-table > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell { position: sticky; left: 0; z-index: 2; background: var(--us-cell-bg); } /* Islem (aksiyon) sutunu */ .fi-ta-table > thead > tr > .fi-ta-actions-header-cell, .fi-ta-table > tbody > tr > .fi-ta-actions-cell { position: sticky; right: 0; z-index: 2; background: var(--us-cell-bg); } /* Baslik satiri hem yatay hem dikey sabit kaldigi icin daha ustte durmali */ .fi-ta-table > thead > tr > th:first-child, .fi-ta-table > thead > tr > .fi-ta-actions-header-cell { z-index: 3; } /* Hover ve zebra: sabit hucre satirin rengini takip etsin, yoksa uzerine gelince satir renk degistirir ama iki uc beyaz kalir. */ /* HOVER TUM SATIRA: yalniz sabit uclara verildiginde ORTA hucreler Filament'in kendi (koyu modda yari saydam, cok sonuk) hover'inda kaliyordu — uzerine gelince sadece sol/sag blok renk degistiriyor gibi gorunuyordu (canli sikayet). Ayni OPAK renk tum hucrelere: satir tek parca. */ .fi-ta-row:hover > .fi-ta-cell, .fi-ta-row:hover > td:first-child:not(.fi-ta-selection-cell), .fi-ta-row:hover > .fi-ta-selection-cell + .fi-ta-cell, .fi-ta-row:hover > .fi-ta-actions-cell { background: var(--us-cell-bg-hover); } .fi-ta-row.bg-gray-50 > td:first-child:not(.fi-ta-selection-cell), .fi-ta-row.bg-gray-50 > .fi-ta-selection-cell + .fi-ta-cell, .fi-ta-row.bg-gray-50 > .fi-ta-actions-cell { background: var(--us-cell-bg-striped); } /* Kaydirma sinirini belli eden ince golge — sabit sutun "yapisiyor" hissi vermesin, altindan icerik gectigi anlasilsin. */ .fi-ta-table > tbody > tr > td:first-child:not(.fi-ta-selection-cell), .fi-ta-table > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell, .fi-ta-table > thead > tr > th:first-child { box-shadow: 1px 0 0 0 rgba(15, 23, 42, 0.06); } .fi-ta-table > tbody > tr > .fi-ta-actions-cell, .fi-ta-table > thead > tr > .fi-ta-actions-header-cell { box-shadow: -1px 0 0 0 rgba(15, 23, 42, 0.06); } /* ------------------------------------------------------------------ ALAN ADI SUTUNU (Kurumsal Mail) — dar ve sabit Sutun SABIT (ilk kolon), yani ne kadar yer kaplarsa geri kalan her sey o kadar daralir. Altina musteri adi da girdigi icin icerige birakilsa yine sisecekti: uzun unvan alan adindan genis. Musteri adi sigmazsa iki satirda kirpilir. ------------------------------------------------------------------ */ .fi-ta-table th.us-col-domain, .fi-ta-table td.us-col-domain { width: 15rem; min-width: 15rem; max-width: 15rem; } .fi-ta-table td.us-col-domain .fi-ta-col-wrp { width: 15rem; max-width: 15rem; } /* Aciklama satiri = musteri adi (Filament bunu duz

olarak basiyor, ayirt edici sinifi yok). */ .fi-ta-table td.us-col-domain p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } /* ------------------------------------------------------------------ MUSTERI SUTUNU SABIT GENISLIK Siralama yapinca ekrandaki musteri adlari degisiyor, kolon da iceriye gore yeniden olculuyordu: "Us Yazilim" siralamasindan "Mustafa Altunbas Insaat Turz. Gida Pet. ... Ltd. Sti."ye gecince kolon iki katina cikip sagindaki her sey kayiyordu. Tablo yatay kaydigi icin (auto layout, buyuyecek yer var) tarayici uzun adi sarmak yerine kolonu genisletmeyi tercih ediyor. Cozum kolonu icerikten BAGIMSIZ olcmek. Genislik tek yerde: sekiz ekranda ayni musteri kolonu var (hizmet kalemi, mail, tahsilat, fatura, reklam, domain, yenileme takvimi, dashboard) ve hepsi ayni sinifi aliyor -- kolon basina style yazmak sekiz yerde ayri ayri bozulurdu. Ad sigmazsa IKI SATIRA sarilip kirpilir; tam ad tooltip'te durur (kolonlarda ->tooltip ile). Tek satir + ellipsis denenebilirdi ama ticari unvanlarin ayirt edici kismi cogu zaman ikinci satirda ("... Otomotiv" / "... Insaat"). `us-col-free` sinifi bu kuraldan MUAF tutar: Reklamlar ekraninda ayni kolon uc satirlik ozel HTML tasiyor (firma/yetkili/site) ve 18rem; genel kural oraya uygulansa ucuncu satir kirpilirdi. ------------------------------------------------------------------ */ .fi-ta-table th.fi-table-header-cell-customer\.name:not(.us-col-free), .fi-ta-table td.fi-table-cell-customer\.name:not(.us-col-free) { width: 16rem; min-width: 16rem; max-width: 16rem; } /* ASIL SINIRI KOYAN KURAL BU. `max-width` bir 'de auto tablo yerlesiminde TAVSIYE bile sayilmaz (tarayici kolon genisligini icerige gore hesaplar ve hucrenin max-width'ini yok sayar) — yukaridaki blok tek basina birakilsaydi kolon yine sisecekti. Icerideki blok sarmalayici (.fi-ta-col-wrp) normal bir kutu oldugu icin sinir orada tutar; kolon da icerigi kadar, yani 16rem kalir. */ .fi-ta-table td.fi-table-cell-customer\.name:not(.us-col-free) .fi-ta-col-wrp { width: 16rem; max-width: 16rem; } /* Filament icerigi max-w-max ve inline-flex sarmalayicilara koyuyor; ikisi de "icerik kadar genis" demek. Kirpma calissin diye kucultmeye izin verilmeli. */ .fi-ta-table td.fi-table-cell-customer\.name:not(.us-col-free) .fi-ta-text, .fi-ta-table td.fi-table-cell-customer\.name:not(.us-col-free) .max-w-max, .fi-ta-table td.fi-table-cell-customer\.name:not(.us-col-free) .fi-ta-text-item { min-width: 0; max-width: 100%; } .fi-ta-table td.fi-table-cell-customer\.name:not(.us-col-free) .fi-ta-text-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* Bosluksuz uzun kelime (e-posta, domain) kolonu yine tasirdi. */ overflow-wrap: anywhere; } /* ------------------------------------------------------------------ HIZMET SIMGELERI (musteri listesi) Dort ana hizmet sabit sirada. Musteride varsa kendi renginde, yoksa soluk. Sabit sira onemli: goz her satirda ayni yerde ayni simgeyi arar, "bu musteride mail var mi" bakisla cevaplanir. Renkler ServiceItem::TYPE_COLORS ile ayni aileden. ------------------------------------------------------------------ */ .us-svc-icons { display: flex; align-items: center; /* Kose rozeti hapin sag kenarindan tasiyor; dar bosluk onu komsu hapin uzerine bindirirdi. */ gap: 0.55rem; } /* SABIT GENISLIK — hizalamanin sarti. Once adet hapin ICINDE, simgenin yaninda yaziliyordu: adet gelince hap genisliyor, o satirdaki tum simgeler kayiyordu. Satirlar arasinda goz ayni yerde ayni simgeyi arayamiyordu ki bu duzenlemenin butun amaci oydu. Adet artik akisi etkilemeyen bir kose rozeti (absolute). ILK KOSE ROZETI DENEMESI GERI ALINMISTI, iki sebeple; ikisi de burada cozuldu: - "26" daireye sigmiyordu → rozet SABIT DAIRE degil; genisligi icerige gore buyur (min-width + padding) ve sag kenara sabitlendigi icin buyume SOLA dogru olur, yani tasma miktari degismez. (Gercek veride en yuksek adet 59.) - Zemin `currentColor` iken metin beyaz veriliyordu; currentColor ayni elemanin `color`'ini okudugu icin zemin de beyaz cikiyor ve rozet gorunmez oluyordu → zemin artik acikca var(--us-svc). */ .us-svc-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 0.45rem; color: var(--us-svc); background: color-mix(in srgb, var(--us-svc) 12%, transparent); } .us-svc-icon svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.8; flex: none; } .us-svc-domain { --us-svc: rgb(2 132 199); } /* mavi */ .us-svc-web-sitesi { --us-svc: rgb(22 163 74); } /* yesil */ .us-svc-kurumsal-mail { --us-svc: rgb(217 119 6); } /* sari */ .us-svc-ads { --us-svc: rgb(220 38 38); } /* kirmizi */ /* Pasif: yok demek. Silik ama YER TUTAR — kaybolsaydi simgeler kayar, sabit sira avantaji giderdi. */ .us-svc-icon.us-svc-passive { --us-svc: rgb(203 213 225); background: transparent; } @media (prefers-color-scheme: dark) { .us-svc-icon.us-svc-passive { --us-svc: rgb(71 85 105); } } :root[data-theme='dark'] .us-svc-icon.us-svc-passive, .dark .us-svc-icon.us-svc-passive { --us-svc: rgb(71 85 105); } :root[data-theme='light'] .us-svc-icon.us-svc-passive { --us-svc: rgb(203 213 225); } /* Adet yalnizca birden fazlaysa. KOSE ROZETI: akisin disinda durur, hapin genisligini degistirmez, dolayisiyla simgeler hizada kalir. Sag kenara sabitlenir (inset-inline-end): iki haneli sayida rozet SOLA dogru buyur, saga tasma miktari sabit kalir ve komsu hapa girmez. Zemin acikca var(--us-svc) — currentColor kullanilirsa beyaz metinle birlikte zemin de beyaz olur ve rozet kaybolur (bir kez yasandi). */ .us-svc-count { position: absolute; top: -0.3rem; inset-inline-end: -0.32rem; display: inline-flex; align-items: center; justify-content: center; min-width: 0.95rem; height: 0.95rem; padding: 0 0.19rem; border-radius: 999px; background: var(--us-svc); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* ── Entegrasyonlar: kategori + kart izgarasi ────────────────────────── Once hepsi tek sayfada sekme/akordiyondu; on saglayicinin formu ayni ekranda yigildigi icin kullanissizdi. Artik giris sayfasi yalnizca kart listeler, duzenleme ayri sayfada. */ .us-int-group { margin-bottom: 2rem; } .us-int-group__title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(100 116 139); } .us-int-group__icon { width: 1.1rem; height: 1.1rem; } /* auto-fill + minmax: dar ekranda tek kolona iner, genis ekranda kartlar buyumek yerine cogalir. */ .us-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; } .us-int-card { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border: 1px solid rgb(226 232 240); border-radius: 0.75rem; background: #fff; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .us-int-card:hover { border-color: var(--us-brand, #0400ad); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .us-int-card__logo { display: flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 0.6rem; background: rgb(241 245 249); color: rgb(71 85 105); } .us-int-card__logo svg { width: 1.4rem; height: 1.4rem; } /* Logolar farkli en/boy oranlarinda geliyor; kutuya SIGDIR, kirpma. */ .us-int-card__logo img { max-width: 1.9rem; max-height: 1.9rem; object-fit: contain; } .us-int-card__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .us-int-card__name { font-weight: 600; color: rgb(15 23 42); /* Uzun saglayici adlari ("domainname.com.tr (DNA)") karti bozmasin. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .us-int-card__status { font-size: 0.75rem; font-weight: 600; } .us-int-card__status--on { color: rgb(22 163 74); } .us-int-card__status--partial { color: rgb(217 119 6); } .us-int-card__status--off { color: rgb(148 163 184); } /* Tanimsiz kart silik: dolu olanlar one ciksin. */ .us-int-card--off .us-int-card__logo { opacity: 0.55; } .us-int-note { margin-top: 0.5rem; font-size: 0.8rem; color: rgb(100 116 139); } .us-int-note a { color: var(--us-brand, #0400ad); text-decoration: underline; } @media (prefers-color-scheme: dark) { .us-int-card { background: rgb(30 41 59); border-color: rgb(51 65 85); } .us-int-card__logo { background: rgb(51 65 85); color: rgb(203 213 225); } .us-int-card__name { color: rgb(241 245 249); } } :root[data-theme='dark'] .us-int-card, .dark .us-int-card { background: rgb(30 41 59); border-color: rgb(51 65 85); } :root[data-theme='dark'] .us-int-card__logo, .dark .us-int-card__logo { background: rgb(51 65 85); color: rgb(203 213 225); } :root[data-theme='dark'] .us-int-card__name, .dark .us-int-card__name { color: rgb(241 245 249); } :root[data-theme='light'] .us-int-card { background: #fff; border-color: rgb(226 232 240); } :root[data-theme='light'] .us-int-card__name { color: rgb(15 23 42); } /* ── Tablo satirlarinda ikinci satir (aciklama/description) daha kucuk ── Yenileme/odeme kolonlarinda "6 gun gecikti", yetkili adi gibi ikincil bilgiler description olarak alt satirda. Ana degerden gorsel olarak ayrilsin diye biraz kucultuldu. */ .fi-ta-text-item-description { font-size: 0.68rem; line-height: 1.1; } /* ------------------------------------------------------------------ HAREKETLI SUNUCU IKONU LED'ler sirayla yanip soner; "makine calisiyor" hissi verir. Animasyon YALNIZCA .us-server-live sinifinda — dusen sunucuda ikon sabit kalir, yoksa calisiyormus gibi gorunurdu. ------------------------------------------------------------------ */ .us-server-live .us-led { animation: us-led-blink 1.6s ease-in-out infinite; } .us-server-live .us-led-2 { animation-delay: 0.5s; } /* HALE: LED'den disari genisleyip sonen halka. Asil dikkati ceken bu — yalnizca opaklik degisimi uzaktan fark edilmiyordu. */ .us-halo { opacity: 0; transform-origin: center; transform-box: fill-box; } .us-server-live .us-halo { animation: us-led-halo 1.6s ease-out infinite; } .us-server-live .us-halo-2 { animation-delay: 0.5s; } @keyframes us-led-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes us-led-halo { 0% { opacity: 0.55; transform: scale(1); } 70% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } } /* Hareket hassasiyeti olan kullanicida animasyon kapanir. */ @media (prefers-reduced-motion: reduce) { .us-server-live .us-led, .us-server-live .us-halo { animation: none; } }