/* ============================================================
 * XREX — Ortak Tasarım Katmanı  v1.0
 *
 * Sorun: her sayfa kendi CSS'ini taşıyordu; renkler, köşe yuvarlaklıkları,
 * düğme boyutları ve yazı tipleri sayfadan sayfaya değişiyordu.
 *
 * Bu dosya TEK kaynak: renk paleti, tipografi ve ortak bileşen görünümü
 * burada tanımlanır. Sayfaların kendi CSS'i silinmez — bu katman yalnızca
 * DEĞİŞKENLERİ ve ortak bileşen sınıflarını verir, sayfa CSS'i bu
 * değişkenleri kullanacak şekilde kademeli olarak sadeleştirilir.
 *
 * xrex-nav.css'ten SONRA yüklenmeli.
 * ============================================================ */

:root{
  /* --- Renk --- */
  --xr-bg:          #f5f7fb;
  --xr-card:        #ffffff;
  --xr-line:        #e6ecf5;
  --xr-line-koyu:   #cfdcf2;
  --xr-title:       #16233a;
  --xr-text:        #2b3a52;
  --xr-muted:       #6b7890;

  --xr-primary:     #2f73f6;
  --xr-primary-dk:  #1b57cd;
  --xr-purple:      #7c5cf0;
  --xr-gradient:    linear-gradient(135deg, #2f73f6, #7c5cf0);

  --xr-ok:          #128a5b;
  --xr-ok-bg:       rgba(18,138,91,.10);
  --xr-warn:        #8a5d00;
  --xr-warn-bg:     rgba(240,168,42,.14);
  --xr-danger:      #c0392b;
  --xr-danger-bg:   rgba(192,57,43,.10);

  /* --- Ölçü --- */
  --xr-r-sm:  10px;
  --xr-r:     12px;
  --xr-r-lg:  18px;
  --xr-r-full: 999px;

  --xr-gap:   16px;
  --xr-pad:   20px;

  --xr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --xr-golge:    0 1px 2px rgba(16,24,40,.04);
  --xr-golge-lg: 0 10px 30px rgba(16,24,40,.08);

  /* Eski sayfalardaki udd-* değişkenleriyle hizala — dosya detay sayfası
     bu adları kullanıyor, ikisi aynı paleti göstersin. */
  --udd-primary:      var(--xr-primary);
  --udd-primary-dark: var(--xr-primary-dk);
  --udd-purple:       var(--xr-purple);
  --udd-line:         var(--xr-line);
  --udd-title:        var(--xr-title);
  --udd-muted:        var(--xr-muted);
  --udd-card:         var(--xr-card);
}

/* ---------- Ortak bileşenler ---------- */
/* Sayfaların kullanabileceği hazır sınıflar. Zorunlu değil;
   yeni ekranlar bunları kullanır, eskiler kademeli geçer. */

.xr-sayfa{
  background: var(--xr-bg);
  color: var(--xr-title);
  font: 15px/1.55 var(--xr-font);
}
.xr-kap{ max-width: 1120px; margin: 0 auto; padding: 24px 18px 70px; }

.xr-kart{
  background: var(--xr-card);
  border: 1px solid var(--xr-line);
  border-radius: var(--xr-r-lg);
  padding: var(--xr-pad);
  margin-bottom: var(--xr-gap);
  box-shadow: var(--xr-golge);
}

.xr-baslik{ margin:0; font-size:1.4rem; letter-spacing:-.02em; }
.xr-baslik span{
  background: var(--xr-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xr-alt{ margin:4px 0 0; color: var(--xr-muted); font-size:.85rem; }

.xr-btn{
  min-height: 42px; padding: 10px 20px;
  border: 0; border-radius: var(--xr-r);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: filter .15s ease, border-color .15s ease;
}
.xr-btn:hover:not(:disabled){ filter: brightness(1.07); }
.xr-btn:disabled{ opacity:.5; cursor: default; }
.xr-btn--birincil{ background: var(--xr-gradient); color:#fff; }
.xr-btn--ikincil{ background:#fff; border:1px solid var(--xr-line); color: var(--xr-title); }
.xr-btn--tehlike{ background:#fff; border:1px solid var(--xr-line); color: var(--xr-danger); }
.xr-btn--kucuk{ min-height:32px; padding:5px 12px; font-size:.8rem; }

.xr-alan{
  width:100%; min-height:42px; padding:9px 13px;
  border:1px solid var(--xr-line); border-radius: var(--xr-r);
  font: inherit; background:#fcfdff; color: var(--xr-title);
}
.xr-alan:focus{ outline:none; border-color: var(--xr-primary); }
.xr-etiket{
  display:block; margin-bottom:5px;
  font-size:.74rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color: var(--xr-muted);
}

.xr-rozet{
  display:inline-block; padding:3px 10px; border-radius: var(--xr-r-full);
  font-size:.72rem; font-weight:800; letter-spacing:.03em;
}
.xr-rozet--ok{ background: var(--xr-ok-bg); color: var(--xr-ok); }
.xr-rozet--uyari{ background: var(--xr-warn-bg); color: var(--xr-warn); }
.xr-rozet--tehlike{ background: var(--xr-danger-bg); color: var(--xr-danger); }
.xr-rozet--bilgi{ background: rgba(47,115,246,.12); color: var(--xr-primary-dk); }

.xr-tablo{ width:100%; border-collapse:collapse; }
.xr-tablo th{
  text-align:left; padding:11px 14px;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--xr-muted); border-bottom:1px solid var(--xr-line);
}
.xr-tablo td{ padding:11px 14px; border-bottom:1px solid #f1f5fa; font-size:.87rem; }
.xr-tablo tr:last-child td{ border-bottom:0; }
.xr-tablo-kaydir{ overflow:auto; }

.xr-bos{ text-align:center; padding:46px 20px; color: var(--xr-muted); }
.xr-bos b{ display:block; color: var(--xr-title); font-size:1.03rem; margin-bottom:5px; }

.xr-mesaj{ padding:12px 16px; border-radius: var(--xr-r); margin-bottom:14px; font-size:.87rem; }
.xr-mesaj--ok{ background: var(--xr-ok-bg); color: var(--xr-ok); }
.xr-mesaj--uyari{ background: var(--xr-warn-bg); color: var(--xr-warn); }
.xr-mesaj--hata{ background: var(--xr-danger-bg); color: var(--xr-danger); }

/* ---------- Mobil ---------- */
@media (max-width: 720px){
  .xr-kap{ padding:16px 13px 60px; }
  .xr-kart{ padding:16px; border-radius: var(--xr-r-lg); }
  .xr-baslik{ font-size:1.2rem; }
  .xr-tablo th, .xr-tablo td{ padding:9px 11px; }
}