/* Panel uygulama katmanı: mockup vitrin ölçülerini gerçek pencereye uyarlar.
   Yalnız token (var(--…)); ham renk yok. shared.css'ten sonra yüklenir. */
:root {
  --h-shell: 100dvh;
}

html,
body {
  margin: 0;
}

body {
  background: var(--bg-page);
}

/* SPEC-duyuru-05r: içeriğin üstündeki duyuru kartları; kapat düğmesi dokunma hedefi ≥ 48 px. */
.duyuru-kartlari {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.duyuru-kart .duyuru-kapat {
  flex: none;
  inline-size: var(--m-target);
  block-size: var(--m-target);
  color: inherit;
}

/* UX-005: htmx isteği başarısız ya da sunucuya ulaşılamadı (panel.js). Sayfanın üstünde sabit,
   içeriği itmez; kapat düğmesi dokunma hedefi ≥ 48 px. */
.istek-hata-bandi {
  position: fixed;
  z-index: 50;
  inset-block-start: var(--sp-3);
  inset-inline: var(--sp-4);
  margin-inline: auto;
  max-inline-size: var(--w-toast);
  box-shadow: var(--shadow-pop);
}

.istek-hata-bandi .btn {
  min-block-size: var(--m-target);
  color: inherit;
}

/* İŞ-732 (UX-001, 009, 034): ana sayfa rol kartları, başlangıç ve ay sonu listesi. Durum
   ikon + kelime + renkle (.st); renkli kenar çizgisi yok. */
.pano-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}
.pano-kart { display: flex; flex-direction: column; gap: var(--sp-2); }
.pano-kart-ust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pano-kart-ust h2 {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0; margin-inline-end: auto;
  font-size: var(--fs-15); font-weight: 600; line-height: var(--lh-tight);
}
.pano-kart-sayi {
  margin: 0;
  font-size: var(--fs-36); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pano-kart-metin { margin: 0; color: var(--muted); flex: 1; }
.pano-kart form, .pano-kart > .btn { align-self: flex-start; margin: 0; }
.pano-baslangic, .pano-ay-sonu { margin-block: var(--sp-5); }
.pano-baslangic h2, .pano-ay-sonu h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-16); font-weight: 600; }
.pano-adimlar, .pano-ay-sonu-listesi {
  display: grid; gap: var(--sp-3);
  margin: var(--sp-4) 0 0; padding: 0; list-style: none;
}
.pano-adimlar { counter-reset: adim; }
.pano-adimlar li, .pano-ay-sonu-listesi li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  min-block-size: 44px;
}
.pano-adimlar li::before {
  counter-increment: adim; content: counter(adim);
  display: inline-grid; place-items: center;
  inline-size: var(--sp-7); block-size: var(--sp-7);
  border-radius: 50%; background: var(--bg-inset); font-weight: 700;
}
.pano-adimlar a, .pano-ay-sonu-listesi a { font-weight: 600; }

/* İŞ-733 (UX-002, 011): aday listesinin sonunda yerinde kart ve rolü eksik kart satırı. */
.yerinde-kart { margin-block-start: var(--sp-2); }
.yerinde-ozet {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 44px; padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--brand-text); font-weight: 600; cursor: pointer;
}
.yerinde-ozet:hover { background: var(--bg-hover); }
.yerinde-govde {
  display: grid; gap: var(--sp-3);
  margin: var(--sp-2) 0 0; padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-inset);
  min-inline-size: 0;
}
.yerinde-il-ilce { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--sp-3); }
.yerinde-eylemler { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.yerinde-mevcut, .yerinde-bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.yerinde-bilgi { color: var(--ok-text); font-weight: 600; }
.ie-aday-eksik {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: 0; padding: var(--sp-2); border: 0; color: var(--muted);
  min-inline-size: 0;
}