/* ════════════════════════════════════════════════════════════════
   NUMAP Components v1.0
   - Token'ları kullanan ortak bileşen sınıfları
   - .np-* prefix; React inline stillere dokunmaz (B testleri korunur)
   - Mevcut numap-ui-patch.js inline stilleri çalışmaya devam eder;
     bu sınıflar yeni/yenilenecek alanlarda kullanılır.
   ════════════════════════════════════════════════════════════════ */

/* ───────── BUTON ───────── */
.np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--np-space-2);
  padding: 0 var(--np-space-4);
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--np-radius-md);
  font-family: var(--np-font-family);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--np-transition-fast) var(--np-easing),
              border-color var(--np-transition-fast) var(--np-easing),
              box-shadow var(--np-transition-fast) var(--np-easing),
              transform 0.05s ease,
              color var(--np-transition-fast) var(--np-easing);
  -webkit-tap-highlight-color: transparent;
}
.np-btn:focus-visible { outline: none; box-shadow: var(--np-shadow-focus); }
.np-btn:active        { transform: translateY(1px); }
.np-btn:disabled,
.np-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* Boyutlar */
.np-btn--sm { height: 30px; padding: 0 var(--np-space-3); font-size: var(--np-text-sm); border-radius: var(--np-radius-sm); }
.np-btn--lg { height: 44px; padding: 0 var(--np-space-6); font-size: var(--np-text-md); border-radius: var(--np-radius-lg); }

/* Varyantlar */
.np-btn--primary {
  background: var(--np-color-primary);
  color: #fff;
  box-shadow: 0 1px 2px var(--np-color-primary-ring);
}
.np-btn--primary:hover:not(:disabled)  { background: var(--np-color-primary-hover); }

.np-btn--secondary {
  background: var(--np-color-bg);
  color: var(--np-color-text);
  border-color: var(--np-color-border-strong);
}
.np-btn--secondary:hover:not(:disabled){ background: var(--np-color-bg-muted); border-color: var(--np-color-text-faint); }

.np-btn--ghost {
  background: transparent;
  color: var(--np-color-text-muted);
}
.np-btn--ghost:hover:not(:disabled)    { background: var(--np-color-bg-muted); color: var(--np-color-text); }

.np-btn--danger {
  background: var(--np-color-danger);
  color: #fff;
  box-shadow: 0 1px 2px rgba(239,68,68,0.35);
}
.np-btn--danger:hover:not(:disabled)   { background: var(--np-color-danger-hover); }

.np-btn--success {
  background: var(--np-color-success);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16,185,129,0.30);
}
.np-btn--success:hover:not(:disabled)  { background: var(--np-color-success-hover); }

.np-btn--outline-danger {
  background: var(--np-color-bg);
  color: var(--np-color-danger);
  border-color: var(--np-color-danger);
}
.np-btn--outline-danger:hover:not(:disabled) { background: var(--np-color-danger-soft); }

/* İkon-only */
.np-btn--icon { width: 36px; padding: 0; }
.np-btn--icon.np-btn--sm { width: 30px; }
.np-btn--icon.np-btn--lg { width: 44px; }

