Filament'te `.fi-topbar` satırın KENDİSİ (ayrı bir iç sarmalayıcı yok), bu
yüzden ortalama `padding-inline` ile yapılıyor: yanlarda en az 28px, ekran
1520px'ten genişse fazlalık ikiye bölünür. Sonuç tasarımla birebir.
⚠️ min-height YETMEZ — `.fi-topbar-end` 42px olduğunda çubuk 76px'e
çıkıyordu (kullanıcı "bizde biraz daha geniş duruyor" dedi). */
.fi-topbar {
height: 60px;
min-height: 60px;
padding-inline: max(28px, calc((100% - 1520px) / 2));
gap: 20px;
color: #fff;
background: #16132b;
box-shadow: none;
}
.fi-topbar-start {
min-width: max-content;
}
.fi-topbar .fi-logo {
height: 24px;
color: #fff;
}
/* ⚠️ `flex-wrap: nowrap` şart. Filament varsayılanı wrap: dokuz gezinti grubu
1280px altında ikinci satıra taşıyor ve üst çubuk 60px yerine 140px oluyordu
(tasarımda üst çubuk her genişlikte tek satır, 60px). Taşan gruplar yatay
kaydırmayla erişilir; kaydırma çubuğu koyu şeritte çirkin durduğu için gizli. */
/* ⚠️ Filament bu şeride SABİT 44px yükseklik veriyor; `align-self: stretch`
açık yüksekliğe karşı kaybediyor. Sonuç iki farklı hiza oluyordu: tek başına
duran "Panel" öğesi 44px'lik kutuya sıkışıp 8px AŞAĞIDAN başlıyor, açılır
menü grupları ise kendi 60px'lerine büyüyüp ortalanıyordu. Şerit üst çubuğun
tam yüksekliğini alınca hepsi tek çizgiye oturuyor.
Tasarımda (Admin Topbar.dc.html) nav `height:60px; align-items:center;
gap:2px`; her grup 60px'lik bir kutu, İÇİNDEKİ bağlantı ise dikeyde
ortalanmış `padding:8px 10px; border-radius:8px` bir hap. */
.fi-topbar-nav-groups {
height: 100%;
align-items: center;
flex-wrap: nowrap;
gap: 2px;
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.fi-topbar-nav-groups::-webkit-scrollbar {
display: none;
}
/* Hem tek öğeler (.fi-topbar-item) hem açılır gruplar (.fi-dropdown) aynı
60px'lik kutuyu alır — aktif alt çizgi de bu kutunun dibine oturur. */
.fi-topbar-nav-groups > * {
position: relative;
display: flex;
flex: none;
align-items: center;
align-self: stretch;
height: 100%;
}
.fi-topbar-nav-groups > .fi-dropdown > .fi-dropdown-trigger,
.fi-topbar-nav-groups > .fi-dropdown .fi-topbar-item {
display: flex;
align-items: center;
height: 100%;
}
/* Bağlantının kendisi tasarımdaki hap: 60px DEĞİL, dikeyde ortalanmış. */
.fi-topbar-item-btn {
min-height: 0;
height: auto;
padding: 8px 10px;
border-radius: 8px;
color: rgba(255, 255, 255, .68);
background: transparent;
}
.fi-topbar-item-btn:hover,
.fi-topbar-item-btn:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .08);
}
.fi-topbar-item.fi-active .fi-topbar-item-btn {
color: #fff;
background: transparent;
}
/* Aktif alt çizgi HAPTA değil 60px'lik KUTUDA: hapın dibi üst çubuğun dibi
değil, çizgi havada kalıyordu. Tasarım: left/right 10px, bottom 0, 2px. */
.fi-topbar-nav-groups > :has(.fi-topbar-item.fi-active)::after,
.fi-topbar-nav-groups > .fi-topbar-item.fi-active::after {
content: '';
position: absolute;
inset-inline: 10px;
bottom: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background: var(--muzai-accent);
}
.fi-topbar-item-label {
color: currentColor;
font-size: 13px;
font-weight: 500;
}
.fi-topbar .fi-global-search-field {
width: 128px;
}
.fi-topbar .fi-global-search-field .fi-input-wrp {
min-height: 36px;
color: rgba(255, 255, 255, .82);
background: rgba(255, 255, 255, .07);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
border-radius: 9px;
}
.fi-topbar .fi-global-search-field .fi-input {
height: 36px;
color: #fff;
font-size: 12.5px;
}
.fi-topbar .fi-global-search-field .fi-input::placeholder {
color: rgba(255, 255, 255, .46);
}
.fi-topbar .fi-global-search-field .fi-icon,
.fi-topbar .fi-icon-btn {
color: rgba(255, 255, 255, .62);
}
/* Dokuz Türkçe grup etiketi tasarımın 1520px'lik tuvalinde tam sığıyor;
dizüstü genişliklerinde (1366–1440) sığmıyor ve "Sistem" kesiliyordu.
Ölçüldü: 1366px'te 154px taşma. Kenar boşlukları, etiket puntosu ve arama
kutusu bir ton daraltılıp taşma kapatılıyor — gezinti kesilmeden görünsün. */
@media (max-width: 1500px) {
.fi-topbar {
padding-inline: 16px;
gap: 12px;
}
.fi-topbar-item-btn {
padding-inline: 7px;
}
.fi-topbar-item-label {
font-size: 12.5px;
}
.fi-topbar .fi-global-search-field {
width: 104px;
}
}
/* İlk daraltma 1366px'te 40px taşma bırakıyordu. Kalan pay gezinti
metriklerinden alınıyor — arama kutusu KULLANILABİLİR genişlikte kalsın
diye ona dokunulmuyor (ikona indirip odakla açma denendi; kutu 36px'e
kilitleniyordu, yani arama fiilen kullanılamaz hâle geliyordu). */
@media (max-width: 1440px) {
.fi-topbar-nav-groups {
gap: 0;
}
.fi-topbar-item-btn {
padding-inline: 6px;
}
}
/* Tasarımın alt sınırının (1360px) altında son bir tur: burada ad zaten
gizli, kalan payı etiket boşluğu veriyor. Filament ~1024px altında üst
gezintiyi tamamen kenar çubuğuna alıyor, yani bu bant 1024–1339 arası. */
@media (max-width: 1339px) {
.fi-topbar {
padding-inline: 12px;
gap: 8px;
}
.fi-topbar-item-btn {
padding-inline: 5px;
}
.fi-topbar-item-label {
font-size: 12px;
}
.fi-topbar .fi-global-search-field {
width: 80px;
}
}
.fi-topbar .fi-icon-btn:hover,
.fi-topbar .fi-icon-btn:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .08);
}
.fi-topbar .fi-user-avatar {
width: 34px;
height: 34px;
border: 2px solid rgba(255, 255, 255, .14);
border-radius: 50%;
}
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
color: #fff;
}
.fi-dropdown-panel {
padding: 8px;
color: var(--muzai-ink);
background: var(--muzai-surface);
border-radius: 12px;
box-shadow: var(--muzai-shadow-float);
}
.fi-dropdown-list-item {
min-height: 36px;
border-radius: 8px;
font-size: 13px;
}
.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
background: var(--muzai-surface-soft);
}
/* Main layout */
.fi-main {
width: 100%;
max-width: 1520px;
margin-inline: auto;
padding: 26px 28px 48px;
}
.fi-page-header-main-ctn {
row-gap: 18px;
padding-block: 0;
margin-bottom: 20px;
}
.fi-page-content {
row-gap: 14px;
}
.fi-header {
align-items: flex-end;
gap: 18px;
}
.fi-header-heading {
color: var(--muzai-ink);
font-size: 26px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -.02em;
}
.fi-header-subheading {
margin-top: 6px;
color: var(--muzai-muted);
font-size: 13.5px;
line-height: 1.5;
}
.fi-breadcrumbs {
margin-bottom: 6px;
}
.fi-breadcrumbs-item-label,
.fi-breadcrumbs-item-separator {
color: var(--muzai-muted);
font-size: 12.5px;
}
.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
color: var(--muzai-ink);
font-weight: 500;
}
/* Buttons and controls */
.fi-btn {
min-height: 36px;
border-radius: var(--muzai-radius-control);
font-size: 13px;
font-weight: 600;
}
/* ⚠️ Düz `.fi-btn { box-shadow: none }` PANELDEKİ TÜM İKİNCİL DÜĞMELERİ
kenarlıksız bırakıyordu. Filament ikincil düğmenin çerçevesini
`.fi-btn:not(.fi-color)` halkasıyla çiziyor; katmansız `box-shadow:none`
onu eziyor, yerine konan `.fi-btn.fi-color-gray` seçicisi ise hiçbir
sayfada eşleşmiyor (Filament o sınıfı basmıyor). Tasarımda ikincil düğme
beyaz zemin + 1px #E8E6EF kenarlık. */
.fi-btn:not(.fi-color),
.fi-btn.fi-outlined {
color: var(--muzai-ink);
background: var(--muzai-surface);
box-shadow: inset 0 0 0 1px var(--muzai-border);
}
.fi-btn:not(.fi-color):hover,
.fi-btn.fi-outlined:hover {
background: var(--muzai-surface-soft);
}
/* Renkli dolu düğmeler kenarlık taşımaz. */
.fi-btn.fi-color:not(.fi-outlined) {
box-shadow: none;
}
.fi-btn.fi-color-primary {
color: #fff;
background: var(--muzai-accent);
}
.fi-btn.fi-color-primary:hover,
.fi-btn.fi-color-primary:focus-visible {
background: var(--muzai-accent-hover);
}
/* Tasarımda tehlikeli aksiyon (Sil) DOLU KIRMIZI değil; beyaz zemin,
#FDEBEC kenarlık, #E5484D metin — hover'da soluk kırmızı zemin. */
.fi-btn.fi-outlined.fi-color-danger {
color: #e5484d;
background: var(--muzai-surface);
box-shadow: inset 0 0 0 1px #fdebec;
}
.fi-btn.fi-outlined.fi-color-danger:hover {
background: #fdebec;
}
.fi-icon-btn {
border-radius: 8px;
}
/* Cards and sections */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-wi-table,
.fi-ta-ctn {
color: var(--muzai-ink);
background: var(--muzai-surface);
border-radius: var(--muzai-radius);
box-shadow: inset 0 0 0 1px var(--muzai-border), var(--muzai-shadow);
overflow: hidden;
}
.fi-section:not(.fi-section-not-contained):not(.fi-compact) > .fi-section-header {
padding: 18px 20px 14px;
}
.fi-section:not(.fi-section-not-contained):not(.fi-compact):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
.fi-section:not(.fi-section-not-contained):not(.fi-compact).fi-divided > .fi-section-content-ctn > .fi-section-content > * {
padding: 18px 20px 20px;
}
.fi-section .fi-section-header-heading {
color: var(--muzai-ink);
font-size: 15.5px;
font-weight: 600;
}
.fi-section .fi-section-header-description {
color: var(--muzai-muted);
font-size: 12.5px;
}
/* ——— Sağlayıcı bakiyeleri kartı ——— */
.muzai-providers-card {
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
padding: 16px;
border: 1px solid var(--muzai-border);
border-radius: var(--muzai-radius);
background: var(--muzai-surface);
}
.muzai-providers-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.muzai-providers-head h3 {
margin: 0;
color: var(--muzai-ink);
font-size: 15.5px;
font-weight: 600;
}
.muzai-providers-head p {
margin: 2px 0 0;
color: var(--muzai-muted);
font-size: 12.5px;
}
.muzai-providers-refresh {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--muzai-border);
border-radius: 9px;
background: var(--muzai-surface);
color: var(--muzai-muted);
cursor: pointer;
}
.muzai-providers-refresh:hover {
background: #faf9fd;
color: var(--muzai-ink);
}
.muzai-providers-refresh .fi-icon,
.muzai-providers-refresh svg {
width: 15px;
height: 15px;
}
/* ——— Sağlayıcı mini sekmesi ———
Kart iki sağlayıcıyı alt alta gösteriyordu; kullanıcı sekmeyle tek tek
görmek istedi. Sayfa boyutu seçicisiyle aynı dil: #F4F3F8 kap, seçili
sekme beyaz ve hafif gölgeli. */
.muzai-providers-tabs {
display: inline-flex;
align-self: flex-start;
padding: 3px;
border-radius: 9px;
background: var(--muzai-canvas);
}
.muzai-providers-tabs button {
height: 28px;
padding: 0 12px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--muzai-muted);
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: background .12s, color .12s;
}
.muzai-providers-tabs button[data-active='true'] {
background: var(--muzai-surface);
color: var(--muzai-ink);
box-shadow: 0 1px 2px rgba(22, 19, 43, .1);
}
.muzai-providers-list {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.muzai-provider {
display: flex;
gap: 10px;
align-items: flex-start;
}
.muzai-provider-mark {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
overflow: hidden;
background: #fff;
border: 1px solid #e8e6ef;
}
.muzai-provider-mark img {
width: 26px;
height: 26px;
object-fit: contain;
display: block;
}
.muzai-provider-body {
flex: 1 1 auto;
min-width: 0;
}
.muzai-provider-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.muzai-provider-name strong {
display: block;
color: var(--muzai-ink);
font-size: 13.5px;
font-weight: 600;
}
.muzai-provider-name span {
color: var(--muzai-muted);
font-size: 12px;
}
.muzai-provider-amount {
flex: none;
text-align: end;
}
.muzai-provider-amount strong {
display: block;
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 15px;
font-weight: 500;
letter-spacing: -.02em;
}
.muzai-provider-amount span {
color: var(--muzai-soft);
font-size: 11px;
}
.muzai-provider-bar {
height: 6px;
margin-top: 9px;
border-radius: 999px;
background: #f1eff7;
overflow: hidden;
}
.muzai-provider-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--muzai-accent);
}
.muzai-provider[data-tone='success'] .muzai-provider-bar > span {
background: #12a17f;
}
.muzai-provider[data-tone='warning'] .muzai-provider-bar > span {
background: #f2a31b;
}
.muzai-provider[data-tone='danger'] .muzai-provider-bar > span {
background: #e0234e;
}
.muzai-provider-note {
margin: 7px 0 0;
color: var(--muzai-soft);
font-size: 11.5px;
}
.muzai-providers-foot {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: auto;
}
.muzai-providers-foot-card {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 10px;
border: 1px solid var(--muzai-border);
border-radius: 10px;
background: #faf9fd;
}
.muzai-providers-foot-icon {
display: grid;
flex: none;
width: 28px;
height: 28px;
place-items: center;
border-radius: 8px;
background: #fff4df;
color: #f2a31b;
}
.muzai-providers-foot-icon[data-tone='cost'] {
background: #fdeaf3;
color: #e8348b;
}
.muzai-providers-foot-icon svg {
width: 15px;
height: 15px;
}
.muzai-providers-foot-copy {
min-width: 0;
}
.muzai-providers-foot-copy small {
display: block;
overflow: hidden;
color: var(--muzai-muted);
font-size: 10.5px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ölçüm penceresi henüz 7 güne ulaşmadıysa kaç günlük veri olduğunu yazar. */
.muzai-providers-foot-copy em {
display: block;
overflow: hidden;
color: var(--muzai-soft);
font-size: 10px;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-providers-foot-copy strong {
display: block;
margin-top: 2px;
overflow: hidden;
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 17px;
font-weight: 700;
letter-spacing: -.02em;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ——— Kart başlığındaki "Tümü →" bağlantısı ——— */
.muzai-section-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--muzai-accent);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
}
.muzai-section-link:hover {
color: var(--muzai-accent-hover);
}
.muzai-section-link .fi-icon,
.muzai-section-link svg {
width: 13px;
height: 13px;
}
/* ——— Moderasyon kuyruğu alt şeridi ——— */
.muzai-queue-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--muzai-border);
}
.muzai-queue-foot span {
color: var(--muzai-muted);
font-size: 12px;
}
.muzai-queue-foot strong {
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 14px;
font-weight: 500;
}
/* ——— Son başarısız işler ——— */
.muzai-fail-list,
.muzai-pay-list,
.muzai-fail-item {
padding: 11px 0;
border-bottom: 1px solid var(--muzai-border);
}
.muzai-fail-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.muzai-fail-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.muzai-fail-head code {
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 12.5px;
}
.muzai-fail-when {
color: var(--muzai-soft);
font-size: 11.5px;
white-space: nowrap;
}
.muzai-fail-error {
margin: 4px 0 0;
color: #a51340;
font-size: 12px;
line-height: 1.4;
}
.muzai-fail-empty,
.muzai-pay-empty,
/* ——— Son ödemeler ——— */
.muzai-pay-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--muzai-border);
}
.muzai-pay-item:last-child {
border-bottom: 0;
}
.muzai-pay-copy {
min-width: 0;
}
.muzai-pay-copy strong {
display: block;
overflow: hidden;
color: var(--muzai-ink);
font-size: 13px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-pay-copy small {
display: block;
margin-top: 2px;
color: var(--muzai-muted);
font-size: 11.5px;
}
.muzai-pay-amount {
flex: none;
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 13.5px;
font-weight: 500;
}
.muzai-pay-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding: 10px 12px;
border: 1px solid var(--muzai-border);
border-radius: 10px;
background: #faf9fd;
}
.muzai-pay-foot span {
color: var(--muzai-muted);
font-size: 12px;
}
.muzai-pay-foot strong {
color: var(--muzai-accent);
font-size: 12.5px;
font-weight: 600;
}
/* Tables */
.fi-ta-ctn .fi-ta-header {
min-height: 60px;
padding: 12px 16px;
background: var(--muzai-surface);
border-bottom: 1px solid var(--muzai-border);
}
.fi-ta-ctn .fi-ta-header .fi-ta-header-heading {
color: var(--muzai-ink);
font-size: 15.5px;
font-weight: 600;
}
.fi-ta-ctn .fi-ta-header .fi-ta-header-description {
color: var(--muzai-muted);
font-size: 12.5px;
}
.fi-ta-ctn .fi-ta-header-toolbar,
.fi-ta-ctn .fi-ta-filters-above-content-ctn,
.fi-ta-ctn .fi-ta-filters.fi-ta-filters-below-content,
.fi-ta-ctn .fi-ta-reorder-indicator {
padding: 12px 16px;
background: var(--muzai-surface);
border-bottom: 1px solid var(--muzai-border);
}
/* Tasarımda araç çubuğu şöyle diziliyor: SOLDA arama, ortada çipler/özet,
SAĞDA Süzgeç ve Sütunlar. Filament ise arama grubunu `space-between` ile
sağa itiyordu — arama kutusu ekranın sağ ucunda, toplu aksiyonların
bulunduğu boş grup solda kalıyordu. Grubu büyüterek sıra tasarıma dönüyor. */
.fi-ta-header-toolbar > div:last-child {
flex: 1 1 auto;
min-width: 0;
justify-content: flex-start;
}
/* Arama kutusu tasarımda 300px sabit; Filament varsayılanı ~150px'e
büzülüyordu ve içindeki uzun metin (tasarımda "Kullanıcı adı veya
e-posta") okunmuyordu.
`margin-inline-end: auto` aradaki tüm boşluğu buraya toplar; böylece
Süzgeç/Sütunlar satırın sonuna gider (tasarımdaki dizilim). Özet cümlesi
varsa boşluğu o paylaşır ve sağa yaslı kalır. */
.fi-ta-search-field {
width: 300px;
max-width: 100%;
flex: none;
margin-inline-end: auto;
}
.fi-ta-search-field .fi-input-wrp {
min-height: 36px;
background: var(--muzai-surface-soft);
border-radius: 9px;
box-shadow: inset 0 0 0 1px var(--muzai-border);
}
.fi-ta-search-field .fi-input-wrp:focus-within {
box-shadow: inset 0 0 0 1px var(--muzai-accent);
}
.fi-ta-search-field .fi-input {
height: 36px;
font-size: 13px;
}
/* Araç çubuğunun sağ ucundaki özet cümlesi (tasarım: arama kutusuyla AYNI
satırda, sağa yaslı). `margin-inline-start:auto` onu Süzgeç/Sütunlar
düğmelerinden ayırıp arada boşluk bırakır. */
.muzai-toolbar-summary {
flex: 1;
min-width: 0;
padding-inline: 8px;
overflow: hidden;
color: var(--muzai-muted);
font-size: 12.5px;
text-align: end;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-toolbar-summary b {
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-weight: 600;
}
.muzai-toolbar-summary [data-tone='danger'] { color: #e5484d; }
/* Süzgeç / Sütunlar düğmeleri — tasarımda ETİKETLİ beyaz düğmeler.
Filament ikisini de 36x36 ikon düğmesi basıyordu; ne işe yaradıkları
ekrandan anlaşılmıyordu. Etiket artık AppServiceProvider'da veriliyor,
biçim burada: 36px yükseklik, 9px yarıçap, 1px kenar. */
.fi-ta-header-toolbar .fi-ta-filters-dropdown .fi-btn,
.fi-ta-header-toolbar .fi-ta-col-manager-dropdown .fi-btn {
height: 36px;
padding-inline: 12px;
gap: 7px;
border-radius: 9px;
color: var(--muzai-ink);
background: var(--muzai-surface);
box-shadow: inset 0 0 0 1px var(--muzai-border);
font-size: 13px;
font-weight: 500;
}
.fi-ta-header-toolbar .fi-ta-filters-dropdown .fi-btn:hover,
.fi-ta-header-toolbar .fi-ta-col-manager-dropdown .fi-btn:hover {
background: var(--muzai-surface-soft);
}
/* Etkin süzgeç sayısı rozeti: pembe hap, tasarımdaki 18px daire. */
.fi-ta-header-toolbar .fi-btn-badge-ctn .fi-badge {
min-height: 18px;
padding-inline: 5px;
border-radius: 99px;
background: var(--muzai-accent);
color: #fff;
font-family: 'DM Mono', monospace;
font-size: 11px;
font-weight: 700;
}
/* ⚠️ Filament rozeti KOŞULSUZ basıyor: index.blade.php `badge($activeFiltersCount)`
çağırıyor ve `filled(0)` PHP'de true, yani süzgeç yokken düğmede "0" duruyordu.
Sayı PHP'den bastırılamıyor (görünüm benim kapanışımdan SONRA yazıyor), bu
yüzden koşul CSS'te: gösterge şeridi yoksa etkin süzgeç de yoktur.
Tasarımda rozet yalnız çip varken görünüyor. */
.fi-ta-ctn:not(:has(.fi-ta-filter-indicators)) .fi-ta-filters-dropdown .fi-btn-badge-ctn {
display: none;
}
/* Aktif süzgeç çipleri — tasarımdaki pembe haplar ve "Tümünü kaldır" bağlantısı. */
.fi-ta-filter-indicators {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid var(--muzai-border);
background: var(--muzai-surface);
}
.fi-ta-filter-indicators > div {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.fi-ta-filter-indicators-label {
color: var(--muzai-muted);
font-size: 12.5px;
font-weight: 400;
}
.fi-ta-filter-indicators-badges-ctn {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Renk sınıfına eşit özgüllükte kalmasın: Filament çipe `fi-color-primary`
veriyor ve o kural bizimkiyle aynı ağırlıkta, tonu #C8146E'ye çekiyordu. */
.fi-ta-filter-indicators .fi-badge.fi-badge {
min-height: 30px;
padding-inline: 10px;
border-radius: 8px;
background: #fdeaf3;
color: #a0246a;
font-size: 12.5px;
font-weight: 500;
box-shadow: inset 0 0 0 1px #f9c6de;
}
.fi-ta-filter-indicators .fi-btn {
margin-inline-start: auto;
padding: 0 8px;
height: 30px;
background: transparent;
box-shadow: none;
color: var(--muzai-muted);
font-size: 12.5px;
font-weight: 400;
text-decoration: underline;
}
.fi-ta-table > thead > tr {
background: var(--muzai-surface-soft);
border-bottom: 1px solid var(--muzai-border);
}
.fi-ta-header-cell {
padding: 11px 12px;
color: var(--muzai-soft);
font-size: 10.5px;
line-height: 1.2;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.fi-ta-cell {
padding: 11px 12px;
color: var(--muzai-ink);
font-size: 12.5px;
border-bottom-color: var(--muzai-border);
}
.fi-ta-text:not(.fi-inline) {
padding-block: 0;
}
.fi-ta-text-item {
color: var(--muzai-ink);
font-size: 12.5px;
}
.fi-ta-text > .fi-ta-text-description,
.fi-ta-text > .fi-ta-text-list-limited-message,
.fi-ta-cell .fi-ta-placeholder {
color: var(--muzai-muted);
font-size: 11.5px;
}
.fi-ta-table > tbody > .fi-ta-row {
background: var(--muzai-surface);
transition: background-color .15s ease;
}
.fi-ta-table > tbody > .fi-ta-row:hover {
background: var(--muzai-surface-soft);
}
.fi-ta-table > tbody > .fi-ta-row.fi-selected {
background: color-mix(in srgb, var(--muzai-accent) 7%, var(--muzai-surface));
}
.fi-ta-cell [title*='Kopyala'],
.fi-ta-cell [aria-label*='Kopyala'],
.fi-ta-cell code,
.fi-ta-cell .fi-font-mono,
.fi-ta-cell .font-mono {
font-family: 'DM Mono', monospace;
}
.fi-ta-empty-state,
.fi-ta-empty-state:not(.fi-ta-ctn-with-content-layout .fi-ta-empty-state) {
padding: 56px 24px;
background: var(--muzai-surface);
}
.fi-ta-empty-state .fi-ta-empty-state-icon-bg {
color: var(--muzai-accent);
background: #fdeaf3;
}
.fi-ta-empty-state .fi-ta-empty-state-heading {
color: var(--muzai-ink);
font-size: 15px;
font-weight: 600;
}
.fi-ta-empty-state .fi-ta-empty-state-description {
color: var(--muzai-muted);
font-size: 12.5px;
}
/* Forms */
.fi-fo-field-label-content,
.fi-fo-field-label {
color: var(--muzai-ink);
font-size: 12.5px;
font-weight: 600;
}
.fi-input-wrp,
.fi-select-input,
.fi-textarea,
.fi-fo-rich-editor,
.fi-fo-tags-input,
.fi-fo-key-value {
color: var(--muzai-ink);
background: var(--muzai-surface);
border-radius: 10px;
box-shadow: inset 0 0 0 1px var(--muzai-border);
}
.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-textarea:focus {
box-shadow: inset 0 0 0 1px var(--muzai-accent), 0 0 0 3px #fdeaf3;
}
.fi-input,
.fi-select-input,
.fi-textarea {
color: var(--muzai-ink);
font-size: 13.5px;
}
.fi-input::placeholder,
.fi-textarea::placeholder {
color: var(--muzai-soft);
}
.fi-fo-field-wrp-error-message {
color: var(--muzai-danger);
font-size: 12px;
}
.fi-checkbox-input,
.fi-radio-input {
color: var(--muzai-accent);
border-color: var(--muzai-border-strong);
}
/* ——— Anahtar (toggle) ———
⚠️ Eski kural `.fi-toggle.fi-checked .fi-toggle-track` ÖLÜYDÜ: Filament
v4.11 ne `fi-checked` ne de `fi-toggle-track` basıyor; açık durum
`.fi-toggle-on` sınıfıyla geliyor. Kural hiçbir öğeyle eşleşmiyordu.
Tasarımda anahtar 32x18, topuz 14px, açıkken #12A17F kapalıyken #D9D6E3
(Sarkilar.dc.html kind:"toggle"). Filament varsayılanı 44x24. */
.fi-toggle {
width: 32px;
height: 18px;
}
.fi-toggle.fi-toggle-off {
background: #d9d6e3;
}
.fi-toggle.fi-toggle-on {
--bg: #12a17f;
background: #12a17f;
}
.fi-toggle > div {
width: 14px;
height: 14px;
/* Filament topuzu `translate: 20px` ile kaydırıyor (44px'lik ray için).
32px'lik rayda doğru mesafe 32 − 14 − 2×2 = 14px. `transform` DEĞİL
`translate` ezilmeli; ikisi birden uygulanınca topuz raydan taşıyordu. */
translate: 0;
}
.fi-toggle.fi-toggle-on > div {
translate: 14px;
}
/* ——— Liste "Kullanıcı" hücresi ———
Tasarımda ad ve e-posta TEK hücrede, solunda 28px profil fotoğrafı.
Ölçüler Kullanicilar.dc.html'den birebir. */
.muzai-user-cell {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.muzai-user-cell-avatar {
display: grid;
flex: none;
width: 28px;
height: 28px;
place-items: center;
border-radius: 50%;
object-fit: cover;
background: var(--muzai-canvas);
color: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
}
.muzai-user-cell-copy {
display: block;
min-width: 0;
line-height: 1.25;
}
.muzai-user-cell-name {
display: block;
overflow: hidden;
color: var(--muzai-ink);
font-size: 13px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-user-cell-name.is-deleted { color: var(--muzai-soft); }
.muzai-user-cell-mail {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
color: var(--muzai-muted);
font-size: 11.5px;
}
.muzai-user-cell-mail > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-user-cell-mail em {
flex: none;
padding: 0 5px;
border-radius: 4px;
background: #fff4df;
color: #8a6a2a;
font-size: 10px;
font-style: normal;
font-weight: 600;
}
/* ——— Liste "Kullanıcı" çipi (ilişkili listeler) ———
Sarkilar.dc.html kind:"user" — 24px avatar + ad, e-posta yok. */
.muzai-user-chip {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--muzai-ink);
font-size: 13px;
font-weight: 500;
}
.muzai-user-chip:hover { color: var(--muzai-accent); }
.muzai-user-chip > img,
.muzai-user-chip > i {
display: grid;
flex: none;
width: 24px;
height: 24px;
place-items: center;
border-radius: 50%;
object-fit: cover;
background: var(--muzai-canvas);
color: #fff;
font-size: 9.5px;
font-style: normal;
font-weight: 700;
}
.muzai-user-chip > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ——— Liste "Ad" hücresi (şarkı) ———
Sarkilar.dc.html kind:"name" — 34px kapak + ad + üretim istemi. */
.muzai-song-cell {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.muzai-song-cover {
position: relative;
display: grid;
flex: none;
width: 34px;
height: 34px;
place-items: center;
border-radius: 8px;
overflow: hidden;
background: var(--muzai-canvas);
}
.muzai-song-cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Oynat üçgeni — tasarımda kapağın üzerinde yarı saydam beyaz. */
.muzai-song-cover i {
position: relative;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, .78);
clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}
.muzai-song-cover[data-empty] {
background: linear-gradient(135deg, #6b5bd6, #e8348b);
}
.muzai-song-copy {
display: block;
min-width: 0;
line-height: 1.25;
}
.muzai-song-name {
display: block;
overflow: hidden;
color: var(--muzai-ink);
font-size: 13px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-song-name[data-empty] { color: var(--muzai-soft); }
.muzai-song-prompt {
display: block;
overflow: hidden;
color: var(--muzai-soft);
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sorunlu satırların zemini — tasarımda zombi #FFF7F7, başarısız #FFFBFB.
Seçici `.fi-ta-table > tbody > .fi-ta-row` kadar ağır olmak ZORUNDA:
o kural satır zeminini yüzeye sabitliyor ve daha özgül. */
.fi-ta-table > tbody > .fi-ta-row.muzai-row-zombie { background: #fff7f7; }
.fi-ta-table > tbody > .fi-ta-row.muzai-row-failed { background: #fffbfb; }
.fi-ta-table > tbody > .fi-ta-row.muzai-row-zombie:hover,
.fi-ta-table > tbody > .fi-ta-row.muzai-row-failed:hover { background: #fdf3f3; }
/* Badges */
.fi-badge {
min-height: 22px;
padding-inline: 8px;
border-radius: 6px;
font-size: 11.5px;
line-height: 1.2;
font-weight: 600;
box-shadow: none;
}
/* ——— Platform ve Premium rozetleri ———
Tasarımın platMeta/premMeta tablosuyla birebir. Filament'in genel
renk paleti (info/success/warning) bu tonları veremiyor: iOS koyu
mürekkep, Android koyu yeşil, Web koyu mavi.
⚠️ `extraAttributes()` rozetin KENDİSİNE değil, onu saran
`.fi-ta-text-item`'a yazılıyor. Seçici bu yüzden iki adımlı —
`.fi-badge[data-platform]` hiçbir zaman eşleşmez. */
[data-platform] > .fi-badge,
[data-premium] > .fi-badge {
box-shadow: none;
}
[data-platform='ios'] > .fi-badge.fi-badge { color: #16132b; background: #f4f3f8; }
[data-platform='android'] > .fi-badge.fi-badge { color: #0e7a60; background: #e3f7f0; }
[data-platform='web'] > .fi-badge.fi-badge { color: #2454c8; background: #e8f0ff; }
[data-platform='app'] > .fi-badge.fi-badge { color: #6e6a85; background: #f4f3f8; }
[data-platform='unknown'] > .fi-badge.fi-badge,
[data-platform='none'] > .fi-badge.fi-badge { color: #a5a1b8; background: #f8f7fb; }
[data-premium='active'] > .fi-badge.fi-badge { color: #a0246a; background: #fdeaf3; }
[data-premium='in_grace'] > .fi-badge.fi-badge { color: #8a6a2a; background: #fff4df; }
[data-premium='expired'] > .fi-badge.fi-badge { color: #6e6a85; background: #f4f3f8; }
[data-premium='cancelled'] > .fi-badge.fi-badge { color: #e5484d; background: #fdebec; }
[data-premium='none'] > .fi-badge.fi-badge { color: #a5a1b8; background: transparent; }
/* Rozet ikonu tasarımda 11px ve metinle 5px arayla. */
[data-platform] > .fi-badge > .fi-icon,
[data-premium] > .fi-badge > .fi-icon {
width: 11px;
height: 11px;
}
.fi-badge.fi-color-primary {
color: var(--muzai-accent-hover);
background: #fdeaf3;
}
/* Tonlar tasarımın kendi durum tablosundan (Sarkilar.dc.html `st`,
Kullanicilar.dc.html `premMeta`): tamamlandı #0E7A60/#E3F7F0,
işleniyor #2454C8/#E8F0FF, bekliyor #8A6A2A/#FFF4DF,
başarısız #E5484D/#FDEBEC. Filament'in dört anlamsal rengi panel
genelinde tutarlı kullanıldığı için paleti hizalamak TÜM ekranlardaki
rozetleri tek hamlede tasarıma getiriyor. */
.fi-badge.fi-color-success {
color: #0e7a60;
background: #e3f7f0;
}
.fi-badge.fi-color-warning {
color: #8a6a2a;
background: #fff4df;
}
.fi-badge.fi-color-danger {
color: #e5484d;
background: #fdebec;
}
.fi-badge.fi-color-info {
color: #2454c8;
background: #e8f0ff;
}
.fi-badge.fi-color-gray,
.fi-badge:not(.fi-color) {
color: #16132b;
background: #f4f3f8;
}
/* ——— Evet/hayır hücresi ———
Tasarımda bool sütunu 20x20, 6px yarıçaplı bir ÇİP: doğru
#E3F7F0/#0E7A60, yanlış #F4F3F8/#C9C6D6 (soluk gri). Filament 24px
zeminsiz bir ikon basıyor ve "hayır"ı kırmızıya boyuyordu — yalnızca
boş bir alan için ekran hata ikonlarıyla doluyordu. */
.fi-ta-cell .fi-ta-icon {
display: grid;
width: 20px;
min-width: 20px;
max-width: 20px;
height: 20px;
padding: 0;
gap: 0;
place-items: center;
border-radius: 6px;
background: var(--muzai-canvas);
}
.fi-ta-cell .fi-ta-icon .fi-icon {
width: 11px;
height: 11px;
}
.fi-ta-cell .fi-ta-icon:has(.fi-color-success) {
background: #e3f7f0;
color: #0e7a60;
}
.fi-ta-cell .fi-ta-icon:has(.fi-color-gray) {
background: #f4f3f8;
color: #c9c6d6;
}
/* ——— Kredi defteri ———
Tasarımda değişim çipi 24px / DM Mono 13px / 700 ve sebep rozetinin
zemini NÖTR: ayırt edici bilgi solundaki 6px noktanın rengi. */
.muzai-delta .fi-badge {
min-height: 24px;
padding-inline: 9px;
border-radius: 7px;
font-size: 13px;
font-weight: 700;
}
[data-reason] > .fi-badge::before {
content: '';
flex: none;
width: 6px;
height: 6px;
margin-inline-end: -1px;
border-radius: 50%;
background: currentColor;
}
/* Nokta renkleri tasarımdan: üretim pembe, abonelik hediyesi mor, iade
yeşil, promosyon amber, davet mavi, elle düzeltme mürekkep. */
[data-reason='generation'] > .fi-badge::before { background: #e8348b; }
[data-reason='subscription_grant'] > .fi-badge::before { background: #6b5bd6; }
[data-reason='refund'] > .fi-badge::before { background: #12a17f; }
[data-reason='promo'] > .fi-badge::before { background: #f2a31b; }
[data-reason='referral'] > .fi-badge::before { background: #3d7bf7; }
[data-reason='adjustment'] > .fi-badge::before { background: #16132b; }
[data-reason='purchase'] > .fi-badge::before { background: #2454c8; }
[data-reason='none'] > .fi-badge::before { display: none; }
/* İşlem hücresi: makine anahtarı mono gri, yöneticinin notu italik koyu. */
.muzai-op-key {
color: var(--muzai-muted);
font-family: 'DM Mono', monospace;
font-size: 12.5px;
}
/* ⚠️ Yalnız TABLO hücresine kapsamlı: aynı sınıf adı Şarkı Detayı'ndaki
işlem düğmelerinde de kullanılıyordu ve oradaki notlar italik çıkıyordu.
İtalik burada ANLAM taşıyor — yöneticinin elle yazdığı not. */
.fi-ta-cell .muzai-op-note {
color: var(--muzai-ink);
font-size: 12.5px;
font-style: italic;
}
/* Süresi dolmuş kredi satırı geri çekilir: o kredi artık harcanamaz. */
.fi-ta-table > tbody > .fi-ta-row.muzai-row-expired {
background: #fafafa;
}
.fi-ta-row.muzai-row-expired .fi-ta-cell {
opacity: .75;
}
/* ——— Durum rozetinin 6px noktası ———
Tasarımda her DURUM rozetinin solunda rozetle aynı renkte küçük bir nokta
var. Filament durum kolonuna `fi-ta-cell-status` sınıfını basıyor, yani
kural tek yerden bütün listelere uyuyor. */
.fi-ta-cell-status .fi-badge::before {
content: '';
flex: none;
width: 6px;
height: 6px;
margin-inline-end: -1px;
border-radius: 50%;
background: currentColor;
}
/* Infolists and tabs */
.fi-in-entry-label {
color: var(--muzai-muted);
font-size: 11.5px;
font-weight: 500;
}
.fi-in-entry-content {
color: var(--muzai-ink);
font-size: 13px;
}
.fi-in-text-item:is([class*='font-mono']),
.fi-in-entry code {
font-family: 'DM Mono', monospace;
}
.fi-tabs:not(.fi-contained) {
gap: 20px;
padding: 0;
background: transparent;
border-bottom: 1px solid var(--muzai-border);
}
.fi-tabs.fi-contained {
padding: 3px;
background: var(--muzai-surface);
border-radius: 9px;
box-shadow: inset 0 0 0 1px var(--muzai-border);
}
.fi-tabs-item {
min-height: 36px;
color: var(--muzai-muted);
border-radius: 7px;
}
.fi-tabs-item.fi-active {
color: var(--muzai-ink);
background: var(--muzai-surface);
box-shadow: inset 0 -2px 0 var(--muzai-accent);
}
/* Pagination */
.fi-pagination {
min-height: 54px;
padding: 10px 16px;
color: var(--muzai-muted);
background: var(--muzai-surface);
border-top: 1px solid var(--muzai-border);
}
.fi-pagination-item {
min-width: 30px;
min-height: 30px;
border-radius: 7px;
}
.fi-pagination-item.fi-active {
color: #fff;
background: var(--muzai-ink);
}
/* ——— Modallar ———
⚠️ SEÇİCİ DERİNLİĞİ KASITLI. Dosyanın yukarısındaki eski Tabler bloğu
(14. bölüm) aynı kutuyu `.fi-modal > .fi-modal-window-ctn > .fi-modal-window`
(0,3,0) gibi DERİN seçicilerle boyuyor. Buradaki kurallar tek sınıfla
(0,1,0) yazılmıştı ve özgüllükte kaybediyordu: paneldeki hiçbir modal
tasarımın 16px köşesini, float gölgesini ve 17px/650 başlığını almıyor,
eski 9px köşe + halka gölge + gri alt şeritle çıkıyordu. Aynı derinlikte
yazılınca (eşit özgüllük, sonra gelen kazanır) tasarım geri geliyor. */
.fi-modal > .fi-modal-close-overlay {
background: rgba(22, 19, 43, .54);
backdrop-filter: blur(2px);
}
.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
color: var(--muzai-ink);
background: var(--muzai-surface);
border-radius: 16px;
box-shadow: var(--muzai-shadow-float);
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn .fi-modal-window {
border-radius: 16px;
}
.fi-modal > .fi-modal-window-ctn > .fi-modal-window:not(.fi-align-center) .fi-modal-header,
.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-header {
padding: 20px 22px 14px;
border-bottom: 1px solid var(--muzai-border);
}
.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-heading {
color: var(--muzai-ink);
font-size: 17px;
font-weight: 650;
}
.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-description {
color: var(--muzai-muted);
font-size: 13px;
line-height: 1.55;
}
.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-content {
padding: 18px 22px;
}
/* Tasarımda alt şerit GRİ DEĞİL, kartın kendi zemininde. */
.fi-modal > .fi-modal-window-ctn > .fi-modal-window:not(.fi-align-center) .fi-modal-footer,
.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-footer {
padding: 14px 22px 20px;
border-top: 1px solid var(--muzai-border);
background-color: transparent;
}
/* Notifications */
.fi-no {
gap: 10px;
}
.fi-no-notification {
width: min(400px, calc(100vw - 32px));
color: var(--muzai-ink);
background: var(--muzai-surface);
border-radius: 12px;
box-shadow: var(--muzai-shadow-float);
}
.fi-no-notification.fi-color {
border-inline-start: 3px solid var(--color-500);
}
.fi-no-notification .fi-no-notification-title {
color: var(--muzai-ink);
font-size: 13px;
font-weight: 650;
}
.fi-no-notification .fi-no-notification-body,
.fi-no-notification .fi-no-notification-date {
color: var(--muzai-muted);
font-size: 12px;
}
/* Auth simple layout baseline; split brand panel is added by its view task. */
.fi-simple-layout {
background: var(--muzai-canvas);
}
.fi-simple-main {
width: min(400px, calc(100vw - 40px));
color: var(--muzai-ink);
background: transparent;
border-radius: 0;
box-shadow: none;
}
.fi-simple-header-heading {
color: var(--muzai-ink);
font-size: 24px;
font-weight: 700;
letter-spacing: -.02em;
}
.fi-simple-header-subheading {
color: var(--muzai-muted);
font-size: 13.5px;
}
/* Dark mode component corrections */
html.dark .fi-badge.fi-color-primary {
color: #f08fbd;
background: rgba(232, 52, 139, .16);
}
html.dark .fi-badge.fi-color-success {
color: #72cbb6;
background: rgba(18, 161, 127, .14);
}
html.dark .fi-badge.fi-color-warning {
color: #f9b74f;
background: rgba(213, 146, 25, .15);
}
html.dark .fi-badge.fi-color-danger {
color: #ec8991;
background: rgba(192, 41, 46, .17);
}
html.dark .fi-badge.fi-color-info {
color: #aaa3e4;
background: rgba(94, 85, 201, .2);
}
html.dark .fi-ta-empty-state .fi-ta-empty-state-icon-bg,
html.dark .fi-input-wrp:focus-within,
html.dark .fi-select-input:focus,
html.dark .fi-textarea:focus {
box-shadow: inset 0 0 0 1px var(--muzai-accent), 0 0 0 3px rgba(232, 52, 139, .14);
}
/* Responsive */
@media (max-width: 80rem) {
.fi-topbar {
padding-inline: 18px;
gap: 12px;
}
.fi-topbar-item-btn {
padding-inline: 7px;
}
.fi-topbar-item-label {
font-size: 12px;
}
}
@media (max-width: 64rem) {
.fi-topbar {
padding-inline: 16px;
}
.fi-main {
padding: 22px 20px 40px;
}
}
@media (max-width: 48rem) {
.fi-main {
padding: 18px 14px 32px;
}
.fi-header {
align-items: stretch;
}
.fi-header-heading {
font-size: 23px;
}
.fi-header-actions {
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 2px;
}
.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar,
.fi-ta-ctn .fi-ta-filters-above-content-ctn {
padding-inline: 12px;
}
.fi-modal-window {
border-radius: 16px 16px 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.fi-body *,
.fi-body *::before,
.fi-body *::after {
scroll-behavior: auto;
transition-duration: .01ms;
animation-duration: .01ms;
animation-iteration-count: 1;
}
}
/* Authentication: approved split composition. Native Filament form/MFA stays intact. */
.fi-simple-layout:has(.muzai-auth-brand) {
min-height: 100svh;
display: grid;
grid-template-columns: minmax(0, 1fr) 520px;
/* Filament'in kendi .fi-simple-layout kuralı align-items:center veriyor;
marka paneli o yüzden içeriği kadar yükselip ekranın altında açık bir
şerit bırakıyordu. Tasarımda koyu panel tam yükseklik. */
align-items: stretch;
background: #16132b;
}
.muzai-auth-brand {
position: relative;
min-width: 0;
padding: 40px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
color: #fff;
isolation: isolate;
}
.muzai-auth-glow {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(60% 50% at 20% 30%, rgba(174, 47, 170, .35), transparent 70%),
radial-gradient(50% 40% at 80% 80%, rgba(253, 150, 137, .25), transparent 70%);
}
.muzai-auth-wordmark {
height: 30px;
display: flex;
align-items: center;
gap: 10px;
color: #fff;
}
.muzai-auth-wordmark svg {
width: 148px;
height: auto;
}
/* ⚠️ Buraya negatif margin KOYMA. Daha önce -34px vardı ve "ADMIN" etiketi
kelime markasının "AI" harflerinin üstüne biniyordu: SVG'nin görünür içeriği
viewBox'ın sonuna kadar gidiyor, telafi edilecek boşluk yok. Aradaki mesafe
.muzai-auth-wordmark'ın `gap` değeriyle veriliyor. */
.muzai-auth-wordmark > span {
padding-top: 3px;
color: rgba(255, 255, 255, .45);
font-size: 11px;
line-height: 1;
font-weight: 650;
letter-spacing: .11em;
}
.muzai-auth-copy {
width: min(460px, 82%);
margin-bottom: 190px;
}
.muzai-auth-copy > span {
color: rgba(255, 255, 255, .45);
font-size: 11px;
font-weight: 650;
letter-spacing: .12em;
}
.muzai-auth-copy h1 {
margin: 10px 0 0;
color: #fff;
font-size: clamp(30px, 2.7vw, 38px);
line-height: 1.14;
font-weight: 700;
letter-spacing: -.025em;
}
.muzai-auth-copy p {
margin: 14px 0 0;
max-width: 430px;
color: rgba(255, 255, 255, .58);
font-size: 14px;
line-height: 1.6;
}
.muzai-auth-brand > small {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, .35);
font-family: 'DM Mono', monospace;
font-size: 11px;
}
.muzai-auth-bars {
position: absolute;
inset-inline: 48px;
bottom: 0;
height: 250px;
z-index: -1;
display: flex;
align-items: flex-end;
gap: 5px;
opacity: .9;
}
.muzai-auth-bars span {
flex: 1 1 0;
height: var(--bar-height);
max-height: 88%;
border-radius: 3px 3px 0 0;
/* Tasarımdaki dalga formu mordan pembeye çıkıyor. */
background: linear-gradient(to top, rgba(107, 91, 214, .22), rgba(232, 52, 139, .82));
}
/* Alt bilgi dalga formunun ÜSTÜNE düşüyor ve parlak çubuklarda okunmuyordu.
Panelin dibine karartma bindirmesi koyup yazıyı onun üstüne alıyoruz. */
.muzai-auth-brand::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: 0;
height: 110px;
background: linear-gradient(to top, rgba(14, 9, 30, .94), rgba(14, 9, 30, 0));
pointer-events: none;
z-index: 0;
}
.muzai-auth-brand > small {
position: relative;
z-index: 2;
color: rgba(255, 255, 255, .58);
}
.fi-simple-layout:has(.muzai-auth-brand) > .fi-simple-main-ctn {
min-width: 0;
min-height: 100svh;
padding: 40px;
display: grid;
place-items: center;
background: var(--muzai-canvas);
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-main {
width: 400px;
max-width: 100%;
padding: 0;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-header {
margin-bottom: 22px;
text-align: start;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-header .fi-logo {
display: none;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-page-content {
gap: 14px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-fo-field-wrp {
gap: 6px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-input-wrp {
min-height: 44px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-input {
height: 44px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-btn {
min-height: 46px;
}
@media (max-width: 68rem) {
.fi-simple-layout:has(.muzai-auth-brand) {
grid-template-columns: minmax(0, 1fr) 460px;
}
.muzai-auth-brand {
padding-inline: 36px;
}
.muzai-auth-bars {
inset-inline: 36px;
}
}
@media (max-width: 56rem) {
.fi-simple-layout:has(.muzai-auth-brand) {
grid-template-columns: minmax(0, 1fr);
background: var(--muzai-canvas);
}
.muzai-auth-brand {
display: none;
}
.fi-simple-layout:has(.muzai-auth-brand) > .fi-simple-main-ctn {
padding: 28px 22px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-header .fi-logo {
display: block;
height: 28px;
margin-bottom: 24px;
color: var(--muzai-ink);
}
}
/* Dashboard: moderasyon kuyruğu — onaylı tasarımın satır içi stilleriyle birebir.
item: flex, gap 12px, padding 12px 14px, radius 11px, border #EEECF4,
hover yalnız #FAF9FC (translate yok). Sayı: DM Mono 20px/700, pill DEĞİL. */
.muzai-queue-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.muzai-queue-item {
min-width: 0;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
color: #16132b;
border: 1px solid #eeecf4;
border-radius: 11px;
background: var(--muzai-surface);
text-decoration: none;
}
.muzai-queue-item:hover {
border-color: #eeecf4;
background: #faf9fc;
color: #16132b;
}
.muzai-queue-icon {
width: 36px;
height: 36px;
flex: none;
display: grid;
place-items: center;
color: #e8348b;
border-radius: 10px;
background: #fdeaf3;
}
.muzai-queue-icon svg {
width: 17px;
height: 17px;
}
.muzai-queue-item[data-tone='blue'] .muzai-queue-icon {
color: #3d7bf7;
background: #e8f0ff;
}
.muzai-queue-item[data-tone='violet'] .muzai-queue-icon {
color: #6b5bd6;
background: #eeebfb;
}
.muzai-queue-item[data-tone='red'] .muzai-queue-icon {
color: #e5484d;
background: #fdebec;
}
.muzai-queue-item[data-tone='amber'] .muzai-queue-icon {
color: #f2a31b;
background: #fff4df;
}
.muzai-queue-copy {
min-width: 0;
flex: 1;
line-height: 1.25;
}
.muzai-queue-copy strong {
display: block;
overflow: hidden;
font-size: 13.5px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-queue-copy small {
display: block;
overflow: hidden;
margin-top: 1px;
color: #6e6a85;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-queue-count {
flex: none;
min-width: 24px;
color: #16132b;
font-family: 'DM Mono', monospace;
font-size: 20px;
font-weight: 700;
text-align: right;
}
.muzai-queue-count[data-tone='muted'] {
color: #a5a1b8;
}
.muzai-queue-empty {
padding: 28px 16px;
color: var(--muzai-muted);
font-size: 12px;
text-align: center;
}
.dark .muzai-queue-item[data-tone='blue'] .muzai-queue-icon,
.dark .muzai-queue-item[data-tone='violet'] .muzai-queue-icon,
.dark .muzai-queue-item[data-tone='red'] .muzai-queue-icon,
.dark .muzai-queue-item[data-tone='amber'] .muzai-queue-icon {
background: rgba(255, 255, 255, .06);
}
/* Reference-specific summaries shown before selected resource tables. */
.muzai-list-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.muzai-list-summary-card {
min-width: 0;
min-height: 78px;
padding: 13px 14px;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
grid-template-rows: 1fr auto;
column-gap: 11px;
align-items: center;
color: var(--muzai-text);
border: 1px solid var(--muzai-border);
border-radius: var(--muzai-radius);
background: var(--muzai-surface);
text-decoration: none;
transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
/* Süzgeci AÇIK olan kart: tasarımda çerçeve pembeye dönüyor ve ipucu
"süzülüyor" yazıyor (Sarkilar.dc.html 282-283). Hangi daraltmanın açık
olduğu böylece ekrandan okunuyor. */
.muzai-list-summary-card[data-active='true'] {
border-color: var(--muzai-accent);
}
.muzai-list-summary-card[data-active='true'] .muzai-list-summary-hint {
color: var(--muzai-accent-dark);
font-weight: 600;
}
a.muzai-list-summary-card:hover {
color: var(--muzai-text);
border-color: color-mix(in srgb, var(--muzai-accent) 46%, var(--muzai-border));
box-shadow: 0 8px 24px -18px rgba(22, 19, 43, .45);
transform: translateY(-1px);
}
.muzai-list-summary-icon {
grid-row: 1 / 3;
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: #6e6a85;
border-radius: 11px;
background: #f4f3f8;
}
.muzai-list-summary-icon svg {
width: 19px;
height: 19px;
}
.muzai-list-summary-copy {
min-width: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.muzai-list-summary-copy small {
overflow: hidden;
color: var(--muzai-muted);
font-size: 11px;
font-weight: 600;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-list-summary-copy strong {
flex: none;
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 20px;
font-weight: 600;
letter-spacing: -.03em;
}
.muzai-list-summary-hint {
color: var(--muzai-soft);
font-size: 10px;
line-height: 1.25;
}
.muzai-list-summary-card[data-tone='primary'] .muzai-list-summary-icon {
color: #a0246a;
background: #fdeaf3;
}
.muzai-list-summary-card[data-tone='violet'] .muzai-list-summary-icon {
color: #6b5bd6;
background: #eeebfb;
}
.muzai-list-summary-card[data-tone='success'] .muzai-list-summary-icon {
color: #0e7a60;
background: #e3f7f0;
}
.muzai-list-summary-card[data-tone='warning'] .muzai-list-summary-icon {
color: #8a6a2a;
background: #fff4df;
}
.muzai-list-summary-card[data-tone='danger'] .muzai-list-summary-icon {
color: #c0292e;
background: #fdebec;
}
.muzai-list-summary-card[data-tone='info'] .muzai-list-summary-icon {
color: #2454c8;
background: #e8f0ff;
}
@media (max-width: 64rem) {
.muzai-list-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 40rem) {
.muzai-list-summary {
display: flex;
gap: 8px;
margin-inline: -16px;
padding-inline: 16px;
overflow-x: auto;
scroll-snap-type: x proximity;
}
.muzai-list-summary-card {
flex: 0 0 218px;
scroll-snap-align: start;
}
}
.dark .muzai-list-summary-icon {
background: rgba(255, 255, 255, .06) !important;
}
/* Specialized detail and diagnostic pages. */
.muzai-detail-section > .fi-section-content-ctn > .fi-section-content {
padding-top: 16px;
}
.muzai-detail-section .fi-in-entry-wrp-label {
color: var(--muzai-soft);
font-size: 10px;
font-weight: 650;
letter-spacing: .055em;
text-transform: uppercase;
}
.muzai-detail-section .fi-in-text-item {
font-size: 13px;
}
.muzai-internal-errors {
display: grid;
gap: 18px;
}
.muzai-rule-list {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
list-style: none;
}
.muzai-rule-card {
min-width: 0;
padding: 15px 16px;
display: flex;
flex-direction: column;
gap: 9px;
border: 1px solid var(--muzai-border);
border-radius: 12px;
background: var(--muzai-surface);
}
.muzai-rule-card[data-disabled='true'] {
opacity: .58;
}
.muzai-rule-card-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.muzai-rule-card-heading strong {
margin-right: auto;
color: var(--muzai-ink);
font-size: 13px;
}
.muzai-rule-description,
.muzai-rule-settings,
.muzai-rule-warning {
margin: 0;
line-height: 1.5;
}
.muzai-rule-description {
color: var(--muzai-text);
font-size: 12px;
}
.muzai-rule-settings {
padding: 7px 9px;
color: var(--muzai-muted);
border-radius: 8px;
background: var(--muzai-canvas);
font-family: 'DM Mono', monospace;
font-size: 10px;
}
.muzai-rule-warning {
color: #c0292e;
font-size: 11px;
}
@media (max-width: 64rem) {
.muzai-rule-list {
grid-template-columns: minmax(0, 1fr);
}
}
/* Dahili Hatalar — kural şiddet etiketi (tasarımdaki TEHLİKE / UYARI) */
.muzai-rule-severity {
padding: 2px 7px;
border-radius: 999px;
background: #f1eff7;
color: var(--muzai-muted);
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.6;
}
.muzai-rule-severity[data-severity='danger'] {
background: #fdeaef;
color: #a51340;
}
.muzai-rule-severity[data-severity='warning'] {
background: #fdf1dc;
color: #8a5a06;
}
.muzai-rule-severity[data-severity='info'] {
background: #eceafa;
color: #4a41ad;
}
/* ——— Pano başlığındaki dönem seçici ———
Ölçü ve renkler onaylı tasarımın satır içi stillerinden BİREBİR:
kapsayıcı background:#fff; border:1px solid #E8E6EF; border-radius:9px; padding:3px
düğme height:30px; padding:0 12px; border:0; border-radius:6px;
font-size:12.5px; font-weight:500
aktif background:#16132B; color:#fff ← PEMBE DEĞİL, koyu mürekkep
pasif color:#6E6A85 */
.muzai-period-group {
display: flex;
align-items: center;
gap: 0;
padding: 3px;
border: 1px solid var(--muzai-border);
border-radius: var(--muzai-radius-control);
background: var(--muzai-surface);
}
.muzai-period-btn {
height: var(--muzai-control-h-sm);
padding: 0 12px;
border: 0;
border-radius: var(--muzai-radius-inner);
background: transparent;
color: var(--muzai-muted);
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: background-color .12s, color .12s;
}
.muzai-period-btn:hover:not([data-active]) {
background: var(--muzai-surface-soft);
color: var(--muzai-ink);
}
.muzai-period-btn[data-active] {
background: var(--muzai-ink);
color: #fff;
}
.muzai-period-btn:disabled {
opacity: .5;
cursor: progress;
}
/* Başlık aksiyon satırı: tasarımda dönem seçici + düğmeler 8px aralıklı. */
.fi-header-actions-ctn {
display: flex;
align-items: center;
gap: 8px;
}
/* Tasarımdaki düğme ölçüsü: 36px yükseklik, 14px yan boşluk, 9px köşe. */
.fi-header-actions-ctn .fi-btn {
height: var(--muzai-control-h);
padding-inline: 14px;
border-radius: var(--muzai-radius-control);
font-size: 13px;
font-weight: 600;
}
/* ——— Kullanıcı dağılımı (dünya haritası + sıralı liste) ———
Onaylı tasarımın satır içi stilleriyle birebir:
kart border-radius:14px; padding:20px 22px 18px; grid 1fr 220px; gap:20px
harita height:290px
sekme bg #F4F3F8; radius 8px; padding 3px; aktif beyaz + 0 1px 2px rgba(22,19,43,.08)
satır rank DM Mono 11px w16 · ad 13px · çubuk 56x5 radius 99 · sayı DM Mono 12.5px w26 */
.muzai-dist-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 20px;
padding: 20px 22px 18px;
border: 1px solid var(--muzai-border);
border-radius: var(--muzai-radius);
background: var(--muzai-surface);
}
.muzai-dist-main {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.muzai-dist-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.muzai-dist-head h2 {
margin: 0;
color: var(--muzai-ink);
font-size: 15.5px;
font-weight: 600;
}
.muzai-dist-head p {
margin: 3px 0 0;
color: var(--muzai-muted);
font-size: 12.5px;
}
.muzai-dist-tabs {
display: flex;
flex: none;
gap: 4px;
padding: 3px;
border-radius: 8px;
background: var(--muzai-canvas);
}
.muzai-dist-tabs button {
padding: 5px 10px;
border: 0;
border-radius: var(--muzai-radius-inner);
background: transparent;
color: var(--muzai-muted);
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.muzai-dist-tabs button[data-active] {
background: var(--muzai-surface);
color: var(--muzai-ink);
font-weight: 600;
box-shadow: 0 1px 2px rgba(22, 19, 43, .08);
}
.muzai-dist-map {
position: relative;
height: 290px;
}
.muzai-dist-map svg {
display: block;
width: 100%;
height: 100%;
}
.muzai-dist-tip {
position: absolute;
pointer-events: none;
padding: 7px 10px;
border-radius: 8px;
background: var(--muzai-ink);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
opacity: 0;
transition: opacity .12s;
}
/* Alt başlıktaki parantezli açıklama — asıl cümleden bir ton silik. */
.muzai-dist-note { color: var(--muzai-soft); }
.muzai-dist-side {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 2px;
min-width: 0;
}
.muzai-dist-side-head {
display: flex;
justify-content: space-between;
padding: 0 0 10px;
color: var(--muzai-soft);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.muzai-dist-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
}
.muzai-dist-rank {
width: 16px;
flex: none;
color: var(--muzai-soft);
font-family: 'DM Mono', monospace;
font-size: 11px;
}
.muzai-dist-name {
flex: 1;
min-width: 0;
overflow: hidden;
color: var(--muzai-ink);
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.muzai-dist-track {
width: 56px;
height: 5px;
flex: none;
border-radius: var(--muzai-radius-pill);
background: var(--muzai-neutral-soft);
overflow: hidden;
}
.muzai-dist-track > span {
display: block;
height: 100%;
border-radius: var(--muzai-radius-pill);
background: var(--muzai-accent);
}
.muzai-dist-count {
width: 26px;
flex: none;
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 12.5px;
font-weight: 500;
text-align: end;
}
.muzai-dist-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: auto;
padding-top: 12px;
}
.muzai-dist-chips span {
padding: 3px 7px;
border-radius: var(--muzai-radius-inner);
background: var(--muzai-canvas);
color: var(--muzai-muted);
font-family: 'DM Mono', monospace;
font-size: 11px;
}
.muzai-dist-chips b {
color: var(--muzai-ink);
font-weight: 500;
}
.muzai-dist-empty {
margin: 0;
padding: 18px 0;
color: var(--muzai-soft);
font-size: 12.5px;
}
@media (max-width: 80rem) {
.muzai-dist-card {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
KPI KARTI — onaylı tasarımın satır içi stilleriyle BİREBİR
--------------------------------------------------------------------------
kart background:#fff; border:1px solid #E8E6EF; border-radius:14px;
padding:18px 18px 14px; gap:12px; overflow:hidden
ikon 32x32; border-radius:9px; grid place-items:center; svg 16px sw 1.9
etiket 13px / 500 / #6E6A85
delta 11.5px / 600 / DM Mono; padding:3px 7px; border-radius:6px ← HAP DEĞİL
değer 30px / 700 / letter-spacing:-.03em / line-height:1 ← Onest, DM Mono DEĞİL
alt metin 12px / #6E6A85; margin-top:8px
sparkline 88x34, sağ alta hizalı
grid repeat(5,1fr); gap:14px
========================================================================== */
.fi-wi-stats-overview > .fi-sc {
gap: 14px;
}
.fi-wi-stats-overview-stat {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
padding: 18px 18px 14px;
border: 1px solid var(--muzai-border);
border-radius: var(--muzai-radius);
background: var(--muzai-surface);
overflow: hidden;
}
.fi-wi-stats-overview-stat > .fi-wi-stats-overview-stat-content {
display: flex;
flex-direction: column;
gap: 12px;
}
/* — satır 1: ikon + etiket — */
.fi-wi-stats-overview-stat-label-ctn {
display: flex;
align-items: center;
gap: 9px;
padding-inline-end: 74px; /* delta rozetine yer */
}
.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
width: 32px;
height: 32px;
flex: none;
padding: 8px;
border-radius: var(--muzai-radius-control);
background: var(--muzai-neutral-soft);
color: var(--muzai-muted);
stroke-width: 1.9;
}
.fi-wi-stats-overview-stat-label {
color: var(--muzai-muted);
font-size: 13px;
font-weight: 500;
}
/* — sağ üst delta rozeti — */
.fi-wi-stats-overview-stat[data-delta]::after {
content: attr(data-delta);
position: absolute;
inset-block-start: 18px;
inset-inline-end: 18px;
padding: 3px 7px;
border-radius: var(--muzai-radius-inner);
background: var(--muzai-neutral-soft);
color: var(--muzai-muted);
font-family: 'DM Mono', monospace;
font-size: 11.5px;
font-weight: 600;
line-height: 1.45;
white-space: nowrap;
}
/* Rozet tonu ikon tonundan bağımsız: data-delta-tone (tasarım sözleşmesi). */
.fi-wi-stats-overview-stat[data-delta-tone='success']::after {
background: var(--muzai-success-soft);
color: var(--muzai-success-text);
}
.fi-wi-stats-overview-stat[data-delta-tone='danger']::after {
background: var(--muzai-danger-soft);
color: var(--muzai-danger-text);
}
/* — satır 2: değer + alt metin — */
.fi-wi-stats-overview-stat-value {
color: var(--muzai-ink);
font-size: 30px;
font-weight: 700;
line-height: 1;
letter-spacing: -.03em;
}
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
display: block;
max-width: 100%;
margin-top: 8px;
padding: 0;
padding-inline-end: 98px; /* sparkline'a yer */
border-radius: 0;
background: transparent;
color: var(--muzai-muted);
font-size: 12px;
line-height: 1.35;
font-weight: 400;
}
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description .fi-icon {
display: none;
}
/* — sparkline: Filament grafiği içerikten SONRA ayrı sarmalayıcıya basıyor — */
.fi-wi-stats-overview-stat > div:nth-child(2) {
position: absolute;
inset-block-end: 14px;
inset-inline-end: 18px;
width: 88px;
height: 34px;
pointer-events: none;
}
.fi-wi-stats-overview-stat > div:nth-child(2) > .fi-wi-stats-overview-stat-chart {
width: 100%;
height: 100%;
opacity: 1;
}
/* — ton renkleri: İKON KAROSU yalnız data-tone'dan beslenir (rozet ayrı) — */
.fi-wi-stats-overview-stat[data-tone='primary'] .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
background: var(--muzai-accent-soft);
color: var(--muzai-accent-dark);
}
.fi-wi-stats-overview-stat[data-tone='violet'] .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
background: #EEEBFB;
color: #6B5BD6;
}
.fi-wi-stats-overview-stat[data-tone='amber'] .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
background: #FFF4DF;
color: #F2A31B;
}
.fi-wi-stats-overview-stat[data-tone='success'] .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
background: var(--muzai-success-soft);
color: var(--muzai-success-text);
}
.fi-wi-stats-overview-stat[data-tone='warning'] .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
background: var(--muzai-warning-soft);
color: var(--muzai-warning-text);
}
.fi-wi-stats-overview-stat[data-tone='danger'] .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
background: var(--muzai-danger-soft);
color: var(--muzai-danger-text);
}
/* Kart tıklanabilir olduğunda (Stat::url) imleç ve hover */
a.fi-wi-stats-overview-stat {
text-decoration: none;
transition: border-color .12s, box-shadow .12s;
}
a.fi-wi-stats-overview-stat:hover {
border-color: var(--muzai-border-strong);
box-shadow: 0 2px 10px rgba(22, 19, 43, .06);
}
/* ==========================================================================
TABLO — onaylı tasarımın satır içi stilleriyle BİREBİR
--------------------------------------------------------------------------
başlık satırı height:40px; padding:0 16px; background:#FAF9FC;
border-bottom:1px solid #EEECF4; font:600 11px; ls:.06em;
uppercase; color:#A5A1B8
gövde satırı height:56px (yoğun 44px); padding:0 16px;
border-bottom:1px solid #F3F1F8; color:#16132B; font-size:13px
araç çubuğu padding:14px 16px; border-bottom:1px solid #EEECF4
========================================================================== */
.fi-ta-ctn {
border: 1px solid var(--muzai-border);
border-radius: var(--muzai-radius);
background: var(--muzai-surface);
overflow: hidden;
}
.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar {
padding: 14px 16px;
border-bottom: 1px solid #eeecf4;
background: var(--muzai-surface);
}
.fi-ta-header-cell {
height: 40px;
padding: 0;
background: #faf9fc;
border-bottom: 1px solid #eeecf4;
color: var(--muzai-soft);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.fi-ta-header-cell:first-child {
padding-inline-start: 16px;
}
.fi-ta-header-cell:last-child {
padding-inline-end: 16px;
}
.fi-ta-header-cell .fi-ta-header-cell-label,
.fi-ta-header-cell button {
gap: 5px;
height: 40px;
padding: 0 8px;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.fi-ta-row {
border-bottom: 1px solid #f3f1f8;
background: var(--muzai-surface);
transition: background-color .1s;
}
.fi-ta-row:last-child {
border-bottom: 0;
}
.fi-ta-row:hover {
background: var(--muzai-surface-softer);
}
.fi-ta-cell {
height: 56px;
padding: 0;
color: var(--muzai-ink);
font-size: 13px;
}
.fi-ta-cell:first-child {
padding-inline-start: 16px;
}
.fi-ta-cell:last-child {
padding-inline-end: 16px;
}
.fi-ta-cell > *,
.fi-ta-cell .fi-ta-col-wrp {
padding-inline: 8px;
}
/* Sayısal/kimlik hücreleri tasarımda DM Mono. */
.fi-ta-text-item-label.fi-ta-text-has-badge,
.fi-ta-cell code,
.fi-ta-cell .fi-ta-text-item-label:has(+ .fi-ta-text-item-icon) {
font-family: 'DM Mono', monospace;
}
/* Rozetler: tasarımda 22px yükseklik, 6px köşe, 11.5px yazı. */
.fi-badge {
height: var(--muzai-badge-h);
padding: 0 8px;
border-radius: var(--muzai-radius-inner);
font-size: 11.5px;
font-weight: 600;
line-height: 1;
}
/* Sayfalama şeridi */
.fi-ta-pagination,
.fi-pagination {
padding: 12px 16px;
border-top: 1px solid #eeecf4;
background: var(--muzai-surface);
font-size: 12.5px;
}
/* Başlıktaki kayıt sayısı — tasarım: font-size:15px; font-weight:500;
color:#A5A1B8; font-family:'DM Mono',monospace; başlığın hemen yanında. */
.fi-header-heading .muzai-title-count {
margin-inline-start: 8px;
color: var(--muzai-soft);
font-family: 'DM Mono', monospace;
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
}
/* Başlık altı açıklaması — tasarım: 13.5px / #6E6A85 */
.fi-header-subheading {
color: var(--muzai-muted);
font-size: 13.5px;
line-height: 1.5;
max-width: 78ch;
}
/* ==========================================================================
GİRİŞ KARTI — onaylı tasarımın satır içi stilleriyle BİREBİR
kart width:400px; gap:22px
başlık SOLA DAYALI; h2 24px/700/-.02em; alt satır 13.5px #6E6A85
alanlar dikey gap:14px (Filament varsayılanı 24px idi)
etiket inputun ÜSTÜNDE; 12.5px/600; aradaki boşluk 6px
input height:44px; border-radius:10px; padding:0 14px; font-size:14px
odak kenarlığı #E8348B
========================================================================== */
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-main {
width: 400px;
display: flex;
flex-direction: column;
gap: 22px;
}
/* Filament başlığı ortalıyor; tasarımda sola dayalı. */
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-header {
align-items: flex-start;
margin-bottom: 0;
text-align: start;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-header-heading {
color: var(--muzai-ink);
font-size: 24px;
font-weight: 700;
letter-spacing: -.02em;
text-align: start;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-simple-header-subheading {
margin-top: 6px;
color: var(--muzai-muted);
font-size: 13.5px;
text-align: start;
}
/* Alan aralığı 24px değil 14px. */
.fi-simple-layout:has(.muzai-auth-brand) .fi-form .fi-sc-has-gap,
.fi-simple-layout:has(.muzai-auth-brand) form .fi-sc-has-gap {
gap: 14px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-fo-field-wrp-label {
color: var(--muzai-ink);
font-size: 12.5px;
font-weight: 600;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-fo-field-wrp-label-ctn {
margin-bottom: 6px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-input-wrp {
min-height: 44px;
border-radius: 10px;
border-color: var(--muzai-border);
background: var(--muzai-surface);
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-input-wrp:focus-within {
border-color: var(--muzai-accent);
box-shadow: 0 0 0 3px var(--muzai-accent-soft);
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-input {
padding-inline: 14px;
font-size: 14px;
}
.fi-simple-layout:has(.muzai-auth-brand) .fi-btn {
height: 44px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
}
/* — adım göstergesi — */
.muzai-auth-steps {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
color: var(--muzai-soft);
font-size: 12px;
}
.muzai-auth-steps > li {
display: flex;
align-items: center;
gap: 6px;
}
.muzai-auth-step-n {
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--muzai-border);
color: var(--muzai-soft);
font-family: 'DM Mono', monospace;
font-size: 10.5px;
font-weight: 700;
}
.muzai-auth-steps > li[data-done] .muzai-auth-step-n {
background: var(--muzai-ink);
color: #fff;
}
.muzai-auth-steps > li[data-current] .muzai-auth-step-label {
color: var(--muzai-ink);
font-weight: 600;
}
.muzai-auth-step-sep {
width: 24px;
height: 1px;
background: var(--muzai-border-strong);
}
/* ==========================================================================
ÜST ÇUBUK SAĞ BLOĞU — arama · bildirim zili · avatar · kullanıcı adı
Onaylı tasarımdaki ölçüler (Admin Topbar.dc.html satır içi stilleri):
zil 36x36; radius 9px; border rgba(255,255,255,.1); bg rgba(255,255,255,.08)
rozet 8x8 daire #E8348B; 2px #16132B kenarlık; top:7 right:8
ayraç avatar bloğunun solunda 1px rgba(255,255,255,.12)
avatar 32x32 daire, beyaz zemin
ad 13px / 600
Filament arama ve kullanıcı menüsünü bu sırada basmıyor; görsel sıra
`order` ile kuruluyor (blade GLOBAL_SEARCH_AFTER hook'undan giriyor).
========================================================================== */
/* ⚠️ Sağ blok ASLA daralmaz. Daraldığında kullanıcı adı avatarın ÜSTÜNE
biniyordu (1400px viewport'ta 14px çakışma ölçüldü): esneme baskısı
avatar/ad boşluğunu yiyordu. Baskıyı gezinti şeridi soğurmalı — o zaten
`overflow-x: auto`. */
.fi-topbar-end {
display: flex;
flex: none;
align-items: center;
column-gap: 10px;
}
.fi-topbar-end > * {
flex: none;
}
.fi-topbar-end .fi-global-search-ctn { order: 1; }
.fi-topbar-end .muzai-topbar-alerts { order: 2; }
.fi-topbar-end .fi-user-menu { order: 3; }
.fi-topbar-end .muzai-topbar-user { order: 4; }
/* Avatar bloğunun solundaki ince ayraç — tasarımda avatar+ad tek grup. */
.fi-topbar-end .fi-user-menu {
padding-inline-start: 8px;
margin-inline-start: 4px;
border-inline-start: 1px solid rgba(255, 255, 255, .12);
}
.fi-topbar-end .fi-user-menu .fi-avatar,
.fi-topbar-end .fi-user-menu img {
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(255, 255, 255, .15);
}
.muzai-topbar-user {
flex: none;
color: #fff;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
}
/* Tasarımın kendi üst çubuğu 1360px'in altına inmiyor. O eşiğin altında ad
gizlenir ve yeri gezinti şeridine bırakılır — yoksa "Sistem" kesiliyor.
1366px'lik yaygın dizüstü genişliğinde ad GÖRÜNÜR kalır (orada gezinti
zaten tam sığıyor). Avatar ve profil bağlantısı her koşulda yerinde. */
@media (max-width: 1339px) {
.fi-topbar-end .muzai-topbar-user {
display: none;
}
}
.muzai-topbar-user:hover {
color: rgba(255, 255, 255, .82);
}
/* — bildirim zili — */
.muzai-topbar-alerts {
position: relative;
display: flex;
align-items: center;
}
.muzai-bell {
position: relative;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--muzai-radius-control);
background: rgba(255, 255, 255, .08);
color: #fff;
cursor: pointer;
}
.muzai-bell:hover {
background: rgba(255, 255, 255, .14);
}
.muzai-bell-dot {
position: absolute;
top: 7px;
right: 8px;
width: 8px;
height: 8px;
border: 2px solid #16132b;
border-radius: 50%;
background: var(--muzai-accent);
}
/* Kritik varsa nokta kırmızı — "bir şey bozuldu" ile "haber var" ayrışsın. */
.muzai-bell-dot[data-critical] {
background: var(--muzai-danger);
}
.muzai-bell-panel {
position: absolute;
top: calc(100% + 10px);
inset-inline-end: 0;
z-index: 60;
width: 340px;
max-height: 420px;
overflow-y: auto;
padding: 0;
border: 1px solid var(--muzai-border);
border-radius: var(--muzai-radius);
background: var(--muzai-surface);
box-shadow: var(--muzai-shadow-float);
color: var(--muzai-ink);
}
.muzai-bell-panel > header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 13px 14px;
border-bottom: 1px solid var(--muzai-border);
}
.muzai-bell-panel > header strong {
font-size: 13.5px;
font-weight: 600;
}
.muzai-bell-panel > header span {
color: var(--muzai-muted);
font-size: 11.5px;
}
.muzai-bell-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.muzai-bell-panel li {
border-bottom: 1px solid var(--muzai-border);
}
.muzai-bell-panel li:last-child {
border-bottom: 0;
}
.muzai-bell-panel li > a,
.muzai-bell-panel li > div {
display: block;
padding: 11px 14px;
border-inline-start: 3px solid transparent;
color: inherit;
text-decoration: none;
}
.muzai-bell-panel li > a:hover {
background: var(--muzai-surface-soft);
}
.muzai-bell-panel li[data-level='critical'] > a,
.muzai-bell-panel li[data-level='critical'] > div {
border-inline-start-color: var(--muzai-danger);
}
.muzai-bell-panel li[data-level='warning'] > a,
.muzai-bell-panel li[data-level='warning'] > div {
border-inline-start-color: var(--muzai-warning);
}
.muzai-bell-title {
display: block;
font-size: 13px;
font-weight: 600;
}
.muzai-bell-detail {
display: block;
margin-top: 2px;
color: var(--muzai-muted);
font-size: 11.5px;
line-height: 1.45;
}
.muzai-bell-empty {
padding: 20px 14px;
color: var(--muzai-soft);
font-size: 12.5px;
text-align: center;
}
/* ——— Alt başlıktaki servis durumu noktası ———
Tasarım: 7px daire, yeşil #12A17F, metnin SOLUNDA, 8px boşluk. */
.fi-header-subheading .muzai-status-dot {
display: inline-block;
width: 7px;
height: 7px;
margin-inline-end: 8px;
border-radius: 50%;
background: var(--muzai-success);
vertical-align: middle;
}
.fi-header-subheading .muzai-status-dot[data-status='warning'] {
background: var(--muzai-warning);
}
.fi-header-subheading .muzai-status-dot[data-status='critical'] {
background: var(--muzai-danger);
}
/* ==========================================================================
ADMIN LİSTE SÖZLEŞMESİ — 30 liste ekranının ORTAK kabuğu
Kaynak: ~/Downloads/muzai-admin-design/Admin Liste.dc.html
Ölçüler o dosyanın satır içi style'larından birebir alındı. Bu blok
bilerek dosyanın SONUNDA: aynı seçicileri hedefleyen eski kurallar var ve
sıra bu bloğun kazanmasını gerektiriyor.
========================================================================== */
/* Araç çubuğu: padding 14/16, gap 8, alt çizgi #EEECF4 */
.fi-ta-ctn .fi-ta-header-toolbar {
gap: 8px;
padding: 14px 16px;
border-bottom: 1px solid #eeecf4;
}
/* Tablo başlık satırı: 40px, #FAF9FC, 11px/600, .06em, büyük harf */
.fi-ta-table > thead > tr {
background: #faf9fc;
border-bottom: 1px solid #eeecf4;
}
.fi-ta-table > thead > tr > .fi-ta-header-cell {
height: 40px;
padding: 0 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
line-height: 1.2;
text-transform: uppercase;
color: #a5a1b8;
}
/* Satırın kendi kenar boşluğu 16px; hücreler 8px. Tasarımda satır
`padding:0 16px`, hücre `padding:8px`. */
.fi-ta-table > thead > tr > .fi-ta-header-cell:first-child,
.fi-ta-table > tbody > .fi-ta-row > .fi-ta-cell:first-child {
padding-inline-start: 16px;
}
.fi-ta-table > thead > tr > .fi-ta-header-cell:last-child,
.fi-ta-table > tbody > .fi-ta-row > .fi-ta-cell:last-child {
padding-inline-end: 16px;
}
/* Satır: min 54px, 13px, ayırıcı #F3F1F8 (eskisi 56px / 14px / #E8E6EF idi) */
.fi-ta-table > tbody > .fi-ta-row > .fi-ta-cell {
height: 54px;
padding: 8px;
border-bottom-color: #f3f1f8;
color: #16132b;
font-size: 13px;
}
.fi-ta-table > tbody > .fi-ta-row > .fi-ta-cell .fi-ta-col {
gap: 7px;
}
/* ——— Satır aksiyonları ———
Tasarım: 28px yükseklik, min 28px genişlik, 7px yarıçap, 1px kenarlık,
4px aralık, sağa yaslı; ikon 13px. Filament bunları çıplak METİN BAĞLANTISI
(.fi-link) olarak basıyordu — kenarlıksız, hedefi belirsiz. */
.fi-ta-row .fi-ta-actions {
justify-content: flex-end;
gap: 4px;
}
.fi-ta-row .fi-ta-actions .fi-link,
.fi-ta-row .fi-ta-actions .fi-icon-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 28px;
height: 28px;
padding-inline: 6px;
border-radius: 7px;
background: var(--muzai-surface);
box-shadow: inset 0 0 0 1px var(--muzai-border);
color: var(--muzai-muted);
font-size: 12px;
font-weight: 600;
}
.fi-ta-row .fi-ta-actions .fi-link:hover,
.fi-ta-row .fi-ta-actions .fi-icon-btn:hover {
background: var(--muzai-surface-soft);
color: var(--muzai-ink);
}
.fi-ta-row .fi-ta-actions .fi-link .fi-icon,
.fi-ta-row .fi-ta-actions .fi-icon-btn .fi-icon {
width: 13px;
height: 13px;
}
/* Tehlikeli satır aksiyonu (Sil) tasarımda kırmızı ana hatlı. */
.fi-ta-row .fi-ta-actions .fi-link.fi-color-danger {
color: #e5484d;
box-shadow: inset 0 0 0 1px #fdebec;
}
.fi-ta-row .fi-ta-actions .fi-link.fi-color-danger:hover {
background: #fdebec;
color: #e5484d;
}
/* ——— Boş durum ———
Tasarım (Admin Liste.dc.html): 64px/20px dolgu, 52px ikon karosu
(radius 16, zemin #F4F3F8, ikon #A5A1B8), başlık 15px/600,
açıklama 13px #6E6A85 en fazla 460px.
⚠️ İKİ tuzak birden vardı ve kural hiçbir ekranda tutmuyordu:
1. Sınıf adı `fi-ta-empty-state-icon-ctn` değil, `-icon-bg`
(vendor/…/tables/resources/views/index.blade.php:2438). Ölü seçici
yüzünden karo Filament'in kendi pembe dairesi olarak kalıyordu.
2. Filament kendi kurallarını `.fi-ta-empty-state .fi-ta-…` (0,2,0)
özgüllüğüyle basıyor; öneksiz (0,1,0) kurallarımız kaybediyordu.
Bu blok yukarıdaki 2691'deki blokla da çelişiyordu (açıklama 12.5 vs 13px,
karo pembe vs gri); tek doğru burada, öncekiler buradan sonra geldiği için
eziliyor. */
.fi-ta-empty-state {
padding: 64px 20px;
}
.fi-ta-empty-state .fi-ta-empty-state-icon-bg {
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--muzai-canvas);
color: var(--muzai-soft);
}
.fi-ta-empty-state .fi-ta-empty-state-icon-bg .fi-icon {
width: 22px;
height: 22px;
}
.fi-ta-empty-state .fi-ta-empty-state-heading {
color: var(--muzai-ink);
font-size: 15px;
font-weight: 600;
}
.fi-ta-empty-state .fi-ta-empty-state-description {
max-width: 460px;
color: var(--muzai-muted);
font-size: 13px;
line-height: 1.5;
}
/* ——— Sayfalama ———
Tasarım: solda "1–25 / 357" + sayfa boyutu şeridi, sağda 30px numara
düğmeleri. Metnin biçimi lang/vendor/filament/tr'den geliyor. */
.fi-pagination {
padding: 12px 16px;
color: var(--muzai-muted);
font-size: 12.5px;
}
/* ⚠️ `.fi-pagination` öneki KASITLI: eski Tabler bloğu (917. satır)
`.fi-pagination .fi-pagination-overview` ile (0,2,0) yazıyor ve tek sınıflı
(0,1,0) kural kaybediyordu — "1–25 / 272" DM Mono/koyu yerine soluk ve
normal ağırlıkta çıkıyordu. */
.fi-pagination .fi-pagination-overview {
color: var(--muzai-ink);
font-family: 'DM Mono', monospace;
font-size: 12.5px;
font-weight: 600;
}
/* Sayfa boyutu seçicisi tasarımdaki #F4F3F8 şeride yaklaştırılıyor
(Filament