/* ============================================================
   UYGULAMABU — CLIENT DESIGN SYSTEM (v2)
   Stripe/Linear/Vercel'in belgelenmiş ilkeleri:
   - Saf siyah yok, tonlu koyu zemin
   - Kenarlıklar neredeyse görünmez (hairline, ~%6-8 opaklık)
   - "Yeterli hissettiren boşluğu al, ikiye katla"
   - Tek, kısıtlı kullanılan vurgu rengi — hiyerarşi renkten değil
     yazı ağırlığı ve boşluktan gelir
   - Keskin, az yuvarlatılmış köşeler — "mühendislik ürünü" hissi
   ============================================================ */

:root {
  --bg: oklch(14.1% 0.005 285.823);          /* Metronic zinc-950 */
  --surface: oklch(19% 0.006 285.9);          /* zinc-950/900 arası — kart yüzeyi */
  --surface-2: oklch(27.4% 0.006 286.033);    /* Metronic zinc-800 */
  --border: oklch(27.4% 0.006 286.033);       /* Metronic'in gerçek koyu tema kenarlığı */
  --border-strong: oklch(33% 0.007 286);
  --text: oklch(98.5% 0 0);                   /* Metronic zinc-50 */
  --text-dim: oklch(63% 0.014 286);
  --text-faint: oklch(44.2% 0.017 285.786);   /* Metronic zinc-600 */

  --accent: oklch(54.6% 0.245 262.881);       /* Metronic'in gerçek primary rengi (blue-600) */
  --accent-dim: oklch(54.6% 0.245 262.881 / .14);

  --success: oklch(62.7% 0.194 149.214);      /* Metronic green-600 */
  --warning: oklch(75% 0.183 55.934);         /* Metronic orange-400 */
  --error: oklch(57.7% 0.245 27.325);         /* Metronic red-600 */

  --radius: 8px;                              /* Metronic'in gerçek --radius: 0.5rem */
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px 0 rgba(0,0,0,.4);

  --space-3: 20px; --space-4: 32px; --space-5: 48px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;  /* Metronic'in gerçek fontu */
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0; padding: 0; min-height: 100vh;
}

.cursor-pointer { cursor: pointer; }
.border { border: 1px solid var(--border); }

.ub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);   /* Metronic kt-card: radius+4px, gerçek değer */
  padding: 20px;                               /* Metronic kt-card-content: spacing*5 = 20px */
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);      /* Metronic'in gerçek kart gölgesi */
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ub-card.clickable { cursor: pointer; }
.ub-card.clickable:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
/* Metronic'in gerçek kart alt bileşenleri — başlık/gövde/alt bilgi ayrımı istenen yerlerde */
.ub-card-header {
  display: flex; min-height: 56px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; border-bottom: 1px solid var(--border); margin: -20px -20px 20px; padding: 0 20px;
}
.ub-card-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.ub-card-description { font-size: 13px; color: var(--text-dim); }
.ub-card-footer {
  display: flex; align-items: center; border-top: 1px solid var(--border);
  margin: 20px -20px -20px; padding: 16px 20px;
}

.ub-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: var(--space-3) 20px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
}
.ub-stat-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; font-weight: 500; }
.ub-stat-value { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.ub-stat-value.warn { color: var(--warning); }

.ub-page-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.ub-page-sub { font-size: 14px; color: var(--text-dim); font-weight: 400; margin-bottom: var(--space-4); }

.ub-empty {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

@keyframes ub-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.ub-skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400px 100%;
  animation: ub-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* Rozetler artık dolgulu renkli kutular değil — sadece küçük bir nokta + soluk metin.
   Renk sadece anlam taşıdığı yerde (durum) kullanılıyor, dekorasyon için değil. */
.ub-badge {
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500;
  color: var(--text-dim);
}
.ub-badge::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--text-faint); flex-shrink:0; }
.ub-badge.success { color: var(--text); }
.ub-badge.success::before { background: var(--success); }
.ub-badge.warning { color: var(--text); }
.ub-badge.warning::before { background: var(--warning); }
.ub-badge.error { color: var(--text); }
.ub-badge.error::before { background: var(--error); }
.ub-badge.neutral { color: var(--text-faint); }
.ub-badge.info { color: var(--text); }
.ub-badge.info::before { background: var(--accent); }

