/* ==========================================================================
   SANATEKIBI — Bilesen Kutuphanesi v2
   Bu dosya HER temada yuklenir. Sayfalarin kullandigi ortak siniflar burada
   TEK kaynaktan tanimlanir (onceden bir kismi yalnizca yuklenmeyen
   modes/plato.css icinde oldugu icin varsayilan temada stilsizdi).
   Tum renkler semantik tokenlardan gelir; ham hex kullanilmaz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--control-h);
  padding: 0 var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Marka aksiyonu (yesil) — ikincil onemli eylem */
.btn-brand,
.btn.ok {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}
.btn-brand:hover,
.btn.ok:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-on-brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-outline,
.btn-secondary {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-main);
}
.btn-outline:hover,
.btn-secondary:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-text-muted);
  color: var(--color-text-main);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-main);
}
.btn-ghost:hover { background-color: var(--color-surface-hover); }

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
.btn-danger:hover { filter: brightness(1.05); color: #fff; transform: translateY(-1px); }

.btn-sm { min-height: var(--control-h-sm); padding: 0 var(--space-sm); font-size: var(--text-xs); }
.btn-lg { min-height: calc(var(--control-h) + 8px); padding: 0 var(--space-lg); font-size: var(--text-base); }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Yuklenen buton: metni gizle, spinner goster */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: sanatekibi-spin 0.6s linear infinite;
}

/* --------------------------------------------------------------------------
   Kartlar
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-body { min-width: 0; }
.card-hover:hover { transform: translateY(-2px); border-color: var(--color-border-strong); }

/* --------------------------------------------------------------------------
   Formlar
   -------------------------------------------------------------------------- */
.input,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], input[type="date"], textarea, select {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  color: var(--color-text-main);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
textarea { min-height: 96px; resize: vertical; }
.input:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

.field { margin-bottom: var(--space-md); }
.field > label,
.form-label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-main); }
.field-help { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-text-muted); }
.field-error { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-danger); font-weight: 600; }

/* --------------------------------------------------------------------------
   Rozetler (badge)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.15rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
}
.badge.ok, .badge-success { background-color: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.badge.warn, .badge-warning { background-color: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.badge.error, .badge-danger { background-color: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.badge-info { background-color: var(--color-info-soft); color: var(--color-info); border-color: transparent; }
.badge.off { background-color: var(--color-surface-2); color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Etiketler (tag / chip)
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-soft);
  color: var(--color-brand);
  border: 1px solid transparent;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text-main);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.chip:hover { background-color: var(--color-surface-hover); }
.chip.is-active { background-color: var(--color-nav-active-bg); color: var(--color-nav-active-text); border-color: transparent; }

/* --------------------------------------------------------------------------
   Uyari kutulari (alert)
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-2);
  color: var(--color-text-main);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.alert-success { background-color: var(--color-success-soft); border-color: transparent; color: var(--color-success); }
.alert-error, .alert-danger { background-color: var(--color-danger-soft); border-color: transparent; color: var(--color-danger); }
.alert-warning { background-color: var(--color-warning-soft); border-color: transparent; color: var(--color-warning); }
.alert-info { background-color: var(--color-info-soft); border-color: transparent; color: var(--color-info); }

/* Mesaj kutulari (.msg ok/err) — profil, admin, mesaj, bildirim, onboarding, ucret
   sayfalarinin kullandigi eski sinif; alert gorunumune eslenir. */
.msg {
  display: block;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-2);
  color: var(--color-text-main);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.msg.ok { background-color: var(--color-success-soft); border-color: transparent; color: var(--color-success); }
.msg.err { background-color: var(--color-danger-soft); border-color: transparent; color: var(--color-danger); }
.msg.warn { background-color: var(--color-warning-soft); border-color: transparent; color: var(--color-warning); }

/* --------------------------------------------------------------------------
   Yardimci metin + bos durum
   -------------------------------------------------------------------------- */
.muted { color: var(--color-text-muted); font-size: var(--text-sm); }
small, .text-xs { font-size: var(--text-xs); }

.empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
}
/* Zengin bos durum (ikon + cagri + eylem) */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-text-muted);
}
.empty-state .empty-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 26px;
  margin-bottom: var(--space-xs);
}
.empty-state h3 { margin: 0; color: var(--color-text-main); }
.empty-state p { margin: 0; max-width: 42ch; }

/* --------------------------------------------------------------------------
   Cevrimici gostergesi
   -------------------------------------------------------------------------- */
.on { display: inline-flex; align-items: center; gap: 6px; color: var(--color-success); font-size: var(--text-xs); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); }

/* --------------------------------------------------------------------------
   Istatistik karti
   -------------------------------------------------------------------------- */
.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.stat-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: var(--radius-md);
  background-color: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 22px;
}
.stat-info h4 { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.stat-info .num { margin-top: 2px; font-size: var(--text-2xl); font-weight: 700; color: var(--color-text-main); font-family: var(--font-heading); }

/* --------------------------------------------------------------------------
   Liste satiri
   -------------------------------------------------------------------------- */
.list-row,
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.list-row:last-child, .item-row:last-child { border-bottom: none; }

/* --------------------------------------------------------------------------
   Avatar / monogram
   -------------------------------------------------------------------------- */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 700;
  font-size: var(--text-sm);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; flex-basis: 30px; font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Ust bar ikon dugmesi (zil, mesaj) + rozet
   -------------------------------------------------------------------------- */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 19px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.icon-btn:hover { background-color: var(--color-surface-hover); color: var(--color-text-main); }
.nav-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: var(--color-danger);
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   Kullanici (avatar) menusu
   -------------------------------------------------------------------------- */
.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 6px 0 4px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.user-menu-trigger:hover { background-color: var(--color-surface-hover); border-color: var(--color-border-strong); }
.user-menu-trigger .bi-chevron-down { font-size: 12px; transition: transform var(--motion-fast) var(--ease-out); }
.user-menu-trigger[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  padding: var(--space-xs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.user-menu.is-open .user-menu-panel { opacity: 1; transform: none; pointer-events: auto; }
.user-menu-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}
.user-menu-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-menu-id strong { font-size: var(--text-sm); color: var(--color-text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.user-menu-panel a,
.user-menu-logout button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-main);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.user-menu-panel a:hover,
.user-menu-logout button:hover { background-color: var(--color-surface-hover); }
.user-menu-logout { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border); }
.user-menu-logout button { color: var(--color-danger); }

/* --------------------------------------------------------------------------
   Sekmeler
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-lg); overflow-x: auto; }
.tabs a, .tabs button {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.tabs a:hover, .tabs button:hover { color: var(--color-text-main); }
.tabs a.active, .tabs a[aria-current="page"], .tabs button.is-active, .tabs button[aria-selected="true"] {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Iskelet (skeleton) — parilti animasyonu motion.css'te
   -------------------------------------------------------------------------- */
.skeleton {
  background-color: var(--color-surface-2);
  border-radius: var(--radius-sm);
  background-image: linear-gradient(90deg, transparent, var(--color-surface-hover), transparent);
  background-size: 200% 100%;
  animation: sanatekibi-shimmer 1.2s ease-in-out infinite;
}
.skeleton-line { height: 12px; margin-bottom: var(--space-sm); }
.skeleton-line.short { width: 55%; }

/* --------------------------------------------------------------------------
   Toast bildirimi
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  right: var(--space-md);
  bottom: calc(var(--space-md) + 64px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: var(--z-toast);
  max-width: min(360px, calc(100vw - 2 * var(--space-md)));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-main);
  font-size: var(--text-sm);
}