/* ==========================================================================
   admin.css — Etkinlik yaratma ekranı
   app.css'in paylaşılan bileşenlerini (join-card, field, input, btn-submit,
   alert, brand, eyebrow) kullanır; burada yalnız admin'e özgü düzen var.
   ========================================================================== */

.admin {
  min-height: 100dvh; background: var(--surface);
  display: flex; justify-content: center;
  padding: var(--space-56) var(--space-56) var(--space-64);
}

.admin__inner {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: var(--space-24);
}

.admin__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16);
}
.admin__head-text { display: flex; flex-direction: column; gap: var(--space-8); }
.admin__title {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-40); line-height: var(--leading-tight);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-tightest);
}

.admin__new-btn {
  flex: none; border: none; border-radius: var(--radius-10);
  padding: var(--space-10) var(--space-16);
  font-size: var(--text-14); font-weight: var(--weight-semibold);
  background: var(--ink); color: var(--on-ink); cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease);
}
.admin__new-btn:hover { opacity: 0.88; }

/* Kart üst şeridi bir eyleme de yer açtığında (form iptali) tek satırda dağılır. */
.join-card__head--row { display: flex; align-items: center; justify-content: space-between; }
.head-action {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-13); font-weight: var(--weight-medium);
  text-transform: none; letter-spacing: 0; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.head-action:hover { color: var(--ink); }

.admin-card__body { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-20); }

/* --- Etkinlik listesi — klasör görünümü ------------------------------------ */
.folder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.folder-row { display: flex; align-items: center; gap: var(--space-8); border-bottom: 1px solid var(--border); }
.folder-row:last-child { border-bottom: none; }

.folder-row__link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-14);
  padding: var(--space-14) var(--space-20); color: inherit; text-decoration: none;
  transition: background var(--duration-fast) var(--ease);
}
.folder-row__link:hover { background: var(--surface-2); }

.folder-row__icon {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-10);
  background: var(--surface-2); color: var(--muted-2);
  display: flex; align-items: center; justify-content: center;
}
.folder-row__icon svg { width: 18px; height: 18px; display: block; }

.folder-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.folder-row__name {
  font-size: var(--text-15); font-weight: var(--weight-semibold); color: var(--ink);
  overflow-wrap: anywhere;
}
.folder-row__meta { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.folder-row__slug {
  font-family: var(--font-mono); font-size: var(--text-12); color: var(--muted);
  background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-6);
  padding: var(--space-2) var(--space-7);
}
.folder-row__alt { font-size: var(--text-13); color: var(--muted); }

.folder-row__side { flex: none; display: flex; align-items: center; gap: var(--space-10); padding-right: var(--space-20); }
.folder-row__date { font-size: var(--text-13); color: var(--muted-2); white-space: nowrap; }
.folder-row__copy-icon, .folder-row__check-icon { display: flex; }
.folder-row__delete:hover { background: var(--danger-bg); color: var(--danger); }
.folder-row__delete:disabled { opacity: 0.5; cursor: default; pointer-events: none; }

.field__optional, .field__required {
  font-weight: 400; color: var(--muted-2); text-transform: none; letter-spacing: 0;
}
.field__required { color: var(--danger); }
.field__hint { margin: 0; font-size: var(--text-13); color: var(--muted); }

/* Sabit önek (adres kökü) + düzenlenebilir slug tek girdi gibi görünür. */
.slug-input {
  display: flex; align-items: stretch; border: 1px solid var(--border-strong);
  background: var(--field); border-radius: var(--radius-10); overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.slug-input:focus-within { border-color: var(--ink); background: var(--card); }
.slug-input__root {
  display: flex; align-items: center;
  padding: var(--space-12) 0 var(--space-12) var(--space-14);
  font-family: var(--font-mono); font-size: var(--text-15); color: var(--muted);
  white-space: nowrap;
}
.slug-input__field { border: none; background: transparent; border-radius: 0; text-transform: uppercase; }
.slug-input__field:focus { border: none; background: transparent; }

.admin-uploads { display: flex; flex-direction: column; gap: var(--space-16); }

.upload-input {
  width: 100%; font-size: var(--text-14); color: var(--ink-3);
  border: 1px dashed var(--border-strong); background: var(--field);
  border-radius: var(--radius-10); padding: var(--space-12) var(--space-14);
  cursor: pointer;
}
.upload-input::file-selector-button {
  margin-right: var(--space-12); border: none; border-radius: var(--radius-6);
  padding: var(--space-6) var(--space-12); font-size: var(--text-13);
  font-weight: var(--weight-semibold); background: var(--ink); color: var(--on-ink);
  cursor: pointer;
}

.upload-preview {
  display: block; margin-top: var(--space-10);
  width: 120px; max-width: 100%; height: 120px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-10);
  background: var(--field); object-fit: contain; padding: var(--space-8);
}
.upload-preview--banner { object-fit: cover; padding: 0; }

.admin-submit { width: 100%; }