/* panel404 — reset + base typography + utilities (premium v5) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* DÜZELTME: yukarıdaki evrensel `margin: 0` <dialog>'un tarayıcı
   varsayılanı olan `margin: auto`'yu da eziyordu. Modal dialog'lar
   `position: fixed; left: 0; right: 0` ile konumlandığı için yatay
   ortalama tamamen `margin-inline: auto`'ya bağlı — o gidince TÜM
   modaller (6 view'daki dialog'lar + Ctrl+K komut paleti) ekranın sol
   üstüne yapışıyordu. Burada geri veriliyor ki ileride eklenecek her
   dialog da bedavaya doğru çalışsın; components.css'teki `margin-top`
   override'ları yalnız üst kenarı değiştirir, yanlar auto kalır. */
dialog { margin: auto; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gray-400) 45%, transparent) transparent;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1.55;
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: var(--font-features);
}

::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); color: var(--text-heading); }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* Baslikar: optik olarak buyudukce sikilasan harf araligi + dengeli satir kirma */
h1, h2, h3, h4 {
  color: var(--text-heading);
  line-height: 1.22;
  font-weight: var(--fw-semi);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-lg); letter-spacing: var(--tracking-normal); }
h4 { font-size: var(--fs-md); letter-spacing: var(--tracking-normal); }
p { text-wrap: pretty; }

/* ── Caps etiket primitifi ────────────────────────────────────────
   Bu tarif v4'te yedi ayrı yerde birebir kopyalanmıştı (.kpi__label,
   .stat-mini__label, .mini-kpi__label, .donut-center__label,
   .cmdk__group, .chart-tip__title, .sidebar__group). Tek kaynak burada;
   komponent dosyaları yalnızca FARKLARI (renk, boşluk) yazar.
   Alias listesi components.css'in en başında — böylece komponente özel
   override'lar kaskadda sonra gelip kazanmaya devam eder. */
.label-caps {
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-subtle);
}

.icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
/* Guvenlik agi: bir sekilde oznitelik dusse bile ikon devasa render olmasin */
svg.icon:not([width]) { width: 20px; height: 20px; }

/* Odak: iki katmanli halka (net kenar + yumusak glow) */
:focus-visible { outline: none; box-shadow: var(--ring-strong); border-radius: var(--r-sm); }

::placeholder { color: var(--gray-400); opacity: 1; }

/* Scrollbar (webkit) — ince, yuvarlak, dusuk kontrast */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gray-400) 45%, transparent);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--gray-500) 62%, transparent); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* Utilities */
.u-flex { display: flex; align-items: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
/* Dikey yığın — dashboard partial'ları için. Boşluk --stack-gap ile ezilir. */
.u-stack { display: flex; flex-direction: column; gap: var(--stack-gap, 12px); }
.u-gap-1 { gap: 4px; } .u-gap-2 { gap: 8px; } .u-gap-3 { gap: 12px; } .u-gap-4 { gap: 16px; }
.u-text-muted { color: var(--text-muted); }
.u-text-sm { font-size: var(--fs-sm); }
.u-text-xs { font-size: var(--fs-xs); }
.u-num { font-variant-numeric: tabular-nums; font-feature-settings: var(--font-features), 'tnum' 1; }
.u-right { text-align: right; }
.u-center { text-align: center; }
/* v5: 4px adımlı tam skala. v4'te yalnız 2/4/6 tanımlıydı ama view'lar
   u-mt-3 (3x), u-mt-5 ve u-mb-1 kullanıyordu — sessizce hiçbir şey
   yapmıyorlardı ve ikisi inline style="" ile yamanmıştı. */
.u-mt-1 { margin-top: 4px; }  .u-mt-2 { margin-top: 8px; }  .u-mt-3 { margin-top: 12px; }
.u-mt-4 { margin-top: 16px; } .u-mt-5 { margin-top: 20px; } .u-mt-6 { margin-top: 24px; }
.u-mb-1 { margin-bottom: 4px; }  .u-mb-2 { margin-bottom: 8px; }  .u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 16px; } .u-mb-5 { margin-bottom: 20px; } .u-mb-6 { margin-bottom: 24px; }
.u-hidden { display: none !important; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-danger { color: var(--red-600); }
.u-success { color: var(--green-600); }

/* Tema geçişi: theme.js kısa süreliğine .theme-transition ekler,
   böylece renkler yumuşakça döner ama kalıcı transition vergisi olmaz */
html.theme-transition, html.theme-transition *,
html.theme-transition *::before, html.theme-transition *::after {
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease),
              color 220ms var(--ease), fill 220ms var(--ease),
              box-shadow 220ms var(--ease) !important;
}

/* Tema düğmesi ikon değişimi (JS'siz, [data-theme] üzerinden) */
.theme-icon--sun { display: none; }
html[data-theme="dark"] .theme-icon--sun { display: inline-block; }
html[data-theme="dark"] .theme-icon--moon { display: none; }

/* ─────────────────── Sayfa geçişleri (native, JS'siz) ───────────────────
   Sunucu-render MPA'da belgeler arası view transition. Kabuk (sidebar +
   topbar) yerinde SABİT kalır, sadece içerik çapraz geçiş yapar — SPA
   hissi, sıfır JavaScript. Desteklemeyen tarayıcı sessizce yok sayar. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(vt-content) { animation: vtOut 100ms var(--ease) both; }
  ::view-transition-new(vt-content) { animation: vtIn var(--t-slow) var(--ease-emphasized) both; }
  /* Ray anında değişir: aktif menü öğesi "kaymaz", yerinde döner.
     v5: vt-topbar KALDIRILDI. Cam ada backdrop-filter kullanıyor ve
     isimlendirilmiş bir eleman snapshot katmanına taşındığında arkasında
     örnekleyecek sayfa kalmıyor — cam boş render ediyor, grup 0s'e
     sabitli olduğu için de bu her navigasyonda sert bir flash oluyor.
     Topbar artık root snapshot'ının parçası; .content vt-content
     taşıdığından root pikselleri sayfalar arası aynı, geçiş görünmüyor. */
  ::view-transition-old(vt-sidebar), ::view-transition-new(vt-sidebar) {
    animation: none; mix-blend-mode: normal; height: 100%; overflow: clip;
  }
  ::view-transition-group(vt-sidebar) { animation-duration: 0s; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Kart spot ışığı tamamen kapanır. Sadece transition'ı kısaltmak
     yetmez — o durumda parlama anında BELİRİR. enhance.js zaten
     --mx/--my yazmıyor ama CSS tarafı da kendi başına güvenli olmalı. */
  .card { --spot: 0 !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}