/* MİREX — MODERN UYUM KATMANI
   ===========================
   Amac: tum modullerin AYNI dili konusmasi.

   OLCUM (2026-08-31, bin/obj haric):
     · 27 farkli border-radius degeri — token'lar (--mx-radius-*) VAR ama
       yanlarinda 8px, 10px, 4px elle yazilmis; ayni kart kosesi uc ayri
       sekilde tanimlanmis.
     · 47 farkli box-shadow — cogu tek kullanimlik.
     · 47 farkli font-size.

   NEDEN BU KATMAN ISE YARIYOR: 11 modulun HEPSI ayni bilesen siniflarini
   kullaniyor (olculdu: 1335 mx-btn, 520 mx-form-group, 391 mx-badge,
   240 mx-table, 177 mx-card). Bilesenleri hizalamak tum modulleri birden
   hizalar; sayfa sayfa dokunmaya gerek yok.

   YAPIYA DOKUNMAZ: hicbir HTML, sinif adi ya da sayfa degismez.
   Ana temadan SONRA yuklenir. */

/* ---------------------------------------------------------------
   1) TOKEN'LAR — tek kaynaktan tum sistem
   --------------------------------------------------------------- */
:root {
    /* Notr renkler LACIVERTE CALAR. Saf gri (#333/#666) "secilmemis" okunur;
       markanin mavisine dogru hafif kaydirilmis gri "secilmis" okunur. */
    --mx-text-main: #16233a;
    --mx-text-muted: #5a6b82;
    --mx-text-light: #8fa0b5;

    --mx-bg: #f4f7fb;
    --mx-surface: #ffffff;
    --mx-surface-hover: #f7fafd;
    --mx-border: #dde5ef;
    --mx-border-light: #eaf0f7;

    /* UC ADIMLI YARICAP. Onceden 27 deger vardi; goz bunu duzensizlik
       olarak okuyor. Kucuk = kontrol, orta = kart, buyuk = katman. */
    --mx-radius-sm: 6px;
    --mx-radius-md: 8px;
    --mx-radius-lg: 10px;
    --mx-radius-xl: 14px;

    /* IKI ADIMLI YUKSELTI. Golge bir sey ANLATMALI: "bu yuzeyin ustunde"
       ya da "bu ekranin ustunde". Aradaki tonlar gurultu. */
    --mx-shadow-subtle: 0 1px 2px rgb(22 35 58 / 6%);
    --mx-shadow-card: 0 1px 3px rgb(22 35 58 / 7%), 0 8px 24px -12px rgb(22 35 58 / 10%);
    --mx-shadow-float: 0 12px 32px -8px rgb(22 35 58 / 18%);

    /* Tek gecis suresi — her yerde ayni hiz. */
    --mx-motion: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------
   2) YUZEYLER — kart, tablo kabi, diyalog
   --------------------------------------------------------------- */
.mx-card,
.mx-table-container,
.mx-table-wrap:not([hidden]) {
    border-radius: var(--mx-radius-lg);
    border-color: var(--mx-border);
}

.mx-card {
    box-shadow: var(--mx-shadow-subtle);
    transition: box-shadow var(--mx-motion), border-color var(--mx-motion);
}

/* Kart basligi ile govdesi arasindaki ayrim INCE bir cizgi; kalin bir
   zemin degil. Once bazi kartlarda zemin, bazilarinda cizgi vardi. */
.mx-card__header {
    border-bottom: 1px solid var(--mx-border-light);
    background: transparent;
}

.mx-overlay-dialog__content {
    border-radius: var(--mx-radius-xl);
    box-shadow: var(--mx-shadow-float);
}

/* ---------------------------------------------------------------
   3) DUGMELER — 1335 ornek, tek dil
   --------------------------------------------------------------- */
.mx-btn {
    border-radius: var(--mx-radius-sm);
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color var(--mx-motion), border-color var(--mx-motion),
                color var(--mx-motion), box-shadow var(--mx-motion);
}

.mx-btn--primary {
    box-shadow: 0 1px 2px rgb(14 65 148 / 20%);
}

.mx-btn--primary:hover {
    box-shadow: 0 2px 6px rgb(14 65 148 / 26%);
}

.mx-btn:active {
    transform: translateY(0.5px);
}

/* ---------------------------------------------------------------
   4) FORM ALANLARI — 520 grup, 319 girdi
   --------------------------------------------------------------- */
.mx-input,
.mx-select,
textarea.mx-input {
    border-radius: var(--mx-radius-sm);
    border-color: var(--mx-border);
    transition: border-color var(--mx-motion), box-shadow var(--mx-motion);
}

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

