/* MİREX — PAYLAŞILAN BİLEŞEN CİLASI
   =================================
   Modern uyum ve kabuk katmanlarinin devami. Burada iki bilesen var ve
   ikisi de her modulde geciyor (olculdu: 349 bos durum, 96 KPI karti).

   YAPIYA DOKUNMAZ: hicbir HTML ya da sinif adi degismez. */

/* ---------------------------------------------------------------
   1) KPI KARTI — sayı ve anlamı YAN YANA değil, ALT ALTA
   OLCULDU: .mx-stat-card "display:flex; justify-content:space-between"
   ile ciziliyordu; sayi solda, etiketi kartin SAG UCUNDA kaliyordu:

       398 ..................... Toplam gönderi

   Aradaki bosluk kart genisligi kadar buyuyor ve sayi ile anlami
   birbirinden kopuyor. Bir KPI okunurken once "ne", sonra "kac" gelir;
   ikisi bitisik olmali.
   --------------------------------------------------------------- */
.mx-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    transition: border-color var(--mx-motion), box-shadow var(--mx-motion);
}

/* Etiket ONCE gelir: "neyi okuyorum" sorusu sayidan once cevaplanir. */
.mx-stat-card__label {
    order: -1;
    margin-top: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mx-text-muted);
}

.mx-stat-card__val {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Rakamlar sabit genislikte: KPI'lar yan yana duruyor ve goz onlari
       alt alta karsilastiriyor. */
    font-variant-numeric: tabular-nums;
}

.mx-stat-card:hover {
    border-color: var(--mx-primary-border, var(--mx-border));
    box-shadow: var(--mx-shadow-subtle);
}

/* Ikon varsa sayinin yanina degil, kartin sag ustune. */
.mx-stat-card__icon {
    position: absolute;
    top: 12px;
    right: 12px;
}

.mx-stat-card:has(.mx-stat-card__icon) {
    position: relative;
}

/* ---------------------------------------------------------------
   2) BOŞ DURUM — çift çerçeve kalkar, başlık gerçekten başlık olur
   OLCULDU: baslik 14px / aciklama 13px — arada 1px fark var, yani
   hiyerarsi YOK. Ayrica bos durum bir kartin ICINDE cizildiginde
   kart cercevesi + kesikli cerceve ust uste biniyor ve ekranda ici
   bos iki kutu goruntusu olusuyor.
   --------------------------------------------------------------- */
.mx-table__empty {
    padding: 40px 20px;
    margin: 0;
    gap: 2px;
}

/* Kartin icindeyken kendi cercevesini birakir — cift cerceve olmaz. */
.mx-card .mx-table__empty,
.mx-table-container .mx-table__empty {
    border: 0;
    background: transparent;
}

.mx-table__empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mx-text-main);
    margin: 0;
}

.mx-table__empty-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mx-text-muted);
    /* Okuma genisligi: ortalanmis uzun bir satir kotu okunur. */
    max-width: 46ch;
    margin: 0 auto;
}

.mx-table__empty-actions,
.mx-table__empty .mx-button-group {
    margin-top: 18px;
}

/* Onceki "—" isareti bir sey anlatmiyordu; baslik zaten "kayit yok" diyor.
   Yerine ince bir ayrac: bos alanin bilincli oldugunu gosterir. */
.mx-table__empty::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--mx-border);
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------
   3) DURUM RENGİ GERİ GELİYOR
   OLCULDU: "Hatalı çalışma" KPI'si mx-stat-card__val--danger tasidigi
   halde diger KPI'larla AYNI renkte ciziliyordu (ikisi de rgb(22,35,58)).
   Sebep: paylasilan katmanda ".mx-stat-card__val { color: var(--mx-text-main) }"
   kurali var ve ayni ozgullukte olup DAHA SONRA geldigi icin degistiriciyi
   eziyor. Degistirici burada yeniden kuruluyor.

   Bu onemli: sayinin rengi tek basina bir BILGI. Kirmizi olmayan bir hata
   sayaci, hata oldugunu soylemiyor. */
.mx-stat-card__val--danger { color: var(--mx-danger); }
.mx-stat-card__val--success { color: var(--mx-success); }
.mx-stat-card__val--warning { color: var(--mx-warning); }

/* ---------------------------------------------------------------
   4) FORM ETİKETLERİ — büyük harf bağırmayı bırakır
   OLCULDU: temada ".mx-form-group label, .control-label, label" secicisi
   (CIPLAK "label" dahil — uygulamadaki HER etiket) su kurali tasiyor:
       font-weight: 700; text-transform: uppercase; letter-spacing: .04em
   Alti alanli bir musteri formunda ekran "FİRMA ADI / MÜŞTERİ KODU /
   VERGİ DAİRESİ..." diye bagiriyor ve etiketler kart basligiyla yarisiyor.

   AYRIM: BUYUK HARF mikro etiket META veridir — tablo basligi, KPI etiketi,
   rozet. Kullanicinin YAZARKEN okudugu form etiketi meta veri degildir;
   sakin ve taranabilir olmali.

   Tablo basliklari ve KPI etiketleri buyuk harf KALIR. */
