/* ==========================================================================
   BASE.CSS
   Reset, tipografi yardımcı sınıfları, Page Shell iskeleti (Bölüm 5),
   Master-Detail layout (Bölüm 4.3), breakpoint state'leri.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-transition) var(--ease-out),
              color var(--duration-transition) var(--ease-out);
}

img, svg { display: block; max-width: 100%; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ---- Erişilebilirlik: klavye odağı ZORUNLU, atlanamaz (Bölüm 6.3 / 17) ---- */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-selection-bg); }

/* ---- Scrollbar (yoğun listeler için ince, nötr) ---- */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   TİPOGRAFİ SINIFLARI (Bölüm 2.1) — her metin bu sınıflardan birini kullanır
   ========================================================================== */
.text-display   { font-size: var(--font-size-display); line-height: var(--line-height-display); font-weight: var(--font-weight-display); }
.text-title1    { font-size: var(--font-size-title1); line-height: var(--line-height-title1); font-weight: var(--font-weight-title1); }
.text-title2    { font-size: var(--font-size-title2); line-height: var(--line-height-title2); font-weight: var(--font-weight-title2); }
.text-title3    { font-size: var(--font-size-title3); line-height: var(--line-height-title3); font-weight: var(--font-weight-title3); }
.text-subtitle  { font-size: var(--font-size-subtitle); line-height: var(--line-height-subtitle); font-weight: var(--font-weight-subtitle); }
.text-body      { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-body); }
.text-body-strong { font-size: var(--font-size-body-strong); line-height: var(--line-height-body-strong); font-weight: var(--font-weight-body-strong); }
.text-caption1  { font-size: var(--font-size-caption1); line-height: var(--line-height-caption1); font-weight: var(--font-weight-caption1); }
.text-caption2  { font-size: var(--font-size-caption2); line-height: var(--line-height-caption2); font-weight: var(--font-weight-caption2); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-info      { color: var(--color-info); }
.text-ellipsis  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   PAGE SHELL (Bölüm 5) — her sayfa bu iskeletten türer
   ┌ Drawer(desktop) ┬ Header ─────────────────┐
   │                 ├ Toolbar (opsiyonel) ─────┤
   │                 ├ Filter Area ─────────────┤
   │                 ├ Action Area (opsiyonel) ─┤
   │                 ├ Content (scroll) ────────┤
   │                 └ Footer (opsiyonel) ──────┘
   ========================================================================== */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
}

.page-header {
  height: var(--header-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--content-margin-compact);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-divider);
}

.page-toolbar {
  height: var(--toolbar-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--content-margin-compact);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}

.page-filter {
  min-height: var(--filter-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--content-margin-compact);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.page-filter.is-collapsed {
  min-height: var(--filter-collapsed-height);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.page-action {
  height: var(--action-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--content-margin-compact);
}

.page-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--content-margin-compact);
}
.page-content.no-padding { padding: 0; }

.page-footer {
  height: var(--footer-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--content-margin-compact);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-divider);
}

/* ---- Master-Detail (Bölüm 4.3) — sadece Large/XLarge'da kalıcı split ---- */
.master-detail {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.master-panel {
  flex: 0 0 auto;
  width: 100%;
  min-width: var(--list-panel-min);
  max-width: var(--list-panel-max);
  border-right: 1px solid var(--color-divider);
  overflow-y: auto;
}
.detail-panel {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--color-surface);
}
.detail-panel.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Compact/Medium genişlikte detay paneli varsayılan gizli (push navigation simülasyonu) */
@media (max-width: 904px) {
  .master-detail.detail-active .master-panel { display: none; }
  .master-detail:not(.detail-active) .detail-panel { display: none; }
  .master-panel { max-width: 100%; border-right: none; }
}
@media (min-width: 905px) {
  .master-detail .detail-panel { display: flex; flex-direction: column; }
}

/* ==========================================================================
   GRID — breakpoint başına kolon/gutter/margin (Bölüm 4.1 / 4.2)
   ========================================================================== */
.content-margin { padding-left: var(--content-margin-compact); padding-right: var(--content-margin-compact); }

@media (min-width: 600px) {
  .content-margin { padding-left: var(--content-margin-medium); padding-right: var(--content-margin-medium); }
}
@media (min-width: 905px) {
  .content-margin { padding-left: var(--content-margin-expanded); padding-right: var(--content-margin-expanded); }
}
@media (min-width: 1240px) {
  .content-margin { padding-left: var(--content-margin-large); padding-right: var(--content-margin-large); }
}
@media (min-width: 1440px) {
  .content-margin { padding-left: var(--content-margin-xlarge); padding-right: var(--content-margin-xlarge); }
}

/* ---- Dashboard kart grid (Bölüm 4.4): 1 / 2 / 3 / 4 / 4 kolon ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--gutter-compact);
}
@media (min-width: 600px)  { .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gutter-medium); } }
@media (min-width: 905px)  { .stat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gutter-expanded); } }
@media (min-width: 1240px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--gutter-large); } }
@media (min-width: 1440px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--gutter-xlarge); } }
.stat-grid > * { max-width: 340px; }
@media (max-width: 1439px) { .stat-grid > * { max-width: none; } }

/* ---- İki kolonlu içerik alanı (Dashboard: aktivite / iş yükü) ---- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter-compact);
}
@media (min-width: 905px) {
  .two-col { grid-template-columns: 1.4fr 1fr; gap: var(--gutter-expanded); }
}

/* ==========================================================================
   BREAKPOINT YARDIMCILARI — sadece belirli genişliklerde göster/gizle
   ========================================================================== */
.only-compact { display: none; }
.only-desktop { display: initial; }
@media (max-width: 904px) {
  .only-compact { display: initial; }
  .only-desktop { display: none; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}