/* TEK ODAK HALKASI. Onceden bazi alanlarda outline, bazilarinda golge,
   bazilarinda hicbir sey vardi; klavyeyle gezen kisi nerede oldugunu
   kaybediyordu. */
.mx-input:focus,
.mx-input:focus-visible,
.mx-select:focus,
.mx-select:focus-visible,
textarea.mx-input:focus {
    outline: none;
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 3px rgb(14 65 148 / 12%);
}

.mx-btn:focus-visible,
.mx-tabs__item:focus-visible,
.mx-table__link:focus-visible,
.mx-sidebar__link:focus-visible {
    outline: 2px solid var(--mx-primary);
    outline-offset: 2px;
    border-radius: var(--mx-radius-sm);
}

/* ---------------------------------------------------------------
   5) TABLOLAR — 240 ornek
   --------------------------------------------------------------- */
.mx-table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mx-text-muted);
    background: var(--mx-surface-hover);
    border-bottom: 1px solid var(--mx-border);
}

.mx-table tbody tr {
    transition: background-color var(--mx-motion);
}

.mx-table tbody tr:hover {
    background: var(--mx-surface-hover);
}

.mx-table td {
    border-bottom: 1px solid var(--mx-border-light);
}

/* Sayilar hizali okunsun — tutar ve desi kolonlari goz taramasiyla
   karsilastiriliyor. */
.mx-table td.mx-table__num,
.mx-table th.mx-table__num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------------------------------------------------------------
   6) ROZETLER — 391 ornek, tek yukseklik
   --------------------------------------------------------------- */
.mx-badge {
    border-radius: var(--mx-radius-sm);
    font-weight: 500;
    letter-spacing: 0;
    border: 1px solid transparent;
    /* Olculdu: 0.6875rem tema kok olcusuyle 9,6px cizilyordu — gun boyu
       kullanilan bir operasyon aracinda okunamayacak kadar kucuk. */
    font-size: 12px;
    line-height: 1.5;
}

/* Durum renkleri MARKA renginden ayridir: iyi/uyari/kritik ayri bir
   eksendir ve vurgu rengiyle yarismaz. */
.mx-badge--success { border-color: rgb(62 177 91 / 22%); }
.mx-badge--warning { border-color: rgb(255 180 0 / 28%); }
.mx-badge--danger  { border-color: rgb(234 66 63 / 22%); }
.mx-badge--info    { border-color: rgb(58 134 200 / 22%); }
.mx-badge--neutral { border-color: var(--mx-border); }

/* ---------------------------------------------------------------
   7) KENAR MENU — her modulde ayni
   --------------------------------------------------------------- */
.mx-sidebar__link {
    border-radius: var(--mx-radius-sm);
    transition: background-color var(--mx-motion), color var(--mx-motion);
}

.mx-sidebar__group-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mx-text-light);
}

/* ---------------------------------------------------------------
   8) HAREKET AYARI
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mx-card,
    .mx-btn,
    .mx-input,
    .mx-select,
    .mx-table tbody tr,
    .mx-sidebar__link {
        transition: none;
    }

    .mx-btn:active {
        transform: none;
    }
}

/* Filtre aksiyonlari mx-filter-actions icinde yan yana; grid kurallari gecerli degil. */
.mx-filter-form > .mx-filter-actions .mx-btn {
    width: auto;
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   10) OKUNABİLİRLİK TABANI — ölçülmüş değerlerle
   Tema kok yazi boyutu 14px oldugu icin rem tabanli boyutlar bekleneningen
   kucuk ciziliyor. Gercek olcum (Playwright, tam bir liste ekraninda):
       rozet   0.6875rem ->  9,6px
       kucuk dugme 0.8125rem -> 11,4px
       form etiketi 0.6875rem ->  9,6px
       seviye-1 sekme 0.875rem -> 12,25px
   Gun boyu kullanilan bir operasyon aracinda 9,6px kabul edilemez.
   px ile tabanlaniyor ki kok olcusu ne olursa olsun kucuk kalmasin. */
.mx-btn--sm {
    font-size: 12px;
}