.ub-input-label { font-size: 12px; color: var(--text-dim); display:block; margin-bottom: 8px; font-weight: 500; }
.ub-input {
  width: 100%; height: 44px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 0 14px; font-size: 14px;
  box-sizing: border-box; transition: border-color .15s ease;
}
.ub-input:focus { outline: none; border-color: var(--accent); }

.ub-btn-primary {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  height: 36px; padding: 0 16px; font-weight: 500; font-size: 14px; cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);      /* Metronic'in gerçek buton gölgesi */
  transition: opacity .15s ease, box-shadow .15s ease;
}
.ub-btn-primary:hover { opacity: .9; }
.ub-btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.ub-btn-secondary {
  background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius);
  height: 36px; padding: 0 16px; font-weight: 500; font-size: 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ub-btn-secondary:hover { background: var(--surface-2); }

/* Metronic'in gerçek sınıf adlarıyla da çalışsın — ileride biri kt-card/kt-btn yazarsa aynı görünüm çıksın. */
.kt-card { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  padding: 20px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15); }
.kt-btn { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px;
  font-weight:500; font-size:14px; border-radius: var(--radius); cursor:pointer; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15); }
.kt-btn-primary { background: var(--accent); color:#fff; border:none; }
.kt-btn-outline { background:transparent; color:var(--text); border:1px solid var(--border-strong); }

.ub-section-title { font-size: 13px; font-weight: 600; margin-bottom: 16px; color: var(--text-dim); letter-spacing: .02em; text-transform: uppercase; }

.ub-progress-track { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.ub-progress-fill { height: 100%; border-radius: 2px; background: var(--accent); }

/* Ayırıcı çizgi — kenarlıkla aynı disiplin, neredeyse görünmez */
.ub-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }

/* ============================================================
   MudBlazor bileşenlerini Metronic'in gerçek ölçülerine zorluyoruz —
   tek dosya, her MudButton/MudTextField/MudPaper otomatik etkileniyor.
   Sayfa sayfa MudBlazor'dan çıkmak yerine, MudBlazor'u Metronic gibi
   GÖRÜNDÜRMEK — 90'dan fazla dosyayı tek tek değiştirmeden aynı sonucu
   veren tek yol bu.
   ============================================================ */
.mud-button-root {
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) !important;
}
.mud-button-filled-primary { background-color: var(--accent) !important; }
.mud-paper {
  background-color: var(--surface) !important;
  border-radius: calc(var(--radius) + 4px) !important;
}
.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
}
.mud-chip { border-radius: var(--radius) !important; font-weight: 500 !important; }
.mud-table-container { border-radius: calc(var(--radius) + 4px) !important; }
.mud-table-cell { border-color: var(--border) !important; }
.mud-drawer, .mud-appbar { background-color: var(--bg) !important; }
.mud-alert { border-radius: var(--radius) !important; }

.public-topline{height:34px;background:#0b1220;color:#c3ccdc;font-size:12px;display:grid;place-items:center}.public-header{height:80px;background:#fff;border-bottom:1px solid #e3e8f1;display:flex;align-items:center;padding:0 5%;gap:40px;color:#0b1220}.public-logo{font-size:24px;font-weight:800;letter-spacing:-1px;color:#0b1220;text-decoration:none}.public-logo span{color:#245bff}.public-header nav{display:flex;align-items:center;gap:28px;margin-left:auto}.public-header nav a{color:#0b1220;text-decoration:none;font-size:14px}.public-account{background:#0b1220!important;color:#fff!important;padding:12px 18px;border-radius:10px}@media(max-width:800px){.public-topline{display:none}.public-header{height:64px}.public-header nav a:not(.public-account){display:none}}
/* Public commerce shell must not reserve the hidden MudAppBar's dark 64px slot. */
.public-shell .mud-main-content{padding-top:0!important;background:#f8f9fc}.public-shell .mud-container{max-width:none!important}