/* ───────── INPUT / SELECT / TEXTAREA ───────── */
.np-input,
.np-select,
.np-textarea {
  width: 100%;
  padding: var(--np-space-2) var(--np-space-3);
  height: 36px;
  border: 1px solid var(--np-color-border-strong);
  border-radius: var(--np-radius-md);
  font-family: var(--np-font-family);
  font-size: var(--np-text-md);
  color: var(--np-color-text);
  background: var(--np-color-bg);
  box-sizing: border-box;
  transition: border-color var(--np-transition-fast) var(--np-easing),
              box-shadow var(--np-transition-fast) var(--np-easing);
}
.np-textarea { height: auto; min-height: 96px; line-height: var(--np-leading-normal); resize: vertical; }
.np-input:focus,
.np-select:focus,
.np-textarea:focus {
  outline: none;
  border-color: var(--np-color-border-focus);
  box-shadow: var(--np-shadow-focus);
}
.np-input:disabled,
.np-select:disabled,
.np-textarea:disabled {
  background: var(--np-color-bg-muted);
  color: var(--np-color-text-subtle);
  cursor: not-allowed;
}
.np-input::placeholder,
.np-textarea::placeholder { color: var(--np-color-text-faint); }
.np-input--error,
.np-select--error,
.np-textarea--error {
  border-color: var(--np-color-danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}

.np-label {
  display: block;
  font-size: var(--np-text-sm);
  font-weight: var(--np-weight-medium);
  color: var(--np-color-text-muted);
  margin-bottom: var(--np-space-1);
}
.np-help { font-size: var(--np-text-xs); color: var(--np-color-text-subtle); margin-top: var(--np-space-1); }
.np-help--error { color: var(--np-color-danger); }

/* ───────── BADGE ───────── */
.np-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-1);
  padding: 2px var(--np-space-2);
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-semibold);
  border-radius: var(--np-radius-sm);
  white-space: nowrap;
  line-height: 1.5;
}
.np-badge--primary { background: var(--np-color-primary-soft); color: var(--np-color-primary); }
.np-badge--accent  { background: var(--np-color-accent-soft);  color: var(--np-color-accent); }
.np-badge--success { background: var(--np-color-success-soft); color: #166534; }
.np-badge--warning { background: var(--np-color-warning-soft); color: #92400e; }
.np-badge--danger  { background: var(--np-color-danger-soft);  color: #991b1b; }
.np-badge--neutral { background: var(--np-color-bg-muted);     color: var(--np-color-text-subtle); }

/* ───────── KART ───────── */
.np-card {
  background: var(--np-color-bg);
  border: 1px solid var(--np-color-border);
  border-radius: var(--np-radius-lg);
  padding: var(--np-space-5);
  box-shadow: var(--np-shadow-sm);
}
.np-card--soft     { background: var(--np-color-bg-soft); }
.np-card--feature  { padding: var(--np-space-6); border-radius: var(--np-radius-xl); box-shadow: var(--np-shadow-md); }
.np-card--elevated { box-shadow: var(--np-shadow-md); }
.np-card--accent   { border-color: var(--np-color-primary-ring); box-shadow: 0 2px 8px rgba(124,58,237,0.08); }

.np-card__title {
  font-size: var(--np-text-lg);
  font-weight: var(--np-weight-bold);
  color: var(--np-color-text);
  margin-bottom: var(--np-space-3);
}
.np-card__subtitle {
  font-size: var(--np-text-sm);
  color: var(--np-color-text-subtle);
  margin-top: calc(-1 * var(--np-space-2));
  margin-bottom: var(--np-space-3);
}

/* ───────── SEKME (TAB BAR) ───────── */
.np-tabs {
  display: flex;
  gap: var(--np-space-1);
  border-bottom: 1px solid var(--np-color-border);
  background: var(--np-color-bg);
  padding: 0 var(--np-space-2);
  position: relative;
}
.np-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-2);
  padding: var(--np-space-3) var(--np-space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--np-font-family);
  font-size: var(--np-text-md);
  font-weight: var(--np-weight-semibold);
  color: var(--np-color-text-subtle);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--np-transition-fast) var(--np-easing),
              border-color var(--np-transition-fast) var(--np-easing),
              background var(--np-transition-fast) var(--np-easing);
}
.np-tab:hover                 { color: var(--np-color-text); background: var(--np-color-bg-soft); }
.np-tab[aria-selected="true"],
.np-tab--active               {
  color: var(--np-color-primary);
  border-bottom-color: var(--np-color-primary);
}
.np-tab:focus-visible         { outline: none; box-shadow: inset 0 0 0 2px var(--np-color-primary-ring); border-radius: var(--np-radius-sm); }
.np-tab__icon                 { font-size: 1.05em; line-height: 1; }
.np-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: var(--np-space-1);
  background: var(--np-color-bg-muted);
  color: var(--np-color-text-subtle);
  border-radius: var(--np-radius-pill);
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-bold);
}
.np-tab[aria-selected="true"] .np-tab__count,
.np-tab--active .np-tab__count {
  background: var(--np-color-primary-soft);
  color: var(--np-color-primary);
}

/* ───────── TOAST ───────── */
.np-toast {
  position: fixed;
  top: var(--np-space-6);
  right: var(--np-space-6);
  display: flex;
  align-items: center;
  gap: var(--np-space-2);
  padding: var(--np-space-3) var(--np-space-5);
  background: var(--np-color-text);
  color: #fff;
  border-radius: var(--np-radius-md);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-semibold);
  box-shadow: var(--np-shadow-lg);
  z-index: var(--np-z-toast);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--np-transition-slow), transform var(--np-transition-slow);
  font-family: var(--np-font-family);
}
.np-toast--show     { opacity: 1; transform: translateY(0); }
.np-toast--success  { background: var(--np-color-success); }
.np-toast--danger   { background: var(--np-color-danger); }
.np-toast--warning  { background: var(--np-color-warning); color: #1e293b; }
.np-toast--info     { background: var(--np-color-accent); }

/* ───────── EMPTY STATE ───────── */
.np-empty {
  text-align: center;
  padding: var(--np-space-12) var(--np-space-5);
  color: var(--np-color-text-faint);
}
.np-empty__icon  { font-size: 48px; margin-bottom: var(--np-space-3); opacity: 0.6; }
.np-empty__title { font-size: var(--np-text-md); font-weight: var(--np-weight-medium); color: var(--np-color-text-subtle); margin-bottom: var(--np-space-1); }
.np-empty__hint  { font-size: var(--np-text-sm); }

/* ───────── SKELETON (yükleme iskeletleri) ───────── */
@keyframes np-skeleton-pulse {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.np-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--np-color-bg-muted) 0%, #e5edf5 50%, var(--np-color-bg-muted) 100%);
  background-size: 200% 100%;
  border-radius: var(--np-radius-sm);
  animation: np-skeleton-pulse 1.5s ease-in-out infinite;
}
.np-skeleton--text   { height: var(--np-text-md); margin: var(--np-space-1) 0; }
.np-skeleton--title  { height: var(--np-text-lg); margin: var(--np-space-2) 0; }
.np-skeleton--avatar { width: 36px; height: 36px; border-radius: var(--np-radius-pill); }
.np-skeleton--card   { height: 120px; border-radius: var(--np-radius-lg); }

/* ───────── RESPONSIVE TUTARLILIK (sade breakpoint seti) ───────── */
@media (max-width: 768px) {
  .np-card             { padding: var(--np-space-4); border-radius: var(--np-radius-md); }
  .np-card--feature    { padding: var(--np-space-5); }
  .np-tabs             { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .np-tabs::-webkit-scrollbar { display: none; }
  .np-tab              { padding: var(--np-space-3); font-size: var(--np-text-base); }
  .np-toast            { top: var(--np-space-3); right: var(--np-space-3); left: var(--np-space-3); }
}
@media (max-width: 480px) {
  .np-btn              { height: 38px; }   /* dokunmatik için biraz büyük */
  .np-btn--sm          { height: 32px; }
  .np-input,
  .np-select           { height: 40px; font-size: var(--np-text-md); }
}