.mx-form-group > label,
.mx-field > span,
.mx-filter-form label {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Seviye-1 sekme: tune katmanindaki px kurali daha dusuk ozgullukte kaldigi
   icin 0.875rem (12,25px) kazaniyordu. Ayni seciciyle esitleniyor. */
.mx-hub--stacked > .mx-tabs:first-child .mx-tabs__item {
    font-size: 13px;
}

/* ---------------------------------------------------------------
   11) SAYFA BAŞLIĞI — alt başlık ve eylem grubu ritmi
   --------------------------------------------------------------- */
.mx-page-subtitle {
    color: var(--mx-text-muted);
    margin-top: 4px;
}

.mx-page-header .mx-button-group {
    flex-shrink: 0;
}

/* Belge / hata gibi kabuksuz sayfalarda içerik nefes alır. */
.mx-page-shell {
    margin-top: 16px;
}

.mx-page-shell > .mx-card + .mx-card {
    margin-top: 16px;
}

/* ---------------------------------------------------------------
   12) KPI / ÖZET ŞERİTLERİ — liste ve rapor ekranları
   --------------------------------------------------------------- */
.mx-stat-card,
.mx-kpi-card,
.mx-sefer-kpi__item {
    border-radius: var(--mx-radius-lg);
    border-color: var(--mx-border);
}

.mx-stat-card,
.mx-kpi-card {
    box-shadow: var(--mx-shadow-subtle);
}

.mx-kpi-card__label,
.mx-sefer-kpi__label,
.mx-stat-card__label {
    font-size: 11px;
    letter-spacing: 0.04em;
}

.mx-kpi-card__value,
.mx-sefer-kpi__val,
.mx-stat-card__val {
    font-variant-numeric: tabular-nums;
    color: var(--mx-text-main);
}

.mx-kpi-strip,
.mx-stats-grid {
    gap: 12px;
}

.mx-sefer-kpi__item {
    background: var(--mx-surface);
}

/* ---------------------------------------------------------------
   13) MODÜL İÇERİK RİTMİ — ardışık kartlar ve özet şeritleri
   --------------------------------------------------------------- */
.mx-content > .mx-page-header + .mx-card,
.mx-content > .mx-page-header + .mx-stats-grid,
.mx-content > .mx-page-header + .mx-search-bar,
.mx-content > .mx-page-header + nav.mx-tabs,
.mx-content > .mx-badge--block + .mx-card,
.mx-content > .mx-stats-grid + .mx-card,
.mx-content > .mx-sefer-kpi + .mx-card,
.mx-content > .mx-sevk-kpi + .mx-card,
.mx-content > .mx-kpi-strip + .mx-card,
.mx-content > nav.mx-tabs + .mx-card,
.mx-content > .mx-card + .mx-card {
    margin-top: 12px;
}

.mx-card--spaced,
.mx-card--spaced-sm {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------
   14) HIZLI ARAMA — dashboard ve benzeri tek satır formlar
   --------------------------------------------------------------- */
.mx-search-bar {
    flex-wrap: wrap;
    gap: 10px;
}

.mx-search-bar .mx-btn {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
}

.mx-search-bar__input .mx-input {
    width: 100%;
}

/* ---------------------------------------------------------------
   15) SEVK / FATURA KPI — sefer-kpi ile aynı dil
   --------------------------------------------------------------- */
.mx-sevk-kpi__item {
    border-radius: var(--mx-radius-lg);
    border-color: var(--mx-border);
    box-shadow: var(--mx-shadow-subtle);
    transition: border-color var(--mx-motion), box-shadow var(--mx-motion);
}

.mx-sevk-kpi__label {
    font-size: 11px;
    letter-spacing: 0.04em;
}

.mx-sevk-kpi__val,
.mx-sevk-kpi__value {
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    color: var(--mx-text-main);
}

.mx-sevk-kpi__item.is-active {
    background: var(--mx-surface-hover);
}

/* ---------------------------------------------------------------
   16) FİLTRE SEKMELERİ — aktif sekme okunabilirliği
   --------------------------------------------------------------- */
.mx-tabs--filter .mx-tabs__item.is-active {
    font-weight: 600;
}

/* ---------------------------------------------------------------
   17) GÖMÜLÜ ÖNİZLEME — PDF / iframe (harita sınıfı karışmasın)
   --------------------------------------------------------------- */
.mx-embed {
    display: block;
    width: 100%;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface-hover);
}

.mx-embed--tall {
    height: 560px;
}

iframe.mx-embed {
    border: 0;
}

/* ---------------------------------------------------------------
   18) BOŞ DURUM — başlık ve açıklama okunabilirliği
   --------------------------------------------------------------- */
.mx-table__empty-title {
    font-size: 14px;
}

.mx-table__empty-desc {
    font-size: 13px;
    line-height: 1.5;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.mx-table__empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ---------------------------------------------------------------
   19) TAKİP / GİRİŞ — standalone sayfalar modern token'larla
   --------------------------------------------------------------- */
.mirex-tracking-shell .mx-card,
.mx-login-card {
    border-radius: var(--mx-radius-xl);
    box-shadow: var(--mx-shadow-card);
}

.mx-tracking-search-card,
.mirex-tracking-search {
    margin-top: 12px;
}

.mx-login-card .mx-btn--block {
    width: 100%;
}