/* ==========================================================================
   SANATEKIBI — Yerlesim (layout) kurallari
   Renk icermez; yalnizca konumlandirma, grid ve kabuk iskeleti.
   ========================================================================== */

/* --- Kapsayicilar --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.container-sm { max-width: 820px; }
.container-lg { max-width: 1360px; }

/* --- Grid --- */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: var(--grid-cols, minmax(0, 1fr));
}
.grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Flex yardimcilari --- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.h-full { height: 100%; }
.w-full { width: 100%; }
.text-center { text-align: center; }

/* "inline" = kucuk yatay eylem/oge kumesi (butonlar, rozetler) */
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

/* --- Bosluk yardimcilari --- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* --- Uygulama kabugu --- */
.app-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  backdrop-filter: saturate(1.1) blur(6px);
}
.app-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 60px;
  padding-block: var(--space-sm);
}
.app-main {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
  min-height: calc(100vh - 140px);
}
.app-main:focus { outline: none; }

/* Marka */
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-main);
  flex: 0 0 auto;
}
.app-brand:hover { color: var(--color-text-main); }
.app-brand-logo {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: var(--color-brand);
  font-size: 20px;
}
.app-brand-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }
.app-brand-sub { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 560px) { .app-brand-sub { display: none; } }

/* Birincil kesif navigasyonu */
.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.app-nav a:hover { color: var(--color-text-main); background-color: var(--color-surface-hover); }
.app-nav a.active,
.app-nav a[aria-current="page"] { color: var(--color-nav-active-text); background-color: var(--color-nav-active-bg); }

/* Sag blok */
.app-header-right { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; }
.nav-actions { display: flex; align-items: center; gap: var(--space-xs); }

/* Ust barin metin menusu ve avatar-menu mobilde gizlenir; dock devralir. */
@media (max-width: 820px) {
  .app-nav { display: none; }
  .app-header-inner { gap: var(--space-sm); }
  .app-brand { flex: 1 1 auto; }
}

/* --- Sayfa basligi + breadcrumb --- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.page-head h1 { margin: 0; }
.page-head .page-sub { margin: 4px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb .sep { opacity: 0.6; }

/* --- Bolum --- */
.section { margin-bottom: var(--space-2xl); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.section-head .eyebrow { color: var(--color-brand); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.section-head h2 { margin: 2px 0 0; }

/* --- Filtre cubugu --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}