/* ============================================================
   Page: genel_tanimlar — kart-grid tanım yöneticisi (eski parite).
   Her tanım türü renkli ikonlu bir kart; satır-içi ekleme + renkli
   etiket pill'leri + global arama + stats chip'leri.
   ============================================================ */
.def-intro { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

/* — Stats chip satırı — */
.def-stats { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.def-stat-chip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
}
.def-stat-chip strong { color: var(--navy); font-size: var(--fs-base); }
.def-stat-chip svg { width: 15px; height: 15px; color: var(--brand); }

/* — Yeni ana kategori ekle alanı — */
.def-add-area {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.def-add-ico { display: flex; align-items: center; color: var(--brand); }
.def-add-ico svg { width: 20px; height: 20px; }
.def-add-input {
  flex: 1; min-width: 220px; padding: 10px var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  outline: none; transition: var(--transition);
}
.def-add-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.def-add-input::placeholder { color: var(--text-faint); }
.def-add-cat-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 10px var(--space-5); border-radius: var(--radius); border: none;
  background: var(--brand); color: #fff; cursor: pointer; box-shadow: var(--shadow-sm);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.def-add-cat-btn:hover { background: var(--brand-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.def-add-cat-btn:active { background: var(--brand-dark); transform: translateY(0); box-shadow: var(--shadow-sm); }
.def-add-cat-btn svg { width: 15px; height: 15px; }

/* — Kart grid — */
.def-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

.def-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: var(--transition);
}
.def-card:hover { box-shadow: var(--shadow); }

.def-card-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.def-card-ico {
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.def-card-ico svg { width: 17px; height: 17px; }
.def-card-title { flex: 1; font-size: var(--fs-base); font-weight: 800; color: var(--navy); }
.def-card-count {
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: rgba(70, 62, 124, .08); color: var(--navy);
}
.def-card-del {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; transition: var(--transition);
}
.def-card-del svg { width: 15px; height: 15px; }
.def-card-del:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
/* — Ana gider (kategori başlığı) yeniden adlandır — */
.def-card-rename {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; transition: var(--transition);
}
.def-card-rename svg { width: 14px; height: 14px; }
.def-card-rename:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-glow); }
.def-cat-edit {
  flex: 1; min-width: 0; padding: 5px 9px;
  border-radius: var(--radius-sm); border: 1px solid var(--brand);
  background: var(--surface); font: inherit; font-size: var(--fs-base);
  font-weight: 800; color: var(--navy); outline: none;
}
.def-card-body { padding: var(--space-4) var(--space-5); }

/* — Satır-içi ekleme — */
.def-input-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.def-input {
  flex: 1; padding: 9px var(--space-3); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  outline: none; transition: var(--transition);
}
.def-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.def-input::placeholder { color: var(--text-faint); }
.def-add-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px var(--space-4); border-radius: var(--radius); border: none;
  background: var(--brand); color: #fff; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; transition: var(--transition);
}
.def-add-btn:hover { background: var(--brand-light); }
.def-add-btn svg { width: 15px; height: 15px; }

/* — Etiket pill'leri — */
.def-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 34px; align-items: flex-start; }
.def-tags:empty::after {
  content: 'Henüz tanım eklenmedi';
  font-size: var(--fs-sm); font-weight: 600; font-style: italic; color: var(--text-faint);
}
.def-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 700; border: 1px solid transparent;
  animation: defTagIn .18s ease;
}
@keyframes defTagIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.def-tag-txt { line-height: 1; }
.def-tag-rm {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: var(--radius-full); border: none;
  background: rgba(0, 0, 0, .1); color: inherit; cursor: pointer;
  opacity: .55; transition: var(--transition);
}
.def-tag-rm svg { width: 11px; height: 11px; }
.def-tag:hover .def-tag-rm { opacity: 1; }
.def-tag-rm:hover { background: var(--red); color: #fff; }

/* — Yeniden adlandır (pill düzenle) — */
.def-tag-edit-btn {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: var(--radius-full); border: none;
  background: rgba(0, 0, 0, .1); color: inherit; cursor: pointer;
  opacity: 0; transition: var(--transition);
}
.def-tag-edit-btn svg { width: 10px; height: 10px; }
.def-tag:hover .def-tag-edit-btn { opacity: .55; }
.def-tag-edit-btn:hover { opacity: 1; background: var(--brand); color: #fff; }
.def-tag--editing { padding: 3px 6px; }
.def-tag-edit {
  width: 9ch; min-width: 70px; max-width: 220px; padding: 2px 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--brand);
  background: var(--surface); font: inherit; font-size: var(--fs-sm);
  font-weight: 700; color: var(--text); outline: none;
}

/* — Renk temaları (pill) — */
.def-tag--orange { background: rgba(200,82,30,.10);  color: var(--brand);     border-color: rgba(200,82,30,.20); }
.def-tag--navy   { background: rgba(70,62,124,.08);  color: var(--navy); border-color: rgba(70,62,124,.12); }
.def-tag--green  { background: rgba(39,174,96,.10);  color: var(--green);     border-color: rgba(39,174,96,.18); }
.def-tag--blue   { background: rgba(52,152,219,.10); color: var(--blue);     border-color: rgba(52,152,219,.18); }
.def-tag--pink   { background: rgba(232,67,147,.10); color: var(--pink);     border-color: rgba(232,67,147,.18); }
.def-tag--teal   { background: rgba(26,188,156,.10); color: var(--teal);     border-color: rgba(26,188,156,.18); }
.def-tag--amber  { background: rgba(243,156,18,.10); color: var(--yellow);     border-color: rgba(243,156,18,.18); }
.def-tag--slate  { background: rgba(99,110,114,.10); color: var(--text-muted);     border-color: rgba(99,110,114,.18); }

/* — İkon arka planları (kart başlığı) — */
.def-ico--orange { background: var(--brand); }
.def-ico--navy   { background: var(--navy); }
.def-ico--green  { background: var(--green); }
.def-ico--blue   { background: #3498DB; }
.def-ico--pink   { background: var(--pink); }
.def-ico--teal   { background: var(--teal); }
.def-ico--amber  { background: var(--yellow); }
.def-ico--slate  { background: #636E72; }

/* — Gider Tanımları'na özel: 2 seviyeli kart + sistem kilidi — */
.def-grid--gider .def-card-title { flex: 0 1 auto; }
.def-grid--gider .def-card-count { margin-left: auto; }
.def-sys-badge {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--radius-full);
  background: rgba(200, 82, 30, .10); color: var(--brand);
  border: 1px solid rgba(200, 82, 30, .20);
}
.def-sys-badge svg { width: 12px; height: 12px; }
/* Kilitli (sistem) alt gider pill'i: soluk, kilit ikonlu, aksiyon yok */
.def-tag--locked { opacity: .85; padding-right: 9px; }
.def-tag-lock { display: inline-flex; align-items: center; color: var(--text-muted); }
.def-tag-lock svg { width: 12px; height: 12px; }

@media (max-width: 900px) { .def-grid { grid-template-columns: 1fr; } }