.mx-form-group > label,
.mx-field > label {
    text-transform: none;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--mx-text-muted);
}

/* ---------------------------------------------------------------
   5) SATIR AKSİYONLARI — yıkıcı eylem sessizleşir
   OLCULDU: liste satirlarinda "Sil" DOLU KIRMIZI bir blok. Uc satirlik
   bir tabloda uc kirmizi blok, ekranin en gurultulu ogesi oluyor ve goz
   musteri adindan ONCE onlara gidiyor.

   Kirmizi sistemde TEHLIKE demek. Yikici eylem varsayilan halde sessiz
   durmali, niyet belirdiginde (uzerine gelince) kendini gostermeli.
   Eylem KAYBOLMUYOR — yalnizca listedeki agirligi dogru yere iniyor. */
.mx-table .mx-btn--danger {
    background: transparent;
    border-color: var(--mx-border);
    color: var(--mx-danger) !important;
}

.mx-table .mx-btn--danger:hover,
.mx-table .mx-btn--danger:focus-visible {
    background: var(--mx-danger);
    border-color: var(--mx-danger);
    color: #ffffff !important;
}

/* ---------------------------------------------------------------
   6) İŞLEM SÜTUNU — içeriği kadar yer kaplar
   OLCULDU: iki kucuk dugme (~150px) icin sutun 431px genisligindeydi;
   tablo genisliginin ucte birinden fazlasi bos duruyordu. */
.mx-table th:last-child:not(:first-child),
.mx-table td:last-child:not(:first-child) {
    width: 1%;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   7) FORM YOĞUNLUĞU — çift boşluk kalkar
   OLCULDU: .mx-form-grid gap 16px VE .mx-form-group margin-bottom 10px
   birlikte uygulaniyor; iki satir arasi GERCEKTE 26px oluyor. Grid
   zaten bosluk yonetiyor, ustune margin eklemek yogunlugu bozuyor —
   alti alanli bir formda bu 26px ekranin altina kayan bir kart demek.

   Margin YALNIZCA grid/flex icinde sifirlanir; tek basina duran
   form gruplari (kart govdesinde alt alta) kendi boslugunu korur. */
.mx-form-grid > .mx-form-group,
.mx-filter-form > .mx-form-group,
.mx-form-grid > .mx-field {
    margin-bottom: 0;
}

/* Etiket ile alan arasi: 4px cok sikisik, 6px okunakli. */
.mx-form-group {
    gap: 5px;
}

/* Alan ipucu (hint) alanla birlikte okunmali, ayri bir blok gibi degil. */
.mx-form-hint {
    font-size: 11px;
    line-height: 1.45;
    color: var(--mx-text-muted);
    margin-top: 2px;
}

/* ---------------------------------------------------------------
   8) ZORUNLU ALAN — kullanıcı göndermeden önce bilmeli
   OLCULDU: 45 dosyada 109 "required" niteligi var ve CSS'te bunlarin
   HICBIR gorsel karsiligi yok. Kullanici hangi alanin zorunlu oldugunu
   ancak formu gonderip tarayici uyarisini alinca ogreniyor.

   Isaret ETIKETTE durur, alanda degil: kullanici formu doldurmadan
   ONCE tarayarak hangi alanlarin zorunlu oldugunu gormeli. */
.mx-form-group:has(> .mx-input[required]) > label::after,
.mx-form-group:has(> .mx-select[required]) > label::after,
.mx-form-group:has(> textarea[required]) > label::after {
    content: "*";
    color: var(--mx-danger);
    margin-left: 3px;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   9) DEVRE DIŞI ALAN — kapalı olduğu görünmeli
   OLCULDU: CSS'te :disabled / [readonly] icin HIC kural yok. Operasyon
   tartim ekraninda agirlik ve olcu alanlari barkod okutulana kadar
   disabled duruyor ama ACIK alanlarla BIREBIR ayni gorunuyorlar;
   operator tiklayip yaziyor, hicbir sey olmuyor. */
.mx-input:disabled,
.mx-select:disabled,
textarea.mx-input:disabled,
.mx-input[readonly] {
    background: var(--mx-surface-hover);
    color: var(--mx-text-light);
    cursor: not-allowed;
    border-style: dashed;
}

.mx-input:disabled:hover,
.mx-select:disabled:hover {
    border-color: var(--mx-border);
}

/* Devre disi alanin ETIKETI de sonmeli — yoksa alan kapali ama basligi
   acikmis gibi duruyor. */
.mx-form-group:has(> .mx-input:disabled) > label,
.mx-form-group:has(> .mx-select:disabled) > label {
    color: var(--mx-text-light);
}

.mx-btn:disabled,
.mx-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}